add icons to FIND side bar

beru · Apr 24, 2024 · bc2a009 · bc2a009
1 parent c74f7d2
commit bc2a009
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 19 deletions.
diff --git a/source/index.html b/source/index.html
@@ -212,7 +212,11 @@
     background-repeat: no-repeat;
 }
 .sidebar-separator { margin-bottom: 20px; }
-.sidebar-find-search { font-family: inherit; font-size: 13px; margin: 0px 20px 8px 20px; padding: 8px 16px 8px 16px; background: #fff; border-radius: 16px; border: 0; outline: 0; }
+.sidebar-find-box { position:relative; }
+.sidebar-find-search { position:relative; width:85%; font-family: inherit; font-size: 13px; margin: 0px 20px 8px 20px; padding: 8px 16px 8px 16px; background: #fff; border-radius: 16px; border: 0; outline: 0; }
+.siderbar-find-edge-icon { position:absolute; top:8px; right:35px; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
+.siderbar-find-node-icon { position:absolute; top:8px; right:55px; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
+.siderbar-find-initializer-icon { position:absolute; top:8px; right:75px; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
 .sidebar-find-content { flex-grow: 1; padding: 0px 20px 20px 20px; padding-right: 20px; overflow-y: auto; list-style-type: none; overflow-y: auto; margin: 0; }
 .sidebar-find-content li { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; margin: 0; padding: 5px 8px 5px 18px; outline: 0; white-space: nowrap; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
 .sidebar-find-content li:hover { background: #e5e5e5; }

diff --git a/source/view.js b/source/view.js
@@ -3253,6 +3253,35 @@ view.FindSidebar = class extends view.Control {
                 e.stopPropagation();
             }
         });
+        this._searchBox = this.createElement('div', 'sidebar-find-box');
+        let edgeIcon = this.createElement('div', 'siderbar-find-edge-icon');
+        let nodeIcon = this.createElement('div', 'siderbar-find-node-icon');
+        let initializerIcon = this.createElement('div', 'siderbar-find-initializer-icon');
+        edgeIcon.innerHTML = '\u2192';
+        nodeIcon.innerHTML = '\u25A2';
+        initializerIcon.innerHTML = '\u25A0';
+        this._showEdge = true;
+        this._showNode = true;
+        this._showInitializer = true;
+        edgeIcon.addEventListener('click', (e) => {
+            this._showEdge = !this._showEdge;
+            e.srcElement.style.opacity = this._showEdge ? "1.0" : "0.5";
+            this.update(this._searchElement.value);
+        });
+        nodeIcon.addEventListener('click', (e) => {
+            this._showNode = !this._showNode;
+            e.srcElement.style.opacity = this._showNode ? "1.0" : "0.5";
+            this.update(this._searchElement.value);
+        });
+        initializerIcon.addEventListener('click', (e) => {
+            this._showInitializer = !this._showInitializer;
+            e.srcElement.style.opacity = this._showInitializer ? "1.0" : "0.5";
+            this.update(this._searchElement.value);
+        });
+        this._searchBox.appendChild(this._searchElement);
+        this._searchBox.appendChild(edgeIcon);
+        this._searchBox.appendChild(nodeIcon);
+        this._searchBox.appendChild(initializerIcon);
         this._contentElement = this.createElement('ol', 'sidebar-find-content');
         this._contentElement.addEventListener('click', (e) => {
             const identifier = e.target.getAttribute('data');
@@ -3365,10 +3394,12 @@ view.FindSidebar = class extends view.Control {
                 edges.add(value.name);
             }
         };
-        const inputs = this._signature ? this._signature.inputs : this._graph.inputs;
-        for (const input of inputs) {
-            for (const value of input.value) {
-                edge(value);
+        if (this._showEdge) {
+            const inputs = this._signature ? this._signature.inputs : this._graph.inputs;
+            for (const input of inputs) {
+                for (const value of input.value) {
+                    edge(value);
+                }
             }
         }
         for (const node of this._graph.nodes) {
@@ -3377,34 +3408,43 @@ view.FindSidebar = class extends view.Control {
                 for (const value of input.value) {
                     if (value.initializer) {
                         initializers.push(value);
-                    } else {
+                    } else if (this._showEdge) {
                         edge(value);
                     }
                 }
             }
-            const name = node.name;
-            const type = node.type.name;
-            const location = node.location;
-            if ((name && match(name)) || (type && match(type)) || (location && match(location))) {
-                add(node, `\u25A2 ${name || `[${type}]`}`);
+            if (this._showNode) {
+                const name = node.name;
+                const type = node.type.name;
+                const location = node.location;
+                if ((name && match(name)) || (type && match(type)) || (location && match(location))) {
+                    add(node, `\u25A2 ${name || `[${type}]`}`);
+                }
             }
-            for (const value of initializers) {
-                if (value.name && !edges.has(value.name) && matchValue(value)) {
-                    add(node, `\u25A0 ${value.name.split('\n').shift()}`); // split custom argument id
+            if (this._showInitializer) {
+                for (const value of initializers) {
+                    if (value.name && !edges.has(value.name) && matchValue(value)) {
+                        add(node, `\u25A0 ${value.name.split('\n').shift()}`); // split custom argument id
+                    }
                 }
             }
         }
-        const outputs = this._signature ? this._signature.outputs : this._graph.inputs;
-        for (const output of outputs) {
-            for (const value of output.value) {
-                edge(value);
+        if (this._showEdge) {
+            const outputs = this._signature ? this._signature.outputs : this._graph.inputs;
+            for (const output of outputs) {
+                for (const value of output.value) {
+                    edge(value);
+                }
             }
         }
         this._contentElement.style.display = this._contentElement.childNodes.length === 0 ? 'none' : 'block';
     }
 
     render() {
-        return [this._searchElement, this._contentElement];
+        return [
+            this._searchBox,
+            this._contentElement
+        ];
     }
 };