@operato/board 1.0.25 → 1.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "license": "MIT",
@@ -116,5 +116,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "cc9a66e8eff17dfa7b2d63bd927a5fbc0641e887"
+  "gitHead": "b8aa0bf37d1f502c3937880b5965c273486258f4"
 }

package/src/modeller/property-sidebar/inspector/inspector.ts

@@ -1,5 +1,7 @@
+import '@operato/input/ox-input-search.js'
+
 import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'
-import { property } from 'lit/decorators.js'
+import { property, state } from 'lit/decorators.js'
 import Sortable from 'sortablejs'
 
 import { Component, Container, Scene } from '@hatiolab/things-scene'
@@ -8,9 +10,21 @@ export class SceneInspector extends LitElement {
   static styles = [
     css`
       :host {
+        display: flex;
+        flex-direction: column;
+
         color: var(--scene-inspector-color);
       }
 
+      div[result] {
+        flex: 1;
+
+        display: flex;
+        flex-direction: column;
+
+        overflow-y: auto;
+      }
+
       .component {
         display: block;
         overflow: hidden;
@@ -90,11 +104,18 @@ export class SceneInspector extends LitElement {
 
   @property({ type: Object }) scene?: Scene
 
+  @state() private searchText: string = ''
+
   private _extendedMap: any
   private show: boolean = false
 
   render() {
-    return html` ${!this.scene ? html`` : this.renderComponent(this.scene.root, 0)} `
+    return html`
+      <ox-input-search
+        @change=${(e: Event) => (this.searchText = (e.target as HTMLInputElement).value)}
+      ></ox-input-search>
+      <div result>${!this.scene ? html`` : this.renderComponent(this.scene.root, 0)}</div>
+    `
   }
 
   firstUpdated() {
@@ -131,21 +152,21 @@ export class SceneInspector extends LitElement {
             }
           })
 
-          this.requestUpdate()
+          this.refresh()
         })
 
         this.scene.on('execute', () => {
-          this.requestUpdate()
+          this.refresh()
         })
 
         this.scene.on('undo', () => {
           this.extendedMap.set(this.scene!.root, true)
-          this.requestUpdate()
+          this.refresh()
         })
 
         this.scene.on('redo', () => {
           this.extendedMap.set(this.scene!.root, true)
-          this.requestUpdate()
+          this.refresh()
         })
       }
     }
@@ -157,6 +178,10 @@ export class SceneInspector extends LitElement {
     })
   }
 
+  refresh() {
+    this.scene && this.requestUpdate()
+  }
+
   sortableConfig: Sortable.Options = {
     group: 'inspector',
     animation: 150,
@@ -183,8 +208,8 @@ export class SceneInspector extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback()
 
-    delete this.scene
-    delete this._extendedMap
+    this.scene = undefined
+    this._extendedMap = undefined
   }
 
   _onclick(e: MouseEvent) {
@@ -219,7 +244,7 @@ export class SceneInspector extends LitElement {
       }
     }
 
-    this.requestUpdate()
+    this.refresh()
   }
 
   _ondblclick(e: MouseEvent) {
@@ -242,12 +267,13 @@ export class SceneInspector extends LitElement {
       this.toggleExtended(component)
     }
 
-    this.requestUpdate()
+    this.refresh()
   }
 
   get extendedMap() {
     if (!this._extendedMap) {
       this._extendedMap = new WeakMap()
+      this._extendedMap.set(this.scene!.root, true)
     }
 
     return this._extendedMap
@@ -274,19 +300,29 @@ export class SceneInspector extends LitElement {
       this.extendedMap.set(component, !extended)
     }
 
-    this.requestUpdate()
+    this.refresh()
   }
 
   toggleHidden(component: Component) {
     component.set('hidden', !component.hidden)
 
-    this.requestUpdate()
+    this.refresh()
   }
 
   selectComponent(component: Component) {
     this.scene!.selected = [component]
 
-    this.requestUpdate()
+    this.refresh()
+  }
+
+  shouldBeShown(component: Component): boolean {
+    const { type, name, id, tag } = component.state
+
+    return !!(
+      !this.searchText ||
+      `${type} ${name || ''} ${id || ''} ${tag || ''}`.search(this.searchText) > -1 ||
+      ((component as Container).components || []).find((child: Component) => this.shouldBeShown(child))
+    )
   }
 
   renderComponent(component: Component, depth: number): TemplateResult {
@@ -294,8 +330,12 @@ export class SceneInspector extends LitElement {
       return html``
     }
 
+    if (!this.shouldBeShown(component)) {
+      return html``
+    }
+
     const children = (component.isContainer() && (component as Container).components) || []
-    const extended = this.isExtended(component) ? children : []
+    const extended = this.isExtended(component) ? children.filter(child => this.shouldBeShown(child)) : []
     const { type, id, tag, class: clazz } = component.state
 
     const name = (id ? `#${id}` : '') + (tag ? `@${tag}` : '') + (clazz ? `.(${clazz})` : '')