@operato/scene-clone 8.0.0-beta.1 → 9.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/package.json +3 -3
  2. package/CHANGELOG.md +0 -873
  3. package/demo/index-clone-bug-2.html +0 -188
  4. package/demo/index-clone-bug.html +0 -185
  5. package/demo/index-polyline-outline.html +0 -368
  6. package/demo/index.html +0 -174
  7. package/demo/things-scene-clone.html +0 -5
  8. package/src/clone.ts +0 -140
  9. package/src/index.ts +0 -1
  10. package/src/templates/index.ts +0 -20
  11. package/test/basic-test.html +0 -67
  12. package/test/index.html +0 -22
  13. package/test/unit/test-clone.js +0 -28
  14. package/test/unit/util.js +0 -18
  15. package/tsconfig.json +0 -24
  16. package/tsconfig.tsbuildinfo +0 -1
package/demo/index-polyline-outline.html DELETED
@@ -1,368 +0,0 @@
1
- <!--
2
- @license
3
- Copyright © 2017 HatioLab Inc. All rights reserved.
4
- -->
5
- <!doctype html>
6
-
7
- <html>
8
- <head>
9
- <meta charset="utf-8">
10
- <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
11
- <title>clone Demo</title>
12
- <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
13
-
14
- <link rel="import" href="../../things-scene-viewer/things-scene-viewer.html">
15
- <link rel="import" href="../../things-scene-viewer/things-scene-layer.html">
16
- <link rel="import" href="../../things-scene-viewer/things-scene-handler.html">
17
-
18
- <link rel="import" href="../../things-designer-elements/things-editor-color.html">
19
- <link rel="import" href="../../things-designer-elements/things-editor-color-stops.html">
20
- <link rel="import" href="../../things-scene-modeler/things-scene-properties.html">
21
-
22
- <link rel="import" href="./things-scene-clone.html">
23
-
24
- <style is="custom-style">
25
-
26
- things-scene-viewer {
27
- display: block;
28
- width: 100%;
29
- height: 800px;
30
- }
31
- </style>
32
- </head>
33
- <body unresolved>
34
-
35
- <template is="dom-bind" id="app">
36
- <p>An example of <code>&lt;clone&gt;</code>:</p>
37
-
38
- <things-scene-viewer id='scene'
39
- scene='{{scene}}'
40
- selected='{{selected}}'
41
- model='[[model]]'
42
- mode="0">
43
- <!-- <things-scene-layer type="selection-layer"></things-scene-layer>
44
- <things-scene-layer type="modeling-layer"></things-scene-layer>
45
- <things-scene-handler type="text-editor"></things-scene-handler>
46
- <things-scene-handler type="move-handler"></things-scene-handler> -->
47
- </things-scene-viewer>
48
-
49
- <things-scene-properties scene="[[scene]]"
50
- selected="[[selected]]"
51
- model="{{target}}"
52
- bounds="{{bounds}}">
53
- <fieldset class="column-double">
54
- <legend>clone style</legend>
55
- <label>value</label>
56
- <input type="number" value-as-number="{{target.value::change}}" min="0" max="100" step="1"/>
57
- </fieldset>
58
- </things-scene-properties>
59
-
60
- <input type="button" value="start" onclick="start();"></input>
61
- <input type="button" value="stop" onclick="stop();"></input>
62
- </template>
63
-
64
- <script>
65
- function start() {
66
- var app = document.querySelector('#app')
67
- app.$.scene.findAll('clone').forEach(function(clone) {
68
- clone.started = true;
69
- })
70
- }
71
-
72
- function stop() {
73
- var app = document.querySelector('#app')
74
- app.$.scene.findAll('clone').forEach(function(clone) {
75
- clone.started = false;
76
- })
77
- }
78
-
79
- window.addEventListener('WebComponentsReady', function(e) {
80
- var app = document.querySelector('#app')
81
-
82
- app.model = {
83
- width: 500,
84
- height: 500,
85
- components: [{
86
- type: 'rect',
87
- id: 'guider0',
88
- left: 500,
89
- top: 120,
90
- width: 300,
91
- height: 250,
92
- rotation: -0.3,
93
- strokeStyle: 'black'
94
- }, {
95
- type: 'ellipse',
96
- cx : 300,
97
- cy : 300,
98
- rx: 10,
99
- ry: 10,
100
- rotation: 1,
101
- strokeStyle: 'black',
102
- fillStyle: 'blue',
103
- animation: {
104
- oncreate: {
105
- type: 'outline',
106
- rideOn: 'guider0',
107
- repeat: true,
108
- duration: 10000
109
- }
110
- }
111
- }, {
112
- type: 'ellipse',
113
- id: 'guider1',
114
- cx : 250,
115
- cy : 200,
116
- rx: 200,
117
- ry: 100,
118
- rotation: 0.2,
119
- strokeStyle: 'black'
120
- }, {
121
- type: 'group',
122
- left: 0,
123
- top: 0,
124
- width: 20,
125
- height: 20,
126
- components: [{
127
- type: 'rect',
128
- left: 0,
129
- top: 0,
130
- rotation: 0,
131
- width: 20,
132
- height: 20,
133
- strokeStyle: 'black',
134
- fillStyle: 'red',
135
- animation: {
136
- oncreate: {
137
- type: 'rotation',
138
- repeat: true,
139
- duration: 800
140
- }
141
- }
142
- }],
143
- animation: {
144
- oncreate: {
145
- type: 'outline',
146
- rideOn: 'guider1',
147
- repeat: true,
148
- duration: 10000
149
- }
150
- }
151
- }, {
152
- type: 'polyline',
153
- id: 'guider2',
154
- path: [{x:50, y:400}, {x:100, y:700}, {x:250, y:650}, {x:400, y:500}, {x:200, y:450}, {x:800, y:430}],
155
- rotation: 0,
156
- strokeStyle: '#000000',
157
- lineWidth: 1
158
- }, {
159
- type: 'rect',
160
- id: 'target-rect',
161
- templatePrefix: 'TT',
162
- left: -20,
163
- top: -20,
164
- rotation: 0,
165
- width: 20,
166
- height: 20,
167
- strokeStyle: 'black',
168
- fillStyle: 'yellow',
169
- animation: {
170
- oncreate: {
171
- type: 'outline',
172
- rideOn: 'guider2',
173
- duration: 4000,
174
- repeat: false
175
- }
176
- }
177
- }, {
178
- type: 'rect',
179
- id: 'target-rect-navy',
180
- templatePrefix: 'QQ',
181
- left: -20,
182
- top: -20,
183
- rotation: 0,
184
- width: 20,
185
- height: 20,
186
- strokeStyle: 'black',
187
- fillStyle: 'navy',
188
- animation: {
189
- oncreate: {
190
- type: 'outline',
191
- rideOn: 'guider2',
192
- duration: 4000,
193
- repeat: false
194
- }
195
- }
196
- }, {
197
- type: 'rect',
198
- id: 'target-rect-red',
199
- templatePrefix: 'ZZ',
200
- left: -20,
201
- top: -20,
202
- rotation: 0,
203
- width: 20,
204
- height: 20,
205
- strokeStyle: 'black',
206
- fillStyle: 'red',
207
- animation: {
208
- oncreate: {
209
- type: 'outline',
210
- rideOn: 'guider2',
211
- duration: 4000,
212
- repeat: false
213
- }
214
- }
215
- }, {
216
- type: 'clone',
217
- top: 30,
218
- left: 10,
219
- width: 10,
220
- height: 10,
221
- strokeStyle: 'navy',
222
- fillStyle: 'orange',
223
- lineWidth: 1,
224
- target: 'target-rect',
225
- duration: 500,
226
- targetRetention: 4000,
227
- autostart: true,
228
- repeat: true
229
- }, {
230
- type: 'clone',
231
- top: 50,
232
- left: 10,
233
- width: 10,
234
- height: 10,
235
- strokeStyle: 'navy',
236
- fillStyle: 'orange',
237
- lineWidth: 1,
238
- target: 'target-rect-navy',
239
- duration: 770,
240
- targetRetention: 4000,
241
- autostart: true,
242
- repeat: true
243
- }, {
244
- type: 'clone',
245
- top: 70,
246
- left: 10,
247
- width: 10,
248
- height: 10,
249
- strokeStyle: 'navy',
250
- fillStyle: 'orange',
251
- lineWidth: 1,
252
- target: 'target-rect-red',
253
- duration: 660,
254
- targetRetention: 4000,
255
- autostart: true,
256
- repeat: true
257
- }, {
258
- type: 'polyline',
259
- id: 'guider3',
260
- path: [{x:150, y:500}, {x:200, y:600}, {x:350, y:750}, {x:500, y:600}, {x:700, y:750}, {x:900, y:530}],
261
- rotation: 0,
262
- strokeStyle: '#000000',
263
- lineWidth: 1
264
- }, {
265
- type: 'rect',
266
- id: 'target-rect-2',
267
- templatePrefix: 'AA',
268
- left: -20,
269
- top: -20,
270
- rotation: 0,
271
- width: 20,
272
- height: 20,
273
- strokeStyle: 'black',
274
- fillStyle: 'yellow',
275
- animation: {
276
- oncreate: {
277
- type: 'outline',
278
- rideOn: 'guider3',
279
- duration: 4000,
280
- repeat: false
281
- }
282
- }
283
- }, {
284
- type: 'rect',
285
- id: 'target-rect-navy-2',
286
- templatePrefix: 'BB',
287
- left: -20,
288
- top: -20,
289
- rotation: 0,
290
- width: 20,
291
- height: 20,
292
- strokeStyle: 'black',
293
- fillStyle: 'navy',
294
- animation: {
295
- oncreate: {
296
- type: 'outline',
297
- rideOn: 'guider3',
298
- duration: 4000,
299
- repeat: false
300
- }
301
- }
302
- }, {
303
- type: 'rect',
304
- id: 'target-rect-red-2',
305
- templatePrefix: 'CC',
306
- left: -20,
307
- top: -20,
308
- rotation: 0,
309
- width: 20,
310
- height: 20,
311
- strokeStyle: 'black',
312
- fillStyle: 'red',
313
- animation: {
314
- oncreate: {
315
- type: 'outline',
316
- rideOn: 'guider3',
317
- duration: 4000,
318
- repeat: false
319
- }
320
- }
321
- }, {
322
- type: 'clone',
323
- top: 90,
324
- left: 10,
325
- width: 10,
326
- height: 10,
327
- strokeStyle: 'navy',
328
- fillStyle: 'orange',
329
- lineWidth: 1,
330
- target: 'target-rect-2',
331
- duration: 500,
332
- targetRetention: 4000,
333
- autostart: true,
334
- repeat: true
335
- }, {
336
- type: 'clone',
337
- top: 110,
338
- left: 10,
339
- width: 10,
340
- height: 10,
341
- strokeStyle: 'navy',
342
- fillStyle: 'orange',
343
- lineWidth: 1,
344
- target: 'target-rect-navy-2',
345
- duration: 770,
346
- targetRetention: 4000,
347
- autostart: true,
348
- repeat: true
349
- }, {
350
- type: 'clone',
351
- top: 130,
352
- left: 10,
353
- width: 10,
354
- height: 10,
355
- strokeStyle: 'navy',
356
- fillStyle: 'orange',
357
- lineWidth: 1,
358
- target: 'target-rect-red-2',
359
- duration: 550,
360
- targetRetention: 4000,
361
- autostart: true,
362
- repeat: true
363
- }]
364
- };
365
- });
366
- </script>
367
- </body>
368
- </html>
package/demo/index.html DELETED
@@ -1,174 +0,0 @@
1
- <!--
2
- @license
3
- Copyright © 2017 HatioLab Inc. All rights reserved.
4
- -->
5
- <!doctype html>
6
-
7
- <html>
8
- <head>
9
- <meta charset="utf-8">
10
- <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
11
- <title>clone Demo</title>
12
- <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
13
-
14
- <link rel="import" href="../../things-scene-viewer/things-scene-viewer.html">
15
- <link rel="import" href="../../things-scene-viewer/things-scene-layer.html">
16
- <link rel="import" href="../../things-scene-viewer/things-scene-handler.html">
17
-
18
- <link rel="import" href="../../things-designer-elements/things-editor-color.html">
19
- <link rel="import" href="../../things-designer-elements/things-editor-color-stops.html">
20
- <link rel="import" href="../../things-scene-modeler/things-scene-properties.html">
21
-
22
- <link rel="import" href="./things-scene-clone.html">
23
-
24
- <style is="custom-style">
25
-
26
- things-scene-viewer {
27
- display: block;
28
- width: 640px;
29
- height: 480px;
30
- }
31
- </style>
32
- </head>
33
- <body unresolved>
34
-
35
- <template is="dom-bind" id="app">
36
- <p>An example of <code>&lt;clone&gt;</code>:</p>
37
-
38
- <things-scene-viewer id='scene'
39
- scene='{{scene}}'
40
- selected='{{selected}}'
41
- model='[[model]]'
42
- mode="0">
43
- <!-- <things-scene-layer type="selection-layer"></things-scene-layer>
44
- <things-scene-layer type="modeling-layer"></things-scene-layer>
45
- <things-scene-handler type="text-editor"></things-scene-handler>
46
- <things-scene-handler type="move-handler"></things-scene-handler> -->
47
- </things-scene-viewer>
48
-
49
- <things-scene-properties scene="[[scene]]"
50
- selected="[[selected]]"
51
- model="{{target}}"
52
- bounds="{{bounds}}">
53
- <fieldset class="column-double">
54
- <legend>clone style</legend>
55
- <label>value</label>
56
- <input type="number" value-as-number="{{target.value::change}}" min="0" max="100" step="1"/>
57
- </fieldset>
58
- </things-scene-properties>
59
-
60
- <input type="button" value="start" onclick="start();"></input>
61
- <input type="button" value="stop" onclick="stop();"></input>
62
- </template>
63
-
64
- <script>
65
- function start() {
66
- var app = document.querySelector('#app')
67
- app.$.scene.findAll('clone').forEach(function(clone) {
68
- clone.started = true;
69
- })
70
- }
71
-
72
- function stop() {
73
- var app = document.querySelector('#app')
74
- app.$.scene.findAll('clone').forEach(function(clone) {
75
- clone.started = false;
76
- })
77
- }
78
-
79
- window.addEventListener('WebComponentsReady', function(e) {
80
- var app = document.querySelector('#app')
81
-
82
- app.model = {
83
- "width": 500,
84
- "height": 500,
85
- "components": [{
86
- "type": "rect",
87
- "id": "outline",
88
- "top": 100,
89
- "left": 100,
90
- "width":200,
91
- "height": 200,
92
- "strokeStyle": "red",
93
- "lineWidth": 1
94
- }, {
95
- "type": "rect",
96
- "id": "outline-inner",
97
- "top": 120,
98
- "left": 120,
99
- "width":160,
100
- "height": 160,
101
- "strokeStyle": "navy",
102
- "lineWidth": 1
103
- }, {
104
- "type": "rect",
105
- "id": "template-rect",
106
- "templatePrefix": "RECT-",
107
- "top": -10,
108
- "left": -10,
109
- "width": 10,
110
- "height": 10,
111
- "strokeStyle": "black",
112
- "lineWidth": 1,
113
- "fillStyle": "white",
114
- "animation": {
115
- "oncreate": {
116
- "type": "outline",
117
- "rideOn": "outline",
118
- "duration": 10000,
119
- "repeat": false
120
- }
121
- }
122
- }, {
123
- "type": "ellipse",
124
- "id": "template-ellipse",
125
- "templatePrefix": "ELLIPSE-",
126
- "cx": -10,
127
- "cy": -10,
128
- "rx": 10,
129
- "ry": 10,
130
- "strokeStyle": "red",
131
- "lineWidth": 1,
132
- "fillStyle": "white",
133
- "animation": {
134
- "oncreate": {
135
- "type": "outline",
136
- "rideOn": "outline-inner",
137
- "duration": 5000,
138
- "repeat": false
139
- }
140
- }
141
- }, {
142
- "type": "clone",
143
- "top": 30,
144
- "left": 10,
145
- "width": 10,
146
- "height": 10,
147
- "strokeStyle": "red",
148
- "fillStyle": "yellow",
149
- "lineWidth": 1,
150
- "target": "template-rect",
151
- "duration": 500,
152
- "targetRetention": 10000,
153
- "autostart": true,
154
- "repeat": true
155
- }, {
156
- "type": "clone",
157
- "top": 30,
158
- "left": 10,
159
- "width": 10,
160
- "height": 10,
161
- "strokeStyle": "navy",
162
- "fillStyle": "orange",
163
- "lineWidth": 1,
164
- "target": "template-ellipse",
165
- "duration": 500,
166
- "targetRetention": 5000,
167
- "autostart": true,
168
- "repeat": true
169
- }]
170
- }
171
- });
172
- </script>
173
- </body>
174
- </html>
package/demo/things-scene-clone.html DELETED
@@ -1,5 +0,0 @@
1
- <!--
2
- @license
3
- Copyright © 2017 HatioLab Inc. All rights reserved.
4
- -->
5
- <script src="../things-scene-clone.js"></script>
package/src/clone.ts DELETED
@@ -1,140 +0,0 @@
1
- import { Component, ComponentNature, Container, Model, RectPath, Shape } from '@hatiolab/things-scene'
2
-
3
- const NATURE: ComponentNature = {
4
- mutable: false,
5
- resizable: true,
6
- rotatable: true,
7
- properties: [
8
- {
9
- type: 'number',
10
- label: 'duration',
11
- name: 'duration',
12
- property: 'duration',
13
- placeholder: 'milli-seconds'
14
- },
15
- {
16
- type: 'id-input',
17
- label: 'target',
18
- name: 'target'
19
- },
20
- {
21
- type: 'checkbox',
22
- label: 'repeat',
23
- name: 'repeat',
24
- property: 'repeat'
25
- },
26
- {
27
- type: 'checkbox',
28
- label: 'autostart',
29
- name: 'autostart',
30
- property: 'autostart'
31
- },
32
- {
33
- type: 'number',
34
- label: 'targetRetention',
35
- name: 'targetRetention',
36
- property: 'targetRetention',
37
- placeholder: 'milli-seconds'
38
- }
39
- ],
40
- 'value-property': 'started',
41
- help: 'scene/component/clone'
42
- }
43
-
44
- function clone(cloner: Component, target: string, targetRetention: number) {
45
- var targetComponent = cloner.root.findById(target)
46
- if (!targetComponent) return
47
-
48
- var clone = Object.assign(targetComponent.hierarchy, {
49
- templatePrefix: '',
50
- id: ''
51
- })
52
-
53
- if (targetRetention) clone.retention = targetRetention
54
-
55
- var component = Model.compile(clone, cloner.app)
56
- var index = targetComponent.parent.indexOf(targetComponent)
57
- targetComponent.parent.insertComponentAt(component, index + 1)
58
-
59
- return component
60
- }
61
-
62
- export default class Clone extends RectPath(Shape) {
63
- private _started: boolean = false
64
- private _timeout?: number
65
-
66
- added(parent: Container) {
67
- this.started = false
68
- setTimeout(() => {
69
- if (this.getState('autostart')) this.started = true
70
- }, 500)
71
- }
72
-
73
- dispose() {
74
- this.started = false
75
- super.dispose()
76
- }
77
-
78
- render(ctx: CanvasRenderingContext2D) {
79
- var { left, top, width, height } = this.bounds
80
-
81
- ctx.beginPath()
82
-
83
- ctx.fillStyle = 'black'
84
- ctx.strokeStyle = 'black'
85
-
86
- ctx.rect(left, top, width * 0.8, height * 0.8)
87
- ctx.fill()
88
- ctx.stroke()
89
-
90
- ctx.beginPath()
91
-
92
- ctx.rect(left + width * 0.2, top + height * 0.2, width * 0.8, height * 0.8)
93
- }
94
-
95
- get nature() {
96
- return NATURE
97
- }
98
-
99
- get started() {
100
- return this._started
101
- }
102
-
103
- set started(started) {
104
- if (!!this.started == !!started) return
105
-
106
- this._started = !!started
107
-
108
- if (!this.app?.isViewMode) return
109
-
110
- if (this._started) {
111
- var { repeat, duration, target, targetRetention } = this.state
112
-
113
- if (!target) return
114
-
115
- if (duration < 500) duration = 500
116
-
117
- let self = this
118
-
119
- function _() {
120
- if (!self._started || !clone(self, target, targetRetention) || !duration || !repeat) {
121
- self._started = false
122
- return
123
- }
124
-
125
- self._timeout = setTimeout(() => {
126
- requestAnimationFrame(_)
127
- }, duration)
128
- }
129
-
130
- requestAnimationFrame(_)
131
- } else {
132
- if (this._timeout) {
133
- clearTimeout(this._timeout)
134
- delete this._timeout
135
- }
136
- }
137
- }
138
- }
139
-
140
- Component.register('clone', Clone)
package/src/index.ts DELETED
@@ -1 +0,0 @@
1
- export { default as Clone } from './clone'