Support highlighting selected nodes

Author: ZhangGe6

static/view-grapher.css

@@ -93,7 +93,7 @@
     .node-item-function text { fill: #dfdfdfdf; }
     .node-item-function:hover { cursor: pointer; }
     .node-item-function:hover path { fill: #666666; }
-    
+
     .node-item-type path { fill: #303030; }
     .node-item-type text { fill: #dfdfdf; }
     .node-item-type:hover { cursor: pointer; }
@@ -134,3 +134,6 @@
     .node-item-type-quantization path { fill: rgb(80, 40, 0, 0.7); }
     .node-item-type-custom path { fill: rgb(64, 64, 64, 0.7); }
 }
+
+ /* render selected nodes */
+ .highlight path { stroke: #FF6347; stroke-width: 2px;}

static/view-sidebar.js

@@ -9,6 +9,7 @@ sidebar.Sidebar = class {
         this._host = host;
         this._id = id ? ('-' + id) : '';
         this._stack = [];
+        this.node_owner = null;
         this._closeSidebarHandler = () => {
             this._pop();
         };
@@ -64,6 +65,10 @@ sidebar.Sidebar = class {
             container.style.width = '100%';
             container.focus();
         }
+        if (this.node_owner) {
+            this.node_owner.element.classList.remove('highlight');
+            this.node_owner = null;
+        }
     }
 
     _deactivate() {
@@ -121,6 +126,11 @@ sidebar.Sidebar = class {
             container.style.width = 'max(40vw, calc(100vw - 500px))';
         }
     }
+
+    // used if the side bar is invoked to show a node's property
+    mark_node_owner(node) {
+        this.node_owner = node;
+    }
 };
 
 sidebar.NodeSidebar = class {

static/view.js

@@ -821,6 +821,10 @@ view.View = class {
                     nodeSidebar.toggleInput(input.name);
                 }
                 this._sidebar.open(nodeSidebar.render(), 'Node Properties');
+
+                var node = this.modifier.name2ViewNode.get(modelNodeName);
+                node.element.classList.add('highlight');
+                this._sidebar.mark_node_owner(node);
             }
             catch (error) {
                 const content = " in '" + this._model.identifier + "'.";