@operato/board 1.0.25 → 1.0.27

package/package.json

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

package/src/modeller/edit-toolbar.ts

@@ -410,11 +410,11 @@ export class EditToolbar extends LitElement {
   }
 
   onSceneChanged(after?: Scene, before?: Scene) {
-    // if (before) {
-    //   before.off('execute', this.onExecute, this)
-    //   before.off('undo', this.onUndo, this)
-    //   before.off('redo', this.onRedo, this)
-    // }
+    if (before) {
+      before.off('execute', this.onExecute, this)
+      before.off('undo', this.onUndo, this)
+      before.off('redo', this.onRedo, this)
+    }
 
     if (after) {
       after.on('execute', this.onExecute, this)

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,63 +104,74 @@ export class SceneInspector extends LitElement {
 
   @property({ type: Object }) scene?: Scene
 
+  @state() private searchText: string = ''
+
   private _extendedMap: any
   private show: boolean = false
 
+  disconnectScene(scene?: Scene) {
+    if (scene) {
+      scene.off('selected', undefined, this)
+      scene.off('execute', undefined, this)
+      scene.off('undo', undefined, this)
+      scene.off('redo', undefined, this)
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+
+    this.disconnectScene(this.scene)
+    delete this._extendedMap
+  }
+
   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() {
     dispatchEvent(new Event('resize'))
+
     this.renderRoot.addEventListener('click', this._onclick.bind(this) as EventListener)
     this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this) as EventListener)
   }
 
+  refresh() {
+    let selected = this.scene?.selected || []
+
+    selected.forEach(component => {
+      let parent = component.parent
+      while (parent && !this.extendedMap.get(parent)) {
+        this.extendedMap.set(parent, true)
+        parent = parent.parent
+      }
+    })
+
+    this.requestUpdate()
+  }
+
   updated(change: PropertyValues<this>) {
     if (change.has('scene')) {
       let oldScene = change.get('scene') as Scene
 
       if (oldScene) {
-        oldScene.off('selected')
-        oldScene.off('execute')
-        oldScene.off('undo')
-        oldScene.off('redo')
-
+        this.disconnectScene(oldScene)
         delete this._extendedMap
       }
 
       if (this.scene && this.scene.root) {
-        // root 는 기본상태가 extended 되도록 하기위해서임.
-        this.extendedMap.set(this.scene.root, true)
-
-        this.scene.on('selected', (after: Component[], before: Component[]) => {
-          let selected = after
-
-          selected.forEach(component => {
-            let parent = component.parent
-            while (parent && !this.extendedMap.get(parent)) {
-              this.extendedMap.set(parent, true)
-              parent = parent.parent
-            }
-          })
-
-          this.requestUpdate()
-        })
-
-        this.scene.on('execute', () => {
-          this.requestUpdate()
-        })
-
-        this.scene.on('undo', () => {
-          this.extendedMap.set(this.scene!.root, true)
-          this.requestUpdate()
-        })
-
-        this.scene.on('redo', () => {
-          this.extendedMap.set(this.scene!.root, true)
-          this.requestUpdate()
-        })
+        this.scene.on('selected', this.refresh, this)
+        this.scene.on('execute', this.refresh, this)
+        this.scene.on('undo', this.refresh, this)
+        this.scene.on('redo', this.refresh, this)
+
+        this.refresh()
       }
     }
 
@@ -180,13 +205,6 @@ export class SceneInspector extends LitElement {
     })
   }
 
-  disconnectedCallback() {
-    super.disconnectedCallback()
-
-    delete this.scene
-    delete this._extendedMap
-  }
-
   _onclick(e: MouseEvent) {
     e.stopPropagation()
 
@@ -289,13 +307,27 @@ export class SceneInspector extends LitElement {
     this.requestUpdate()
   }
 
+  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 {
     if (!component) {
       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})` : '')