@operato/board 1.0.26 → 1.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "license": "MIT",
@@ -56,15 +56,15 @@
   },
   "dependencies": {
     "@open-wc/scoped-elements": "^2.0.0-next.6",
-    "@operato/app": "^1.0.25",
+    "@operato/app": "^1.0.28",
     "@operato/data-grist": "^1.0.25",
-    "@operato/font": "^1.0.25",
+    "@operato/font": "^1.0.28",
     "@operato/graphql": "^1.0.23",
     "@operato/i18n": "^1.0.6",
     "@operato/input": "^1.0.25",
     "@operato/markdown": "^1.0.23",
     "@operato/popup": "^1.0.23",
-    "@operato/property-editor": "^1.0.25",
+    "@operato/property-editor": "^1.0.28",
     "@operato/styles": "^1.0.23",
     "@operato/utils": "^1.0.6",
     "@polymer/paper-dropdown-menu": "^3.2.0",
@@ -116,5 +116,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "b8aa0bf37d1f502c3937880b5965c273486258f4"
+  "gitHead": "06f098c3f958a4014d0de62069ff9e9f8cb050e7"
 }

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/data-binding/data-binding-mapper.ts

@@ -7,6 +7,7 @@ import '@operato/input/ox-input-value-ranges.js'
 import '@operato/input/ox-buttons-radio.js'
 import '@operato/input/ox-input-code.js'
 import '@operato/i18n/ox-i18n.js'
+import '@operato/help/ox-help-icon.js'
 
 import { css, html, LitElement, PropertyValues } from 'lit'
 import { property, query, state } from 'lit/decorators.js'
@@ -195,7 +196,7 @@ export class DataBindingMapper extends LitElement {
     }
 
     return html`
-      <label for="accessor-input"> <ox-i18n msgid="label.accessor">accessor</ox-i18n> </label>
+      <label for="accessor-input"> <ox-i18n msgid="label.accessor">accessor</ox-i18n><ox-help-icon topic="board-modeller/accessor"> </label>
       <input
         id="accessor-input"
         value-key="accessor"
@@ -225,13 +226,15 @@ export class DataBindingMapper extends LitElement {
         <option value="(self)"></option>
         <option value="(key)"></option>
         <option value="[propkey]"></option>
-        ${this._componentIds.length
-          ? html`
-              ${this._componentIds.map(
-                ({ value, description }) => html` <option value=${value}>${description}</option> `
-              )}
-            `
-          : html``}
+        ${
+          this._componentIds.length
+            ? html`
+                ${this._componentIds.map(
+                  ({ value, description }) => html` <option value=${value}>${description}</option> `
+                )}
+              `
+            : html``
+        }
       </datalist>
 
       <label for="property-input"> <ox-i18n msgid="label.property">property</ox-i18n> </label>

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

@@ -109,65 +109,69 @@ export class SceneInspector extends LitElement {
   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`
       <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.refresh()
-        })
-
-        this.scene.on('execute', () => {
-          this.refresh()
-        })
-
-        this.scene.on('undo', () => {
-          this.extendedMap.set(this.scene!.root, true)
-          this.refresh()
-        })
-
-        this.scene.on('redo', () => {
-          this.extendedMap.set(this.scene!.root, true)
-          this.refresh()
-        })
+        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()
       }
     }
 
@@ -178,10 +182,6 @@ export class SceneInspector extends LitElement {
     })
   }
 
-  refresh() {
-    this.scene && this.requestUpdate()
-  }
-
   sortableConfig: Sortable.Options = {
     group: 'inspector',
     animation: 150,
@@ -205,13 +205,6 @@ export class SceneInspector extends LitElement {
     })
   }
 
-  disconnectedCallback() {
-    super.disconnectedCallback()
-
-    this.scene = undefined
-    this._extendedMap = undefined
-  }
-
   _onclick(e: MouseEvent) {
     e.stopPropagation()
 
@@ -244,7 +237,7 @@ export class SceneInspector extends LitElement {
       }
     }
 
-    this.refresh()
+    this.requestUpdate()
   }
 
   _ondblclick(e: MouseEvent) {
@@ -267,13 +260,12 @@ export class SceneInspector extends LitElement {
       this.toggleExtended(component)
     }
 
-    this.refresh()
+    this.requestUpdate()
   }
 
   get extendedMap() {
     if (!this._extendedMap) {
       this._extendedMap = new WeakMap()
-      this._extendedMap.set(this.scene!.root, true)
     }
 
     return this._extendedMap
@@ -300,19 +292,19 @@ export class SceneInspector extends LitElement {
       this.extendedMap.set(component, !extended)
     }
 
-    this.refresh()
+    this.requestUpdate()
   }
 
   toggleHidden(component: Component) {
     component.set('hidden', !component.hidden)
 
-    this.refresh()
+    this.requestUpdate()
   }
 
   selectComponent(component: Component) {
     this.scene!.selected = [component]
 
-    this.refresh()
+    this.requestUpdate()
   }
 
   shouldBeShown(component: Component): boolean {