Merge pull request #31 from lcpopa/main

Added click event on graph links (edges)

happi-graph-helpers.js

@@ -272,11 +272,54 @@ export const getNodeAnchorPoint = (node, point) => {
   }
 };
 
+export const adjustDestinationNode = (from, to, toPoint) => {
+  let offset = 5;
+
+  // upwards right
+  if(from.x < to.x && from.y > to.y) {
+    if (toPoint == 'BOTTOM' ) {
+      to.x = to.x - offset;
+    }else if (toPoint == 'LEFT'){
+      to.y = to.y + offset;
+    }
+  }
+
+  // upwards left
+  if(from.x > to.x && from.y > to.y){
+    if(toPoint == 'BOTTOM'){
+      to.x = to.x + offset;
+    }else if (toPoint == 'RIGHT'){
+      to.y = to.y + offset;
+    }
+  }
+
+  // downwards right
+  if(from.x < to.x && from.y < to.y){
+    if(toPoint == 'TOP'){
+      to.x = to.x - offset;
+    }else if (toPoint == 'LEFT'){
+      to.y = to.y - offset;
+    }
+  }
+
+  // downwards left
+  if(from.x > to.x && from.y < to.y){
+    if(toPoint == 'TOP'){
+      to.x = to.x + offset;
+    }else if (toPoint == 'LEFT'){
+      to.y = to.y - offset;
+    }
+  }
+
+  return to;
+};
+
 export const getLinkCoordinates = (nodeA, nodeB, graphDirection) => {
   let _relativeTo = relativeTo(nodeA, nodeB, graphDirection);
 
   let from = getNodeAnchorPoint(nodeA, _relativeTo.a);
   let to = getNodeAnchorPoint(nodeB, _relativeTo.b);
+  to = adjustDestinationNode(from, to, _relativeTo.b);
 
   return {
     from: { x: from.x, y: from.y },

happi-graph.js

@@ -22,6 +22,7 @@ class HappiGraph extends PolymerElement {
 
     this.zooming = this.zooming.bind(this);
     this.onNodeClick = this.onNodeClick.bind(this);
+    this.onLinkClick = this.onLinkClick.bind(this);
   }
 
   static get properties() {
@@ -160,7 +161,7 @@ class HappiGraph extends PolymerElement {
       this.links = [
         ...newGraphData.links.map(e => {
           return {
-            id: `${e.from}-${e.to}`,
+            id: e.id,
             label: e.label,
 
             from: this.nodes.filter(n => n.id === e.from).pop(),
@@ -504,8 +505,10 @@ class HappiGraph extends PolymerElement {
       })
       .attr('marker-start', (d) => (d.connectionFrom) ? 'url(#arrow-start)' : null)
       .attr('marker-end', (d) => (d.connectionTo) ? 'url(#arrow-end)' : null)
+      .attr('id', function(d) { return d.id; })
       .attr('from', function(d) { return d.from.id; })
       .attr('to', function(d) { return d.to.id; })
+      .on('click', this.onLinkClick)
       .attr('x1', (d) => {
         let { from, to } = getLinkCoordinates(d.from, d.to, self.graphDirection);
 
@@ -634,6 +637,18 @@ class HappiGraph extends PolymerElement {
     );
   }
 
+  onLinkClick(link) {
+    let element = this.shadowRoot.querySelector('#svg .all-group .links-group [id="'+ link.id +'"]')
+    this.dispatchEvent(
+        new CustomEvent('happi-graph-on-link-click', {
+          bubbles: true,
+          detail: {
+            linkElement: element
+          }
+        })
+    );
+  }
+
   hasSize(a) {
     if(a) {
       return a.length > 0;
@@ -777,6 +792,16 @@ class HappiGraph extends PolymerElement {
                       markerUnits="strokeWidth">
                 <path d="M0,0 L0,6 L9,3 z" fill="#000" />
               </marker>
+
+              <marker id="arrow-end-selected"
+                      markerWidth="10"
+                      markerHeight="10"
+                      refx="7"
+                      refy="3"
+                      orient="auto"
+                      markerUnits="strokeWidth">
+                <path d="M0,0 L0,6 L9,3 z" fill="var(--happi-graph-primary-color)" />
+              </marker>
             </defs>
           </svg>
         </div>