make FIND sidebar more durable

lutzroeder · Sep 22, 2024 · b2d5154 · b2d5154
1 parent abe90dc
commit b2d5154
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 29 deletions.
diff --git a/source/index.html b/source/index.html
@@ -298,28 +298,25 @@
     <h1 id="sidebar-title" class="sidebar-title"></h1>
     <a id="sidebar-closebutton" class="sidebar-closebutton" href="javascript:void(0)" draggable="false">&times;</a>
     <div id="sidebar-content" class="sidebar-content"></div>
-    <svg width="0" height="0" display="none">
-        <defs>
-            <symbol id="sidebar-icon-node" viewBox="0 0 20 20">
-                <circle cx="10" cy="10" r="6" stroke-width="2" fill="none"/>
-            </symbol>
-            <symbol id="sidebar-icon-connection" viewBox="0 0 20 20">
-                <line x1="4" y1="10" x2="15" y2="10" stroke-width="2" />
-                <polyline points="11,6 15,10 11,14" stroke-width="2" />
-            </symbol>
-            <symbol id="sidebar-icon-weight" viewBox="0 0 20 20">
-                <circle cx="5" cy="5" r="1" />
-                <circle cx="10" cy="5" r="1" />
-                <circle cx="15" cy="5" r="1" />
-                <circle cx="5" cy="10" r="1" />
-                <circle cx="10" cy="10" r="1" />
-                <circle cx="15" cy="10" r="1" />
-                <circle cx="5" cy="15" r="1" />
-                <circle cx="10" cy="15" r="1" />
-                <circle cx="15" cy="15" r="1" />
-          </symbol>
-        </defs>
-    </svg>
+    <div style="display:none">
+        <!-- Spaces must not be written between tags to prevent text nodes. -->
+        <ol id="sidebar-find-content-template"><li><svg class="sidebar-find-content-icon" viewBox="0 0 20 20">
+                    <circle cx="10" cy="10" r="6" stroke-width="2" fill="none"/>
+                </svg><span></span></li><li><svg class="sidebar-find-content-icon" viewBox="0 0 20 20">
+                    <line x1="4" y1="10" x2="15" y2="10" stroke-width="2" />
+                    <polyline points="11,6 15,10 11,14" stroke-width="2" />
+                </svg><span></span></li><li><svg class="sidebar-find-content-icon" viewBox="0 0 20 20">
+                    <circle cx="5" cy="5" r="1" />
+                    <circle cx="10" cy="5" r="1" />
+                    <circle cx="15" cy="5" r="1" />
+                    <circle cx="5" cy="10" r="1" />
+                    <circle cx="10" cy="10" r="1" />
+                    <circle cx="15" cy="10" r="1" />
+                    <circle cx="5" cy="15" r="1" />
+                    <circle cx="10" cy="15" r="1" />
+                    <circle cx="15" cy="15" r="1" />
+                </svg><span></span></li></ol>
+    </div>
 </div>
 <div id="toolbar" class="toolbar">
     <button id="sidebar-button" class="toolbar-button" title="Model Properties">

diff --git a/source/view.js b/source/view.js
@@ -3735,6 +3735,12 @@ view.FindSidebar = class extends view.Control {
             connection: { hide: 'Hide Connections', show: 'Show Connections' },
             weight: { hide: 'Hide Weights', show: 'Show Weights' }
         };
+        const tpl = this._host.document.getElementById('sidebar-find-content-template');
+        this._lis = {
+            node: tpl.childNodes[0],
+            connection: tpl.childNodes[1],
+            weight: tpl.childNodes[2],
+        };
     }
 
     on(event, callback) {
@@ -3890,11 +3896,8 @@ view.FindSidebar = class extends view.Control {
     }
 
     _add(value, content, icon) {
-        const element = this.createElement('li');
-        element.innerHTML = `<svg class='sidebar-find-content-icon'><use href="#sidebar-icon-${icon}"></use></svg>`;
-        const text = this.createElement('span');
-        text.innerText = content;
-        element.appendChild(text);
+        const element = this._lis[icon].cloneNode(true);
+        element.lastChild.innerHTML = content;
         this._table.set(element, value);
         this._content.appendChild(element);
     }
@@ -3967,7 +3970,6 @@ view.FindSidebar = class extends view.Control {
         });
         for (const [name, toggle] of Object.entries(this._toggles)) {
             toggle.element = this.createElement('label', 'sidebar-find-toggle');
-            toggle.element.innerHTML = `<svg class='sidebar-find-toggle-icon'><use href="#sidebar-icon-${name}"></use></svg>`;
             toggle.element.setAttribute('title', this._state[name] ? toggle.hide : toggle.show);
             toggle.checkbox = this.createElement('input');
             toggle.checkbox.setAttribute('type', 'checkbox');
@@ -3980,7 +3982,10 @@ view.FindSidebar = class extends view.Control {
                 this.emit('state-changed', this._state);
                 this._update();
             });
-            toggle.element.insertBefore(toggle.checkbox, toggle.element.firstChild);
+            toggle.element.appendChild(toggle.checkbox);
+            const icon = this._lis[name].firstChild.cloneNode(true);
+            toggle.element.appendChild(icon);
+            icon.style.margin = '0px';
             this._search.appendChild(toggle.element);
         }
         this._content.addEventListener('click', (e) => {
@@ -4006,6 +4011,7 @@ view.FindSidebar = class extends view.Control {
     }
 
     deactivate() {
+        this._search.remove();
         this._reset();
     }