Zoom is closer now

doncabreraphone · Mar 20, 2024 · 69cbac5 · 69cbac5
1 parent 4c63df0
commit 69cbac5
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 15 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -385,8 +385,8 @@ export default {
         // Add wheel event listener to handle zoom
         this.canvas.wrapperEl.addEventListener('wheel', (event) => {
 
-            console.log("Wheel event detected"); // Check if the event is fired
-            console.log("Shift key state:", event.shiftKey); 
+            // console.log("Wheel event detected"); // Check if the event is fired
+            // console.log("Shift key state:", event.shiftKey); 
 
             // Check if the Shift key is pressed
             if (!event.shiftKey) {
@@ -403,10 +403,10 @@ export default {
             // Cap the zoom level between 0.5 and 1.5
             if(newZoomLevel < 0.75) {
                 newZoomLevel = 0.75;
-                console.log('Reached minimum zoom level');
+                // console.log('Reached minimum zoom level');
             } else if(newZoomLevel > 1) {
                 newZoomLevel = 1;
-                console.log('Reached maximum zoom level');
+                // console.log('Reached maximum zoom level');
             }
             
             // Only apply the zoom if it's within the allowed range

diff --git a/src/components/ScenarioComponent.vue b/src/components/ScenarioComponent.vue
@@ -466,24 +466,35 @@ beforeUnmount() {
   },
   methods: {
 
-    adjustToZoomLevel(newzoomLevel) {
-    // console.log('Received zoom level:', newzoomLevel);
 
-
-    const scenarioElement = this.$refs.scenario;
+adjustToZoomLevel(newZoomLevel) {
     this.$nextTick(() => {
+        const scenarioElement = this.$refs.scenario;
         if (scenarioElement) {
-            const scale = `scale(${newzoomLevel})`;
-            const offsetX = 0;
-            const offsetY = 0;
-            const translate = `translate(${offsetX}px, ${offsetY}px)`;
+            // Calculate the element's current position relative to the viewport
+            const rect = scenarioElement.getBoundingClientRect();
+            const currentLeft = rect.left;
+            const currentTop = rect.top;
+
+            // Calculate the translation needed to simulate a viewport top-left transform origin
+            const translateX = -currentLeft * (newZoomLevel - 1);
+            const translateY = -currentTop * (newZoomLevel - 1);
+
+            // Apply the scale and translation transformations
+            scenarioElement.style.transform = `translate( scale(${newZoomLevel})`;
 
-            scenarioElement.style.transform = `${scale} ${translate}`;
-            scenarioElement.style.transformOrigin = '0% 0%'; // Top-left of the element itself
+            console.log(`translate(${translateX}px, ${translateY}px) scale(${newZoomLevel})`);
+
+            // Ensure transformations are smooth
             scenarioElement.style.transition = 'transform 0.3s ease';
         }
     });
-},
+},  
+
+
+
+
+
 
 
     handleMouseOver() {