MediaViewer:ImageViewer Refactoring rotate

packages/shared/components/media-viewer/sub-components/ImageViewer/index.tsx

@@ -221,6 +221,9 @@ export const ImageViewer = ({
       width,
       height,
       scale: 1,
+      config: {
+        duration: 300,
+      },
     });
   }, [api, style.scale]);
 
@@ -239,9 +242,7 @@ export const ImageViewer = ({
 
   const rotateImage = useCallback(
     (dir: number) => {
-      if (style.rotate.isAnimating) return;
-
-      const rotate = style.rotate.get() + dir * 90;
+      const rotate = style.rotate.goal + dir * 90;
 
       const point = calculateAdjustImage(
         calculateAdjustBounds(style.x.get(), style.y.get(), 1, rotate),
@@ -272,8 +273,7 @@ export const ImageViewer = ({
 
   const zoomOut = useCallback(() => {
     if (
-      style.scale.isAnimating ||
-      style.scale.get() <= MinScale ||
+      style.scale.goal <= MinScale ||
       !imgRef.current ||
       !containerRef.current
     )
@@ -296,7 +296,10 @@ export const ImageViewer = ({
 
     const ratio = scaleCurrent / style.scale.get();
 
-    const point = calculateAdjustImage(calculateAdjustBounds(dx, dy, ratio));
+    const point = calculateAdjustImage(
+      calculateAdjustBounds(dx, dy, ratio),
+      ratio,
+    );
     toolbarRef.current?.setPercentValue(scaleCurrent);
 
     api.start({
@@ -305,15 +308,19 @@ export const ImageViewer = ({
       config: {
         duration: 300,
       },
-      onResolve: (result) => {
+      onResolve(result) {
+        if (style.scale.isAnimating) return;
+
         api.start({
-          ...calculateAdjustImage({
-            x: result.value.x,
-            y: result.value.y,
-          }),
+          ...calculateAdjustImage(
+            calculateAdjustBounds(
+              result.value.x,
+              result.value.y,
+              result.value.scale / style.scale.get(),
+            ),
+          ),
           config: {
-            ...config.default,
-            duration: 100,
+            duration: 250,
           },
         });
       },
@@ -322,8 +329,7 @@ export const ImageViewer = ({
 
   const zoomIn = useCallback(() => {
     if (
-      style.scale.isAnimating ||
-      style.scale.get() >= MaxScale ||
+      style.scale.goal >= MaxScale ||
       !imgRef.current ||
       !containerRef.current
     )
@@ -343,7 +349,9 @@ export const ImageViewer = ({
       style.scale.get() + DefaultSpeedScale,
       MaxScale,
     );
+
     toolbarRef.current?.setPercentValue(scaleCurrent);
+
     api.start({
       x: dx,
       y: dy,
@@ -351,8 +359,24 @@ export const ImageViewer = ({
       config: {
         duration: 300,
       },
+      onResolve(result) {
+        if (style.scale.isAnimating) return;
+
+        api.start({
+          ...calculateAdjustImage(
+            calculateAdjustBounds(
+              result.value.x,
+              result.value.y,
+              result.value.scale / style.scale.get(),
+            ),
+          ),
+          config: {
+            duration: 250,
+          },
+        });
+      },
     });
-  }, [api, style.scale, style.x, style.y]);
+  }, [api, calculateAdjustBounds, style.scale, style.x, style.y]);
 
   const onKeyDown = useCallback(
     (event: KeyboardEvent) => {
@@ -432,11 +456,15 @@ export const ImageViewer = ({
     api.start({
       ...point,
       scale: newScale,
-      config: config.default,
+      config: {
+        duration: 300,
+      },
       // onChange(result) {
       //   api.start(maybeAdjustImage({ x: dx, y: dy }));
       // },
       onResolve() {
+        if (!style.scale.isAnimating) return;
+
         api.start(calculateAdjustImage(calculateAdjustBounds(dx, dy, 1)));
       },
     });
@@ -735,6 +763,7 @@ export const ImageViewer = ({
             duration: 300,
           },
           onResolve(result) {
+            if (style.x.isAnimating) return;
             api.start(
               calculateAdjustImage(
                 calculateAdjustBounds(result.value.x, result.value.y),