Merge pull request #81 from Glazzes/dev

Pre 4.0.1

Author: Glazzes

docs/docs/guides/skia.md

@@ -49,7 +49,7 @@ basic structure with Skia first.
 import React from 'react';
 import { View, useWindowDimensions } from 'react-native';
 import { Canvas, Image, useImage } from '@shopify/react-native-skia';
-import { getAspectRatioSize } from 'react-native-zoom-toolkit';
+import { fitContainer } from 'react-native-zoom-toolkit';
 
 const uri =
   'https://assets-global.website-files.com/63634f4a7b868a399577cf37/64665685a870fadf4bb171c2_labrador%20americano.jpg';
@@ -62,12 +62,8 @@ const App = () => {
     return null;
   }
 
-  const resolution = { width: image.width(), height: image.height() };
-  // This is the size the image will take on the screen, not its resolution.
-  const imageSize = getAspectRatioSize({
-    aspectRatio: resolution.width / resolution.height,
-    width: width,
-  });
+  const aspectRatio = image.width() / image.height();
+  const imageSize = fitContainer(aspectRatio, { width, height });
 
   const x = 0;
   const y = (height - imageSize.height) / 2;
@@ -108,11 +104,11 @@ With our basic structure in place, let's address the two missing steps to make t
 
 Let's see how the end result looks like:
 
-```tsx{12,39,43-53}
+```tsx{12,40-48}
 import React from 'react';
 import { View, useWindowDimensions } from 'react-native';
 import { Canvas, Image, useImage } from '@shopify/react-native-skia';
-import { getAspectRatioSize, useTransformationState } from 'react-native-zoom-toolkit';
+import { fitContainer, ResumableZoom, useTransformationState } from 'react-native-zoom-toolkit';
 
 const uri =
   'https://assets-global.website-files.com/63634f4a7b868a399577cf37/64665685a870fadf4bb171c2_labrador%20americano.jpg';
@@ -126,11 +122,8 @@ const App = () => {
     return null;
   }
 
-  const resolution = { width: image.width(), height: image.height() };
-  const imageSize = getAspectRatioSize({
-    aspectRatio: resolution.width / resolution.height,
-    width: width,
-  });
+  const aspectRatio = image.width() / image.height();
+  const imageSize = fitContainer(aspectRatio, { width, height });
 
   const x = 0;
   const y = (height - imageSize.height) / 2;
@@ -151,17 +144,15 @@ const App = () => {
         />
       </Canvas>
 
-      {/* Same size and position (0, 0) as the canvas above */}
-      <View style={{ width, height, position: 'absolute' }}>
-        <ResumableZoom
-          maxScale={resolution}
-          extendGestures={true}
-          onUpdate={onUpdate}
-        >
-          {/* Nested child is the same size as the Skia image */}
-          <View style={{ width: imageSize.width, height: imageSize.height }} />
-        </ResumableZoom>
-      </View>
+      <ResumableZoom
+        style={{ width, height, position: 'absolute' }}
+        maxScale={resolution}
+        extendGestures={true}
+        onUpdate={onUpdate}
+      >
+        {/* Nested child is the same size as the Skia image */}
+        <View style={{ width: imageSize.width, height: imageSize.height }} />
+      </ResumableZoom>
     </View>
   );
 };

docs/docs/installation.md

@@ -9,8 +9,8 @@ This library relies on both Reanimated and Gesture Handler making part of your p
 
 | React Native Version | React Native Zoom Toolkit Version | Gesture Handler version |
 | -------------------- | --------------------------------- | ----------------------- |
-| `<= 0.76`            | `3.x.x`                           | 2.16.0 and beyond.      |
-| `>= 0.76`            | `4.x.x`                           | 2.19.0 and beyond.      |
+| `<= 0.76`            | `>= 3.0.0`                        | 2.16.0 and beyond.      |
+| `>= 0.76`            | `>= 4.0.0`                        | 2.19.0 and beyond.      |
 
 ::: code-group
 

docs/docs/utilities/usetransformationstate.md

@@ -10,12 +10,12 @@ your choice, for a hands on example see [How to use with Skia Components](../gui
 
 ## How to use
 
-When calling this hook it will provide you with the three following properties:
+When calling this hook you will receive the three following properties:
 
 - `onUpdate` is a worklet function which must be passed as a property to the zoom component's onUpdate
   callback property, this way the zoom component will update transform and state properties.
-- `transform` is a shared value containing the transformation array of the zoom component.
-- `state` is an object holding the shared values describing the current transformation state in case
+- `transform` is a shared value describing zoom component's current transformations as an array.
+- `state` is an object holding the shared values describing the current transformation state, in case
   you need them.
 
 ```tsx{9,21}

src/components/resumable/ResumableZoom.tsx

@@ -12,7 +12,6 @@ import { clamp } from '../../commons/utils/clamp';
 import { useVector } from '../../commons/hooks/useVector';
 import { getMaxScale } from '../../commons/utils/getMaxScale';
 import { useSizeVector } from '../../commons/hooks/useSizeVector';
-import { pinchTransform } from '../../commons/utils/pinchTransform';
 import { usePanCommons } from '../../commons/hooks/usePanCommons';
 import { usePinchCommons } from '../../commons/hooks/usePinchCommons';
 import { useDoubleTapCommons } from '../../commons/hooks/useDoubleTapCommons';
@@ -250,36 +249,6 @@ const ResumableZoom: React.FC<ResumableZoomPropsWithRef> = (props) => {
     set(toX, toY, toScale, animate);
   };
 
-  const zoom = (multiplier: number, xy?: Vector<number>) => {
-    let originX = -1 * (translate.x.value / scale.value);
-    let originY = -1 * (translate.y.value / scale.value);
-    const toScale = clamp(scale.value * multiplier, minScale, maxScale.value);
-
-    if (xy !== undefined) {
-      const diffX = xy.x / childSize.width.value;
-      const diffY = xy.y / childSize.height.value;
-      const actualX = extendGestures ? diffX * extendedSize.width.value : xy.x;
-      const actualY = extendGestures ? diffY * extendedSize.height.value : xy.y;
-
-      originX = actualX - extendedSize.width.value / 2;
-      originY = actualY - extendedSize.height.value / 2;
-    }
-
-    const { x, y } = pinchTransform({
-      toScale,
-      fromScale: scale.value,
-      origin: { x: originX, y: originY },
-      offset: { x: translate.x.value, y: translate.y.value },
-      delta: { x: 0, y: 0 },
-    });
-
-    const { x: boundX, y: boundY } = boundsFn(toScale);
-    const toX = clamp(x, -1 * boundX, boundX);
-    const toY = clamp(y, -1 * boundY, boundY);
-
-    set(toX, toY, toScale, true);
-  };
-
   const getVisibleRect = (): Rect => {
     return getRect({
       scale: scale.value,
@@ -295,6 +264,36 @@ const ResumableZoom: React.FC<ResumableZoomPropsWithRef> = (props) => {
     });
   };
 
+  const zoom = (multiplier: number, xy?: Vector<number>) => {
+    const toScale = scale.value * multiplier;
+
+    let focal = xy;
+    if (focal === undefined) {
+      const frame = getVisibleRect();
+      focal = {
+        x: frame.x + frame.width / 2,
+        y: frame.y + frame.height / 2,
+      };
+    }
+
+    const centerX = childSize.width.value / 2;
+    const centerY = childSize.height.value / 2;
+
+    const originX = focal.x - centerX;
+    const originY = focal.y - centerY;
+    const signedDistanceCenterX = centerX - focal.x;
+    const signedDistanceCenterY = centerY - focal.y;
+
+    const translateX = signedDistanceCenterX + (originX - originX * toScale);
+    const translateY = signedDistanceCenterY + (originY - originY * toScale);
+
+    const { x: boundX, y: boundY } = boundsFn(toScale);
+    const toX = clamp(translateX, -1 * boundX, boundX);
+    const toY = clamp(translateY, -1 * boundY, boundY);
+
+    set(toX, toY, toScale, true);
+  };
+
   useImperativeHandle(reference, () => ({
     reset: (animate = true) => set(0, 0, minScale, animate),
     requestState: requestState,