@soonspacejs/plugin-drawing-shape 2.3.13 → 2.3.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/src/index.ts +98 -36
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@soonspacejs/plugin-drawing-shape",
|
|
3
3
|
"pluginName": "DrawingShapePlugin",
|
|
4
|
-
"version": "2.3.
|
|
4
|
+
"version": "2.3.16",
|
|
5
5
|
"description": "DrawingShapePlugin plugin for SoonSpace.js",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.esm.js",
|
|
@@ -13,5 +13,5 @@
|
|
|
13
13
|
],
|
|
14
14
|
"author": "xuek",
|
|
15
15
|
"license": "UNLICENSED",
|
|
16
|
-
"gitHead": "
|
|
16
|
+
"gitHead": "7e6e48de24930a7d95ddb459ab559d0804ad32a6"
|
|
17
17
|
}
|
package/src/index.ts
CHANGED
|
@@ -38,7 +38,9 @@ export default class DrawIngShapePlugin {
|
|
|
38
38
|
readonly viewport: SoonSpace['viewport']
|
|
39
39
|
|
|
40
40
|
constructor( readonly ssp: SoonSpace ) {
|
|
41
|
+
|
|
41
42
|
this.viewport = ssp.viewport
|
|
43
|
+
|
|
42
44
|
}
|
|
43
45
|
|
|
44
46
|
drawingPoint( options: DrawingPointInfo, events?: DrawingPointEvents ): Promise<SetOptionsPointInfo> {
|
|
@@ -60,23 +62,26 @@ export default class DrawIngShapePlugin {
|
|
|
60
62
|
const point = canvas.getPoint( DrawingIds.point )
|
|
61
63
|
|
|
62
64
|
const onMouseMove = ( event: MouseEvent ) => {
|
|
65
|
+
|
|
63
66
|
if ( !point ) return
|
|
64
67
|
|
|
65
68
|
const intersects = this.ssp.viewport.getIntersects( event )
|
|
66
|
-
const position = intersects.length > 0 ? intersects[0].point.clone() : this.ssp.getPositionByOffset( event )
|
|
69
|
+
const position = intersects.length > 0 ? intersects[ 0 ].point.clone() : this.ssp.getPositionByOffset( event )
|
|
67
70
|
|
|
68
71
|
point.setOptions( {
|
|
69
72
|
position,
|
|
70
73
|
} )
|
|
74
|
+
|
|
71
75
|
}
|
|
72
76
|
|
|
73
77
|
const onClick = ( event: MouseEvent ) => {
|
|
78
|
+
|
|
74
79
|
removeSignals()
|
|
75
80
|
|
|
76
81
|
if ( !point ) return
|
|
77
82
|
|
|
78
83
|
const intersects = this.ssp.viewport.getIntersects( event )
|
|
79
|
-
const position = intersects.length > 0 ? intersects[0].point.clone() : this.ssp.getPositionByOffset( event )
|
|
84
|
+
const position = intersects.length > 0 ? intersects[ 0 ].point.clone() : this.ssp.getPositionByOffset( event )
|
|
80
85
|
|
|
81
86
|
point.setOptions( {
|
|
82
87
|
position,
|
|
@@ -86,34 +91,44 @@ export default class DrawIngShapePlugin {
|
|
|
86
91
|
...options,
|
|
87
92
|
position: position.clone(),
|
|
88
93
|
} )
|
|
94
|
+
|
|
89
95
|
}
|
|
90
96
|
|
|
91
97
|
const onRightClick = () => {
|
|
98
|
+
|
|
92
99
|
this.clearDrawingCanvas3D()
|
|
93
100
|
removeSignals()
|
|
94
101
|
|
|
95
102
|
events?.onCancel?.()
|
|
103
|
+
|
|
96
104
|
}
|
|
97
105
|
|
|
98
106
|
const onKeyUp = ( event: KeyboardEvent ) => {
|
|
107
|
+
|
|
99
108
|
switch ( event.code ) {
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
109
|
+
|
|
110
|
+
case 'Escape':
|
|
111
|
+
onRightClick()
|
|
112
|
+
break
|
|
113
|
+
|
|
103
114
|
}
|
|
115
|
+
|
|
104
116
|
}
|
|
105
117
|
|
|
106
118
|
const removeSignals = () => {
|
|
119
|
+
|
|
107
120
|
this.ssp.signals.mouseMove.remove( onMouseMove )
|
|
108
121
|
this.ssp.signals.click.remove( onClick )
|
|
109
122
|
this.ssp.signals.rightClick.remove( onRightClick )
|
|
110
123
|
this.ssp.signals.keyUp.remove( onKeyUp )
|
|
124
|
+
|
|
111
125
|
}
|
|
112
126
|
|
|
113
127
|
this.ssp.signals.mouseMove.add( onMouseMove )
|
|
114
128
|
this.ssp.signals.click.add( onClick )
|
|
115
129
|
this.ssp.signals.rightClick.add( onRightClick )
|
|
116
130
|
this.ssp.signals.keyUp.add( onKeyUp )
|
|
131
|
+
|
|
117
132
|
} )
|
|
118
133
|
|
|
119
134
|
}
|
|
@@ -139,8 +154,9 @@ export default class DrawIngShapePlugin {
|
|
|
139
154
|
const linePoints: Position[] = []
|
|
140
155
|
|
|
141
156
|
const onMouseMove = ( event: MouseEvent ) => {
|
|
157
|
+
|
|
142
158
|
const intersects = this.ssp.viewport.getIntersects( event )
|
|
143
|
-
const position = intersects.length > 0 ? intersects[0].point.clone() : this.ssp.getPositionByOffset( event )
|
|
159
|
+
const position = intersects.length > 0 ? intersects[ 0 ].point.clone() : this.ssp.getPositionByOffset( event )
|
|
144
160
|
|
|
145
161
|
if ( !line ) return
|
|
146
162
|
|
|
@@ -148,11 +164,13 @@ export default class DrawIngShapePlugin {
|
|
|
148
164
|
...options,
|
|
149
165
|
points: [ ...linePoints, position.clone().setY( position.y + 1 ) ],
|
|
150
166
|
} )
|
|
167
|
+
|
|
151
168
|
}
|
|
152
169
|
|
|
153
170
|
const onClick = ( event: MouseEvent ) => {
|
|
171
|
+
|
|
154
172
|
const intersects = this.ssp.viewport.getIntersects( event )
|
|
155
|
-
const position = intersects.length > 0 ? intersects[0].point.clone() : this.ssp.getPositionByOffset( event )
|
|
173
|
+
const position = intersects.length > 0 ? intersects[ 0 ].point.clone() : this.ssp.getPositionByOffset( event )
|
|
156
174
|
|
|
157
175
|
linePoints.push( position.clone().setY( position.y + 1 ) )
|
|
158
176
|
|
|
@@ -162,9 +180,11 @@ export default class DrawIngShapePlugin {
|
|
|
162
180
|
...options,
|
|
163
181
|
points: linePoints,
|
|
164
182
|
} )
|
|
183
|
+
|
|
165
184
|
}
|
|
166
185
|
|
|
167
186
|
const onRightClick = () => {
|
|
187
|
+
|
|
168
188
|
linePoints.pop()
|
|
169
189
|
|
|
170
190
|
if ( !line ) return
|
|
@@ -175,37 +195,46 @@ export default class DrawIngShapePlugin {
|
|
|
175
195
|
} )
|
|
176
196
|
|
|
177
197
|
events?.onCancelPrev?.()
|
|
198
|
+
|
|
178
199
|
}
|
|
179
200
|
|
|
180
201
|
const onDblClick = () => {
|
|
202
|
+
|
|
181
203
|
removeSignals()
|
|
182
204
|
|
|
183
205
|
resolve( {
|
|
184
206
|
...options,
|
|
185
207
|
points: linePoints,
|
|
186
208
|
} )
|
|
209
|
+
|
|
187
210
|
}
|
|
188
211
|
|
|
189
212
|
const onKeyUp = ( event: KeyboardEvent ) => {
|
|
213
|
+
|
|
190
214
|
switch ( event.code ) {
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
215
|
+
|
|
216
|
+
case 'Backspace':
|
|
217
|
+
onRightClick()
|
|
218
|
+
break
|
|
219
|
+
case 'Escape':
|
|
220
|
+
this.clearDrawingCanvas3D()
|
|
221
|
+
removeSignals()
|
|
222
|
+
|
|
223
|
+
events?.onCancel?.()
|
|
224
|
+
break
|
|
225
|
+
|
|
200
226
|
}
|
|
227
|
+
|
|
201
228
|
}
|
|
202
229
|
|
|
203
230
|
const removeSignals = () => {
|
|
231
|
+
|
|
204
232
|
this.ssp.signals.mouseMove.remove( onMouseMove )
|
|
205
233
|
this.ssp.signals.click.remove( onClick )
|
|
206
234
|
this.ssp.signals.rightClick.remove( onRightClick )
|
|
207
235
|
this.ssp.signals.dblClick.remove( onDblClick )
|
|
208
236
|
this.ssp.signals.keyUp.remove( onKeyUp )
|
|
237
|
+
|
|
209
238
|
}
|
|
210
239
|
|
|
211
240
|
this.ssp.signals.mouseMove.add( onMouseMove )
|
|
@@ -213,6 +242,7 @@ export default class DrawIngShapePlugin {
|
|
|
213
242
|
this.ssp.signals.rightClick.add( onRightClick )
|
|
214
243
|
this.ssp.signals.dblClick.add( onDblClick )
|
|
215
244
|
this.ssp.signals.keyUp.add( onKeyUp )
|
|
245
|
+
|
|
216
246
|
} )
|
|
217
247
|
|
|
218
248
|
}
|
|
@@ -240,21 +270,24 @@ export default class DrawIngShapePlugin {
|
|
|
240
270
|
const polygonPoints: Position[] = []
|
|
241
271
|
|
|
242
272
|
const omMouseMove = ( event: MouseEvent ) => {
|
|
273
|
+
|
|
243
274
|
const intersects = this.ssp.viewport.getIntersects( event )
|
|
244
|
-
const position = intersects.length > 0 ? intersects[0].point.clone() : this.ssp.getPositionByOffset( event )
|
|
275
|
+
const position = intersects.length > 0 ? intersects[ 0 ].point.clone() : this.ssp.getPositionByOffset( event )
|
|
245
276
|
|
|
246
277
|
if ( !polygon ) return
|
|
247
278
|
|
|
248
279
|
polygon.setOptions( {
|
|
249
280
|
...options,
|
|
250
|
-
yHeight: ( polygonPoints[0]?.y || position.y ) + 1,
|
|
281
|
+
yHeight: ( polygonPoints[ 0 ]?.y || position.y ) + 1,
|
|
251
282
|
points: [ ...polygonPoints, position ],
|
|
252
283
|
} )
|
|
284
|
+
|
|
253
285
|
}
|
|
254
286
|
|
|
255
287
|
const onClick = ( event: MouseEvent ) => {
|
|
288
|
+
|
|
256
289
|
const intersects = this.ssp.viewport.getIntersects( event )
|
|
257
|
-
const position = intersects.length > 0 ? intersects[0].point.clone() : this.ssp.getPositionByOffset( event )
|
|
290
|
+
const position = intersects.length > 0 ? intersects[ 0 ].point.clone() : this.ssp.getPositionByOffset( event )
|
|
258
291
|
|
|
259
292
|
polygonPoints.push( position )
|
|
260
293
|
|
|
@@ -262,55 +295,66 @@ export default class DrawIngShapePlugin {
|
|
|
262
295
|
|
|
263
296
|
polygon.setOptions( {
|
|
264
297
|
...options,
|
|
265
|
-
yHeight: ( polygonPoints[0]?.y || 0 ) + 1,
|
|
298
|
+
yHeight: ( polygonPoints[ 0 ]?.y || 0 ) + 1,
|
|
266
299
|
points: polygonPoints,
|
|
267
300
|
} )
|
|
301
|
+
|
|
268
302
|
}
|
|
269
303
|
|
|
270
304
|
const onRightClick = () => {
|
|
305
|
+
|
|
271
306
|
polygonPoints.pop()
|
|
272
307
|
|
|
273
308
|
if ( !polygon ) return
|
|
274
309
|
|
|
275
310
|
polygon.setOptions( {
|
|
276
311
|
...options,
|
|
277
|
-
yHeight: ( polygonPoints[0]?.y || 0 ) + 1,
|
|
312
|
+
yHeight: ( polygonPoints[ 0 ]?.y || 0 ) + 1,
|
|
278
313
|
points: polygonPoints,
|
|
279
314
|
} )
|
|
280
315
|
|
|
281
316
|
events?.onCancelPrev?.()
|
|
317
|
+
|
|
282
318
|
}
|
|
283
319
|
|
|
284
320
|
const onDblClick = () => {
|
|
321
|
+
|
|
285
322
|
removeSignals()
|
|
286
323
|
|
|
287
324
|
resolve( {
|
|
288
325
|
...options,
|
|
289
|
-
yHeight: ( polygonPoints[0]?.y || 0 ) + 1,
|
|
326
|
+
yHeight: ( polygonPoints[ 0 ]?.y || 0 ) + 1,
|
|
290
327
|
points: polygonPoints,
|
|
291
328
|
} )
|
|
329
|
+
|
|
292
330
|
}
|
|
293
331
|
|
|
294
332
|
const onKeyUp = ( event: KeyboardEvent ) => {
|
|
333
|
+
|
|
295
334
|
switch ( event.code ) {
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
335
|
+
|
|
336
|
+
case 'Backspace':
|
|
337
|
+
onRightClick()
|
|
338
|
+
break
|
|
339
|
+
case 'Escape':
|
|
340
|
+
this.clearDrawingCanvas3D()
|
|
341
|
+
removeSignals()
|
|
342
|
+
|
|
343
|
+
events?.onCancel?.()
|
|
344
|
+
break
|
|
345
|
+
|
|
305
346
|
}
|
|
347
|
+
|
|
306
348
|
}
|
|
307
349
|
|
|
308
350
|
const removeSignals = () => {
|
|
351
|
+
|
|
309
352
|
this.ssp.signals.mouseMove.remove( omMouseMove )
|
|
310
353
|
this.ssp.signals.click.remove( onClick )
|
|
311
354
|
this.ssp.signals.rightClick.remove( onRightClick )
|
|
312
355
|
this.ssp.signals.dblClick.remove( onDblClick )
|
|
313
356
|
this.ssp.signals.keyUp.remove( onKeyUp )
|
|
357
|
+
|
|
314
358
|
}
|
|
315
359
|
|
|
316
360
|
this.ssp.signals.mouseMove.add( omMouseMove )
|
|
@@ -318,6 +362,7 @@ export default class DrawIngShapePlugin {
|
|
|
318
362
|
this.ssp.signals.rightClick.add( onRightClick )
|
|
319
363
|
this.ssp.signals.dblClick.add( onDblClick )
|
|
320
364
|
this.ssp.signals.keyUp.add( onKeyUp )
|
|
365
|
+
|
|
321
366
|
} )
|
|
322
367
|
|
|
323
368
|
}
|
|
@@ -344,10 +389,11 @@ export default class DrawIngShapePlugin {
|
|
|
344
389
|
let radius = 100
|
|
345
390
|
|
|
346
391
|
const onMouseMove = ( event: MouseEvent ) => {
|
|
392
|
+
|
|
347
393
|
if ( !circle || !position ) return
|
|
348
394
|
|
|
349
395
|
const intersects = this.ssp.viewport.getIntersects( event )
|
|
350
|
-
const mouseMovePosition = intersects.length > 0 ? intersects[0].point.clone() : this.ssp.getPositionByOffset( event )
|
|
396
|
+
const mouseMovePosition = intersects.length > 0 ? intersects[ 0 ].point.clone() : this.ssp.getPositionByOffset( event )
|
|
351
397
|
|
|
352
398
|
radius = mouseMovePosition.distanceTo( position )
|
|
353
399
|
|
|
@@ -355,16 +401,19 @@ export default class DrawIngShapePlugin {
|
|
|
355
401
|
position,
|
|
356
402
|
radius,
|
|
357
403
|
} )
|
|
404
|
+
|
|
358
405
|
}
|
|
359
406
|
|
|
360
407
|
const onClick = ( event: MouseEvent ) => {
|
|
408
|
+
|
|
361
409
|
if ( !circle ) return
|
|
362
410
|
|
|
363
411
|
const intersects = this.ssp.viewport.getIntersects( event )
|
|
364
|
-
const mouseMovePosition = intersects.length > 0 ? intersects[0].point.clone() : this.ssp.getPositionByOffset( event )
|
|
412
|
+
const mouseMovePosition = intersects.length > 0 ? intersects[ 0 ].point.clone() : this.ssp.getPositionByOffset( event )
|
|
365
413
|
|
|
366
414
|
if ( !position ) position = mouseMovePosition.clone().setY( mouseMovePosition.y + 1 )
|
|
367
415
|
else {
|
|
416
|
+
|
|
368
417
|
removeSignals()
|
|
369
418
|
|
|
370
419
|
radius = mouseMovePosition.distanceTo( this.ssp.utils.IVector3ToVector3( position ) )
|
|
@@ -379,41 +428,54 @@ export default class DrawIngShapePlugin {
|
|
|
379
428
|
position,
|
|
380
429
|
radius,
|
|
381
430
|
} )
|
|
431
|
+
|
|
382
432
|
}
|
|
433
|
+
|
|
383
434
|
}
|
|
384
435
|
|
|
385
436
|
const onRightClick = () => {
|
|
437
|
+
|
|
386
438
|
this.clearDrawingCanvas3D()
|
|
387
439
|
removeSignals()
|
|
388
440
|
|
|
389
441
|
events?.onCancel?.()
|
|
442
|
+
|
|
390
443
|
}
|
|
391
444
|
|
|
392
445
|
const onKeyUp = ( event: KeyboardEvent ) => {
|
|
446
|
+
|
|
393
447
|
switch ( event.code ) {
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
448
|
+
|
|
449
|
+
case 'Escape':
|
|
450
|
+
onRightClick()
|
|
451
|
+
break
|
|
452
|
+
|
|
397
453
|
}
|
|
454
|
+
|
|
398
455
|
}
|
|
399
456
|
|
|
400
457
|
const removeSignals = () => {
|
|
458
|
+
|
|
401
459
|
this.ssp.signals.mouseMove.remove( onMouseMove )
|
|
402
460
|
this.ssp.signals.click.remove( onClick )
|
|
403
461
|
this.ssp.signals.rightClick.remove( onRightClick )
|
|
404
462
|
this.ssp.signals.keyUp.remove( onKeyUp )
|
|
463
|
+
|
|
405
464
|
}
|
|
406
465
|
|
|
407
466
|
this.ssp.signals.mouseMove.add( onMouseMove )
|
|
408
467
|
this.ssp.signals.click.add( onClick )
|
|
409
468
|
this.ssp.signals.rightClick.add( onRightClick )
|
|
410
469
|
this.ssp.signals.keyUp.add( onKeyUp )
|
|
470
|
+
|
|
411
471
|
} )
|
|
412
472
|
|
|
413
473
|
}
|
|
414
474
|
|
|
415
475
|
clearDrawingCanvas3D(): void {
|
|
476
|
+
|
|
416
477
|
this.ssp.removeCanvas3DById( DrawingIds.canvas )
|
|
478
|
+
|
|
417
479
|
}
|
|
418
480
|
|
|
419
481
|
}
|