Set transform-origin of node-area to 0, 0

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>

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%;