jayantbh · jayantbh · Jun 1, 2020 · Jun 1, 2020 · Jun 1, 2020
diff --git a/examples/index.tsx b/examples/index.tsx
@@ -99,6 +99,14 @@ const App = () => {
     setBoxInView({ id });
   };
 
+  const reset = () => {
+    setRotation(0);
+    setZoom(1);
+    resetCenter();
+  };
+
+  useEffect(reset, [src]);
+
   const cropperRef = useRef<HTMLDivElement | null>(null);
 
   return (
@@ -112,34 +120,7 @@ const App = () => {
       >
         Toggle Mode [{cursorMode}]
       </button>
-      <button
-        onClick={() => {
-          const el = cropperRef.current;
-          const img = cropperRef.current?.querySelector('img');
-          if (!el || !img) return;
-
-          const h = el.clientHeight / img.clientHeight;
-          const w = el.clientWidth / img.clientWidth;
-
-          const zoomRatio = Math.min(h, w);
-          const newBoxes =
-            fileBoxesMap[src]?.map((box) => ({
-              ...box,
-              x: box.x * zoomRatio,
-              y: box.y * zoomRatio,
-              height: box.height * zoomRatio,
-              width: box.width * zoomRatio,
-            })) || [];
-
-          setFileBoxesMap({ ...fileBoxesMap, [src]: newBoxes });
-
-          setRotation(0);
-          setZoom(1);
-          resetCenter();
-        }}
-      >
-        Reset
-      </button>
+      <button onClick={reset}>Reset</button>
       <button
         onClick={() => {
           const boxes = fileBoxesMap?.[src];

diff --git a/src/components/MultiCrops.helpers.ts b/src/components/MultiCrops.helpers.ts
@@ -401,29 +401,6 @@ export const useCentering = (
   return [centerCoords, setCenterCoords];
 };
 
-export const usePropResize = (
-  width: number,
-  height: number,
-  onCrop: CropperProps['onCrop'],
-  drawCanvas: () => ReturnType<typeof performCanvasPaint>,
-  getSelections: (
-    boxes?: CropperProps['boxes'],
-    eventType?: CropperEventType
-  ) => ReturnType<typeof getImageMapFromBoxes>,
-  modifiable: CropperProps['modifiable'] = true
-) => {
-  if (!modifiable || !height || !width) return;
-  const propSizeTimeout = useRef<number | NodeJS.Timeout>(-1);
-
-  useEffect(() => {
-    clearTimeout(propSizeTimeout.current);
-    propSizeTimeout.current = setTimeout(() => {
-      drawCanvas();
-      onCrop?.({ type: 'manual-resize' }, getSelections(), undefined);
-    }, imageDebounceTime);
-  }, [width, height]);
-};
-
 export const onImageLoad = (
   lastUpdatedBox: MutableRefObject<RefSize | undefined>,
   onLoad: CropperProps['onLoad'],
@@ -435,7 +412,10 @@ export const onImageLoad = (
   cont: HTMLDivElement | null,
   setCenterCoords: Dispatch<SetStateAction<Coordinates>>,
   setStaticPanCoords: Dispatch<SetStateAction<Coordinates>>,
-  getUpdatedDimensions: (doStateUpdate?: boolean) => any
+  getUpdatedDimensions: (args: {
+    doStateUpdate?: boolean;
+    eventType: CropperEventType;
+  }) => any
 ): ReactEventHandler<HTMLImageElement> => (e) => {
   const img = e.currentTarget;
   if (!img || !cont) return;
@@ -452,7 +432,7 @@ export const onImageLoad = (
   requestAnimationFrame(() => {
     drawCanvas();
     onLoad?.(getSelections(undefined, 'load'), () => {
-      getUpdatedDimensions();
+      getUpdatedDimensions({ doStateUpdate: true, eventType: 'load' });
       setCenterCoords({
         x: (imgRect.left + imgRect.right - contRect.left * 2) / 2,
         y: (imgRect.top + imgRect.bottom - contRect.top * 2) / 2,

diff --git a/src/components/MultiCrops.tsx b/src/components/MultiCrops.tsx
@@ -37,7 +37,6 @@ import {
   useCentering,
   useMounting,
   usePrevious,
-  usePropResize,
   usePropRotation,
   useScrollbars,
   useWorker,
@@ -48,8 +47,6 @@ const blankCoords: Partial<Coordinates> = { x: undefined, y: undefined };
 const blankStyles = {};
 
 type Dimensions = {
-  imgRectHeight: number;
-  imgRectWidth: number;
   imgBaseHeight: number;
   imgBaseWidth: number;
 };
@@ -111,19 +108,21 @@ const MultiCrops: FC<CropperProps> = ({
     y: Number.isFinite(yScale) ? yScale * scalingFactor : scalingFactor,
   };
 
-  const [
-    { imgRectHeight, imgRectWidth, imgBaseHeight, imgBaseWidth },
-    setDimensions,
-  ] = useState<Dimensions>({
-    imgRectHeight: 0,
-    imgRectWidth: 0,
-    imgBaseHeight: 0,
-    imgBaseWidth: 0,
-  });
+  const [{ imgBaseHeight, imgBaseWidth }, setDimensions] = useState<Dimensions>(
+    {
+      imgBaseHeight: 0,
+      imgBaseWidth: 0,
+    }
+  );
 
-  const getUpdatedDimensions = (
-    doStateUpdate = true
-  ): undefined | Dimensions => {
+  const srcBaseZoomMap = useRef({});
+  const getUpdatedDimensions = ({
+    doStateUpdate = true,
+    eventType,
+  }: {
+    doStateUpdate?: boolean;
+    eventType: CropperEventType;
+  }): undefined | Dimensions => {
     if (!imageRef.current?.complete || srcChanged) return;
 
     const imageRefHeight = imageRef.current?.naturalHeight || 0;
@@ -138,16 +137,30 @@ const MultiCrops: FC<CropperProps> = ({
         : (containerRefHeight || 1) / (imageRefHeight || 1);
     const imgBaseHeight = (imageRefHeight || 0) * newZoomOffset;
     const imgBaseWidth = (imageRefWidth || 0) * newZoomOffset;
-    const { height = 0, width = 0 } =
-      imageRef.current?.getBoundingClientRect() || {};
 
     const fields: Dimensions = {
-      imgRectHeight: height,
-      imgRectWidth: width,
       imgBaseHeight,
       imgBaseWidth,
     };
 
+    const oldZoomOffset = srcBaseZoomMap.current[props.src] || newZoomOffset;
+
+    srcBaseZoomMap.current = {
+      ...srcBaseZoomMap.current,
+      [props.src]: newZoomOffset,
+    };
+
+    const ratio = newZoomOffset / oldZoomOffset;
+
+    const newBoxes = props.boxes.map((box) => ({
+      ...box,
+      x: box.x * ratio,
+      y: box.y * ratio,
+      height: box.height * ratio,
+      width: box.width * ratio,
+    }));
+
+    props.onChange?.({ type: eventType }, undefined, undefined, newBoxes);
     doStateUpdate && setDimensions(fields);
     return fields;
   };
@@ -158,16 +171,8 @@ const MultiCrops: FC<CropperProps> = ({
   );
 
   useEffect(() => {
-    getUpdatedDimensions();
-  }, [
-    props.src,
-    zoom,
-    srcChanged,
-    imageRef.current,
-    imageRef.current,
-    containerRef.current,
-    containerRef.current,
-  ]);
+    getUpdatedDimensions({ eventType: 'src-change' });
+  }, [props.src]);
 
   useEffect(() => {
     if (boxInView) {
@@ -256,15 +261,6 @@ const MultiCrops: FC<CropperProps> = ({
         );
   };
 
-  usePropResize(
-    imgRectWidth,
-    imgRectHeight,
-    props.onCrop,
-    drawCanvas,
-    getSelections,
-    props.modifiable
-  );
-
   usePropRotation(
     rotation,
     props.boxes,
@@ -320,7 +316,8 @@ const MultiCrops: FC<CropperProps> = ({
   });
 
   const onLoad = (e: SyntheticEvent<HTMLImageElement>) => {
-    getUpdatedDimensions();
+    console.log('loaded');
+    getUpdatedDimensions({ eventType: 'load' });
 
     onImageLoad(
       lastUpdatedBox,

diff --git a/src/types.ts b/src/types.ts
@@ -40,7 +40,7 @@ export type CropperEventType =
   | 'zoom'
   | 'drag'
   | 'delete'
-  | 'manual-resize'
+  | 'src-change'
   | 'rotate'
   | 'pan'
   | 'click'

diff --git a/yarn.lock b/yarn.lock
@@ -1340,7 +1340,7 @@
 
 "@rollup/plugin-typescript@^4.1.2":
   version "4.1.2"
-  resolved "https://unpm.uberinternal.com/@rollup%2fplugin-typescript/-/plugin-typescript-4.1.2.tgz#6f910430276ae3e53a47a12ad65820627e7b6ad9"
+  resolved "https://registry.npmjs.com/@rollup%2fplugin-typescript/-/plugin-typescript-4.1.2.tgz#6f910430276ae3e53a47a12ad65820627e7b6ad9"
   integrity sha1-b5EEMCdq4+U6R6Eq1lggYn57atk=
   dependencies:
     "@rollup/pluginutils" "^3.0.1"
@@ -1364,7 +1364,7 @@
 
 "@rollup/pluginutils@^3.0.1":
   version "3.0.10"
-  resolved "https://unpm.uberinternal.com/@rollup%2fpluginutils/-/pluginutils-3.0.10.tgz#a659b9025920378494cd8f8c59fbf9b3a50d5f12"
+  resolved "https://registry.npmjs.com/@rollup%2fpluginutils/-/pluginutils-3.0.10.tgz#a659b9025920378494cd8f8c59fbf9b3a50d5f12"
   integrity sha1-plm5AlkgN4SUzY+MWfv5s6UNXxI=
   dependencies:
     "@types/estree" "0.0.39"
@@ -7527,7 +7527,7 @@ resolve@^1.1.5, resolve@^1.4.0:
 
 resolve@^1.14.1:
   version "1.17.0"
-  resolved "https://unpm.uberinternal.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
+  resolved "https://registry.npmjs.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
   integrity sha1-sllBtUloIxzC0bt2p5y38sC/hEQ=
   dependencies:
     path-parse "^1.0.6"