npm - @operato/property-panel - Versions diffs - 10.20.0 → 10.23.0 - Mend

@operato/property-panel 10.20.0 → 10.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [10.23.0](https://github.com/hatiolab/operato/compare/v10.22.0...v10.23.0) (2026-09-24)
+### :sparkles: Styling
+* **property-panel,input,styles:** quiet inspector, one vocabulary in both schemes ([40e67e9](https://github.com/hatiolab/operato/commit/40e67e9aced202151a4f2f8d7ef96ec840defc18))
+* **property-panel,input:** initial data and event handlers, quieter and scheme-aware ([9b8d1ca](https://github.com/hatiolab/operato/commit/9b8d1cadd0fe383c4186ed4a2c6eb8e69b96dbf2))
+* **property-panel:** data spread and event handler sections on fewer lines ([ab648f6](https://github.com/hatiolab/operato/commit/ab648f626c9c06d4f5201d76d346783504a88d57))
+### :bug: Bug Fix
+* **property-panel,input:** rule type keeps its choice on a new mapping; quieter filter chips ([678fb99](https://github.com/hatiolab/operato/commit/678fb99f28eb2ad76b28bfc0f3578d881eaf00af))
+* **property-panel:** event handler tabs match data-binding chips; restore row gap ([f80dbe4](https://github.com/hatiolab/operato/commit/f80dbe495227acc9cefcc88dd0b1cef9998e225d))
+### :rocket: New Features
+* **board,property-panel:** docked placement for the contextual bar; quieter effect/binding cards ([c6ad7bb](https://github.com/hatiolab/operato/commit/c6ad7bbcd4c20890f27eba1680322058da453110))
+* **data-grist,property-panel:** card reorder, quiet gutters, panel heading ([3ad5843](https://github.com/hatiolab/operato/commit/3ad5843287c75007b52bbf18d6117fcffdbd1a83))
+* **property-panel:** one start flow for data binding and event handlers; quiet Specific tab ([2059375](https://github.com/hatiolab/operato/commit/20593753327d169954f1913bbe531359f8bfc944))
+## [10.22.0](https://github.com/hatiolab/operato/compare/v10.21.0...v10.22.0) (2026-09-24)
+**Note:** Version bump only for package @operato/property-panel
 ## [10.20.0](https://github.com/hatiolab/operato/compare/v10.19.1...v10.20.0) (2026-09-21)
 **Note:** Version bump only for package @operato/property-panel

package/dist/src/ox-property-panel.d.ts CHANGED Viewed

@@ -21,6 +21,7 @@ export declare class OxPropertyPanel extends OxPropertyPanel_base {
     selected: Component[];
     specificProps: any;
     tabName: string | null;
+    heading: string;
     collapsed: boolean;
     fonts: any[];
     propertyEditor: any[];

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

@@ -24,6 +24,8 @@ let OxPropertyPanel = class OxPropertyPanel extends ScopedElementsMixin(LitEleme
         this.model = {};
         this.selected = [];
         this.tabName = 'shape';
+        /* Shown at the top of the shape tab while the root is selected - see PropertyShapes.heading. */
+        this.heading = '';
         this.collapsed = false;
         this.fonts = [];
         this.propertyEditor = [];
@@ -108,6 +110,7 @@ let OxPropertyPanel = class OxPropertyPanel extends ScopedElementsMixin(LitEleme
                 .value=${this.model}
                 .bounds=${this.bounds}
                 .selected=${this._settledSelected}
+                .heading=${this.heading}
                 ?active=${tabName == 'shape'}
               >
               </property-shape>
@@ -396,6 +399,14 @@ OxPropertyPanel.styles = [
         height: 40px;
         border-bottom: 2px solid transparent;
         cursor: pointer;
+        /* A row of seven glyphs reads lighter at 20px and a thin stroke; the pressed one gets the weight. */
+        --md-icon-size: 20px;
+        font-variation-settings: 'wght' 300, 'opsz' 20;
+      }
+      [tab] md-icon:hover {
+        color: var(--md-sys-color-on-surface);
       }
       /*
@@ -406,6 +417,7 @@ OxPropertyPanel.styles = [
         background-color: var(--property-sidebar-background-color, var(--md-sys-color-surface-container));
         color: var(--md-sys-color-on-surface);
         border-bottom-color: var(--md-sys-color-primary);
+        font-variation-settings: 'wght' 500, 'opsz' 20;
       }
       [content] {
@@ -440,6 +452,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], OxPropertyPanel.prototype, "tabName", void 0);
+__decorate([
+    property({ type: String })
+], OxPropertyPanel.prototype, "heading", void 0);
 __decorate([
     property({ type: Boolean })
 ], OxPropertyPanel.prototype, "collapsed", void 0);

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

	@@ -1 +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, 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 /\n * 속성 패널은 작업 표면이다. 브랜드 컨테이너(secondary-container)가 아니라 surface 계단을 쓴다.\n \n 이전 기본값이 secondary-container 였는데, 팔레트에 따라 중간 톤 브랜드색이 되어 패널 전체가\n * 그 색으로 물들었다(operato-board 다크: rgb(98 88 83) 탁한 갈색). 도구 패널이 브랜드색을\n * 크게 차지할 이유가 없고, 안에 놓이는 입력·트리·칩이 모두 그 위에서 대비를 잃는다.\n \n 경계선의 --md-sys-color-border 는 M3 에 없는 이름이라 항상 fallback #ccc 로 떨어졌다\n * (다크에서 밝은 선). 경계선 역할 토큰으로 바꾼다.\n /\n :host {\n border-left: 1px solid var(--md-sys-color-outline-variant);\n width: 270px;\n display: flex;\n flex-direction: column;\n background-color: var(--property-sidebar-background-color, var(--md-sys-color-surface-container));\n color: var(--property-sidebar-color, var(--md-sys-color-on-surface));\n user-select: none;\n\n --input-padding: var(--spacing-small);\n --label-font: var(--property-sidebar-fieldset-label, roboto);\n }\n\n /\n * 탭 줄은 패널보다 한 단 위 표면에 둔다. rgba(0,0,0,.08) 은 어두운 배경에서 보이지 않았고,\n * opacity: 0.85 는 아이콘까지 흐리게 만들었다.\n /\n [tab] {\n display: flex;\n background-color: var(--property-sidebar-tab-background, var(--md-sys-color-surface-container-high));\n border-bottom: 1px solid var(--md-sys-color-outline-variant);\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, var(--md-sys-color-on-surface-variant));\n height: 40px;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n }\n\n /\n * 선택 표시를 밑줄로 바꿨다. 이전에는 흰색/검정 1px 로 좌우를 둘러 입체감을 내려 했는데,\n * 두 색 모두 특정 모드에서만 보여서 다크에서는 왼쪽 흰 선만 남았다.\n /\n [tab] [selected] {\n background-color: var(--property-sidebar-background-color, var(--md-sys-color-surface-container));\n color: var(--md-sys-color-on-surface);\n border-bottom-color: var(--md-sys-color-primary);\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"]}
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, 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 /\n * 속성 패널은 작업 표면이다. 브랜드 컨테이너(secondary-container)가 아니라 surface 계단을 쓴다.\n \n 이전 기본값이 secondary-container 였는데, 팔레트에 따라 중간 톤 브랜드색이 되어 패널 전체가\n * 그 색으로 물들었다(operato-board 다크: rgb(98 88 83) 탁한 갈색). 도구 패널이 브랜드색을\n * 크게 차지할 이유가 없고, 안에 놓이는 입력·트리·칩이 모두 그 위에서 대비를 잃는다.\n \n 경계선의 --md-sys-color-border 는 M3 에 없는 이름이라 항상 fallback #ccc 로 떨어졌다\n * (다크에서 밝은 선). 경계선 역할 토큰으로 바꾼다.\n /\n :host {\n border-left: 1px solid var(--md-sys-color-outline-variant);\n width: 270px;\n display: flex;\n flex-direction: column;\n background-color: var(--property-sidebar-background-color, var(--md-sys-color-surface-container));\n color: var(--property-sidebar-color, var(--md-sys-color-on-surface));\n user-select: none;\n\n --input-padding: var(--spacing-small);\n --label-font: var(--property-sidebar-fieldset-label, roboto);\n }\n\n /\n * 탭 줄은 패널보다 한 단 위 표면에 둔다. rgba(0,0,0,.08) 은 어두운 배경에서 보이지 않았고,\n * opacity: 0.85 는 아이콘까지 흐리게 만들었다.\n /\n [tab] {\n display: flex;\n background-color: var(--property-sidebar-tab-background, var(--md-sys-color-surface-container-high));\n border-bottom: 1px solid var(--md-sys-color-outline-variant);\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, var(--md-sys-color-on-surface-variant));\n height: 40px;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n\n / A row of seven glyphs reads lighter at 20px and a thin stroke; the pressed one gets the weight. /\n --md-icon-size: 20px;\n font-variation-settings: 'wght' 300, 'opsz' 20;\n }\n\n [tab] md-icon:hover {\n color: var(--md-sys-color-on-surface);\n }\n\n /\n * 선택 표시를 밑줄로 바꿨다. 이전에는 흰색/검정 1px 로 좌우를 둘러 입체감을 내려 했는데,\n * 두 색 모두 특정 모드에서만 보여서 다크에서는 왼쪽 흰 선만 남았다.\n /\n [tab] [selected] {\n background-color: var(--property-sidebar-background-color, var(--md-sys-color-surface-container));\n color: var(--md-sys-color-on-surface);\n border-bottom-color: var(--md-sys-color-primary);\n font-variation-settings: 'wght' 500, 'opsz' 20;\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 / Shown at the top of the shape tab while the root is selected - see PropertyShapes.heading. /\n @property({ type: String }) heading: string = ''\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 .heading=${this.heading}\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/data-binding/data-binding-mapper.js CHANGED Viewed

@@ -139,8 +139,8 @@ export class DataBindingMapper extends LitElement {
             `)}
         </datalist>
-        <label> <ox-i18n msgid="label.rule-type">rule type</ox-i18n> </label>
-        <ox-buttons-radio .value=${mapping.rule} @change=${(e) => this._onChangeRule(e)}>
+        <label class="rule"> <ox-i18n msgid="label.rule-type">rule type</ox-i18n> </label>
+        <ox-buttons-radio class="rule" .value=${mapping.rule} @change=${(e) => this._onChangeRule(e)}>
           <div data-value="value"><ox-i18n msgid="label.value"></ox-i18n></div>
           <div data-value="map"><ox-i18n msgid="label.map"></ox-i18n></div>
           <div data-value="range"><ox-i18n msgid="label.range"></ox-i18n></div>
@@ -321,11 +321,24 @@ DataBindingMapper.styles = [
       :host {
         display: flex;
         overflow: hidden;
-        padding: 7px 0 0 0;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-        border-width: 0 1px 1px 1px;
-        padding: 4px;
-        line-height: 2;
+        padding: 0;
+        border: 0;
+      }
+      /* Four words on one line: the label gives up a little width so the choices need not wrap. */
+      .property-grid > label.rule {
+        grid-column: 1 / 8;
+      }
+      .property-grid > ox-buttons-radio.rule {
+        grid-column: 8 / -1;
+        flex-wrap: nowrap;
+        gap: 0;
+      }
+      .property-grid > ox-buttons-radio.rule > div {
+        padding: 0 5px;
+        font-size: 0.72rem;
       }
       [mapping-rule] {

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

	@@ -1 +1 @@
1	- {"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"]}
1	+ {"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: 0;\n border: 0;\n }\n\n /* Four words on one line: the label gives up a little width so the choices need not wrap. /\n .property-grid > label.rule {\n grid-column: 1 / 8;\n }\n\n .property-grid > ox-buttons-radio.rule {\n grid-column: 8 / -1;\n flex-wrap: nowrap;\n gap: 0;\n }\n\n .property-grid > ox-buttons-radio.rule > div {\n padding: 0 5px;\n font-size: 0.72rem;\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 class=\"rule\"> <ox-i18n msgid=\"label.rule-type\">rule type</ox-i18n> </label>\n <ox-buttons-radio class=\"rule\" .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.d.ts CHANGED Viewed

@@ -16,8 +16,11 @@ export declare class PropertyDataBinding extends PropertyDataBinding_base {
     value?: Properties;
     scene?: Scene;
     mappingIndex: number;
+    private _drafts;
+    private _draftsFor?;
     _afterRender?: Function | null;
     _dataExpanded: boolean;
+    private _composing;
     tabs: HTMLElement;
     tabNavLeftButton: HTMLElement;
     tabNavRightButton: HTMLElement;
@@ -29,6 +32,7 @@ export declare class PropertyDataBinding extends PropertyDataBinding_base {
         'data-binding-mapper': typeof DataBindingMapper;
     };
     render(): import("lit-html").TemplateResult<1>;
+    private _startMapping;
     _setMappingIndex(idx: number): void;
     _openBindingPopup(): void;
     _clearDataBindingMapper(): void;