@operato/scene-clone 8.0.0-beta.1 → 8.0.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 +5 -5
  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-clone-bug-2.html DELETED
@@ -1,188 +0,0 @@
1
- <!--
2
- @license
3
- Copyright © 2017 HatioLab Inc. All rights reserved.
4
- -->
5
- <!doctype html>
6
-
7
- <html>
8
-
9
- <head>
10
- <meta charset="utf-8">
11
- <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
12
- <title>clone Demo</title>
13
- <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
14
-
15
- <link rel="import" href="../../things-scene-viewer/things-scene-viewer.html">
16
- <link rel="import" href="../../things-scene-viewer/things-scene-layer.html">
17
- <link rel="import" href="../../things-scene-viewer/things-scene-handler.html">
18
-
19
- <link rel="import" href="../../things-designer-elements/things-editor-color.html">
20
- <link rel="import" href="../../things-designer-elements/things-editor-color-stops.html">
21
- <link rel="import" href="../../things-scene-modeler/things-scene-properties.html">
22
-
23
- <link rel="import" href="./things-scene-clone.html">
24
-
25
- <style is="custom-style">
26
- things-scene-viewer {
27
- display: block;
28
- width: 640px;
29
- height: 480px;
30
- }
31
- </style>
32
- </head>
33
-
34
- <body unresolved>
35
-
36
- <template is="dom-bind" id="app">
37
- <p>An example of <code>&lt;clone&gt;</code>:</p>
38
-
39
- <things-scene-viewer id='scene' scene='{{scene}}' selected='{{selected}}' model='[[model]]' mode="0">
40
- <!-- <things-scene-layer type="selection-layer"></things-scene-layer>
41
- <things-scene-layer type="modeling-layer"></things-scene-layer>
42
- <things-scene-handler type="text-editor"></things-scene-handler>
43
- <things-scene-handler type="move-handler"></things-scene-handler> -->
44
- </things-scene-viewer>
45
-
46
- <things-scene-properties scene="[[scene]]" selected="[[selected]]" model="{{target}}" bounds="{{bounds}}">
47
- <fieldset class="column-double">
48
- <legend>clone style</legend>
49
- <label>value</label>
50
- <input type="number" value-as-number="{{target.value::change}}" min="0" max="100" step="1" />
51
- </fieldset>
52
- </things-scene-properties>
53
-
54
- <input type="button" value="start" onclick="start();"></input>
55
- <input type="button" value="stop" onclick="stop();"></input>
56
- </template>
57
-
58
- <script>
59
- /*
60
- * Copyright © HatioLab Inc. All rights reserved.
61
- */
62
- /*
63
- * Copyright © HatioLab Inc. All rights reserved.
64
- */
65
-
66
- var lastIndex = 0;
67
- const CANVAS_SIZE = {
68
- width: 1920,
69
- height: 1080
70
- }
71
-
72
- const FIRST_BOX_SIZE = {
73
- width: 200,
74
- height: 200
75
- }
76
-
77
- const CENTER = {
78
- x: CANVAS_SIZE.width / 2,
79
- y: CANVAS_SIZE.height / 2
80
- }
81
-
82
- function getRectModel(index) {
83
- var boxWidth = Math.floor(FIRST_BOX_SIZE.width * (1 + index * 0.1));
84
- var boxHeight = Math.floor(FIRST_BOX_SIZE.height * (1 + index * 0.1));
85
- var left = Math.floor(CENTER.x - boxWidth / 2);
86
- var top = Math.floor(CENTER.y - boxHeight / 2);
87
-
88
- return {
89
- "type": "rect",
90
- "id": "outline-" + (index + 1),
91
- "top": top,
92
- "left": left,
93
- "width": boxWidth,
94
- "height": boxHeight,
95
- "strokeStyle": "red",
96
- "lineWidth": 1
97
- }
98
- }
99
-
100
- function getTemplateRect(index) {
101
- return {
102
- "type": "rect",
103
- "id": "template-rect-" + (index + 1),
104
- "templatePrefix": "RECT" + (index + 1) + "-",
105
- "top": -10,
106
- "left": -10,
107
- "width": 10,
108
- "height": 10,
109
- "strokeStyle": "black",
110
- "lineWidth": 1,
111
- "fillStyle": "white",
112
- "retention": 10000,
113
- "animation": {
114
- "oncreate": {
115
- "type": "outline",
116
- "rideOn": "outline-" + (index + 1),
117
- "duration": 10000,
118
- "repeat": false
119
- }
120
- }
121
- }
122
- }
123
-
124
- function templateDataSet() {
125
- var interval = setTimeout(() => {
126
- var data = {};
127
- for (var i = 0; i < 30; i++) {
128
- app.scene.variable("RECT" + (i + 1) + "-" + (lastIndex + 1), {
129
- started: 1
130
- })
131
- }
132
-
133
- console.log(app.scene.root.components.length)
134
-
135
- requestAnimationFrame(function() {
136
- templateDataSet();
137
- })
138
-
139
- lastIndex++;
140
- }, 500)
141
- }
142
-
143
- function getComponentModel() {
144
- var components = [];
145
- for (var i = 0; i < 30; i++) {
146
- components.push(getRectModel(i))
147
- components.push(getTemplateRect(i))
148
- }
149
-
150
- return components;
151
- }
152
-
153
- var model = {
154
- "width": CANVAS_SIZE.width,
155
- "height": CANVAS_SIZE.height,
156
- "components": getComponentModel()
157
- };
158
-
159
- function dispose() {
160
- p.dispose();
161
- }
162
-
163
- function change() {
164
- }
165
-
166
- function fit() {
167
- p.fit('both')
168
- }
169
-
170
- function fullscreen() {
171
- p.fullscreen('both')
172
- }
173
-
174
-
175
- window.addEventListener('WebComponentsReady', function (e) {
176
- var app = document.querySelector('#app')
177
-
178
- app.model = JSON.parse(JSON.stringify(model))
179
-
180
- setTimeout(() => {
181
- app.scene.fit('both')
182
- templateDataSet();
183
- }, 10)
184
- });
185
- </script>
186
- </body>
187
-
188
- </html>
package/demo/index-clone-bug.html DELETED
@@ -1,185 +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
- /*
66
- * Copyright © HatioLab Inc. All rights reserved.
67
- */
68
- const CANVAS_SIZE = {
69
- width: 1920,
70
- height: 1080
71
- }
72
-
73
- const FIRST_BOX_SIZE = {
74
- width: 200,
75
- height: 200
76
- }
77
-
78
- const CENTER = {
79
- x: CANVAS_SIZE.width / 2,
80
- y: CANVAS_SIZE.height / 2
81
- }
82
-
83
- function getRectModel(index) {
84
- var boxWidth = Math.floor(FIRST_BOX_SIZE.width * (1 + index * 0.1));
85
- var boxHeight = Math.floor(FIRST_BOX_SIZE.height * (1 + index * 0.1));
86
- var left = Math.floor(CENTER.x - boxWidth / 2);
87
- var top = Math.floor(CENTER.y - boxHeight / 2);
88
-
89
- return {
90
- "type": "rect",
91
- "id": "outline-" + (index + 1),
92
- "top": top,
93
- "left": left,
94
- "width": boxWidth,
95
- "height": boxHeight,
96
- "strokeStyle": "red",
97
- "lineWidth": 1
98
- }
99
- }
100
-
101
- function getTemplateRect(index) {
102
- return {
103
- "type": "rect",
104
- "id": "template-rect-" + (index + 1),
105
- "templatePrefix": "RECT" + (index + 1) + "-",
106
- "top": -10,
107
- "left": -10,
108
- "width": 10,
109
- "height": 10,
110
- "strokeStyle": "black",
111
- "lineWidth": 1,
112
- "fillStyle": "white",
113
- "animation": {
114
- "oncreate": {
115
- "type": "outline",
116
- "rideOn": "outline-" + (index + 1),
117
- "duration": 10000,
118
- "repeat": true
119
- }
120
- }
121
- }
122
- }
123
-
124
- function getCloneModel(index) {
125
- return {
126
- "type": "clone",
127
- "top": -10,
128
- "left": -10,
129
- "width": 10,
130
- "height": 10,
131
- "strokeStyle": "red",
132
- "fillStyle": "yellow",
133
- "lineWidth": 1,
134
- "target": "template-rect-" + (index + 1),
135
- "duration": 500,
136
- "targetRetention": 10000,
137
- "autostart": true,
138
- "repeat": true
139
- }
140
- }
141
-
142
- function getComponentModel() {
143
- var components = [];
144
- for (var i = 0; i < 30; i++) {
145
- components.push(getRectModel(i))
146
- components.push(getTemplateRect(i))
147
- components.push(getCloneModel(i))
148
- }
149
-
150
- return components;
151
- }
152
-
153
- var model = {
154
- "width": CANVAS_SIZE.width,
155
- "height": CANVAS_SIZE.height,
156
- "components": getComponentModel()
157
- };
158
-
159
- function dispose() {
160
- app.dispose();
161
- }
162
-
163
- function change() {
164
- }
165
-
166
- function fit() {
167
- app.fit('both')
168
- }
169
-
170
- function fullscreen() {
171
- app.fullscreen('both')
172
- }
173
-
174
- window.addEventListener('WebComponentsReady', function(e) {
175
- var app = document.querySelector('#app')
176
-
177
- app.model = JSON.parse(JSON.stringify(model))
178
-
179
- setTimeout( () => {
180
- app.scene.fit('both')
181
- }, 10)
182
- });
183
- </script>
184
- </body>
185
- </html>