feat: add hotkeys for zooming the canvas

Author: aleclarson

apps/builder/app/builder/features/workspace/canvas-tools/canvas-tools.tsx

@@ -17,7 +17,7 @@ import { Label } from "./outline/label";
 import { Outline } from "./outline/outline";
 import { useSubscribeDragAndDropState } from "./use-subscribe-drag-drop-state";
 import { applyScale } from "./outline";
-import { $clampingRect, $scale } from "~/builder/shared/nano-states";
+import { $clampingRect, $scale, $zoom } from "~/builder/shared/nano-states";
 import { BlockChildHoveredInstanceOutline } from "./outline/block-instance-outline";
 import { TextEditorContextMenu } from "./block-editor-context-menu";
 

apps/builder/app/builder/features/workspace/workspace.tsx

@@ -5,6 +5,7 @@ import {
   $canvasWidth,
   $scale,
   $workspaceRect,
+  $zoom,
 } from "~/builder/shared/nano-states";
 import { $textEditingInstanceSelector } from "~/shared/nano-states";
 import { CanvasTools } from "./canvas-tools";
@@ -50,6 +51,7 @@ const useMeasureWorkspace = () => {
 };
 
 const getCanvasStyle = (
+  zoom: number,
   scale: number,
   workspaceRect?: DOMRect,
   canvasWidth?: number
@@ -62,31 +64,36 @@ const getCanvasStyle = (
   }
 
   return {
-    width: canvasWidth ?? "100%",
-    height: canvasHeight ?? "100%",
+    width: canvasWidth != null ? canvasWidth / zoom : 100 + "%",
+    height: canvasHeight != null ? canvasHeight : 100 + "%",
     left: "50%",
     transform: `scale(${scale}%) translateX(-50%)`,
+    // transformOrigin: "top center",
   };
 };
 
 const useCanvasStyle = () => {
+  const zoom = useStore($zoom);
   const scale = useStore($scale);
   const workspaceRect = useStore($workspaceRect);
   const canvasWidth = useStore($canvasWidth);
 
-  return getCanvasStyle(scale, workspaceRect, canvasWidth);
+  return getCanvasStyle(zoom, scale, workspaceRect, canvasWidth);
 };
 
 const useOutlineStyle = () => {
+  const zoom = useStore($zoom);
   const scale = useStore($scale);
   const workspaceRect = useStore($workspaceRect);
   const canvasWidth = useStore($canvasWidth);
-  const style = getCanvasStyle(100, workspaceRect, canvasWidth);
+  const style = getCanvasStyle(zoom, 100, workspaceRect, canvasWidth);
 
   return {
     ...style,
     width:
-      canvasWidth === undefined ? "100%" : (canvasWidth ?? 0) * (scale / 100),
+      canvasWidth === undefined
+        ? "100%"
+        : (canvasWidth ?? 0) * (scale / zoom / 100),
   } as const;
 };
 

apps/builder/app/builder/shared/commands.ts

@@ -30,6 +30,8 @@ import { $publisher } from "~/shared/pubsub";
 import {
   $activeInspectorPanel,
   $publishDialog,
+  $scale,
+  $zoom,
   setActiveSidebarPanel,
   toggleActiveSidebarPanel,
 } from "./nano-states";
@@ -331,6 +333,54 @@ export const { emitCommand, subscribeCommands } = createCommandsEmitter({
       },
       disableOnInputLikeControls: true,
     },
+    {
+      name: "zoomIn",
+      defaultHotkeys: ["="],
+      handler: () => {
+        $zoom.set($zoom.get() + 0.15);
+      },
+      disableOnInputLikeControls: true,
+    },
+    {
+      name: "zoomOut",
+      defaultHotkeys: ["-"],
+      handler: () => {
+        $zoom.set($zoom.get() - 0.15);
+      },
+      disableOnInputLikeControls: true,
+    },
+    {
+      name: "resetZoom",
+      defaultHotkeys: ["0"],
+      handler: () => {
+        $zoom.set(1);
+      },
+      disableOnInputLikeControls: true,
+    },
+    {
+      name: "zoomInSlightly",
+      defaultHotkeys: ["ctrl+="],
+      handler: () => {
+        $zoom.set($zoom.get() + 0.05);
+      },
+      disableOnInputLikeControls: true,
+    },
+    {
+      name: "zoomOutSlightly",
+      defaultHotkeys: ["ctrl+-"],
+      handler: () => {
+        $zoom.set($zoom.get() - 0.05);
+      },
+      disableOnInputLikeControls: true,
+    },
+    {
+      name: "zoomToActualSize",
+      defaultHotkeys: ["ctrl+0"],
+      handler: () => {
+        $zoom.set($zoom.get() * (100 / $scale.get()));
+      },
+      disableOnInputLikeControls: true,
+    },
     {
       name: "toggleNavigatorPanel",
       defaultHotkeys: ["z"],

apps/builder/app/builder/shared/nano-states/index.ts

@@ -22,18 +22,20 @@ export const $canvasScrollbarSize = atom<
   { width: number; height: number } | undefined
 >();
 
+export const $zoom = atom<number>(1);
+
 export const $scale = computed(
-  [$canvasWidth, $workspaceRect],
-  (canvasWidth, workspaceRect) => {
+  [$canvasWidth, $workspaceRect, $zoom],
+  (canvasWidth, workspaceRect, zoom) => {
     if (
       canvasWidth === undefined ||
       workspaceRect === undefined ||
       canvasWidth <= workspaceRect.width
     ) {
-      return 100;
+      return 100 * zoom;
     }
     return Number.parseFloat(
-      ((workspaceRect.width / canvasWidth) * 100).toFixed(2)
+      ((workspaceRect.width / canvasWidth) * 100 * zoom).toFixed(2)
     );
   }
 );