Move svg canvas zoom and pan variables to canvas object so they can b…

…e accessed by map painter; modified CanvasView map painter to use zoom and pan.
libmapper · Mar 1, 2019 · c521e2e · c521e2e
1 parent 727cdcc
commit c521e2e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 31 deletions.
diff --git a/js/views/CanvasView.js b/js/views/CanvasView.js
@@ -131,8 +131,8 @@ class CanvasView extends View {
         });
         sig.view.drag(
             function(dx, dy, x, y, event) {
-                x = x * self.svgZoom + self.svgPosX;
-                y = y * self.svgZoom + self.svgPosY;
+                x = x * self.canvas.zoom + self.canvas.pan.x;
+                y = y * self.canvas.zoom + self.canvas.pan.y;
                 let p = sig.position;
                 if (self.escaped) {
                     self.draggingFrom = null;
@@ -189,8 +189,8 @@ class CanvasView extends View {
                 }
             },
             function(x, y, event) {
-                x = x * self.svgZoom + self.svgPosX;
-                y = y * self.svgZoom + self.svgPosY;
+                x = x * self.canvas.zoom + self.canvas.pan.x;
+                y = y * self.canvas.zoom + self.canvas.pan.y;
                 self.escaped = false;
                 self.draggingFrom = sig;
                 let p = sig.position;
@@ -421,9 +421,9 @@ class CanvasMapPainter extends ListMapPainter
             src_y = src.top;
         }
         else {
-            src_x = src.x;
-            src_cx = src.x + src.width * 0.5;
-            src_y = src.y;
+            src_x = src.x * this.canvas.zoom + this.canvas.pan.x;
+            src_cx = src_x + src.width * this.canvas.zoom * 0.5;
+            src_y = src.y * this.canvas.zoom + this.canvas.pan.y;
         }
 
         if (this.map.dst.canvasObject) {
@@ -433,9 +433,9 @@ class CanvasMapPainter extends ListMapPainter
             dst_y = dst.top;
         }
         else {
-            dst_x = dst.x;
-            dst_cx = dst.x + dst.width * 0.5;
-            dst_y = dst.y;
+            dst_x = dst.x * this.canvas.zoom + this.canvas.pan.x;
+            dst_cx = dst_x + dst.width * this.canvas.zoom * 0.5;
+            dst_y = dst.y * this.canvas.zoom + this.canvas.pan.y;
         }
 
         this.pathspecs[0] = [['M', src_x, src_y],

diff --git a/js/views/View.js b/js/views/View.js
@@ -40,9 +40,8 @@ class View {
                         'cy': this.frame.height * 0.5
         };
 
-        this.svgZoom = 1;
-        this.svgPosX = 0;
-        this.svgPosY = 0;
+        this.canvas.zoom = 1;
+        this.canvas.pan = {x: 0, y: 0};
 
         this.xAxis = null;
         this.yAxis = null;
@@ -570,15 +569,14 @@ class View {
     canvasPan(x, y, delta_x, delta_y) {
         x -= this.frame.left;
         y -= this.frame.top;
-        this.svgPosX += delta_x * this.svgZoom;
-        this.svgPosY += delta_y * this.svgZoom;
+        this.canvas.pan.x += delta_x * this.canvas.zoom;
+        this.canvas.pan.y += delta_y * this.canvas.zoom;
 
-        this.canvas.setViewBox(this.svgPosX, this.svgPosY,
-                               this.frame.width * this.svgZoom,
-                               this.frame.height * this.svgZoom, false);
-        this.tooltip.showBrief(
-            'pan: ['+this.svgPosX.toFixed(2)+', '+this.svgPosY.toFixed(2)+']', 
-            x, y);
+        this.canvas.setViewBox(this.canvas.pan.x, this.canvas.pan.y,
+                               this.frame.width * this.canvas.zoom,
+                               this.frame.height * this.canvas.zoom, false);
+        this.tooltip.showBrief('pan: ['+this.canvas.pan.x.toFixed(2)+', '
+                               +this.canvas.pan.y.toFixed(2)+']', x, y);
     }
 
     tableZoom(x, y, delta) {
@@ -602,28 +600,28 @@ class View {
     canvasZoom(x, y, delta) {
         x -= this.frame.left;
         y -= this.frame.top;
-        let newZoom = this.svgZoom + delta * 0.01;
+        let newZoom = this.canvas.zoom + delta * 0.01;
         if (newZoom < 0.1)
             newZoom = 0.1;
         else if (newZoom > 20)
             newZoom = 20;
-        if (newZoom == this.svgZoom)
+        if (newZoom == this.canvas.zoom)
             return;
-        let zoomDiff = this.svgZoom - newZoom;
-        this.svgPosX += x * zoomDiff;
-        this.svgPosY += (y - this.frame.top) * zoomDiff;
-        this.canvas.setViewBox(this.svgPosX, this.svgPosY,
+        let zoomDiff = this.canvas.zoom - newZoom;
+        this.canvas.pan.x += x * zoomDiff;
+        this.canvas.pan.y += (y - this.frame.top) * zoomDiff;
+        this.canvas.setViewBox(this.canvas.pan.x, this.canvas.pan.y,
                                this.frame.width * newZoom,
                                this.frame.height * newZoom, false);
         this.tooltip.showBrief( 'zoom: '+(100/newZoom).toFixed(2)+'%', x, y);
-        this.svgZoom = newZoom;
+        this.canvas.zoom = newZoom;
     }
 
     resetPanZoom() {
         this.canvas.setViewBox(0, 0, this.frame.width, this.frame.height, false);
-        this.svgZoom = 1;
-        this.svgPosX = 0;
-        this.svgPosY = 0;
+        this.canvas.zoom = 1;
+        this.canvas.pan.x = 0;
+        this.canvas.pan.y = 0;
     }
 
     filterSignals(direction, text) {