Merge pull request #13361 from hujambo-dunia/feature/hujambo-dunia/Issue_12022/20220211_workflows_node_overlap_enhancement

Feature/hujambo dunia/issue 12022/20220211 workflows node overlap enhancement

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

@@ -88,6 +88,8 @@ import { ActiveOutputs } from "./modules/outputs";
 import { attachDragging } from "./modules/dragging";
 Vue.use(BootstrapVue);
 
+const OFFSET_RANGE = 100;
+
 export default {
     components: {
         LoadingSpan,
@@ -162,8 +164,10 @@ export default {
             const p = document.getElementById("canvas-viewport");
             const o = document.getElementById("canvas-container");
             if (p && o) {
-                const left = -o.offsetLeft + (p.offsetWidth - el.offsetWidth) / 2;
-                const top = -o.offsetTop + (p.offsetHeight - el.offsetHeight) / 2;
+                const left =
+                    -o.offsetLeft + (p.offsetWidth - el.offsetWidth) / 2 + this.offsetVaryPosition(OFFSET_RANGE);
+                const top =
+                    -o.offsetTop + (p.offsetHeight - el.offsetHeight) / 2 + this.offsetVaryPosition(OFFSET_RANGE);
                 el.style.top = `${top}px`;
                 el.style.left = `${left}px`;
             }
@@ -344,6 +348,9 @@ export default {
             // Remove active class
             element.classList.remove("node-active");
         },
+        offsetVaryPosition(offsetRange) {
+            return Math.floor(Math.random() * offsetRange);
+        },
     },
 };
 </script>