@operato/property-panel 10.0.0-beta.7 → 10.1.0

package/dist/src/ox-property-panel.js

@@ -4,7 +4,7 @@
 import { __decorate } from "tslib";
 import '@material/web/icon/icon.js';
 import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import deepClone from 'lodash-es/cloneDeep.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { ScrollbarStyles } from '@operato/styles';
@@ -28,6 +28,8 @@ let OxPropertyPanel = class OxPropertyPanel extends ScopedElementsMixin(LitEleme
         this.fonts = [];
         this.propertyEditor = [];
         this.propertyTarget = null;
+        /** 렌더에 실제 반영되는(디바운스된) 선택 — 마퀴 드래그 중 번뜩임 방지용. */
+        this._settledSelected = [];
     }
     firstUpdated() {
         this.renderRoot.addEventListener('property-change', this.onPropertyChanged.bind(this));
@@ -35,9 +37,36 @@ let OxPropertyPanel = class OxPropertyPanel extends ScopedElementsMixin(LitEleme
     }
     updated(change) {
         change.has('scene') && this.onSceneChanged();
-        change.has('selected') && this.onSelectedChanged(this.selected);
+        change.has('selected') && this._scheduleSelectedUpdate();
         change.has('collapsed') && this.onCollapsed(this.collapsed);
     }
+    /**
+     * 선택 변경을 트레일링 디바운스해, 속성창(shape/3d 등)이 마퀴 드래그 중 매 mousemove 마다
+     * 재빌드되어 번뜩이는 것을 막는다. 드래그가 멈춘 뒤 최종 선택으로 한 번만 갱신한다.
+     * (드래그 중 render 는 재실행되나 _settledSelected 가 고정이라 동일 출력 → Lit no-op.)
+     */
+    _scheduleSelectedUpdate() {
+        if (this._selectionDebounceTimer)
+            clearTimeout(this._selectionDebounceTimer);
+        this._selectionDebounceTimer = setTimeout(() => {
+            this._selectionDebounceTimer = undefined;
+            const sel = this.selected;
+            // 배경 클릭 등으로 선택이 빈([]) 상태이고, 마퀴가 아니어서 곧 root(model-layer)로
+            // auto-select 될 상황이면 — 빈 상태를 렌더하지 않고(빈→root 깜박임 방지) auto-select 만
+            // 유발한다. 결과로 생기는 [model-layer] 가 다음 사이클에서 _settledSelected 를 갱신한다.
+            if (sel.length === 0 && this.scene && !this.scene.isSelecting) {
+                this.onSelectedChanged(sel);
+                return;
+            }
+            this._settledSelected = sel;
+            this.onSelectedChanged(sel);
+        }, 80);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._selectionDebounceTimer)
+            clearTimeout(this._selectionDebounceTimer);
+    }
     static get scopedElements() {
         return {
             'property-shape': PropertyShapes,
@@ -50,6 +79,9 @@ let OxPropertyPanel = class OxPropertyPanel extends ScopedElementsMixin(LitEleme
             'scene-inspector': SceneInspector
         };
     }
+    hasGroup(selected) {
+        return selected.some(c => { var _a; return ((_a = c === null || c === void 0 ? void 0 : c.model) === null || _a === void 0 ? void 0 : _a.type) === 'group'; });
+    }
     render() {
         var tabName = this.tabName ? this.tabName : 'shape';
         return html `
@@ -61,9 +93,7 @@ let OxPropertyPanel = class OxPropertyPanel extends ScopedElementsMixin(LitEleme
       >
         <md-icon name="shape" ?selected=${tabName == 'shape'}>format_shapes</md-icon>
         <md-icon name="style" ?selected=${tabName == 'style'}>palette</md-icon>
-        ${this.is3dish(this.selected)
-            ? html `<md-icon name="threed" ?selected=${tabName == 'threed'}>view_in_ar</md-icon>`
-            : html ``}
+        <md-icon name="threed" ?selected=${tabName == 'threed'}>view_in_ar</md-icon>
         <md-icon name="effect" ?selected=${tabName == 'effect'}>movie_filter</md-icon>
         <md-icon name="specific" ?selected=${tabName == 'specific'}>tune</md-icon>
         <md-icon name="data-binding" ?selected=${tabName == 'data-binding'}>share</md-icon>
@@ -77,7 +107,7 @@ let OxPropertyPanel = class OxPropertyPanel extends ScopedElementsMixin(LitEleme
               <property-shape
                 .value=${this.model}
                 .bounds=${this.bounds}
-                .selected=${this.selected}
+                .selected=${this._settledSelected}
                 ?active=${tabName == 'shape'}
               >
               </property-shape>
@@ -85,46 +115,54 @@ let OxPropertyPanel = class OxPropertyPanel extends ScopedElementsMixin(LitEleme
             style: html `
               <property-style
                 .value=${this.model}
-                .selected=${this.selected}
+                .selected=${this._settledSelected}
                 .fonts=${this.fonts}
                 ?active=${tabName == 'style'}
                 ?is-line=${this.isLine(this.selected)}
               >
               </property-style>
             `,
-            threed: this.isRootModel(this.selected)
+            threed: !this.is3dish(this.selected)
                 ? html `
-                  <property-scene3d
-                    .value=${this.model}
-                    .scene=${this.scene}
-                    ?active=${tabName == 'threed'}
-                  >
-                  </property-scene3d>
+                  <div style="display:flex;align-items:center;justify-content:center;height:100%;color:var(--md-sys-color-on-surface-variant,#666);font-size:12px;opacity:0.7;padding:16px;text-align:center;">
+                    Selected component(s) do not support 3D properties
+                  </div>
                 `
-                : html `
-                  <property-3d
-                    .value=${this.model}
-                    .bounds=${this.bounds}
-                    .selected=${this.selected}
-                    ?active=${tabName == 'threed'}
-                  >
-                  </property-3d>
-                `,
+                : this.isRootModel(this.selected)
+                    ? html `
+                    <property-scene3d
+                      .value=${this.model}
+                      .scene=${this.scene}
+                      ?active=${tabName == 'threed'}
+                    >
+                    </property-scene3d>
+                  `
+                    : html `
+                    <property-3d
+                      .value=${this.model}
+                      .bounds=${this.bounds}
+                      .selected=${this._settledSelected}
+                      ?active=${tabName == 'threed'}
+                    >
+                    </property-3d>
+                  `,
             effect: html `
               <property-effect .value=${this.model} .scene=${this.scene} ?active=${tabName == 'effect'}>
               </property-effect>
             `,
-            specific: html `
-              <property-specific
-                .value=${this.model}
-                .scene=${this.scene}
-                .selected=${this.selected}
-                .props=${this.specificProps}
-                .propertyEditor=${this.propertyEditor}
-                ?active=${tabName == 'specific'}
-              >
-              </property-specific>
-            `,
+            specific: this.hasGroup(this.selected)
+                ? html ``
+                : html `
+                  <property-specific
+                    .value=${this.model}
+                    .scene=${this.scene}
+                    .selected=${this._settledSelected}
+                    .props=${this.specificProps}
+                    .propertyEditor=${this.propertyEditor}
+                    ?active=${tabName == 'specific'}
+                  >
+                  </property-specific>
+                `,
             'data-binding': html `
               <property-data-binding .scene=${this.scene} .value=${this.model} ?active=${tabName == 'data-binding'}>
               </property-data-binding>
@@ -138,16 +176,40 @@ let OxPropertyPanel = class OxPropertyPanel extends ScopedElementsMixin(LitEleme
     `;
     }
     onPropertyChanged(e) {
+        var _a;
         var detail = e.detail;
         if (this.propertyTarget) {
             /* 단일 컴포넌트의 경우에 적용 */
             this.scene && this.scene.undoableChange(() => this.propertyTarget.set(detail));
+            // nature.properties 가 동적인 컴포넌트(예: robot-arm 의 chainPreset
+            // 변경 시 joint 개수 변화)를 위해 set 직후 nature 재평가.
+            // 정적 nature 컴포넌트는 동일한 배열이 반환되어 비용 미미.
+            const nextProps = (_a = this.propertyTarget.nature) === null || _a === void 0 ? void 0 : _a.properties;
+            if (nextProps && this.specificPropsChanged(nextProps)) {
+                this.specificProps = deepClone(nextProps);
+            }
         }
         else {
             /* 여러 컴포넌트의 경우에 적용 */
             this.scene && this.scene.undoableChange(() => this.selected.forEach(component => component.set(detail)));
         }
     }
+    /**
+     * 새 properties 배열이 현재 specificProps 와 *구조상* 다른지 빠르게 검사.
+     * 단순히 length + 각 항목의 name 만 비교 — value 변경은 model 측에서 처리되므로
+     * specificProps 의 reference 를 바꿀 필요가 없다.
+     */
+    specificPropsChanged(next) {
+        var _a, _b;
+        const cur = this.specificProps;
+        if (!cur || cur.length !== next.length)
+            return true;
+        for (let i = 0; i < next.length; i++) {
+            if (((_a = cur[i]) === null || _a === void 0 ? void 0 : _a.name) !== ((_b = next[i]) === null || _b === void 0 ? void 0 : _b.name))
+                return true;
+        }
+        return false;
+    }
     onBoundsChanged(e) {
         var detail = e.detail;
         if (!this.scene) {
@@ -183,6 +245,12 @@ let OxPropertyPanel = class OxPropertyPanel extends ScopedElementsMixin(LitEleme
         }
     }
     setPropertyTargetAsDefault() {
+        var _a;
+        // 마퀴(영역) 선택 드래그 중에는 root(model-layer) auto-select 를 하지 않는다.
+        // 마퀴가 만드는 transient 빈 선택([])과 auto-select([model-layer]) 가 싸워
+        // 속성창(shape/3d)이 번뜩이는 것을 막는다. 드래그 종료 후에만 scene 기본속성 표시.
+        if ((_a = this.scene) === null || _a === void 0 ? void 0 : _a.isSelecting)
+            return;
         if (!this.scene) {
             this.setPropertyTarget(null);
             this.specificProps = [];
@@ -204,11 +272,6 @@ let OxPropertyPanel = class OxPropertyPanel extends ScopedElementsMixin(LitEleme
     }
     async onSelectedChanged(after) {
         await this.updateComplete;
-        // 3D 탭 선택 중 비-3D 컴포넌트로 전환 시 shape 탭으로 복귀
-        // (model-layer는 항상 3D 탭 표시 가능)
-        if (this.tabName === 'threed' && !this.is3dish(after)) {
-            this.tabName = 'shape';
-        }
         if (after.length == 1) {
             this.setPropertyTarget(after[0]);
             // 컴포넌트 특성 속성(specific properties)을 먼저 바꾸고, 모델을 바꾸어준다.
@@ -367,6 +430,9 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], OxPropertyPanel.prototype, "propertyEditor", void 0);
+__decorate([
+    state()
+], OxPropertyPanel.prototype, "_settledSelected", void 0);
 OxPropertyPanel = __decorate([
     customElement('ox-property-panel')
 ], OxPropertyPanel);

package/dist/src/ox-property-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-property-panel.js","sourceRoot":"","sources":["../../src/ox-property-panel.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport deepClone from 'lodash-es/cloneDeep.js'\n\nimport { BOUNDS, Component, Model, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { PropertyDataBinding } from './property-panel/data-binding/data-binding.js'\nimport { PropertyEffects } from './property-panel/effects/effects.js'\nimport { SceneInspector } from './property-panel/inspector/inspector.js'\nimport { PropertyShapes } from './property-panel/shapes/shapes.js'\nimport { PropertySpecific } from './property-panel/specifics/specifics.js'\nimport { PropertyStyles } from './property-panel/styles/styles.js'\nimport { Property3D } from './property-panel/threed/threed.js'\nimport { PropertyScene3D } from './property-panel/threed/property-scene3d.js'\n\n@customElement('ox-property-panel')\nexport class OxPropertyPanel extends ScopedElementsMixin(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        border-left: 1px solid var(--md-sys-color-border, #ccc);\n        width: 270px;\n        display: flex;\n        flex-direction: column;\n        background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));\n        color: var(--property-sidebar-color, var(--md-sys-color-on-secondary-container));\n        user-select: none;\n\n        --input-padding: var(--spacing-small);\n        --label-font: var(--property-sidebar-fieldset-label, roboto);\n      }\n\n      [tab] {\n        display: flex;\n        background-color: rgba(0, 0, 0, 0.08);\n        opacity: 0.85;\n      }\n\n      [tab] md-icon {\n        flex: 1;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        color: var(--property-sidebar-tab-icon-color);\n        height: 40px;\n      }\n\n      [tab] [selected] {\n        background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));\n        border-left: 1px solid rgba(255, 255, 255, 0.5);\n        border-right: 1px solid rgba(0, 0, 0, 0.15);\n        opacity: 1;\n      }\n\n      [content] {\n        flex: 1;\n\n        overflow: hidden;\n        overflow-y: auto;\n\n        --md-icon-size: 22px;\n      }\n\n      [content] > :not([active]) {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Object }) scene: Scene | null = null\n  @property({ type: Object }) bounds: any = {}\n  @property({ type: Object }) model: Model | null = {}\n  @property({ type: Array }) selected: Component[] = []\n  @property({ type: Array }) specificProps: any\n  @property({ type: String }) tabName: string | null = 'shape'\n  @property({ type: Boolean }) collapsed: boolean = false\n  @property({ type: Array }) fonts: any[] = []\n  @property({ type: Array }) propertyEditor: any[] = []\n\n  propertyTarget: Component | null = null\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('property-change', this.onPropertyChanged.bind(this) as EventListener)\n    this.renderRoot.addEventListener('bounds-change', this.onBoundsChanged.bind(this) as EventListener)\n  }\n\n  updated(change: PropertyValues<this>) {\n    change.has('scene') && this.onSceneChanged()\n    change.has('selected') && this.onSelectedChanged(this.selected)\n    change.has('collapsed') && this.onCollapsed(this.collapsed)\n  }\n\n  static get scopedElements() {\n    return {\n      'property-shape': PropertyShapes,\n      'property-style': PropertyStyles,\n      'property-effect': PropertyEffects,\n      'property-specific': PropertySpecific,\n      'property-3d': Property3D,\n      'property-scene3d': PropertyScene3D,\n      'property-data-binding': PropertyDataBinding,\n      'scene-inspector': SceneInspector\n    }\n  }\n\n  render() {\n    var tabName = this.tabName ? this.tabName : 'shape'\n\n    return html`\n      <div\n        tab\n        @click=${(e: MouseEvent) => {\n          this.tabName = (e.target as HTMLElement).getAttribute('name')\n        }}\n      >\n        <md-icon name=\"shape\" ?selected=${tabName == 'shape'}>format_shapes</md-icon>\n        <md-icon name=\"style\" ?selected=${tabName == 'style'}>palette</md-icon>\n        ${this.is3dish(this.selected)\n          ? html`<md-icon name=\"threed\" ?selected=${tabName == 'threed'}>view_in_ar</md-icon>`\n          : html``}\n        <md-icon name=\"effect\" ?selected=${tabName == 'effect'}>movie_filter</md-icon>\n        <md-icon name=\"specific\" ?selected=${tabName == 'specific'}>tune</md-icon>\n        <md-icon name=\"data-binding\" ?selected=${tabName == 'data-binding'}>share</md-icon>\n        <md-icon name=\"inspector\" ?selected=${tabName == 'inspector'}>visibility</md-icon>\n      </div>\n\n      <div content>\n        ${html`\n          ${{\n            shape: html`\n              <property-shape\n                .value=${this.model}\n                .bounds=${this.bounds}\n                .selected=${this.selected}\n                ?active=${tabName == 'shape'}\n              >\n              </property-shape>\n            `,\n            style: html`\n              <property-style\n                .value=${this.model}\n                .selected=${this.selected}\n                .fonts=${this.fonts}\n                ?active=${tabName == 'style'}\n                ?is-line=${this.isLine(this.selected)}\n              >\n              </property-style>\n            `,\n            threed: this.isRootModel(this.selected)\n              ? html`\n                  <property-scene3d\n                    .value=${this.model}\n                    .scene=${this.scene}\n                    ?active=${tabName == 'threed'}\n                  >\n                  </property-scene3d>\n                `\n              : html`\n                  <property-3d\n                    .value=${this.model}\n                    .bounds=${this.bounds}\n                    .selected=${this.selected}\n                    ?active=${tabName == 'threed'}\n                  >\n                  </property-3d>\n                `,\n            effect: html`\n              <property-effect .value=${this.model} .scene=${this.scene} ?active=${tabName == 'effect'}>\n              </property-effect>\n            `,\n            specific: html`\n              <property-specific\n                .value=${this.model}\n                .scene=${this.scene}\n                .selected=${this.selected}\n                .props=${this.specificProps}\n                .propertyEditor=${this.propertyEditor}\n                ?active=${tabName == 'specific'}\n              >\n              </property-specific>\n            `,\n            'data-binding': html`\n              <property-data-binding .scene=${this.scene} .value=${this.model} ?active=${tabName == 'data-binding'}>\n              </property-data-binding>\n            `,\n            inspector: html`\n              <scene-inspector .scene=${this.scene} ?active=${tabName == 'inspector'}></scene-inspector>\n            `\n          }[this.tabName!]}\n        `}\n      </div>\n    `\n  }\n\n  private onPropertyChanged(e: CustomEvent) {\n    var detail = e.detail\n\n    if (this.propertyTarget) {\n      /* 단일 컴포넌트의 경우에 적용 */\n      this.scene && this.scene.undoableChange(() => this.propertyTarget!.set(detail))\n    } else {\n      /* 여러 컴포넌트의 경우에 적용 */\n      this.scene && this.scene.undoableChange(() => this.selected.forEach(component => component.set(detail)))\n    }\n  }\n\n  private onBoundsChanged(e: CustomEvent) {\n    var detail = e.detail\n\n    if (!this.scene) {\n      return\n    }\n\n    if (this.propertyTarget) {\n      /* 단일 컴포넌트의 경우에 적용 */\n      this.scene.undoableChange(() => {\n        this.propertyTarget!.bounds = {\n          ...this.propertyTarget!.bounds,\n          ...detail\n        }\n      })\n    } else {\n      /* 여러 컴포넌트의 경우에 적용 */\n      this.scene.undoableChange(() => {\n        this.selected.forEach(component => {\n          component.bounds = {\n            ...component.bounds,\n            ...detail\n          }\n        })\n      })\n    }\n  }\n\n  private onChangedByScene() {\n    if (this.propertyTarget) {\n      this.model = {\n        ...this.propertyTarget.model\n      }\n      this.setBounds(this.propertyTarget.bounds)\n    }\n  }\n\n  private setPropertyTargetAsDefault() {\n    if (!this.scene) {\n      this.setPropertyTarget(null)\n      this.specificProps = []\n      this.model = null\n      this.bounds = {}\n    } else {\n      this.scene.select('model-layer')\n    }\n  }\n\n  private onCollapsed(collapsed: boolean) {\n    this.style.display = collapsed ? 'none' : ''\n    dispatchEvent(new Event('resize'))\n  }\n\n  private async onSceneChanged() {\n    await this.updateComplete\n\n    if (this.scene) this.selected = this.scene.select('model-layer')\n  }\n\n  private async onSelectedChanged(after: Component[]) {\n    await this.updateComplete\n\n    // 3D 탭 선택 중 비-3D 컴포넌트로 전환 시 shape 탭으로 복귀\n    // (model-layer는 항상 3D 탭 표시 가능)\n    if (this.tabName === 'threed' && !this.is3dish(after)) {\n      this.tabName = 'shape'\n    }\n\n    if (after.length == 1) {\n      this.setPropertyTarget(after[0])\n      // 컴포넌트 특성 속성(specific properties)을 먼저 바꾸고, 모델을 바꾸어준다.\n      // 컴포넌트 속성에 따라 UI 컴포넌트가 준비되고, 이후에 모델값을 보여주도록 하기 위해서이다.\n      this.specificProps = deepClone(this.propertyTarget!.nature.properties)\n      this.model = {\n        ...this.propertyTarget!.model\n      }\n      this.setBounds(this.propertyTarget!.bounds)\n    } else if (after.length == 0) {\n      // 선택이 안된 경우\n\n      this.setPropertyTargetAsDefault()\n    } else {\n      // 다중 선택된 경우\n\n      var type = after[0].model.type\n      for (let i = 1; i < after.length; i++) {\n        if (after[i].model.type != type) {\n          type = undefined\n          break\n        }\n      }\n\n      this.setPropertyTarget(null)\n\n      if (type) this.specificProps = deepClone(after[0].nature.properties)\n      else this.specificProps = null\n\n      this.model = {\n        type: type,\n        alpha: 1\n      }\n      this.bounds = {}\n    }\n  }\n\n  private setPropertyTarget(newTarget: Component | null) {\n    var oldTarget = this.propertyTarget\n\n    if (oldTarget) {\n      oldTarget.off('change', this.onChangedByScene, this)\n    }\n    if (newTarget) {\n      newTarget.on('change', this.onChangedByScene, this)\n    }\n\n    this.propertyTarget = newTarget\n  }\n\n  private setBounds(bounds: BOUNDS) {\n    this.bounds = {\n      left: bounds.left,\n      top: bounds.top,\n      width: Math.round(bounds.width),\n      height: Math.round(bounds.height)\n    }\n  }\n\n  private is3dish(selected: Component[]) {\n    if (selected.length === 0) return false\n    const first = selected[0]\n    return first?.is3dish?.() || first?.isRootModel?.()\n  }\n\n  private isRootModel(selected: Component[]) {\n    return selected.length > 0 && selected[0]?.isRootModel?.()\n  }\n\n  private isLine(selected: Component[]) {\n    var isLine = false\n\n    for (var i = 0; i < selected.length; i++) {\n      var comp = selected[i]\n\n      if (!comp.isLine || !comp.isLine()) {\n        isLine = false\n        return isLine\n      }\n\n      isLine = true\n    }\n\n    return isLine\n  }\n}\n"]}
+{"version":3,"file":"ox-property-panel.js","sourceRoot":"","sources":["../../src/ox-property-panel.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport deepClone from 'lodash-es/cloneDeep.js'\n\nimport { BOUNDS, Component, Model, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { PropertyDataBinding } from './property-panel/data-binding/data-binding.js'\nimport { PropertyEffects } from './property-panel/effects/effects.js'\nimport { SceneInspector } from './property-panel/inspector/inspector.js'\nimport { PropertyShapes } from './property-panel/shapes/shapes.js'\nimport { PropertySpecific } from './property-panel/specifics/specifics.js'\nimport { PropertyStyles } from './property-panel/styles/styles.js'\nimport { Property3D } from './property-panel/threed/threed.js'\nimport { PropertyScene3D } from './property-panel/threed/property-scene3d.js'\n\n@customElement('ox-property-panel')\nexport class OxPropertyPanel extends ScopedElementsMixin(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        border-left: 1px solid var(--md-sys-color-border, #ccc);\n        width: 270px;\n        display: flex;\n        flex-direction: column;\n        background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));\n        color: var(--property-sidebar-color, var(--md-sys-color-on-secondary-container));\n        user-select: none;\n\n        --input-padding: var(--spacing-small);\n        --label-font: var(--property-sidebar-fieldset-label, roboto);\n      }\n\n      [tab] {\n        display: flex;\n        background-color: rgba(0, 0, 0, 0.08);\n        opacity: 0.85;\n      }\n\n      [tab] md-icon {\n        flex: 1;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        color: var(--property-sidebar-tab-icon-color);\n        height: 40px;\n      }\n\n      [tab] [selected] {\n        background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));\n        border-left: 1px solid rgba(255, 255, 255, 0.5);\n        border-right: 1px solid rgba(0, 0, 0, 0.15);\n        opacity: 1;\n      }\n\n      [content] {\n        flex: 1;\n\n        overflow: hidden;\n        overflow-y: auto;\n\n        --md-icon-size: 22px;\n      }\n\n      [content] > :not([active]) {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Object }) scene: Scene | null = null\n  @property({ type: Object }) bounds: any = {}\n  @property({ type: Object }) model: Model | null = {}\n  @property({ type: Array }) selected: Component[] = []\n  @property({ type: Array }) specificProps: any\n  @property({ type: String }) tabName: string | null = 'shape'\n  @property({ type: Boolean }) collapsed: boolean = false\n  @property({ type: Array }) fonts: any[] = []\n  @property({ type: Array }) propertyEditor: any[] = []\n\n  propertyTarget: Component | null = null\n\n  /** 렌더에 실제 반영되는(디바운스된) 선택 — 마퀴 드래그 중 번뜩임 방지용. */\n  @state() private _settledSelected: Component[] = []\n  private _selectionDebounceTimer?: ReturnType<typeof setTimeout>\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('property-change', this.onPropertyChanged.bind(this) as EventListener)\n    this.renderRoot.addEventListener('bounds-change', this.onBoundsChanged.bind(this) as EventListener)\n  }\n\n  updated(change: PropertyValues<this>) {\n    change.has('scene') && this.onSceneChanged()\n    change.has('selected') && this._scheduleSelectedUpdate()\n    change.has('collapsed') && this.onCollapsed(this.collapsed)\n  }\n\n  /**\n   * 선택 변경을 트레일링 디바운스해, 속성창(shape/3d 등)이 마퀴 드래그 중 매 mousemove 마다\n   * 재빌드되어 번뜩이는 것을 막는다. 드래그가 멈춘 뒤 최종 선택으로 한 번만 갱신한다.\n   * (드래그 중 render 는 재실행되나 _settledSelected 가 고정이라 동일 출력 → Lit no-op.)\n   */\n  private _scheduleSelectedUpdate() {\n    if (this._selectionDebounceTimer) clearTimeout(this._selectionDebounceTimer)\n    this._selectionDebounceTimer = setTimeout(() => {\n      this._selectionDebounceTimer = undefined\n      const sel = this.selected\n      // 배경 클릭 등으로 선택이 빈([]) 상태이고, 마퀴가 아니어서 곧 root(model-layer)로\n      // auto-select 될 상황이면 — 빈 상태를 렌더하지 않고(빈→root 깜박임 방지) auto-select 만\n      // 유발한다. 결과로 생기는 [model-layer] 가 다음 사이클에서 _settledSelected 를 갱신한다.\n      if (sel.length === 0 && this.scene && !(this.scene as any).isSelecting) {\n        this.onSelectedChanged(sel)\n        return\n      }\n      this._settledSelected = sel\n      this.onSelectedChanged(sel)\n    }, 80)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    if (this._selectionDebounceTimer) clearTimeout(this._selectionDebounceTimer)\n  }\n\n  static get scopedElements() {\n    return {\n      'property-shape': PropertyShapes,\n      'property-style': PropertyStyles,\n      'property-effect': PropertyEffects,\n      'property-specific': PropertySpecific,\n      'property-3d': Property3D,\n      'property-scene3d': PropertyScene3D,\n      'property-data-binding': PropertyDataBinding,\n      'scene-inspector': SceneInspector\n    }\n  }\n\n  private hasGroup(selected: Component[]) {\n    return selected.some(c => c?.model?.type === 'group')\n  }\n\n  render() {\n    var tabName = this.tabName ? this.tabName : 'shape'\n    return html`\n      <div\n        tab\n        @click=${(e: MouseEvent) => {\n          this.tabName = (e.target as HTMLElement).getAttribute('name')\n        }}\n      >\n        <md-icon name=\"shape\" ?selected=${tabName == 'shape'}>format_shapes</md-icon>\n        <md-icon name=\"style\" ?selected=${tabName == 'style'}>palette</md-icon>\n        <md-icon name=\"threed\" ?selected=${tabName == 'threed'}>view_in_ar</md-icon>\n        <md-icon name=\"effect\" ?selected=${tabName == 'effect'}>movie_filter</md-icon>\n        <md-icon name=\"specific\" ?selected=${tabName == 'specific'}>tune</md-icon>\n        <md-icon name=\"data-binding\" ?selected=${tabName == 'data-binding'}>share</md-icon>\n        <md-icon name=\"inspector\" ?selected=${tabName == 'inspector'}>visibility</md-icon>\n      </div>\n\n      <div content>\n        ${html`\n          ${{\n            shape: html`\n              <property-shape\n                .value=${this.model}\n                .bounds=${this.bounds}\n                .selected=${this._settledSelected}\n                ?active=${tabName == 'shape'}\n              >\n              </property-shape>\n            `,\n            style: html`\n              <property-style\n                .value=${this.model}\n                .selected=${this._settledSelected}\n                .fonts=${this.fonts}\n                ?active=${tabName == 'style'}\n                ?is-line=${this.isLine(this.selected)}\n              >\n              </property-style>\n            `,\n            threed: !this.is3dish(this.selected)\n              ? html`\n                  <div style=\"display:flex;align-items:center;justify-content:center;height:100%;color:var(--md-sys-color-on-surface-variant,#666);font-size:12px;opacity:0.7;padding:16px;text-align:center;\">\n                    Selected component(s) do not support 3D properties\n                  </div>\n                `\n              : this.isRootModel(this.selected)\n                ? html`\n                    <property-scene3d\n                      .value=${this.model}\n                      .scene=${this.scene}\n                      ?active=${tabName == 'threed'}\n                    >\n                    </property-scene3d>\n                  `\n                : html`\n                    <property-3d\n                      .value=${this.model}\n                      .bounds=${this.bounds}\n                      .selected=${this._settledSelected}\n                      ?active=${tabName == 'threed'}\n                    >\n                    </property-3d>\n                  `,\n            effect: html`\n              <property-effect .value=${this.model} .scene=${this.scene} ?active=${tabName == 'effect'}>\n              </property-effect>\n            `,\n            specific: this.hasGroup(this.selected)\n              ? html``\n              : html`\n                  <property-specific\n                    .value=${this.model}\n                    .scene=${this.scene}\n                    .selected=${this._settledSelected}\n                    .props=${this.specificProps}\n                    .propertyEditor=${this.propertyEditor}\n                    ?active=${tabName == 'specific'}\n                  >\n                  </property-specific>\n                `,\n            'data-binding': html`\n              <property-data-binding .scene=${this.scene} .value=${this.model} ?active=${tabName == 'data-binding'}>\n              </property-data-binding>\n            `,\n            inspector: html`\n              <scene-inspector .scene=${this.scene} ?active=${tabName == 'inspector'}></scene-inspector>\n            `\n          }[this.tabName!]}\n        `}\n      </div>\n    `\n  }\n\n  private onPropertyChanged(e: CustomEvent) {\n    var detail = e.detail\n\n    if (this.propertyTarget) {\n      /* 단일 컴포넌트의 경우에 적용 */\n      this.scene && this.scene.undoableChange(() => this.propertyTarget!.set(detail))\n\n      // nature.properties 가 동적인 컴포넌트(예: robot-arm 의 chainPreset\n      // 변경 시 joint 개수 변화)를 위해 set 직후 nature 재평가.\n      // 정적 nature 컴포넌트는 동일한 배열이 반환되어 비용 미미.\n      const nextProps = this.propertyTarget.nature?.properties\n      if (nextProps && this.specificPropsChanged(nextProps)) {\n        this.specificProps = deepClone(nextProps)\n      }\n    } else {\n      /* 여러 컴포넌트의 경우에 적용 */\n      this.scene && this.scene.undoableChange(() => this.selected.forEach(component => component.set(detail)))\n    }\n  }\n\n  /**\n   * 새 properties 배열이 현재 specificProps 와 *구조상* 다른지 빠르게 검사.\n   * 단순히 length + 각 항목의 name 만 비교 — value 변경은 model 측에서 처리되므로\n   * specificProps 의 reference 를 바꿀 필요가 없다.\n   */\n  private specificPropsChanged(next: any[]): boolean {\n    const cur = this.specificProps\n    if (!cur || cur.length !== next.length) return true\n    for (let i = 0; i < next.length; i++) {\n      if (cur[i]?.name !== next[i]?.name) return true\n    }\n    return false\n  }\n\n  private onBoundsChanged(e: CustomEvent) {\n    var detail = e.detail\n\n    if (!this.scene) {\n      return\n    }\n\n    if (this.propertyTarget) {\n      /* 단일 컴포넌트의 경우에 적용 */\n      this.scene.undoableChange(() => {\n        this.propertyTarget!.bounds = {\n          ...this.propertyTarget!.bounds,\n          ...detail\n        }\n      })\n    } else {\n      /* 여러 컴포넌트의 경우에 적용 */\n      this.scene.undoableChange(() => {\n        this.selected.forEach(component => {\n          component.bounds = {\n            ...component.bounds,\n            ...detail\n          }\n        })\n      })\n    }\n  }\n\n  private onChangedByScene() {\n    if (this.propertyTarget) {\n      this.model = {\n        ...this.propertyTarget.model\n      }\n      this.setBounds(this.propertyTarget.bounds)\n    }\n  }\n\n  private setPropertyTargetAsDefault() {\n    // 마퀴(영역) 선택 드래그 중에는 root(model-layer) auto-select 를 하지 않는다.\n    // 마퀴가 만드는 transient 빈 선택([])과 auto-select([model-layer]) 가 싸워\n    // 속성창(shape/3d)이 번뜩이는 것을 막는다. 드래그 종료 후에만 scene 기본속성 표시.\n    if ((this.scene as any)?.isSelecting) return\n    if (!this.scene) {\n      this.setPropertyTarget(null)\n      this.specificProps = []\n      this.model = null\n      this.bounds = {}\n    } else {\n      this.scene.select('model-layer')\n    }\n  }\n\n  private onCollapsed(collapsed: boolean) {\n    this.style.display = collapsed ? 'none' : ''\n    dispatchEvent(new Event('resize'))\n  }\n\n  private async onSceneChanged() {\n    await this.updateComplete\n\n    if (this.scene) this.selected = this.scene.select('model-layer')\n  }\n\n  private async onSelectedChanged(after: Component[]) {\n    await this.updateComplete\n\n\n    if (after.length == 1) {\n      this.setPropertyTarget(after[0])\n      // 컴포넌트 특성 속성(specific properties)을 먼저 바꾸고, 모델을 바꾸어준다.\n      // 컴포넌트 속성에 따라 UI 컴포넌트가 준비되고, 이후에 모델값을 보여주도록 하기 위해서이다.\n      this.specificProps = deepClone(this.propertyTarget!.nature.properties)\n      this.model = {\n        ...this.propertyTarget!.model\n      }\n      this.setBounds(this.propertyTarget!.bounds)\n    } else if (after.length == 0) {\n      // 선택이 안된 경우\n\n      this.setPropertyTargetAsDefault()\n    } else {\n      // 다중 선택된 경우\n\n      var type = after[0].model.type\n      for (let i = 1; i < after.length; i++) {\n        if (after[i].model.type != type) {\n          type = undefined\n          break\n        }\n      }\n\n      this.setPropertyTarget(null)\n\n      if (type) this.specificProps = deepClone(after[0].nature.properties)\n      else this.specificProps = null\n\n      this.model = {\n        type: type,\n        alpha: 1\n      }\n      this.bounds = {}\n    }\n  }\n\n  private setPropertyTarget(newTarget: Component | null) {\n    var oldTarget = this.propertyTarget\n\n    if (oldTarget) {\n      oldTarget.off('change', this.onChangedByScene, this)\n    }\n    if (newTarget) {\n      newTarget.on('change', this.onChangedByScene, this)\n    }\n\n    this.propertyTarget = newTarget\n  }\n\n  private setBounds(bounds: BOUNDS) {\n    this.bounds = {\n      left: bounds.left,\n      top: bounds.top,\n      width: Math.round(bounds.width),\n      height: Math.round(bounds.height)\n    }\n  }\n\n  private is3dish(selected: Component[]) {\n    if (selected.length === 0) return false\n    const first = selected[0]\n    return first?.is3dish?.() || first?.isRootModel?.()\n  }\n\n  private isRootModel(selected: Component[]) {\n    return selected.length > 0 && selected[0]?.isRootModel?.()\n  }\n\n  private isLine(selected: Component[]) {\n    var isLine = false\n\n    for (var i = 0; i < selected.length; i++) {\n      var comp = selected[i]\n\n      if (!comp.isLine || !comp.isLine()) {\n        isLine = false\n        return isLine\n      }\n\n      isLine = true\n    }\n\n    return isLine\n  }\n}\n"]}

package/dist/src/property-panel/abstract-property.js

@@ -24,9 +24,18 @@ export class AbstractProperty extends LitElement {
                         value = element.checked;
                         break;
                     case 'number':
-                    case 'range':
-                        value = Number(element.valueAsNumber);
+                    case 'range': {
+                        // Empty or invalid numeric input (user cleared the field, typed
+                        // garbage, etc.) yields NaN via `valueAsNumber`. Persisting NaN
+                        // poisons every downstream Math.* calculation and surfaces as
+                        // "BufferGeometry computeBoundingSphere: radius is NaN" or
+                        // similar. Emit `undefined` so the component's resolution chain
+                        // (e.g. RealObject.effectiveDepth → Placeable defaultDepth → 1)
+                        // takes over and the geometry stays well-formed.
+                        const n = element.valueAsNumber;
+                        value = Number.isFinite(n) ? n : undefined;
                         break;
+                    }
                     case 'text':
                         value = String(element.value);
                 }

package/dist/src/property-panel/abstract-property.js.map

@@ -1 +1 @@
-{"version":3,"file":"abstract-property.js","sourceRoot":"","sources":["../../../src/property-panel/abstract-property.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAEhC,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAC9C,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC3E,CAAC;IAES,aAAa,CAAC,CAAQ;QAC9B,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,OAAM;QACR,CAAC;QAED,IAAI,KAAK,GAAG,IAAI,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAA;QAEjD,IAAI,CAAC,kBAAkB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;IACrC,CAAC;IAES,uBAAuB,CAAC,OAAoB;QACpD,IAAI,KAAK,CAAA;QAET,QAAQ,OAAO,CAAC,OAAO,EAAE,CAAC;YACxB,KAAK,OAAO;gBACV,QAAS,OAAe,CAAC,IAAI,EAAE,CAAC;oBAC9B,KAAK,UAAU;wBACb,KAAK,GAAI,OAAe,CAAC,OAAO,CAAA;wBAChC,MAAK;oBACP,KAAK,QAAQ,CAAC;oBACd,KAAK,OAAO;wBACV,KAAK,GAAG,MAAM,CAAE,OAAe,CAAC,aAAa,CAAC,CAAA;wBAC9C,MAAK;oBACP,KAAK,MAAM;wBACT,KAAK,GAAG,MAAM,CAAE,OAAe,CAAC,KAAK,CAAC,CAAA;gBAC1C,CAAC;gBACD,MAAK;YAEP,KAAK,SAAS;gBACZ,KAAK,GAAI,OAAe,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAA;gBAC/C,MAAK;YAEP;gBACE,KAAK,GAAI,OAAe,CAAC,KAAK,CAAA;gBAC9B,MAAK;QACT,CAAC;QAED,OAAO,KAAK,CAAA;IACd,CAAC;IAES,kBAAkB,CAAC,GAAW,EAAE,KAAU;QAClD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;YACjC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,CAAC,GAAG,CAAC,EAAE,KAAK;aACb;SACF,CAAC,CACH,CAAA;IACH,CAAC;CACF","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { LitElement } from 'lit'\n\nexport class AbstractProperty extends LitElement {\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n  }\n\n  protected onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    var value = this.getValueFromEventTarget(element)\n\n    this.onAfterValueChange(key, value)\n  }\n\n  protected getValueFromEventTarget(element: HTMLElement) {\n    var value\n\n    switch (element.tagName) {\n      case 'INPUT':\n        switch ((element as any).type) {\n          case 'checkbox':\n            value = (element as any).checked\n            break\n          case 'number':\n          case 'range':\n            value = Number((element as any).valueAsNumber)\n            break\n          case 'text':\n            value = String((element as any).value)\n        }\n        break\n\n      case 'MD-ICON':\n        value = (element as any).hasAttribute('active')\n        break\n\n      default:\n        value = (element as any).value\n        break\n    }\n\n    return value\n  }\n\n  protected onAfterValueChange(key: string, value: any) {\n    this.dispatchEvent(\n      new CustomEvent('property-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          [key]: value\n        }\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"abstract-property.js","sourceRoot":"","sources":["../../../src/property-panel/abstract-property.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAEhC,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAC9C,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC3E,CAAC;IAES,aAAa,CAAC,CAAQ;QAC9B,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,OAAM;QACR,CAAC;QAED,IAAI,KAAK,GAAG,IAAI,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAA;QAEjD,IAAI,CAAC,kBAAkB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;IACrC,CAAC;IAES,uBAAuB,CAAC,OAAoB;QACpD,IAAI,KAAK,CAAA;QAET,QAAQ,OAAO,CAAC,OAAO,EAAE,CAAC;YACxB,KAAK,OAAO;gBACV,QAAS,OAAe,CAAC,IAAI,EAAE,CAAC;oBAC9B,KAAK,UAAU;wBACb,KAAK,GAAI,OAAe,CAAC,OAAO,CAAA;wBAChC,MAAK;oBACP,KAAK,QAAQ,CAAC;oBACd,KAAK,OAAO,CAAC,CAAC,CAAC;wBACb,gEAAgE;wBAChE,gEAAgE;wBAChE,8DAA8D;wBAC9D,2DAA2D;wBAC3D,gEAAgE;wBAChE,gEAAgE;wBAChE,iDAAiD;wBACjD,MAAM,CAAC,GAAI,OAAe,CAAC,aAAa,CAAA;wBACxC,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;wBAC1C,MAAK;oBACP,CAAC;oBACD,KAAK,MAAM;wBACT,KAAK,GAAG,MAAM,CAAE,OAAe,CAAC,KAAK,CAAC,CAAA;gBAC1C,CAAC;gBACD,MAAK;YAEP,KAAK,SAAS;gBACZ,KAAK,GAAI,OAAe,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAA;gBAC/C,MAAK;YAEP;gBACE,KAAK,GAAI,OAAe,CAAC,KAAK,CAAA;gBAC9B,MAAK;QACT,CAAC;QAED,OAAO,KAAK,CAAA;IACd,CAAC;IAES,kBAAkB,CAAC,GAAW,EAAE,KAAU;QAClD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;YACjC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,CAAC,GAAG,CAAC,EAAE,KAAK;aACb;SACF,CAAC,CACH,CAAA;IACH,CAAC;CACF","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { LitElement } from 'lit'\n\nexport class AbstractProperty extends LitElement {\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n  }\n\n  protected onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    var value = this.getValueFromEventTarget(element)\n\n    this.onAfterValueChange(key, value)\n  }\n\n  protected getValueFromEventTarget(element: HTMLElement) {\n    var value\n\n    switch (element.tagName) {\n      case 'INPUT':\n        switch ((element as any).type) {\n          case 'checkbox':\n            value = (element as any).checked\n            break\n          case 'number':\n          case 'range': {\n            // Empty or invalid numeric input (user cleared the field, typed\n            // garbage, etc.) yields NaN via `valueAsNumber`. Persisting NaN\n            // poisons every downstream Math.* calculation and surfaces as\n            // \"BufferGeometry computeBoundingSphere: radius is NaN\" or\n            // similar. Emit `undefined` so the component's resolution chain\n            // (e.g. RealObject.effectiveDepth → Placeable defaultDepth → 1)\n            // takes over and the geometry stays well-formed.\n            const n = (element as any).valueAsNumber\n            value = Number.isFinite(n) ? n : undefined\n            break\n          }\n          case 'text':\n            value = String((element as any).value)\n        }\n        break\n\n      case 'MD-ICON':\n        value = (element as any).hasAttribute('active')\n        break\n\n      default:\n        value = (element as any).value\n        break\n    }\n\n    return value\n  }\n\n  protected onAfterValueChange(key: string, value: any) {\n    this.dispatchEvent(\n      new CustomEvent('property-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          [key]: value\n        }\n      })\n    )\n  }\n}\n"]}

package/dist/src/property-panel/data-binding/data-binding-mapper.js

@@ -125,11 +125,19 @@ export class DataBindingMapper extends LitElement {
           <ox-i18n msgid="label.property">property</ox-i18n
           ><ox-help-icon topic="board-modeller/data-binding-property"></ox-help-icon
         ></label>
-        <select id="property-input" value-key="property" .value=${mapping.property || ''}>
+        <input
+          id="property-input"
+          type="text"
+          value-key="property"
+          list="property-list"
+          .value=${mapping.property || ''}
+        />
+
+        <datalist id="property-list">
           ${this.properties.map(item => html `
-              <option .value=${item.name} ?selected=${item.name == mapping.property}>${item.label}</option>
+              <option value=${item.name}>${item.label}</option>
             `)}
-        </select>
+        </datalist>
 
         <label> <ox-i18n msgid="label.rule-type">rule type</ox-i18n> </label>
         <ox-buttons-radio .value=${mapping.rule} @change=${(e) => this._onChangeRule(e)}>

package/dist/src/property-panel/data-binding/data-binding-mapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-binding-mapper.js","sourceRoot":"","sources":["../../../../src/property-panel/data-binding/data-binding-mapper.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oCAAoC,CAAA;AAC3C,OAAO,iCAAiC,CAAA;AACxC,OAAO,0BAA0B,CAAA;AACjC,OAAO,+BAA+B,CAAA;AACtC,OAAO,6BAA6B,CAAA;AACpC,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAG1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAqB5E;;;;;;;EAOE;AAEF,MAAM,OAAO,iBAAkB,SAAQ,UAAU;IAAjD;;QAyC8B,YAAO,GAAY;YAC7C,IAAI,EAAE,OAAO;SACd,CAAA;QAC2B,SAAI,GAAS,EAAE,CAAA;QAChB,eAAU,GAAiB,EAAE,CAAA;QAG/C,gBAAW,GAAQ;YAC1B,IAAI,EAAE,SAAS;YACf,MAAM,EAAE,SAAS;YACjB,OAAO,EAAE,SAAS;YAElB,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,QAAQ;YAEf,SAAS,EAAE,OAAO;YAClB,WAAW,EAAE,OAAO;YACpB,SAAS,EAAE,OAAO;YAElB,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,YAAY;YACpB,QAAQ,EAAE,QAAQ;YAClB,SAAS,EAAE,QAAQ;YAEnB,IAAI,EAAE,QAAQ;YACd,GAAG,EAAE,QAAQ;SACd,CAAA;QACQ,kBAAa,GAA6C,EAAE,CAAA;QAqJ7D,4BAAuB,GAAY,KAAK,CAAA;IAiJlD,CAAC;IAhSC,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;IACpE,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAA;IACpD,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,aAAa;YAChB,CAAC,IAAI,CAAC,KAAK;gBACT,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,EAAE;;oBAC5B,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,CAAA;oBAChB,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,MAAA,IAAI,CAAC,KAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,0CAAE,GAAG,CAAC,MAAM,CAAC,EAAE,CAAA;gBAChF,CAAC,CAAC,CAAC;gBACL,EAAE,CAAA;IACN,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI;YAC9B,IAAI,EAAE,OAAO;SACd,CAAA;QAED,OAAO,IAAI,CAAA;;;;;;;;mBAQI,OAAO,CAAC,MAAM,IAAI,EAAE;qBAClB,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE;;;;;;;;;;;;mBAY/B,OAAO,CAAC,QAAQ,IAAI,EAAE;;;;;;;;;mBAStB,OAAO,CAAC,MAAM,IAAI,EAAE;qBAClB,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE;;;;;YAKtC,IAAI,CAAC,aAAa,CAAC,MAAM;YACzB,CAAC,CAAC,IAAI,CAAA;kBACA,IAAI,CAAC,aAAa,CAAC,GAAG,CACtB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA,kBAAkB,KAAK,IAAI,WAAW,YAAY,CACnF;eACF;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;;;;;;YAQR,IAAI,CAAC,aAAa,CAAC,MAAM;YACzB,CAAC,CAAC,IAAI,CAAA;kBACA,IAAI,CAAC,aAAa,CAAC,GAAG,CACtB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA,kBAAkB,KAAK,IAAI,WAAW,YAAY,CACnF;eACF;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;;;;;kEAO8C,OAAO,CAAC,QAAQ,IAAI,EAAE;YAC5E,IAAI,CAAC,UAAU,CAAC,GAAG,CACnB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;+BACO,IAAI,CAAC,IAAI,cAAc,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK;aACpF,CACF;;;;mCAIwB,OAAO,CAAC,IAAI,YAAY,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;;;;;;;sDAOxC,OAAO,CAAC,IAAI,IAAI,OAAO;;;qBAGxD,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,EAAE;yBACf,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAS,CAAC;sBACrC,OAAO,CAAC,IAAI,IAAI,KAAK;;;;;;qBAMtB,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE;yBACjB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAS,CAAC;sBACrC,OAAO,CAAC,IAAI,IAAI,OAAO;;;;;;;;qBAQxB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE;sBACnB,OAAO,CAAC,IAAI,IAAI,MAAM;;;;;;oFAMwC,OAAO,CAAC,OAAO,KAAK,IAAI;;;gFAG5B,OAAO,CAAC,KAAK,KAAK,IAAI;;;KAGjG,CAAA;IACH,CAAC;IAED,UAAU,CAAC,QAAgB;QACzB,OAAO,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAA;IAC/C,CAAC;IAID,KAAK,CAAC,iBAAiB;QACrB,IAAI,IAAI,CAAC,uBAAuB,EAAE,CAAC;YACjC,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAA;QACtC,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,CAAC,cAAc,CAAA;YAEzB,IAAI,IAAI,GAAS,EAAE,CAAA;YAEnB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,QAAQ,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;oBAC1B,KAAK,KAAK;wBACR,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAA;wBACnC,MAAK;oBACP,KAAK,OAAO;wBACV,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAA;wBACrC,MAAK;oBACP,KAAK,MAAM;wBACT,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAA;wBACpC,MAAK;oBACP;wBACE,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,OAAO,CAAA;wBAC3B,MAAK;gBACT,CAAC;YACH,CAAC;YAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;YAChB,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC;IACH,CAAC;IAED,aAAa,CAAC,CAAQ;QACpB,IAAI,OAAO,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,IAAI,KAAK,GAAG,OAAO,CAAC,KAAK,CAAA;QAEzB,IAAI,KAAK,CAAA;QAET,QAAQ,KAAK,EAAE,CAAC;YACd,KAAK,KAAK;gBACR,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAA;gBACrB,MAAK;YACP,KAAK,OAAO;gBACV,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAA;gBACvB,MAAK;YACP,KAAK,MAAM;gBACT,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;gBAE5B,yDAAyD;gBACzD,IAAI,CAAC,KAAK,EAAE,CAAC;oBACX,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAA;gBAC9B,CAAC;gBACD,MAAK;YACP,QAAQ;QACV,CAAC;QAED,IAAI,CAAC,OAAO,GAAG;YACb,GAAG,IAAI,CAAC,OAAO;YACf,IAAI,EAAE,KAA2C;YACjD,KAAK;SACN,CAAA;QAED,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAA;QACnC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IACxF,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,IAAI,OAAO,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG;YAAE,OAAM;QAEhB,IAAI,KAAK,GAAqB,OAAO,CAAC,KAAK,CAAA;QAE3C,IAAI,GAAG,KAAK,QAAQ,EAAE,CAAC;YACrB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACrB,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,CAAA;gBAEpB,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAA;YAC3B,CAAC;YAED,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,MAAM,EAAE,KAAK;aACd,CAAA;QACH,CAAC;aAAM,IAAI,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC5B,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;gBAChD,KAAK,GAAG,GAAG,GAAG,KAAK,CAAC,IAAI,EAAE,CAAA;gBAE1B,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAA;YAC3B,CAAC;YAED,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,MAAM,EAAE,KAAK;aACd,CAAA;QACH,CAAC;aAAM,IAAI,GAAG,KAAK,UAAU,EAAE,CAAC;YAC9B,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,QAAQ,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE;aAC/B,CAAA;QACH,CAAC;aAAM,IAAI,GAAG,KAAK,UAAU,EAAE,CAAC;YAC9B,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,QAAQ,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE;aAC/B,CAAA;QACH,CAAC;aAAM,IAAI,GAAG,KAAK,KAAK,IAAI,GAAG,KAAK,OAAO,IAAI,GAAG,KAAK,MAAM,EAAE,CAAC;YAC9D,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;YACtB,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,KAAK,EAAE,KAAK;aACb,CAAA;QACH,CAAC;aAAM,IAAI,GAAG,KAAK,OAAO,CAAC,0BAA0B,EAAE,CAAC;YACtD,KAAK,GAAG,OAAO,CAAC,OAAO,CAAA;YAEvB,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,KAAK,EAAE,KAAK;aACb,CAAA;QACH,CAAC;aAAM,IAAI,GAAG,KAAK,SAAS,CAAC,uBAAuB,EAAE,CAAC;YACrD,KAAK,GAAG,OAAO,CAAC,OAAO,CAAA;YAEvB,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,OAAO,EAAE,KAAK;aACf,CAAA;QACH,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,OAAO,CAAA;QAC7B,CAAC;QAED,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAA;QACnC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,OAAO,EAAE;oBACP,CAAC,GAAG,CAAC,EAAE,KAAK;iBACb;aACF;SACF,CAAC,CACH,CAAA;IACH,CAAC;;AAxWM,wBAAM,GAAG;IACd,kBAAkB;IAClB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmCF;CACF,AAtCY,CAsCZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAE1B;AAC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAgB;AAChB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;qDAA8B;AAC5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAc;AAEhC;IAAR,KAAK,EAAE;sDAmBP;AACQ;IAAR,KAAK,EAAE;wDAA6D;AAE9C;IAAtB,KAAK,CAAC,cAAc,CAAC;iDAA0B;AACxB;IAAvB,KAAK,CAAC,eAAe,CAAC;iDAA0B;AACzB;IAAvB,KAAK,CAAC,eAAe,CAAC;iDAA0B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-buttons-radio.js'\nimport '@operato/input/ox-input-code.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/help/ox-help-icon.js'\nimport './data-binding-value-map.js'\nimport './data-binding-value-range.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nexport type Rule =\n  | {\n      map?: Properties\n      range?: Properties[]\n      eval?: string\n    }\n  | any\n\nexport type Mapping = {\n  source?: string\n  rule: 'map' | 'range' | 'eval' | 'value'\n  accessor?: string\n  target?: string\n  property?: string\n  param?: Rule\n  ndnsp?: boolean\n  partial?: boolean\n}\n\n/**\nelement for mapping data value editing\n\nExample:\n\n  <data-binding-mapper mapping=${mapping}>\n  </data-binding-mapper>\n*/\n\nexport class DataBindingMapper extends LitElement {\n  static styles = [\n    PropertyGridStyles,\n    css`\n      :host {\n        display: flex;\n        overflow: hidden;\n        padding: 7px 0 0 0;\n        border: 1px solid rgba(0, 0, 0, 0.2);\n        border-width: 0 1px 1px 1px;\n        padding: 4px;\n        line-height: 2;\n      }\n\n      [mapping-rule] {\n        display: flex;\n      }\n\n      [mapping-rule] * {\n        flex: auto;\n        margin: 0;\n        text-align: left;\n        align-self: center;\n      }\n\n      [rule-editors] {\n        display: 'flex';\n        align-content: auto;\n      }\n\n      [rule-editors] :not([active]) {\n        display: none;\n      }\n\n      ox-input-code {\n        height: 300px;\n        overflow: auto;\n      }\n    `\n  ]\n\n  @property({ type: Object }) mapping: Mapping = {\n    rule: 'value'\n  }\n  @property({ type: Object }) rule: Rule = {}\n  @property({ type: Array }) properties: Properties[] = []\n  @property({ type: Object }) scene?: Scene\n\n  @state() _valueTypes: any = {\n    play: 'boolean',\n    hidden: 'boolean',\n    started: 'boolean',\n\n    rotation: 'number',\n    value: 'number',\n\n    fillStyle: 'color',\n    strokeStyle: 'color',\n    fontColor: 'color',\n\n    data: 'object',\n    source: 'attachment',\n    location: 'object',\n    dimension: 'object',\n\n    text: 'string',\n    ref: 'string'\n  }\n  @state() _componentIds: { value: string; description: string }[] = []\n\n  @query('#eval-editor') editor!: HTMLInputElement\n  @query('#source-input') source!: HTMLInputElement\n  @query('#target-input') target!: HTMLInputElement\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', e => this._onChange(e))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('mapping') && this._onChangedMapping()\n  }\n\n  findComponentIds() {\n    this._componentIds =\n      (this.scene &&\n        this.scene.ids.map((i: any) => {\n          const id = i.key\n          return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n        })) ||\n      []\n  }\n\n  render() {\n    const mapping = this.mapping || {\n      rule: 'value'\n    }\n\n    return html`\n      <div class=\"property-grid\">\n        <label for=\"source-input\"> <ox-i18n msgid=\"label.source\">source</ox-i18n> </label>\n        <input\n          id=\"source-input\"\n          type=\"text\"\n          value-key=\"source\"\n          list=\"source-list\"\n          .value=${mapping.source || ''}\n          @focusin=${() => this.findComponentIds()}\n        />\n\n        <label for=\"accessor-input\">\n          <ox-i18n msgid=\"label.accessor\">accessor</ox-i18n\n          ><ox-help-icon topic=\"board-modeller/accessor\"></ox-help-icon>\n        </label>\n        <input\n          id=\"accessor-input\"\n          value-key=\"accessor\"\n          type=\"text\"\n          data-mapping-accessor\n          .value=${mapping.accessor || ''}\n        />\n\n        <label for=\"target-input\"> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n        <input\n          id=\"target-input\"\n          type=\"text\"\n          value-key=\"target\"\n          list=\"target-list\"\n          .value=${mapping.target || ''}\n          @focusin=${() => this.findComponentIds()}\n        />\n\n        <datalist id=\"source-list\">\n          <option value=\"(self)\"></option>\n          ${this._componentIds.length\n            ? html`\n                ${this._componentIds.map(\n                  ({ value, description }) => html` <option value=${value}>${description}</option> `\n                )}\n              `\n            : html``}\n        </datalist>\n\n        <datalist id=\"target-list\">\n          <option value=\"(self)\"></option>\n          <option value=\"(children)\"></option>\n          <option value=\"(key)\"></option>\n          <option value=\"[propkey]\"></option>\n          ${this._componentIds.length\n            ? html`\n                ${this._componentIds.map(\n                  ({ value, description }) => html` <option value=${value}>${description}</option> `\n                )}\n              `\n            : html``}\n        </datalist>\n\n        <label for=\"property-input\">\n          <ox-i18n msgid=\"label.property\">property</ox-i18n\n          ><ox-help-icon topic=\"board-modeller/data-binding-property\"></ox-help-icon\n        ></label>\n        <select id=\"property-input\" value-key=\"property\" .value=${mapping.property || ''}>\n          ${this.properties.map(\n            item => html`\n              <option .value=${item.name} ?selected=${item.name == mapping.property}>${item.label}</option>\n            `\n          )}\n        </select>\n\n        <label> <ox-i18n msgid=\"label.rule-type\">rule type</ox-i18n> </label>\n        <ox-buttons-radio .value=${mapping.rule} @change=${(e: Event) => this._onChangeRule(e)}>\n          <div data-value=\"value\"><ox-i18n msgid=\"label.value\"></ox-i18n></div>\n          <div data-value=\"map\"><ox-i18n msgid=\"label.map\"></ox-i18n></div>\n          <div data-value=\"range\"><ox-i18n msgid=\"label.range\"></ox-i18n></div>\n          <div data-value=\"eval\"><ox-i18n msgid=\"label.eval\"></ox-i18n></div>\n        </ox-buttons-radio>\n\n        <div class=\"fullwidth\" rule-editors ?hidden=${mapping.rule == 'value'}>\n          <data-binding-value-map\n            value-key=\"map\"\n            .value=${this.rule.map || {}}\n            .valuetype=${this._valuetype(mapping.property!)}\n            ?active=${mapping.rule == 'map'}\n          >\n          </data-binding-value-map>\n\n          <data-binding-value-range\n            value-key=\"range\"\n            .value=${this.rule.range || []}\n            .valuetype=${this._valuetype(mapping.property!)}\n            ?active=${mapping.rule == 'range'}\n          >\n          </data-binding-value-range>\n\n          <ox-input-code\n            class=\"fullwidth\"\n            value-key=\"eval\"\n            id=\"eval-editor\"\n            .value=${this.rule.eval || ''}\n            ?active=${mapping.rule == 'eval'}\n            language=\"javascript\"\n          >\n          </ox-input-code>\n        </div>\n\n        <input id=\"checkbox-partial\" type=\"checkbox\" value-key=\"partial\" .checked=${mapping.partial === true} />\n        <label for=\"checkbox-partial\"> <ox-i18n msgid=\"label.partial-spreading\">Partial Spreading</ox-i18n> </label>\n\n        <input id=\"checkbox-ndnsp\" type=\"checkbox\" value-key=\"ndnsp\" .checked=${mapping.ndnsp === true} />\n        <label for=\"checkbox-ndnsp\"> <ox-i18n msgid=\"label.ndnsp\">No Data No Spreading</ox-i18n> </label>\n      </div>\n    `\n  }\n\n  _valuetype(property: string) {\n    return this._valueTypes[property] || 'string'\n  }\n\n  private _keep_saved_rule_params: boolean = false\n\n  async _onChangedMapping() {\n    if (this._keep_saved_rule_params) {\n      this._keep_saved_rule_params = false\n    } else {\n      await this.updateComplete\n\n      var rule: Rule = {}\n\n      if (this.mapping) {\n        switch (this.mapping.rule) {\n          case 'map':\n            rule.map = this.mapping.param || {}\n            break\n          case 'range':\n            rule.range = this.mapping.param || []\n            break\n          case 'eval':\n            rule.eval = this.mapping.param || ''\n            break\n          default:\n            this.mapping.rule = 'value'\n            break\n        }\n      }\n\n      this.rule = rule\n      this.requestUpdate()\n    }\n  }\n\n  _onChangeRule(e: Event) {\n    var element = e.target as HTMLInputElement\n    var value = element.value\n\n    let param\n\n    switch (value) {\n      case 'map':\n        param = this.rule.map\n        break\n      case 'range':\n        param = this.rule.range\n        break\n      case 'eval':\n        param = this.rule.eval || ''\n\n        // rule.eval에 값이 없을 때, ace-editor 내용이 초기화되지 않는 문제때문에 처리함.\n        if (!param) {\n          this.editor.value = 'return'\n        }\n        break\n      default:\n    }\n\n    this.mapping = {\n      ...this.mapping,\n      rule: value as 'value' | 'map' | 'range' | 'eval',\n      param\n    }\n\n    this._keep_saved_rule_params = true\n    this.dispatchEvent(new CustomEvent('value-change', { bubbles: true, composed: true }))\n  }\n\n  _onChange(e: Event) {\n    var element = e.target as HTMLInputElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) return\n\n    var value: string | boolean = element.value\n\n    if (key === 'source') {\n      if (value.length > 0) {\n        value = value.trim()\n\n        this.source.value = value\n      }\n\n      this.mapping = {\n        ...this.mapping,\n        source: value\n      }\n    } else if (key === 'target') {\n      if (value.length > 0 && !/^[.#(\\[]/.test(value)) {\n        value = '#' + value.trim()\n\n        this.target.value = value\n      }\n\n      this.mapping = {\n        ...this.mapping,\n        target: value\n      }\n    } else if (key === 'accessor') {\n      this.mapping = {\n        ...this.mapping,\n        accessor: (value || '').trim()\n      }\n    } else if (key === 'property') {\n      this.mapping = {\n        ...this.mapping,\n        property: (value || '').trim()\n      }\n    } else if (key === 'map' || key === 'range' || key === 'eval') {\n      this.rule[key] = value\n      this.mapping = {\n        ...this.mapping,\n        param: value\n      }\n    } else if (key === 'ndnsp' /* no data no spreading */) {\n      value = element.checked\n\n      this.mapping = {\n        ...this.mapping,\n        ndnsp: value\n      }\n    } else if (key === 'partial' /* partial spreading */) {\n      value = element.checked\n\n      this.mapping = {\n        ...this.mapping,\n        partial: value\n      }\n    }\n\n    if (!this.mapping.rule) {\n      this.mapping.rule = 'value'\n    }\n\n    this._keep_saved_rule_params = true\n    this.dispatchEvent(\n      new CustomEvent('value-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          changed: {\n            [key]: value\n          }\n        }\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"data-binding-mapper.js","sourceRoot":"","sources":["../../../../src/property-panel/data-binding/data-binding-mapper.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-buttons-radio.js'\nimport '@operato/input/ox-input-code.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/help/ox-help-icon.js'\nimport './data-binding-value-map.js'\nimport './data-binding-value-range.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nexport type Rule =\n  | {\n      map?: Properties\n      range?: Properties[]\n      eval?: string\n    }\n  | any\n\nexport type Mapping = {\n  source?: string\n  rule: 'map' | 'range' | 'eval' | 'value'\n  accessor?: string\n  target?: string\n  property?: string\n  param?: Rule\n  ndnsp?: boolean\n  partial?: boolean\n}\n\n/**\nelement for mapping data value editing\n\nExample:\n\n  <data-binding-mapper mapping=${mapping}>\n  </data-binding-mapper>\n*/\n\nexport class DataBindingMapper extends LitElement {\n  static styles = [\n    PropertyGridStyles,\n    css`\n      :host {\n        display: flex;\n        overflow: hidden;\n        padding: 7px 0 0 0;\n        border: 1px solid rgba(0, 0, 0, 0.2);\n        border-width: 0 1px 1px 1px;\n        padding: 4px;\n        line-height: 2;\n      }\n\n      [mapping-rule] {\n        display: flex;\n      }\n\n      [mapping-rule] * {\n        flex: auto;\n        margin: 0;\n        text-align: left;\n        align-self: center;\n      }\n\n      [rule-editors] {\n        display: 'flex';\n        align-content: auto;\n      }\n\n      [rule-editors] :not([active]) {\n        display: none;\n      }\n\n      ox-input-code {\n        height: 300px;\n        overflow: auto;\n      }\n    `\n  ]\n\n  @property({ type: Object }) mapping: Mapping = {\n    rule: 'value'\n  }\n  @property({ type: Object }) rule: Rule = {}\n  @property({ type: Array }) properties: Properties[] = []\n  @property({ type: Object }) scene?: Scene\n\n  @state() _valueTypes: any = {\n    play: 'boolean',\n    hidden: 'boolean',\n    started: 'boolean',\n\n    rotation: 'number',\n    value: 'number',\n\n    fillStyle: 'color',\n    strokeStyle: 'color',\n    fontColor: 'color',\n\n    data: 'object',\n    source: 'attachment',\n    location: 'object',\n    dimension: 'object',\n\n    text: 'string',\n    ref: 'string'\n  }\n  @state() _componentIds: { value: string; description: string }[] = []\n\n  @query('#eval-editor') editor!: HTMLInputElement\n  @query('#source-input') source!: HTMLInputElement\n  @query('#target-input') target!: HTMLInputElement\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', e => this._onChange(e))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('mapping') && this._onChangedMapping()\n  }\n\n  findComponentIds() {\n    this._componentIds =\n      (this.scene &&\n        this.scene.ids.map((i: any) => {\n          const id = i.key\n          return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n        })) ||\n      []\n  }\n\n  render() {\n    const mapping = this.mapping || {\n      rule: 'value'\n    }\n\n    return html`\n      <div class=\"property-grid\">\n        <label for=\"source-input\"> <ox-i18n msgid=\"label.source\">source</ox-i18n> </label>\n        <input\n          id=\"source-input\"\n          type=\"text\"\n          value-key=\"source\"\n          list=\"source-list\"\n          .value=${mapping.source || ''}\n          @focusin=${() => this.findComponentIds()}\n        />\n\n        <label for=\"accessor-input\">\n          <ox-i18n msgid=\"label.accessor\">accessor</ox-i18n\n          ><ox-help-icon topic=\"board-modeller/accessor\"></ox-help-icon>\n        </label>\n        <input\n          id=\"accessor-input\"\n          value-key=\"accessor\"\n          type=\"text\"\n          data-mapping-accessor\n          .value=${mapping.accessor || ''}\n        />\n\n        <label for=\"target-input\"> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n        <input\n          id=\"target-input\"\n          type=\"text\"\n          value-key=\"target\"\n          list=\"target-list\"\n          .value=${mapping.target || ''}\n          @focusin=${() => this.findComponentIds()}\n        />\n\n        <datalist id=\"source-list\">\n          <option value=\"(self)\"></option>\n          ${this._componentIds.length\n            ? html`\n                ${this._componentIds.map(\n                  ({ value, description }) => html` <option value=${value}>${description}</option> `\n                )}\n              `\n            : html``}\n        </datalist>\n\n        <datalist id=\"target-list\">\n          <option value=\"(self)\"></option>\n          <option value=\"(children)\"></option>\n          <option value=\"(key)\"></option>\n          <option value=\"[propkey]\"></option>\n          ${this._componentIds.length\n            ? html`\n                ${this._componentIds.map(\n                  ({ value, description }) => html` <option value=${value}>${description}</option> `\n                )}\n              `\n            : html``}\n        </datalist>\n\n        <label for=\"property-input\">\n          <ox-i18n msgid=\"label.property\">property</ox-i18n\n          ><ox-help-icon topic=\"board-modeller/data-binding-property\"></ox-help-icon\n        ></label>\n        <input\n          id=\"property-input\"\n          type=\"text\"\n          value-key=\"property\"\n          list=\"property-list\"\n          .value=${mapping.property || ''}\n        />\n\n        <datalist id=\"property-list\">\n          ${this.properties.map(\n            item => html`\n              <option value=${item.name}>${item.label}</option>\n            `\n          )}\n        </datalist>\n\n        <label> <ox-i18n msgid=\"label.rule-type\">rule type</ox-i18n> </label>\n        <ox-buttons-radio .value=${mapping.rule} @change=${(e: Event) => this._onChangeRule(e)}>\n          <div data-value=\"value\"><ox-i18n msgid=\"label.value\"></ox-i18n></div>\n          <div data-value=\"map\"><ox-i18n msgid=\"label.map\"></ox-i18n></div>\n          <div data-value=\"range\"><ox-i18n msgid=\"label.range\"></ox-i18n></div>\n          <div data-value=\"eval\"><ox-i18n msgid=\"label.eval\"></ox-i18n></div>\n        </ox-buttons-radio>\n\n        <div class=\"fullwidth\" rule-editors ?hidden=${mapping.rule == 'value'}>\n          <data-binding-value-map\n            value-key=\"map\"\n            .value=${this.rule.map || {}}\n            .valuetype=${this._valuetype(mapping.property!)}\n            ?active=${mapping.rule == 'map'}\n          >\n          </data-binding-value-map>\n\n          <data-binding-value-range\n            value-key=\"range\"\n            .value=${this.rule.range || []}\n            .valuetype=${this._valuetype(mapping.property!)}\n            ?active=${mapping.rule == 'range'}\n          >\n          </data-binding-value-range>\n\n          <ox-input-code\n            class=\"fullwidth\"\n            value-key=\"eval\"\n            id=\"eval-editor\"\n            .value=${this.rule.eval || ''}\n            ?active=${mapping.rule == 'eval'}\n            language=\"javascript\"\n          >\n          </ox-input-code>\n        </div>\n\n        <input id=\"checkbox-partial\" type=\"checkbox\" value-key=\"partial\" .checked=${mapping.partial === true} />\n        <label for=\"checkbox-partial\"> <ox-i18n msgid=\"label.partial-spreading\">Partial Spreading</ox-i18n> </label>\n\n        <input id=\"checkbox-ndnsp\" type=\"checkbox\" value-key=\"ndnsp\" .checked=${mapping.ndnsp === true} />\n        <label for=\"checkbox-ndnsp\"> <ox-i18n msgid=\"label.ndnsp\">No Data No Spreading</ox-i18n> </label>\n      </div>\n    `\n  }\n\n  _valuetype(property: string) {\n    return this._valueTypes[property] || 'string'\n  }\n\n  private _keep_saved_rule_params: boolean = false\n\n  async _onChangedMapping() {\n    if (this._keep_saved_rule_params) {\n      this._keep_saved_rule_params = false\n    } else {\n      await this.updateComplete\n\n      var rule: Rule = {}\n\n      if (this.mapping) {\n        switch (this.mapping.rule) {\n          case 'map':\n            rule.map = this.mapping.param || {}\n            break\n          case 'range':\n            rule.range = this.mapping.param || []\n            break\n          case 'eval':\n            rule.eval = this.mapping.param || ''\n            break\n          default:\n            this.mapping.rule = 'value'\n            break\n        }\n      }\n\n      this.rule = rule\n      this.requestUpdate()\n    }\n  }\n\n  _onChangeRule(e: Event) {\n    var element = e.target as HTMLInputElement\n    var value = element.value\n\n    let param\n\n    switch (value) {\n      case 'map':\n        param = this.rule.map\n        break\n      case 'range':\n        param = this.rule.range\n        break\n      case 'eval':\n        param = this.rule.eval || ''\n\n        // rule.eval에 값이 없을 때, ace-editor 내용이 초기화되지 않는 문제때문에 처리함.\n        if (!param) {\n          this.editor.value = 'return'\n        }\n        break\n      default:\n    }\n\n    this.mapping = {\n      ...this.mapping,\n      rule: value as 'value' | 'map' | 'range' | 'eval',\n      param\n    }\n\n    this._keep_saved_rule_params = true\n    this.dispatchEvent(new CustomEvent('value-change', { bubbles: true, composed: true }))\n  }\n\n  _onChange(e: Event) {\n    var element = e.target as HTMLInputElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) return\n\n    var value: string | boolean = element.value\n\n    if (key === 'source') {\n      if (value.length > 0) {\n        value = value.trim()\n\n        this.source.value = value\n      }\n\n      this.mapping = {\n        ...this.mapping,\n        source: value\n      }\n    } else if (key === 'target') {\n      if (value.length > 0 && !/^[.#(\\[]/.test(value)) {\n        value = '#' + value.trim()\n\n        this.target.value = value\n      }\n\n      this.mapping = {\n        ...this.mapping,\n        target: value\n      }\n    } else if (key === 'accessor') {\n      this.mapping = {\n        ...this.mapping,\n        accessor: (value || '').trim()\n      }\n    } else if (key === 'property') {\n      this.mapping = {\n        ...this.mapping,\n        property: (value || '').trim()\n      }\n    } else if (key === 'map' || key === 'range' || key === 'eval') {\n      this.rule[key] = value\n      this.mapping = {\n        ...this.mapping,\n        param: value\n      }\n    } else if (key === 'ndnsp' /* no data no spreading */) {\n      value = element.checked\n\n      this.mapping = {\n        ...this.mapping,\n        ndnsp: value\n      }\n    } else if (key === 'partial' /* partial spreading */) {\n      value = element.checked\n\n      this.mapping = {\n        ...this.mapping,\n        partial: value\n      }\n    }\n\n    if (!this.mapping.rule) {\n      this.mapping.rule = 'value'\n    }\n\n    this._keep_saved_rule_params = true\n    this.dispatchEvent(\n      new CustomEvent('value-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          changed: {\n            [key]: value\n          }\n        }\n      })\n    )\n  }\n}\n"]}

package/dist/src/property-panel/data-binding/data-binding-popup.d.ts

@@ -0,0 +1,63 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@material/web/icon/icon.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 './data-binding-value-map.js';
+import './data-binding-value-range.js';
+import { LitElement } from 'lit';
+import { Properties } from '@hatiolab/things-scene';
+import { DataBindingMapper, Mapping } from './data-binding-mapper.js';
+declare const DataBindingPopup_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types.js").ScopedElementsHost>;
+export declare class DataBindingPopup extends DataBindingPopup_base {
+    static get scopedElements(): {
+        'data-binding-mapper': typeof DataBindingMapper;
+    };
+    static styles: import("lit").CSSResult[];
+    mappings: Mapping[];
+    properties: Properties[];
+    selected?: any;
+    scene?: any;
+    private _viewMode;
+    private _selectedIndex;
+    private _inspectorMode;
+    private _sourceTree;
+    private _expandedPaths;
+    private _previewInput;
+    private _previewOutput;
+    private get _selected();
+    private get _root();
+    private get _currentMapping();
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private _renderLeftPanel;
+    private _renderMappingItems;
+    private _renderFlowCards;
+    private _renderRuleConfig;
+    private _renderInspector;
+    private _renderComponentList;
+    private _renderSourceTree;
+    private _renderJsonataHelp;
+    private _renderTargetTree;
+    private _renderTreeNodes;
+    private _renderPreviewBar;
+    private _selectMapping;
+    private _addMapping;
+    private _deleteMapping;
+    private _updateMapping;
+    private _changeRule;
+    private _selectTreePath;
+    private _findComponent;
+    private _refreshSourceTree;
+    private _refreshPreview;
+    private _renderRuleHelp;
+    private _renderFlowOverview;
+    private _ruleSummary;
+    private _mappingStatus;
+    private _mappingSummary;
+    private _dispatchChange;
+}
+export {};