feat(toggle-pan): Add toggle to switch between "Scroll to Pan" and "Scroll to Zoom"

apps/artboard/src/pages/builder.tsx

@@ -1,7 +1,7 @@
 import { SectionKey } from "@reactive-resume/schema";
 import { pageSizeMap, Template } from "@reactive-resume/utils";
 import { AnimatePresence, motion } from "framer-motion";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { ReactZoomPanPinchRef, TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 
 import { MM_TO_PX, Page } from "../components/page";
@@ -14,6 +14,8 @@ export const BuilderLayout = () => {
   const layout = useArtboardStore((state) => state.resume.metadata.layout);
   const template = useArtboardStore((state) => state.resume.metadata.template as Template);
 
+  const [wheelPanning, setWheelPanning] = useState(true);
+
   const Template = useMemo(() => getTemplate(template), [template]);
 
   useEffect(() => {
@@ -27,6 +29,9 @@ export const BuilderLayout = () => {
         transformRef.current?.resetTransform(0);
         setTimeout(() => transformRef.current?.centerView(0.8, 0), 10);
       }
+      if (event.data.type === "TOGGLE_PAN_MODE") {
+        setWheelPanning(event.data.panMode);
+      }
     };
 
     window.addEventListener("message", handleMessage);
@@ -44,6 +49,12 @@ export const BuilderLayout = () => {
       minScale={0.4}
       initialScale={0.8}
       limitToBounds={false}
+      panning={{
+        wheelPanning: wheelPanning,
+      }}
+      wheel={{
+        wheelDisabled: wheelPanning,
+      }}
     >
       <TransformComponent
         wrapperClass="!w-screen !h-screen"

apps/client/src/pages/builder/_components/toolbar.tsx

@@ -2,13 +2,15 @@ import { t } from "@lingui/macro";
 import {
   ArrowClockwise,
   ArrowCounterClockwise,
+  ArrowsOutCardinal,
   CircleNotch,
   ClockClockwise,
   CubeFocus,
   FilePdf,
   Hash,
   LineSegment,
   LinkSimple,
+  MagnifyingGlass,
   MagnifyingGlassMinus,
   MagnifyingGlassPlus,
 } from "@phosphor-icons/react";
@@ -19,6 +21,7 @@ import { useToast } from "@/client/hooks/use-toast";
 import { usePrintResume } from "@/client/services/resume";
 import { useBuilderStore } from "@/client/stores/builder";
 import { useResumeStore, useTemporalResumeStore } from "@/client/stores/resume";
+import { useState } from "react";
 
 const openInNewTab = (url: string) => {
   const win = window.open(url, "_blank");
@@ -31,6 +34,7 @@ export const BuilderToolbar = () => {
   const undo = useTemporalResumeStore((state) => state.undo);
   const redo = useTemporalResumeStore((state) => state.redo);
   const frameRef = useBuilderStore((state) => state.frame.ref);
+  const [panMode, setPanMode] = useState<boolean>(true);
 
   const id = useResumeStore((state) => state.resume.id);
   const isPublic = useResumeStore((state) => state.resume.visibility === "public");
@@ -59,6 +63,10 @@ export const BuilderToolbar = () => {
   const onZoomOut = () => frameRef?.contentWindow?.postMessage({ type: "ZOOM_OUT" }, "*");
   const onResetView = () => frameRef?.contentWindow?.postMessage({ type: "RESET_VIEW" }, "*");
   const onCenterView = () => frameRef?.contentWindow?.postMessage({ type: "CENTER_VIEW" }, "*");
+  const onTogglePanMode = () => {
+    setPanMode(!panMode); // local button state
+    frameRef?.contentWindow?.postMessage({ type: "TOGGLE_PAN_MODE", panMode: !panMode }, "*"); // toggle artboard state
+  };
 
   return (
     <motion.div className="fixed inset-x-0 bottom-0 mx-auto hidden py-6 text-center md:block">
@@ -91,6 +99,20 @@ export const BuilderToolbar = () => {
 
         <Separator orientation="vertical" className="h-9" />
 
+        <Tooltip
+          content={
+            panMode
+              ? t`Scroll to Pan (Click to switch to Zoom)`
+              : t`Scroll to Zoom (Click to switch to Pan)`
+          }
+        >
+          <Toggle className="rounded-none" pressed={panMode} onPressedChange={onTogglePanMode}>
+            {panMode ? <ArrowsOutCardinal /> : <MagnifyingGlass />}
+          </Toggle>
+        </Tooltip>
+
+        <Separator orientation="vertical" className="h-9" />
+
         <Tooltip content={t`Zoom In`}>
           <Button size="icon" variant="ghost" className="rounded-none" onClick={onZoomIn}>
             <MagnifyingGlassPlus />

package.json

@@ -235,7 +235,7 @@
     "react-parallax-tilt": "^1.7.227",
     "react-resizable-panels": "^2.0.19",
     "react-router-dom": "6.23.1",
-    "react-zoom-pan-pinch": "^3.4.4",
+    "react-zoom-pan-pinch": "^3.6.1",
     "reflect-metadata": "^0.2.2",
     "rxjs": "^7.8.1",
     "sharp": "^0.33.4",