From d2ba4a0b6e54704ff432e14a98da900867504e69 Mon Sep 17 00:00:00 2001
From: mvdbeek <m.vandenbeek@gmail.com>
Date: Mon, 26 Sep 2022 15:06:10 +0200
Subject: [PATCH] Set transform-origin of node-area to 0, 0

---
 .../components/Workflow/Editor/WorkflowGraph.vue    | 11 +++--------
 client/src/style/scss/workflow.scss                 | 13 ++++++-------
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Workflow/Editor/WorkflowGraph.vue b/client/src/components/Workflow/Editor/WorkflowGraph.vue
index 21b7ce158f2..d896f63b1e6 100644
--- a/client/src/components/Workflow/Editor/WorkflowGraph.vue
+++ b/client/src/components/Workflow/Editor/WorkflowGraph.vue
@@ -16,16 +16,14 @@
                 @transform="onTransform"
                 @dragging="onDrag"
                 @scaling="onScale">
-                <svg :width="position.width" :height="position.height" class="canvas-svg">
-                    <svg>
+                <div ref="nodes" class="node-area">
+                    <svg class="canvas-svg">
                         <raw-connector v-if="draggingConnection" :position="draggingConnection"></raw-connector>
                         <terminal-connector
                             v-for="connection in connections"
                             :key="connection.id"
                             :connection="connection"></terminal-connector>
                     </svg>
-                </svg>
-                <div ref="nodes" class="nodeArea">
                     <WorkflowNode
                         v-for="(step, key) in steps"
                         :id="key"
@@ -113,7 +111,7 @@ export default {
     methods: {
         onTransform(transform) {
             const cssTransform = `translate(${transform.x}px, ${transform.y}px) scale(${transform.k})`;
-            this.transform = transform.toString();
+            // this.transform = transform.toString();
             this.$refs.nodes.style.transform = cssTransform;
         },
         onPan(pan) {
@@ -222,8 +220,5 @@ export default {
             return connections;
         },
     },
-    beforeDestroy() {
-        this.svgpanzoom.destroy();
-    },
 };
 </script>
diff --git a/client/src/style/scss/workflow.scss b/client/src/style/scss/workflow.scss
index 4110448e8a4..b67a8be2d93 100644
--- a/client/src/style/scss/workflow.scss
+++ b/client/src/style/scss/workflow.scss
@@ -6,15 +6,15 @@
     // not sure if hack or not ...
     overflow: visible;
     display: block;
-    position: absolute;
-        top: 0px;
-        left: 0px
 }
 
-.nodeArea {
+.node-area {
     position: absolute;
-    top: 0px;
-    left: 0px;
+    top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        transform-origin: 0 0;
 }
 .workflow-client {
     .workflow-panel {
@@ -220,7 +220,6 @@
         }
         #canvas-container {
             border-radius: 5px;
-                position: relative;
                 overflow: scroll;
             width: 100%;
             height: 100%;