@operato/property-panel 10.0.0-beta.61 → 10.0.0-beta.62
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.
- package/CHANGELOG.md +23 -0
- package/dist/src/ox-property-panel.d.ts +10 -0
- package/dist/src/ox-property-panel.js +44 -6
- package/dist/src/ox-property-panel.js.map +1 -1
- package/dist/src/property-panel/inspector/inspector-controller.d.ts +44 -0
- package/dist/src/property-panel/inspector/inspector-controller.js +189 -0
- package/dist/src/property-panel/inspector/inspector-controller.js.map +1 -0
- package/dist/src/property-panel/inspector/inspector-group-view.d.ts +13 -0
- package/dist/src/property-panel/inspector/inspector-group-view.js +48 -0
- package/dist/src/property-panel/inspector/inspector-group-view.js.map +1 -0
- package/dist/src/property-panel/inspector/inspector-highlight.d.ts +7 -0
- package/dist/src/property-panel/inspector/inspector-highlight.js +25 -0
- package/dist/src/property-panel/inspector/inspector-highlight.js.map +1 -0
- package/dist/src/property-panel/inspector/inspector-model.d.ts +44 -0
- package/dist/src/property-panel/inspector/inspector-model.js +72 -0
- package/dist/src/property-panel/inspector/inspector-model.js.map +1 -0
- package/dist/src/property-panel/inspector/inspector-tree-view.d.ts +18 -0
- package/dist/src/property-panel/inspector/inspector-tree-view.js +61 -0
- package/dist/src/property-panel/inspector/inspector-tree-view.js.map +1 -0
- package/dist/src/property-panel/inspector/inspector.d.ts +17 -12
- package/dist/src/property-panel/inspector/inspector.js +251 -177
- package/dist/src/property-panel/inspector/inspector.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,29 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [10.0.0-beta.62](https://github.com/hatiolab/operato/compare/v10.0.0-beta.61...v10.0.0-beta.62) (2026-07-04)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :house: Code Refactoring
|
|
10
|
+
|
|
11
|
+
* **property-panel:** split scene inspector into model/controller/view (P0) ([35ce908](https://github.com/hatiolab/operato/commit/35ce908d46dde884d73af2aa0f7a0da2008f4526))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### :rocket: New Features
|
|
15
|
+
|
|
16
|
+
* **property-panel:** field-token search, highlight, per-group filter (P2) ([eea8bf1](https://github.com/hatiolab/operato/commit/eea8bf1744427e12072032fc2b285b9b7d4626af)), closes [#2](https://github.com/hatiolab/operato/issues/2)
|
|
17
|
+
* **property-panel:** group dim-out toggle drives scene focus filter (P2.5a) ([7d174ef](https://github.com/hatiolab/operato/commit/7d174efd22ac7af8d5369f57e0321dd9195eb037))
|
|
18
|
+
* **property-panel:** lock toggle, center-to zoom, reveal-scroll (P3) ([2bdcdf8](https://github.com/hatiolab/operato/commit/2bdcdf892991beceaa78accf22875df756b5ee13))
|
|
19
|
+
* **property-panel:** persist inspector view mode; drop per-group filter ([c20ffa6](https://github.com/hatiolab/operato/commit/c20ffa6fcc557bd6df17fd31c825f133d6e399a5))
|
|
20
|
+
* **property-panel:** type-group view + view toggle + group collapse (P1) ([0d561a7](https://github.com/hatiolab/operato/commit/0d561a75c66b6bdb0599badb3cd793f69ab0235d)), closes [#1](https://github.com/hatiolab/operato/issues/1)
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
### :bug: Bug Fix
|
|
24
|
+
|
|
25
|
+
* **property-panel:** stop shape/3d tab flicker on marquee/background click ([e79bbeb](https://github.com/hatiolab/operato/commit/e79bbeb351b59479b331ab09df322c2b041e0a81))
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
6
29
|
## [10.0.0-beta.61](https://github.com/hatiolab/operato/compare/v10.0.0-beta.60...v10.0.0-beta.61) (2026-06-25)
|
|
7
30
|
|
|
8
31
|
|
|
@@ -25,8 +25,18 @@ export declare class OxPropertyPanel extends OxPropertyPanel_base {
|
|
|
25
25
|
fonts: any[];
|
|
26
26
|
propertyEditor: any[];
|
|
27
27
|
propertyTarget: Component | null;
|
|
28
|
+
/** 렌더에 실제 반영되는(디바운스된) 선택 — 마퀴 드래그 중 번뜩임 방지용. */
|
|
29
|
+
private _settledSelected;
|
|
30
|
+
private _selectionDebounceTimer?;
|
|
28
31
|
firstUpdated(): void;
|
|
29
32
|
updated(change: PropertyValues<this>): void;
|
|
33
|
+
/**
|
|
34
|
+
* 선택 변경을 트레일링 디바운스해, 속성창(shape/3d 등)이 마퀴 드래그 중 매 mousemove 마다
|
|
35
|
+
* 재빌드되어 번뜩이는 것을 막는다. 드래그가 멈춘 뒤 최종 선택으로 한 번만 갱신한다.
|
|
36
|
+
* (드래그 중 render 는 재실행되나 _settledSelected 가 고정이라 동일 출력 → Lit no-op.)
|
|
37
|
+
*/
|
|
38
|
+
private _scheduleSelectedUpdate;
|
|
39
|
+
disconnectedCallback(): void;
|
|
30
40
|
static get scopedElements(): {
|
|
31
41
|
'property-shape': typeof PropertyShapes;
|
|
32
42
|
'property-style': typeof PropertyStyles;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import { __decorate } from "tslib";
|
|
5
5
|
import '@material/web/icon/icon.js';
|
|
6
6
|
import { css, html, LitElement } from 'lit';
|
|
7
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
7
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
|
8
8
|
import deepClone from 'lodash-es/cloneDeep.js';
|
|
9
9
|
import { ScopedElementsMixin } from '@open-wc/scoped-elements';
|
|
10
10
|
import { ScrollbarStyles } from '@operato/styles';
|
|
@@ -28,6 +28,8 @@ let OxPropertyPanel = class OxPropertyPanel extends ScopedElementsMixin(LitEleme
|
|
|
28
28
|
this.fonts = [];
|
|
29
29
|
this.propertyEditor = [];
|
|
30
30
|
this.propertyTarget = null;
|
|
31
|
+
/** 렌더에 실제 반영되는(디바운스된) 선택 — 마퀴 드래그 중 번뜩임 방지용. */
|
|
32
|
+
this._settledSelected = [];
|
|
31
33
|
}
|
|
32
34
|
firstUpdated() {
|
|
33
35
|
this.renderRoot.addEventListener('property-change', this.onPropertyChanged.bind(this));
|
|
@@ -35,9 +37,36 @@ let OxPropertyPanel = class OxPropertyPanel extends ScopedElementsMixin(LitEleme
|
|
|
35
37
|
}
|
|
36
38
|
updated(change) {
|
|
37
39
|
change.has('scene') && this.onSceneChanged();
|
|
38
|
-
change.has('selected') && this.
|
|
40
|
+
change.has('selected') && this._scheduleSelectedUpdate();
|
|
39
41
|
change.has('collapsed') && this.onCollapsed(this.collapsed);
|
|
40
42
|
}
|
|
43
|
+
/**
|
|
44
|
+
* 선택 변경을 트레일링 디바운스해, 속성창(shape/3d 등)이 마퀴 드래그 중 매 mousemove 마다
|
|
45
|
+
* 재빌드되어 번뜩이는 것을 막는다. 드래그가 멈춘 뒤 최종 선택으로 한 번만 갱신한다.
|
|
46
|
+
* (드래그 중 render 는 재실행되나 _settledSelected 가 고정이라 동일 출력 → Lit no-op.)
|
|
47
|
+
*/
|
|
48
|
+
_scheduleSelectedUpdate() {
|
|
49
|
+
if (this._selectionDebounceTimer)
|
|
50
|
+
clearTimeout(this._selectionDebounceTimer);
|
|
51
|
+
this._selectionDebounceTimer = setTimeout(() => {
|
|
52
|
+
this._selectionDebounceTimer = undefined;
|
|
53
|
+
const sel = this.selected;
|
|
54
|
+
// 배경 클릭 등으로 선택이 빈([]) 상태이고, 마퀴가 아니어서 곧 root(model-layer)로
|
|
55
|
+
// auto-select 될 상황이면 — 빈 상태를 렌더하지 않고(빈→root 깜박임 방지) auto-select 만
|
|
56
|
+
// 유발한다. 결과로 생기는 [model-layer] 가 다음 사이클에서 _settledSelected 를 갱신한다.
|
|
57
|
+
if (sel.length === 0 && this.scene && !this.scene.isSelecting) {
|
|
58
|
+
this.onSelectedChanged(sel);
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
this._settledSelected = sel;
|
|
62
|
+
this.onSelectedChanged(sel);
|
|
63
|
+
}, 80);
|
|
64
|
+
}
|
|
65
|
+
disconnectedCallback() {
|
|
66
|
+
super.disconnectedCallback();
|
|
67
|
+
if (this._selectionDebounceTimer)
|
|
68
|
+
clearTimeout(this._selectionDebounceTimer);
|
|
69
|
+
}
|
|
41
70
|
static get scopedElements() {
|
|
42
71
|
return {
|
|
43
72
|
'property-shape': PropertyShapes,
|
|
@@ -78,7 +107,7 @@ let OxPropertyPanel = class OxPropertyPanel extends ScopedElementsMixin(LitEleme
|
|
|
78
107
|
<property-shape
|
|
79
108
|
.value=${this.model}
|
|
80
109
|
.bounds=${this.bounds}
|
|
81
|
-
.selected=${this.
|
|
110
|
+
.selected=${this._settledSelected}
|
|
82
111
|
?active=${tabName == 'shape'}
|
|
83
112
|
>
|
|
84
113
|
</property-shape>
|
|
@@ -86,7 +115,7 @@ let OxPropertyPanel = class OxPropertyPanel extends ScopedElementsMixin(LitEleme
|
|
|
86
115
|
style: html `
|
|
87
116
|
<property-style
|
|
88
117
|
.value=${this.model}
|
|
89
|
-
.selected=${this.
|
|
118
|
+
.selected=${this._settledSelected}
|
|
90
119
|
.fonts=${this.fonts}
|
|
91
120
|
?active=${tabName == 'style'}
|
|
92
121
|
?is-line=${this.isLine(this.selected)}
|
|
@@ -112,7 +141,7 @@ let OxPropertyPanel = class OxPropertyPanel extends ScopedElementsMixin(LitEleme
|
|
|
112
141
|
<property-3d
|
|
113
142
|
.value=${this.model}
|
|
114
143
|
.bounds=${this.bounds}
|
|
115
|
-
.selected=${this.
|
|
144
|
+
.selected=${this._settledSelected}
|
|
116
145
|
?active=${tabName == 'threed'}
|
|
117
146
|
>
|
|
118
147
|
</property-3d>
|
|
@@ -127,7 +156,7 @@ let OxPropertyPanel = class OxPropertyPanel extends ScopedElementsMixin(LitEleme
|
|
|
127
156
|
<property-specific
|
|
128
157
|
.value=${this.model}
|
|
129
158
|
.scene=${this.scene}
|
|
130
|
-
.selected=${this.
|
|
159
|
+
.selected=${this._settledSelected}
|
|
131
160
|
.props=${this.specificProps}
|
|
132
161
|
.propertyEditor=${this.propertyEditor}
|
|
133
162
|
?active=${tabName == 'specific'}
|
|
@@ -216,6 +245,12 @@ let OxPropertyPanel = class OxPropertyPanel extends ScopedElementsMixin(LitEleme
|
|
|
216
245
|
}
|
|
217
246
|
}
|
|
218
247
|
setPropertyTargetAsDefault() {
|
|
248
|
+
var _a;
|
|
249
|
+
// 마퀴(영역) 선택 드래그 중에는 root(model-layer) auto-select 를 하지 않는다.
|
|
250
|
+
// 마퀴가 만드는 transient 빈 선택([])과 auto-select([model-layer]) 가 싸워
|
|
251
|
+
// 속성창(shape/3d)이 번뜩이는 것을 막는다. 드래그 종료 후에만 scene 기본속성 표시.
|
|
252
|
+
if ((_a = this.scene) === null || _a === void 0 ? void 0 : _a.isSelecting)
|
|
253
|
+
return;
|
|
219
254
|
if (!this.scene) {
|
|
220
255
|
this.setPropertyTarget(null);
|
|
221
256
|
this.specificProps = [];
|
|
@@ -395,6 +430,9 @@ __decorate([
|
|
|
395
430
|
__decorate([
|
|
396
431
|
property({ type: Array })
|
|
397
432
|
], OxPropertyPanel.prototype, "propertyEditor", void 0);
|
|
433
|
+
__decorate([
|
|
434
|
+
state()
|
|
435
|
+
], OxPropertyPanel.prototype, "_settledSelected", void 0);
|
|
398
436
|
OxPropertyPanel = __decorate([
|
|
399
437
|
customElement('ox-property-panel')
|
|
400
438
|
], OxPropertyPanel);
|
|
@@ -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 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\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 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 :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"]}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { Component, Scene } from '@hatiolab/things-scene';
|
|
2
|
+
import { InspectorIndex } from './inspector-model.js';
|
|
3
|
+
export declare class InspectorController {
|
|
4
|
+
private _scene?;
|
|
5
|
+
private _extendedMap;
|
|
6
|
+
/** 타입 그룹 뷰의 펼침 상태 — 그룹 키(type)는 안정적이라 Set 으로 관리. 기본 전부 접힘. */
|
|
7
|
+
private _expandedGroups;
|
|
8
|
+
/** 모델링 포커스 dim 처리된 그룹(타입) 집합 — transient(비영속). */
|
|
9
|
+
private _dimmedTypes;
|
|
10
|
+
private _index?;
|
|
11
|
+
private _onChange?;
|
|
12
|
+
/** scene 에 바인딩 — 이전 바인딩은 해제한다. onChange 는 재렌더 요청 콜백. */
|
|
13
|
+
bind(scene: Scene | undefined, onChange: () => void): void;
|
|
14
|
+
unbind(): void;
|
|
15
|
+
get scene(): Scene | undefined;
|
|
16
|
+
get selected(): Component[];
|
|
17
|
+
/** 캐시된 모델 인덱스 — 없으면 build. execute/undo/redo 시 무효화. */
|
|
18
|
+
get index(): InspectorIndex | undefined;
|
|
19
|
+
private _invalidateAndRefresh;
|
|
20
|
+
/** 선택된 컴포넌트의 조상을 펼치고 재렌더 요청. */
|
|
21
|
+
private _refresh;
|
|
22
|
+
isExtended(component: Component): boolean;
|
|
23
|
+
toggleExtended(component: Component): void;
|
|
24
|
+
/** 트리 노드 핸들(펼침/접힘/공백) 클래스. */
|
|
25
|
+
nodeHandleClass(component: Component): string;
|
|
26
|
+
isGroupExpanded(type: string): boolean;
|
|
27
|
+
toggleGroup(type: string): void;
|
|
28
|
+
/** 모든 그룹 접기 — "그룹 레벨까지만 펼침"(헤더만 표시). */
|
|
29
|
+
collapseAllGroups(): void;
|
|
30
|
+
/** 모든 그룹 펼치기. */
|
|
31
|
+
expandAllGroups(types: string[]): void;
|
|
32
|
+
isTypeDimmed(type: string): boolean;
|
|
33
|
+
/** 그룹(타입) dim-out 토글 → scene.focusFilter 재설정(편집 모드에서 캔버스 dim + pick 제외). */
|
|
34
|
+
toggleTypeDim(type: string): void;
|
|
35
|
+
private _applyFocusFilter;
|
|
36
|
+
/** 개별 컴포넌트 hidden(영구 모델 속성) 토글 — 기존 eye 동작. */
|
|
37
|
+
toggleHidden(component: Component): void;
|
|
38
|
+
/** 개별 컴포넌트 locked(영구 모델 속성) 토글. */
|
|
39
|
+
toggleLocked(component: Component): void;
|
|
40
|
+
/** 캔버스를 해당 컴포넌트로 센터 이동. */
|
|
41
|
+
centerTo(component: Component): void;
|
|
42
|
+
/** 선택 — append 시 토글식 다중 선택. */
|
|
43
|
+
select(component: Component, append?: boolean): void;
|
|
44
|
+
}
|
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
import { buildInspectorIndex } from './inspector-model.js';
|
|
2
|
+
export class InspectorController {
|
|
3
|
+
constructor() {
|
|
4
|
+
this._extendedMap = new WeakMap();
|
|
5
|
+
/** 타입 그룹 뷰의 펼침 상태 — 그룹 키(type)는 안정적이라 Set 으로 관리. 기본 전부 접힘. */
|
|
6
|
+
this._expandedGroups = new Set();
|
|
7
|
+
/** 모델링 포커스 dim 처리된 그룹(타입) 집합 — transient(비영속). */
|
|
8
|
+
this._dimmedTypes = new Set();
|
|
9
|
+
this._invalidateAndRefresh = () => {
|
|
10
|
+
this._index = undefined;
|
|
11
|
+
this._refresh();
|
|
12
|
+
};
|
|
13
|
+
/** 선택된 컴포넌트의 조상을 펼치고 재렌더 요청. */
|
|
14
|
+
this._refresh = () => {
|
|
15
|
+
var _a, _b;
|
|
16
|
+
const selected = ((_a = this._scene) === null || _a === void 0 ? void 0 : _a.selected) || [];
|
|
17
|
+
selected.forEach((component) => {
|
|
18
|
+
let parent = component.parent;
|
|
19
|
+
while (parent && !this._extendedMap.get(parent)) {
|
|
20
|
+
this._extendedMap.set(parent, true);
|
|
21
|
+
parent = parent.parent;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
(_b = this._onChange) === null || _b === void 0 ? void 0 : _b.call(this);
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
/** scene 에 바인딩 — 이전 바인딩은 해제한다. onChange 는 재렌더 요청 콜백. */
|
|
28
|
+
bind(scene, onChange) {
|
|
29
|
+
this.unbind();
|
|
30
|
+
this._scene = scene;
|
|
31
|
+
this._onChange = onChange;
|
|
32
|
+
this._index = undefined;
|
|
33
|
+
if (scene && scene.root) {
|
|
34
|
+
scene.on('selected', this._refresh, this);
|
|
35
|
+
scene.on('execute', this._invalidateAndRefresh, this);
|
|
36
|
+
scene.on('undo', this._invalidateAndRefresh, this);
|
|
37
|
+
scene.on('redo', this._invalidateAndRefresh, this);
|
|
38
|
+
this._refresh();
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
unbind() {
|
|
42
|
+
const scene = this._scene;
|
|
43
|
+
if (scene) {
|
|
44
|
+
// 포커스 dim 은 transient — 인스펙터가 떠나면 캔버스 dim 해제.
|
|
45
|
+
scene.focusFilter = undefined;
|
|
46
|
+
scene.off('selected', undefined, this);
|
|
47
|
+
scene.off('execute', undefined, this);
|
|
48
|
+
scene.off('undo', undefined, this);
|
|
49
|
+
scene.off('redo', undefined, this);
|
|
50
|
+
}
|
|
51
|
+
this._scene = undefined;
|
|
52
|
+
this._index = undefined;
|
|
53
|
+
this._extendedMap = new WeakMap();
|
|
54
|
+
this._dimmedTypes.clear();
|
|
55
|
+
}
|
|
56
|
+
get scene() {
|
|
57
|
+
return this._scene;
|
|
58
|
+
}
|
|
59
|
+
get selected() {
|
|
60
|
+
var _a;
|
|
61
|
+
return ((_a = this._scene) === null || _a === void 0 ? void 0 : _a.selected) || [];
|
|
62
|
+
}
|
|
63
|
+
/** 캐시된 모델 인덱스 — 없으면 build. execute/undo/redo 시 무효화. */
|
|
64
|
+
get index() {
|
|
65
|
+
var _a;
|
|
66
|
+
if (!((_a = this._scene) === null || _a === void 0 ? void 0 : _a.root))
|
|
67
|
+
return undefined;
|
|
68
|
+
if (!this._index)
|
|
69
|
+
this._index = buildInspectorIndex(this._scene.root);
|
|
70
|
+
return this._index;
|
|
71
|
+
}
|
|
72
|
+
isExtended(component) {
|
|
73
|
+
return !!this._extendedMap.get(component);
|
|
74
|
+
}
|
|
75
|
+
toggleExtended(component) {
|
|
76
|
+
var _a;
|
|
77
|
+
if (this.isExtended(component)) {
|
|
78
|
+
this._extendedMap.delete(component);
|
|
79
|
+
}
|
|
80
|
+
else {
|
|
81
|
+
this._extendedMap.set(component, true);
|
|
82
|
+
}
|
|
83
|
+
(_a = this._onChange) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
84
|
+
}
|
|
85
|
+
/** 트리 노드 핸들(펼침/접힘/공백) 클래스. */
|
|
86
|
+
nodeHandleClass(component) {
|
|
87
|
+
if (component.isContainer() && component.components.length > 0) {
|
|
88
|
+
return this.isExtended(component) ? 'extended' : 'collapsed';
|
|
89
|
+
}
|
|
90
|
+
return 'collapsespace';
|
|
91
|
+
}
|
|
92
|
+
// ── 타입 그룹 뷰 확장 상태 ──
|
|
93
|
+
isGroupExpanded(type) {
|
|
94
|
+
return this._expandedGroups.has(type);
|
|
95
|
+
}
|
|
96
|
+
toggleGroup(type) {
|
|
97
|
+
var _a;
|
|
98
|
+
if (this._expandedGroups.has(type)) {
|
|
99
|
+
this._expandedGroups.delete(type);
|
|
100
|
+
}
|
|
101
|
+
else {
|
|
102
|
+
this._expandedGroups.add(type);
|
|
103
|
+
}
|
|
104
|
+
(_a = this._onChange) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
105
|
+
}
|
|
106
|
+
/** 모든 그룹 접기 — "그룹 레벨까지만 펼침"(헤더만 표시). */
|
|
107
|
+
collapseAllGroups() {
|
|
108
|
+
var _a;
|
|
109
|
+
if (this._expandedGroups.size === 0)
|
|
110
|
+
return;
|
|
111
|
+
this._expandedGroups.clear();
|
|
112
|
+
(_a = this._onChange) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
113
|
+
}
|
|
114
|
+
/** 모든 그룹 펼치기. */
|
|
115
|
+
expandAllGroups(types) {
|
|
116
|
+
var _a;
|
|
117
|
+
types.forEach(t => this._expandedGroups.add(t));
|
|
118
|
+
(_a = this._onChange) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
119
|
+
}
|
|
120
|
+
// ── 모델링 포커스 dim (그룹 단위, transient) ──
|
|
121
|
+
isTypeDimmed(type) {
|
|
122
|
+
return this._dimmedTypes.has(type);
|
|
123
|
+
}
|
|
124
|
+
/** 그룹(타입) dim-out 토글 → scene.focusFilter 재설정(편집 모드에서 캔버스 dim + pick 제외). */
|
|
125
|
+
toggleTypeDim(type) {
|
|
126
|
+
var _a;
|
|
127
|
+
if (this._dimmedTypes.has(type))
|
|
128
|
+
this._dimmedTypes.delete(type);
|
|
129
|
+
else
|
|
130
|
+
this._dimmedTypes.add(type);
|
|
131
|
+
this._applyFocusFilter();
|
|
132
|
+
(_a = this._onChange) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
133
|
+
}
|
|
134
|
+
_applyFocusFilter() {
|
|
135
|
+
if (!this._scene)
|
|
136
|
+
return;
|
|
137
|
+
if (this._dimmedTypes.size === 0) {
|
|
138
|
+
this._scene.focusFilter = undefined;
|
|
139
|
+
}
|
|
140
|
+
else {
|
|
141
|
+
const dimmed = this._dimmedTypes;
|
|
142
|
+
// focus(정상) = dim 집합에 없는 타입. 불일치(=dim 그룹)만 캔버스에서 흐림 + pick 제외.
|
|
143
|
+
this._scene.focusFilter = (component) => !dimmed.has(component.state.type);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
/** 개별 컴포넌트 hidden(영구 모델 속성) 토글 — 기존 eye 동작. */
|
|
147
|
+
toggleHidden(component) {
|
|
148
|
+
var _a;
|
|
149
|
+
component.set('hidden', !component.get('hidden'));
|
|
150
|
+
(_a = this._onChange) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
151
|
+
}
|
|
152
|
+
/** 개별 컴포넌트 locked(영구 모델 속성) 토글. */
|
|
153
|
+
toggleLocked(component) {
|
|
154
|
+
var _a;
|
|
155
|
+
component.set('locked', !component.get('locked'));
|
|
156
|
+
(_a = this._onChange) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
157
|
+
}
|
|
158
|
+
/** 캔버스를 해당 컴포넌트로 센터 이동. */
|
|
159
|
+
centerTo(component) {
|
|
160
|
+
var _a, _b;
|
|
161
|
+
;
|
|
162
|
+
(_b = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.centerTo) === null || _b === void 0 ? void 0 : _b.call(_a, component, true);
|
|
163
|
+
}
|
|
164
|
+
/** 선택 — append 시 토글식 다중 선택. */
|
|
165
|
+
select(component, append = false) {
|
|
166
|
+
var _a;
|
|
167
|
+
const scene = this._scene;
|
|
168
|
+
if (!scene)
|
|
169
|
+
return;
|
|
170
|
+
const selected = scene.selected;
|
|
171
|
+
if (append) {
|
|
172
|
+
const idx = selected.findIndex((s) => s === component);
|
|
173
|
+
if (idx != -1) {
|
|
174
|
+
selected.splice(idx, 1);
|
|
175
|
+
scene.selected = [...selected];
|
|
176
|
+
}
|
|
177
|
+
else {
|
|
178
|
+
scene.selected = [...selected, component];
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
else {
|
|
182
|
+
scene.selected = [component];
|
|
183
|
+
}
|
|
184
|
+
component.trigger('reactionreset');
|
|
185
|
+
component.trigger('reaction');
|
|
186
|
+
(_a = this._onChange) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
//# sourceMappingURL=inspector-controller.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"inspector-controller.js","sourceRoot":"","sources":["../../../../src/property-panel/inspector/inspector-controller.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n *\n * Scene Inspector 컨트롤러.\n *\n * scene 과의 상호작용(구독·선택·가시성·확장 상태)과 모델 인덱스 캐시를 한 곳에 응집한다.\n * DOM 을 직접 다루지 않으며, 뷰 렌더러(트리/그룹)가 공유한다. 상태 변경 시 onChange 로\n * 호스트(LitElement)의 재렌더를 요청한다.\n */\nimport { Component, Container, Scene } from '@hatiolab/things-scene'\n\nimport { buildInspectorIndex, InspectorIndex } from './inspector-model.js'\n\nexport class InspectorController {\n private _scene?: Scene\n private _extendedMap = new WeakMap<Component, boolean>()\n /** 타입 그룹 뷰의 펼침 상태 — 그룹 키(type)는 안정적이라 Set 으로 관리. 기본 전부 접힘. */\n private _expandedGroups = new Set<string>()\n /** 모델링 포커스 dim 처리된 그룹(타입) 집합 — transient(비영속). */\n private _dimmedTypes = new Set<string>()\n private _index?: InspectorIndex\n private _onChange?: () => void\n\n /** scene 에 바인딩 — 이전 바인딩은 해제한다. onChange 는 재렌더 요청 콜백. */\n bind(scene: Scene | undefined, onChange: () => void): void {\n this.unbind()\n this._scene = scene\n this._onChange = onChange\n this._index = undefined\n\n if (scene && scene.root) {\n scene.on('selected', this._refresh, this)\n scene.on('execute', this._invalidateAndRefresh, this)\n scene.on('undo', this._invalidateAndRefresh, this)\n scene.on('redo', this._invalidateAndRefresh, this)\n this._refresh()\n }\n }\n\n unbind(): void {\n const scene = this._scene\n if (scene) {\n // 포커스 dim 은 transient — 인스펙터가 떠나면 캔버스 dim 해제.\n scene.focusFilter = undefined\n scene.off('selected', undefined, this)\n scene.off('execute', undefined, this)\n scene.off('undo', undefined, this)\n scene.off('redo', undefined, this)\n }\n this._scene = undefined\n this._index = undefined\n this._extendedMap = new WeakMap()\n this._dimmedTypes.clear()\n }\n\n get scene(): Scene | undefined {\n return this._scene\n }\n\n get selected(): Component[] {\n return this._scene?.selected || []\n }\n\n /** 캐시된 모델 인덱스 — 없으면 build. execute/undo/redo 시 무효화. */\n get index(): InspectorIndex | undefined {\n if (!this._scene?.root) return undefined\n if (!this._index) this._index = buildInspectorIndex(this._scene.root)\n return this._index\n }\n\n private _invalidateAndRefresh = (): void => {\n this._index = undefined\n this._refresh()\n }\n\n /** 선택된 컴포넌트의 조상을 펼치고 재렌더 요청. */\n private _refresh = (): void => {\n const selected = this._scene?.selected || []\n selected.forEach((component: Component) => {\n let parent = component.parent\n while (parent && !this._extendedMap.get(parent)) {\n this._extendedMap.set(parent, true)\n parent = parent.parent\n }\n })\n this._onChange?.()\n }\n\n isExtended(component: Component): boolean {\n return !!this._extendedMap.get(component)\n }\n\n toggleExtended(component: Component): void {\n if (this.isExtended(component)) {\n this._extendedMap.delete(component)\n } else {\n this._extendedMap.set(component, true)\n }\n this._onChange?.()\n }\n\n /** 트리 노드 핸들(펼침/접힘/공백) 클래스. */\n nodeHandleClass(component: Component): string {\n if (component.isContainer() && (component as Container).components.length > 0) {\n return this.isExtended(component) ? 'extended' : 'collapsed'\n }\n return 'collapsespace'\n }\n\n // ── 타입 그룹 뷰 확장 상태 ──\n\n isGroupExpanded(type: string): boolean {\n return this._expandedGroups.has(type)\n }\n\n toggleGroup(type: string): void {\n if (this._expandedGroups.has(type)) {\n this._expandedGroups.delete(type)\n } else {\n this._expandedGroups.add(type)\n }\n this._onChange?.()\n }\n\n /** 모든 그룹 접기 — \"그룹 레벨까지만 펼침\"(헤더만 표시). */\n collapseAllGroups(): void {\n if (this._expandedGroups.size === 0) return\n this._expandedGroups.clear()\n this._onChange?.()\n }\n\n /** 모든 그룹 펼치기. */\n expandAllGroups(types: string[]): void {\n types.forEach(t => this._expandedGroups.add(t))\n this._onChange?.()\n }\n\n // ── 모델링 포커스 dim (그룹 단위, transient) ──\n\n isTypeDimmed(type: string): boolean {\n return this._dimmedTypes.has(type)\n }\n\n /** 그룹(타입) dim-out 토글 → scene.focusFilter 재설정(편집 모드에서 캔버스 dim + pick 제외). */\n toggleTypeDim(type: string): void {\n if (this._dimmedTypes.has(type)) this._dimmedTypes.delete(type)\n else this._dimmedTypes.add(type)\n this._applyFocusFilter()\n this._onChange?.()\n }\n\n private _applyFocusFilter(): void {\n if (!this._scene) return\n if (this._dimmedTypes.size === 0) {\n this._scene.focusFilter = undefined\n } else {\n const dimmed = this._dimmedTypes\n // focus(정상) = dim 집합에 없는 타입. 불일치(=dim 그룹)만 캔버스에서 흐림 + pick 제외.\n this._scene.focusFilter = (component: Component) => !dimmed.has(component.state.type)\n }\n }\n\n /** 개별 컴포넌트 hidden(영구 모델 속성) 토글 — 기존 eye 동작. */\n toggleHidden(component: Component): void {\n component.set('hidden', !component.get('hidden'))\n this._onChange?.()\n }\n\n /** 개별 컴포넌트 locked(영구 모델 속성) 토글. */\n toggleLocked(component: Component): void {\n component.set('locked', !component.get('locked'))\n this._onChange?.()\n }\n\n /** 캔버스를 해당 컴포넌트로 센터 이동. */\n centerTo(component: Component): void {\n ;(this._scene as unknown as { centerTo?: (c: Component, animated?: boolean) => void })?.centerTo?.(component, true)\n }\n\n /** 선택 — append 시 토글식 다중 선택. */\n select(component: Component, append = false): void {\n const scene = this._scene\n if (!scene) return\n\n const selected = scene.selected\n if (append) {\n const idx = selected.findIndex((s: Component) => s === component)\n if (idx != -1) {\n selected.splice(idx, 1)\n scene.selected = [...selected]\n } else {\n scene.selected = [...selected, component]\n }\n } else {\n scene.selected = [component]\n }\n\n component.trigger('reactionreset')\n component.trigger('reaction')\n\n this._onChange?.()\n }\n}\n"]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Component } from '@hatiolab/things-scene';
|
|
2
|
+
import { TemplateResult } from 'lit';
|
|
3
|
+
import { InspectorIndex, SearchTerm } from './inspector-model.js';
|
|
4
|
+
export interface GroupViewContext {
|
|
5
|
+
selected: Component[];
|
|
6
|
+
/** 파싱된 전역 검색어(AND). */
|
|
7
|
+
terms: SearchTerm[];
|
|
8
|
+
isGroupExpanded: (type: string) => boolean;
|
|
9
|
+
/** 그룹(타입)이 모델링 포커스 dim 처리됐는지. */
|
|
10
|
+
isTypeDimmed: (type: string) => boolean;
|
|
11
|
+
}
|
|
12
|
+
/** 타입 그룹 뷰 전체 렌더 — 타입명 오름차순. */
|
|
13
|
+
export declare function renderInspectorGroupView(index: InspectorIndex | undefined, ctx: GroupViewContext): TemplateResult;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { html, nothing } from 'lit';
|
|
2
|
+
import { matchesQuery } from './inspector-model.js';
|
|
3
|
+
import { highlight } from './inspector-highlight.js';
|
|
4
|
+
function renderMember(entry, terms, selected) {
|
|
5
|
+
const component = entry.component;
|
|
6
|
+
return html `
|
|
7
|
+
<div class="component group-member" ?selected=${selected.indexOf(component) > -1} .component=${component}>
|
|
8
|
+
<span>
|
|
9
|
+
<md-icon class="eye">${component.get('hidden') ? 'visibility_off' : 'visibility'}</md-icon>
|
|
10
|
+
<md-icon class="lock" ?locked=${!!component.get('locked')}
|
|
11
|
+
>${component.get('locked') ? 'lock' : 'lock_open'}</md-icon
|
|
12
|
+
>
|
|
13
|
+
<pre>${' '}</pre>
|
|
14
|
+
${entry.label
|
|
15
|
+
? html `<span class="name">${highlight(entry.label, terms)}</span>`
|
|
16
|
+
: html `<span class="muted">(no id)</span>`}
|
|
17
|
+
</span>
|
|
18
|
+
</div>
|
|
19
|
+
`;
|
|
20
|
+
}
|
|
21
|
+
function renderGroup(type, entries, ctx) {
|
|
22
|
+
// 전역 검색으로 멤버를 좁히고, 매치 없는 그룹은 숨긴다.
|
|
23
|
+
const members = ctx.terms.length ? entries.filter(e => matchesQuery(e.component, ctx.terms)) : entries;
|
|
24
|
+
if (ctx.terms.length && members.length === 0)
|
|
25
|
+
return html ``;
|
|
26
|
+
const expanded = ctx.isGroupExpanded(type);
|
|
27
|
+
return html `
|
|
28
|
+
<div class="group">
|
|
29
|
+
<div class="group-header" data-group-type=${type} ?dimmed=${ctx.isTypeDimmed(type)}>
|
|
30
|
+
<span class=${expanded ? 'extended' : 'collapsed'}> </span>
|
|
31
|
+
<span class="group-type">${highlight(type, ctx.terms)}</span>
|
|
32
|
+
<span class="group-count">${members.length}</span>
|
|
33
|
+
<md-icon class="group-dim" title="Dim this group in canvas (modeling focus)"
|
|
34
|
+
>${ctx.isTypeDimmed(type) ? 'blur_on' : 'blur_off'}</md-icon
|
|
35
|
+
>
|
|
36
|
+
</div>
|
|
37
|
+
${expanded ? members.map(entry => renderMember(entry, ctx.terms, ctx.selected)) : nothing}
|
|
38
|
+
</div>
|
|
39
|
+
`;
|
|
40
|
+
}
|
|
41
|
+
/** 타입 그룹 뷰 전체 렌더 — 타입명 오름차순. */
|
|
42
|
+
export function renderInspectorGroupView(index, ctx) {
|
|
43
|
+
if (!index)
|
|
44
|
+
return html ``;
|
|
45
|
+
const types = [...index.byType.keys()].sort((a, b) => a.localeCompare(b));
|
|
46
|
+
return html `${types.map(type => renderGroup(type, index.byType.get(type), ctx))}`;
|
|
47
|
+
}
|
|
48
|
+
//# sourceMappingURL=inspector-group-view.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"inspector-group-view.js","sourceRoot":"","sources":["../../../../src/property-panel/inspector/inspector-group-view.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAA;AAEnD,OAAO,EAA8B,YAAY,EAAc,MAAM,sBAAsB,CAAA;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAWpD,SAAS,YAAY,CAAC,KAAiB,EAAE,KAAmB,EAAE,QAAqB;IACjF,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAA;IACjC,OAAO,IAAI,CAAA;oDACuC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,eAAe,SAAS;;+BAE7E,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,YAAY;wCAChD,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC;aACpD,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW;;eAE5C,IAAI;UACT,KAAK,CAAC,KAAK;QACX,CAAC,CAAC,IAAI,CAAA,sBAAsB,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS;QAClE,CAAC,CAAC,IAAI,CAAA,oCAAoC;;;GAGjD,CAAA;AACH,CAAC;AAED,SAAS,WAAW,CAAC,IAAY,EAAE,OAAqB,EAAE,GAAqB;IAC7E,kCAAkC;IAClC,MAAM,OAAO,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;IACtG,IAAI,GAAG,CAAC,KAAK,CAAC,MAAM,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA,EAAE,CAAA;IAE3D,MAAM,QAAQ,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;IAE1C,OAAO,IAAI,CAAA;;kDAEqC,IAAI,YAAY,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC;sBAClE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW;mCACtB,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC;oCACzB,OAAO,CAAC,MAAM;;aAErC,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU;;;QAGpD,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO;;GAE5F,CAAA;AACH,CAAC;AAED,gCAAgC;AAChC,MAAM,UAAU,wBAAwB,CAAC,KAAiC,EAAE,GAAqB;IAC/F,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAA,EAAE,CAAA;IACzB,MAAM,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAA;IACzE,OAAO,IAAI,CAAA,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAE,EAAE,GAAG,CAAC,CAAC,EAAE,CAAA;AACpF,CAAC","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n *\n * Scene Inspector 타입 그룹 뷰 렌더러.\n *\n * 계층을 무시하고 `state.type` 기준 **논리 버킷**(= \"컴포넌트 그룹\")으로 재편성해 렌더한다.\n * 그룹 헤더(타입 + 개수 + 펼침/접힘 + dim-out 토글)와 멤버 행(개별 컴포넌트)으로 구성.\n * SceneInspector shadow root 에 직접 렌더 — 멤버 행은 트리 뷰와 동일한 `.component`/eye 규약을\n * 재사용해 기존 클릭 위임(선택·hidden·lock 토글)을 그대로 쓴다. 그룹 헤더 토글은 `data-group-type` 로 처리.\n *\n * (그룹별 필터는 전역 검색의 필드 토큰 `type:...` 과 중복이라 제거됨.)\n */\nimport { Component } from '@hatiolab/things-scene'\nimport { html, nothing, TemplateResult } from 'lit'\n\nimport { IndexEntry, InspectorIndex, matchesQuery, SearchTerm } from './inspector-model.js'\nimport { highlight } from './inspector-highlight.js'\n\nexport interface GroupViewContext {\n selected: Component[]\n /** 파싱된 전역 검색어(AND). */\n terms: SearchTerm[]\n isGroupExpanded: (type: string) => boolean\n /** 그룹(타입)이 모델링 포커스 dim 처리됐는지. */\n isTypeDimmed: (type: string) => boolean\n}\n\nfunction renderMember(entry: IndexEntry, terms: SearchTerm[], selected: Component[]): TemplateResult {\n const component = entry.component\n return html`\n <div class=\"component group-member\" ?selected=${selected.indexOf(component) > -1} .component=${component}>\n <span>\n <md-icon class=\"eye\">${component.get('hidden') ? 'visibility_off' : 'visibility'}</md-icon>\n <md-icon class=\"lock\" ?locked=${!!component.get('locked')}\n >${component.get('locked') ? 'lock' : 'lock_open'}</md-icon\n >\n <pre>${' '}</pre>\n ${entry.label\n ? html`<span class=\"name\">${highlight(entry.label, terms)}</span>`\n : html`<span class=\"muted\">(no id)</span>`}\n </span>\n </div>\n `\n}\n\nfunction renderGroup(type: string, entries: IndexEntry[], ctx: GroupViewContext): TemplateResult {\n // 전역 검색으로 멤버를 좁히고, 매치 없는 그룹은 숨긴다.\n const members = ctx.terms.length ? entries.filter(e => matchesQuery(e.component, ctx.terms)) : entries\n if (ctx.terms.length && members.length === 0) return html``\n\n const expanded = ctx.isGroupExpanded(type)\n\n return html`\n <div class=\"group\">\n <div class=\"group-header\" data-group-type=${type} ?dimmed=${ctx.isTypeDimmed(type)}>\n <span class=${expanded ? 'extended' : 'collapsed'}> </span>\n <span class=\"group-type\">${highlight(type, ctx.terms)}</span>\n <span class=\"group-count\">${members.length}</span>\n <md-icon class=\"group-dim\" title=\"Dim this group in canvas (modeling focus)\"\n >${ctx.isTypeDimmed(type) ? 'blur_on' : 'blur_off'}</md-icon\n >\n </div>\n ${expanded ? members.map(entry => renderMember(entry, ctx.terms, ctx.selected)) : nothing}\n </div>\n `\n}\n\n/** 타입 그룹 뷰 전체 렌더 — 타입명 오름차순. */\nexport function renderInspectorGroupView(index: InspectorIndex | undefined, ctx: GroupViewContext): TemplateResult {\n if (!index) return html``\n const types = [...index.byType.keys()].sort((a, b) => a.localeCompare(b))\n return html`${types.map(type => renderGroup(type, index.byType.get(type)!, ctx))}`\n}\n"]}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { TemplateResult } from 'lit';
|
|
2
|
+
import { SearchTerm } from './inspector-model.js';
|
|
3
|
+
/**
|
|
4
|
+
* text 안에서 terms 의 값(field 무관, 시각 표시용)에 일치하는 부분을 하이라이트.
|
|
5
|
+
* 매치가 없거나 terms 가 비면 원본 문자열을 그대로 반환.
|
|
6
|
+
*/
|
|
7
|
+
export declare function highlight(text: string | undefined, terms: SearchTerm[]): TemplateResult | string;
|