From 1bf01cc6ee6a20e85dd96dbdcc2e6fba78d9a61b Mon Sep 17 00:00:00 2001 From: Cntient Date: Fri, 11 Feb 2022 13:57:09 -0500 Subject: [PATCH 1/5] 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); + }, }, }; From 170cdfcbedaf01b50dafcedc502fb2079fa646d4 Mon Sep 17 00:00:00 2001 From: Cntient Date: Fri, 11 Feb 2022 14:15:43 -0500 Subject: [PATCH 2/5] no change --- client/src/components/Workflow/Editor/Node.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/client/src/components/Workflow/Editor/Node.vue b/client/src/components/Workflow/Editor/Node.vue index 26978a80698..72ce02d2368 100644 --- a/client/src/components/Workflow/Editor/Node.vue +++ b/client/src/components/Workflow/Editor/Node.vue @@ -151,6 +151,7 @@ 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; From 4077b2a3952dcc1f9d15ff01ac85e69aad77689d Mon Sep 17 00:00:00 2001 From: Cntient Date: Tue, 15 Feb 2022 10:00:17 -0500 Subject: [PATCH 3/5] Fix: only apply random offset only when adding a new node --- client/src/components/Workflow/Editor/Node.vue | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/client/src/components/Workflow/Editor/Node.vue b/client/src/components/Workflow/Editor/Node.vue index 72ce02d2368..1c647689055 100644 --- a/client/src/components/Workflow/Editor/Node.vue +++ b/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, @@ -156,14 +158,14 @@ export default { const step = this.step; const el = this.$el; if (step.position) { - el.style.top = (step.position.top + this.offsetToPreventNodeOverlap(100)) + "px"; - el.style.left = (step.position.left + this.offsetToPreventNodeOverlap(100)) + "px"; + el.style.top = step.position.top + "px"; + el.style.left = step.position.left + "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 + this.offsetToPreventNodeOverlap(100); - const top = -o.offsetTop + (p.offsetHeight - el.offsetHeight) / 2 + this.offsetToPreventNodeOverlap(100); + const left = -o.offsetLeft + (p.offsetWidth - el.offsetWidth) / 2 + this.offsetToPreventNodeOverlap(OFFSET_RANGE); + const top = -o.offsetTop + (p.offsetHeight - el.offsetHeight) / 2 + this.offsetToPreventNodeOverlap(OFFSET_RANGE); el.style.top = `${top}px`; el.style.left = `${left}px`; } From 7ac7323b1baf252b34835aa050ad19e56796832b Mon Sep 17 00:00:00 2001 From: Cntient Date: Wed, 16 Feb 2022 08:09:19 -0500 Subject: [PATCH 4/5] Convention: shorter method/var names --- client/src/components/Workflow/Editor/Node.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/src/components/Workflow/Editor/Node.vue b/client/src/components/Workflow/Editor/Node.vue index 1c647689055..6f7672f2d91 100644 --- a/client/src/components/Workflow/Editor/Node.vue +++ b/client/src/components/Workflow/Editor/Node.vue @@ -164,8 +164,8 @@ 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 + this.offsetToPreventNodeOverlap(OFFSET_RANGE); - const top = -o.offsetTop + (p.offsetHeight - el.offsetHeight) / 2 + this.offsetToPreventNodeOverlap(OFFSET_RANGE); + 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`; } @@ -346,8 +346,8 @@ export default { // Remove active class element.classList.remove("node-active"); }, - offsetToPreventNodeOverlap(maxPixelsOffset) { - return Math.floor(Math.random() * maxPixelsOffset); + offsetVaryPosition(offsetRange) { + return Math.floor(Math.random() * offsetRange); }, }, }; From dc471297225c6397ebca173463be4ff593f280ac Mon Sep 17 00:00:00 2001 From: guerler Date: Wed, 16 Feb 2022 16:19:59 -0500 Subject: [PATCH 5/5] Run make client-format to lint js code --- client/src/components/Workflow/Editor/Node.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/client/src/components/Workflow/Editor/Node.vue b/client/src/components/Workflow/Editor/Node.vue index 6f7672f2d91..6391975697a 100644 --- a/client/src/components/Workflow/Editor/Node.vue +++ b/client/src/components/Workflow/Editor/Node.vue @@ -164,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 + this.offsetVaryPosition(OFFSET_RANGE); - const top = -o.offsetTop + (p.offsetHeight - el.offsetHeight) / 2 + this.offsetVaryPosition(OFFSET_RANGE); + 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`; }