From 1dcd661ecda92fad402906b99d06086951d66357 Mon Sep 17 00:00:00 2001
From: mvdbeek <m.vandenbeek@gmail.com>
Date: Sun, 4 Sep 2022 13:59:40 +0200
Subject: [PATCH] Use svg-pan-zoom to control zooming

---
 .../Workflow/Editor/WorkflowGraph.vue         | 78 ++++++++++---------
 1 file changed, 41 insertions(+), 37 deletions(-)

diff --git a/client/src/components/Workflow/Editor/WorkflowGraph.vue b/client/src/components/Workflow/Editor/WorkflowGraph.vue
index f8e95028c91..6b35176a5cc 100644
--- a/client/src/components/Workflow/Editor/WorkflowGraph.vue
+++ b/client/src/components/Workflow/Editor/WorkflowGraph.vue
@@ -1,44 +1,46 @@
 <template>
     <div id="workflow-canvas" class="unified-panel-body workflow-canvas">
         <ZoomControl :zoom-level="zoomLevel" @onZoom="onZoom" />
-        <div
-            class="canvas-viewport"
-            @dragover.prevent
-            @drop.prevent
-            @mousemove="handleMove"
-            @mouseup="handleUp"
-            @mousedown.prevent.stop="handleDown">
+        <div class="canvas-viewport" @dragover.prevent @drop.prevent>
             <div id="canvas-container" ref="canvas">
-                <svg class="canvas-svg" width="100%" height="100%" ref="svg">
-                    <g :transform="transform">
-                        <raw-connector v-if="draggingConnection" :position="draggingConnection"></raw-connector>
-                        <terminal-connector
-                            v-for="connection in connections"
-                            :key="connection.id"
-                            :connection="connection"></terminal-connector>
-                        <foreignObject style="overflow: visible">
-                            <div xmlns="http://www.w3.org/1999/xhtml">
-                                <WorkflowNode
-                                    v-for="(step, key) in steps"
-                                    :id="key"
-                                    :key="key"
-                                    :name="step.name"
-                                    :type="step.type"
-                                    :content-id="step.content_id"
-                                    :step="step"
-                                    :datatypes-mapper="datatypesMapper"
-                                    :get-manager="getManager"
-                                    :activeNodeId="activeNodeId"
-                                    :root-offset="rootOffset"
-                                    @stopDragging="onStopDragging"
-                                    @onDragConnector="onDragConnector"
-                                    @onActivate="onActivate"
-                                    @onRemove="onRemove"
-                                    v-on="$listeners" />
-                            </div>
-                        </foreignObject>
-                    </g>
-                </svg>
+                <SvgPanZoom
+                    style="width: 100%; height: 100%"
+                    :minZoom="0.1"
+                    :zoomEnabled="true"
+                    :controlIconsEnabled="true"
+                    :fit="false"
+                    :center="false">
+                    <svg class="canvas-svg" width="100%" height="100%" ref="svg">
+                        <g :transform="transform">
+                            <raw-connector v-if="draggingConnection" :position="draggingConnection"></raw-connector>
+                            <terminal-connector
+                                v-for="connection in connections"
+                                :key="connection.id"
+                                :connection="connection"></terminal-connector>
+                            <foreignObject style="overflow: visible">
+                                <div xmlns="http://www.w3.org/1999/xhtml">
+                                    <WorkflowNode
+                                        v-for="(step, key) in steps"
+                                        :id="key"
+                                        :key="key"
+                                        :name="step.name"
+                                        :type="step.type"
+                                        :content-id="step.content_id"
+                                        :step="step"
+                                        :datatypes-mapper="datatypesMapper"
+                                        :get-manager="getManager"
+                                        :activeNodeId="activeNodeId"
+                                        :root-offset="rootOffset"
+                                        @stopDragging="onStopDragging"
+                                        @onDragConnector="onDragConnector"
+                                        @onActivate="onActivate"
+                                        @onRemove="onRemove"
+                                        v-on="$listeners" />
+                                </div>
+                            </foreignObject>
+                        </g>
+                    </svg>
+                </SvgPanZoom>
             </div>
         </div>
         <div class="workflow-overview" aria-hidden="true">
@@ -55,11 +57,13 @@
 import ZoomControl from "./ZoomControl";
 import WorkflowNode from "./Node";
 import RawConnector from "./Connector";
+import SvgPanZoom from "vue-svg-pan-zoom";
 import TerminalConnector from "./TerminalConnector";
 
 export default {
     components: {
         RawConnector,
+        SvgPanZoom,
         TerminalConnector,
         WorkflowNode,
         ZoomControl,