@operato/process 9.0.0-beta.19 → 9.0.0-beta.21
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 +17 -0
- package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.js +0 -4
- package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +15 -15
- package/dist/src/modeller/property-sidebar.d.ts +0 -54
- package/dist/src/modeller/property-sidebar.js +0 -372
- package/dist/src/modeller/property-sidebar.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@operato/process",
|
|
3
|
-
"version": "9.0.0-beta.
|
|
3
|
+
"version": "9.0.0-beta.21",
|
|
4
4
|
"description": "Webcomponent for business process modeling following open-wc recommendations",
|
|
5
5
|
"author": "heartyoh",
|
|
6
6
|
"type": "module",
|
|
@@ -75,19 +75,19 @@
|
|
|
75
75
|
},
|
|
76
76
|
"dependencies": {
|
|
77
77
|
"@open-wc/scoped-elements": "^2.1.3",
|
|
78
|
-
"@operato/app": "^9.0.0-beta.
|
|
79
|
-
"@operato/board": "^9.0.0-beta.
|
|
80
|
-
"@operato/data-grist": "^9.0.0-beta.
|
|
81
|
-
"@operato/font": "^9.0.0-beta.
|
|
82
|
-
"@operato/graphql": "^9.0.0-beta.
|
|
83
|
-
"@operato/i18n": "^9.0.0-beta.
|
|
84
|
-
"@operato/input": "^9.0.0-beta.
|
|
85
|
-
"@operato/markdown": "^9.0.0-beta.
|
|
86
|
-
"@operato/popup": "^9.0.0-beta.
|
|
87
|
-
"@operato/property-editor": "^9.0.0-beta.
|
|
88
|
-
"@operato/property-panel": "^9.0.0-beta.
|
|
89
|
-
"@operato/styles": "^9.0.0-beta.
|
|
90
|
-
"@operato/utils": "^9.0.0-beta.
|
|
78
|
+
"@operato/app": "^9.0.0-beta.21",
|
|
79
|
+
"@operato/board": "^9.0.0-beta.21",
|
|
80
|
+
"@operato/data-grist": "^9.0.0-beta.21",
|
|
81
|
+
"@operato/font": "^9.0.0-beta.21",
|
|
82
|
+
"@operato/graphql": "^9.0.0-beta.20",
|
|
83
|
+
"@operato/i18n": "^9.0.0-beta.20",
|
|
84
|
+
"@operato/input": "^9.0.0-beta.21",
|
|
85
|
+
"@operato/markdown": "^9.0.0-beta.21",
|
|
86
|
+
"@operato/popup": "^9.0.0-beta.21",
|
|
87
|
+
"@operato/property-editor": "^9.0.0-beta.21",
|
|
88
|
+
"@operato/property-panel": "^9.0.0-beta.21",
|
|
89
|
+
"@operato/styles": "^9.0.0-beta.21",
|
|
90
|
+
"@operato/utils": "^9.0.0-beta.20",
|
|
91
91
|
"@polymer/paper-dropdown-menu": "^3.2.0",
|
|
92
92
|
"@types/file-saver": "^2.0.4",
|
|
93
93
|
"@types/sortablejs": "^1.10.7",
|
|
@@ -136,5 +136,5 @@
|
|
|
136
136
|
"prettier --write"
|
|
137
137
|
]
|
|
138
138
|
},
|
|
139
|
-
"gitHead": "
|
|
139
|
+
"gitHead": "2009d843d9b1f3ee954b01a3e9434676e39184b8"
|
|
140
140
|
}
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
|
-
*/
|
|
4
|
-
import '@material/web/icon/icon.js';
|
|
5
|
-
import { LitElement, PropertyValues } from 'lit';
|
|
6
|
-
import { Component, Model, Scene } from '@hatiolab/things-scene';
|
|
7
|
-
import { PropertyEffects } from '@operato/property-panel/effects.js';
|
|
8
|
-
import { SceneInspector } from '@operato/property-panel/inspector.js';
|
|
9
|
-
import { PropertyShapes } from '@operato/property-panel/shapes.js';
|
|
10
|
-
import { PropertySpecific } from '@operato/property-panel/specifics.js';
|
|
11
|
-
import { PropertyStyles } from '@operato/property-panel/styles.js';
|
|
12
|
-
import { PropertyDataBinding } from '@operato/property-panel/data-binding.js';
|
|
13
|
-
declare const PropertySidebar_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types.js").ScopedElementsHost>;
|
|
14
|
-
export declare class PropertySidebar extends PropertySidebar_base {
|
|
15
|
-
static styles: import("lit").CSSResult[];
|
|
16
|
-
scene: Scene | null;
|
|
17
|
-
bounds: any;
|
|
18
|
-
model: Model | null;
|
|
19
|
-
selected: Component[];
|
|
20
|
-
specificProps: any;
|
|
21
|
-
tabName: string | null;
|
|
22
|
-
collapsed: boolean;
|
|
23
|
-
fonts: any[];
|
|
24
|
-
propertyEditor: any[];
|
|
25
|
-
hideDataBinding: boolean;
|
|
26
|
-
hideEffect: boolean;
|
|
27
|
-
hideInspector: boolean;
|
|
28
|
-
hideShape: boolean;
|
|
29
|
-
hideStyle: boolean;
|
|
30
|
-
hideSpecific: boolean;
|
|
31
|
-
propertyTarget: Component | null;
|
|
32
|
-
firstUpdated(): void;
|
|
33
|
-
updated(change: PropertyValues<this>): void;
|
|
34
|
-
static get scopedElements(): {
|
|
35
|
-
'process-property-shape': typeof PropertyShapes;
|
|
36
|
-
'process-property-style': typeof PropertyStyles;
|
|
37
|
-
'process-property-effect': typeof PropertyEffects;
|
|
38
|
-
'process-property-specific': typeof PropertySpecific;
|
|
39
|
-
'process-property-data-binding': typeof PropertyDataBinding;
|
|
40
|
-
'process-scene-inspector': typeof SceneInspector;
|
|
41
|
-
};
|
|
42
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
43
|
-
private onPropertyChanged;
|
|
44
|
-
private onBoundsChanged;
|
|
45
|
-
private onChangedByScene;
|
|
46
|
-
private setPropertyTargetAsDefault;
|
|
47
|
-
private onCollapsed;
|
|
48
|
-
private onSceneChanged;
|
|
49
|
-
private onSelectedChanged;
|
|
50
|
-
private setPropertyTarget;
|
|
51
|
-
private setBounds;
|
|
52
|
-
private isLine;
|
|
53
|
-
}
|
|
54
|
-
export {};
|
|
@@ -1,372 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
|
-
*/
|
|
4
|
-
import { __decorate } from "tslib";
|
|
5
|
-
import '@material/web/icon/icon.js';
|
|
6
|
-
import { css, html, LitElement } from 'lit';
|
|
7
|
-
import { property } from 'lit/decorators.js';
|
|
8
|
-
import deepClone from 'lodash-es/cloneDeep.js';
|
|
9
|
-
import { ScopedElementsMixin } from '@open-wc/scoped-elements';
|
|
10
|
-
import { ScrollbarStyles } from '@operato/styles';
|
|
11
|
-
import { PropertyEffects } from '@operato/property-panel/effects.js';
|
|
12
|
-
import { SceneInspector } from '@operato/property-panel/inspector.js';
|
|
13
|
-
import { PropertyShapes } from '@operato/property-panel/shapes.js';
|
|
14
|
-
import { PropertySpecific } from '@operato/property-panel/specifics.js';
|
|
15
|
-
import { PropertyStyles } from '@operato/property-panel/styles.js';
|
|
16
|
-
import { PropertyDataBinding } from '@operato/property-panel/data-binding.js';
|
|
17
|
-
export class PropertySidebar extends ScopedElementsMixin(LitElement) {
|
|
18
|
-
constructor() {
|
|
19
|
-
super(...arguments);
|
|
20
|
-
this.scene = null;
|
|
21
|
-
this.bounds = {};
|
|
22
|
-
this.model = {};
|
|
23
|
-
this.selected = [];
|
|
24
|
-
this.tabName = 'shape';
|
|
25
|
-
this.collapsed = false;
|
|
26
|
-
this.fonts = [];
|
|
27
|
-
this.propertyEditor = [];
|
|
28
|
-
this.hideDataBinding = false;
|
|
29
|
-
this.hideEffect = false;
|
|
30
|
-
this.hideInspector = false;
|
|
31
|
-
this.hideShape = false;
|
|
32
|
-
this.hideStyle = false;
|
|
33
|
-
this.hideSpecific = false;
|
|
34
|
-
this.propertyTarget = null;
|
|
35
|
-
}
|
|
36
|
-
firstUpdated() {
|
|
37
|
-
this.renderRoot.addEventListener('property-change', this.onPropertyChanged.bind(this));
|
|
38
|
-
this.renderRoot.addEventListener('bounds-change', this.onBoundsChanged.bind(this));
|
|
39
|
-
}
|
|
40
|
-
updated(change) {
|
|
41
|
-
change.has('scene') && this.onSceneChanged();
|
|
42
|
-
change.has('selected') && this.onSelectedChanged(this.selected);
|
|
43
|
-
change.has('collapsed') && this.onCollapsed(this.collapsed);
|
|
44
|
-
}
|
|
45
|
-
static get scopedElements() {
|
|
46
|
-
return {
|
|
47
|
-
'process-property-shape': PropertyShapes,
|
|
48
|
-
'process-property-style': PropertyStyles,
|
|
49
|
-
'process-property-effect': PropertyEffects,
|
|
50
|
-
'process-property-specific': PropertySpecific,
|
|
51
|
-
'process-property-data-binding': PropertyDataBinding,
|
|
52
|
-
'process-scene-inspector': SceneInspector
|
|
53
|
-
};
|
|
54
|
-
}
|
|
55
|
-
render() {
|
|
56
|
-
var tabName = this.tabName ? this.tabName : 'shape';
|
|
57
|
-
return html `
|
|
58
|
-
<div
|
|
59
|
-
tab
|
|
60
|
-
@click=${(e) => {
|
|
61
|
-
this.tabName = e.target.getAttribute('name');
|
|
62
|
-
}}
|
|
63
|
-
>
|
|
64
|
-
<md-icon name="specific" ?selected=${tabName == 'specific'} ?hidden=${this.hideSpecific}>tune</md-icon>
|
|
65
|
-
<md-icon name="shape" ?selected=${tabName == 'shape'} ?hidden=${this.hideShape}>format_shapes</md-icon>
|
|
66
|
-
<md-icon name="style" ?selected=${tabName == 'style'} ?hidden=${this.hideStyle}>palette</md-icon>
|
|
67
|
-
<md-icon name="effect" ?selected=${tabName == 'effect'} ?hidden=${this.hideEffect}>movie_filter</md-icon>
|
|
68
|
-
<md-icon name="data-binding" ?selected=${tabName == 'data-binding'} ?hidden=${this.hideDataBinding}
|
|
69
|
-
>share</md-icon
|
|
70
|
-
>
|
|
71
|
-
<md-icon name="inspector" ?selected=${tabName == 'inspector'} ?hidden=${this.hideInspector}>visibility</md-icon>
|
|
72
|
-
</div>
|
|
73
|
-
|
|
74
|
-
<div content>
|
|
75
|
-
${html `
|
|
76
|
-
${{
|
|
77
|
-
specific: html `
|
|
78
|
-
<process-property-specific
|
|
79
|
-
.value=${this.model}
|
|
80
|
-
.scene=${this.scene}
|
|
81
|
-
.selected=${this.selected}
|
|
82
|
-
.props=${this.specificProps}
|
|
83
|
-
.propertyEditor=${this.propertyEditor}
|
|
84
|
-
?active=${tabName == 'specific'}
|
|
85
|
-
>
|
|
86
|
-
</process-property-specific>
|
|
87
|
-
`,
|
|
88
|
-
shape: html `
|
|
89
|
-
<process-property-shape
|
|
90
|
-
.value=${this.model}
|
|
91
|
-
.bounds=${this.bounds}
|
|
92
|
-
.selected=${this.selected}
|
|
93
|
-
?active=${tabName == 'shape'}
|
|
94
|
-
?is-line=${this.isLine(this.selected)}
|
|
95
|
-
>
|
|
96
|
-
</process-property-shape>
|
|
97
|
-
`,
|
|
98
|
-
style: html `
|
|
99
|
-
<process-property-style
|
|
100
|
-
.value=${this.model}
|
|
101
|
-
.selected=${this.selected}
|
|
102
|
-
.fonts=${this.fonts}
|
|
103
|
-
?active=${tabName == 'style'}
|
|
104
|
-
>
|
|
105
|
-
</process-property-style>
|
|
106
|
-
`,
|
|
107
|
-
effect: html `
|
|
108
|
-
<process-property-effect .value=${this.model} .scene=${this.scene} ?active=${tabName == 'effect'}>
|
|
109
|
-
</process-property-effect>
|
|
110
|
-
`,
|
|
111
|
-
'data-binding': html `
|
|
112
|
-
<process-property-data-binding
|
|
113
|
-
.scene=${this.scene}
|
|
114
|
-
.value=${this.model}
|
|
115
|
-
?active=${tabName == 'data-binding'}
|
|
116
|
-
>
|
|
117
|
-
</process-property-data-binding>
|
|
118
|
-
`,
|
|
119
|
-
inspector: html `
|
|
120
|
-
<process-scene-inspector .scene=${this.scene} ?active=${tabName == 'inspector'}></process-scene-inspector>
|
|
121
|
-
`
|
|
122
|
-
}[this.tabName]}
|
|
123
|
-
`}
|
|
124
|
-
</div>
|
|
125
|
-
`;
|
|
126
|
-
}
|
|
127
|
-
onPropertyChanged(e) {
|
|
128
|
-
var detail = e.detail;
|
|
129
|
-
if (this.propertyTarget) {
|
|
130
|
-
/* 단일 컴포넌트의 경우에 적용 */
|
|
131
|
-
this.scene && this.scene.undoableChange(() => this.propertyTarget.set(detail));
|
|
132
|
-
}
|
|
133
|
-
else {
|
|
134
|
-
/* 여러 컴포넌트의 경우에 적용 */
|
|
135
|
-
this.scene && this.scene.undoableChange(() => this.selected.forEach(component => component.set(detail)));
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
onBoundsChanged(e) {
|
|
139
|
-
var detail = e.detail;
|
|
140
|
-
if (!this.scene) {
|
|
141
|
-
return;
|
|
142
|
-
}
|
|
143
|
-
if (this.propertyTarget) {
|
|
144
|
-
/* 단일 컴포넌트의 경우에 적용 */
|
|
145
|
-
this.scene.undoableChange(() => {
|
|
146
|
-
this.propertyTarget.bounds = {
|
|
147
|
-
...this.propertyTarget.bounds,
|
|
148
|
-
...detail
|
|
149
|
-
};
|
|
150
|
-
});
|
|
151
|
-
}
|
|
152
|
-
else {
|
|
153
|
-
/* 여러 컴포넌트의 경우에 적용 */
|
|
154
|
-
this.scene.undoableChange(() => {
|
|
155
|
-
this.selected.forEach(component => {
|
|
156
|
-
component.bounds = {
|
|
157
|
-
...component.bounds,
|
|
158
|
-
...detail
|
|
159
|
-
};
|
|
160
|
-
});
|
|
161
|
-
});
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
onChangedByScene() {
|
|
165
|
-
if (this.propertyTarget) {
|
|
166
|
-
this.model = {
|
|
167
|
-
...this.propertyTarget.model
|
|
168
|
-
};
|
|
169
|
-
this.setBounds(this.propertyTarget.bounds);
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
setPropertyTargetAsDefault() {
|
|
173
|
-
if (!this.scene) {
|
|
174
|
-
this.setPropertyTarget(null);
|
|
175
|
-
this.specificProps = [];
|
|
176
|
-
this.model = null;
|
|
177
|
-
this.bounds = {};
|
|
178
|
-
}
|
|
179
|
-
else {
|
|
180
|
-
this.scene.select('model-layer');
|
|
181
|
-
}
|
|
182
|
-
}
|
|
183
|
-
onCollapsed(collapsed) {
|
|
184
|
-
!collapsed && (this.style.display = '');
|
|
185
|
-
this.animate(collapsed
|
|
186
|
-
? [
|
|
187
|
-
{ transform: 'translateX(0)', opacity: 1, easing: 'ease-in' },
|
|
188
|
-
{ transform: 'translateX(100%)', opacity: 1 }
|
|
189
|
-
]
|
|
190
|
-
: [
|
|
191
|
-
{ transform: 'translateX(100%)', opacity: 1 },
|
|
192
|
-
{ transform: 'translateX(0)', opacity: 1, easing: 'ease-out' }
|
|
193
|
-
], {
|
|
194
|
-
duration: 500
|
|
195
|
-
}).onfinish = () => {
|
|
196
|
-
collapsed && (this.style.display = 'none');
|
|
197
|
-
dispatchEvent(new Event('resize'));
|
|
198
|
-
};
|
|
199
|
-
}
|
|
200
|
-
async onSceneChanged() {
|
|
201
|
-
await this.updateComplete;
|
|
202
|
-
if (this.scene)
|
|
203
|
-
this.selected = this.scene.select('model-layer');
|
|
204
|
-
}
|
|
205
|
-
async onSelectedChanged(after) {
|
|
206
|
-
await this.updateComplete;
|
|
207
|
-
if (after.length == 1) {
|
|
208
|
-
this.setPropertyTarget(after[0]);
|
|
209
|
-
// 컴포넌트 특성 속성(specific properties)을 먼저 바꾸고, 모델을 바꾸어준다.
|
|
210
|
-
// 컴포넌트 속성에 따라 UI 컴포넌트가 준비되고, 이후에 모델값을 보여주도록 하기 위해서이다.
|
|
211
|
-
this.specificProps = deepClone(this.propertyTarget.nature.properties);
|
|
212
|
-
this.model = {
|
|
213
|
-
...this.propertyTarget.model
|
|
214
|
-
};
|
|
215
|
-
this.setBounds(this.propertyTarget.bounds);
|
|
216
|
-
}
|
|
217
|
-
else if (after.length == 0) {
|
|
218
|
-
// 선택이 안된 경우
|
|
219
|
-
this.setPropertyTargetAsDefault();
|
|
220
|
-
}
|
|
221
|
-
else {
|
|
222
|
-
// 다중 선택된 경우
|
|
223
|
-
var type = after[0].model.type;
|
|
224
|
-
for (let i = 1; i < after.length; i++) {
|
|
225
|
-
if (after[i].model.type != type) {
|
|
226
|
-
type = undefined;
|
|
227
|
-
break;
|
|
228
|
-
}
|
|
229
|
-
}
|
|
230
|
-
this.setPropertyTarget(null);
|
|
231
|
-
if (type)
|
|
232
|
-
this.specificProps = deepClone(after[0].nature.properties);
|
|
233
|
-
else
|
|
234
|
-
this.specificProps = null;
|
|
235
|
-
this.model = {
|
|
236
|
-
type: type,
|
|
237
|
-
alpha: 1
|
|
238
|
-
};
|
|
239
|
-
this.bounds = {};
|
|
240
|
-
}
|
|
241
|
-
}
|
|
242
|
-
setPropertyTarget(newTarget) {
|
|
243
|
-
var oldTarget = this.propertyTarget;
|
|
244
|
-
if (oldTarget) {
|
|
245
|
-
oldTarget.off('change', this.onChangedByScene, this);
|
|
246
|
-
}
|
|
247
|
-
if (newTarget) {
|
|
248
|
-
newTarget.on('change', this.onChangedByScene, this);
|
|
249
|
-
}
|
|
250
|
-
this.propertyTarget = newTarget;
|
|
251
|
-
}
|
|
252
|
-
setBounds(bounds) {
|
|
253
|
-
this.bounds = {
|
|
254
|
-
left: bounds.left,
|
|
255
|
-
top: bounds.top,
|
|
256
|
-
width: Math.round(bounds.width),
|
|
257
|
-
height: Math.round(bounds.height)
|
|
258
|
-
};
|
|
259
|
-
}
|
|
260
|
-
isLine(selected) {
|
|
261
|
-
var isLine = false;
|
|
262
|
-
for (var i = 0; i < selected.length; i++) {
|
|
263
|
-
var comp = selected[i];
|
|
264
|
-
if (!comp.isLine || !comp.isLine()) {
|
|
265
|
-
isLine = false;
|
|
266
|
-
return isLine;
|
|
267
|
-
}
|
|
268
|
-
isLine = true;
|
|
269
|
-
}
|
|
270
|
-
return isLine;
|
|
271
|
-
}
|
|
272
|
-
}
|
|
273
|
-
PropertySidebar.styles = [
|
|
274
|
-
ScrollbarStyles,
|
|
275
|
-
css `
|
|
276
|
-
:host {
|
|
277
|
-
border-left: 1px solid var(--md-sys-color-border, #ccc);
|
|
278
|
-
width: 270px;
|
|
279
|
-
display: flex;
|
|
280
|
-
flex-direction: column;
|
|
281
|
-
background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));
|
|
282
|
-
color: var(--property-sidebar-color, var(--md-sys-color-on-secondary-container));
|
|
283
|
-
user-select: none;
|
|
284
|
-
|
|
285
|
-
--input-padding: var(--spacing-small);
|
|
286
|
-
--label-font: var(--property-sidebar-fieldset-label, roboto);
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
[tab] {
|
|
290
|
-
display: flex;
|
|
291
|
-
background-color: rgba(0, 0, 0, 0.08);
|
|
292
|
-
opacity: 0.85;
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
[tab] md-icon {
|
|
296
|
-
flex: 1;
|
|
297
|
-
|
|
298
|
-
display: flex;
|
|
299
|
-
align-items: center;
|
|
300
|
-
justify-content: center;
|
|
301
|
-
|
|
302
|
-
color: var(--property-sidebar-tab-icon-color);
|
|
303
|
-
height: 40px;
|
|
304
|
-
}
|
|
305
|
-
|
|
306
|
-
[tab] [selected] {
|
|
307
|
-
background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));
|
|
308
|
-
border-left: 1px solid rgba(255, 255, 255, 0.5);
|
|
309
|
-
border-right: 1px solid rgba(0, 0, 0, 0.15);
|
|
310
|
-
opacity: 1;
|
|
311
|
-
}
|
|
312
|
-
|
|
313
|
-
[content] {
|
|
314
|
-
flex: 1;
|
|
315
|
-
|
|
316
|
-
overflow: hidden;
|
|
317
|
-
overflow-y: auto;
|
|
318
|
-
|
|
319
|
-
--md-icon-size: 22px;
|
|
320
|
-
}
|
|
321
|
-
|
|
322
|
-
[content] > :not([active]) {
|
|
323
|
-
display: none;
|
|
324
|
-
}
|
|
325
|
-
`
|
|
326
|
-
];
|
|
327
|
-
__decorate([
|
|
328
|
-
property({ type: Object })
|
|
329
|
-
], PropertySidebar.prototype, "scene", void 0);
|
|
330
|
-
__decorate([
|
|
331
|
-
property({ type: Object })
|
|
332
|
-
], PropertySidebar.prototype, "bounds", void 0);
|
|
333
|
-
__decorate([
|
|
334
|
-
property({ type: Object })
|
|
335
|
-
], PropertySidebar.prototype, "model", void 0);
|
|
336
|
-
__decorate([
|
|
337
|
-
property({ type: Array })
|
|
338
|
-
], PropertySidebar.prototype, "selected", void 0);
|
|
339
|
-
__decorate([
|
|
340
|
-
property({ type: Array })
|
|
341
|
-
], PropertySidebar.prototype, "specificProps", void 0);
|
|
342
|
-
__decorate([
|
|
343
|
-
property({ type: String })
|
|
344
|
-
], PropertySidebar.prototype, "tabName", void 0);
|
|
345
|
-
__decorate([
|
|
346
|
-
property({ type: Boolean })
|
|
347
|
-
], PropertySidebar.prototype, "collapsed", void 0);
|
|
348
|
-
__decorate([
|
|
349
|
-
property({ type: Array })
|
|
350
|
-
], PropertySidebar.prototype, "fonts", void 0);
|
|
351
|
-
__decorate([
|
|
352
|
-
property({ type: Array })
|
|
353
|
-
], PropertySidebar.prototype, "propertyEditor", void 0);
|
|
354
|
-
__decorate([
|
|
355
|
-
property({ type: Boolean, attribute: 'hide-data-binding' })
|
|
356
|
-
], PropertySidebar.prototype, "hideDataBinding", void 0);
|
|
357
|
-
__decorate([
|
|
358
|
-
property({ type: Boolean, attribute: 'hide-effect' })
|
|
359
|
-
], PropertySidebar.prototype, "hideEffect", void 0);
|
|
360
|
-
__decorate([
|
|
361
|
-
property({ type: Boolean, attribute: 'hide-inspector' })
|
|
362
|
-
], PropertySidebar.prototype, "hideInspector", void 0);
|
|
363
|
-
__decorate([
|
|
364
|
-
property({ type: Boolean, attribute: 'hide-shape' })
|
|
365
|
-
], PropertySidebar.prototype, "hideShape", void 0);
|
|
366
|
-
__decorate([
|
|
367
|
-
property({ type: Boolean, attribute: 'hide-style' })
|
|
368
|
-
], PropertySidebar.prototype, "hideStyle", void 0);
|
|
369
|
-
__decorate([
|
|
370
|
-
property({ type: Boolean, attribute: 'hide-specific' })
|
|
371
|
-
], PropertySidebar.prototype, "hideSpecific", void 0);
|
|
372
|
-
//# sourceMappingURL=property-sidebar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"property-sidebar.js","sourceRoot":"","sources":["../../../src/modeller/property-sidebar.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAiB,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,SAAS,MAAM,wBAAwB,CAAA;AAG9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAA;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAA;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAA;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAA;AAE7E,MAAM,OAAO,eAAgB,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAApE;;QAwD8B,UAAK,GAAiB,IAAI,CAAA;QAC1B,WAAM,GAAQ,EAAE,CAAA;QAChB,UAAK,GAAiB,EAAE,CAAA;QACzB,aAAQ,GAAgB,EAAE,CAAA;QAEzB,YAAO,GAAkB,OAAO,CAAA;QAC/B,cAAS,GAAY,KAAK,CAAA;QAC5B,UAAK,GAAU,EAAE,CAAA;QACjB,mBAAc,GAAU,EAAE,CAAA;QAEQ,oBAAe,GAAY,KAAK,CAAA;QACtC,eAAU,GAAY,KAAK,CAAA;QACxB,kBAAa,GAAY,KAAK,CAAA;QAClC,cAAS,GAAY,KAAK,CAAA;QAC1B,cAAS,GAAY,KAAK,CAAA;QACvB,iBAAY,GAAY,KAAK,CAAA;QAEtF,mBAAc,GAAqB,IAAI,CAAA;IAyQzC,CAAC;IAvQC,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAC,CAAA;QACvG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAC,CAAA;IACrG,CAAC;IAED,OAAO,CAAC,MAA4B;QAClC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,cAAc,EAAE,CAAA;QAC5C,MAAM,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QAC/D,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IAC7D,CAAC;IAED,MAAM,KAAK,cAAc;QACvB,OAAO;YACL,wBAAwB,EAAE,cAAc;YACxC,wBAAwB,EAAE,cAAc;YACxC,yBAAyB,EAAE,eAAe;YAC1C,2BAA2B,EAAE,gBAAgB;YAC7C,+BAA+B,EAAE,mBAAmB;YACpD,yBAAyB,EAAE,cAAc;SAC1C,CAAA;IACH,CAAC;IAED,MAAM;QACJ,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAA;QAEnD,OAAO,IAAI,CAAA;;;iBAGE,CAAC,CAAa,EAAE,EAAE;YACzB,IAAI,CAAC,OAAO,GAAI,CAAC,CAAC,MAAsB,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA;QAC/D,CAAC;;6CAEoC,OAAO,IAAI,UAAU,YAAY,IAAI,CAAC,YAAY;0CACrD,OAAO,IAAI,OAAO,YAAY,IAAI,CAAC,SAAS;0CAC5C,OAAO,IAAI,OAAO,YAAY,IAAI,CAAC,SAAS;2CAC3C,OAAO,IAAI,QAAQ,YAAY,IAAI,CAAC,UAAU;iDACxC,OAAO,IAAI,cAAc,YAAY,IAAI,CAAC,eAAe;;;8CAG5D,OAAO,IAAI,WAAW,YAAY,IAAI,CAAC,aAAa;;;;UAIxF,IAAI,CAAA;YACF;YACA,QAAQ,EAAE,IAAI,CAAA;;yBAED,IAAI,CAAC,KAAK;yBACV,IAAI,CAAC,KAAK;4BACP,IAAI,CAAC,QAAQ;yBAChB,IAAI,CAAC,aAAa;kCACT,IAAI,CAAC,cAAc;0BAC3B,OAAO,IAAI,UAAU;;;aAGlC;YACD,KAAK,EAAE,IAAI,CAAA;;yBAEE,IAAI,CAAC,KAAK;0BACT,IAAI,CAAC,MAAM;4BACT,IAAI,CAAC,QAAQ;0BACf,OAAO,IAAI,OAAO;2BACjB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;;;aAGxC;YACD,KAAK,EAAE,IAAI,CAAA;;yBAEE,IAAI,CAAC,KAAK;4BACP,IAAI,CAAC,QAAQ;yBAChB,IAAI,CAAC,KAAK;0BACT,OAAO,IAAI,OAAO;;;aAG/B;YACD,MAAM,EAAE,IAAI,CAAA;gDACwB,IAAI,CAAC,KAAK,WAAW,IAAI,CAAC,KAAK,YAAY,OAAO,IAAI,QAAQ;;aAEjG;YAED,cAAc,EAAE,IAAI,CAAA;;yBAEP,IAAI,CAAC,KAAK;yBACV,IAAI,CAAC,KAAK;0BACT,OAAO,IAAI,cAAc;;;aAGtC;YACD,SAAS,EAAE,IAAI,CAAA;gDACqB,IAAI,CAAC,KAAK,YAAY,OAAO,IAAI,WAAW;aAC/E;SACF,CAAC,IAAI,CAAC,OAAQ,CAAC;SACjB;;KAEJ,CAAA;IACH,CAAC;IAEO,iBAAiB,CAAC,CAAc;QACtC,IAAI,MAAM,GAAG,CAAC,CAAC,MAAM,CAAA;QAErB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,qBAAqB;YACrB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAe,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAA;QACjF,CAAC;aAAM,CAAC;YACN,qBAAqB;YACrB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;QAC1G,CAAC;IACH,CAAC;IAEO,eAAe,CAAC,CAAc;QACpC,IAAI,MAAM,GAAG,CAAC,CAAC,MAAM,CAAA;QAErB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAM;QACR,CAAC;QAED,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,qBAAqB;YACrB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,EAAE;gBAC7B,IAAI,CAAC,cAAe,CAAC,MAAM,GAAG;oBAC5B,GAAG,IAAI,CAAC,cAAe,CAAC,MAAM;oBAC9B,GAAG,MAAM;iBACV,CAAA;YACH,CAAC,CAAC,CAAA;QACJ,CAAC;aAAM,CAAC;YACN,qBAAqB;YACrB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,EAAE;gBAC7B,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;oBAChC,SAAS,CAAC,MAAM,GAAG;wBACjB,GAAG,SAAS,CAAC,MAAM;wBACnB,GAAG,MAAM;qBACV,CAAA;gBACH,CAAC,CAAC,CAAA;YACJ,CAAC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAEO,gBAAgB;QACtB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,GAAG;gBACX,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK;aAC7B,CAAA;YACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;QAC5C,CAAC;IACH,CAAC;IAEO,0BAA0B;QAChC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAA;YAC5B,IAAI,CAAC,aAAa,GAAG,EAAE,CAAA;YACvB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;YACjB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAA;QAClB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,CAAA;QAClC,CAAC;IACH,CAAC;IAEO,WAAW,CAAC,SAAkB;QACpC,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,CAAA;QAEvC,IAAI,CAAC,OAAO,CACV,SAAS;YACP,CAAC,CAAC;gBACE,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE;gBAC7D,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,CAAC,EAAE;aAC9C;YACH,CAAC,CAAC;gBACE,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,CAAC,EAAE;gBAC7C,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE;aAC/D,EACL;YACE,QAAQ,EAAE,GAAG;SACd,CACF,CAAC,QAAQ,GAAG,GAAG,EAAE;YAChB,SAAS,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC,CAAA;YAC1C,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;QACpC,CAAC,CAAA;IACH,CAAC;IAEO,KAAK,CAAC,cAAc;QAC1B,MAAM,IAAI,CAAC,cAAc,CAAA;QAEzB,IAAI,IAAI,CAAC,KAAK;YAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,CAAA;IAClE,CAAC;IAEO,KAAK,CAAC,iBAAiB,CAAC,KAAkB;QAChD,MAAM,IAAI,CAAC,cAAc,CAAA;QAEzB,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;YACtB,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;YAChC,sDAAsD;YACtD,sDAAsD;YACtD,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC,IAAI,CAAC,cAAe,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;YACtE,IAAI,CAAC,KAAK,GAAG;gBACX,GAAG,IAAI,CAAC,cAAe,CAAC,KAAK;aAC9B,CAAA;YACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,cAAe,CAAC,MAAM,CAAC,CAAA;QAC7C,CAAC;aAAM,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;YAC7B,YAAY;YAEZ,IAAI,CAAC,0BAA0B,EAAE,CAAA;QACnC,CAAC;aAAM,CAAC;YACN,YAAY;YAEZ,IAAI,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAA;YAC9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBACtC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,EAAE,CAAC;oBAChC,IAAI,GAAG,SAAS,CAAA;oBAChB,MAAK;gBACP,CAAC;YACH,CAAC;YAED,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAA;YAE5B,IAAI,IAAI;gBAAE,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;;gBAC/D,IAAI,CAAC,aAAa,GAAG,IAAI,CAAA;YAE9B,IAAI,CAAC,KAAK,GAAG;gBACX,IAAI,EAAE,IAAI;gBACV,KAAK,EAAE,CAAC;aACT,CAAA;YACD,IAAI,CAAC,MAAM,GAAG,EAAE,CAAA;QAClB,CAAC;IACH,CAAC;IAEO,iBAAiB,CAAC,SAA2B;QACnD,IAAI,SAAS,GAAG,IAAI,CAAC,cAAc,CAAA;QAEnC,IAAI,SAAS,EAAE,CAAC;YACd,SAAS,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAA;QACtD,CAAC;QACD,IAAI,SAAS,EAAE,CAAC;YACd,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAA;QACrD,CAAC;QAED,IAAI,CAAC,cAAc,GAAG,SAAS,CAAA;IACjC,CAAC;IAEO,SAAS,CAAC,MAAc;QAC9B,IAAI,CAAC,MAAM,GAAG;YACZ,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,GAAG,EAAE,MAAM,CAAC,GAAG;YACf,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YAC/B,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;SAClC,CAAA;IACH,CAAC;IAEO,MAAM,CAAC,QAAqB;QAClC,IAAI,MAAM,GAAG,KAAK,CAAA;QAElB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,IAAI,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;YAEtB,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;gBACnC,MAAM,GAAG,KAAK,CAAA;gBACd,OAAO,MAAM,CAAA;YACf,CAAC;YAED,MAAM,GAAG,IAAI,CAAA;QACf,CAAC;QAED,OAAO,MAAM,CAAA;IACf,CAAC;;AAhVM,sBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDF;CACF,AArDY,CAqDZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAA2B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAyB;AACzB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;iDAA2B;AAC1B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;sDAAmB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAiC;AAC/B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAA2B;AAC5B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;8CAAkB;AACjB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;uDAA2B;AAEQ;IAA5D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;wDAAiC;AACtC;IAAtD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;mDAA4B;AACxB;IAAzD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;sDAA+B;AAClC;IAArD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;kDAA2B;AAC1B;IAArD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;kDAA2B;AACvB;IAAxD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;qDAA8B","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 { PropertyEffects } from '@operato/property-panel/effects.js'\nimport { SceneInspector } from '@operato/property-panel/inspector.js'\nimport { PropertyShapes } from '@operato/property-panel/shapes.js'\nimport { PropertySpecific } from '@operato/property-panel/specifics.js'\nimport { PropertyStyles } from '@operato/property-panel/styles.js'\nimport { PropertyDataBinding } from '@operato/property-panel/data-binding.js'\n\nexport class PropertySidebar 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 @property({ type: Boolean, attribute: 'hide-data-binding' }) hideDataBinding: boolean = false\n @property({ type: Boolean, attribute: 'hide-effect' }) hideEffect: boolean = false\n @property({ type: Boolean, attribute: 'hide-inspector' }) hideInspector: boolean = false\n @property({ type: Boolean, attribute: 'hide-shape' }) hideShape: boolean = false\n @property({ type: Boolean, attribute: 'hide-style' }) hideStyle: boolean = false\n @property({ type: Boolean, attribute: 'hide-specific' }) hideSpecific: boolean = false\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 'process-property-shape': PropertyShapes,\n 'process-property-style': PropertyStyles,\n 'process-property-effect': PropertyEffects,\n 'process-property-specific': PropertySpecific,\n 'process-property-data-binding': PropertyDataBinding,\n 'process-scene-inspector': SceneInspector\n }\n }\n\n render() {\n var tabName = this.tabName ? this.tabName : 'shape'\n\n return html`\n <div\n tab\n @click=${(e: MouseEvent) => {\n this.tabName = (e.target as HTMLElement).getAttribute('name')\n }}\n >\n <md-icon name=\"specific\" ?selected=${tabName == 'specific'} ?hidden=${this.hideSpecific}>tune</md-icon>\n <md-icon name=\"shape\" ?selected=${tabName == 'shape'} ?hidden=${this.hideShape}>format_shapes</md-icon>\n <md-icon name=\"style\" ?selected=${tabName == 'style'} ?hidden=${this.hideStyle}>palette</md-icon>\n <md-icon name=\"effect\" ?selected=${tabName == 'effect'} ?hidden=${this.hideEffect}>movie_filter</md-icon>\n <md-icon name=\"data-binding\" ?selected=${tabName == 'data-binding'} ?hidden=${this.hideDataBinding}\n >share</md-icon\n >\n <md-icon name=\"inspector\" ?selected=${tabName == 'inspector'} ?hidden=${this.hideInspector}>visibility</md-icon>\n </div>\n\n <div content>\n ${html`\n ${{\n specific: html`\n <process-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 </process-property-specific>\n `,\n shape: html`\n <process-property-shape\n .value=${this.model}\n .bounds=${this.bounds}\n .selected=${this.selected}\n ?active=${tabName == 'shape'}\n ?is-line=${this.isLine(this.selected)}\n >\n </process-property-shape>\n `,\n style: html`\n <process-property-style\n .value=${this.model}\n .selected=${this.selected}\n .fonts=${this.fonts}\n ?active=${tabName == 'style'}\n >\n </process-property-style>\n `,\n effect: html`\n <process-property-effect .value=${this.model} .scene=${this.scene} ?active=${tabName == 'effect'}>\n </process-property-effect>\n `,\n\n 'data-binding': html`\n <process-property-data-binding\n .scene=${this.scene}\n .value=${this.model}\n ?active=${tabName == 'data-binding'}\n >\n </process-property-data-binding>\n `,\n inspector: html`\n <process-scene-inspector .scene=${this.scene} ?active=${tabName == 'inspector'}></process-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 !collapsed && (this.style.display = '')\n\n this.animate(\n collapsed\n ? [\n { transform: 'translateX(0)', opacity: 1, easing: 'ease-in' },\n { transform: 'translateX(100%)', opacity: 1 }\n ]\n : [\n { transform: 'translateX(100%)', opacity: 1 },\n { transform: 'translateX(0)', opacity: 1, easing: 'ease-out' }\n ],\n {\n duration: 500\n }\n ).onfinish = () => {\n collapsed && (this.style.display = 'none')\n dispatchEvent(new Event('resize'))\n }\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 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 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"]}
|