From 403a65158ae53672e71589ecbe965067890e7a7e Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Sat, 19 Apr 2025 13:44:31 +0200
Subject: [PATCH] Fix zoom performance issues

---
 components/page/Canvas.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/components/page/Canvas.vue b/components/page/Canvas.vue
index b4721cc..12839da 100644
--- a/components/page/Canvas.vue
+++ b/components/page/Canvas.vue
@@ -115,6 +115,17 @@ const canvas = computed(() => overview.value && overview.value.content ? overvie
 const dispX = ref(0), dispY = ref(0), minZoom = ref(0.1), zoom = ref(0.5);
 const canvasRef = useTemplateRef('canvasRef'), transformRef = useTemplateRef('transformRef');
 
+const updateScaleVar = useDebounceFn(() => {
+    if(transformRef.value)
+    {
+        transformRef.value.style.setProperty('--tw-scale', zoom.value.toString());
+    }
+    if(canvasRef.value)
+    {
+        canvasRef.value.style.setProperty('--zoom-multiplier', (1 / Math.pow(zoom.value, 0.7)).toFixed(3));
+    }
+}, 100);
+
 const reset = (_: MouseEvent) => {
     zoom.value = minZoom.value;
 
@@ -233,8 +244,8 @@ function updateTransform()
     if(transformRef.value)
     {
         transformRef.value.style.transform = `scale3d(${zoom.value}, ${zoom.value}, 1) translate3d(${dispX.value}px, ${dispY.value}px, 0)`;
-        transformRef.value.style.setProperty('--tw-scale', zoom.value.toString());
     }
+    updateScaleVar();
 }
 </script>