Mouse events for flow diagram endcaps & connectors

frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html

@@ -81,6 +81,14 @@
         (pointerout)="onBlur($event, 'input', i);"
         (click)="onClick($event, 'input', inputData[i].index);"
       />
+      <path
+        [attr.d]="input.markerPath"
+        class="input marker-target {{input.class}}"
+        [class.highlight]="inputData[i].index === inputIndex"
+        (pointerover)="onHover($event, 'input', i);"
+        (pointerout)="onBlur($event, 'input', i);"
+        (click)="onClick($event, 'input', inputData[i].index);"
+      />
       <path
         [attr.d]="input.path"
         class="line {{input.class}}"
@@ -101,6 +109,14 @@
         (pointerout)="onBlur($event, 'output', i);"
         (click)="onClick($event, 'output', outputData[i].index);"
       />
+      <path
+        [attr.d]="output.markerPath"
+        class="output marker-target {{output.class}}"
+        [class.highlight]="outputData[i].index === outputIndex"
+        (pointerover)="onHover($event, 'output', i);"
+        (pointerout)="onBlur($event, 'output', i);"
+        (click)="onClick($event, 'output', outputData[i].index);"
+      />
       <path
         [attr.d]="output.path"
         class="line {{output.class}}"

frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.scss

@@ -22,25 +22,26 @@
         stroke: url(#output-highlight-gradient);
       }
     }
+  }
 
-    &:hover {
+  .line:hover, .connector:hover + .marker-target + .line, .marker-target:hover + .line {
-      z-index: 10;
+    z-index: 10;
-      cursor: pointer;
+    cursor: pointer;
-      &.input {
+    &.input {
-        stroke: url(#input-hover-gradient);
+      stroke: url(#input-hover-gradient);
-      }
+    }
-      &.output {
+    &.output {
-        stroke: url(#output-hover-gradient);
+      stroke: url(#output-hover-gradient);
-      }
+    }
-      &.fee {
+    &.fee {
-        stroke: url(#fee-hover-gradient);
+      stroke: url(#fee-hover-gradient);
-      }
     }
   }
 
   .connector {
     stroke: none;
     opacity: 0.75;
+    cursor: pointer;
     &.input {
       fill: url(#input-connector-gradient);
     }
@@ -48,4 +49,10 @@
       fill: url(#output-connector-gradient);
     }
   }
+
+  .marker-target {
+    stroke: none;
+    fill: transparent;
+    cursor: pointer;
+  }
 }

frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts

@@ -12,6 +12,7 @@ interface SvgLine {
   style: string;
   class?: string;
   connectorPath?: string;
+  markerPath?: string;
 }
 
 interface Xput {
@@ -312,6 +313,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
         style: this.makeStyle(line.thickness, xputs[i].type),
         class: xputs[i].type,
         connectorPath: this.connectors ? this.makeConnectorPath(side, line.outerY, line.innerY, line.thickness): null,
+        markerPath: this.makeMarkerPath(side, line.outerY, line.innerY, line.thickness),
       };
     });
   }
@@ -351,6 +353,22 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
     }
   }
 
+  makeMarkerPath(side: 'in' | 'out', y: number, inner, weight: number): string {
+    const halfWidth = weight * 0.5;
+    const offset = Math.max(2, halfWidth * 0.2);
+
+    // align with for svg horizontal gradient bug correction
+    if (Math.round(y) === Math.round(inner)) {
+      y -= 1;
+    }
+
+    if (side === 'in') {
+      return `M ${10 - offset} ${y - halfWidth} L ${halfWidth + 10 - offset} ${y} L ${10 - offset} ${y + halfWidth} L ${offset + weight} ${ y + halfWidth} L ${offset + weight} ${y - halfWidth}`;
+    } else {
+      return `M ${this.width - halfWidth - 10 + offset} ${y - halfWidth} L ${this.width - 10 + offset} ${y} L ${this.width - halfWidth - 10 + offset} ${y + halfWidth} L ${this.width - halfWidth - 10} ${ y + halfWidth} L ${this.width - halfWidth - 10} ${y - halfWidth}`;
+    }
+  }
+
   makeStyle(minWeight, type): string {
     if (type === 'fee') {
       return `stroke-width: ${minWeight}`;