Replace select animation (#579)

source/view-grapher.css

@@ -63,29 +63,31 @@
 .graph-item-output:hover path { fill: #fff; }
 
 .edge-label text { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; font-size: 10px; }
-.edge-path { stroke: #000; stroke-width: 1px; fill: none; }
-#arrowhead-vee { fill: #000; }
+.edge-path { stroke: #000; stroke-width: 1px; fill: none; marker-end: url("#arrowhead-vee") }
+#arrowhead-vee { fill: #000 };
 .edge-path-control-dependency { stroke-dasharray: 3, 2; }
 
 .cluster rect { stroke: #000; fill: #000; fill-opacity: 0.02; stroke-opacity: 0.06; stroke-width: 1px; }
 
-.select .node.border { stroke: #333; stroke-width: 2px; stroke-dasharray: 6px 3px; stroke-dashoffset: 0; animation: pulse 4s infinite linear; }
-.select.edge-path { stroke: #333; stroke-width: 2px; stroke-dasharray: 6px 3px; stroke-dashoffset: 0; animation: pulse 4s infinite linear; }
+.select .node.border { stroke: #e00; stroke-width: 2px; }
+.select.edge-path { stroke: #e00; stroke-width: 2px; marker-end: url("#arrowhead-vee-select"); }
+#arrowhead-vee-select { fill: #e00 }
 
 @keyframes pulse { from { stroke-dashoffset: 100px; } to { stroke-dashoffset: 0; } }
 
 @media (prefers-color-scheme: dark) {
 
     .edge-label text { fill: #b2b2b2; }
-    .edge-path { stroke: #888888; }
-    #arrowhead-vee { fill: #888888; }
+    .edge-path { stroke: #888; }
+    #arrowhead-vee { fill: #888; }
 
     .node path { stroke: #1d1d1d; }
     .node line { stroke: #1d1d1d; }
 
-    .select .node.border { stroke: #dfdfdf; }
-    .select.edge-path { stroke: #dfdfdf; }
-    
+    .select .node.border { stroke: #b00; }
+    .select.edge-path { stroke: #b00; }
+    #arrowhead-vee-select { fill: #b00 }
+
     .node-item-function path { fill: #404040; }
     .node-item-function text { fill: #dfdfdfdf; }
     .node-item-function:hover { cursor: hand; }

source/view-grapher.js

@@ -104,21 +104,24 @@ grapher.Renderer = class {
 
         const edgePathGroupDefs = this.createElement('defs');
         svgEdgePathGroup.appendChild(edgePathGroupDefs);
-        const marker = this.createElement('marker');
-        marker.setAttribute('id', 'arrowhead-vee');
-        marker.setAttribute('viewBox', '0 0 10 10');
-        marker.setAttribute('refX', 9);
-        marker.setAttribute('refY', 5);
-        marker.setAttribute('markerUnits', 'strokeWidth');
-        marker.setAttribute('markerWidth', 8);
-        marker.setAttribute('markerHeight', 6);
-        marker.setAttribute('orient', 'auto');
-        edgePathGroupDefs.appendChild(marker);
-        const markerPath = this.createElement('path');
-        markerPath.setAttribute('d', 'M 0 0 L 10 5 L 0 10 L 4 5 z');
-        markerPath.style.setProperty('stroke-width', 1);
-        markerPath.style.setProperty('stroke-dasharray', '1,0');
-        marker.appendChild(markerPath);
+        const marker = (id) => {
+            const element = this.createElement('marker');
+            element.setAttribute('id', id);
+            element.setAttribute('viewBox', '0 0 10 10');
+            element.setAttribute('refX', 9);
+            element.setAttribute('refY', 5);
+            element.setAttribute('markerUnits', 'strokeWidth');
+            element.setAttribute('markerWidth', 8);
+            element.setAttribute('markerHeight', 6);
+            element.setAttribute('orient', 'auto');
+            const markerPath = this.createElement('path');
+            markerPath.setAttribute('d', 'M 0 0 L 10 5 L 0 10 L 4 5 z');
+            markerPath.style.setProperty('stroke-width', 1);
+            element.appendChild(markerPath);
+            return element;
+        };
+        edgePathGroupDefs.appendChild(marker("arrowhead-vee"));
+        edgePathGroupDefs.appendChild(marker("arrowhead-vee-select"));
 
         for (const edgeId of graph.edges()) {
             const edge = graph.edge(edgeId);
@@ -126,7 +129,6 @@ grapher.Renderer = class {
             const edgeElement = this.createElement('path');
             edgeElement.setAttribute('class', Object.prototype.hasOwnProperty.call(edge, 'class') ? ('edge-path ' + edge.class) : 'edge-path');
             edgeElement.setAttribute('d', edgePath);
-            edgeElement.setAttribute('marker-end', 'url(#arrowhead-vee)');
             if (edge.id) {
                 edgeElement.setAttribute('id', edge.id);
             }

source/view.js

@@ -762,8 +762,8 @@ view.View = class {
                     this._zoom = d3.zoom();
                     this._zoom(svg);
                     this._zoom.scaleExtent([0.1, 2]);
-                    this._zoom.on('zoom', () => {
-                        originElement.setAttribute('transform', d3.event.transform.toString());
+                    this._zoom.on('zoom', (event) => {
+                        originElement.setAttribute('transform', event.transform.toString());
                     });
                     this._zoom.transform(svg, d3.zoomIdentity);
                 }