From acc9becf1a06d4192f6cd2b8e1021f0e86d021e8 Mon Sep 17 00:00:00 2001
From: infinia-yzl <dev@infinia.space>
Date: Wed, 14 Aug 2024 15:41:54 +0800
Subject: [PATCH 1/2] feat(toggle-pan): Add toggle to switch between scroll to
 pan and scroll to zoom - Modify wheel behaviour to pan by default for a more
 natural behaviour with trackpads
 (https://github.com/BetterTyped/react-zoom-pan-pinch/pull/447) - Bump
 `react-zoom-pan-pinch` version to `3.6.1` from `3.4.4`

---
 apps/artboard/src/pages/builder.tsx           | 13 ++++++++++-
 .../src/pages/builder/_components/toolbar.tsx | 22 +++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/apps/artboard/src/pages/builder.tsx b/apps/artboard/src/pages/builder.tsx
index f339eca38..9272d6ea7 100644
--- a/apps/artboard/src/pages/builder.tsx
+++ b/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"
diff --git a/apps/client/src/pages/builder/_components/toolbar.tsx b/apps/client/src/pages/builder/_components/toolbar.tsx
index c52b94ded..847e43b2d 100644
--- a/apps/client/src/pages/builder/_components/toolbar.tsx
+++ b/apps/client/src/pages/builder/_components/toolbar.tsx
@@ -2,6 +2,7 @@ import { t } from "@lingui/macro";
 import {
   ArrowClockwise,
   ArrowCounterClockwise,
+  ArrowsOutCardinal,
   CircleNotch,
   ClockClockwise,
   CubeFocus,
@@ -9,6 +10,7 @@ import {
   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 />

From 5827576ffb0ad0845924f8993be5278c1ee9c4c5 Mon Sep 17 00:00:00 2001
From: infinia-yzl <dev@infinia.space>
Date: Wed, 14 Aug 2024 17:01:05 +0800
Subject: [PATCH 2/2] chore(package/react-zoom-pan-pinch): Bump
 `react-zoom-pan-pinch` version to `3.6.1` from `3.4.4`

---
 package.json   |  2 +-
 pnpm-lock.yaml | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 11add83e7..c16871ec6 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5916a3c6d..2ea12201b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -363,8 +363,8 @@ importers:
         specifier: 6.23.1
         version: 6.23.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-zoom-pan-pinch:
-        specifier: ^3.4.4
-        version: 3.4.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^3.6.1
+        version: 3.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       reflect-metadata:
         specifier: ^0.2.2
         version: 0.2.2
@@ -9068,8 +9068,8 @@ packages:
       '@types/react':
         optional: true
 
-  react-zoom-pan-pinch@3.4.4:
-    resolution: {integrity: sha512-lGTu7D9lQpYEQ6sH+NSlLA7gicgKRW8j+D/4HO1AbSV2POvKRFzdWQ8eI0r3xmOsl4dYQcY+teV6MhULeg1xBw==}
+  react-zoom-pan-pinch@3.6.1:
+    resolution: {integrity: sha512-SdPqdk7QDSV7u/WulkFOi+cnza8rEZ0XX4ZpeH7vx3UZEg7DoyuAy3MCmm+BWv/idPQL2Oe73VoC0EhfCN+sZQ==}
     engines: {node: '>=8', npm: '>=5'}
     peerDependencies:
       react: '*'
@@ -14616,7 +14616,7 @@ snapshots:
 
   '@testing-library/dom@10.1.0':
     dependencies:
-      '@babel/code-frame': 7.24.6
+      '@babel/code-frame': 7.24.7
       '@babel/runtime': 7.24.5
       '@types/aria-query': 5.0.4
       aria-query: 5.3.0
@@ -21160,7 +21160,7 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
-  react-zoom-pan-pinch@3.4.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-zoom-pan-pinch@3.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)