@operato/scene-tab 1.1.8 → 1.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/assets/favicon.ico +0 -0
  3. package/assets/images/spinner.png +0 -0
  4. package/demo/index.html +240 -204
  5. package/dist/index.d.ts +2 -0
  6. package/dist/index.js +2 -0
  7. package/dist/index.js.map +1 -1
  8. package/dist/tab-card.d.ts +10 -0
  9. package/dist/tab-card.js +65 -0
  10. package/dist/tab-card.js.map +1 -0
  11. package/dist/tab-container.d.ts +20 -0
  12. package/dist/tab-container.js +167 -0
  13. package/dist/tab-container.js.map +1 -0
  14. package/dist/tab.js +9 -6
  15. package/dist/tab.js.map +1 -1
  16. package/dist/templates/index.d.ts +16 -3
  17. package/dist/templates/index.js +3 -2
  18. package/dist/templates/index.js.map +1 -1
  19. package/dist/templates/tab-container.d.ts +16 -0
  20. package/dist/templates/tab-container.js +17 -0
  21. package/dist/templates/tab-container.js.map +1 -0
  22. package/dist/templates/tab.d.ts +0 -1
  23. package/dist/templates/tab.js +2 -3
  24. package/dist/templates/tab.js.map +1 -1
  25. package/helps/scene/component/tab-container.ko.md +58 -0
  26. package/helps/scene/component/tab-container.md +57 -0
  27. package/helps/scene/component/tab-container.zh.md +59 -0
  28. package/helps/scene/images/button-evnet-mapping-01.png +0 -0
  29. package/helps/scene/images/button-evnet-mapping-02.png +0 -0
  30. package/helps/scene/images/button-evnet-mapping-03.png +0 -0
  31. package/helps/scene/images/tab-button-finish-01.gif +0 -0
  32. package/helps/scene/images/tab-container-03.png +0 -0
  33. package/helps/scene/images/tab-container-create-01.png +0 -0
  34. package/helps/scene/images/tab-container-create-02.png +0 -0
  35. package/helps/scene/images/tab-container-create-03.png +0 -0
  36. package/helps/scene/images/tab-container-setting-01.png +0 -0
  37. package/icons/tab-container.png +0 -0
  38. package/logs/.08636eb59927f12972f6774f5947c8507b3564c2-audit.json +20 -0
  39. package/logs/.5e5d741d8b7784a2fbad65eedc0fd46946aaf6f2-audit.json +20 -0
  40. package/logs/application-2022-11-13-11.log +14 -0
  41. package/logs/application-2022-11-13-12.log +6 -0
  42. package/logs/connections-2022-11-13-11.log +70 -0
  43. package/logs/connections-2022-11-13-12.log +35 -0
  44. package/package.json +2 -2
  45. package/src/index.ts +3 -0
  46. package/src/tab-card.ts +76 -0
  47. package/src/tab-container.ts +204 -0
  48. package/src/tab.ts +9 -5
  49. package/src/templates/index.ts +3 -2
  50. package/src/templates/tab-container.ts +17 -0
  51. package/src/templates/tab.ts +2 -3
  52. package/things-scene.config.js +2 -2
  53. package/translations/en.json +4 -0
  54. package/translations/ko.json +4 -0
  55. package/translations/ms.json +4 -0
  56. package/translations/zh.json +4 -0
  57. package/tsconfig.tsbuildinfo +1 -1
  58. package/images/icon-button.png +0 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,15 @@
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
+ ### [1.1.14](https://github.com/things-scene/operato-scene/compare/v1.1.13...v1.1.14) (2022-11-13)
7
+
8
+
9
+ ### :bug: Bug Fix
10
+
11
+ * add tab-container and tab-card ([92f7b36](https://github.com/things-scene/operato-scene/commit/92f7b367e5821f54eeb5f324266cd7dad5db2ad2))
12
+
13
+
14
+
6
15
  ### [1.1.8](https://github.com/things-scene/operato-scene/compare/v1.1.7...v1.1.8) (2022-11-05)
7
16
 
8
17
 
package/assets/favicon.ico ADDED
Binary file
package/assets/images/spinner.png ADDED
Binary file
package/demo/index.html CHANGED
@@ -1,252 +1,288 @@
1
- <!doctype html>
1
+ <!DOCTYPE html>
2
2
  <!--
3
3
  @license
4
4
  Copyright © HatioLab Inc. All rights reserved.
5
5
  -->
6
6
  <html>
7
7
  <head>
8
- <meta charset="utf-8">
9
- <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
8
+ <meta charset="utf-8" />
9
+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes" />
10
10
  <title>things-scene-tab Demo</title>
11
11
  <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
12
12
 
13
- <link rel="import" href="../../things-scene-viewer/things-scene-viewer.html">
14
- <link rel="import" href="../../things-scene-indoor-map/things-scene-indoor-map.html">
15
- <link rel="import" href="../../things-scene-modeler/things-scene-properties.html">
13
+ <link rel="import" href="../../things-scene-viewer/things-scene-viewer.html" />
14
+ <link rel="import" href="../../things-scene-indoor-map/things-scene-indoor-map.html" />
15
+ <link rel="import" href="../../things-scene-modeler/things-scene-properties.html" />
16
16
 
17
17
  <script src="../things-scene-tab.js"></script>
18
18
 
19
19
  <style is="custom-style">
20
+ @font-face {
21
+ font-family: 'Bitstream Vera Serif Bold';
22
+ src: url('fonts/VeraSeBd.ttf');
23
+ }
20
24
 
21
- @font-face {
22
- font-family: "Bitstream Vera Serif Bold";
23
- src: url("fonts/VeraSeBd.ttf");
24
- }
25
-
26
- things-scene-viewer {
27
- display: block;
28
- width: 100%;
29
- height: 560px;
30
- }
25
+ things-scene-viewer {
26
+ display: block;
27
+ width: 100%;
28
+ height: 560px;
29
+ }
31
30
  </style>
32
31
  </head>
33
32
  <body unresolved>
34
-
35
33
  <template is="dom-bind" id="app">
36
34
  <p>An example of <code>&lt;things-scene-tab&gt;</code>:</p>
37
35
 
38
- <things-scene-viewer id='scene'
39
- scene='{{scene}}'
40
- selected='{{selected}}'
41
- model='[[model]]'
42
- mode="1">
36
+ <things-scene-viewer id="scene" scene="{{scene}}" selected="{{selected}}" model="[[model]]" mode="1">
43
37
  <things-scene-layer type="selection-layer"></things-scene-layer>
44
38
  <things-scene-layer type="modeling-layer"></things-scene-layer>
45
39
  <things-scene-handler type="text-editor"></things-scene-handler>
46
40
  <things-scene-handler type="move-handler"></things-scene-handler>
47
41
  </things-scene-viewer>
48
42
 
49
- <things-scene-properties scene="[[scene]]"
50
- selected="[[selected]]"
51
- model="{{target}}"
52
- bounds="{{bounds}}">
43
+ <things-scene-properties scene="[[scene]]" selected="[[selected]]" model="{{target}}" bounds="{{bounds}}">
53
44
  <fieldset class="same-width">
54
45
  <legend>Stack style</legend>
55
46
 
56
- <label>Active Floor</label>
57
- <input type="number" value-as-number="{{target.layoutConfig.activeIndex::change}}" min="0" max="100" step="1" numberonly="true" />
47
+ <label>Active TabCard</label>
48
+ <input
49
+ type="number"
50
+ value-as-number="{{target.layoutConfig.activeIndex::change}}"
51
+ min="0"
52
+ max="100"
53
+ step="1"
54
+ numberonly="true"
55
+ />
58
56
 
59
57
  <label>reference</label>
60
58
  <input type="text" value="{{target.reference::change}}" />
61
-
62
59
  </fieldset>
63
60
  </things-scene-properties>
64
-
65
61
  </template>
66
62
 
67
63
  <script>
68
- window.addEventListener('WebComponentsReady', function(e) {
64
+ window.addEventListener('WebComponentsReady', function (e) {
69
65
  var app = document.querySelector('#app')
70
66
 
71
67
  app.model = {
72
68
  width: 500,
73
69
  height: 500,
74
- components: [{
75
- type: 'tab',
76
- reference: 'indoor-map',
77
- left: 100,
78
- top: 100,
79
- width: 100,
80
- height: 400,
81
- lineWidth: 10,
82
- // lineWidth: 0,
83
- fillStyle: 'navy',
84
- strokeStyle: 'red',
85
- activeFillStyle: 'red',
86
- fontColor: 'black',
87
- activeFontColor: 'white',
88
- activeIndex: 2
89
- }, {
90
- type: 'indoor-map',
91
- id: 'indoor-map',
92
- left: 250,
93
- top: 100,
94
- width: 600,
95
- height: 400,
96
- fontSize: 80,
97
- fontColor: '#000000',
98
- lineWidth: 10,
99
- strokeStyle: 'red',
100
- active: 0,
101
- components: [{
102
- type: 'floor',
103
- fillStyle: 'orange',
70
+ components: [
71
+ {
72
+ type: 'tab',
73
+ reference: 'indoor-map',
74
+ left: 100,
75
+ top: 100,
104
76
  width: 100,
105
- height: 100,
106
- text: 'first',
107
- components: [{
108
- type: 'rect',
109
- left: 100,
110
- top: 220,
111
- width: 100,
112
- height: 100,
113
- fillStyle: 'red',
114
- lineWidth: 4
115
- }, {
116
- type: 'ellipse',
117
- cx: 400,
118
- cy: 200,
119
- rx: 100,
120
- ry: 100,
121
- fillStyle: 'blue',
122
- lineWidth: 4
123
- }, {
124
- type: 'polygon',
125
- path: [{
126
- x: 100,
127
- y: 100
128
- }, {
129
- x: 200,
130
- y: 150
131
- }, {
132
- x: 150,
133
- y: 200
134
- }],
135
- fillStyle: 'blue',
136
- lineWidth: 4
137
- }]
138
- }, {
139
- type: 'floor',
77
+ height: 400,
78
+ lineWidth: 10,
79
+ // lineWidth: 0,
140
80
  fillStyle: 'navy',
141
- width: 100,
142
- height: 100,
143
- components: [{
144
- type: 'rect',
145
- left: 100,
146
- top: 220,
147
- width: 100,
148
- height: 100,
149
- fillStyle: 'red',
150
- lineWidth: 4
151
- }, {
152
- type: 'ellipse',
153
- cx: 400,
154
- cy: 200,
155
- rx: 100,
156
- ry: 100,
157
- fillStyle: 'blue',
158
- lineWidth: 4
159
- }, {
160
- type: 'polygon',
161
- path: [{
162
- x: 100,
163
- y: 100
164
- }, {
165
- x: 200,
166
- y: 150
167
- }, {
168
- x: 150,
169
- y: 200
170
- }],
171
- fillStyle: 'blue',
172
- lineWidth: 4
173
- }]
174
- }, {
175
- type: 'floor',
176
- fillStyle: 'black',
177
- width: 100,
178
- height: 100,
179
- components: [{
180
- type: 'rect',
181
- left: 100,
182
- top: 220,
183
- width: 100,
184
- height: 100,
185
- fillStyle: 'red',
186
- lineWidth: 4
187
- }, {
188
- type: 'ellipse',
189
- cx: 400,
190
- cy: 200,
191
- rx: 100,
192
- ry: 100,
193
- fillStyle: 'blue',
194
- lineWidth: 4
195
- }, {
196
- type: 'polygon',
197
- path: [{
198
- x: 100,
199
- y: 100
200
- }, {
201
- x: 200,
202
- y: 150
203
- }, {
204
- x: 150,
205
- y: 200
206
- }],
207
- fillStyle: 'blue',
208
- lineWidth: 4
209
- }]
210
- }, {
211
- type: 'floor',
212
- fillStyle: 'green',
213
- width: 100,
214
- height: 100,
215
- components: [{
216
- type: 'rect',
217
- left: 100,
218
- top: 220,
219
- width: 100,
220
- height: 100,
221
- fillStyle: 'red',
222
- lineWidth: 4
223
- }, {
224
- type: 'ellipse',
225
- cx: 400,
226
- cy: 200,
227
- rx: 100,
228
- ry: 100,
229
- fillStyle: 'blue',
230
- lineWidth: 4
231
- }, {
232
- type: 'polygon',
233
- path: [{
234
- x: 100,
235
- y: 100
236
- }, {
237
- x: 200,
238
- y: 150
239
- }, {
240
- x: 150,
241
- y: 200
242
- }],
243
- fillStyle: 'blue',
244
- lineWidth: 4
245
- }]
246
- }]
247
- }]
81
+ strokeStyle: 'red',
82
+ activeFillStyle: 'red',
83
+ fontColor: 'black',
84
+ activeFontColor: 'white',
85
+ activeIndex: 2
86
+ },
87
+ {
88
+ type: 'tab-container',
89
+ id: 'tab-container',
90
+ left: 250,
91
+ top: 100,
92
+ width: 600,
93
+ height: 400,
94
+ fontSize: 80,
95
+ fontColor: '#000000',
96
+ lineWidth: 10,
97
+ strokeStyle: 'red',
98
+ active: 0,
99
+ components: [
100
+ {
101
+ type: 'tab-card',
102
+ fillStyle: 'orange',
103
+ width: 100,
104
+ height: 100,
105
+ text: 'first',
106
+ components: [
107
+ {
108
+ type: 'rect',
109
+ left: 100,
110
+ top: 220,
111
+ width: 100,
112
+ height: 100,
113
+ fillStyle: 'red',
114
+ lineWidth: 4
115
+ },
116
+ {
117
+ type: 'ellipse',
118
+ cx: 400,
119
+ cy: 200,
120
+ rx: 100,
121
+ ry: 100,
122
+ fillStyle: 'blue',
123
+ lineWidth: 4
124
+ },
125
+ {
126
+ type: 'polygon',
127
+ path: [
128
+ {
129
+ x: 100,
130
+ y: 100
131
+ },
132
+ {
133
+ x: 200,
134
+ y: 150
135
+ },
136
+ {
137
+ x: 150,
138
+ y: 200
139
+ }
140
+ ],
141
+ fillStyle: 'blue',
142
+ lineWidth: 4
143
+ }
144
+ ]
145
+ },
146
+ {
147
+ type: 'tab-card',
148
+ fillStyle: 'navy',
149
+ width: 100,
150
+ height: 100,
151
+ components: [
152
+ {
153
+ type: 'rect',
154
+ left: 100,
155
+ top: 220,
156
+ width: 100,
157
+ height: 100,
158
+ fillStyle: 'red',
159
+ lineWidth: 4
160
+ },
161
+ {
162
+ type: 'ellipse',
163
+ cx: 400,
164
+ cy: 200,
165
+ rx: 100,
166
+ ry: 100,
167
+ fillStyle: 'blue',
168
+ lineWidth: 4
169
+ },
170
+ {
171
+ type: 'polygon',
172
+ path: [
173
+ {
174
+ x: 100,
175
+ y: 100
176
+ },
177
+ {
178
+ x: 200,
179
+ y: 150
180
+ },
181
+ {
182
+ x: 150,
183
+ y: 200
184
+ }
185
+ ],
186
+ fillStyle: 'blue',
187
+ lineWidth: 4
188
+ }
189
+ ]
190
+ },
191
+ {
192
+ type: 'tab-card',
193
+ fillStyle: 'black',
194
+ width: 100,
195
+ height: 100,
196
+ components: [
197
+ {
198
+ type: 'rect',
199
+ left: 100,
200
+ top: 220,
201
+ width: 100,
202
+ height: 100,
203
+ fillStyle: 'red',
204
+ lineWidth: 4
205
+ },
206
+ {
207
+ type: 'ellipse',
208
+ cx: 400,
209
+ cy: 200,
210
+ rx: 100,
211
+ ry: 100,
212
+ fillStyle: 'blue',
213
+ lineWidth: 4
214
+ },
215
+ {
216
+ type: 'polygon',
217
+ path: [
218
+ {
219
+ x: 100,
220
+ y: 100
221
+ },
222
+ {
223
+ x: 200,
224
+ y: 150
225
+ },
226
+ {
227
+ x: 150,
228
+ y: 200
229
+ }
230
+ ],
231
+ fillStyle: 'blue',
232
+ lineWidth: 4
233
+ }
234
+ ]
235
+ },
236
+ {
237
+ type: 'tab-card',
238
+ fillStyle: 'green',
239
+ width: 100,
240
+ height: 100,
241
+ components: [
242
+ {
243
+ type: 'rect',
244
+ left: 100,
245
+ top: 220,
246
+ width: 100,
247
+ height: 100,
248
+ fillStyle: 'red',
249
+ lineWidth: 4
250
+ },
251
+ {
252
+ type: 'ellipse',
253
+ cx: 400,
254
+ cy: 200,
255
+ rx: 100,
256
+ ry: 100,
257
+ fillStyle: 'blue',
258
+ lineWidth: 4
259
+ },
260
+ {
261
+ type: 'polygon',
262
+ path: [
263
+ {
264
+ x: 100,
265
+ y: 100
266
+ },
267
+ {
268
+ x: 200,
269
+ y: 150
270
+ },
271
+ {
272
+ x: 150,
273
+ y: 200
274
+ }
275
+ ],
276
+ fillStyle: 'blue',
277
+ lineWidth: 4
278
+ }
279
+ ]
280
+ }
281
+ ]
282
+ }
283
+ ]
248
284
  }
249
- });
285
+ })
250
286
  </script>
251
287
  </body>
252
288
  </html>
package/dist/index.d.ts CHANGED
@@ -1,2 +1,4 @@
1
+ export { default as TabCard } from './tab-card';
2
+ export { default as TabContainer } from './tab-container';
1
3
  export { default as Tab } from './tab';
2
4
  export { default as TabButton } from './tab-button';
package/dist/index.js CHANGED
@@ -1,6 +1,8 @@
1
1
  /*
2
2
  * Copyright © HatioLab Inc. All rights reserved.
3
3
  */
4
+ export { default as TabCard } from './tab-card';
5
+ export { default as TabContainer } from './tab-container';
4
6
  export { default as Tab } from './tab';
5
7
  export { default as TabButton } from './tab-button';
6
8
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nexport { default as Tab } from './tab'\nexport { default as TabButton } from './tab-button'\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAA;AACzD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport { default as TabCard } from './tab-card'\nexport { default as TabContainer } from './tab-container'\nexport { default as Tab } from './tab'\nexport { default as TabButton } from './tab-button'\n"]}
package/dist/tab-card.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import { ComponentNature, Container } from '@hatiolab/things-scene';
2
+ export default class TabCard extends Container {
3
+ private _clickPoint?;
4
+ get hasTextProperty(): boolean;
5
+ get showMoveHandle(): boolean;
6
+ get mutable(): boolean;
7
+ get resizable(): boolean;
8
+ get rotatable(): boolean;
9
+ get nature(): ComponentNature;
10
+ }
package/dist/tab-card.js ADDED
@@ -0,0 +1,65 @@
1
+ /*
2
+ * Copyright © HatioLab Inc. All rights reserved.
3
+ */
4
+ import { Component, Container } from '@hatiolab/things-scene';
5
+ const NATURE = {
6
+ mutable: false,
7
+ resizable: true,
8
+ rotatable: true,
9
+ properties: [
10
+ {
11
+ type: 'action',
12
+ label: 'remove',
13
+ name: 'remove',
14
+ property: {
15
+ icon: 'remove_circle',
16
+ action: function (tabCard) {
17
+ let tabContainer = tabCard.parent;
18
+ tabContainer.removeComponent(tabCard);
19
+ tabContainer.set('activeIndex', 0);
20
+ }
21
+ }
22
+ }
23
+ ]
24
+ };
25
+ export default class TabCard extends Container {
26
+ get hasTextProperty() {
27
+ return false;
28
+ }
29
+ get showMoveHandle() {
30
+ return false;
31
+ }
32
+ /*
33
+ * PATH 리스트를 직접 수정할 수 있는 지를 결정한다.
34
+ *
35
+ * 일반적으로 PATH는 바운드 생성을 위해서 논리적으로 생성되므로, 직접 수정하지 않는다.(return false)
36
+ * 그러나, 각 꼭지점들이 개별로 움직이는 다각형류는 path 라는 모델데이타를 가지므로, 직접수정이 가능할 수 있다.(return true)
37
+ *
38
+ * Immutable 컴포넌트의 형상을 바꾸는 방법은 바운드를 이용한 리사이즈나, 특별한 컨트롤을 통해서 가능하다.
39
+ */
40
+ get mutable() {
41
+ return false;
42
+ }
43
+ /*
44
+ * BOUND를 통해서 리사이즈를 할 수 있는 지를 결정한다.
45
+ *
46
+ * 일반적으로 면적을 갖는 컴포넌트는 대체로 가능하다.(return true)
47
+ * 그러나, LINE 등 면적을 가지지않는 컴포넌트는 가능하지 않도록 정의한다.(return false)
48
+ */
49
+ get resizable() {
50
+ return false;
51
+ }
52
+ /*
53
+ * 회전을 할 수 있는 지를 결정한다.
54
+ *
55
+ * 일반적으로 모든 컴포넌트는 가능하다.(return true)
56
+ */
57
+ get rotatable() {
58
+ return false;
59
+ }
60
+ get nature() {
61
+ return NATURE;
62
+ }
63
+ }
64
+ Component.register('tab-card', TabCard);
65
+ //# sourceMappingURL=tab-card.js.map
package/dist/tab-card.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tab-card.js","sourceRoot":"","sources":["../src/tab-card.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,SAAS,EAAmB,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAI9E,MAAM,MAAM,GAAoB;IAC9B,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE;gBACR,IAAI,EAAE,eAAe;gBACrB,MAAM,EAAE,UAAU,OAAgB;oBAChC,IAAI,YAAY,GAAG,OAAO,CAAC,MAAsB,CAAA;oBACjD,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA;oBACrC,YAAY,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;gBACpC,CAAC;aACF;SACF;KACF;CACF,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,SAAS;IAG5C,IAAI,eAAe;QACjB,OAAO,KAAK,CAAA;IACd,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,KAAK,CAAA;IACd,CAAC;IAED;;;;;;;OAOG;IACH,IAAI,OAAO;QACT,OAAO,KAAK,CAAA;IACd,CAAC;IAED;;;;;OAKG;IACH,IAAI,SAAS;QACX,OAAO,KAAK,CAAA;IACd,CAAC;IAED;;;;OAIG;IACH,IAAI,SAAS;QACX,OAAO,KAAK,CAAA;IACd,CAAC;IAED,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, ComponentNature, Container } from '@hatiolab/things-scene'\n\nimport TabContainer from './tab-container'\n\nconst NATURE: ComponentNature = {\n mutable: false,\n resizable: true,\n rotatable: true,\n properties: [\n {\n type: 'action',\n label: 'remove',\n name: 'remove',\n property: {\n icon: 'remove_circle',\n action: function (tabCard: TabCard) {\n let tabContainer = tabCard.parent as TabContainer\n tabContainer.removeComponent(tabCard)\n tabContainer.set('activeIndex', 0)\n }\n }\n }\n ]\n}\n\nexport default class TabCard extends Container {\n private _clickPoint?: Component\n\n get hasTextProperty() {\n return false\n }\n\n get showMoveHandle() {\n return false\n }\n\n /*\n * PATH 리스트를 직접 수정할 수 있는 지를 결정한다.\n *\n * 일반적으로 PATH는 바운드 생성을 위해서 논리적으로 생성되므로, 직접 수정하지 않는다.(return false)\n * 그러나, 각 꼭지점들이 개별로 움직이는 다각형류는 path 라는 모델데이타를 가지므로, 직접수정이 가능할 수 있다.(return true)\n *\n * Immutable 컴포넌트의 형상을 바꾸는 방법은 바운드를 이용한 리사이즈나, 특별한 컨트롤을 통해서 가능하다.\n */\n get mutable() {\n return false\n }\n\n /*\n * BOUND를 통해서 리사이즈를 할 수 있는 지를 결정한다.\n *\n * 일반적으로 면적을 갖는 컴포넌트는 대체로 가능하다.(return true)\n * 그러나, LINE 등 면적을 가지지않는 컴포넌트는 가능하지 않도록 정의한다.(return false)\n */\n get resizable() {\n return false\n }\n\n /*\n * 회전을 할 수 있는 지를 결정한다.\n *\n * 일반적으로 모든 컴포넌트는 가능하다.(return true)\n */\n get rotatable() {\n return false\n }\n\n get nature() {\n return NATURE\n }\n}\n\nComponent.register('tab-card', TabCard)\n"]}
package/dist/tab-container.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ import { ComponentNature, Container, State } from '@hatiolab/things-scene';
2
+ import TabCard from './tab-card';
3
+ export default class TabContainer extends Container {
4
+ private _focused;
5
+ private __down_point?;
6
+ get nature(): ComponentNature;
7
+ get layout(): import("@hatiolab/things-scene").LAYOUT;
8
+ get layoutConfig(): any;
9
+ set layoutConfig(config: any);
10
+ get activeCard(): TabCard;
11
+ get activeIndex(): number;
12
+ set activeIndex(activeIndex: number);
13
+ ready(): void;
14
+ postrender(context: CanvasRenderingContext2D): void;
15
+ contains(x: number, y: number): boolean;
16
+ onchange(after: State): void;
17
+ onmouseup(e: MouseEvent): void;
18
+ onmousedown(e: MouseEvent): void;
19
+ addCard(): void;
20
+ }