Move zoom state up to a context provider so multiple ZoomContainers can share state

Author: ghengeveld

src/components/ZoomContainer.stories.tsx

@@ -1,10 +1,16 @@
+import { type Meta } from "@storybook/react";
 import React from "react";
 
-import { ZoomContainer } from "./ZoomContainer";
+import { ZoomContainer, ZoomProvider } from "./ZoomContainer";
 
 export default {
   component: ZoomContainer,
-};
+  decorators: (Story) => (
+    <ZoomProvider>
+      <Story />
+    </ZoomProvider>
+  ),
+} satisfies Meta<typeof ZoomContainer>;
 
 export const Default = {
   args: {
@@ -23,3 +29,24 @@ export const Tall = {
     children: <img src="/chromatic-site-mobile.png" alt="" />,
   },
 };
+
+export const Small = {
+  args: {
+    children: <img src="/capture-16b798d6.png" alt="" />,
+  },
+};
+
+export const Mirror = {
+  render() {
+    return (
+      <div style={{ display: "flex", height: "100%", gap: 10 }}>
+        <ZoomContainer>
+          <img src="/A.png" alt="" />
+        </ZoomContainer>
+        <ZoomContainer>
+          <img src="/B.png" alt="" />
+        </ZoomContainer>
+      </div>
+    );
+  },
+};

src/components/ZoomContainer.tsx

@@ -1,5 +1,16 @@
 import { styled } from "@storybook/theming";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  createContext,
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 const TRANSITION_DURATION_MS = 200;
 
@@ -18,23 +29,33 @@ const Content = styled.div({
   width: "max-content",
 });
 
+const initialState = {
+  containerHeight: 0,
+  containerWidth: 0,
+  contentHeight: 0,
+  contentWidth: 0,
+  contentScale: 1,
+  translateX: 0,
+  translateY: 0,
+  multiplierX: 1,
+  multiplierY: 1,
+  zoomed: false,
+  transition: "none",
+  transitionTimeout: 0,
+};
+
+type State = typeof initialState;
+
+export const ZoomContext = createContext<[State, Dispatch<SetStateAction<State>>]>(null as any);
+
+export const ZoomProvider = ({ children }: { children: ReactNode }) => {
+  return <ZoomContext.Provider value={useState(initialState)}>{children}</ZoomContext.Provider>;
+};
+
 const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));
 
 export const useZoom = () => {
-  const [state, setState] = useState({
-    containerHeight: 0,
-    containerWidth: 0,
-    contentHeight: 0,
-    contentWidth: 0,
-    contentScale: 1,
-    translateX: 0,
-    translateY: 0,
-    multiplierX: 1,
-    multiplierY: 1,
-    zoomed: false,
-    transition: "none",
-    transitionTimeout: 0,
-  });
+  const [state, setState] = useContext(ZoomContext);
 
   const containerRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
@@ -73,21 +94,25 @@ export const useZoom = () => {
       translateX,
       translateY,
     }));
-  }, [containerRef, contentRef]);
+  }, [containerRef, contentRef, setState]);
 
   const onMouseEvent = useCallback(
     (e: MouseEvent) => {
       if (!containerRef.current) return;
-      const { x, y } = containerRef.current.getBoundingClientRect();
+      const { x, y, width, height } = containerRef.current.getBoundingClientRect();
 
       setState((currentState) => {
+        const { clientX: cx, clientY: cy, type: eventType } = e;
+        const hovered = cx >= x && cx <= x + width && cy >= y && cy <= y + height;
+        if (!hovered) return currentState;
+
         const { containerHeight, containerWidth, contentHeight, contentWidth } = currentState;
         const ratioX = contentWidth < containerWidth ? contentWidth / contentHeight + 1 : 1;
         const ratioY = contentHeight < containerHeight ? contentHeight / contentWidth + 1 : 1;
-        const multiplierX = ((e.clientX - x) / containerWidth) * 2 * 1.2 * ratioX - 0.2 * ratioX;
-        const multiplierY = ((e.clientY - y) / containerHeight) * 2 * 1.2 * ratioY - 0.2 * ratioY;
+        const multiplierX = ((cx - x) / containerWidth) * 2 * 1.2 * ratioX - 0.2 * ratioX;
+        const multiplierY = ((cy - y) / containerHeight) * 2 * 1.2 * ratioY - 0.2 * ratioY;
 
-        const clicked = e.type === "click" && (e as any).pointerType !== "touch";
+        const clicked = eventType === "click" && (e as any).pointerType !== "touch";
         const zoomed = clicked ? !currentState.zoomed : currentState.zoomed;
         const update = {
           ...currentState,
@@ -108,7 +133,7 @@ export const useZoom = () => {
         };
       });
     },
-    [containerRef]
+    [containerRef, setState]
   );
 
   const onToggleZoom = useCallback(
@@ -151,6 +176,7 @@ export const useZoom = () => {
   const contentStyle = {
     transform: `translate(${translateX}px, ${translateY}px) scale(${scale})`,
     transition: state.transition,
+    ...(state.contentScale < 1 && { cursor: state.zoomed ? "zoom-out" : "zoom-in" }),
   };
 
   return {
@@ -173,8 +199,8 @@ export const ZoomContainer = ({
   children,
   render,
 }: {
-  children?: React.ReactNode;
-  render?: (props: ReturnType<typeof useZoom>["renderProps"]) => React.ReactChild;
+  children?: ReactNode;
+  render?: (props: ReturnType<typeof useZoom>["renderProps"]) => ReactNode;
 }) => {
   const { containerProps, contentProps, renderProps } = useZoom();
 

src/screens/VisualTests/SnapshotComparison.tsx

@@ -5,7 +5,7 @@ import React, { useEffect } from "react";
 import { Link } from "../../components/design-system";
 import { SnapshotImage } from "../../components/SnapshotImage";
 import { Text } from "../../components/Text";
-import { ZoomContainer } from "../../components/ZoomContainer";
+import { ZoomContainer, ZoomProvider } from "../../components/ZoomContainer";
 import { ComparisonResult, TestResult, TestStatus } from "../../gql/graphql";
 import { summarizeTests } from "../../utils/summarizeTests";
 import { useSelectedBuildState, useSelectedStoryState } from "./BuildContext";
@@ -283,24 +283,26 @@ export const SnapshotComparison = ({
           </Warning>
         )}
         {!isInProgress && selectedComparison && (
-          <ZoomContainer
-            render={(zoomProps) => (
-              <SnapshotImage
-                key={selectedComparison.id}
-                componentName={selectedTest?.story?.component?.name}
-                storyName={selectedTest?.story?.name}
-                comparisonResult={selectedComparison.result ?? undefined}
-                latestImage={selectedComparison.headCapture?.captureImage ?? undefined}
-                baselineImage={selectedComparison.baseCapture?.captureImage ?? undefined}
-                baselineImageVisible={baselineImageVisible}
-                diffImage={selectedComparison.captureDiff?.diffImage ?? undefined}
-                focusImage={selectedComparison.captureDiff?.focusImage ?? undefined}
-                diffVisible={diffVisible}
-                focusVisible={focusVisible}
-                {...zoomProps}
-              />
-            )}
-          />
+          <ZoomProvider>
+            <ZoomContainer
+              render={(zoomProps) => (
+                <SnapshotImage
+                  key={selectedComparison.id}
+                  componentName={selectedTest?.story?.component?.name}
+                  storyName={selectedTest?.story?.name}
+                  comparisonResult={selectedComparison.result ?? undefined}
+                  latestImage={selectedComparison.headCapture?.captureImage ?? undefined}
+                  baselineImage={selectedComparison.baseCapture?.captureImage ?? undefined}
+                  baselineImageVisible={baselineImageVisible}
+                  diffImage={selectedComparison.captureDiff?.diffImage ?? undefined}
+                  focusImage={selectedComparison.captureDiff?.focusImage ?? undefined}
+                  diffVisible={diffVisible}
+                  focusVisible={focusVisible}
+                  {...zoomProps}
+                />
+              )}
+            />
+          </ZoomProvider>
         )}
 
         {!isInProgress && captureErrorData && (