From 91a8ee33e3643d9c19c000772aa67ea9e3a2ec35 Mon Sep 17 00:00:00 2001
From: UmakanthKaspa <kaspaumakanth1999@gmail.com>
Date: Sat, 3 May 2025 14:00:30 +0000
Subject: [PATCH 1/5] feat: add zoom controls to Studio Canvas

---
 frontend/src/components/StudioCanvas.vue | 36 ++++++++++++++++++++----
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/StudioCanvas.vue b/frontend/src/components/StudioCanvas.vue
index acc77a03..2d1e39a1 100644
--- a/frontend/src/components/StudioCanvas.vue
+++ b/frontend/src/components/StudioCanvas.vue
@@ -74,13 +74,27 @@
 		</div>
 
 		<div
-			class="fixed bottom-12 left-[50%] z-40 flex translate-x-[-50%] cursor-default items-center justify-center gap-2 rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-gray-600 shadow-md"
+			class="fixed bottom-12 left-[50%] z-40 flex translate-x-[-50%] cursor-default items-center justify-center gap-3 rounded-lg bg-white px-4 py-2 text-center text-sm font-semibold text-gray-600 shadow-md"
 			v-show="!canvasProps.panning"
 		>
+			<!-- Zoom Out -->
+			<span title="Zoom Out">
+				<FeatherIcon name="minus" class="h-4 w-4 cursor-pointer" @click="zoomOut" />
+			</span>
+
+			<!-- Zoom Percentage -->
 			{{ Math.round(canvasProps.scale * 100) + "%" }}
-			<div class="ml-2 cursor-pointer" @click="setScaleAndTranslate">
-				<FitScreenIcon />
-			</div>
+
+			<!-- Zoom In -->
+			<span title="Zoom In">
+				<FeatherIcon name="plus" class="h-4 w-4 cursor-pointer" @click="zoomIn" />
+			</span>
+
+			<!-- Fit to Screen -->
+			<span title="Fit to Screen" >
+				<FeatherIcon name="maximize" class="h-4 w-4 cursor-pointer" @click="setScaleAndTranslate"/>
+			</span>
+
 		</div>
 	</div>
 </template>
@@ -89,7 +103,6 @@
 import { Ref, ref, watch, reactive, computed, onMounted, provide } from "vue"
 import { LoadingIndicator } from "frappe-ui"
 import StudioComponent from "@/components/StudioComponent.vue"
-import FitScreenIcon from "@/components/Icons/FitScreenIcon.vue"
 
 import useStudioStore from "@/stores/studioStore"
 import { getBlockCopy, getBlockInfo } from "@/utils/helpers"
@@ -278,6 +291,19 @@ onMounted(() => {
 	setPanAndZoom(canvasProps, canvasEl, canvasContainerEl)
 })
 
+function zoomIn() {
+	if (canvasProps.scale < 2) {
+		canvasProps.scale = +(canvasProps.scale + 0.1).toFixed(2)
+	}
+}
+
+function zoomOut() {
+	if (canvasProps.scale > 0.2) {
+		canvasProps.scale = +(canvasProps.scale - 0.1).toFixed(2)
+	}
+}
+
+
 defineExpose({
 	history,
 	rootComponent,

From 95fa51c80bb5c000c039374849070370b7eb87b6 Mon Sep 17 00:00:00 2001
From: UmakanthKaspa <kaspaumakanth1999@gmail.com>
Date: Sat, 3 May 2025 15:17:15 +0000
Subject: [PATCH 2/5] feat: add canvas-only zoom shortcuts (+, -, 0) with
 persistence and keyboard scope

---
 frontend/src/components/StudioCanvas.vue | 55 +++++++++++++++++++++---
 frontend/src/utils/useCanvasUtils.ts     |  9 +++-
 2 files changed, 57 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/StudioCanvas.vue b/frontend/src/components/StudioCanvas.vue
index 2d1e39a1..b38fd8da 100644
--- a/frontend/src/components/StudioCanvas.vue
+++ b/frontend/src/components/StudioCanvas.vue
@@ -19,6 +19,8 @@
 		<div
 			class="fixed flex gap-40"
 			ref="canvas"
+			@mouseenter="isCanvasActive = true"
+ 			@mouseleave="isCanvasActive = false"
 			:style="{
 				transformOrigin: 'top center',
 				transform: `scale(${canvasProps.scale}) translate(${canvasProps.translateX}px, ${canvasProps.translateY}px)`,
@@ -78,7 +80,7 @@
 			v-show="!canvasProps.panning"
 		>
 			<!-- Zoom Out -->
-			<span title="Zoom Out">
+			<span title="Zoom Out (-)">
 				<FeatherIcon name="minus" class="h-4 w-4 cursor-pointer" @click="zoomOut" />
 			</span>
 
@@ -86,12 +88,12 @@
 			{{ Math.round(canvasProps.scale * 100) + "%" }}
 
 			<!-- Zoom In -->
-			<span title="Zoom In">
+			<span title="Zoom In (+)">
 				<FeatherIcon name="plus" class="h-4 w-4 cursor-pointer" @click="zoomIn" />
 			</span>
 
 			<!-- Fit to Screen -->
-			<span title="Fit to Screen" >
+			<span title="Fit to Screen (0)" >
 				<FeatherIcon name="maximize" class="h-4 w-4 cursor-pointer" @click="setScaleAndTranslate"/>
 			</span>
 
@@ -100,7 +102,7 @@
 </template>
 
 <script setup lang="ts">
-import { Ref, ref, watch, reactive, computed, onMounted, provide } from "vue"
+import { Ref, ref, watch, reactive, computed, onMounted, provide, onBeforeUnmount } from "vue"
 import { LoadingIndicator } from "frappe-ui"
 import StudioComponent from "@/components/StudioComponent.vue"
 
@@ -130,6 +132,7 @@ const canvasContainer = ref(null)
 const canvas = ref<HTMLElement | null>(null)
 const overlay = ref(null)
 const showBlocks = ref(false)
+const isCanvasActive = ref(false)
 
 const canvasProps = reactive({
 	overlayElement: null,
@@ -278,7 +281,15 @@ onMounted(() => {
 	const canvasContainerEl = canvasContainer.value as unknown as HTMLElement
 	const canvasEl = canvas.value as unknown as HTMLElement
 	canvasProps.overlayElement = overlay.value
-	setScaleAndTranslate()
+
+	// Restore saved zoom level
+	const savedZoom = parseFloat(localStorage.getItem("studioCanvasZoom") || "1")
+	const isZoomRestored = !isNaN(savedZoom) && savedZoom >= 0.2 && savedZoom <= 2
+	if (isZoomRestored) {
+		canvasProps.scale = savedZoom
+	}
+
+	setScaleAndTranslate(false, !isZoomRestored)
 	showBlocks.value = true
 	setupHistory()
 	useCanvasEvents(
@@ -294,16 +305,50 @@ onMounted(() => {
 function zoomIn() {
 	if (canvasProps.scale < 2) {
 		canvasProps.scale = +(canvasProps.scale + 0.1).toFixed(2)
+		localStorage.setItem("studioCanvasZoom", canvasProps.scale.toString())
 	}
 }
 
 function zoomOut() {
 	if (canvasProps.scale > 0.2) {
 		canvasProps.scale = +(canvasProps.scale - 0.1).toFixed(2)
+		localStorage.setItem("studioCanvasZoom", canvasProps.scale.toString())
 	}
 }
 
 
+function handleKeyDown(e: KeyboardEvent) {
+	const tag = (e.target as HTMLElement).tagName
+
+	if (["INPUT", "TEXTAREA"].includes(tag) || (e.target as HTMLElement).isContentEditable) return
+
+	if (!isCanvasActive.value) return
+	switch (e.key) {
+		case "+":
+		case "=":
+			e.preventDefault()
+			zoomIn()
+			break
+		case "-":
+		case "_":
+			e.preventDefault()
+			zoomOut()
+			break
+		case "0":
+			e.preventDefault()
+			setScaleAndTranslate()
+			break
+	}
+}
+
+onMounted(() => {
+	window.addEventListener("keydown", handleKeyDown)
+})
+
+onBeforeUnmount(() => {
+	window.removeEventListener("keydown", handleKeyDown)
+})
+
 defineExpose({
 	history,
 	rootComponent,
diff --git a/frontend/src/utils/useCanvasUtils.ts b/frontend/src/utils/useCanvasUtils.ts
index 0a2f0c85..87a86d7b 100644
--- a/frontend/src/utils/useCanvasUtils.ts
+++ b/frontend/src/utils/useCanvasUtils.ts
@@ -21,7 +21,7 @@ export function useCanvasUtils(
 	// canvas positioning
 	const containerBound = reactive(useElementBounding(canvasContainer));
 	const canvasBound = reactive(useElementBounding(canvas));
-	const setScaleAndTranslate = async () => {
+	const setScaleAndTranslate = async (persist = true, overrideScale = true) => {
 		if (document.readyState !== "complete") {
 			await new Promise((resolve) => {
 				window.addEventListener("load", resolve);
@@ -35,7 +35,12 @@ export function useCanvasUtils(
 		const containerWidth = containerBound.width;
 		const canvasWidth = canvasBound.width / canvasProps.scale;
 
-		canvasProps.scale = containerWidth / (canvasWidth + paddingX * 2);
+		if (overrideScale) {
+			canvasProps.scale = containerWidth / (canvasWidth + paddingX * 2);
+		}
+		if (persist) {
+			localStorage.setItem("studioCanvasZoom", canvasProps.scale.toString())
+		}
 
 		canvasProps.translateX = 0;
 		canvasProps.translateY = 0;

From 1987b361932035f5758b8391c6bfef48395c9e4b Mon Sep 17 00:00:00 2001
From: UmakanthKaspa <kaspaumakanth1999@gmail.com>
Date: Tue, 6 May 2025 11:49:26 +0000
Subject: [PATCH 3/5] feat: move breakpoints into canvas toolbar and polish
 zoom controls

---
 frontend/src/components/StudioCanvas.vue | 84 ++++++++++++++----------
 1 file changed, 51 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/StudioCanvas.vue b/frontend/src/components/StudioCanvas.vue
index b38fd8da..212c7d6e 100644
--- a/frontend/src/components/StudioCanvas.vue
+++ b/frontend/src/components/StudioCanvas.vue
@@ -26,24 +26,7 @@
 				transform: `scale(${canvasProps.scale}) translate(${canvasProps.translateX}px, ${canvasProps.translateY}px)`,
 			}"
 		>
-			<div class="dark:bg-zinc-900 absolute right-0 top-[-60px] flex rounded-md bg-white px-3">
-				<div
-					v-show="!canvasProps.scaling && !canvasProps.panning"
-					class="w-auto cursor-pointer p-2"
-					v-for="breakpoint in canvasProps.breakpoints"
-					:key="breakpoint.device"
-					@click.stop="breakpoint.visible = !breakpoint.visible"
-				>
-					<FeatherIcon
-						:name="breakpoint.icon"
-						class="h-8 w-6"
-						:class="{
-							'dark:text-zinc-50 text-gray-700': breakpoint.visible,
-							'dark:text-zinc-500 text-gray-300': !breakpoint.visible,
-						}"
-					/>
-				</div>
-			</div>
+
 			<div
 				class="canvas relative flex h-full bg-white shadow-2xl contain-layout"
 				:style="{
@@ -76,27 +59,62 @@
 		</div>
 
 		<div
-			class="fixed bottom-12 left-[50%] z-40 flex translate-x-[-50%] cursor-default items-center justify-center gap-3 rounded-lg bg-white px-4 py-2 text-center text-sm font-semibold text-gray-600 shadow-md"
+			class="fixed bottom-12 left-[50%] z-40 flex translate-x-[-50%] items-center gap-4 rounded-lg bg-white px-5 py-2 text-sm font-medium text-gray-600 shadow-md"
 			v-show="!canvasProps.panning"
 		>
-			<!-- Zoom Out -->
-			<span title="Zoom Out (-)">
-				<FeatherIcon name="minus" class="h-4 w-4 cursor-pointer" @click="zoomOut" />
-			</span>
+			<!-- Breakpoint Toggles -->
+			<div class="flex items-center gap-2 border-r border-gray-300 pr-3">
+				<button
+					v-for="breakpoint in canvasProps.breakpoints"
+					:key="breakpoint.device"
+					@click.stop="breakpoint.visible = !breakpoint.visible"
+					class="rounded p-1 transition-transform hover:scale-110 hover:bg-gray-100"
+					:title="breakpoint.displayName"
+					aria-label="Toggle Breakpoint"
+				>
+					<FeatherIcon
+						:name="breakpoint.icon"
+						class="h-5 w-5 cursor-pointer"
+						:class="{
+							'dark:text-zinc-50 text-gray-700': breakpoint.visible,
+							'dark:text-zinc-500 text-gray-300': !breakpoint.visible,
+						}"
+					/>
+				</button>
+			</div>
 
-			<!-- Zoom Percentage -->
-			{{ Math.round(canvasProps.scale * 100) + "%" }}
+			<!-- Zoom Controls -->
+			<div class="flex items-center gap-3 pl-2">
+				<button
+					title="Zoom Out (-)"
+					aria-label="Zoom Out"
+					@click="zoomOut"
+					class="rounded p-1 transition-transform hover:scale-110 hover:bg-gray-100"
+				>
+					<FeatherIcon name="minus" class="h-5 w-5" />
+				</button>
 
-			<!-- Zoom In -->
-			<span title="Zoom In (+)">
-				<FeatherIcon name="plus" class="h-4 w-4 cursor-pointer" @click="zoomIn" />
-			</span>
+				<span class="min-w-[3ch] text-center">{{ Math.round(canvasProps.scale * 100) + "%" }}</span>
 
-			<!-- Fit to Screen -->
-			<span title="Fit to Screen (0)" >
-				<FeatherIcon name="maximize" class="h-4 w-4 cursor-pointer" @click="setScaleAndTranslate"/>
-			</span>
 
+				<button
+					title="Zoom In (+)"
+					aria-label="Zoom In"
+					@click="zoomIn"
+					class="rounded p-1 transition-transform hover:scale-110 hover:bg-gray-100"
+				>
+					<FeatherIcon name="plus" class="h-5 w-5" />
+				</button>
+
+				<button
+					title="Fit to Screen (0)"
+					aria-label="Fit to Screen"
+					@click="() => setScaleAndTranslate()"
+					class="rounded p-1 transition-transform hover:scale-110 hover:bg-gray-100"
+				>
+					<FeatherIcon name="maximize" class="h-5 w-5" />
+				</button>
+			</div>
 		</div>
 	</div>
 </template>

From 7efed82a08078a66fb3eab49b75de46ddd97ed2e Mon Sep 17 00:00:00 2001
From: UmakanthKaspa <kaspaumakanth1999@gmail.com>
Date: Sat, 4 Oct 2025 04:02:04 +0000
Subject: [PATCH 4/5] Revert "feat: move breakpoints into canvas toolbar and
 polish zoom controls"

This reverts commit 1987b361932035f5758b8391c6bfef48395c9e4b.
---
 frontend/src/components/StudioCanvas.vue | 84 ++++++++++--------------
 1 file changed, 33 insertions(+), 51 deletions(-)

diff --git a/frontend/src/components/StudioCanvas.vue b/frontend/src/components/StudioCanvas.vue
index 65a9bc76..bc2d66d8 100644
--- a/frontend/src/components/StudioCanvas.vue
+++ b/frontend/src/components/StudioCanvas.vue
@@ -27,7 +27,24 @@
 				transform: `scale(${canvasProps.scale}) translate(${canvasProps.translateX}px, ${canvasProps.translateY}px)`,
 			}"
 		>
-
+			<div class="dark:bg-zinc-900 absolute right-0 top-[-60px] flex rounded-md bg-white px-3">
+				<div
+					v-show="!canvasProps.scaling && !canvasProps.panning"
+					class="w-auto cursor-pointer p-2"
+					v-for="breakpoint in canvasProps.breakpoints"
+					:key="breakpoint.device"
+					@click.stop="breakpoint.visible = !breakpoint.visible"
+				>
+					<FeatherIcon
+						:name="breakpoint.icon"
+						class="h-8 w-6"
+						:class="{
+							'dark:text-zinc-50 text-gray-700': breakpoint.visible,
+							'dark:text-zinc-500 text-gray-300': !breakpoint.visible,
+						}"
+					/>
+				</div>
+			</div>
 			<div
 				class="canvas relative flex h-full bg-surface-white shadow-2xl contain-layout"
 				:style="{
@@ -61,62 +78,27 @@
 		</div>
 
 		<div
-			class="fixed bottom-12 left-[50%] z-40 flex translate-x-[-50%] items-center gap-4 rounded-lg bg-white px-5 py-2 text-sm font-medium text-gray-600 shadow-md"
+			class="fixed bottom-12 left-[50%] z-40 flex translate-x-[-50%] cursor-default items-center justify-center gap-3 rounded-lg bg-white px-4 py-2 text-center text-sm font-semibold text-gray-600 shadow-md"
 			v-show="!canvasProps.panning"
 		>
-			<!-- Breakpoint Toggles -->
-			<div class="flex items-center gap-2 border-r border-gray-300 pr-3">
-				<button
-					v-for="breakpoint in canvasProps.breakpoints"
-					:key="breakpoint.device"
-					@click.stop="breakpoint.visible = !breakpoint.visible"
-					class="rounded p-1 transition-transform hover:scale-110 hover:bg-gray-100"
-					:title="breakpoint.displayName"
-					aria-label="Toggle Breakpoint"
-				>
-					<FeatherIcon
-						:name="breakpoint.icon"
-						class="h-5 w-5 cursor-pointer"
-						:class="{
-							'dark:text-zinc-50 text-gray-700': breakpoint.visible,
-							'dark:text-zinc-500 text-gray-300': !breakpoint.visible,
-						}"
-					/>
-				</button>
-			</div>
+			<!-- Zoom Out -->
+			<span title="Zoom Out (-)">
+				<FeatherIcon name="minus" class="h-4 w-4 cursor-pointer" @click="zoomOut" />
+			</span>
 
-			<!-- Zoom Controls -->
-			<div class="flex items-center gap-3 pl-2">
-				<button
-					title="Zoom Out (-)"
-					aria-label="Zoom Out"
-					@click="zoomOut"
-					class="rounded p-1 transition-transform hover:scale-110 hover:bg-gray-100"
-				>
-					<FeatherIcon name="minus" class="h-5 w-5" />
-				</button>
+			<!-- Zoom Percentage -->
+			{{ Math.round(canvasProps.scale * 100) + "%" }}
 
-				<span class="min-w-[3ch] text-center">{{ Math.round(canvasProps.scale * 100) + "%" }}</span>
+			<!-- Zoom In -->
+			<span title="Zoom In (+)">
+				<FeatherIcon name="plus" class="h-4 w-4 cursor-pointer" @click="zoomIn" />
+			</span>
 
+			<!-- Fit to Screen -->
+			<span title="Fit to Screen (0)" >
+				<FeatherIcon name="maximize" class="h-4 w-4 cursor-pointer" @click="setScaleAndTranslate"/>
+			</span>
 
-				<button
-					title="Zoom In (+)"
-					aria-label="Zoom In"
-					@click="zoomIn"
-					class="rounded p-1 transition-transform hover:scale-110 hover:bg-gray-100"
-				>
-					<FeatherIcon name="plus" class="h-5 w-5" />
-				</button>
-
-				<button
-					title="Fit to Screen (0)"
-					aria-label="Fit to Screen"
-					@click="() => setScaleAndTranslate()"
-					class="rounded p-1 transition-transform hover:scale-110 hover:bg-gray-100"
-				>
-					<FeatherIcon name="maximize" class="h-5 w-5" />
-				</button>
-			</div>
 		</div>
 	</div>
 </template>

From f6550379d87456ace0b8cb24d216fbd706242698 Mon Sep 17 00:00:00 2001
From: UmakanthKaspa <kaspaumakanth1999@gmail.com>
Date: Sat, 4 Oct 2025 04:21:54 +0000
Subject: [PATCH 5/5] feat: Chrome-style zoom controls with Cmd+/Cmd- shortcuts

---
 frontend/components.d.ts                 |  1 -
 frontend/src/components/StudioCanvas.vue | 43 +++++-------------------
 frontend/src/utils/useStudioEvents.ts    | 24 +++++++++++++
 3 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 8bf2e8b4..320efff0 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -56,7 +56,6 @@ declare module 'vue' {
     Input: typeof import('./src/components/Input.vue')['default']
     InputLabel: typeof import('./src/components/InputLabel.vue')['default']
     Link: typeof import('./src/components/Link.vue')['default']
-    LucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
     MarginHandler: typeof import('./src/components/MarginHandler.vue')['default']
     MarkdownEditor: typeof import('./src/components/AppLayout/MarkdownEditor.vue')['default']
     NewComponentDialog: typeof import('./src/components/NewComponentDialog.vue')['default']
diff --git a/frontend/src/components/StudioCanvas.vue b/frontend/src/components/StudioCanvas.vue
index bc2d66d8..04977fa8 100644
--- a/frontend/src/components/StudioCanvas.vue
+++ b/frontend/src/components/StudioCanvas.vue
@@ -81,14 +81,14 @@
 			class="fixed bottom-12 left-[50%] z-40 flex translate-x-[-50%] cursor-default items-center justify-center gap-3 rounded-lg bg-white px-4 py-2 text-center text-sm font-semibold text-gray-600 shadow-md"
 			v-show="!canvasProps.panning"
 		>
+			<!-- Zoom Percentage -->
+			{{ Math.round(canvasProps.scale * 100) + "%" }}
+
 			<!-- Zoom Out -->
-			<span title="Zoom Out (-)">
+				<span title="Zoom Out (-)">
 				<FeatherIcon name="minus" class="h-4 w-4 cursor-pointer" @click="zoomOut" />
 			</span>
 
-			<!-- Zoom Percentage -->
-			{{ Math.round(canvasProps.scale * 100) + "%" }}
-
 			<!-- Zoom In -->
 			<span title="Zoom In (+)">
 				<FeatherIcon name="plus" class="h-4 w-4 cursor-pointer" @click="zoomIn" />
@@ -335,37 +335,6 @@ function zoomOut() {
 }
 
 
-function handleKeyDown(e: KeyboardEvent) {
-	const tag = (e.target as HTMLElement).tagName
-
-	if (["INPUT", "TEXTAREA"].includes(tag) || (e.target as HTMLElement).isContentEditable) return
-
-	if (!isCanvasActive.value) return
-	switch (e.key) {
-		case "+":
-		case "=":
-			e.preventDefault()
-			zoomIn()
-			break
-		case "-":
-		case "_":
-			e.preventDefault()
-			zoomOut()
-			break
-		case "0":
-			e.preventDefault()
-			setScaleAndTranslate()
-			break
-	}
-}
-
-onMounted(() => {
-	window.addEventListener("keydown", handleKeyDown)
-})
-
-onBeforeUnmount(() => {
-	window.removeEventListener("keydown", handleKeyDown)
-})
 
 defineExpose({
 	history,
@@ -376,6 +345,10 @@ defineExpose({
 	removeBlock,
 	getRootBlock,
 	setRootBlock,
+	// zoom methods
+	zoomIn,
+	zoomOut,
+	setScaleAndTranslate,
 	// block hover & selection
 	hoveredBlock,
 	hoveredBreakpoint,
diff --git a/frontend/src/utils/useStudioEvents.ts b/frontend/src/utils/useStudioEvents.ts
index eb7a8ab0..c3b2fb9c 100644
--- a/frontend/src/utils/useStudioEvents.ts
+++ b/frontend/src/utils/useStudioEvents.ts
@@ -141,6 +141,30 @@ export function useStudioEvents() {
 			store.mode = "select"
 			return
 		}
+
+		if (e.key === "=" && isCtrlOrCmd(e)) {
+			e.preventDefault()
+			if (canvasStore.activeCanvas?.zoomIn) {
+				canvasStore.activeCanvas.zoomIn()
+			}
+			return
+		}
+
+		if (e.key === "-" && isCtrlOrCmd(e)) {
+			e.preventDefault()
+			if (canvasStore.activeCanvas?.zoomOut) {
+				canvasStore.activeCanvas.zoomOut()
+			}
+			return
+		}
+
+		if (e.key === "0" && isCtrlOrCmd(e)) {
+			e.preventDefault()
+			if (canvasStore.activeCanvas?.setScaleAndTranslate) {
+				canvasStore.activeCanvas.setScaleAndTranslate()
+			}
+			return
+		}
 	})
 }