Swict back to vue-svg-pan-zoom, fixes zoom button and zoom reset

client/package.json

@@ -96,10 +96,10 @@
     "vue-infinite-scroll": "^2.0.2",
     "vue-multiselect": "^2.1.6",
     "vue-observe-visibility": "^1.0.0",
-    "vue-panzoom": "1.1.3",
     "vue-prismjs": "^1.2.0",
     "vue-router": "^3.6.5",
     "vue-rx": "^6.2.0",
+    "vue-svg-pan-zoom": "1.1.0",
     "vue-virtual-scroll-list": "^2.3.4",
     "vuedraggable": "2.24.3",
     "vuex": "^3.6.2",

client/src/components/Workflow/Editor/WorkflowGraph.vue

@@ -2,25 +2,29 @@
     <div id="workflow-canvas" class="unified-panel-body workflow-canvas">
         <ZoomControl :zoom-level="zoomLevel" @onZoom="onZoomButton" />
         <div class="canvas-viewport" @dragover.prevent @drop.prevent>
-            <panZoom
-                style="width: 100%; height: 100%"
-                selector=".zoomable"
-                :options="panZoomOptions"
-                @init="onInitPanZoom"
-                @transform="onTransform">
-                <div id="canvas-container" ref="canvas">
-                    <!--
-                    <Draggable style="width: 100%; height: 100%" @move="onPanContainer" :apply-scale="false">
-                        -->
-                    <svg class="canvas-svg" width="100%" height="100%" ref="svg">
-                        <g class="zoomable">
-                            <raw-connector v-if="draggingConnection" :position="draggingConnection"></raw-connector>
-                            <terminal-connector
-                                v-for="connection in connections"
-                                :key="connection.id"
-                                :connection="connection"></terminal-connector>
-                        </g>
-                    </svg>
+            <div id="canvas-container" ref="canvas">
+                <Draggable style="width: 100%; height: 100%" @move="onPanContainer" :apply-scale="false">
+                    <SvgPanZoom
+                        style="width: 100%; height: 100%"
+                        :minZoom="0.1"
+                        :panEnabled="false"
+                        :zoomEnabled="true"
+                        :controlIconsEnabled="false"
+                        :fit="false"
+                        :center="false"
+                        :on-zoom="onZoom"
+                        :onUpdatedCTM="onUpdatedCTM"
+                        @svgpanzoom="registerSvgPanZoom">
+                        <svg class="canvas-svg" width="100%" height="100%" ref="svg">
+                            <g class="zoomable">
+                                <raw-connector v-if="draggingConnection" :position="draggingConnection"></raw-connector>
+                                <terminal-connector
+                                    v-for="connection in connections"
+                                    :key="connection.id"
+                                    :connection="connection"></terminal-connector>
+                            </g>
+                        </svg>
+                    </SvgPanZoom>
                     <div class="nodeArea" ref="nodes" :style="style">
                         <!-- this div is only necessary so that we synchronize zoom and pan to the svg coordinates -->
                         <WorkflowNode
@@ -42,11 +46,8 @@
                             @onRemove="onRemove"
                             v-on="$listeners" />
                     </div>
-                    <!--
-                    </Draggable>
-                    -->
-                </div>
-            </panZoom>
+                </Draggable>
+            </div>
         </div>
         <div class="workflow-overview" aria-hidden="true">
             <div class="workflow-overview-body">
@@ -64,15 +65,13 @@ import WorkflowNode from "./Node";
 import RawConnector from "./Connector";
 import TerminalConnector from "./TerminalConnector";
 import Draggable from "./Draggable.vue";
-import panZoom from "vue-panzoom";
-import Vue from "vue";
-// install plugin
-Vue.use(panZoom);
+import SvgPanZoom from "vue-svg-pan-zoom";
 
 export default {
     components: {
         Draggable,
         RawConnector,
+        SvgPanZoom,
         TerminalConnector,
         WorkflowNode,
         ZoomControl,
@@ -82,12 +81,7 @@ export default {
             isWheeled: false,
             rootOffset: { left: 0, top: 0 },
             draggingConnection: null,
-            panzoom: null,
-            panZoomOptions: {
-                transformOrigin: null,
-                minZoom: 0.1,
-                maxZoom: 10,
-            },
+            svgpanzoom: null,
             transform: null,
         };
     },
@@ -123,12 +117,15 @@ export default {
         // this.canvasManager.scrollToNodes();
     },
     methods: {
+        onUpdatedCTM(CTM) {
+            this.transform = CTM;
+        },
         setScale(scale) {
             this.$store.commit("workflowState/setScale", scale);
         },
-        onTransform(e) {
-            this.transform = e.getTransform();
-            this.setScale(this.transform.scale);
+        onZoom(zoomLevel) {
+            // SvgZoomPanel returns array
+            this.setScale(zoomLevel?.[0]);
         },
         onStopDragging() {
             this.draggingConnection = null;
@@ -137,20 +134,17 @@ export default {
             this.draggingConnection = vector;
         },
         onZoomButton(zoomLevel) {
-            this.panzoom.zoomAbs(
-                this.rootOffset.left + this.rootOffset.width / 2,
-                this.rootOffset.top + this.rootOffset.height / 2,
-                zoomLevel
-            );
+            this.setScale(zoomLevel);
+            this.svgpanzoom.zoom(zoomLevel);
         },
-        onInitPanZoom(panzoomInstance) {
-            this.panzoom = panzoomInstance;
+        registerSvgPanZoom(svgpanzoom) {
+            this.svgpanzoom = svgpanzoom;
         },
         onPan(pan) {
-            this.panzoom.moveBy(pan.x, pan.y);
+            this.svgpanzoom.panBy(pan);
         },
         onPanContainer(e) {
-            this.panzoom.moveBy(e.data.deltaX, e.data.deltaY);
+            this.svgpanzoom.panBy({ x: e.data.deltaX, y: e.data.deltaY });
         },
         onActivate(nodeId) {
             console.log("onNodeId", nodeId);
@@ -169,7 +163,7 @@ export default {
     computed: {
         style() {
             if (this.transform) {
-                return `transform: matrix(${this.transform.scale}, 0, 0, ${this.transform.scale}, ${this.transform.x}, ${this.transform.y})`;
+                return `transform: matrix(${this.transform.a}, ${this.transform.b}, ${this.transform.c}, ${this.transform.d}, ${this.transform.e}, ${this.transform.f})`;
             }
         },
         zoomLevel() {

client/src/components/Workflow/Editor/ZoomControl.vue

@@ -54,7 +54,7 @@ export default {
     },
     computed: {
         zoomPercentage() {
-            return Math.floor(this.zoomLevel * 100);
+            return Math.round(this.zoomLevel * 100);
         },
         index() {
             let index = this.zoomLevels.indexOf(this.zoomLevel);

client/yarn.lock

@@ -2277,13 +2277,6 @@ ajv@^8.0.0, ajv@^8.8.0:
     require-from-string "^2.0.2"
     uri-js "^4.2.2"
 
-amator@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/amator/-/amator-1.1.0.tgz#08c6b60bc93aec2b61bbfc0c4d677d30323cc0f1"
-  integrity sha512-V5+aH8pe+Z3u/UG3L3pG3BaFQGXAyXHVQDroRwjPHdh08bcUEchAVsU1MCuJSCaU5o60wTK6KaE6te5memzgYw==
-  dependencies:
-    bezier-easing "^2.0.3"
-
 amdi18n-loader@^0.9.3:
   version "0.9.3"
   resolved "https://registry.npmjs.org/amdi18n-loader/-/amdi18n-loader-0.9.3.tgz"
@@ -2789,11 +2782,6 @@ bent@~7.3.6:
     caseless "~0.12.0"
     is-stream "^2.0.0"
 
-bezier-easing@^2.0.3:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/bezier-easing/-/bezier-easing-2.1.0.tgz#c04dfe8b926d6ecaca1813d69ff179b7c2025d86"
-  integrity sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==
-
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz"
@@ -7303,11 +7291,6 @@ next-tick@^1.1.0:
   resolved "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz"
   integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==
 
-ngraph.events@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/ngraph.events/-/ngraph.events-1.2.2.tgz#3ceb92d676a04a4e7ce60a09fa8e17a4f0346d7f"
-  integrity sha512-JsUbEOzANskax+WSYiAPETemLWYXmixuPAlmZmhIbIj6FH/WDgEGCGnRwUQBK0GjOnVm8Ui+e5IJ+5VZ4e32eQ==
-
 nise@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npmjs.org/nise/-/nise-5.1.1.tgz"
@@ -7668,15 +7651,6 @@ p-try@^2.0.0:
   resolved "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
-panzoom@^9.4.0:
-  version "9.4.3"
-  resolved "https://registry.yarnpkg.com/panzoom/-/panzoom-9.4.3.tgz#195c4031bb643f2e6c42f1de0ca87cc10e224042"
-  integrity sha512-xaxCpElcRbQsUtIdwlrZA90P90+BHip4Vda2BC8MEb4tkI05PmR6cKECdqUCZ85ZvBHjpI9htJrZBxV5Gp/q/w==
-  dependencies:
-    amator "^1.1.0"
-    ngraph.events "^1.2.2"
-    wheel "^1.0.0"
-
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz"
@@ -9445,6 +9419,11 @@ sver-compat@^1.5.0:
     es6-iterator "^2.0.1"
     es6-symbol "^3.1.1"
 
+svg-pan-zoom@3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/svg-pan-zoom/-/svg-pan-zoom-3.6.0.tgz#31d8137d7e079e8f059effd85c7605b0567b6e4b"
+  integrity sha512-ZBEL2z/n/W2fLLFzn3NTQgd+7QEfbrKvKmu29U3qvMflmJgLaWkwKbOzWJYESFidTiGYMHkijAKmY6m64moyYg==
+
 svg-pathdata@^6.0.3:
   version "6.0.3"
   resolved "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz"
@@ -10089,13 +10068,6 @@ vue-observe-visibility@^1.0.0:
   resolved "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-1.0.0.tgz"
   integrity sha512-s5TFh3s3h3Mhd3jaz3zGzkVHKHnc/0C/gNr30olO99+yw2hl3WBhK3ng3/f9OF+qkW4+l7GkmwfAzDAcY3lCFg==
 
-vue-panzoom@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/vue-panzoom/-/vue-panzoom-1.1.3.tgz#5d1caae505e066bb899bcc4da2d6d6875a1d8e2c"
-  integrity sha512-iGiTo76HR5hCQd8xob+qZW/3T0pLHs3jZab4MiWSbeo71MIOPikCw1Xr6+kmCUzpde0Nx4oiDmG+fOpuX9j8xQ==
-  dependencies:
-    panzoom "^9.4.0"
-
 vue-prismjs@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/vue-prismjs/-/vue-prismjs-1.2.0.tgz"
@@ -10121,6 +10093,13 @@ vue-style-loader@^4.1.0:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
+vue-svg-pan-zoom@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/vue-svg-pan-zoom/-/vue-svg-pan-zoom-1.1.0.tgz#7f104366a51d6fa3d4b0f798788c05296d811436"
+  integrity sha512-H/KuL+zuSsZtQETFyE68Ms6YfMjfvLCtBKYcFc/o2NZsP6dlV3+XJfywjqZJKPsFUYJkFvX6XgNe+BKUqnkzzQ==
+  dependencies:
+    svg-pan-zoom "3.6.0"
+
 vue-template-compiler@^2.7.8:
   version "2.7.8"
   resolved "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.8.tgz"
@@ -10388,11 +10367,6 @@ whatwg-url@^8.0.0, whatwg-url@^8.5.0:
     tr46 "^2.1.0"
     webidl-conversions "^6.1.0"
 
-wheel@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/wheel/-/wheel-1.0.0.tgz#6cf46e06a854181adb8649228077f8b0d5c574ce"
-  integrity sha512-XiCMHibOiqalCQ+BaNSwRoZ9FDTAvOsXxGHXChBugewDj7HC8VBIER71dEOiRH1fSdLbRCQzngKTSiZ06ZQzeA==
-
 which-boxed-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz"