@archireport/react-native-svg-draw 3.0.0 → 3.1.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 (13) hide show
  1. package/lib/commonjs/components/DrawCore/Item.js +12 -35
  2. package/lib/commonjs/components/DrawCore/Item.js.map +1 -1
  3. package/lib/commonjs/components/DrawCore/index.js +516 -512
  4. package/lib/commonjs/components/DrawCore/index.js.map +1 -1
  5. package/lib/module/components/DrawCore/Item.js +14 -37
  6. package/lib/module/components/DrawCore/Item.js.map +1 -1
  7. package/lib/module/components/DrawCore/index.js +517 -513
  8. package/lib/module/components/DrawCore/index.js.map +1 -1
  9. package/lib/typescript/components/DrawCore/Item.d.ts.map +1 -1
  10. package/lib/typescript/components/DrawCore/index.d.ts.map +1 -1
  11. package/package.json +5 -1
  12. package/src/components/DrawCore/Item.tsx +15 -47
  13. package/src/components/DrawCore/index.tsx +46 -51
package/lib/module/components/DrawCore/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { useCallback, useEffect, useRef, useState } from 'react';
2
2
  import { StyleSheet, TextInput, View, Keyboard, ImageBackground, Image, KeyboardAvoidingView } from 'react-native';
3
- import Animated, { runOnJS, useAnimatedGestureHandler, useAnimatedKeyboard, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
4
- import { PanGestureHandler } from 'react-native-gesture-handler';
3
+ import Animated, { runOnJS, useAnimatedKeyboard, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
4
+ import { Gesture, GestureDetector } from 'react-native-gesture-handler';
5
5
  import DrawPad from './DrawPad';
6
6
  import ViewShot from 'react-native-view-shot';
7
7
  import useDrawHook from './useDrawHook';
@@ -228,6 +228,11 @@ const DrawCore = _ref => {
228
228
  const [textVal, setTextVal] = useState('');
229
229
  const initialItem = useSharedValue(null);
230
230
  const textBaseHeight = useSharedValue(null);
231
+ const gestureContext = useSharedValue({
232
+ startX: 0,
233
+ startY: 0,
234
+ newlyCreated: false
235
+ });
231
236
  const addDoneItem = useCallback(item => {
232
237
  dispatchDrawStates({
233
238
  type: 'ADD_DONE_ITEM',
@@ -267,6 +272,7 @@ const DrawCore = _ref => {
267
272
  useEffect(() => {
268
273
  var _currentItem$value2;
269
274
  if (((_currentItem$value2 = currentItem.value) === null || _currentItem$value2 === void 0 ? void 0 : _currentItem$value2.type) === 'text') {
275
+ console.log('Updating text value:');
270
276
  showTextInput.value = true;
271
277
  textFocus();
272
278
  currentItem.value = {
@@ -278,529 +284,527 @@ const DrawCore = _ref => {
278
284
  };
279
285
  }
280
286
  }, [currentItem, showTextInput, textFocus, textVal]);
281
- const onGestureEvent = useAnimatedGestureHandler({
282
- onStart: (_ref2, ctx) => {
283
- var _currentItem$value3;
284
- let {
285
- x: startX,
286
- y: startY
287
- } = _ref2;
288
- ctx.startX = startX;
289
- ctx.startY = startY;
290
- ctx.newlyCreated = false;
291
- initialItem.value = currentItem.value;
292
- switch ((_currentItem$value3 = currentItem.value) === null || _currentItem$value3 === void 0 ? void 0 : _currentItem$value3.type) {
293
- case 'ellipse':
294
- const cx = typeof currentItem.value.data.cx === 'string' ? parseFloat(currentItem.value.data.cx) : currentItem.value.data.cx || 0;
295
- const cy = typeof currentItem.value.data.cy === 'string' ? parseFloat(currentItem.value.data.cy) : currentItem.value.data.cy || 0;
296
- const rx = typeof currentItem.value.data.rx === 'string' ? parseFloat(currentItem.value.data.rx) : currentItem.value.data.rx || 0;
297
- const ry = typeof currentItem.value.data.ry === 'string' ? parseFloat(currentItem.value.data.ry) : currentItem.value.data.ry || 0;
298
- if (startX <= cx + THRESHOLD && startX >= cx - THRESHOLD && startY <= cy - ry + THRESHOLD && startY >= cy - ry - THRESHOLD) {
299
- ctx.zone = 'TOP';
300
- } else if (startX <= cx + THRESHOLD && startX >= cx - THRESHOLD && startY <= cy + ry + THRESHOLD && startY >= cy + ry - THRESHOLD) {
301
- ctx.zone = 'BOTTOM';
302
- } else if (startY <= cy + THRESHOLD && startY >= cy - THRESHOLD && startX <= cx - rx + THRESHOLD && startX >= cx - rx - THRESHOLD) {
303
- ctx.zone = 'LEFT';
304
- } else if (startY <= cy + THRESHOLD && startY >= cy - THRESHOLD && startX <= cx + rx + THRESHOLD && startX >= cx + rx - THRESHOLD) {
305
- ctx.zone = 'RIGHT';
306
- } else if ((rx > 0 && startX > cx - rx && startX < cx + rx || rx < 0 && startX < cx - rx && startX > cx + rx) && (ry > 0 && startY > cy - ry && startY < cy + ry || ry < 0 && startY < cy - ry && startY > cy + ry)) {
307
- ctx.zone = 'CENTER';
308
- } else {
309
- ctx.zone = 'OUT';
310
- initialItem.value = null;
287
+ const panGesture = Gesture.Pan().onStart(event => {
288
+ var _currentItem$value3;
289
+ const {
290
+ x: startX,
291
+ y: startY
292
+ } = event;
293
+ gestureContext.value = {
294
+ startX,
295
+ startY,
296
+ newlyCreated: false
297
+ };
298
+ initialItem.value = currentItem.value;
299
+ switch ((_currentItem$value3 = currentItem.value) === null || _currentItem$value3 === void 0 ? void 0 : _currentItem$value3.type) {
300
+ case 'ellipse':
301
+ const cx = typeof currentItem.value.data.cx === 'string' ? parseFloat(currentItem.value.data.cx) : currentItem.value.data.cx || 0;
302
+ const cy = typeof currentItem.value.data.cy === 'string' ? parseFloat(currentItem.value.data.cy) : currentItem.value.data.cy || 0;
303
+ const rx = typeof currentItem.value.data.rx === 'string' ? parseFloat(currentItem.value.data.rx) : currentItem.value.data.rx || 0;
304
+ const ry = typeof currentItem.value.data.ry === 'string' ? parseFloat(currentItem.value.data.ry) : currentItem.value.data.ry || 0;
305
+ if (startX <= cx + THRESHOLD && startX >= cx - THRESHOLD && startY <= cy - ry + THRESHOLD && startY >= cy - ry - THRESHOLD) {
306
+ gestureContext.value.zone = 'TOP';
307
+ } else if (startX <= cx + THRESHOLD && startX >= cx - THRESHOLD && startY <= cy + ry + THRESHOLD && startY >= cy + ry - THRESHOLD) {
308
+ gestureContext.value.zone = 'BOTTOM';
309
+ } else if (startY <= cy + THRESHOLD && startY >= cy - THRESHOLD && startX <= cx - rx + THRESHOLD && startX >= cx - rx - THRESHOLD) {
310
+ gestureContext.value.zone = 'LEFT';
311
+ } else if (startY <= cy + THRESHOLD && startY >= cy - THRESHOLD && startX <= cx + rx + THRESHOLD && startX >= cx + rx - THRESHOLD) {
312
+ gestureContext.value.zone = 'RIGHT';
313
+ } else if ((rx > 0 && startX > cx - rx && startX < cx + rx || rx < 0 && startX < cx - rx && startX > cx + rx) && (ry > 0 && startY > cy - ry && startY < cy + ry || ry < 0 && startY < cy - ry && startY > cy + ry)) {
314
+ gestureContext.value.zone = 'CENTER';
315
+ } else {
316
+ gestureContext.value.zone = 'OUT';
317
+ initialItem.value = null;
318
+ }
319
+ break;
320
+ case 'rectangle':
321
+ const x = typeof currentItem.value.data.x === 'string' ? parseFloat(currentItem.value.data.x) : currentItem.value.data.x || 0;
322
+ const y = typeof currentItem.value.data.y === 'string' ? parseFloat(currentItem.value.data.y) : currentItem.value.data.y || 0;
323
+ const height = typeof currentItem.value.data.height === 'string' ? parseFloat(currentItem.value.data.height) : currentItem.value.data.height || 0;
324
+ const width = typeof currentItem.value.data.width === 'string' ? parseFloat(currentItem.value.data.width) : currentItem.value.data.width || 0;
325
+ if (startX <= x + THRESHOLD && startX >= x - THRESHOLD) {
326
+ if (startY <= y + THRESHOLD && startY >= y - THRESHOLD) {
327
+ gestureContext.value.zone = 'TOP_LEFT';
328
+ } else if (startY <= y + height + THRESHOLD && startY >= y + height - THRESHOLD) {
329
+ gestureContext.value.zone = 'BOTTOM_LEFT';
311
330
  }
312
- break;
313
- case 'rectangle':
314
- const x = typeof currentItem.value.data.x === 'string' ? parseFloat(currentItem.value.data.x) : currentItem.value.data.x || 0;
315
- const y = typeof currentItem.value.data.y === 'string' ? parseFloat(currentItem.value.data.y) : currentItem.value.data.y || 0;
316
- const height = typeof currentItem.value.data.height === 'string' ? parseFloat(currentItem.value.data.height) : currentItem.value.data.height || 0;
317
- const width = typeof currentItem.value.data.width === 'string' ? parseFloat(currentItem.value.data.width) : currentItem.value.data.width || 0;
318
- if (startX <= x + THRESHOLD && startX >= x - THRESHOLD) {
319
- if (startY <= y + THRESHOLD && startY >= y - THRESHOLD) {
320
- ctx.zone = 'TOP_LEFT';
321
- } else if (startY <= y + height + THRESHOLD && startY >= y + height - THRESHOLD) {
322
- ctx.zone = 'BOTTOM_LEFT';
323
- }
324
- } else if (startX <= x + width + THRESHOLD && startX >= x + width - THRESHOLD) {
325
- if (startY <= y + THRESHOLD && startY >= y - THRESHOLD) {
326
- ctx.zone = 'TOP_RIGHT';
327
- } else if (startY <= y + height + THRESHOLD && startY >= y + height - THRESHOLD) {
328
- ctx.zone = 'BOTTOM_RIGHT';
329
- }
330
- } else if ((width > 0 && startX > x && startX < x + width || width < 0 && startX < x && startX > x + width) && (height > 0 && startY > y && startY < y + height || height < 0 && startY < y && startY > y + height)) {
331
- ctx.zone = 'CENTER';
332
- } else {
333
- ctx.zone = 'OUT';
334
- initialItem.value = null;
331
+ } else if (startX <= x + width + THRESHOLD && startX >= x + width - THRESHOLD) {
332
+ if (startY <= y + THRESHOLD && startY >= y - THRESHOLD) {
333
+ gestureContext.value.zone = 'TOP_RIGHT';
334
+ } else if (startY <= y + height + THRESHOLD && startY >= y + height - THRESHOLD) {
335
+ gestureContext.value.zone = 'BOTTOM_RIGHT';
335
336
  }
336
- break;
337
- case 'doubleHead':
338
- case 'doubleArrows':
339
- case 'singleHead':
340
- const x1 = typeof currentItem.value.data.x1 === 'string' ? parseFloat(currentItem.value.data.x1) : currentItem.value.data.x1 || 0;
341
- const y1 = typeof currentItem.value.data.y1 === 'string' ? parseFloat(currentItem.value.data.y1) : currentItem.value.data.y1 || 0;
342
- const x2 = typeof currentItem.value.data.x2 === 'string' ? parseFloat(currentItem.value.data.x2) : currentItem.value.data.x2 || 0;
343
- const y2 = typeof currentItem.value.data.y2 === 'string' ? parseFloat(currentItem.value.data.y2) : currentItem.value.data.y2 || 0;
344
- if (startX <= x1 + THRESHOLD && startX >= x1 - THRESHOLD && startY <= y1 + THRESHOLD && startY >= y1 - THRESHOLD) {
345
- ctx.zone = 'TOP';
346
- } else if (startX <= x2 + THRESHOLD && startX >= x2 - THRESHOLD && startY - THRESHOLD <= y2 + THRESHOLD && startY + THRESHOLD >= y2 - THRESHOLD) {
347
- ctx.zone = 'BOTTOM';
348
- } else if (pDistance({
337
+ } else if ((width > 0 && startX > x && startX < x + width || width < 0 && startX < x && startX > x + width) && (height > 0 && startY > y && startY < y + height || height < 0 && startY < y && startY > y + height)) {
338
+ gestureContext.value.zone = 'CENTER';
339
+ } else {
340
+ gestureContext.value.zone = 'OUT';
341
+ initialItem.value = null;
342
+ }
343
+ break;
344
+ case 'doubleHead':
345
+ case 'doubleArrows':
346
+ case 'singleHead':
347
+ const x1 = typeof currentItem.value.data.x1 === 'string' ? parseFloat(currentItem.value.data.x1) : currentItem.value.data.x1 || 0;
348
+ const y1 = typeof currentItem.value.data.y1 === 'string' ? parseFloat(currentItem.value.data.y1) : currentItem.value.data.y1 || 0;
349
+ const x2 = typeof currentItem.value.data.x2 === 'string' ? parseFloat(currentItem.value.data.x2) : currentItem.value.data.x2 || 0;
350
+ const y2 = typeof currentItem.value.data.y2 === 'string' ? parseFloat(currentItem.value.data.y2) : currentItem.value.data.y2 || 0;
351
+ if (startX <= x1 + THRESHOLD && startX >= x1 - THRESHOLD && startY <= y1 + THRESHOLD && startY >= y1 - THRESHOLD) {
352
+ gestureContext.value.zone = 'TOP';
353
+ } else if (startX <= x2 + THRESHOLD && startX >= x2 - THRESHOLD && startY - THRESHOLD <= y2 + THRESHOLD && startY + THRESHOLD >= y2 - THRESHOLD) {
354
+ gestureContext.value.zone = 'BOTTOM';
355
+ } else if (pDistance({
356
+ x: startX,
357
+ y: startY
358
+ }, {
359
+ x1,
360
+ x2,
361
+ y1,
362
+ y2
363
+ }) <= THRESHOLD && (startX > x1 && startX < x2 || startX < x1 && startX > x2) && (startY > y1 && startY < y2 || startY < y1 && startY > y2)) {
364
+ gestureContext.value.zone = 'CENTER';
365
+ } else {
366
+ gestureContext.value.zone = 'OUT';
367
+ initialItem.value = null;
368
+ }
369
+ break;
370
+ case 'text':
371
+ const xText = typeof currentItem.value.data.x === 'string' ? parseFloat(currentItem.value.data.x) : currentItem.value.data.x || 0;
372
+ const yText = typeof currentItem.value.data.y === 'string' ? parseFloat(currentItem.value.data.y) : currentItem.value.data.y || 0;
373
+ const widthText = typeof currentItem.value.data.width === 'string' ? parseFloat(currentItem.value.data.width) : currentItem.value.data.width || 0;
374
+ const heightText = typeof currentItem.value.data.height === 'string' ? parseFloat(currentItem.value.data.height) : currentItem.value.data.height || 0;
375
+ if (startX <= xText + THRESHOLD && startX >= xText - THRESHOLD && startY <= yText + heightText / 2 + THRESHOLD && startY >= yText + heightText / 2 - THRESHOLD) {
376
+ gestureContext.value.zone = 'LEFT';
377
+ } else if (startX <= xText + widthText + THRESHOLD && startX >= xText + widthText - THRESHOLD && startY <= yText + heightText / 2 + THRESHOLD && startY >= yText + heightText / 2 - THRESHOLD) {
378
+ gestureContext.value.zone = 'RIGHT';
379
+ } else if ((widthText > 0 && startX > xText && startX < xText + widthText || widthText < 0 && startX < xText && startX > xText + widthText) && (heightText > 0 && startY > yText && startY < yText + heightText || heightText < 0 && startY < yText && startY > yText + heightText)) {
380
+ gestureContext.value.zone = 'CENTER';
381
+ } else {
382
+ gestureContext.value.zone = 'OUT';
383
+ initialItem.value = null;
384
+ gestureContext.value.newlyCreated = true;
385
+ runOnJS(setTextVal)('');
386
+ drawNewItem(mode, currentItem, addDoneItem, {
349
387
  x: startX,
350
388
  y: startY
351
389
  }, {
352
- x1,
353
- x2,
354
- y1,
355
- y2
356
- }) <= THRESHOLD && (startX > x1 && startX < x2 || startX < x1 && startX > x2) && (startY > y1 && startY < y2 || startY < y1 && startY > y2)) {
357
- ctx.zone = 'CENTER';
358
- } else {
359
- ctx.zone = 'OUT';
360
- initialItem.value = null;
361
- }
362
- break;
363
- case 'text':
364
- const xText = typeof currentItem.value.data.x === 'string' ? parseFloat(currentItem.value.data.x) : currentItem.value.data.x || 0;
365
- const yText = typeof currentItem.value.data.y === 'string' ? parseFloat(currentItem.value.data.y) : currentItem.value.data.y || 0;
366
- const widthText = typeof currentItem.value.data.width === 'string' ? parseFloat(currentItem.value.data.width) : currentItem.value.data.width || 0;
367
- const heightText = typeof currentItem.value.data.height === 'string' ? parseFloat(currentItem.value.data.height) : currentItem.value.data.height || 0;
368
- if (startX <= xText + THRESHOLD && startX >= xText - THRESHOLD && startY <= yText + heightText / 2 + THRESHOLD && startY >= yText + heightText / 2 - THRESHOLD) {
369
- ctx.zone = 'LEFT';
370
- } else if (startX <= xText + widthText + THRESHOLD && startX >= xText + widthText - THRESHOLD && startY <= yText + heightText / 2 + THRESHOLD && startY >= yText + heightText / 2 - THRESHOLD) {
371
- ctx.zone = 'RIGHT';
372
- } else if ((widthText > 0 && startX > xText && startX < xText + widthText || widthText < 0 && startX < xText && startX > xText + widthText) && (heightText > 0 && startY > yText && startY < yText + heightText || heightText < 0 && startY < yText && startY > yText + heightText)) {
373
- ctx.zone = 'CENTER';
374
- } else {
375
- ctx.zone = 'OUT';
376
- initialItem.value = null;
377
- ctx.newlyCreated = true;
378
- runOnJS(setTextVal)('');
379
- drawNewItem(mode, currentItem, addDoneItem, {
380
- x: startX,
381
- y: startY
382
- }, {
383
- textBaseHeight,
384
- strokeWidth,
385
- color
386
- });
387
- itemIsSelected.value = true;
388
- onCancelChangeWrapper && runOnJS(onCancelChangeWrapper)(true);
389
- runOnJS(textFocus)();
390
- }
391
- break;
392
- case 'pen':
393
- if (currentItem.value.data.some(p => startX <= p.x + THRESHOLD && startX >= p.x - THRESHOLD && startY <= p.y + THRESHOLD && startY >= p.y - THRESHOLD)) {
394
- ctx.zone = 'CENTER';
395
- } else {
396
- ctx.zone = 'OUT';
397
- initialItem.value = null;
398
- }
399
- break;
400
- default:
401
- ctx.zone = 'OUT';
390
+ textBaseHeight,
391
+ strokeWidth,
392
+ color
393
+ });
394
+ itemIsSelected.value = true;
395
+ onCancelChangeWrapper && runOnJS(onCancelChangeWrapper)(true);
396
+ runOnJS(textFocus)();
397
+ }
398
+ break;
399
+ case 'pen':
400
+ if (currentItem.value.data.some(p => startX <= p.x + THRESHOLD && startX >= p.x - THRESHOLD && startY <= p.y + THRESHOLD && startY >= p.y - THRESHOLD)) {
401
+ gestureContext.value.zone = 'CENTER';
402
+ } else {
403
+ gestureContext.value.zone = 'OUT';
402
404
  initialItem.value = null;
403
- if (drawState.drawingMode === 'text') {
404
- ctx.newlyCreated = true;
405
- runOnJS(setTextVal)('');
406
- drawNewItem(mode, currentItem, addDoneItem, {
407
- x: startX,
408
- y: startY
409
- }, {
410
- textBaseHeight,
411
- strokeWidth,
412
- color
413
- });
414
- itemIsSelected.value = true;
415
- onCancelChangeWrapper && runOnJS(onCancelChangeWrapper)(true);
416
- runOnJS(textFocus)();
417
- }
418
- break;
419
- }
420
- },
421
- onActive: (_ref3, ctx) => {
422
- var _currentItem$value4, _initialItem$value, _initialItem$value2, _initialItem$value4, _initialItem$value17, _initialItem$value30;
423
- let {
424
- x: currentX,
425
- y: currentY,
426
- translationX,
427
- translationY
428
- } = _ref3;
429
- const {
430
- startX,
431
- startY,
432
- zone,
433
- newlyCreated
434
- } = ctx;
435
- if (zone === 'OUT' && newlyCreated === false && mode.value !== 'text') {
436
- ctx.newlyCreated = true;
437
- /*
438
- if (mode.value === 'text') {
405
+ }
406
+ break;
407
+ default:
408
+ gestureContext.value.zone = 'OUT';
409
+ initialItem.value = null;
410
+ if (drawState.drawingMode === 'text') {
411
+ gestureContext.value.newlyCreated = true;
439
412
  runOnJS(setTextVal)('');
440
- }*/
441
- drawNewItem(mode, currentItem, addDoneItem, {
442
- x: startX,
443
- y: startY
444
- }, {
445
- textBaseHeight,
446
- strokeWidth,
447
- color
448
- });
449
- itemIsSelected.value = true;
450
- onCancelChangeWrapper && runOnJS(onCancelChangeWrapper)(true);
451
- }
452
- switch ((_currentItem$value4 = currentItem.value) === null || _currentItem$value4 === void 0 ? void 0 : _currentItem$value4.type) {
453
- case 'pen':
454
- if (((_initialItem$value = initialItem.value) === null || _initialItem$value === void 0 ? void 0 : _initialItem$value.type) === currentItem.value.type && zone === 'CENTER') {
455
- currentItem.value = {
456
- type: 'pen',
457
- strokeWidth: currentItem.value.strokeWidth,
458
- color: currentItem.value.color,
459
- data: initialItem.value.data.map(p => ({
460
- x: p.x + translationX,
461
- y: p.y + translationY
462
- }))
463
- };
464
- } else {
465
- currentItem.value = {
466
- type: 'pen',
467
- strokeWidth: currentItem.value.strokeWidth,
468
- color: currentItem.value.color,
469
- data: currentItem.value.data.concat({
470
- x: currentX,
471
- y: currentY
472
- })
473
- };
413
+ drawNewItem(mode, currentItem, addDoneItem, {
414
+ x: startX,
415
+ y: startY
416
+ }, {
417
+ textBaseHeight,
418
+ strokeWidth,
419
+ color
420
+ });
421
+ itemIsSelected.value = true;
422
+ onCancelChangeWrapper && runOnJS(onCancelChangeWrapper)(true);
423
+ runOnJS(textFocus)();
424
+ }
425
+ break;
426
+ }
427
+ }).onUpdate(event => {
428
+ var _currentItem$value4, _initialItem$value, _initialItem$value2, _initialItem$value4, _initialItem$value17, _initialItem$value30;
429
+ const {
430
+ x: currentX,
431
+ y: currentY,
432
+ translationX,
433
+ translationY
434
+ } = event;
435
+ const {
436
+ startX,
437
+ startY,
438
+ zone,
439
+ newlyCreated
440
+ } = gestureContext.value;
441
+ if (zone === 'OUT' && newlyCreated === false && mode.value !== 'text') {
442
+ gestureContext.value.newlyCreated = true;
443
+ /*
444
+ if (mode.value === 'text') {
445
+ runOnJS(setTextVal)('');
446
+ }*/
447
+ drawNewItem(mode, currentItem, addDoneItem, {
448
+ x: startX,
449
+ y: startY
450
+ }, {
451
+ textBaseHeight,
452
+ strokeWidth,
453
+ color
454
+ });
455
+ itemIsSelected.value = true;
456
+ onCancelChangeWrapper && runOnJS(onCancelChangeWrapper)(true);
457
+ }
458
+ switch ((_currentItem$value4 = currentItem.value) === null || _currentItem$value4 === void 0 ? void 0 : _currentItem$value4.type) {
459
+ case 'pen':
460
+ if (((_initialItem$value = initialItem.value) === null || _initialItem$value === void 0 ? void 0 : _initialItem$value.type) === currentItem.value.type && zone === 'CENTER') {
461
+ currentItem.value = {
462
+ type: 'pen',
463
+ strokeWidth: currentItem.value.strokeWidth,
464
+ color: currentItem.value.color,
465
+ data: initialItem.value.data.map(p => ({
466
+ x: p.x + translationX,
467
+ y: p.y + translationY
468
+ }))
469
+ };
470
+ } else {
471
+ currentItem.value = {
472
+ type: 'pen',
473
+ strokeWidth: currentItem.value.strokeWidth,
474
+ color: currentItem.value.color,
475
+ data: currentItem.value.data.concat({
476
+ x: currentX,
477
+ y: currentY
478
+ })
479
+ };
480
+ }
481
+ break;
482
+ case 'ellipse':
483
+ if (((_initialItem$value2 = initialItem.value) === null || _initialItem$value2 === void 0 ? void 0 : _initialItem$value2.type) === currentItem.value.type) {
484
+ var _initialItem$value3;
485
+ const rx = typeof initialItem.value.data.rx === 'string' ? parseFloat((_initialItem$value3 = initialItem.value) === null || _initialItem$value3 === void 0 ? void 0 : _initialItem$value3.data.rx) : initialItem.value.data.rx || 0;
486
+ const ry = typeof initialItem.value.data.ry === 'string' ? parseFloat(initialItem.value.data.ry) : initialItem.value.data.ry || 0;
487
+ const cx = typeof initialItem.value.data.cx === 'string' ? parseFloat(initialItem.value.data.cx) : initialItem.value.data.cx || 0;
488
+ const cy = typeof initialItem.value.data.cy === 'string' ? parseFloat(initialItem.value.data.cy) : initialItem.value.data.cy || 0;
489
+ switch (zone) {
490
+ case 'TOP':
491
+ currentItem.value = {
492
+ type: currentItem.value.type,
493
+ strokeWidth: currentItem.value.strokeWidth,
494
+ color: currentItem.value.color,
495
+ data: {
496
+ cx: cx,
497
+ cy: cy + translationY,
498
+ rx: rx,
499
+ ry: ry - translationY
500
+ }
501
+ };
502
+ break;
503
+ case 'BOTTOM':
504
+ currentItem.value = {
505
+ type: currentItem.value.type,
506
+ strokeWidth: currentItem.value.strokeWidth,
507
+ color: currentItem.value.color,
508
+ data: {
509
+ cx: cx,
510
+ cy: cy + translationY,
511
+ rx: rx,
512
+ ry: ry + translationY
513
+ }
514
+ };
515
+ break;
516
+ case 'LEFT':
517
+ currentItem.value = {
518
+ type: currentItem.value.type,
519
+ strokeWidth: currentItem.value.strokeWidth,
520
+ color: currentItem.value.color,
521
+ data: {
522
+ cx: cx + translationX,
523
+ cy: cy,
524
+ rx: rx - translationX,
525
+ ry: ry
526
+ }
527
+ };
528
+ break;
529
+ case 'RIGHT':
530
+ currentItem.value = {
531
+ type: currentItem.value.type,
532
+ strokeWidth: currentItem.value.strokeWidth,
533
+ color: currentItem.value.color,
534
+ data: {
535
+ cx: cx + translationX,
536
+ cy: cy,
537
+ rx: rx + translationX,
538
+ ry: ry
539
+ }
540
+ };
541
+ break;
542
+ case 'CENTER':
543
+ currentItem.value = {
544
+ type: currentItem.value.type,
545
+ strokeWidth: currentItem.value.strokeWidth,
546
+ color: currentItem.value.color,
547
+ data: {
548
+ cx: cx + translationX,
549
+ cy: cy + translationY,
550
+ rx: rx,
551
+ ry: ry
552
+ }
553
+ };
554
+ break;
474
555
  }
475
- break;
476
- case 'ellipse':
477
- if (((_initialItem$value2 = initialItem.value) === null || _initialItem$value2 === void 0 ? void 0 : _initialItem$value2.type) === currentItem.value.type) {
478
- var _initialItem$value3;
479
- const rx = typeof initialItem.value.data.rx === 'string' ? parseFloat((_initialItem$value3 = initialItem.value) === null || _initialItem$value3 === void 0 ? void 0 : _initialItem$value3.data.rx) : initialItem.value.data.rx || 0;
480
- const ry = typeof initialItem.value.data.ry === 'string' ? parseFloat(initialItem.value.data.ry) : initialItem.value.data.ry || 0;
481
- const cx = typeof initialItem.value.data.cx === 'string' ? parseFloat(initialItem.value.data.cx) : initialItem.value.data.cx || 0;
482
- const cy = typeof initialItem.value.data.cy === 'string' ? parseFloat(initialItem.value.data.cy) : initialItem.value.data.cy || 0;
483
- switch (zone) {
484
- case 'TOP':
485
- currentItem.value = {
486
- type: currentItem.value.type,
487
- strokeWidth: currentItem.value.strokeWidth,
488
- color: currentItem.value.color,
489
- data: {
490
- cx: cx,
491
- cy: cy + translationY,
492
- rx: rx,
493
- ry: ry - translationY
494
- }
495
- };
496
- break;
497
- case 'BOTTOM':
498
- currentItem.value = {
499
- type: currentItem.value.type,
500
- strokeWidth: currentItem.value.strokeWidth,
501
- color: currentItem.value.color,
502
- data: {
503
- cx: cx,
504
- cy: cy + translationY,
505
- rx: rx,
506
- ry: ry + translationY
507
- }
508
- };
509
- break;
510
- case 'LEFT':
511
- currentItem.value = {
512
- type: currentItem.value.type,
513
- strokeWidth: currentItem.value.strokeWidth,
514
- color: currentItem.value.color,
515
- data: {
516
- cx: cx + translationX,
517
- cy: cy,
518
- rx: rx - translationX,
519
- ry: ry
520
- }
521
- };
522
- break;
523
- case 'RIGHT':
524
- currentItem.value = {
525
- type: currentItem.value.type,
526
- strokeWidth: currentItem.value.strokeWidth,
527
- color: currentItem.value.color,
528
- data: {
529
- cx: cx + translationX,
530
- cy: cy,
531
- rx: rx + translationX,
532
- ry: ry
533
- }
534
- };
535
- break;
536
- case 'CENTER':
537
- currentItem.value = {
538
- type: currentItem.value.type,
539
- strokeWidth: currentItem.value.strokeWidth,
540
- color: currentItem.value.color,
541
- data: {
542
- cx: cx + translationX,
543
- cy: cy + translationY,
544
- rx: rx,
545
- ry: ry
546
- }
547
- };
548
- break;
556
+ } else {
557
+ currentItem.value = {
558
+ type: currentItem.value.type,
559
+ strokeWidth: currentItem.value.strokeWidth,
560
+ color: currentItem.value.color,
561
+ data: {
562
+ cx: startX + translationX,
563
+ cy: startY + translationY,
564
+ rx: translationX,
565
+ ry: translationY
549
566
  }
550
- } else {
551
- currentItem.value = {
552
- type: currentItem.value.type,
553
- strokeWidth: currentItem.value.strokeWidth,
554
- color: currentItem.value.color,
555
- data: {
556
- cx: startX + translationX,
557
- cy: startY + translationY,
558
- rx: translationX,
559
- ry: translationY
560
- }
561
- };
567
+ };
568
+ }
569
+ break;
570
+ case 'rectangle':
571
+ if (((_initialItem$value4 = initialItem.value) === null || _initialItem$value4 === void 0 ? void 0 : _initialItem$value4.type) === currentItem.value.type) {
572
+ var _initialItem$value5, _initialItem$value6, _initialItem$value7, _initialItem$value8, _initialItem$value9, _initialItem$value10, _initialItem$value11, _initialItem$value12, _initialItem$value13, _initialItem$value14, _initialItem$value15, _initialItem$value16;
573
+ const height = typeof ((_initialItem$value5 = initialItem.value) === null || _initialItem$value5 === void 0 ? void 0 : _initialItem$value5.data.height) === 'string' ? parseFloat((_initialItem$value6 = initialItem.value) === null || _initialItem$value6 === void 0 ? void 0 : _initialItem$value6.data.height) : ((_initialItem$value7 = initialItem.value) === null || _initialItem$value7 === void 0 ? void 0 : _initialItem$value7.data.height) || 0;
574
+ const width = typeof ((_initialItem$value8 = initialItem.value) === null || _initialItem$value8 === void 0 ? void 0 : _initialItem$value8.data.width) === 'string' ? parseFloat((_initialItem$value9 = initialItem.value) === null || _initialItem$value9 === void 0 ? void 0 : _initialItem$value9.data.width) : ((_initialItem$value10 = initialItem.value) === null || _initialItem$value10 === void 0 ? void 0 : _initialItem$value10.data.width) || 0;
575
+ const x = typeof ((_initialItem$value11 = initialItem.value) === null || _initialItem$value11 === void 0 ? void 0 : _initialItem$value11.data.x) === 'string' ? parseFloat((_initialItem$value12 = initialItem.value) === null || _initialItem$value12 === void 0 ? void 0 : _initialItem$value12.data.x) : ((_initialItem$value13 = initialItem.value) === null || _initialItem$value13 === void 0 ? void 0 : _initialItem$value13.data.x) || 0;
576
+ const y = typeof ((_initialItem$value14 = initialItem.value) === null || _initialItem$value14 === void 0 ? void 0 : _initialItem$value14.data.y) === 'string' ? parseFloat((_initialItem$value15 = initialItem.value) === null || _initialItem$value15 === void 0 ? void 0 : _initialItem$value15.data.y) : ((_initialItem$value16 = initialItem.value) === null || _initialItem$value16 === void 0 ? void 0 : _initialItem$value16.data.y) || 0;
577
+ switch (zone) {
578
+ case 'TOP_LEFT':
579
+ currentItem.value = {
580
+ type: 'rectangle',
581
+ strokeWidth: currentItem.value.strokeWidth,
582
+ color: currentItem.value.color,
583
+ data: {
584
+ x: startX + translationX,
585
+ y: startY + translationY,
586
+ width: width - translationX,
587
+ height: height - translationY
588
+ }
589
+ };
590
+ break;
591
+ case 'TOP_RIGHT':
592
+ currentItem.value = {
593
+ type: 'rectangle',
594
+ strokeWidth: currentItem.value.strokeWidth,
595
+ color: currentItem.value.color,
596
+ data: {
597
+ x: x,
598
+ y: startY + translationY,
599
+ width: width + translationX,
600
+ height: height - translationY
601
+ }
602
+ };
603
+ break;
604
+ case 'BOTTOM_LEFT':
605
+ currentItem.value = {
606
+ type: 'rectangle',
607
+ strokeWidth: currentItem.value.strokeWidth,
608
+ color: currentItem.value.color,
609
+ data: {
610
+ x: startX + translationX,
611
+ y: y,
612
+ width: width - translationX,
613
+ height: height + translationY
614
+ }
615
+ };
616
+ break;
617
+ case 'BOTTOM_RIGHT':
618
+ currentItem.value = {
619
+ type: 'rectangle',
620
+ strokeWidth: currentItem.value.strokeWidth,
621
+ color: currentItem.value.color,
622
+ data: {
623
+ x: x,
624
+ y: y,
625
+ width: width + translationX,
626
+ height: height + translationY
627
+ }
628
+ };
629
+ break;
630
+ case 'CENTER':
631
+ currentItem.value = {
632
+ type: 'rectangle',
633
+ strokeWidth: currentItem.value.strokeWidth,
634
+ color: currentItem.value.color,
635
+ data: {
636
+ x: x + translationX,
637
+ y: y + translationY,
638
+ width: width,
639
+ height: height
640
+ }
641
+ };
642
+ break;
562
643
  }
563
- break;
564
- case 'rectangle':
565
- if (((_initialItem$value4 = initialItem.value) === null || _initialItem$value4 === void 0 ? void 0 : _initialItem$value4.type) === currentItem.value.type) {
566
- var _initialItem$value5, _initialItem$value6, _initialItem$value7, _initialItem$value8, _initialItem$value9, _initialItem$value10, _initialItem$value11, _initialItem$value12, _initialItem$value13, _initialItem$value14, _initialItem$value15, _initialItem$value16;
567
- const height = typeof ((_initialItem$value5 = initialItem.value) === null || _initialItem$value5 === void 0 ? void 0 : _initialItem$value5.data.height) === 'string' ? parseFloat((_initialItem$value6 = initialItem.value) === null || _initialItem$value6 === void 0 ? void 0 : _initialItem$value6.data.height) : ((_initialItem$value7 = initialItem.value) === null || _initialItem$value7 === void 0 ? void 0 : _initialItem$value7.data.height) || 0;
568
- const width = typeof ((_initialItem$value8 = initialItem.value) === null || _initialItem$value8 === void 0 ? void 0 : _initialItem$value8.data.width) === 'string' ? parseFloat((_initialItem$value9 = initialItem.value) === null || _initialItem$value9 === void 0 ? void 0 : _initialItem$value9.data.width) : ((_initialItem$value10 = initialItem.value) === null || _initialItem$value10 === void 0 ? void 0 : _initialItem$value10.data.width) || 0;
569
- const x = typeof ((_initialItem$value11 = initialItem.value) === null || _initialItem$value11 === void 0 ? void 0 : _initialItem$value11.data.x) === 'string' ? parseFloat((_initialItem$value12 = initialItem.value) === null || _initialItem$value12 === void 0 ? void 0 : _initialItem$value12.data.x) : ((_initialItem$value13 = initialItem.value) === null || _initialItem$value13 === void 0 ? void 0 : _initialItem$value13.data.x) || 0;
570
- const y = typeof ((_initialItem$value14 = initialItem.value) === null || _initialItem$value14 === void 0 ? void 0 : _initialItem$value14.data.y) === 'string' ? parseFloat((_initialItem$value15 = initialItem.value) === null || _initialItem$value15 === void 0 ? void 0 : _initialItem$value15.data.y) : ((_initialItem$value16 = initialItem.value) === null || _initialItem$value16 === void 0 ? void 0 : _initialItem$value16.data.y) || 0;
571
- switch (zone) {
572
- case 'TOP_LEFT':
573
- currentItem.value = {
574
- type: 'rectangle',
575
- strokeWidth: currentItem.value.strokeWidth,
576
- color: currentItem.value.color,
577
- data: {
578
- x: startX + translationX,
579
- y: startY + translationY,
580
- width: width - translationX,
581
- height: height - translationY
582
- }
583
- };
584
- break;
585
- case 'TOP_RIGHT':
586
- currentItem.value = {
587
- type: 'rectangle',
588
- strokeWidth: currentItem.value.strokeWidth,
589
- color: currentItem.value.color,
590
- data: {
591
- x: x,
592
- y: startY + translationY,
593
- width: width + translationX,
594
- height: height - translationY
595
- }
596
- };
597
- break;
598
- case 'BOTTOM_LEFT':
599
- currentItem.value = {
600
- type: 'rectangle',
601
- strokeWidth: currentItem.value.strokeWidth,
602
- color: currentItem.value.color,
603
- data: {
604
- x: startX + translationX,
605
- y: y,
606
- width: width - translationX,
607
- height: height + translationY
608
- }
609
- };
610
- break;
611
- case 'BOTTOM_RIGHT':
612
- currentItem.value = {
613
- type: 'rectangle',
614
- strokeWidth: currentItem.value.strokeWidth,
615
- color: currentItem.value.color,
616
- data: {
617
- x: x,
618
- y: y,
619
- width: width + translationX,
620
- height: height + translationY
621
- }
622
- };
623
- break;
624
- case 'CENTER':
625
- currentItem.value = {
626
- type: 'rectangle',
627
- strokeWidth: currentItem.value.strokeWidth,
628
- color: currentItem.value.color,
629
- data: {
630
- x: x + translationX,
631
- y: y + translationY,
632
- width: width,
633
- height: height
634
- }
635
- };
636
- break;
644
+ } else {
645
+ currentItem.value = {
646
+ type: 'rectangle',
647
+ strokeWidth: currentItem.value.strokeWidth,
648
+ color: currentItem.value.color,
649
+ data: {
650
+ x: currentItem.value.data.x,
651
+ y: currentItem.value.data.y,
652
+ width: translationX,
653
+ height: translationY
637
654
  }
638
- } else {
639
- currentItem.value = {
640
- type: 'rectangle',
641
- strokeWidth: currentItem.value.strokeWidth,
642
- color: currentItem.value.color,
643
- data: {
644
- x: currentItem.value.data.x,
645
- y: currentItem.value.data.y,
646
- width: translationX,
647
- height: translationY
648
- }
649
- };
655
+ };
656
+ }
657
+ break;
658
+ case 'singleHead':
659
+ case 'doubleHead':
660
+ case 'doubleArrows':
661
+ if (((_initialItem$value17 = initialItem.value) === null || _initialItem$value17 === void 0 ? void 0 : _initialItem$value17.type) === currentItem.value.type) {
662
+ var _initialItem$value18, _initialItem$value19, _initialItem$value20, _initialItem$value21, _initialItem$value22, _initialItem$value23, _initialItem$value24, _initialItem$value25, _initialItem$value26, _initialItem$value27, _initialItem$value28, _initialItem$value29;
663
+ const x1 = typeof ((_initialItem$value18 = initialItem.value) === null || _initialItem$value18 === void 0 ? void 0 : _initialItem$value18.data.x1) === 'string' ? parseFloat((_initialItem$value19 = initialItem.value) === null || _initialItem$value19 === void 0 ? void 0 : _initialItem$value19.data.x1) : ((_initialItem$value20 = initialItem.value) === null || _initialItem$value20 === void 0 ? void 0 : _initialItem$value20.data.x1) || 0;
664
+ const y1 = typeof ((_initialItem$value21 = initialItem.value) === null || _initialItem$value21 === void 0 ? void 0 : _initialItem$value21.data.y1) === 'string' ? parseFloat((_initialItem$value22 = initialItem.value) === null || _initialItem$value22 === void 0 ? void 0 : _initialItem$value22.data.y1) : ((_initialItem$value23 = initialItem.value) === null || _initialItem$value23 === void 0 ? void 0 : _initialItem$value23.data.y1) || 0;
665
+ const x2 = typeof ((_initialItem$value24 = initialItem.value) === null || _initialItem$value24 === void 0 ? void 0 : _initialItem$value24.data.x2) === 'string' ? parseFloat((_initialItem$value25 = initialItem.value) === null || _initialItem$value25 === void 0 ? void 0 : _initialItem$value25.data.x2) : ((_initialItem$value26 = initialItem.value) === null || _initialItem$value26 === void 0 ? void 0 : _initialItem$value26.data.x2) || 0;
666
+ const y2 = typeof ((_initialItem$value27 = initialItem.value) === null || _initialItem$value27 === void 0 ? void 0 : _initialItem$value27.data.y2) === 'string' ? parseFloat((_initialItem$value28 = initialItem.value) === null || _initialItem$value28 === void 0 ? void 0 : _initialItem$value28.data.y2) : ((_initialItem$value29 = initialItem.value) === null || _initialItem$value29 === void 0 ? void 0 : _initialItem$value29.data.y2) || 0;
667
+ switch (zone) {
668
+ case 'TOP':
669
+ currentItem.value = {
670
+ type: currentItem.value.type,
671
+ strokeWidth: currentItem.value.strokeWidth,
672
+ color: currentItem.value.color,
673
+ text: currentItem.value.type === 'doubleArrows' ? currentItem.value.text ?? '' : '',
674
+ data: {
675
+ x1: x1 + translationX,
676
+ y1: y1 + translationY,
677
+ x2: x2,
678
+ y2: y2
679
+ }
680
+ };
681
+ break;
682
+ case 'BOTTOM':
683
+ currentItem.value = {
684
+ type: currentItem.value.type,
685
+ strokeWidth: currentItem.value.strokeWidth,
686
+ color: currentItem.value.color,
687
+ text: currentItem.value.type === 'doubleArrows' ? currentItem.value.text ?? '' : '',
688
+ data: {
689
+ x1: x1,
690
+ y1: y1,
691
+ x2: x2 + translationX,
692
+ y2: y2 + translationY
693
+ }
694
+ };
695
+ break;
696
+ case 'CENTER':
697
+ currentItem.value = {
698
+ type: currentItem.value.type,
699
+ strokeWidth: currentItem.value.strokeWidth,
700
+ color: currentItem.value.color,
701
+ text: currentItem.value.type === 'doubleArrows' ? currentItem.value.text ?? '' : '',
702
+ data: {
703
+ x1: x1 + translationX,
704
+ y1: y1 + translationY,
705
+ x2: x2 + translationX,
706
+ y2: y2 + translationY
707
+ }
708
+ };
709
+ break;
650
710
  }
651
- break;
652
- case 'singleHead':
653
- case 'doubleHead':
654
- case 'doubleArrows':
655
- if (((_initialItem$value17 = initialItem.value) === null || _initialItem$value17 === void 0 ? void 0 : _initialItem$value17.type) === currentItem.value.type) {
656
- var _initialItem$value18, _initialItem$value19, _initialItem$value20, _initialItem$value21, _initialItem$value22, _initialItem$value23, _initialItem$value24, _initialItem$value25, _initialItem$value26, _initialItem$value27, _initialItem$value28, _initialItem$value29;
657
- const x1 = typeof ((_initialItem$value18 = initialItem.value) === null || _initialItem$value18 === void 0 ? void 0 : _initialItem$value18.data.x1) === 'string' ? parseFloat((_initialItem$value19 = initialItem.value) === null || _initialItem$value19 === void 0 ? void 0 : _initialItem$value19.data.x1) : ((_initialItem$value20 = initialItem.value) === null || _initialItem$value20 === void 0 ? void 0 : _initialItem$value20.data.x1) || 0;
658
- const y1 = typeof ((_initialItem$value21 = initialItem.value) === null || _initialItem$value21 === void 0 ? void 0 : _initialItem$value21.data.y1) === 'string' ? parseFloat((_initialItem$value22 = initialItem.value) === null || _initialItem$value22 === void 0 ? void 0 : _initialItem$value22.data.y1) : ((_initialItem$value23 = initialItem.value) === null || _initialItem$value23 === void 0 ? void 0 : _initialItem$value23.data.y1) || 0;
659
- const x2 = typeof ((_initialItem$value24 = initialItem.value) === null || _initialItem$value24 === void 0 ? void 0 : _initialItem$value24.data.x2) === 'string' ? parseFloat((_initialItem$value25 = initialItem.value) === null || _initialItem$value25 === void 0 ? void 0 : _initialItem$value25.data.x2) : ((_initialItem$value26 = initialItem.value) === null || _initialItem$value26 === void 0 ? void 0 : _initialItem$value26.data.x2) || 0;
660
- const y2 = typeof ((_initialItem$value27 = initialItem.value) === null || _initialItem$value27 === void 0 ? void 0 : _initialItem$value27.data.y2) === 'string' ? parseFloat((_initialItem$value28 = initialItem.value) === null || _initialItem$value28 === void 0 ? void 0 : _initialItem$value28.data.y2) : ((_initialItem$value29 = initialItem.value) === null || _initialItem$value29 === void 0 ? void 0 : _initialItem$value29.data.y2) || 0;
661
- switch (zone) {
662
- case 'TOP':
663
- currentItem.value = {
664
- type: currentItem.value.type,
665
- strokeWidth: currentItem.value.strokeWidth,
666
- color: currentItem.value.color,
667
- text: currentItem.value.type === 'doubleArrows' ? currentItem.value.text ?? '' : '',
668
- data: {
669
- x1: x1 + translationX,
670
- y1: y1 + translationY,
671
- x2: x2,
672
- y2: y2
673
- }
674
- };
675
- break;
676
- case 'BOTTOM':
677
- currentItem.value = {
678
- type: currentItem.value.type,
679
- strokeWidth: currentItem.value.strokeWidth,
680
- color: currentItem.value.color,
681
- text: currentItem.value.type === 'doubleArrows' ? currentItem.value.text ?? '' : '',
682
- data: {
683
- x1: x1,
684
- y1: y1,
685
- x2: x2 + translationX,
686
- y2: y2 + translationY
687
- }
688
- };
689
- break;
690
- case 'CENTER':
691
- currentItem.value = {
692
- type: currentItem.value.type,
693
- strokeWidth: currentItem.value.strokeWidth,
694
- color: currentItem.value.color,
695
- text: currentItem.value.type === 'doubleArrows' ? currentItem.value.text ?? '' : '',
696
- data: {
697
- x1: x1 + translationX,
698
- y1: y1 + translationY,
699
- x2: x2 + translationX,
700
- y2: y2 + translationY
701
- }
702
- };
703
- break;
711
+ } else {
712
+ currentItem.value = {
713
+ type: currentItem.value.type,
714
+ strokeWidth: currentItem.value.strokeWidth,
715
+ color: currentItem.value.color,
716
+ text: currentItem.value.type === 'doubleArrows' ? currentItem.value.text ?? '' : '',
717
+ data: {
718
+ x1: startX,
719
+ y1: startY,
720
+ x2: startX + translationX,
721
+ y2: startY + translationY
704
722
  }
705
- } else {
706
- currentItem.value = {
707
- type: currentItem.value.type,
708
- strokeWidth: currentItem.value.strokeWidth,
709
- color: currentItem.value.color,
710
- text: currentItem.value.type === 'doubleArrows' ? currentItem.value.text ?? '' : '',
711
- data: {
712
- x1: startX,
713
- y1: startY,
714
- x2: startX + translationX,
715
- y2: startY + translationY
716
- }
717
- };
723
+ };
724
+ }
725
+ break;
726
+ case 'text':
727
+ if (((_initialItem$value30 = initialItem.value) === null || _initialItem$value30 === void 0 ? void 0 : _initialItem$value30.type) === currentItem.value.type) {
728
+ var _initialItem$value31, _initialItem$value32, _initialItem$value33, _initialItem$value34, _initialItem$value35, _initialItem$value36, _initialItem$value37, _initialItem$value38, _initialItem$value39, _initialItem$value40, _initialItem$value41, _initialItem$value42;
729
+ const xText = typeof ((_initialItem$value31 = initialItem.value) === null || _initialItem$value31 === void 0 ? void 0 : _initialItem$value31.data.x) === 'string' ? parseFloat((_initialItem$value32 = initialItem.value) === null || _initialItem$value32 === void 0 ? void 0 : _initialItem$value32.data.x) : ((_initialItem$value33 = initialItem.value) === null || _initialItem$value33 === void 0 ? void 0 : _initialItem$value33.data.x) || 0;
730
+ const yText = typeof ((_initialItem$value34 = initialItem.value) === null || _initialItem$value34 === void 0 ? void 0 : _initialItem$value34.data.y) === 'string' ? parseFloat((_initialItem$value35 = initialItem.value) === null || _initialItem$value35 === void 0 ? void 0 : _initialItem$value35.data.y) : ((_initialItem$value36 = initialItem.value) === null || _initialItem$value36 === void 0 ? void 0 : _initialItem$value36.data.y) || 0;
731
+ const widthText = typeof ((_initialItem$value37 = initialItem.value) === null || _initialItem$value37 === void 0 ? void 0 : _initialItem$value37.data.width) === 'string' ? parseFloat((_initialItem$value38 = initialItem.value) === null || _initialItem$value38 === void 0 ? void 0 : _initialItem$value38.data.width) : ((_initialItem$value39 = initialItem.value) === null || _initialItem$value39 === void 0 ? void 0 : _initialItem$value39.data.width) || 0;
732
+ const heightText = typeof ((_initialItem$value40 = initialItem.value) === null || _initialItem$value40 === void 0 ? void 0 : _initialItem$value40.data.height) === 'string' ? parseFloat((_initialItem$value41 = initialItem.value) === null || _initialItem$value41 === void 0 ? void 0 : _initialItem$value41.data.height) : ((_initialItem$value42 = initialItem.value) === null || _initialItem$value42 === void 0 ? void 0 : _initialItem$value42.data.height) || 0;
733
+ switch (zone) {
734
+ case 'LEFT':
735
+ currentItem.value = {
736
+ type: currentItem.value.type,
737
+ strokeWidth: currentItem.value.strokeWidth,
738
+ color: currentItem.value.color,
739
+ text: currentItem.value.text,
740
+ data: {
741
+ x: xText + translationX,
742
+ y: yText,
743
+ width: widthText - translationX,
744
+ height: heightText
745
+ }
746
+ };
747
+ break;
748
+ case 'RIGHT':
749
+ currentItem.value = {
750
+ type: currentItem.value.type,
751
+ strokeWidth: currentItem.value.strokeWidth,
752
+ color: currentItem.value.color,
753
+ text: currentItem.value.text,
754
+ data: {
755
+ x: xText,
756
+ y: yText,
757
+ width: widthText + translationX,
758
+ height: heightText
759
+ }
760
+ };
761
+ break;
762
+ case 'CENTER':
763
+ currentItem.value = {
764
+ type: currentItem.value.type,
765
+ strokeWidth: currentItem.value.strokeWidth,
766
+ color: currentItem.value.color,
767
+ text: currentItem.value.text,
768
+ data: {
769
+ x: xText + translationX,
770
+ y: yText + translationY,
771
+ width: widthText,
772
+ height: heightText
773
+ }
774
+ };
775
+ break;
718
776
  }
719
- break;
720
- case 'text':
721
- if (((_initialItem$value30 = initialItem.value) === null || _initialItem$value30 === void 0 ? void 0 : _initialItem$value30.type) === currentItem.value.type) {
722
- var _initialItem$value31, _initialItem$value32, _initialItem$value33, _initialItem$value34, _initialItem$value35, _initialItem$value36, _initialItem$value37, _initialItem$value38, _initialItem$value39, _initialItem$value40, _initialItem$value41, _initialItem$value42;
723
- const xText = typeof ((_initialItem$value31 = initialItem.value) === null || _initialItem$value31 === void 0 ? void 0 : _initialItem$value31.data.x) === 'string' ? parseFloat((_initialItem$value32 = initialItem.value) === null || _initialItem$value32 === void 0 ? void 0 : _initialItem$value32.data.x) : ((_initialItem$value33 = initialItem.value) === null || _initialItem$value33 === void 0 ? void 0 : _initialItem$value33.data.x) || 0;
724
- const yText = typeof ((_initialItem$value34 = initialItem.value) === null || _initialItem$value34 === void 0 ? void 0 : _initialItem$value34.data.y) === 'string' ? parseFloat((_initialItem$value35 = initialItem.value) === null || _initialItem$value35 === void 0 ? void 0 : _initialItem$value35.data.y) : ((_initialItem$value36 = initialItem.value) === null || _initialItem$value36 === void 0 ? void 0 : _initialItem$value36.data.y) || 0;
725
- const widthText = typeof ((_initialItem$value37 = initialItem.value) === null || _initialItem$value37 === void 0 ? void 0 : _initialItem$value37.data.width) === 'string' ? parseFloat((_initialItem$value38 = initialItem.value) === null || _initialItem$value38 === void 0 ? void 0 : _initialItem$value38.data.width) : ((_initialItem$value39 = initialItem.value) === null || _initialItem$value39 === void 0 ? void 0 : _initialItem$value39.data.width) || 0;
726
- const heightText = typeof ((_initialItem$value40 = initialItem.value) === null || _initialItem$value40 === void 0 ? void 0 : _initialItem$value40.data.height) === 'string' ? parseFloat((_initialItem$value41 = initialItem.value) === null || _initialItem$value41 === void 0 ? void 0 : _initialItem$value41.data.height) : ((_initialItem$value42 = initialItem.value) === null || _initialItem$value42 === void 0 ? void 0 : _initialItem$value42.data.height) || 0;
727
- switch (zone) {
728
- case 'LEFT':
729
- currentItem.value = {
730
- type: currentItem.value.type,
731
- strokeWidth: currentItem.value.strokeWidth,
732
- color: currentItem.value.color,
733
- text: currentItem.value.text,
734
- data: {
735
- x: xText + translationX,
736
- y: yText,
737
- width: widthText - translationX,
738
- height: heightText
739
- }
740
- };
741
- break;
742
- case 'RIGHT':
743
- currentItem.value = {
744
- type: currentItem.value.type,
745
- strokeWidth: currentItem.value.strokeWidth,
746
- color: currentItem.value.color,
747
- text: currentItem.value.text,
748
- data: {
749
- x: xText,
750
- y: yText,
751
- width: widthText + translationX,
752
- height: heightText
753
- }
754
- };
755
- break;
756
- case 'CENTER':
757
- currentItem.value = {
758
- type: currentItem.value.type,
759
- strokeWidth: currentItem.value.strokeWidth,
760
- color: currentItem.value.color,
761
- text: currentItem.value.text,
762
- data: {
763
- x: xText + translationX,
764
- y: yText + translationY,
765
- width: widthText,
766
- height: heightText
767
- }
768
- };
769
- break;
777
+ } else {
778
+ currentItem.value = {
779
+ type: currentItem.value.type,
780
+ strokeWidth: currentItem.value.strokeWidth,
781
+ color: currentItem.value.color,
782
+ text: currentItem.value.text,
783
+ data: {
784
+ x: startX + translationX,
785
+ y: startY + translationY,
786
+ width: currentItem.value.data.width,
787
+ height: currentItem.value.data.height
770
788
  }
771
- } else {
772
- currentItem.value = {
773
- type: currentItem.value.type,
774
- strokeWidth: currentItem.value.strokeWidth,
775
- color: currentItem.value.color,
776
- text: currentItem.value.text,
777
- data: {
778
- x: startX + translationX,
779
- y: startY + translationY,
780
- width: currentItem.value.data.width,
781
- height: currentItem.value.data.height
782
- }
783
- };
784
- }
785
- }
786
- },
787
- onEnd: _event => {
788
- var _currentItem$value5, _currentItem$value6;
789
- if (((_currentItem$value5 = currentItem.value) === null || _currentItem$value5 === void 0 ? void 0 : _currentItem$value5.type) === 'doubleArrows') {
790
- runOnJS(textFocusState)();
791
- }
792
- if (((_currentItem$value6 = currentItem.value) === null || _currentItem$value6 === void 0 ? void 0 : _currentItem$value6.type) === 'text') {
793
- runOnJS(textFocus)();
794
- currentItem.value = {
795
- type: currentItem.value.type,
796
- strokeWidth: currentItem.value.strokeWidth,
797
- color: currentItem.value.color,
798
- data: currentItem.value.data,
799
- text: currentItem.value.text !== DEFAULT_TEXT ? currentItem.value.text ?? '' : ''
800
- };
801
- }
802
- runOnJS(addScreenStates)(currentItem.value);
789
+ };
790
+ }
791
+ }
792
+ }).onEnd(() => {
793
+ var _currentItem$value5, _currentItem$value6;
794
+ if (((_currentItem$value5 = currentItem.value) === null || _currentItem$value5 === void 0 ? void 0 : _currentItem$value5.type) === 'doubleArrows') {
795
+ runOnJS(textFocusState)();
796
+ }
797
+ if (((_currentItem$value6 = currentItem.value) === null || _currentItem$value6 === void 0 ? void 0 : _currentItem$value6.type) === 'text') {
798
+ runOnJS(textFocus)();
799
+ currentItem.value = {
800
+ type: currentItem.value.type,
801
+ strokeWidth: currentItem.value.strokeWidth,
802
+ color: currentItem.value.color,
803
+ data: currentItem.value.data,
804
+ text: currentItem.value.text !== DEFAULT_TEXT ? currentItem.value.text ?? '' : ''
805
+ };
803
806
  }
807
+ runOnJS(addScreenStates)(currentItem.value);
804
808
  });
805
809
  useEffect(() => {
806
810
  const sudDidHide = Keyboard.addListener('keyboardDidHide', () => {
@@ -825,12 +829,12 @@ const DrawCore = _ref => {
825
829
  strokeWidth: strokeWidth.value,
826
830
  color: color === null || color === void 0 ? void 0 : color.value
827
831
  };
828
- }, _ref4 => {
832
+ }, _ref2 => {
829
833
  var _currentItem$value7;
830
834
  let {
831
835
  strokeWidth: sw,
832
836
  color: c
833
- } = _ref4;
837
+ } = _ref2;
834
838
  switch ((_currentItem$value7 = currentItem.value) === null || _currentItem$value7 === void 0 ? void 0 : _currentItem$value7.type) {
835
839
  case 'singleHead':
836
840
  case 'doubleHead':
@@ -972,8 +976,8 @@ const DrawCore = _ref => {
972
976
  }, /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
973
977
  behavior: "position",
974
978
  keyboardVerticalOffset: 70
975
- }, /*#__PURE__*/React.createElement(PanGestureHandler, {
976
- onGestureEvent: onGestureEvent
979
+ }, /*#__PURE__*/React.createElement(GestureDetector, {
980
+ gesture: panGesture
977
981
  }, /*#__PURE__*/React.createElement(Animated.View, {
978
982
  style: {
979
983
  ...(imageSize || drawRegion),