Skip to content

Vmo 4394 connection z index #184

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
poojahpatil90 wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Vmo 4394 connection z index #184

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5045b69
VMO-4394 Raise the z-index of wires on hover and click
poojahpatil90 Aug 10, 2021
2e90531
Merge branch 'master' into VMO-4394-connection-zIndex
poojahpatil90 Aug 10, 2021
f9026d0
VMO-4394 Using DOM handle derived from leader-line id
poojahpatil90 Aug 10, 2021
9b4de5d
VMO-4394 Fixing review comment
poojahpatil90 Sep 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 11 additions & 8 deletions src/components/interaction-designer/Connection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export default {
// no need to set up observers over this
// line: null,
isPermanentlyActive: false,
connectionDomHandle: HTMLElement,
}
},

Expand Down Expand Up @@ -140,18 +141,16 @@ export default {

this.line = new LeaderLine(start, end, this.options)

// Add event listeners
const self = this
Copy link
Contributor Author

@poojahpatil90 poojahpatil90 Aug 10, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I remove the reference to self as it did not make any difference in the functionality. Let me know if there is concern around this change.

// 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')
this.connectionDomHandle = document.getElementById(`leader-line-${this.line._id}-line-path`).closest('svg.leader-line')
Copy link

@github-actions github-actions bot Aug 10, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reporter: ESLint
Rule: eslint.rules.no-underscore-dangle
Severity: ERROR
File: src/components/interaction-designer/Connection.vue L144

Unexpected dangling '_' in '_id'. (no-underscore-dangle)


connectionElement.addEventListener('click', self.clickHandler, false)
// Add event listeners
this.connectionDomHandle.addEventListener('click', this.clickHandler, false)

connectionElement.addEventListener('click', self.clickAwayHandler(connectionElement), false)
this.clickAwayHandler(this.connectionDomHandle)

connectionElement.addEventListener('mouseover', self.mouseOverHandler, false)
this.connectionDomHandle.addEventListener('mouseover', this.mouseOverHandler, false)

connectionElement.addEventListener('mouseout', self.mouseOutHandler, false)
this.connectionDomHandle.addEventListener('mouseout', this.mouseOutHandler, false)

// stop listening to scroll and window resize hooks
// LeaderLine.positionByWindowResize = false
Expand Down Expand Up @@ -182,19 +181,22 @@ export default {
mouseOverHandler() {
this.line.setOptions(this.prominentOptions)
this.activateConnection({connectionContext: this.connectionContext})
this.connectionDomHandle.style.zIndex = 1
this.$emit('lineMouseIn')
},
mouseOutHandler() {
if (!this.isPermanentlyActive) {
this.line.setOptions(this.options)
this.deactivateConnection({connectionContext: this.connectionContext})
}
this.connectionDomHandle.style.zIndex = 0
this.$emit('lineMouseOut')
},
clickHandler() {
this.isPermanentlyActive = true
this.activateConnection({connectionContext: this.connectionContext})
this.activateBlock({blockId: null})
this.connectionDomHandle.style.zIndex = 1
this.$emit('lineMouseIn')
},
clickAwayHandler(connectionElement) {
Expand All @@ -213,6 +215,7 @@ export default {
this.line.setOptions(this.options)
this.deactivateConnection({connectionContext: this.connectionContext})
}
this.connectionDomHandle.style.zIndex = 0
this.$emit('lineMouseOut')
}, false)
},
Expand Down