kitchen-simulator 3.1.2 → 4.0.1-react-18

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 (138) hide show
  1. package/README.md +0 -3
  2. package/es/AppContext.js +1 -1
  3. package/es/LiteKitchenConfigurator.js +15 -25
  4. package/es/LiteRenderer.js +2 -5
  5. package/es/actions/export.js +12 -25
  6. package/es/catalog/catalog.js +5 -21
  7. package/es/components/content.js +2 -5
  8. package/es/components/export.js +6 -4
  9. package/es/components/style/export.js +2 -28
  10. package/es/components/style/form-number-input.js +22 -11
  11. package/es/components/viewer2d/group.js +4 -5
  12. package/es/components/viewer2d/item.js +300 -316
  13. package/es/components/viewer2d/layer.js +1 -1
  14. package/es/components/viewer2d/line.js +47 -17
  15. package/es/components/viewer2d/rulerX.js +0 -3
  16. package/es/components/viewer2d/rulerY.js +0 -3
  17. package/es/components/viewer2d/scene.js +1 -4
  18. package/es/components/viewer2d/state.js +1 -1
  19. package/es/components/viewer2d/viewer2d.js +43 -28
  20. package/es/components/viewer3d/viewer3d-first-person.js +0 -8
  21. package/es/components/viewer3d/viewer3d.js +0 -9
  22. package/es/devLiteRenderer.js +148 -317
  23. package/es/index.js +12 -4
  24. package/es/mocks/appliancePayload.json +27 -0
  25. package/es/mocks/cabinetPayload.json +1914 -0
  26. package/es/mocks/cabinetPayload2.json +76 -0
  27. package/es/mocks/dataBundle2.json +4 -0
  28. package/es/mocks/distancePayload.json +6 -0
  29. package/es/mocks/doorStylePayload2.json +84 -0
  30. package/es/mocks/furnishingPayload.json +23 -0
  31. package/es/mocks/itemCDSPayload.json +27 -0
  32. package/es/mocks/lightingPayload.json +23 -0
  33. package/es/mocks/mockProps.json +43 -0
  34. package/es/mocks/mockProps2.json +9 -0
  35. package/es/mocks/moldingPayload.json +19 -0
  36. package/es/mocks/projectItemsCatalog.json +133 -0
  37. package/es/mocks/rectangleShape.json +238 -0
  38. package/es/mocks/replaceCabinetPayload.json +81 -0
  39. package/es/mocks/roomShapePayload.json +5 -0
  40. package/es/useAppContext.js +8 -0
  41. package/lib/AppContext.js +1 -1
  42. package/lib/LiteKitchenConfigurator.js +15 -25
  43. package/lib/LiteRenderer.js +2 -5
  44. package/lib/actions/export.js +39 -35
  45. package/lib/catalog/catalog.js +4 -20
  46. package/lib/components/content.js +2 -5
  47. package/lib/components/export.js +26 -6
  48. package/lib/components/style/export.js +1 -105
  49. package/lib/components/style/form-number-input.js +22 -11
  50. package/lib/components/viewer2d/group.js +4 -5
  51. package/lib/components/viewer2d/item.js +298 -314
  52. package/lib/components/viewer2d/layer.js +1 -1
  53. package/lib/components/viewer2d/line.js +47 -17
  54. package/lib/components/viewer2d/rulerX.js +0 -3
  55. package/lib/components/viewer2d/rulerY.js +0 -3
  56. package/lib/components/viewer2d/scene.js +1 -4
  57. package/lib/components/viewer2d/state.js +1 -1
  58. package/lib/components/viewer2d/viewer2d.js +42 -27
  59. package/lib/components/viewer3d/viewer3d-first-person.js +0 -8
  60. package/lib/components/viewer3d/viewer3d.js +0 -9
  61. package/lib/devLiteRenderer.js +147 -316
  62. package/lib/index.js +12 -4
  63. package/lib/mocks/appliancePayload.json +27 -0
  64. package/lib/mocks/cabinetPayload.json +1914 -0
  65. package/lib/mocks/cabinetPayload2.json +76 -0
  66. package/lib/mocks/dataBundle2.json +4 -0
  67. package/lib/mocks/distancePayload.json +6 -0
  68. package/lib/mocks/doorStylePayload2.json +84 -0
  69. package/lib/mocks/furnishingPayload.json +23 -0
  70. package/lib/mocks/itemCDSPayload.json +27 -0
  71. package/lib/mocks/lightingPayload.json +23 -0
  72. package/lib/mocks/mockProps.json +43 -0
  73. package/lib/mocks/mockProps2.json +9 -0
  74. package/lib/mocks/moldingPayload.json +19 -0
  75. package/lib/mocks/projectItemsCatalog.json +133 -0
  76. package/lib/mocks/rectangleShape.json +238 -0
  77. package/lib/mocks/replaceCabinetPayload.json +81 -0
  78. package/lib/mocks/roomShapePayload.json +5 -0
  79. package/lib/useAppContext.js +16 -0
  80. package/package.json +16 -21
  81. package/es/catalog/properties/export.js +0 -21
  82. package/es/catalog/properties/property-checkbox.js +0 -68
  83. package/es/catalog/properties/property-color.js +0 -39
  84. package/es/catalog/properties/property-enum.js +0 -50
  85. package/es/catalog/properties/property-hidden.js +0 -19
  86. package/es/catalog/properties/property-lenght-measure.js +0 -100
  87. package/es/catalog/properties/property-length-measure.js +0 -84
  88. package/es/catalog/properties/property-length-measure_hole.js +0 -100
  89. package/es/catalog/properties/property-number.js +0 -48
  90. package/es/catalog/properties/property-read-only.js +0 -26
  91. package/es/catalog/properties/property-string.js +0 -48
  92. package/es/catalog/properties/property-toggle.js +0 -39
  93. package/es/catalog/properties/shared-property-style.js +0 -14
  94. package/es/components/style/button.js +0 -106
  95. package/es/components/style/cancel-button.js +0 -21
  96. package/es/components/style/content-container.js +0 -30
  97. package/es/components/style/content-title.js +0 -25
  98. package/es/components/style/delete-button.js +0 -24
  99. package/es/components/style/form-block.js +0 -20
  100. package/es/components/style/form-color-input.js +0 -26
  101. package/es/components/style/form-label.js +0 -22
  102. package/es/components/style/form-number-input_2.js +0 -200
  103. package/es/components/style/form-select.js +0 -19
  104. package/es/components/style/form-slider.js +0 -60
  105. package/es/components/style/form-submit-button.js +0 -25
  106. package/es/components/style/form-text-input.js +0 -69
  107. package/es/plugins/SVGLoader.js +0 -1414
  108. package/es/styles/export.js +0 -5
  109. package/es/styles/tabs.css +0 -40
  110. package/lib/catalog/properties/export.js +0 -81
  111. package/lib/catalog/properties/property-checkbox.js +0 -76
  112. package/lib/catalog/properties/property-color.js +0 -47
  113. package/lib/catalog/properties/property-enum.js +0 -58
  114. package/lib/catalog/properties/property-hidden.js +0 -27
  115. package/lib/catalog/properties/property-lenght-measure.js +0 -108
  116. package/lib/catalog/properties/property-length-measure.js +0 -92
  117. package/lib/catalog/properties/property-length-measure_hole.js +0 -108
  118. package/lib/catalog/properties/property-number.js +0 -56
  119. package/lib/catalog/properties/property-read-only.js +0 -34
  120. package/lib/catalog/properties/property-string.js +0 -56
  121. package/lib/catalog/properties/property-toggle.js +0 -47
  122. package/lib/catalog/properties/shared-property-style.js +0 -21
  123. package/lib/components/style/button.js +0 -115
  124. package/lib/components/style/cancel-button.js +0 -29
  125. package/lib/components/style/content-container.js +0 -38
  126. package/lib/components/style/content-title.js +0 -35
  127. package/lib/components/style/delete-button.js +0 -34
  128. package/lib/components/style/form-block.js +0 -28
  129. package/lib/components/style/form-color-input.js +0 -34
  130. package/lib/components/style/form-label.js +0 -30
  131. package/lib/components/style/form-number-input_2.js +0 -209
  132. package/lib/components/style/form-select.js +0 -29
  133. package/lib/components/style/form-slider.js +0 -68
  134. package/lib/components/style/form-submit-button.js +0 -35
  135. package/lib/components/style/form-text-input.js +0 -78
  136. package/lib/plugins/SVGLoader.js +0 -1419
  137. package/lib/styles/export.js +0 -13
  138. package/lib/styles/tabs.css +0 -40
@@ -1,1419 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.SVGLoader = void 0;
7
- var _three = require("three");
8
- var SVGLoader = exports.SVGLoader = function SVGLoader(manager) {
9
- _three.Loader.call(this, manager);
10
-
11
- // Default dots per inch
12
- this.defaultDPI = 90;
13
-
14
- // Accepted units: 'mm', 'cm', 'in', 'pt', 'pc', 'px'
15
- this.defaultUnit = 'px';
16
- };
17
- SVGLoader.prototype = Object.assign(Object.create(_three.Loader.prototype), {
18
- constructor: SVGLoader,
19
- load: function load(url, onLoad, onProgress, onError) {
20
- var scope = this;
21
- var loader = new _three.FileLoader(scope.manager);
22
- loader.setPath(scope.path);
23
- loader.setRequestHeader(scope.requestHeader);
24
- loader.setWithCredentials(scope.withCredentials);
25
- loader.load(url, function (text) {
26
- try {
27
- onLoad(scope.parse(text));
28
- } catch (e) {
29
- if (onError) {
30
- onError(e);
31
- } else {
32
- console.error(e);
33
- }
34
- scope.manager.itemError(url);
35
- }
36
- }, onProgress, onError);
37
- },
38
- parse: function parse(text) {
39
- var scope = this;
40
- function parseNode(node, style) {
41
- if (node.nodeType !== 1) return;
42
- var transform = getNodeTransform(node);
43
- var traverseChildNodes = true;
44
- var path = null;
45
- switch (node.nodeName) {
46
- case 'svg':
47
- break;
48
- case 'style':
49
- parseCSSStylesheet(node);
50
- break;
51
- case 'g':
52
- style = parseStyle(node, style);
53
- break;
54
- case 'path':
55
- style = parseStyle(node, style);
56
- if (node.hasAttribute('d')) path = parsePathNode(node);
57
- break;
58
- case 'rect':
59
- style = parseStyle(node, style);
60
- path = parseRectNode(node);
61
- break;
62
- case 'polygon':
63
- style = parseStyle(node, style);
64
- path = parsePolygonNode(node);
65
- break;
66
- case 'polyline':
67
- style = parseStyle(node, style);
68
- path = parsePolylineNode(node);
69
- break;
70
- case 'circle':
71
- style = parseStyle(node, style);
72
- path = parseCircleNode(node);
73
- break;
74
- case 'ellipse':
75
- style = parseStyle(node, style);
76
- path = parseEllipseNode(node);
77
- break;
78
- case 'line':
79
- style = parseStyle(node, style);
80
- path = parseLineNode(node);
81
- break;
82
- case 'defs':
83
- traverseChildNodes = false;
84
- break;
85
- case 'use':
86
- style = parseStyle(node, style);
87
- var usedNodeId = node.href.baseVal.substring(1);
88
- if (node.viewportElement.getElementById(usedNodeId)) {
89
- var usedNode = node.viewportElement.getElementById(usedNodeId);
90
- if (usedNode) {
91
- parseNode(usedNode, style);
92
- } else {
93
- console.warn("SVGLoader: 'use node' references non-existent node id: " + usedNodeId);
94
- }
95
- }
96
- break;
97
- default:
98
- // console.log( node );
99
- }
100
- if (path) {
101
- if (style.fill !== undefined && style.fill !== 'none') {
102
- path.color.setStyle(style.fill);
103
- }
104
- transformPath(path, currentTransform);
105
- paths.push(path);
106
- path.userData = {
107
- node: node,
108
- style: style
109
- };
110
- }
111
- if (traverseChildNodes) {
112
- var nodes = node.childNodes;
113
- for (var i = 0; i < nodes.length; i++) {
114
- parseNode(nodes[i], style);
115
- }
116
- }
117
- if (transform) {
118
- transformStack.pop();
119
- if (transformStack.length > 0) {
120
- currentTransform.copy(transformStack[transformStack.length - 1]);
121
- } else {
122
- currentTransform.identity();
123
- }
124
- }
125
- }
126
- function parsePathNode(node) {
127
- var path = new _three.ShapePath();
128
- var point = new _three.Vector2();
129
- var control = new _three.Vector2();
130
- var firstPoint = new _three.Vector2();
131
- var isFirstPoint = true;
132
- var doSetFirstPoint = false;
133
- var d = node.getAttribute('d');
134
-
135
- // console.log( d );
136
-
137
- var commands = d.match(/[a-df-z][^a-df-z]*/gi);
138
- for (var i = 0, l = commands.length; i < l; i++) {
139
- var command = commands[i];
140
- var type = command.charAt(0);
141
- var data = command.substr(1).trim();
142
- if (isFirstPoint === true) {
143
- doSetFirstPoint = true;
144
- isFirstPoint = false;
145
- }
146
- switch (type) {
147
- case 'M':
148
- var numbers = parseFloats(data);
149
- for (var j = 0, jl = numbers.length; j < jl; j += 2) {
150
- point.x = numbers[j + 0];
151
- point.y = numbers[j + 1];
152
- control.x = point.x;
153
- control.y = point.y;
154
- if (j === 0) {
155
- path.moveTo(point.x, point.y);
156
- } else {
157
- path.lineTo(point.x, point.y);
158
- }
159
- if (j === 0 && doSetFirstPoint === true) firstPoint.copy(point);
160
- }
161
- break;
162
- case 'H':
163
- var numbers = parseFloats(data);
164
- for (var j = 0, jl = numbers.length; j < jl; j++) {
165
- point.x = numbers[j];
166
- control.x = point.x;
167
- control.y = point.y;
168
- path.lineTo(point.x, point.y);
169
- if (j === 0 && doSetFirstPoint === true) firstPoint.copy(point);
170
- }
171
- break;
172
- case 'V':
173
- var numbers = parseFloats(data);
174
- for (var j = 0, jl = numbers.length; j < jl; j++) {
175
- point.y = numbers[j];
176
- control.x = point.x;
177
- control.y = point.y;
178
- path.lineTo(point.x, point.y);
179
- if (j === 0 && doSetFirstPoint === true) firstPoint.copy(point);
180
- }
181
- break;
182
- case 'L':
183
- var numbers = parseFloats(data);
184
- for (var j = 0, jl = numbers.length; j < jl; j += 2) {
185
- point.x = numbers[j + 0];
186
- point.y = numbers[j + 1];
187
- control.x = point.x;
188
- control.y = point.y;
189
- path.lineTo(point.x, point.y);
190
- if (j === 0 && doSetFirstPoint === true) firstPoint.copy(point);
191
- }
192
- break;
193
- case 'C':
194
- var numbers = parseFloats(data);
195
- for (var j = 0, jl = numbers.length; j < jl; j += 6) {
196
- path.bezierCurveTo(numbers[j + 0], numbers[j + 1], numbers[j + 2], numbers[j + 3], numbers[j + 4], numbers[j + 5]);
197
- control.x = numbers[j + 2];
198
- control.y = numbers[j + 3];
199
- point.x = numbers[j + 4];
200
- point.y = numbers[j + 5];
201
- if (j === 0 && doSetFirstPoint === true) firstPoint.copy(point);
202
- }
203
- break;
204
- case 'S':
205
- var numbers = parseFloats(data);
206
- for (var j = 0, jl = numbers.length; j < jl; j += 4) {
207
- path.bezierCurveTo(getReflection(point.x, control.x), getReflection(point.y, control.y), numbers[j + 0], numbers[j + 1], numbers[j + 2], numbers[j + 3]);
208
- control.x = numbers[j + 0];
209
- control.y = numbers[j + 1];
210
- point.x = numbers[j + 2];
211
- point.y = numbers[j + 3];
212
- if (j === 0 && doSetFirstPoint === true) firstPoint.copy(point);
213
- }
214
- break;
215
- case 'Q':
216
- var numbers = parseFloats(data);
217
- for (var j = 0, jl = numbers.length; j < jl; j += 4) {
218
- path.quadraticCurveTo(numbers[j + 0], numbers[j + 1], numbers[j + 2], numbers[j + 3]);
219
- control.x = numbers[j + 0];
220
- control.y = numbers[j + 1];
221
- point.x = numbers[j + 2];
222
- point.y = numbers[j + 3];
223
- if (j === 0 && doSetFirstPoint === true) firstPoint.copy(point);
224
- }
225
- break;
226
- case 'T':
227
- var numbers = parseFloats(data);
228
- for (var j = 0, jl = numbers.length; j < jl; j += 2) {
229
- var rx = getReflection(point.x, control.x);
230
- var ry = getReflection(point.y, control.y);
231
- path.quadraticCurveTo(rx, ry, numbers[j + 0], numbers[j + 1]);
232
- control.x = rx;
233
- control.y = ry;
234
- point.x = numbers[j + 0];
235
- point.y = numbers[j + 1];
236
- if (j === 0 && doSetFirstPoint === true) firstPoint.copy(point);
237
- }
238
- break;
239
- case 'A':
240
- var numbers = parseFloats(data);
241
- for (var j = 0, jl = numbers.length; j < jl; j += 7) {
242
- var start = point.clone();
243
- point.x = numbers[j + 5];
244
- point.y = numbers[j + 6];
245
- control.x = point.x;
246
- control.y = point.y;
247
- parseArcCommand(path, numbers[j], numbers[j + 1], numbers[j + 2], numbers[j + 3], numbers[j + 4], start, point);
248
- if (j === 0 && doSetFirstPoint === true) firstPoint.copy(point);
249
- }
250
- break;
251
- case 'm':
252
- var numbers = parseFloats(data);
253
- for (var j = 0, jl = numbers.length; j < jl; j += 2) {
254
- point.x += numbers[j + 0];
255
- point.y += numbers[j + 1];
256
- control.x = point.x;
257
- control.y = point.y;
258
- if (j === 0) {
259
- path.moveTo(point.x, point.y);
260
- } else {
261
- path.lineTo(point.x, point.y);
262
- }
263
- if (j === 0 && doSetFirstPoint === true) firstPoint.copy(point);
264
- }
265
- break;
266
- case 'h':
267
- var numbers = parseFloats(data);
268
- for (var j = 0, jl = numbers.length; j < jl; j++) {
269
- point.x += numbers[j];
270
- control.x = point.x;
271
- control.y = point.y;
272
- path.lineTo(point.x, point.y);
273
- if (j === 0 && doSetFirstPoint === true) firstPoint.copy(point);
274
- }
275
- break;
276
- case 'v':
277
- var numbers = parseFloats(data);
278
- for (var j = 0, jl = numbers.length; j < jl; j++) {
279
- point.y += numbers[j];
280
- control.x = point.x;
281
- control.y = point.y;
282
- path.lineTo(point.x, point.y);
283
- if (j === 0 && doSetFirstPoint === true) firstPoint.copy(point);
284
- }
285
- break;
286
- case 'l':
287
- var numbers = parseFloats(data);
288
- for (var j = 0, jl = numbers.length; j < jl; j += 2) {
289
- point.x += numbers[j + 0];
290
- point.y += numbers[j + 1];
291
- control.x = point.x;
292
- control.y = point.y;
293
- path.lineTo(point.x, point.y);
294
- if (j === 0 && doSetFirstPoint === true) firstPoint.copy(point);
295
- }
296
- break;
297
- case 'c':
298
- var numbers = parseFloats(data);
299
- for (var j = 0, jl = numbers.length; j < jl; j += 6) {
300
- path.bezierCurveTo(point.x + numbers[j + 0], point.y + numbers[j + 1], point.x + numbers[j + 2], point.y + numbers[j + 3], point.x + numbers[j + 4], point.y + numbers[j + 5]);
301
- control.x = point.x + numbers[j + 2];
302
- control.y = point.y + numbers[j + 3];
303
- point.x += numbers[j + 4];
304
- point.y += numbers[j + 5];
305
- if (j === 0 && doSetFirstPoint === true) firstPoint.copy(point);
306
- }
307
- break;
308
- case 's':
309
- var numbers = parseFloats(data);
310
- for (var j = 0, jl = numbers.length; j < jl; j += 4) {
311
- path.bezierCurveTo(getReflection(point.x, control.x), getReflection(point.y, control.y), point.x + numbers[j + 0], point.y + numbers[j + 1], point.x + numbers[j + 2], point.y + numbers[j + 3]);
312
- control.x = point.x + numbers[j + 0];
313
- control.y = point.y + numbers[j + 1];
314
- point.x += numbers[j + 2];
315
- point.y += numbers[j + 3];
316
- if (j === 0 && doSetFirstPoint === true) firstPoint.copy(point);
317
- }
318
- break;
319
- case 'q':
320
- var numbers = parseFloats(data);
321
- for (var j = 0, jl = numbers.length; j < jl; j += 4) {
322
- path.quadraticCurveTo(point.x + numbers[j + 0], point.y + numbers[j + 1], point.x + numbers[j + 2], point.y + numbers[j + 3]);
323
- control.x = point.x + numbers[j + 0];
324
- control.y = point.y + numbers[j + 1];
325
- point.x += numbers[j + 2];
326
- point.y += numbers[j + 3];
327
- if (j === 0 && doSetFirstPoint === true) firstPoint.copy(point);
328
- }
329
- break;
330
- case 't':
331
- var numbers = parseFloats(data);
332
- for (var j = 0, jl = numbers.length; j < jl; j += 2) {
333
- var rx = getReflection(point.x, control.x);
334
- var ry = getReflection(point.y, control.y);
335
- path.quadraticCurveTo(rx, ry, point.x + numbers[j + 0], point.y + numbers[j + 1]);
336
- control.x = rx;
337
- control.y = ry;
338
- point.x = point.x + numbers[j + 0];
339
- point.y = point.y + numbers[j + 1];
340
- if (j === 0 && doSetFirstPoint === true) firstPoint.copy(point);
341
- }
342
- break;
343
- case 'a':
344
- var numbers = parseFloats(data);
345
- for (var j = 0, jl = numbers.length; j < jl; j += 7) {
346
- var start = point.clone();
347
- point.x += numbers[j + 5];
348
- point.y += numbers[j + 6];
349
- control.x = point.x;
350
- control.y = point.y;
351
- parseArcCommand(path, numbers[j], numbers[j + 1], numbers[j + 2], numbers[j + 3], numbers[j + 4], start, point);
352
- if (j === 0 && doSetFirstPoint === true) firstPoint.copy(point);
353
- }
354
- break;
355
- case 'Z':
356
- case 'z':
357
- path.currentPath.autoClose = true;
358
- if (path.currentPath.curves.length > 0) {
359
- // Reset point to beginning of Path
360
- point.copy(firstPoint);
361
- path.currentPath.currentPoint.copy(point);
362
- isFirstPoint = true;
363
- }
364
- break;
365
- default:
366
- console.warn(command);
367
- }
368
-
369
- // console.log( type, parseFloats( data ), parseFloats( data ).length )
370
-
371
- doSetFirstPoint = false;
372
- }
373
- return path;
374
- }
375
- function parseCSSStylesheet(node) {
376
- if (!node.sheet || !node.sheet.cssRules || !node.sheet.cssRules.length) return;
377
- for (var i = 0; i < node.sheet.cssRules.length; i++) {
378
- var stylesheet = node.sheet.cssRules[i];
379
- if (stylesheet.type !== 1) continue;
380
- var selectorList = stylesheet.selectorText.split(/,/gm).filter(Boolean).map(function (i) {
381
- return i.trim();
382
- });
383
- for (var j = 0; j < selectorList.length; j++) {
384
- stylesheets[selectorList[j]] = Object.assign(stylesheets[selectorList[j]] || {}, stylesheet.style);
385
- }
386
- }
387
- }
388
-
389
- /**
390
- * https://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
391
- * https://mortoray.com/2017/02/16/rendering-an-svg-elliptical-arc-as-bezier-curves/ Appendix: Endpoint to center arc conversion
392
- * From
393
- * rx ry x-axis-rotation large-arc-flag sweep-flag x y
394
- * To
395
- * aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation
396
- */
397
-
398
- function parseArcCommand(path, rx, ry, x_axis_rotation, large_arc_flag, sweep_flag, start, end) {
399
- x_axis_rotation = x_axis_rotation * Math.PI / 180;
400
-
401
- // Ensure radii are positive
402
- rx = Math.abs(rx);
403
- ry = Math.abs(ry);
404
-
405
- // Compute (x1', y1')
406
- var dx2 = (start.x - end.x) / 2.0;
407
- var dy2 = (start.y - end.y) / 2.0;
408
- var x1p = Math.cos(x_axis_rotation) * dx2 + Math.sin(x_axis_rotation) * dy2;
409
- var y1p = -Math.sin(x_axis_rotation) * dx2 + Math.cos(x_axis_rotation) * dy2;
410
-
411
- // Compute (cx', cy')
412
- var rxs = rx * rx;
413
- var rys = ry * ry;
414
- var x1ps = x1p * x1p;
415
- var y1ps = y1p * y1p;
416
-
417
- // Ensure radii are large enough
418
- var cr = x1ps / rxs + y1ps / rys;
419
- if (cr > 1) {
420
- // scale up rx,ry equally so cr == 1
421
- var s = Math.sqrt(cr);
422
- rx = s * rx;
423
- ry = s * ry;
424
- rxs = rx * rx;
425
- rys = ry * ry;
426
- }
427
- var dq = rxs * y1ps + rys * x1ps;
428
- var pq = (rxs * rys - dq) / dq;
429
- var q = Math.sqrt(Math.max(0, pq));
430
- if (large_arc_flag === sweep_flag) q = -q;
431
- var cxp = q * rx * y1p / ry;
432
- var cyp = -q * ry * x1p / rx;
433
-
434
- // Step 3: Compute (cx, cy) from (cx', cy')
435
- var cx = Math.cos(x_axis_rotation) * cxp - Math.sin(x_axis_rotation) * cyp + (start.x + end.x) / 2;
436
- var cy = Math.sin(x_axis_rotation) * cxp + Math.cos(x_axis_rotation) * cyp + (start.y + end.y) / 2;
437
-
438
- // Step 4: Compute ��1 and ����
439
- var theta = svgAngle(1, 0, (x1p - cxp) / rx, (y1p - cyp) / ry);
440
- var delta = svgAngle((x1p - cxp) / rx, (y1p - cyp) / ry, (-x1p - cxp) / rx, (-y1p - cyp) / ry) % (Math.PI * 2);
441
- path.currentPath.absellipse(cx, cy, rx, ry, theta, theta + delta, sweep_flag === 0, x_axis_rotation);
442
- }
443
- function svgAngle(ux, uy, vx, vy) {
444
- var dot = ux * vx + uy * vy;
445
- var len = Math.sqrt(ux * ux + uy * uy) * Math.sqrt(vx * vx + vy * vy);
446
- var ang = Math.acos(Math.max(-1, Math.min(1, dot / len))); // floating point precision, slightly over values appear
447
- if (ux * vy - uy * vx < 0) ang = -ang;
448
- return ang;
449
- }
450
-
451
- /*
452
- * According to https://www.w3.org/TR/SVG/shapes.html#RectElementRXAttribute
453
- * rounded corner should be rendered to elliptical arc, but bezier curve does the job well enough
454
- */
455
- function parseRectNode(node) {
456
- var x = parseFloatWithUnits(node.getAttribute('x') || 0);
457
- var y = parseFloatWithUnits(node.getAttribute('y') || 0);
458
- var rx = parseFloatWithUnits(node.getAttribute('rx') || 0);
459
- var ry = parseFloatWithUnits(node.getAttribute('ry') || 0);
460
- var w = parseFloatWithUnits(node.getAttribute('width'));
461
- var h = parseFloatWithUnits(node.getAttribute('height'));
462
- var path = new _three.ShapePath();
463
- path.moveTo(x + 2 * rx, y);
464
- path.lineTo(x + w - 2 * rx, y);
465
- if (rx !== 0 || ry !== 0) path.bezierCurveTo(x + w, y, x + w, y, x + w, y + 2 * ry);
466
- path.lineTo(x + w, y + h - 2 * ry);
467
- if (rx !== 0 || ry !== 0) path.bezierCurveTo(x + w, y + h, x + w, y + h, x + w - 2 * rx, y + h);
468
- path.lineTo(x + 2 * rx, y + h);
469
- if (rx !== 0 || ry !== 0) {
470
- path.bezierCurveTo(x, y + h, x, y + h, x, y + h - 2 * ry);
471
- }
472
- path.lineTo(x, y + 2 * ry);
473
- if (rx !== 0 || ry !== 0) {
474
- path.bezierCurveTo(x, y, x, y, x + 2 * rx, y);
475
- }
476
- return path;
477
- }
478
- function parsePolygonNode(node) {
479
- function iterator(match, a, b) {
480
- var x = parseFloatWithUnits(a);
481
- var y = parseFloatWithUnits(b);
482
- if (index === 0) {
483
- path.moveTo(x, y);
484
- } else {
485
- path.lineTo(x, y);
486
- }
487
- index++;
488
- }
489
- var regex = /(-?[\d\.?]+)[,|\s](-?[\d\.?]+)/g;
490
- var path = new _three.ShapePath();
491
- var index = 0;
492
- node.getAttribute('points').replace(regex, iterator);
493
- path.currentPath.autoClose = true;
494
- return path;
495
- }
496
- function parsePolylineNode(node) {
497
- function iterator(match, a, b) {
498
- var x = parseFloatWithUnits(a);
499
- var y = parseFloatWithUnits(b);
500
- if (index === 0) {
501
- path.moveTo(x, y);
502
- } else {
503
- path.lineTo(x, y);
504
- }
505
- index++;
506
- }
507
- var regex = /(-?[\d\.?]+)[,|\s](-?[\d\.?]+)/g;
508
- var path = new _three.ShapePath();
509
- var index = 0;
510
- node.getAttribute('points').replace(regex, iterator);
511
- path.currentPath.autoClose = false;
512
- return path;
513
- }
514
- function parseCircleNode(node) {
515
- var x = parseFloatWithUnits(node.getAttribute('cx'));
516
- var y = parseFloatWithUnits(node.getAttribute('cy'));
517
- var r = parseFloatWithUnits(node.getAttribute('r'));
518
- var subpath = new _three.Path();
519
- subpath.absarc(x, y, r, 0, Math.PI * 2);
520
- var path = new _three.ShapePath();
521
- path.subPaths.push(subpath);
522
- return path;
523
- }
524
- function parseEllipseNode(node) {
525
- var x = parseFloatWithUnits(node.getAttribute('cx'));
526
- var y = parseFloatWithUnits(node.getAttribute('cy'));
527
- var rx = parseFloatWithUnits(node.getAttribute('rx'));
528
- var ry = parseFloatWithUnits(node.getAttribute('ry'));
529
- var subpath = new _three.Path();
530
- subpath.absellipse(x, y, rx, ry, 0, Math.PI * 2);
531
- var path = new _three.ShapePath();
532
- path.subPaths.push(subpath);
533
- return path;
534
- }
535
- function parseLineNode(node) {
536
- var x1 = parseFloatWithUnits(node.getAttribute('x1'));
537
- var y1 = parseFloatWithUnits(node.getAttribute('y1'));
538
- var x2 = parseFloatWithUnits(node.getAttribute('x2'));
539
- var y2 = parseFloatWithUnits(node.getAttribute('y2'));
540
- var path = new _three.ShapePath();
541
- path.moveTo(x1, y1);
542
- path.lineTo(x2, y2);
543
- path.currentPath.autoClose = false;
544
- return path;
545
- }
546
-
547
- //
548
-
549
- function parseStyle(node, style) {
550
- style = Object.assign({}, style); // clone style
551
-
552
- var stylesheetStyles = {};
553
- if (node.hasAttribute('class')) {
554
- var classSelectors = node.getAttribute('class').split(/\s/).filter(Boolean).map(function (i) {
555
- return i.trim();
556
- });
557
- for (var i = 0; i < classSelectors.length; i++) {
558
- stylesheetStyles = Object.assign(stylesheetStyles, stylesheets['.' + classSelectors[i]]);
559
- }
560
- }
561
- if (node.hasAttribute('id')) {
562
- stylesheetStyles = Object.assign(stylesheetStyles, stylesheets['#' + node.getAttribute('id')]);
563
- }
564
- function addStyle(svgName, jsName, adjustFunction) {
565
- if (adjustFunction === undefined) adjustFunction = function copy(v) {
566
- if (v.startsWith('url')) console.warn('SVGLoader: url access in attributes is not implemented.');
567
- return v;
568
- };
569
- if (node.hasAttribute(svgName)) style[jsName] = adjustFunction(node.getAttribute(svgName));
570
- if (stylesheetStyles[svgName]) style[jsName] = adjustFunction(stylesheetStyles[svgName]);
571
- if (node.style && node.style[svgName] !== '') style[jsName] = adjustFunction(node.style[svgName]);
572
- }
573
- function clamp(v) {
574
- return Math.max(0, Math.min(1, parseFloatWithUnits(v)));
575
- }
576
- function positive(v) {
577
- return Math.max(0, parseFloatWithUnits(v));
578
- }
579
- addStyle('fill', 'fill');
580
- addStyle('fill-opacity', 'fillOpacity', clamp);
581
- addStyle('opacity', 'opacity', clamp);
582
- addStyle('stroke', 'stroke');
583
- addStyle('stroke-opacity', 'strokeOpacity', clamp);
584
- addStyle('stroke-width', 'strokeWidth', positive);
585
- addStyle('stroke-linejoin', 'strokeLineJoin');
586
- addStyle('stroke-linecap', 'strokeLineCap');
587
- addStyle('stroke-miterlimit', 'strokeMiterLimit', positive);
588
- addStyle('visibility', 'visibility');
589
- return style;
590
- }
591
-
592
- // http://www.w3.org/TR/SVG11/implnote.html#PathElementImplementationNotes
593
-
594
- function getReflection(a, b) {
595
- return a - (b - a);
596
- }
597
- function parseFloats(string) {
598
- var array = string.split(/[\s,]+|(?=\s?[+\-])/);
599
- for (var i = 0; i < array.length; i++) {
600
- var number = array[i];
601
-
602
- // Handle values like 48.6037.7.8
603
- // TODO Find a regex for this
604
-
605
- if (number.indexOf('.') !== number.lastIndexOf('.')) {
606
- var split = number.split('.');
607
- for (var s = 2; s < split.length; s++) {
608
- array.splice(i + s - 1, 0, '0.' + split[s]);
609
- }
610
- }
611
- array[i] = parseFloatWithUnits(number);
612
- }
613
- return array;
614
- }
615
-
616
- // Units
617
-
618
- var units = ['mm', 'cm', 'in', 'pt', 'pc', 'px'];
619
-
620
- // Conversion: [ fromUnit ][ toUnit ] (-1 means dpi dependent)
621
- var unitConversion = {
622
- mm: {
623
- mm: 1,
624
- cm: 0.1,
625
- "in": 1 / 25.4,
626
- pt: 72 / 25.4,
627
- pc: 6 / 25.4,
628
- px: -1
629
- },
630
- cm: {
631
- mm: 10,
632
- cm: 1,
633
- "in": 1 / 2.54,
634
- pt: 72 / 2.54,
635
- pc: 6 / 2.54,
636
- px: -1
637
- },
638
- "in": {
639
- mm: 25.4,
640
- cm: 2.54,
641
- "in": 1,
642
- pt: 72,
643
- pc: 6,
644
- px: -1
645
- },
646
- pt: {
647
- mm: 25.4 / 72,
648
- cm: 2.54 / 72,
649
- "in": 1 / 72,
650
- pt: 1,
651
- pc: 6 / 72,
652
- px: -1
653
- },
654
- pc: {
655
- mm: 25.4 / 6,
656
- cm: 2.54 / 6,
657
- "in": 1 / 6,
658
- pt: 72 / 6,
659
- pc: 1,
660
- px: -1
661
- },
662
- px: {
663
- px: 1
664
- }
665
- };
666
- function parseFloatWithUnits(string) {
667
- var theUnit = 'px';
668
- if (typeof string === 'string' || string instanceof String) {
669
- for (var i = 0, n = units.length; i < n; i++) {
670
- var u = units[i];
671
- if (string.endsWith(u)) {
672
- theUnit = u;
673
- string = string.substring(0, string.length - u.length);
674
- break;
675
- }
676
- }
677
- }
678
- var scale = undefined;
679
- if (theUnit === 'px' && scope.defaultUnit !== 'px') {
680
- // Conversion scale from pixels to inches, then to default units
681
-
682
- scale = unitConversion['in'][scope.defaultUnit] / scope.defaultDPI;
683
- } else {
684
- scale = unitConversion[theUnit][scope.defaultUnit];
685
- if (scale < 0) {
686
- // Conversion scale to pixels
687
-
688
- scale = unitConversion[theUnit]['in'] * scope.defaultDPI;
689
- }
690
- }
691
- return scale * parseFloat(string);
692
- }
693
-
694
- // Transforms
695
-
696
- function getNodeTransform(node) {
697
- if (!(node.hasAttribute('transform') || node.nodeName === 'use' && (node.hasAttribute('x') || node.hasAttribute('y')))) {
698
- return null;
699
- }
700
- var transform = parseNodeTransform(node);
701
- if (transformStack.length > 0) {
702
- transform.premultiply(transformStack[transformStack.length - 1]);
703
- }
704
- currentTransform.copy(transform);
705
- transformStack.push(transform);
706
- return transform;
707
- }
708
- function parseNodeTransform(node) {
709
- var transform = new _three.Matrix3();
710
- var currentTransform = tempTransform0;
711
- if (node.nodeName === 'use' && (node.hasAttribute('x') || node.hasAttribute('y'))) {
712
- var tx = parseFloatWithUnits(node.getAttribute('x'));
713
- var ty = parseFloatWithUnits(node.getAttribute('y'));
714
- transform.translate(tx, ty);
715
- }
716
- if (node.hasAttribute('transform')) {
717
- var transformsTexts = node.getAttribute('transform').split(')');
718
- for (var tIndex = transformsTexts.length - 1; tIndex >= 0; tIndex--) {
719
- var transformText = transformsTexts[tIndex].trim();
720
- if (transformText === '') continue;
721
- var openParPos = transformText.indexOf('(');
722
- var closeParPos = transformText.length;
723
- if (openParPos > 0 && openParPos < closeParPos) {
724
- var transformType = transformText.substr(0, openParPos);
725
- var array = parseFloats(transformText.substr(openParPos + 1, closeParPos - openParPos - 1));
726
- currentTransform.identity();
727
- switch (transformType) {
728
- case 'translate':
729
- if (array.length >= 1) {
730
- var tx = array[0];
731
- var ty = tx;
732
- if (array.length >= 2) {
733
- ty = array[1];
734
- }
735
- currentTransform.translate(tx, ty);
736
- }
737
- break;
738
- case 'rotate':
739
- if (array.length >= 1) {
740
- var angle = 0;
741
- var cx = 0;
742
- var cy = 0;
743
-
744
- // Angle
745
- angle = -array[0] * Math.PI / 180;
746
- if (array.length >= 3) {
747
- // Center x, y
748
- cx = array[1];
749
- cy = array[2];
750
- }
751
-
752
- // Rotate around center (cx, cy)
753
- tempTransform1.identity().translate(-cx, -cy);
754
- tempTransform2.identity().rotate(angle);
755
- tempTransform3.multiplyMatrices(tempTransform2, tempTransform1);
756
- tempTransform1.identity().translate(cx, cy);
757
- currentTransform.multiplyMatrices(tempTransform1, tempTransform3);
758
- }
759
- break;
760
- case 'scale':
761
- if (array.length >= 1) {
762
- var scaleX = array[0];
763
- var scaleY = scaleX;
764
- if (array.length >= 2) {
765
- scaleY = array[1];
766
- }
767
- currentTransform.scale(scaleX, scaleY);
768
- }
769
- break;
770
- case 'skewX':
771
- if (array.length === 1) {
772
- currentTransform.set(1, Math.tan(array[0] * Math.PI / 180), 0, 0, 1, 0, 0, 0, 1);
773
- }
774
- break;
775
- case 'skewY':
776
- if (array.length === 1) {
777
- currentTransform.set(1, 0, 0, Math.tan(array[0] * Math.PI / 180), 1, 0, 0, 0, 1);
778
- }
779
- break;
780
- case 'matrix':
781
- if (array.length === 6) {
782
- currentTransform.set(array[0], array[2], array[4], array[1], array[3], array[5], 0, 0, 1);
783
- }
784
- break;
785
- }
786
- }
787
- transform.premultiply(currentTransform);
788
- }
789
- }
790
- return transform;
791
- }
792
- function transformPath(path, m) {
793
- function transfVec2(v2) {
794
- tempV3.set(v2.x, v2.y, 1).applyMatrix3(m);
795
- v2.set(tempV3.x, tempV3.y);
796
- }
797
- var isRotated = isTransformRotated(m);
798
- var subPaths = path.subPaths;
799
- for (var i = 0, n = subPaths.length; i < n; i++) {
800
- var subPath = subPaths[i];
801
- var curves = subPath.curves;
802
- for (var j = 0; j < curves.length; j++) {
803
- var curve = curves[j];
804
- if (curve.isLineCurve) {
805
- transfVec2(curve.v1);
806
- transfVec2(curve.v2);
807
- } else if (curve.isCubicBezierCurve) {
808
- transfVec2(curve.v0);
809
- transfVec2(curve.v1);
810
- transfVec2(curve.v2);
811
- transfVec2(curve.v3);
812
- } else if (curve.isQuadraticBezierCurve) {
813
- transfVec2(curve.v0);
814
- transfVec2(curve.v1);
815
- transfVec2(curve.v2);
816
- } else if (curve.isEllipseCurve) {
817
- if (isRotated) {
818
- console.warn('SVGLoader: Elliptic arc or ellipse rotation or skewing is not implemented.');
819
- }
820
- tempV2.set(curve.aX, curve.aY);
821
- transfVec2(tempV2);
822
- curve.aX = tempV2.x;
823
- curve.aY = tempV2.y;
824
- curve.xRadius *= getTransformScaleX(m);
825
- curve.yRadius *= getTransformScaleY(m);
826
- }
827
- }
828
- }
829
- }
830
- function isTransformRotated(m) {
831
- return m.elements[1] !== 0 || m.elements[3] !== 0;
832
- }
833
- function getTransformScaleX(m) {
834
- var te = m.elements;
835
- return Math.sqrt(te[0] * te[0] + te[1] * te[1]);
836
- }
837
- function getTransformScaleY(m) {
838
- var te = m.elements;
839
- return Math.sqrt(te[3] * te[3] + te[4] * te[4]);
840
- }
841
-
842
- //
843
-
844
- var paths = [];
845
- var stylesheets = {};
846
- var transformStack = [];
847
- var tempTransform0 = new _three.Matrix3();
848
- var tempTransform1 = new _three.Matrix3();
849
- var tempTransform2 = new _three.Matrix3();
850
- var tempTransform3 = new _three.Matrix3();
851
- var tempV2 = new _three.Vector2();
852
- var tempV3 = new _three.Vector3();
853
- var currentTransform = new _three.Matrix3();
854
- var xml = new DOMParser().parseFromString(text, 'image/svg+xml'); // application/xml
855
-
856
- parseNode(xml.documentElement, {
857
- fill: '#000',
858
- fillOpacity: 1,
859
- strokeOpacity: 1,
860
- strokeWidth: 1,
861
- strokeLineJoin: 'miter',
862
- strokeLineCap: 'butt',
863
- strokeMiterLimit: 4
864
- });
865
- var data = {
866
- paths: paths,
867
- xml: xml.documentElement
868
- };
869
-
870
- // console.log( paths );
871
- return data;
872
- }
873
- });
874
- SVGLoader.getStrokeStyle = function (width, color, lineJoin, lineCap, miterLimit) {
875
- // Param width: Stroke width
876
- // Param color: As returned by THREE.Color.getStyle()
877
- // Param lineJoin: One of "round", "bevel", "miter" or "miter-limit"
878
- // Param lineCap: One of "round", "square" or "butt"
879
- // Param miterLimit: Maximum join length, in multiples of the "width" parameter (join is truncated if it exceeds that distance)
880
- // Returns style object
881
-
882
- width = width !== undefined ? width : 1;
883
- color = color !== undefined ? color : '#000';
884
- lineJoin = lineJoin !== undefined ? lineJoin : 'miter';
885
- lineCap = lineCap !== undefined ? lineCap : 'butt';
886
- miterLimit = miterLimit !== undefined ? miterLimit : 4;
887
- return {
888
- strokeColor: color,
889
- strokeWidth: width,
890
- strokeLineJoin: lineJoin,
891
- strokeLineCap: lineCap,
892
- strokeMiterLimit: miterLimit
893
- };
894
- };
895
- SVGLoader.pointsToStroke = function (points, style, arcDivisions, minDistance) {
896
- // Generates a stroke with some witdh around the given path.
897
- // The path can be open or closed (last point equals to first point)
898
- // Param points: Array of Vector2D (the path). Minimum 2 points.
899
- // Param style: Object with SVG properties as returned by SVGLoader.getStrokeStyle(), or SVGLoader.parse() in the path.userData.style object
900
- // Params arcDivisions: Arc divisions for round joins and endcaps. (Optional)
901
- // Param minDistance: Points closer to this distance will be merged. (Optional)
902
- // Returns BufferGeometry with stroke triangles (In plane z = 0). UV coordinates are generated ('u' along path. 'v' across it, from left to right)
903
-
904
- var vertices = [];
905
- var normals = [];
906
- var uvs = [];
907
- if (SVGLoader.pointsToStrokeWithBuffers(points, style, arcDivisions, minDistance, vertices, normals, uvs) === 0) {
908
- return null;
909
- }
910
- var geometry = new _three.BufferGeometry();
911
- geometry.setAttribute('position', new _three.Float32BufferAttribute(vertices, 3));
912
- geometry.setAttribute('normal', new _three.Float32BufferAttribute(normals, 3));
913
- geometry.setAttribute('uv', new _three.Float32BufferAttribute(uvs, 2));
914
- return geometry;
915
- };
916
- SVGLoader.pointsToStrokeWithBuffers = function () {
917
- var tempV2_1 = new _three.Vector2();
918
- var tempV2_2 = new _three.Vector2();
919
- var tempV2_3 = new _three.Vector2();
920
- var tempV2_4 = new _three.Vector2();
921
- var tempV2_5 = new _three.Vector2();
922
- var tempV2_6 = new _three.Vector2();
923
- var tempV2_7 = new _three.Vector2();
924
- var lastPointL = new _three.Vector2();
925
- var lastPointR = new _three.Vector2();
926
- var point0L = new _three.Vector2();
927
- var point0R = new _three.Vector2();
928
- var currentPointL = new _three.Vector2();
929
- var currentPointR = new _three.Vector2();
930
- var nextPointL = new _three.Vector2();
931
- var nextPointR = new _three.Vector2();
932
- var innerPoint = new _three.Vector2();
933
- var outerPoint = new _three.Vector2();
934
- return function (points, style, arcDivisions, minDistance, vertices, normals, uvs, vertexOffset) {
935
- // This function can be called to update existing arrays or buffers.
936
- // Accepts same parameters as pointsToStroke, plus the buffers and optional offset.
937
- // Param vertexOffset: Offset vertices to start writing in the buffers (3 elements/vertex for vertices and normals, and 2 elements/vertex for uvs)
938
- // Returns number of written vertices / normals / uvs pairs
939
- // if 'vertices' parameter is undefined no triangles will be generated, but the returned vertices count will still be valid (useful to preallocate the buffers)
940
- // 'normals' and 'uvs' buffers are optional
941
-
942
- arcDivisions = arcDivisions !== undefined ? arcDivisions : 12;
943
- minDistance = minDistance !== undefined ? minDistance : 0.001;
944
- vertexOffset = vertexOffset !== undefined ? vertexOffset : 0;
945
-
946
- // First ensure there are no duplicated points
947
- points = removeDuplicatedPoints(points);
948
- var numPoints = points.length;
949
- if (numPoints < 2) return 0;
950
- var isClosed = points[0].equals(points[numPoints - 1]);
951
- var currentPoint;
952
- var previousPoint = points[0];
953
- var nextPoint;
954
- var strokeWidth2 = style.strokeWidth / 2;
955
- var deltaU = 1 / (numPoints - 1);
956
- var u0 = 0;
957
- var innerSideModified;
958
- var joinIsOnLeftSide;
959
- var isMiter;
960
- var initialJoinIsOnLeftSide = false;
961
- var numVertices = 0;
962
- var currentCoordinate = vertexOffset * 3;
963
- var currentCoordinateUV = vertexOffset * 2;
964
-
965
- // Get initial left and right stroke points
966
- getNormal(points[0], points[1], tempV2_1).multiplyScalar(strokeWidth2);
967
- lastPointL.copy(points[0]).sub(tempV2_1);
968
- lastPointR.copy(points[0]).add(tempV2_1);
969
- point0L.copy(lastPointL);
970
- point0R.copy(lastPointR);
971
- for (var iPoint = 1; iPoint < numPoints; iPoint++) {
972
- currentPoint = points[iPoint];
973
-
974
- // Get next point
975
- if (iPoint === numPoints - 1) {
976
- if (isClosed) {
977
- // Skip duplicated initial point
978
- nextPoint = points[1];
979
- } else nextPoint = undefined;
980
- } else {
981
- nextPoint = points[iPoint + 1];
982
- }
983
-
984
- // Normal of previous segment in tempV2_1
985
- var normal1 = tempV2_1;
986
- getNormal(previousPoint, currentPoint, normal1);
987
- tempV2_3.copy(normal1).multiplyScalar(strokeWidth2);
988
- currentPointL.copy(currentPoint).sub(tempV2_3);
989
- currentPointR.copy(currentPoint).add(tempV2_3);
990
- var u1 = u0 + deltaU;
991
- innerSideModified = false;
992
- if (nextPoint !== undefined) {
993
- // Normal of next segment in tempV2_2
994
- getNormal(currentPoint, nextPoint, tempV2_2);
995
- tempV2_3.copy(tempV2_2).multiplyScalar(strokeWidth2);
996
- nextPointL.copy(currentPoint).sub(tempV2_3);
997
- nextPointR.copy(currentPoint).add(tempV2_3);
998
- joinIsOnLeftSide = true;
999
- tempV2_3.subVectors(nextPoint, previousPoint);
1000
- if (normal1.dot(tempV2_3) < 0) {
1001
- joinIsOnLeftSide = false;
1002
- }
1003
- if (iPoint === 1) initialJoinIsOnLeftSide = joinIsOnLeftSide;
1004
- tempV2_3.subVectors(nextPoint, currentPoint);
1005
- tempV2_3.normalize();
1006
- var dot = Math.abs(normal1.dot(tempV2_3));
1007
-
1008
- // If path is straight, don't create join
1009
- if (dot !== 0) {
1010
- // Compute inner and outer segment intersections
1011
- var miterSide = strokeWidth2 / dot;
1012
- tempV2_3.multiplyScalar(-miterSide);
1013
- tempV2_4.subVectors(currentPoint, previousPoint);
1014
- tempV2_5.copy(tempV2_4).setLength(miterSide).add(tempV2_3);
1015
- innerPoint.copy(tempV2_5).negate();
1016
- var miterLength2 = tempV2_5.length();
1017
- var segmentLengthPrev = tempV2_4.length();
1018
- tempV2_4.divideScalar(segmentLengthPrev);
1019
- tempV2_6.subVectors(nextPoint, currentPoint);
1020
- var segmentLengthNext = tempV2_6.length();
1021
- tempV2_6.divideScalar(segmentLengthNext);
1022
- // Check that previous and next segments doesn't overlap with the innerPoint of intersection
1023
- if (tempV2_4.dot(innerPoint) < segmentLengthPrev && tempV2_6.dot(innerPoint) < segmentLengthNext) {
1024
- innerSideModified = true;
1025
- }
1026
- outerPoint.copy(tempV2_5).add(currentPoint);
1027
- innerPoint.add(currentPoint);
1028
- isMiter = false;
1029
- if (innerSideModified) {
1030
- if (joinIsOnLeftSide) {
1031
- nextPointR.copy(innerPoint);
1032
- currentPointR.copy(innerPoint);
1033
- } else {
1034
- nextPointL.copy(innerPoint);
1035
- currentPointL.copy(innerPoint);
1036
- }
1037
- } else {
1038
- // The segment triangles are generated here if there was overlapping
1039
-
1040
- makeSegmentTriangles();
1041
- }
1042
- switch (style.strokeLineJoin) {
1043
- case 'bevel':
1044
- makeSegmentWithBevelJoin(joinIsOnLeftSide, innerSideModified, u1);
1045
- break;
1046
- case 'round':
1047
- // Segment triangles
1048
-
1049
- createSegmentTrianglesWithMiddleSection(joinIsOnLeftSide, innerSideModified);
1050
-
1051
- // Join triangles
1052
-
1053
- if (joinIsOnLeftSide) {
1054
- makeCircularSector(currentPoint, currentPointL, nextPointL, u1, 0);
1055
- } else {
1056
- makeCircularSector(currentPoint, nextPointR, currentPointR, u1, 1);
1057
- }
1058
- break;
1059
- case 'miter':
1060
- case 'miter-clip':
1061
- default:
1062
- var miterFraction = strokeWidth2 * style.strokeMiterLimit / miterLength2;
1063
- if (miterFraction < 1) {
1064
- // The join miter length exceeds the miter limit
1065
-
1066
- if (style.strokeLineJoin !== 'miter-clip') {
1067
- makeSegmentWithBevelJoin(joinIsOnLeftSide, innerSideModified, u1);
1068
- break;
1069
- } else {
1070
- // Segment triangles
1071
-
1072
- createSegmentTrianglesWithMiddleSection(joinIsOnLeftSide, innerSideModified);
1073
-
1074
- // Miter-clip join triangles
1075
-
1076
- if (joinIsOnLeftSide) {
1077
- tempV2_6.subVectors(outerPoint, currentPointL).multiplyScalar(miterFraction).add(currentPointL);
1078
- tempV2_7.subVectors(outerPoint, nextPointL).multiplyScalar(miterFraction).add(nextPointL);
1079
- addVertex(currentPointL, u1, 0);
1080
- addVertex(tempV2_6, u1, 0);
1081
- addVertex(currentPoint, u1, 0.5);
1082
- addVertex(currentPoint, u1, 0.5);
1083
- addVertex(tempV2_6, u1, 0);
1084
- addVertex(tempV2_7, u1, 0);
1085
- addVertex(currentPoint, u1, 0.5);
1086
- addVertex(tempV2_7, u1, 0);
1087
- addVertex(nextPointL, u1, 0);
1088
- } else {
1089
- tempV2_6.subVectors(outerPoint, currentPointR).multiplyScalar(miterFraction).add(currentPointR);
1090
- tempV2_7.subVectors(outerPoint, nextPointR).multiplyScalar(miterFraction).add(nextPointR);
1091
- addVertex(currentPointR, u1, 1);
1092
- addVertex(tempV2_6, u1, 1);
1093
- addVertex(currentPoint, u1, 0.5);
1094
- addVertex(currentPoint, u1, 0.5);
1095
- addVertex(tempV2_6, u1, 1);
1096
- addVertex(tempV2_7, u1, 1);
1097
- addVertex(currentPoint, u1, 0.5);
1098
- addVertex(tempV2_7, u1, 1);
1099
- addVertex(nextPointR, u1, 1);
1100
- }
1101
- }
1102
- } else {
1103
- // Miter join segment triangles
1104
-
1105
- if (innerSideModified) {
1106
- // Optimized segment + join triangles
1107
-
1108
- if (joinIsOnLeftSide) {
1109
- addVertex(lastPointR, u0, 1);
1110
- addVertex(lastPointL, u0, 0);
1111
- addVertex(outerPoint, u1, 0);
1112
- addVertex(lastPointR, u0, 1);
1113
- addVertex(outerPoint, u1, 0);
1114
- addVertex(innerPoint, u1, 1);
1115
- } else {
1116
- addVertex(lastPointR, u0, 1);
1117
- addVertex(lastPointL, u0, 0);
1118
- addVertex(outerPoint, u1, 1);
1119
- addVertex(lastPointL, u0, 0);
1120
- addVertex(innerPoint, u1, 0);
1121
- addVertex(outerPoint, u1, 1);
1122
- }
1123
- if (joinIsOnLeftSide) {
1124
- nextPointL.copy(outerPoint);
1125
- } else {
1126
- nextPointR.copy(outerPoint);
1127
- }
1128
- } else {
1129
- // Add extra miter join triangles
1130
-
1131
- if (joinIsOnLeftSide) {
1132
- addVertex(currentPointL, u1, 0);
1133
- addVertex(outerPoint, u1, 0);
1134
- addVertex(currentPoint, u1, 0.5);
1135
- addVertex(currentPoint, u1, 0.5);
1136
- addVertex(outerPoint, u1, 0);
1137
- addVertex(nextPointL, u1, 0);
1138
- } else {
1139
- addVertex(currentPointR, u1, 1);
1140
- addVertex(outerPoint, u1, 1);
1141
- addVertex(currentPoint, u1, 0.5);
1142
- addVertex(currentPoint, u1, 0.5);
1143
- addVertex(outerPoint, u1, 1);
1144
- addVertex(nextPointR, u1, 1);
1145
- }
1146
- }
1147
- isMiter = true;
1148
- }
1149
- break;
1150
- }
1151
- } else {
1152
- // The segment triangles are generated here when two consecutive points are collinear
1153
-
1154
- makeSegmentTriangles();
1155
- }
1156
- } else {
1157
- // The segment triangles are generated here if it is the ending segment
1158
-
1159
- makeSegmentTriangles();
1160
- }
1161
- if (!isClosed && iPoint === numPoints - 1) {
1162
- // Start line endcap
1163
- addCapGeometry(points[0], point0L, point0R, joinIsOnLeftSide, true, u0);
1164
- }
1165
-
1166
- // Increment loop variables
1167
-
1168
- u0 = u1;
1169
- previousPoint = currentPoint;
1170
- lastPointL.copy(nextPointL);
1171
- lastPointR.copy(nextPointR);
1172
- }
1173
- if (!isClosed) {
1174
- // Ending line endcap
1175
- addCapGeometry(currentPoint, currentPointL, currentPointR, joinIsOnLeftSide, false, u1);
1176
- } else if (innerSideModified && vertices) {
1177
- // Modify path first segment vertices to adjust to the segments inner and outer intersections
1178
-
1179
- var lastOuter = outerPoint;
1180
- var lastInner = innerPoint;
1181
- if (initialJoinIsOnLeftSide !== joinIsOnLeftSide) {
1182
- lastOuter = innerPoint;
1183
- lastInner = outerPoint;
1184
- }
1185
- if (joinIsOnLeftSide) {
1186
- if (isMiter || initialJoinIsOnLeftSide) {
1187
- lastInner.toArray(vertices, 0 * 3);
1188
- lastInner.toArray(vertices, 3 * 3);
1189
- if (isMiter) {
1190
- lastOuter.toArray(vertices, 1 * 3);
1191
- }
1192
- }
1193
- } else {
1194
- if (isMiter || !initialJoinIsOnLeftSide) {
1195
- lastInner.toArray(vertices, 1 * 3);
1196
- lastInner.toArray(vertices, 3 * 3);
1197
- if (isMiter) {
1198
- lastOuter.toArray(vertices, 0 * 3);
1199
- }
1200
- }
1201
- }
1202
- }
1203
- return numVertices;
1204
-
1205
- // -- End of algorithm
1206
-
1207
- // -- Functions
1208
-
1209
- function getNormal(p1, p2, result) {
1210
- result.subVectors(p2, p1);
1211
- return result.set(-result.y, result.x).normalize();
1212
- }
1213
- function addVertex(position, u, v) {
1214
- if (vertices) {
1215
- vertices[currentCoordinate] = position.x;
1216
- vertices[currentCoordinate + 1] = position.y;
1217
- vertices[currentCoordinate + 2] = 0;
1218
- if (normals) {
1219
- normals[currentCoordinate] = 0;
1220
- normals[currentCoordinate + 1] = 0;
1221
- normals[currentCoordinate + 2] = 1;
1222
- }
1223
- currentCoordinate += 3;
1224
- if (uvs) {
1225
- uvs[currentCoordinateUV] = u;
1226
- uvs[currentCoordinateUV + 1] = v;
1227
- currentCoordinateUV += 2;
1228
- }
1229
- }
1230
- numVertices += 3;
1231
- }
1232
- function makeCircularSector(center, p1, p2, u, v) {
1233
- // param p1, p2: Points in the circle arc.
1234
- // p1 and p2 are in clockwise direction.
1235
-
1236
- tempV2_1.copy(p1).sub(center).normalize();
1237
- tempV2_2.copy(p2).sub(center).normalize();
1238
- var angle = Math.PI;
1239
- var dot = tempV2_1.dot(tempV2_2);
1240
- if (Math.abs(dot) < 1) angle = Math.abs(Math.acos(dot));
1241
- angle /= arcDivisions;
1242
- tempV2_3.copy(p1);
1243
- for (var i = 0, il = arcDivisions - 1; i < il; i++) {
1244
- tempV2_4.copy(tempV2_3).rotateAround(center, angle);
1245
- addVertex(tempV2_3, u, v);
1246
- addVertex(tempV2_4, u, v);
1247
- addVertex(center, u, 0.5);
1248
- tempV2_3.copy(tempV2_4);
1249
- }
1250
- addVertex(tempV2_4, u, v);
1251
- addVertex(p2, u, v);
1252
- addVertex(center, u, 0.5);
1253
- }
1254
- function makeSegmentTriangles() {
1255
- addVertex(lastPointR, u0, 1);
1256
- addVertex(lastPointL, u0, 0);
1257
- addVertex(currentPointL, u1, 0);
1258
- addVertex(lastPointR, u0, 1);
1259
- addVertex(currentPointL, u1, 1);
1260
- addVertex(currentPointR, u1, 0);
1261
- }
1262
- function makeSegmentWithBevelJoin(joinIsOnLeftSide, innerSideModified, u) {
1263
- if (innerSideModified) {
1264
- // Optimized segment + bevel triangles
1265
-
1266
- if (joinIsOnLeftSide) {
1267
- // Path segments triangles
1268
-
1269
- addVertex(lastPointR, u0, 1);
1270
- addVertex(lastPointL, u0, 0);
1271
- addVertex(currentPointL, u1, 0);
1272
- addVertex(lastPointR, u0, 1);
1273
- addVertex(currentPointL, u1, 0);
1274
- addVertex(innerPoint, u1, 1);
1275
-
1276
- // Bevel join triangle
1277
-
1278
- addVertex(currentPointL, u, 0);
1279
- addVertex(nextPointL, u, 0);
1280
- addVertex(innerPoint, u, 0.5);
1281
- } else {
1282
- // Path segments triangles
1283
-
1284
- addVertex(lastPointR, u0, 1);
1285
- addVertex(lastPointL, u0, 0);
1286
- addVertex(currentPointR, u1, 1);
1287
- addVertex(lastPointL, u0, 0);
1288
- addVertex(innerPoint, u1, 0);
1289
- addVertex(currentPointR, u1, 1);
1290
-
1291
- // Bevel join triangle
1292
-
1293
- addVertex(currentPointR, u, 1);
1294
- addVertex(nextPointR, u, 0);
1295
- addVertex(innerPoint, u, 0.5);
1296
- }
1297
- } else {
1298
- // Bevel join triangle. The segment triangles are done in the main loop
1299
-
1300
- if (joinIsOnLeftSide) {
1301
- addVertex(currentPointL, u, 0);
1302
- addVertex(nextPointL, u, 0);
1303
- addVertex(currentPoint, u, 0.5);
1304
- } else {
1305
- addVertex(currentPointR, u, 1);
1306
- addVertex(nextPointR, u, 0);
1307
- addVertex(currentPoint, u, 0.5);
1308
- }
1309
- }
1310
- }
1311
- function createSegmentTrianglesWithMiddleSection(joinIsOnLeftSide, innerSideModified) {
1312
- if (innerSideModified) {
1313
- if (joinIsOnLeftSide) {
1314
- addVertex(lastPointR, u0, 1);
1315
- addVertex(lastPointL, u0, 0);
1316
- addVertex(currentPointL, u1, 0);
1317
- addVertex(lastPointR, u0, 1);
1318
- addVertex(currentPointL, u1, 0);
1319
- addVertex(innerPoint, u1, 1);
1320
- addVertex(currentPointL, u0, 0);
1321
- addVertex(currentPoint, u1, 0.5);
1322
- addVertex(innerPoint, u1, 1);
1323
- addVertex(currentPoint, u1, 0.5);
1324
- addVertex(nextPointL, u0, 0);
1325
- addVertex(innerPoint, u1, 1);
1326
- } else {
1327
- addVertex(lastPointR, u0, 1);
1328
- addVertex(lastPointL, u0, 0);
1329
- addVertex(currentPointR, u1, 1);
1330
- addVertex(lastPointL, u0, 0);
1331
- addVertex(innerPoint, u1, 0);
1332
- addVertex(currentPointR, u1, 1);
1333
- addVertex(currentPointR, u0, 1);
1334
- addVertex(innerPoint, u1, 0);
1335
- addVertex(currentPoint, u1, 0.5);
1336
- addVertex(currentPoint, u1, 0.5);
1337
- addVertex(innerPoint, u1, 0);
1338
- addVertex(nextPointR, u0, 1);
1339
- }
1340
- }
1341
- }
1342
- function addCapGeometry(center, p1, p2, joinIsOnLeftSide, start, u) {
1343
- // param center: End point of the path
1344
- // param p1, p2: Left and right cap points
1345
-
1346
- switch (style.strokeLineCap) {
1347
- case 'round':
1348
- if (start) {
1349
- makeCircularSector(center, p2, p1, u, 0.5);
1350
- } else {
1351
- makeCircularSector(center, p1, p2, u, 0.5);
1352
- }
1353
- break;
1354
- case 'square':
1355
- if (start) {
1356
- tempV2_1.subVectors(p1, center);
1357
- tempV2_2.set(tempV2_1.y, -tempV2_1.x);
1358
- tempV2_3.addVectors(tempV2_1, tempV2_2).add(center);
1359
- tempV2_4.subVectors(tempV2_2, tempV2_1).add(center);
1360
-
1361
- // Modify already existing vertices
1362
- if (joinIsOnLeftSide) {
1363
- tempV2_3.toArray(vertices, 1 * 3);
1364
- tempV2_4.toArray(vertices, 0 * 3);
1365
- tempV2_4.toArray(vertices, 3 * 3);
1366
- } else {
1367
- tempV2_3.toArray(vertices, 1 * 3);
1368
- tempV2_3.toArray(vertices, 3 * 3);
1369
- tempV2_4.toArray(vertices, 0 * 3);
1370
- }
1371
- } else {
1372
- tempV2_1.subVectors(p2, center);
1373
- tempV2_2.set(tempV2_1.y, -tempV2_1.x);
1374
- tempV2_3.addVectors(tempV2_1, tempV2_2).add(center);
1375
- tempV2_4.subVectors(tempV2_2, tempV2_1).add(center);
1376
- var vl = vertices.length;
1377
-
1378
- // Modify already existing vertices
1379
- if (joinIsOnLeftSide) {
1380
- tempV2_3.toArray(vertices, vl - 1 * 3);
1381
- tempV2_4.toArray(vertices, vl - 2 * 3);
1382
- tempV2_4.toArray(vertices, vl - 4 * 3);
1383
- } else {
1384
- tempV2_3.toArray(vertices, vl - 2 * 3);
1385
- tempV2_4.toArray(vertices, vl - 1 * 3);
1386
- tempV2_4.toArray(vertices, vl - 4 * 3);
1387
- }
1388
- }
1389
- break;
1390
- case 'butt':
1391
- default:
1392
- // Nothing to do here
1393
- break;
1394
- }
1395
- }
1396
- function removeDuplicatedPoints(points) {
1397
- // Creates a new array if necessary with duplicated points removed.
1398
- // This does not remove duplicated initial and ending points of a closed path.
1399
-
1400
- var dupPoints = false;
1401
- for (var i = 1, n = points.length - 1; i < n; i++) {
1402
- if (points[i].distanceTo(points[i + 1]) < minDistance) {
1403
- dupPoints = true;
1404
- break;
1405
- }
1406
- }
1407
- if (!dupPoints) return points;
1408
- var newPoints = [];
1409
- newPoints.push(points[0]);
1410
- for (var i = 1, n = points.length - 1; i < n; i++) {
1411
- if (points[i].distanceTo(points[i + 1]) >= minDistance) {
1412
- newPoints.push(points[i]);
1413
- }
1414
- }
1415
- newPoints.push(points[points.length - 1]);
1416
- return newPoints;
1417
- }
1418
- };
1419
- }();