From 3f176ea4a4e81feb21ef0cb920026efa69f50fc4 Mon Sep 17 00:00:00 2001
From: barsdeveloper <barsdeveloper@gmail.com>
Date: Thu, 26 Aug 2021 23:43:43 +0200
Subject: [PATCH] fizing zoom wip

---
 js/UEBlueprint.js           | 13 ++++++++++++-
 js/UEBlueprintDragScroll.js | 13 +++++++++----
 ueblueprint.js              | 26 +++++++++++++++++++++-----
 3 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/js/UEBlueprint.js b/js/UEBlueprint.js
index e8549bd..2ca1afd 100644
--- a/js/UEBlueprint.js
+++ b/js/UEBlueprint.js
@@ -240,10 +240,19 @@ export default class UEBlueprint extends HTMLElement {
             return
         }
         let initialScale = this.getScale()
-        this.classList.add(`ueb-zoom-${zoom}`)
         this.classList.remove(`ueb-zoom-${this.zoom}`)
+        this.classList.add(`ueb-zoom-${zoom}`)
         this.zoom = zoom
+
+
         if (center) {
+
+            let point = document.createElement('div');
+            point.style.width = '2px'
+            point.style.height = '2px'
+            point.style.background = 'red'
+            point.style.position = 'absolute'
+            document.querySelector('.ueb-grid').appendChild(point)
             let relativeScale = this.getScale() / initialScale
             let newCenter = [
                 relativeScale * center[0],
@@ -253,6 +262,8 @@ export default class UEBlueprint extends HTMLElement {
                 (newCenter[0] - center[0]) * initialScale,
                 (newCenter[1] - center[1]) * initialScale
             ])
+            point.style.left = `${center[0]}px`
+            point.style.top = `${center[1]}px`
         }
     }
 
diff --git a/js/UEBlueprintDragScroll.js b/js/UEBlueprintDragScroll.js
index e272f32..ebfcc50 100644
--- a/js/UEBlueprintDragScroll.js
+++ b/js/UEBlueprintDragScroll.js
@@ -18,13 +18,18 @@ export default class UEBlueprintDragScroll extends UEBlueprintDrag {
             self.mousePosition = mousePosition
         };
         this.mouseWheelHandler = function (e) {
+            e.preventDefault()
             let zoomLevel = self.blueprintNode.getZoom()
-            zoomLevel -= Math.round(e.deltaY / 50)
-            self.blueprintNode.setZoom(zoomLevel, [e.offsetX, e.offsetY])
+            zoomLevel -= Math.sign(e.deltaY)
+            let scale = self.blueprintNode.getScale()
+            const targetOffset = e.target.getBoundingClientRect()
+            const currentTargetOffset = e.currentTarget.getBoundingClientRect()
+            let offset = [e.offsetX + targetOffset.x - currentTargetOffset.x, e.offsetY + targetOffset.y - currentTargetOffset.y]
+            console.log([offset[0] - e.x, offset[1] - e.y])
+            self.blueprintNode.setZoom(zoomLevel, offset)
 
         }
-        this.blueprintNode.getGridDOMElement().addEventListener('wheel', this.mouseWheelHandler)
-        this.blueprintNode.getGridDOMElement().addEventListener('wheel', e => e.preventDefault())
+        this.blueprintNode.getGridDOMElement().addEventListener('wheel', this.mouseWheelHandler, false)
         this.blueprintNode.getGridDOMElement().parentElement.addEventListener('wheel', e => e.preventDefault())
     }
 
diff --git a/ueblueprint.js b/ueblueprint.js
index ec41028..7ea42cb 100644
--- a/ueblueprint.js
+++ b/ueblueprint.js
@@ -84,13 +84,18 @@ class UEBlueprintDragScroll extends UEBlueprintDrag {
             self.mousePosition = mousePosition;
         };
         this.mouseWheelHandler = function (e) {
+            e.preventDefault();
             let zoomLevel = self.blueprintNode.getZoom();
-            zoomLevel -= Math.round(e.deltaY / 50);
-            self.blueprintNode.setZoom(zoomLevel, [e.offsetX, e.offsetY]);
+            zoomLevel -= Math.sign(e.deltaY);
+            self.blueprintNode.getScale();
+            const targetOffset = e.target.getBoundingClientRect();
+            const currentTargetOffset = e.currentTarget.getBoundingClientRect();
+            let offset = [e.offsetX + targetOffset.x - currentTargetOffset.x, e.offsetY + targetOffset.y - currentTargetOffset.y];
+            console.log([offset[0] - e.x, offset[1] - e.y]);
+            self.blueprintNode.setZoom(zoomLevel, offset);
 
         };
-        this.blueprintNode.getGridDOMElement().addEventListener('wheel', this.mouseWheelHandler);
-        this.blueprintNode.getGridDOMElement().addEventListener('wheel', e => e.preventDefault());
+        this.blueprintNode.getGridDOMElement().addEventListener('wheel', this.mouseWheelHandler, false);
         this.blueprintNode.getGridDOMElement().parentElement.addEventListener('wheel', e => e.preventDefault());
     }
 
@@ -341,10 +346,19 @@ class UEBlueprint extends HTMLElement {
             return
         }
         let initialScale = this.getScale();
-        this.classList.add(`ueb-zoom-${zoom}`);
         this.classList.remove(`ueb-zoom-${this.zoom}`);
+        this.classList.add(`ueb-zoom-${zoom}`);
         this.zoom = zoom;
+
+
         if (center) {
+
+            let point = document.createElement('div');
+            point.style.width = '2px';
+            point.style.height = '2px';
+            point.style.background = 'red';
+            point.style.position = 'absolute';
+            document.querySelector('.ueb-grid').appendChild(point);
             let relativeScale = this.getScale() / initialScale;
             let newCenter = [
                 relativeScale * center[0],
@@ -354,6 +368,8 @@ class UEBlueprint extends HTMLElement {
                 (newCenter[0] - center[0]) * initialScale,
                 (newCenter[1] - center[1]) * initialScale
             ]);
+            point.style.left = `${center[0]}px`;
+            point.style.top = `${center[1]}px`;
         }
     }