From f8000f3b7890d4677ee93d31ba870b863493ac79 Mon Sep 17 00:00:00 2001 From: Liviu Popa Date: Wed, 20 Apr 2022 14:54:21 +0300 Subject: [PATCH 1/4] Added link (edge) selection event Signed-off-by: Liviu Popa --- happi-graph.js | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/happi-graph.js b/happi-graph.js index 05fb175..4b7e7e8 100644 --- a/happi-graph.js +++ b/happi-graph.js @@ -639,6 +639,8 @@ class HappiGraph extends PolymerElement { onLinkClick(link) { let element = this.shadowRoot.querySelector('#svg .all-group .links-group [id="'+ link.id +'"]') + this.doLinkSelection(element); + this.dispatchEvent( new CustomEvent('happi-graph-on-link-click', { bubbles: true, @@ -649,6 +651,52 @@ class HappiGraph extends PolymerElement { ); } + doLinkSelection( linkElement ) { + + if (this.sameLink(linkElement, this.selectedLink)) { + this.invertLinkSelection(linkElement) + } else { + this.selectLink(linkElement) + + if(this.selectedLink){ + this.deselectLink(this.selectedLink) + } + } + this.selectedLink = linkElement + } + + sameLink(link, otherLink) { + return link === otherLink + } + + invertLinkSelection(linkElement){ + if(this.isLinkSelected(linkElement)){ + this.deselectLink(linkElement) + }else{ + this.selectLink(linkElement) + } + } + + isLinkSelected(linkElement){ + let stroke = linkElement.style.getPropertyValue("stroke"); + let stroke_width = linkElement.style.getPropertyValue("stroke-width") + let marker_end = linkElement.getAttribute("marker-end") + + return stroke === "var(--happi-graph-primary-color)" && stroke_width === "4" && marker_end === "url(#arrow-end-selected)"; + } + + deselectLink(linkElement){ + linkElement.style.setProperty("stroke", "black") + linkElement.style.setProperty("stroke-width", "2") + linkElement.setAttribute("marker-end", "url(#arrow-end)") + } + + selectLink(linkElement){ + linkElement.style.setProperty("stroke", "var(--happi-graph-primary-color)") + linkElement.style.setProperty("stroke-width", "4") + linkElement.setAttribute("marker-end", "url(#arrow-end-selected)") + } + hasSize(a) { if(a) { return a.length > 0; From 7d6da8a9d3ef41f87dae50f3024b0f40a4325444 Mon Sep 17 00:00:00 2001 From: Liviu Popa Date: Fri, 6 May 2022 12:22:52 +0300 Subject: [PATCH 2/4] Added link mouse over/out events Signed-off-by: Liviu Popa --- happi-graph-helpers.js | 16 +++++++------- happi-graph.js | 48 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 56 insertions(+), 8 deletions(-) diff --git a/happi-graph-helpers.js b/happi-graph-helpers.js index b8233a0..c1e4aa1 100644 --- a/happi-graph-helpers.js +++ b/happi-graph-helpers.js @@ -277,36 +277,36 @@ export const adjustDestinationNode = (from, to, toPoint) => { // upwards right if(from.x < to.x && from.y > to.y) { - if (toPoint == 'BOTTOM' ) { + if (toPoint === 'BOTTOM' ) { to.x = to.x - offset; - }else if (toPoint == 'LEFT'){ + }else if (toPoint === 'LEFT'){ to.y = to.y + offset; } } // upwards left if(from.x > to.x && from.y > to.y){ - if(toPoint == 'BOTTOM'){ + if(toPoint === 'BOTTOM'){ to.x = to.x + offset; - }else if (toPoint == 'RIGHT'){ + }else if (toPoint === 'RIGHT'){ to.y = to.y + offset; } } // downwards right if(from.x < to.x && from.y < to.y){ - if(toPoint == 'TOP'){ + if(toPoint === 'TOP'){ to.x = to.x - offset; - }else if (toPoint == 'LEFT'){ + }else if (toPoint === 'LEFT'){ to.y = to.y - offset; } } // downwards left if(from.x > to.x && from.y < to.y){ - if(toPoint == 'TOP'){ + if(toPoint === 'TOP'){ to.x = to.x + offset; - }else if (toPoint == 'LEFT'){ + }else if (toPoint === 'LEFT'){ to.y = to.y - offset; } } diff --git a/happi-graph.js b/happi-graph.js index 4b7e7e8..ca042eb 100644 --- a/happi-graph.js +++ b/happi-graph.js @@ -102,6 +102,10 @@ class HappiGraph extends PolymerElement { nodeDistanceY: { type: Number, value: 350 + }, + mousePosition: { + type: Object, + value: null } }; } @@ -360,6 +364,9 @@ class HappiGraph extends PolymerElement { initGraph() { this.svg = d3.select(this.$.svg); + this.addEventListener('mousemove', function (event) { + this.mousePosition = {x: event.x, y: event.y}; + }) this.allGroup = this.svg @@ -509,6 +516,47 @@ class HappiGraph extends PolymerElement { .attr('from', function(d) { return d.from.id; }) .attr('to', function(d) { return d.to.id; }) .on('click', this.onLinkClick) + .on('mouseover', function(d){ + let position = this.ownerSVGElement.createSVGPoint(); + position.x = self.mousePosition.x; + position.y = self.mousePosition.y; + position = position.matrixTransform(this.parentNode.getScreenCTM().inverse()); + + let linkLabel = d.label; + let sourceLabel = self.nodes.filter(n => n.id === d.from.id ).pop().value; + let targetLabel = self.nodes.filter(n => n.id === d.to.id ).pop().value; + + let textBackground = + d3.select(this.parentNode) + .append('rect') + .classed('link-popup-box', true) + .attr('transform', `translate(20, -10)`) + .style("fill", "#ffffff") + .style("stroke", "#cccccc") + .attr('rx', 10) + .attr('ry', 10); + + let text = + d3.select(this.parentNode) + .append('text') + .classed('link-popup-text', true) + .attr('transform', `translate(30, 0)`) + .attr('x', position.x + 10) + .attr('y', position.y + 10) + .text(() => sourceLabel + " :: "+ linkLabel + " :: " + targetLabel ); + + let bBox = text.node().getBBox(); + + textBackground + .attr('x', bBox.x) + .attr('y', bBox.y) + .attr('height', bBox.height + 20) + .attr('width', bBox.width + 20); + }) + .on('mouseout', function(d){ + d3.select(this.ownerSVGElement.getElementsByClassName('link-popup-box')[0]).remove(); + d3.select(this.ownerSVGElement.getElementsByClassName('link-popup-text')[0]).remove(); + }) .attr('x1', (d) => { let { from, to } = getLinkCoordinates(d.from, d.to, self.graphDirection); From 91b71d7580bece172493ccc9da7e523ae18183f9 Mon Sep 17 00:00:00 2001 From: Liviu Popa Date: Mon, 9 May 2022 16:00:20 +0300 Subject: [PATCH 3/4] Added link (edge) details on 'mouseover' and selection on 'click' Signed-off-by: Liviu Popa --- happi-graph.js | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/happi-graph.js b/happi-graph.js index ca042eb..6206635 100644 --- a/happi-graph.js +++ b/happi-graph.js @@ -106,6 +106,10 @@ class HappiGraph extends PolymerElement { mousePosition: { type: Object, value: null + }, + mousePositionEventListener: { + type: Object, + value: null } }; } @@ -362,11 +366,21 @@ class HappiGraph extends PolymerElement { this.allGroup ? this.allGroup.remove() : (this.debug ? console.log('ALL_GROUP_EMPTY') : 0); } + createMousePositionEventListener(){ + this.mousePositionEventListener = function (event) { + this.mousePosition = {x: event.x, y: event.y}; + }; + } + + disconnectedCallback() { + this.removeEventListener(this, this.mousePositionEventListener); + } + initGraph() { this.svg = d3.select(this.$.svg); - this.addEventListener('mousemove', function (event) { - this.mousePosition = {x: event.x, y: event.y}; - }) + + this.createMousePositionEventListener(); + this.addEventListener('mousemove', this.mousePositionEventListener); this.allGroup = this.svg From d0383678d34c24e5cca6090648c21f71009c7b94 Mon Sep 17 00:00:00 2001 From: Liviu Popa Date: Tue, 10 May 2022 14:03:42 +0300 Subject: [PATCH 4/4] Added link (edge) details on 'mouseover' and selection on 'click' Signed-off-by: Liviu Popa --- happi-graph.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/happi-graph.js b/happi-graph.js index 6206635..73c02d3 100644 --- a/happi-graph.js +++ b/happi-graph.js @@ -373,7 +373,7 @@ class HappiGraph extends PolymerElement { } disconnectedCallback() { - this.removeEventListener(this, this.mousePositionEventListener); + this.removeEventListener('mousemove', this.mousePositionEventListener); } initGraph() {