From 882ad42fa5f2736be6164c244faee0c6ae9af98b Mon Sep 17 00:00:00 2001
From: BroodjeAap <david@broodjeaap.net>
Date: Fri, 20 Jan 2023 12:05:48 +0000
Subject: [PATCH] added zooming to diagram

---
 static/diagram.js | 33 ++++++---------------------------
 static/diagram.ts | 41 +++++++----------------------------------
 todo.md           |  5 -----
 3 files changed, 13 insertions(+), 66 deletions(-)

diff --git a/static/diagram.js b/static/diagram.js
index e3d45fb..4336f04 100644
--- a/static/diagram.js
+++ b/static/diagram.js
@@ -618,39 +618,18 @@ var Diagrams = /** @class */ (function () {
         if (zoomIn && this.scale <= 0) {
             return;
         }
-        var oldWorldPos = new Point(this.mouseState.world.x, this.mouseState.world.y);
-        var oldCanvasPos = new Point(this.mouseState.canvas.x, this.mouseState.canvas.y);
-        console.log(oldWorldPos);
         this.scale += sign;
         var zoomOutFactor = 0.9;
         var zoomInFactor = 1 / zoomOutFactor;
         var zoomFactor = zoomIn ? zoomInFactor : zoomOutFactor;
         this.ctx.scale(zoomFactor, zoomFactor);
         this.scalingFactor *= zoomFactor;
-        this.mouseState.canvas.x *= zoomFactor;
-        this.mouseState.canvas.y *= zoomFactor;
-        //this.mouseState.canvas.x = this.mouseState.absCanvas.x * this.scalingFactor;
-        //this.mouseState.canvas.y = this.mouseState.absCanvas.y * this.scalingFactor;
-        var mouseDelta = new Point(oldCanvasPos.x - this.mouseState.canvas.x, oldCanvasPos.y - this.mouseState.canvas.y);
-        this.mouseState.offset.x += mouseDelta.x;
-        this.mouseState.offset.y += mouseDelta.y;
-        console.log(this.mouseState.world);
-        /*
-        // scale with new value
-        let scale = this.scale;
-        this.ctx.scale(scale, scale);
-        
-        // recalculate mouse 'world' position, so we can realign it after zooming
-        this.mouseState.canvas.x = this.mouseState.absCanvas.x / scale;
-        this.mouseState.canvas.y = this.mouseState.absCanvas.y / scale;
-        
-        this.mouseState.world.x = (this.mouseState.canvas.x - this.mouseState.offset.x) * scale;
-        this.mouseState.world.y = (this.mouseState.canvas.y - this.mouseState.offset.y) * scale;
-        
-        this.mouseState.offset.x -= (oldWorld.x - this.mouseState.world.x);
-        this.mouseState.offset.y -= (oldWorld.y - this.mouseState.world.y);
-        console.log(this.mouseState.offset);
-        */
+        var oldCanvasPos = new Point(this.mouseState.canvas.x, this.mouseState.canvas.y);
+        this.mouseState.canvas.x /= zoomFactor;
+        this.mouseState.canvas.y /= zoomFactor;
+        var mouseDelta = new Point((oldCanvasPos.x - this.mouseState.canvas.x), (oldCanvasPos.y - this.mouseState.canvas.y));
+        this.mouseState.offset.x -= mouseDelta.x;
+        this.mouseState.offset.y -= mouseDelta.y;
     };
     Diagrams.prototype.drawBackground = function () {
         this.ctx.fillStyle = "#D8D8D8";
diff --git a/static/diagram.ts b/static/diagram.ts
index cf1a230..4246afb 100644
--- a/static/diagram.ts
+++ b/static/diagram.ts
@@ -655,10 +655,6 @@ class Diagrams {
             return;
         }
 
-        let oldWorldPos = new Point(this.mouseState.world.x, this.mouseState.world.y)
-        let oldCanvasPos = new Point(this.mouseState.canvas.x, this.mouseState.canvas.y)
-        console.log(oldWorldPos);
-
         this.scale += sign;
         let zoomOutFactor = 0.9;
         let zoomInFactor = 1 / zoomOutFactor
@@ -666,39 +662,16 @@ class Diagrams {
         this.ctx.scale(zoomFactor, zoomFactor);
         this.scalingFactor *= zoomFactor;
 
-        this.mouseState.canvas.x *= zoomFactor;
-        this.mouseState.canvas.y *= zoomFactor;
-
-        //this.mouseState.canvas.x = this.mouseState.absCanvas.x * this.scalingFactor;
-        //this.mouseState.canvas.y = this.mouseState.absCanvas.y * this.scalingFactor;
+        let oldCanvasPos = new Point(this.mouseState.canvas.x,this.mouseState.canvas.y)
+        this.mouseState.canvas.x /= zoomFactor;
+        this.mouseState.canvas.y /= zoomFactor;
 
         let mouseDelta = new Point(
-            oldCanvasPos.x - this.mouseState.canvas.x,
-            oldCanvasPos.y - this.mouseState.canvas.y
+            (oldCanvasPos.x - this.mouseState.canvas.x),
+            (oldCanvasPos.y - this.mouseState.canvas.y),
         )
-
-        this.mouseState.offset.x += mouseDelta.x;
-        this.mouseState.offset.y += mouseDelta.y;
-
-        console.log(this.mouseState.world);
-
-
-        /*
-        // scale with new value
-        let scale = this.scale;
-        this.ctx.scale(scale, scale);
-        
-        // recalculate mouse 'world' position, so we can realign it after zooming
-        this.mouseState.canvas.x = this.mouseState.absCanvas.x / scale;
-        this.mouseState.canvas.y = this.mouseState.absCanvas.y / scale;
-        
-        this.mouseState.world.x = (this.mouseState.canvas.x - this.mouseState.offset.x) * scale;
-        this.mouseState.world.y = (this.mouseState.canvas.y - this.mouseState.offset.y) * scale;
-        
-        this.mouseState.offset.x -= (oldWorld.x - this.mouseState.world.x);
-        this.mouseState.offset.y -= (oldWorld.y - this.mouseState.world.y);
-        console.log(this.mouseState.offset);
-        */
+        this.mouseState.offset.x -= mouseDelta.x;
+        this.mouseState.offset.y -= mouseDelta.y;
     }
 
     drawBackground(){
diff --git a/todo.md b/todo.md
index b2c1c57..5fc6880 100644
--- a/todo.md
+++ b/todo.md
@@ -3,9 +3,4 @@
 - import options add/clear
 - comments
 - safe escape {{ }} for pages
-- diagram zoom
-    - zoom towards pointer
-        - mouse stays on pre-zoomed world pos
-    - refactor zoom with fixed 0.9-1.1 values?
-    - minimap
 - 'jitter' for cronjobs after first start ?
\ No newline at end of file