From 5045b694604d1a4eb97d95db5282b0f9f45fca74 Mon Sep 17 00:00:00 2001 From: Pooja Patil Date: Mon, 9 Aug 2021 17:23:41 -0700 Subject: [PATCH 1/3] VMO-4394 Raise the z-index of wires on hover and click --- src/components/interaction-designer/Connection.vue | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/interaction-designer/Connection.vue b/src/components/interaction-designer/Connection.vue index 6bce4f7e1..5fb7bc5c1 100644 --- a/src/components/interaction-designer/Connection.vue +++ b/src/components/interaction-designer/Connection.vue @@ -153,6 +153,8 @@ export default { connectionElement.addEventListener('mouseout', self.mouseOutHandler, false) + this.line.domElement = connectionElement + // stop listening to scroll and window resize hooks // LeaderLine.positionByWindowResize = false // this.line.positionByWindowResize = false @@ -182,6 +184,7 @@ export default { mouseOverHandler() { this.line.setOptions(this.prominentOptions) this.activateConnection({connectionContext: this.connectionContext}) + this.line.domElement.style.zIndex = 1 this.$emit('lineMouseIn') }, mouseOutHandler() { @@ -189,12 +192,14 @@ export default { this.line.setOptions(this.options) this.deactivateConnection({connectionContext: this.connectionContext}) } + this.line.domElement.style.zIndex = 0 this.$emit('lineMouseOut') }, clickHandler() { this.isPermanentlyActive = true this.activateConnection({connectionContext: this.connectionContext}) this.activateBlock({blockId: null}) + this.line.domElement.style.zIndex = 1 this.$emit('lineMouseIn') }, clickAwayHandler(connectionElement) { @@ -213,6 +218,7 @@ export default { this.line.setOptions(this.options) this.deactivateConnection({connectionContext: this.connectionContext}) } + this.line.domElement.style.zIndex = 0 this.$emit('lineMouseOut') }, false) }, From f9026d0da61fedb0ec070f5d1ce8a6fed34c7146 Mon Sep 17 00:00:00 2001 From: Pooja Patil Date: Tue, 10 Aug 2021 09:28:03 -0700 Subject: [PATCH 2/3] VMO-4394 Using DOM handle derived from leader-line id --- .../interaction-designer/Connection.vue | 25 ++++++++----------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/src/components/interaction-designer/Connection.vue b/src/components/interaction-designer/Connection.vue index 5fb7bc5c1..e7f9c5836 100644 --- a/src/components/interaction-designer/Connection.vue +++ b/src/components/interaction-designer/Connection.vue @@ -31,6 +31,7 @@ export default { // no need to set up observers over this // line: null, isPermanentlyActive: false, + connectionDomHandle: HTMLElement, } }, @@ -140,20 +141,16 @@ export default { this.line = new LeaderLine(start, end, this.options) - // Add event listeners - const self = this - // the only way to identify current line so far: https://github.com/anseki/leader-line/issues/185 - const connectionElement = document.querySelector('body>.leader-line:last-of-type') - - connectionElement.addEventListener('click', self.clickHandler, false) + this.connectionDomHandle = document.getElementById(`leader-line-${this.line._id}-line-path`).closest('svg.leader-line') - connectionElement.addEventListener('click', self.clickAwayHandler(connectionElement), false) + // Add event listeners + this.connectionDomHandle.addEventListener('click', this.clickHandler, false) - connectionElement.addEventListener('mouseover', self.mouseOverHandler, false) + this.connectionDomHandle.addEventListener('click', this.clickAwayHandler(this.connectionDomHandle), false) - connectionElement.addEventListener('mouseout', self.mouseOutHandler, false) + this.connectionDomHandle.addEventListener('mouseover', this.mouseOverHandler, false) - this.line.domElement = connectionElement + this.connectionDomHandle.addEventListener('mouseout', this.mouseOutHandler, false) // stop listening to scroll and window resize hooks // LeaderLine.positionByWindowResize = false @@ -184,7 +181,7 @@ export default { mouseOverHandler() { this.line.setOptions(this.prominentOptions) this.activateConnection({connectionContext: this.connectionContext}) - this.line.domElement.style.zIndex = 1 + this.connectionDomHandle.style.zIndex = 1 this.$emit('lineMouseIn') }, mouseOutHandler() { @@ -192,14 +189,14 @@ export default { this.line.setOptions(this.options) this.deactivateConnection({connectionContext: this.connectionContext}) } - this.line.domElement.style.zIndex = 0 + this.connectionDomHandle.style.zIndex = 0 this.$emit('lineMouseOut') }, clickHandler() { this.isPermanentlyActive = true this.activateConnection({connectionContext: this.connectionContext}) this.activateBlock({blockId: null}) - this.line.domElement.style.zIndex = 1 + this.connectionDomHandle.style.zIndex = 1 this.$emit('lineMouseIn') }, clickAwayHandler(connectionElement) { @@ -218,7 +215,7 @@ export default { this.line.setOptions(this.options) this.deactivateConnection({connectionContext: this.connectionContext}) } - this.line.domElement.style.zIndex = 0 + this.connectionDomHandle.style.zIndex = 0 this.$emit('lineMouseOut') }, false) }, From 9b4de5d9703ce807187fe50bdd760db2d152e94c Mon Sep 17 00:00:00 2001 From: Pooja Patil Date: Wed, 15 Sep 2021 22:15:17 -0700 Subject: [PATCH 3/3] VMO-4394 Fixing review comment --- src/components/interaction-designer/Connection.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/interaction-designer/Connection.vue b/src/components/interaction-designer/Connection.vue index e7f9c5836..40cb09774 100644 --- a/src/components/interaction-designer/Connection.vue +++ b/src/components/interaction-designer/Connection.vue @@ -146,7 +146,7 @@ export default { // Add event listeners this.connectionDomHandle.addEventListener('click', this.clickHandler, false) - this.connectionDomHandle.addEventListener('click', this.clickAwayHandler(this.connectionDomHandle), false) + this.clickAwayHandler(this.connectionDomHandle) this.connectionDomHandle.addEventListener('mouseover', this.mouseOverHandler, false)