From 1bf01cc6ee6a20e85dd96dbdcc2e6fba78d9a61b Mon Sep 17 00:00:00 2001
From: Cntient <developer@cntient.com>
Date: Fri, 11 Feb 2022 13:57:09 -0500
Subject: [PATCH] Generate random offset number on Top and Left node positions

---
 client/src/components/Workflow/Editor/Node.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Workflow/Editor/Node.vue b/client/src/components/Workflow/Editor/Node.vue
index 404fd3a84ed..26978a80698 100644
--- a/client/src/components/Workflow/Editor/Node.vue
+++ b/client/src/components/Workflow/Editor/Node.vue
@@ -151,19 +151,18 @@ export default {
         this.activeOutputs = new ActiveOutputs();
         this.element = this.$el;
         this.content_id = this.contentId;
-
         // Set initial scroll position
         const step = this.step;
         const el = this.$el;
         if (step.position) {
-            el.style.top = step.position.top + "px";
-            el.style.left = step.position.left + "px";
+            el.style.top = (step.position.top + this.offsetToPreventNodeOverlap(100)) + "px";
+            el.style.left = (step.position.left + this.offsetToPreventNodeOverlap(100)) + "px";
         } else {
             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.offsetToPreventNodeOverlap(100);
+                const top = -o.offsetTop + (p.offsetHeight - el.offsetHeight) / 2 + this.offsetToPreventNodeOverlap(100);
                 el.style.top = `${top}px`;
                 el.style.left = `${left}px`;
             }
@@ -344,6 +343,9 @@ export default {
             // Remove active class
             element.classList.remove("node-active");
         },
+        offsetToPreventNodeOverlap(maxPixelsOffset) {
+            return Math.floor(Math.random() * maxPixelsOffset);
+        },
     },
 };
 </script>