npm - @operato/property-panel - Versions diffs - 10.0.0-beta.23 → 10.0.0-beta.25 - Mend

@operato/property-panel 10.0.0-beta.23 → 10.0.0-beta.25

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 (5) hide show

package/CHANGELOG.md +17 -0
package/dist/src/ox-property-panel.js +13 -28
package/dist/src/ox-property-panel.js.map +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +3 -3

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [10.0.0-beta.25](https://github.com/hatiolab/operato/compare/v10.0.0-beta.24...v10.0.0-beta.25) (2026-04-08)
+### :bug: Bug Fix
+* **property-panel:** group selection shows specific tab empty instead of full block ([cfe4a11](https://github.com/hatiolab/operato/commit/cfe4a11647928a301a3d19c80257887272ad619e))
+## [10.0.0-beta.24](https://github.com/hatiolab/operato/compare/v10.0.0-beta.23...v10.0.0-beta.24) (2026-04-06)
+**Note:** Version bump only for package @operato/property-panel
 ## [10.0.0-beta.23](https://github.com/hatiolab/operato/compare/v10.0.0-beta.22...v10.0.0-beta.23) (2026-04-06)

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

@@ -55,23 +55,6 @@ let OxPropertyPanel = class OxPropertyPanel extends ScopedElementsMixin(LitEleme
     }
     render() {
         var tabName = this.tabName ? this.tabName : 'shape';
-        const isGroupSelected = this.hasGroup(this.selected);
-        if (isGroupSelected) {
-            return html `
-        <div tab style="opacity:0.3;pointer-events:none;">
-          <md-icon name="shape">format_shapes</md-icon>
-          <md-icon name="style">palette</md-icon>
-          <md-icon name="threed">view_in_ar</md-icon>
-          <md-icon name="effect">movie_filter</md-icon>
-          <md-icon name="specific">tune</md-icon>
-          <md-icon name="data-binding">share</md-icon>
-          <md-icon name="inspector">visibility</md-icon>
-        </div>
-        <div content style="display:flex;align-items:center;justify-content:center;color:var(--md-sys-color-on-surface-variant,#666);font-size:12px;opacity:0.7;">
-          Group has no editable properties
-        </div>
-      `;
-        }
         return html `
       <div
         tab
@@ -138,17 +121,19 @@ let OxPropertyPanel = class OxPropertyPanel extends ScopedElementsMixin(LitEleme
               <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.selected}
+                    .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>

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 } 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 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 const isGroupSelected = this.hasGroup(this.selected)\n\n if (isGroupSelected) {\n return html`\n <div tab style=\"opacity:0.3;pointer-events:none;\">\n <md-icon name=\"shape\">format_shapes</md-icon>\n <md-icon name=\"style\">palette</md-icon>\n <md-icon name=\"threed\">view_in_ar</md-icon>\n <md-icon name=\"effect\">movie_filter</md-icon>\n <md-icon name=\"specific\">tune</md-icon>\n <md-icon name=\"data-binding\">share</md-icon>\n <md-icon name=\"inspector\">visibility</md-icon>\n </div>\n <div content style=\"display:flex;align-items:center;justify-content:center;color:var(--md-sys-color-on-surface-variant,#666);font-size:12px;opacity:0.7;\">\n Group has no editable properties\n </div>\n `\n }\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 <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.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.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.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\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 } 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 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.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.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.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: this.hasGroup(this.selected)\n ? html``\n : 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\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"]}