Merge branch 'master' into v4.0.0

BetterTyped · Jun 28, 2024 · 93fa8c4 · 93fa8c4
2 parents a01837e + ea15dfe
commit 93fa8c4
Show file tree

Hide file tree

Showing 10 changed files with 149 additions and 66 deletions.
diff --git a/src/components/mini-map/mini-map.tsx b/src/components/mini-map/mini-map.tsx
@@ -56,11 +56,20 @@ export const MiniMap: React.FC<MiniMapProps> = ({
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const previewRef = useRef<HTMLDivElement | null>(null);
 
-  const computationCache = useRef({
-    scale: 1,
-    width: 0,
-    height: 0,
-  });
+  const getViewportSize = useCallback(() => {
+    if (instance.wrapperComponent) {
+      const rect = instance.wrapperComponent.getBoundingClientRect();
+
+      return {
+        width: rect.width,
+        height: rect.height,
+      };
+    }
+    return {
+      width: 0,
+      height: 0,
+    };
+  }, [instance.wrapperComponent]);
 
   const getContentSize = useCallback(() => {
     if (instance.contentComponent) {
@@ -127,7 +136,7 @@ export const MiniMap: React.FC<MiniMapProps> = ({
       mainRef.current.style.height = `${miniSize.height}px`;
     }
     if (previewRef.current) {
-      const size = getContentSize();
+      const size = getViewportSize();
       const scale = computeMiniMapScale();
       const previewScale = scale * (1 / instance.state.scale);
       const transform = instance.handleTransformStyles(

diff --git a/src/components/transform-component/transform-component.tsx b/src/components/transform-component/transform-component.tsx
@@ -2,6 +2,7 @@
 import React, { useContext, useEffect, useRef } from "react";
 
 import { Context } from "../transform-wrapper/transform-wrapper";
+import { baseClasses } from "../../constants/state.constants";
 
 import styles from "./transform-component.module.css";
 
@@ -45,13 +46,13 @@ export const TransformComponent: React.FC<Props> = ({
     <div
       {...wrapperProps}
       ref={wrapperRef}
-      className={`react-transform-wrapper ${styles.wrapper} ${wrapperClass}`}
+      className={`${baseClasses.wrapperClass} ${styles.wrapper} ${wrapperClass}`}
       style={wrapperStyle}
     >
       <div
         {...contentProps}
         ref={contentRef}
-        className={`react-transform-component ${styles.content} ${contentClass}`}
+        className={`${baseClasses.contentClass} ${styles.content} ${contentClass}`}
         style={contentStyle}
       >
         {children}

diff --git a/src/constants/state.constants.ts b/src/constants/state.constants.ts
@@ -1,4 +1,4 @@
-import { LibrarySetup, ReactZoomPanPinchState } from "../models/context.model";
+import { LibrarySetup, ReactZoomPanPinchState, ReactZoomPanPinchBaseClasses } from "../models/context.model";
 
 export const initialState: ReactZoomPanPinchState = {
   previousScale: 1,
@@ -88,3 +88,8 @@ export const initialSetup: LibrarySetup = {
     animationType: "easeOut",
   },
 };
+
+export const baseClasses: ReactZoomPanPinchBaseClasses = {
+  wrapperClass: "react-transform-wrapper",
+  contentClass: "react-transform-component",
+};
diff --git a/src/hooks/use-transform-component.tsx b/src/hooks/use-transform-component.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useEffect, useState } from "react";
 
 import { useTransformContext } from "./use-transform-context";
 import { getState } from "utils";
@@ -9,8 +9,22 @@ export function useTransformComponent<T>(
 ): T {
   const libraryContext = useTransformContext();
 
-  return useMemo(
-    () => callback(getState(libraryContext)),
-    [libraryContext, callback],
+  const [transformRender, setTransformRender] = useState<T>(
+    callback(getState(libraryContext)),
   );
+
+  useEffect(() => {
+    let mounted = true;
+    const unmount = libraryContext.onChange((ref) => {
+      if (mounted) {
+        setTransformRender(callback(getState(ref.instance)));
+      }
+    });
+    return () => {
+      unmount();
+      mounted = false;
+    };
+  }, [callback, libraryContext]);
+
+  return transformRender;
 }
diff --git a/src/models/context.model.ts b/src/models/context.model.ts
@@ -210,3 +210,8 @@ export type LibrarySetup = Pick<
       | "customTransform"
     >
   >;
+
+export type ReactZoomPanPinchBaseClasses = {
+  wrapperClass: string;
+  contentClass: string;
+};
diff --git a/src/stories/examples/content/content.stories.mdx b/src/stories/examples/content/content.stories.mdx
@@ -6,6 +6,7 @@ import { argsTypes } from "../../types/args.types.ts";
 import { normalizeArgs } from "../../utils";
 
 import exampleImg from "../../assets/small-image.jpg";
+import { useTransformComponent } from "../../../hooks";
 
 export const Template = (args) => (
   <TransformWrapper {...normalizeArgs(args)}>
@@ -41,61 +42,70 @@ export const Template = (args) => (
         >
           <div
             style={{
-              width: "100px",
-              height: "100px",
+              display: "flex",
+              overflow: "auto",
+              maxWidth: "100%",
               padding: "10px",
-              background: "red",
             }}
-            className="panningDisabled"
           >
-            Panning is DISABLED on this element
-          </div>
-          <div
-            style={{
-              width: "100px",
-              height: "100px",
-              padding: "10px",
-              background: "blue",
-            }}
-            className="wheelDisabled"
-          >
-            Wheel is DISABLED on this element
-          </div>
-          <div
-            style={{
-              width: "100px",
-              height: "100px",
-              padding: "10px",
-              background: "green",
-            }}
-            className="pinchDisabled"
-          >
-            Pinch is DISABLED on this element
+            <div
+              style={{
+                width: "100px",
+                height: "100px",
+                padding: "10px",
+                background: "red",
+              }}
+              className="panningDisabled"
+            >
+              Panning is DISABLED on this element
+            </div>
+            <div
+              style={{
+                width: "100px",
+                height: "100px",
+                padding: "10px",
+                background: "blue",
+              }}
+              className="wheelDisabled"
+            >
+              Wheel is DISABLED on this element
+            </div>
+            <div
+              style={{
+                width: "100px",
+                height: "100px",
+                padding: "10px",
+                background: "green",
+              }}
+              className="pinchDisabled"
+            >
+              Pinch is DISABLED on this element
+            </div>
           </div>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum
+          </p>
+          <img src={exampleImg} alt="" />
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum
+          </p>
         </div>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum
-        </p>
-        <img src={exampleImg} alt="" />
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum
-        </p>
-      </div>
-    </TransformComponent>
-  </TransformWrapper>
-);
+      </TransformComponent>
+    </TransformWrapper>
+  );
+};
 
 <Meta
   title="Examples/Mixed Content"

diff --git a/src/stories/examples/zoom-to-element/example.tsx b/src/stories/examples/zoom-to-element/example.tsx
@@ -2,9 +2,16 @@ import React from "react";
 
 import { TransformComponent, TransformWrapper } from "components";
 import { normalizeArgs } from "../../utils";
+import { useTransformComponent } from "../../../hooks";
 
 import styles from "../../utils/styles.module.css";
 
+const CurrentScale = () => {
+  return useTransformComponent(({ state }) => {
+    return <div>Current Scale: {state.scale}</div>;
+  });
+};
+
 export const Example: React.FC<any> = (args: any) => {
   return (
     <TransformWrapper
@@ -60,6 +67,7 @@ export const Example: React.FC<any> = (args: any) => {
               maxHeight: "calc(100vh - 50px)",
             }}
           >
+            <CurrentScale />
             <div
               style={{
                 background: "#444",

diff --git a/src/stories/hooks/use-transform-component.stories.mdx b/src/stories/hooks/use-transform-component.stories.mdx
@@ -0,0 +1,27 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="Hooks/useTransformComponent" />
+
+# useTransformComponent
+
+This hooks allows to easily connect with lifecycle into the Zoom-Pan-Pinch state
+for rendering a component. It will trigger the provided callback every time the
+transform state is changed.
+
+It will not affect rerendering so you can control the way you use received data.
+
+### Example
+
+```tsx
+const App = () => {
+  // It will trigger every time you interact with transform-component
+  // At the same time it will not cause rerendering so you can control it on your own
+  const transformedComponent = useTransformComponent(({ state, instance }) => {
+    console.log(state); // { previousScale: 1, scale: 1, positionX: 0, positionY: 0 }
+
+    return <div>Current scale: {state.scale}</div>;
+  });
+
+  return transformedComponent;
+};
+```
diff --git a/src/stories/hooks/use-transform-effect.stories.mdx b/src/stories/hooks/use-transform-effect.stories.mdx
@@ -5,7 +5,7 @@ import { Meta } from "@storybook/blocks";
 # useTransformEffect
 
 This hooks allows to easily connect with lifecycle into the Zoom-Pan-Pinch
-state. It will trigger provided callback every time the transform state is
+state. It will trigger the provided callback every time the transform state is
 changed.
 
 It will not affect rerendering so you can control the way you use received data.

diff --git a/src/utils/helpers.utils.ts b/src/utils/helpers.utils.ts
@@ -1,9 +1,13 @@
+import { baseClasses } from "../constants/state.constants";
+
+const matchPrefix = `.${baseClasses.wrapperClass}`;
+
 export const isExcludedNode = (
   node: HTMLElement,
   excluded: string[],
 ): boolean => {
-  return excluded.some((exclude) =>
-    node.matches(`${exclude}, .${exclude}, ${exclude} *, .${exclude} *`),
+  return excluded.some((exclude) => 
+    node.matches(`${matchPrefix} ${exclude}, ${matchPrefix} .${exclude}, ${matchPrefix} ${exclude} *, ${matchPrefix} .${exclude} *`),
   );
 };