@plait/draw 0.71.0 → 0.72.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 (80) hide show
  1. package/arrow-line.component.d.ts +1 -1
  2. package/constants/default.d.ts +1 -0
  3. package/constants/geometry.d.ts +5 -5
  4. package/constants/index.d.ts +1 -0
  5. package/constants/pointer.d.ts +3 -3
  6. package/engines/table/table.d.ts +2 -2
  7. package/engines/uml/combined-fragment.d.ts +2 -2
  8. package/engines/uml/package.d.ts +2 -2
  9. package/esm2022/arrow-line.component.mjs +13 -13
  10. package/esm2022/constants/default.mjs +2 -0
  11. package/esm2022/constants/geometry.mjs +8 -8
  12. package/esm2022/constants/index.mjs +2 -1
  13. package/esm2022/constants/pointer.mjs +4 -4
  14. package/esm2022/engines/table/table.mjs +3 -3
  15. package/esm2022/engines/uml/combined-fragment.mjs +5 -5
  16. package/esm2022/engines/uml/package.mjs +5 -5
  17. package/esm2022/generators/single-text.generator.mjs +3 -3
  18. package/esm2022/generators/text.generator.mjs +25 -21
  19. package/esm2022/geometry.component.mjs +4 -5
  20. package/esm2022/interfaces/arrow-line.mjs +1 -1
  21. package/esm2022/interfaces/element.mjs +1 -7
  22. package/esm2022/interfaces/geometry.mjs +6 -6
  23. package/esm2022/interfaces/index.mjs +13 -1
  24. package/esm2022/interfaces/options.mjs +2 -0
  25. package/esm2022/interfaces/vector-line.mjs +5 -5
  26. package/esm2022/plugins/with-arrow-line-text.mjs +2 -2
  27. package/esm2022/plugins/with-draw-fragment.mjs +8 -12
  28. package/esm2022/plugins/with-draw-hotkey.mjs +3 -3
  29. package/esm2022/plugins/with-draw-resize.mjs +11 -6
  30. package/esm2022/plugins/with-draw-rotate.mjs +3 -2
  31. package/esm2022/plugins/with-draw.mjs +10 -11
  32. package/esm2022/plugins/with-vector-line-create.mjs +123 -0
  33. package/esm2022/plugins/with-vector-line-resize.mjs +3 -3
  34. package/esm2022/table.component.mjs +8 -9
  35. package/esm2022/transforms/index.mjs +3 -3
  36. package/esm2022/transforms/multi-text-geometry-text.mjs +3 -3
  37. package/esm2022/utils/arrow-line/arrow-line-basic.mjs +3 -3
  38. package/esm2022/utils/clipboard.mjs +6 -17
  39. package/esm2022/utils/common.mjs +15 -8
  40. package/esm2022/utils/geometry.mjs +3 -3
  41. package/esm2022/utils/hit.mjs +21 -19
  42. package/esm2022/utils/index.mjs +2 -1
  43. package/esm2022/utils/multi-text-geometry.mjs +3 -3
  44. package/esm2022/utils/selected.mjs +9 -1
  45. package/esm2022/utils/snap-resizing.mjs +1 -1
  46. package/esm2022/utils/style/stroke.mjs +6 -6
  47. package/esm2022/utils/table.mjs +2 -2
  48. package/esm2022/utils/vector-line.mjs +3 -9
  49. package/esm2022/vector-line.component.mjs +2 -4
  50. package/fesm2022/plait-draw.mjs +248 -301
  51. package/fesm2022/plait-draw.mjs.map +1 -1
  52. package/generators/single-text.generator.d.ts +2 -2
  53. package/generators/text.generator.d.ts +11 -11
  54. package/interfaces/arrow-line.d.ts +1 -1
  55. package/interfaces/element.d.ts +0 -5
  56. package/interfaces/geometry.d.ts +11 -10
  57. package/interfaces/index.d.ts +4 -1
  58. package/interfaces/options.d.ts +4 -0
  59. package/interfaces/vector-line.d.ts +4 -4
  60. package/package.json +1 -1
  61. package/plugins/with-vector-line-create.d.ts +2 -0
  62. package/styles/styles.scss +1 -1
  63. package/table.component.d.ts +2 -2
  64. package/transforms/common.d.ts +1 -1
  65. package/transforms/geometry.d.ts +1 -1
  66. package/transforms/index.d.ts +3 -3
  67. package/transforms/multi-text-geometry-text.d.ts +2 -2
  68. package/utils/clipboard.d.ts +10 -3
  69. package/utils/common.d.ts +5 -3
  70. package/utils/geometry.d.ts +6 -6
  71. package/utils/hit.d.ts +8 -4
  72. package/utils/index.d.ts +1 -0
  73. package/utils/multi-text-geometry.d.ts +6 -10
  74. package/utils/selected.d.ts +3 -1
  75. package/utils/snap-resizing.d.ts +2 -2
  76. package/utils/vector-line.d.ts +0 -1
  77. package/esm2022/plugins/with-geometry-resize.mjs +0 -70
  78. package/esm2022/plugins/with-vector-pen-create.mjs +0 -123
  79. package/plugins/with-geometry-resize.d.ts +0 -2
  80. package/plugins/with-vector-pen-create.d.ts +0 -2
@@ -1,5 +1,5 @@
1
- import { ACTIVE_STROKE_WIDTH, DEFAULT_COLOR, ThemeColorMode, RectangleClient, getSelectedElements, idCreator, catmullRomFitting, PlaitBoard, createG, drawLinearPath, setStrokeLinecap, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPointInPolygon, rotatePointsByElement, isPolylineHitRectangle, rotateAntiPointsByElement, distanceBetweenPointAndPoint, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, depthFirstRecursion, getIsRecursionFunc, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, createDebugGenerator, Point, arrowPoints, createPath, rotate, findElements, createMask, createRect, PlaitElement, getElementById, PlaitNode, hasValidAngle, toViewBoxPoint, toHostPoint, Direction, rotatePoints, getRectangleByElements, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, isSelectionMoving, drawRectangle, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, getNearestPointBetweenPointAndSegments, isPointInEllipse, getNearestPointBetweenPointAndEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRoundRectangle, isPointInRoundRectangle, setPathStrokeLinecap, getCrossingPointsBetweenEllipseAndSegment, drawLine, Path, RgbaToHEX, SELECTION_RECTANGLE_CLASS_NAME, getHitElementByPoint, WritableClipboardOperationType, createClipboardContext, WritableClipboardType, addClipboardContext, setAngleForG, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER, isMainPointer, throttleRAF, getAngleBetweenPoints, normalizeAngle, degreesToRadians, rotateElements, MERGING, ROTATE_HANDLE_CLASS_NAME, isSelectedElement, isDragging } from '@plait/core';
2
- import { DEFAULT_FILL, Alignment, WithTextPluginKey, ELEMENT_TO_TEXT_MANAGES, TextManage, getMemorizedLatest, memorizeLatest, getPointOnPolyline, buildText, Generator, getStrokeLineDash, sortElementsByArea, isFilled, getTextEditorsByElement, removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, getExtendPoint, getUnitVectorByPointAndPoint, getPointByVectorComponent, RESIZE_HANDLE_DIAMETER, measureElement, DEFAULT_FONT_FAMILY, getFirstTextManage, ActiveGenerator, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, normalizeShapePoints, getFirstTextEditor, resetPointsAfterResize, getDirectionByVector, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, isCornerHandle, getIndexByResizeHandle, withResize, drawHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, getDirectionFactorByDirectionComponent, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getDirectionByPointOfRectangle, getDirectionFactor, rotateVector, getOppositeDirection, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, PRIMARY_COLOR, CommonElementFlavour, canResize, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, isResizingByCondition, getRatioByPoint, getTextManages, ImageGenerator, ResizeHandle, addRotating, removeRotating, drawRotateHandle } from '@plait/common';
1
+ import { ACTIVE_STROKE_WIDTH, DEFAULT_COLOR, ThemeColorMode, PlaitElement, RectangleClient, getSelectedElements, idCreator, catmullRomFitting, PlaitBoard, createG, drawLinearPath, setStrokeLinecap, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPointInPolygon, isPolylineHitRectangle, rotatePointsByAngle, rotateAntiPointsByElement, distanceBetweenPointAndPoint, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, depthFirstRecursion, getIsRecursionFunc, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, createDebugGenerator, Point, arrowPoints, createPath, rotate, findElements, createMask, createRect, getElementById, rotatePointsByElement, PlaitNode, hasValidAngle, toViewBoxPoint, toHostPoint, Direction, rotatePoints, getRectangleByElements, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, isSelectionMoving, drawRectangle, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, getNearestPointBetweenPointAndSegments, isPointInEllipse, getNearestPointBetweenPointAndEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRoundRectangle, isPointInRoundRectangle, setPathStrokeLinecap, getCrossingPointsBetweenEllipseAndSegment, drawLine, Path, RgbaToHEX, SELECTION_RECTANGLE_CLASS_NAME, getHitElementByPoint, WritableClipboardOperationType, WritableClipboardType, addOrCreateClipboardContext, setAngleForG, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER, isMainPointer, throttleRAF, getAngleBetweenPoints, normalizeAngle, degreesToRadians, rotateElements, MERGING, ROTATE_HANDLE_CLASS_NAME, isSelectedElement, isDragging } from '@plait/core';
2
+ import { DEFAULT_FILL, Alignment, WithTextPluginKey, TextManage, getMemorizedLatest, memorizeLatest, getPointOnPolyline, buildText, Generator, getStrokeLineDash, StrokeStyle, sortElementsByArea, isFilled, getTextEditorsByElement, removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, getExtendPoint, getUnitVectorByPointAndPoint, getPointByVectorComponent, RESIZE_HANDLE_DIAMETER, measureElement, DEFAULT_FONT_FAMILY, getFirstTextManage, ActiveGenerator, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, normalizeShapePoints, getFirstTextEditor, resetPointsAfterResize, getDirectionByVector, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, isCornerHandle, getIndexByResizeHandle, withResize, drawHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, getDirectionFactorByDirectionComponent, buildClipboardData as buildClipboardData$1, insertClipboardData as insertClipboardData$1, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getDirectionByPointOfRectangle, getDirectionFactor, rotateVector, getOppositeDirection, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, PRIMARY_COLOR, CommonElementFlavour, canResize, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, isResizingByCondition, getRatioByPoint, getTextManages, ImageGenerator, ResizeHandle, addRotating, removeRotating, drawRotateHandle } from '@plait/common';
3
3
  import { pointsOnBezierCurves } from 'points-on-curve';
4
4
  import { TEXT_DEFAULT_HEIGHT, DEFAULT_FONT_SIZE, AlignEditor } from '@plait/text-plugins';
5
5
  import { isKeyHotkey } from 'is-hotkey';
@@ -80,11 +80,11 @@ var UMLSymbols;
80
80
  UMLSymbols["providedInterface"] = "providedInterface";
81
81
  UMLSymbols["requiredInterface"] = "requiredInterface";
82
82
  })(UMLSymbols || (UMLSymbols = {}));
83
- var MultipleTextGeometryCommonTextKeys;
84
- (function (MultipleTextGeometryCommonTextKeys) {
85
- MultipleTextGeometryCommonTextKeys["name"] = "name";
86
- MultipleTextGeometryCommonTextKeys["content"] = "content";
87
- })(MultipleTextGeometryCommonTextKeys || (MultipleTextGeometryCommonTextKeys = {}));
83
+ var GeometryCommonTextKeys;
84
+ (function (GeometryCommonTextKeys) {
85
+ GeometryCommonTextKeys["name"] = "name";
86
+ GeometryCommonTextKeys["content"] = "content";
87
+ })(GeometryCommonTextKeys || (GeometryCommonTextKeys = {}));
88
88
  const PlaitGeometry = {};
89
89
 
90
90
  var SwimlaneSymbols;
@@ -113,6 +113,8 @@ const PlaitTableElement = {
113
113
  }
114
114
  };
115
115
 
116
+ const WithDrawPluginKey = 'plait-draw-plugin-key';
117
+
116
118
  const ShapeDefaultSpace = {
117
119
  rectangleAndText: 4
118
120
  };
@@ -213,12 +215,12 @@ const DefaultPackageProperty = {
213
215
  height: 150,
214
216
  texts: [
215
217
  {
216
- key: MultipleTextGeometryCommonTextKeys.name,
218
+ id: GeometryCommonTextKeys.name,
217
219
  text: '包名',
218
220
  align: Alignment.left
219
221
  },
220
222
  {
221
- key: MultipleTextGeometryCommonTextKeys.content,
223
+ id: GeometryCommonTextKeys.content,
222
224
  text: '',
223
225
  align: Alignment.left
224
226
  }
@@ -261,12 +263,12 @@ const DefaultCombinedFragmentProperty = {
261
263
  height: 280,
262
264
  texts: [
263
265
  {
264
- key: MultipleTextGeometryCommonTextKeys.name,
266
+ id: GeometryCommonTextKeys.name,
265
267
  text: 'Opt | Alt | Loop',
266
268
  align: Alignment.left
267
269
  },
268
270
  {
269
- key: MultipleTextGeometryCommonTextKeys.content,
271
+ id: GeometryCommonTextKeys.content,
270
272
  text: '[Condition]',
271
273
  align: Alignment.left
272
274
  }
@@ -356,8 +358,8 @@ const DefaultUMLPropertyMap = {
356
358
  [UMLSymbols.requiredInterface]: DefaultRequiredInterfaceProperty
357
359
  };
358
360
  const MultipleTextGeometryTextKeys = {
359
- [UMLSymbols.package]: Object.keys(MultipleTextGeometryCommonTextKeys),
360
- [UMLSymbols.combinedFragment]: Object.keys(MultipleTextGeometryCommonTextKeys)
361
+ [UMLSymbols.package]: Object.keys(GeometryCommonTextKeys),
362
+ [UMLSymbols.combinedFragment]: Object.keys(GeometryCommonTextKeys)
361
363
  };
362
364
  const LINE_HIT_GEOMETRY_BUFFER = 10;
363
365
  const LINE_SNAPPING_BUFFER = 6;
@@ -400,8 +402,8 @@ const getUMLPointers = () => {
400
402
  const getArrowLinePointers = () => {
401
403
  return Object.keys(ArrowLineShape);
402
404
  };
403
- const getVectorPenPointers = () => {
404
- return Object.keys(VectorPenPointerType);
405
+ const getVectorLinePointers = () => {
406
+ return Object.keys(VectorLinePointerType);
405
407
  };
406
408
 
407
409
  const DEFAULT_IMAGE_WIDTH = 1000;
@@ -469,14 +471,20 @@ const getElementShape = (value) => {
469
471
  return value.shape;
470
472
  };
471
473
 
474
+ // TODO: 是否可以完全基于位置定位 TextManager,实现 line 和 多文本 geometry 统一
475
+ // 一个元素有多个文本时,单纯通过位置无法获取 TextManage,因此这里单独通过 Map 保存关键字 key 和 TextManage 的对应关系
476
+ // 1. 单文本元素 key 就是元素的 id
477
+ // 2. 表格元素 key 是单元格的 id
478
+ // 3. 符合 isMultipleTextGeometry 的元素,key 是元素 id + text.id (通常不是 id 而是文本位置的常量)
479
+ // 4. arrow-line 和 vector-line 文本不依赖于 text.generator,基于 text 可以直接找到 TextManage
472
480
  const KEY_TO_TEXT_MANAGE = new WeakMap();
473
- const setTextManage = (board, key, textManage) => {
481
+ const setTextManage = (board, element, text, textManage) => {
474
482
  const textManages = KEY_TO_TEXT_MANAGE.get(board);
475
- return KEY_TO_TEXT_MANAGE.set(board, { ...textManages, [key]: textManage });
483
+ return KEY_TO_TEXT_MANAGE.set(board, { ...textManages, [getTextKey(element, text)]: textManage });
476
484
  };
477
- const getTextManage = (board, key) => {
485
+ const getTextManage = (board, element, text) => {
478
486
  const textManages = KEY_TO_TEXT_MANAGE.get(board);
479
- return textManages[key];
487
+ return textManages[getTextKey(element, text)];
480
488
  };
481
489
  const deleteTextManage = (board, key) => {
482
490
  const textManages = KEY_TO_TEXT_MANAGE.get(board);
@@ -498,15 +506,16 @@ class TextGenerator {
498
506
  .textPlugins;
499
507
  this.textManages = this.texts.map(text => {
500
508
  const textManage = this.createTextManage(text, textPlugins);
501
- setTextManage(this.board, getTextKey(this.element, text), textManage);
509
+ setTextManage(this.board, this.element, text, textManage);
502
510
  return textManage;
503
511
  });
504
- ELEMENT_TO_TEXT_MANAGES.set(this.element, this.textManages);
512
+ const ref = PlaitElement.getElementRef(this.element);
513
+ ref.initializeTextManage(this.textManages);
505
514
  }
506
515
  draw(elementG) {
507
516
  const centerPoint = RectangleClient.getCenterPoint(this.board.getRectangle(this.element));
508
517
  this.texts.forEach(drawShapeText => {
509
- const textManage = getTextManage(this.board, getTextKey(this.element, drawShapeText));
518
+ const textManage = getTextManage(this.board, this.element, drawShapeText);
510
519
  if (drawShapeText.text && textManage) {
511
520
  textManage.draw(drawShapeText.text);
512
521
  elementG.append(textManage.g);
@@ -516,30 +525,29 @@ class TextGenerator {
516
525
  }
517
526
  update(element, previousDrawShapeTexts, currentDrawShapeTexts, elementG) {
518
527
  this.element = element;
519
- ELEMENT_TO_TEXT_MANAGES.set(this.element, this.textManages);
520
528
  const centerPoint = RectangleClient.getCenterPoint(this.board.getRectangle(this.element));
521
529
  const textPlugins = (this.board.getPluginOptions(WithTextPluginKey) || {})
522
530
  .textPlugins;
523
531
  const removedTexts = previousDrawShapeTexts.filter(value => {
524
- return !currentDrawShapeTexts.find(item => item.key === value.key);
532
+ return !currentDrawShapeTexts.find(item => item.id === value.id);
525
533
  });
526
534
  if (removedTexts.length) {
527
535
  removedTexts.forEach(item => {
528
- const textManage = getTextManage(this.board, item.key);
536
+ const textManage = getTextManage(this.board, element, item);
529
537
  const index = this.textManages.findIndex(value => value === textManage);
530
538
  if (index > -1 && item.text && item.textHeight) {
531
539
  this.textManages.splice(index, 1);
532
540
  }
533
541
  textManage?.destroy();
534
- deleteTextManage(this.board, item.key);
542
+ deleteTextManage(this.board, item.id);
535
543
  });
536
544
  }
537
545
  currentDrawShapeTexts.forEach(drawShapeText => {
538
546
  if (drawShapeText.text) {
539
- let textManage = getTextManage(this.board, getTextKey(this.element, drawShapeText));
547
+ let textManage = getTextManage(this.board, this.element, drawShapeText);
540
548
  if (!textManage) {
541
549
  textManage = this.createTextManage(drawShapeText, textPlugins);
542
- setTextManage(this.board, drawShapeText.key, textManage);
550
+ setTextManage(this.board, element, drawShapeText, textManage);
543
551
  textManage.draw(drawShapeText.text);
544
552
  elementG.append(textManage.g);
545
553
  this.textManages.push(textManage);
@@ -581,13 +589,11 @@ class TextGenerator {
581
589
  return this.options.getMaxWidth ? this.options.getMaxWidth() : this.getRectangle(text).width;
582
590
  }
583
591
  destroy() {
584
- this.textManages.forEach(manage => {
585
- manage.destroy();
586
- });
592
+ const ref = PlaitElement.getElementRef(this.element);
593
+ ref.destroyTextManage();
587
594
  this.textManages = [];
588
- ELEMENT_TO_TEXT_MANAGES.delete(this.element);
589
595
  this.texts.forEach(item => {
590
- deleteTextManage(this.board, item.key);
596
+ deleteTextManage(this.board, item.id);
591
597
  });
592
598
  }
593
599
  }
@@ -708,7 +714,7 @@ function editCell(board, cell) {
708
714
  textManage && textManage.edit();
709
715
  }
710
716
  function getTextManageByCell(board, cell) {
711
- return getTextManage(board, cell.id);
717
+ return getTextManage(board, undefined, cell);
712
718
  }
713
719
  const updateColumns = (table, columnId, width, offset) => {
714
720
  const columns = table.columns.map(item => (item.id === columnId ? { ...item, width } : item));
@@ -925,7 +931,7 @@ const buildDefaultTextsByShape = (shape) => {
925
931
  return (textKeys || []).map((textKey) => {
926
932
  const text = defaultTexts?.find((item) => item?.key === textKey);
927
933
  return {
928
- key: textKey,
934
+ id: textKey,
929
935
  text: buildText(text?.text || '', alignment || text?.align || Alignment.center, textProperties),
930
936
  textHeight: textHeight
931
937
  };
@@ -937,7 +943,7 @@ const getHitMultipleGeometryText = (element, point) => {
937
943
  let hitText;
938
944
  if (engine.getTextRectangle) {
939
945
  hitText = element.texts.find(text => {
940
- const textRectangle = engine.getTextRectangle(element, { key: text.key });
946
+ const textRectangle = engine.getTextRectangle(element, { id: text.id });
941
947
  return RectangleClient.isHit(rectangle, textRectangle);
942
948
  });
943
949
  }
@@ -967,12 +973,6 @@ class VectorLineShapeGenerator extends Generator {
967
973
  }
968
974
  }
969
975
 
970
- const isClosedVectorLine = (vectorLine) => {
971
- const points = vectorLine.points;
972
- const startPoint = points[0];
973
- const endPoint = points[points.length - 1];
974
- return startPoint[0] === endPoint[0] && startPoint[1] === endPoint[1];
975
- };
976
976
  const getVectorLinePoints = (board, element) => {
977
977
  switch (element.shape) {
978
978
  case VectorLineShape.straight: {
@@ -1055,7 +1055,7 @@ const isHitArrowLine = (board, element, point) => {
1055
1055
  };
1056
1056
  const isHitVectorLine = (board, element, point) => {
1057
1057
  const points = getVectorLinePoints(board, element);
1058
- if (isClosedVectorLine(element)) {
1058
+ if (isClosedPoints(element.points)) {
1059
1059
  return isPointInPolygon(point, points) || isHitPolyLine(points, point);
1060
1060
  }
1061
1061
  else {
@@ -1067,15 +1067,13 @@ const isRectangleHitElementText = (element, rectangle) => {
1067
1067
  if (isMultipleTextGeometry(element)) {
1068
1068
  const texts = element.texts;
1069
1069
  return texts.some(item => {
1070
- const textClient = engine.getTextRectangle(element, { key: item.key });
1071
- const rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(textClient), element) || RectangleClient.getCornerPoints(textClient);
1072
- return isPolylineHitRectangle(rotatedCornerPoints, rectangle);
1070
+ const textClient = engine.getTextRectangle(element, { id: item.id });
1071
+ return isRectangleHitRotatedPoints(rectangle, RectangleClient.getCornerPoints(textClient), element.angle);
1073
1072
  });
1074
1073
  }
1075
1074
  else {
1076
1075
  const textClient = engine.getTextRectangle ? engine.getTextRectangle(element) : getTextRectangle(element);
1077
- const rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(textClient), element) || RectangleClient.getCornerPoints(textClient);
1078
- return isPolylineHitRectangle(rotatedCornerPoints, rectangle);
1076
+ return isRectangleHitRotatedPoints(rectangle, RectangleClient.getCornerPoints(textClient), element.angle);
1079
1077
  }
1080
1078
  };
1081
1079
  const isHitElementText = (element, point) => {
@@ -1083,7 +1081,7 @@ const isHitElementText = (element, point) => {
1083
1081
  if (isMultipleTextGeometry(element)) {
1084
1082
  const texts = element.texts;
1085
1083
  return texts.some(item => {
1086
- const textClient = engine.getTextRectangle(element, { key: item.key });
1084
+ const textClient = engine.getTextRectangle(element, { id: item.id });
1087
1085
  return RectangleClient.isPointInRectangle(textClient, point);
1088
1086
  });
1089
1087
  }
@@ -1095,18 +1093,14 @@ const isHitElementText = (element, point) => {
1095
1093
  const isRectangleHitDrawElement = (board, element, selection) => {
1096
1094
  const rangeRectangle = RectangleClient.getRectangleByPoints([selection.anchor, selection.focus]);
1097
1095
  if (PlaitDrawElement.isGeometry(element)) {
1098
- const client = RectangleClient.getRectangleByPoints(element.points);
1099
- let rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(client), element) || RectangleClient.getCornerPoints(client);
1100
- const isHitElement = isPolylineHitRectangle(rotatedCornerPoints, rangeRectangle);
1096
+ const isHitElement = isRectangleHitRotatedElement(board, rangeRectangle, element);
1101
1097
  if (isHitElement) {
1102
1098
  return isHitElement;
1103
1099
  }
1104
1100
  return isRectangleHitElementText(element, rangeRectangle);
1105
1101
  }
1106
1102
  if (PlaitDrawElement.isImage(element)) {
1107
- const client = RectangleClient.getRectangleByPoints(element.points);
1108
- const rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(client), element) || RectangleClient.getCornerPoints(client);
1109
- return isPolylineHitRectangle(rotatedCornerPoints, rangeRectangle);
1103
+ return isRectangleHitRotatedElement(board, rangeRectangle, element);
1110
1104
  }
1111
1105
  if (PlaitDrawElement.isArrowLine(element)) {
1112
1106
  const points = getArrowLinePoints(board, element);
@@ -1118,7 +1112,15 @@ const isRectangleHitDrawElement = (board, element, selection) => {
1118
1112
  }
1119
1113
  return null;
1120
1114
  };
1121
- const getDrawHitElement = (board, elements) => {
1115
+ const isRectangleHitRotatedElement = (board, rectangle, element) => {
1116
+ const client = RectangleClient.getRectangleByPoints(element.points);
1117
+ return isRectangleHitRotatedPoints(rectangle, RectangleClient.getCornerPoints(client), element.angle);
1118
+ };
1119
+ const isRectangleHitRotatedPoints = (rectangle, points, angle) => {
1120
+ let rotatedPoints = rotatePointsByAngle(points, angle) || points;
1121
+ return isPolylineHitRectangle(rotatedPoints, rectangle);
1122
+ };
1123
+ const getHitDrawElement = (board, elements) => {
1122
1124
  let firstFilledElement = getFirstFilledDrawElement(board, elements);
1123
1125
  let endIndex = elements.length;
1124
1126
  if (firstFilledElement) {
@@ -1136,7 +1138,7 @@ const getFirstFilledDrawElement = (board, elements) => {
1136
1138
  let filledElement = null;
1137
1139
  for (let i = 0; i < elements.length; i++) {
1138
1140
  const element = elements[i];
1139
- if (isDrawElementClosed(element)) {
1141
+ if (isCustomGeometryClosed(board, element) || isDrawElementClosed(element)) {
1140
1142
  const fill = getFillByElement(board, element);
1141
1143
  if (isFilled(fill)) {
1142
1144
  filledElement = element;
@@ -1277,13 +1279,16 @@ const isDrawElementClosed = (element) => {
1277
1279
  return false;
1278
1280
  }
1279
1281
  if (PlaitDrawElement.isVectorLine(element)) {
1280
- return isClosedVectorLine(element);
1282
+ return isClosedPoints(element.points);
1281
1283
  }
1282
1284
  if (PlaitDrawElement.isGeometry(element)) {
1283
1285
  return isGeometryClosed(element);
1284
1286
  }
1285
1287
  return true;
1286
1288
  };
1289
+ const isCustomGeometryClosed = (board, value) => {
1290
+ return PlaitDrawElement.isCustomGeometryElement(board, value) && isClosedPoints(value.points);
1291
+ };
1287
1292
  const getSnappingShape = (board, point) => {
1288
1293
  let hitElement = getHitShape(board, point);
1289
1294
  if (hitElement) {
@@ -1358,16 +1363,16 @@ const drawBoundReaction = (board, element, roughOptions = { hasMask: true, hasCo
1358
1363
  return g;
1359
1364
  };
1360
1365
  const getTextKey = (element, text) => {
1361
- if (isMultipleTextGeometry(element)) {
1362
- return `${element.id}-${text.key}`;
1366
+ if (element && isMultipleTextGeometry(element)) {
1367
+ return `${element.id}-${text.id}`;
1363
1368
  }
1364
1369
  else {
1365
- return text.key;
1370
+ return text.id;
1366
1371
  }
1367
1372
  };
1368
1373
  const getGeometryAlign = (board, element) => {
1369
1374
  if (isMultipleTextGeometry(element)) {
1370
- const drawShapeText = element.texts.find(item => item.key.includes(MultipleTextGeometryCommonTextKeys.content));
1375
+ const drawShapeText = element.texts.find(item => item.id.includes(GeometryCommonTextKeys.content));
1371
1376
  return drawShapeText?.text.align || Alignment.center;
1372
1377
  }
1373
1378
  if (isSingleTextGeometry(element)) {
@@ -1379,6 +1384,11 @@ const getGeometryAlign = (board, element) => {
1379
1384
  }
1380
1385
  return Alignment.center;
1381
1386
  };
1387
+ const isClosedPoints = (points) => {
1388
+ const startPoint = points[0];
1389
+ const endPoint = points[points.length - 1];
1390
+ return startPoint[0] === endPoint[0] && startPoint[1] === endPoint[1];
1391
+ };
1382
1392
 
1383
1393
  const getStrokeColorByElement = (board, element) => {
1384
1394
  const defaultColor = getDrawDefaultStrokeColor(board.theme.themeColorMode);
@@ -1386,8 +1396,8 @@ const getStrokeColorByElement = (board, element) => {
1386
1396
  return strokeColor;
1387
1397
  };
1388
1398
  const getFillByElement = (board, element) => {
1389
- const defaultFill = PlaitDrawElement.isFlowchart(element) && isDrawElementClosed(element)
1390
- ? getFlowchartDefaultFill(board.theme.themeColorMode)
1399
+ const defaultFill = isDrawElementClosed(element) || isCustomGeometryClosed(board, element)
1400
+ ? getDefaultFill(board.theme.themeColorMode)
1391
1401
  : DefaultDrawStyle.fill;
1392
1402
  const fill = element.fill || defaultFill;
1393
1403
  return fill;
@@ -2245,7 +2255,7 @@ const getHitIndexOfAutoCompletePoint = (movingPoint, points) => {
2245
2255
  const getDrawDefaultStrokeColor = (theme) => {
2246
2256
  return DrawThemeColors[theme].strokeColor;
2247
2257
  };
2248
- const getFlowchartDefaultFill = (theme) => {
2258
+ const getDefaultFill = (theme) => {
2249
2259
  return DrawThemeColors[theme].fill;
2250
2260
  };
2251
2261
  const getTextShapeProperty = (board, text = DefaultTextProperty.text, fontSize) => {
@@ -2305,7 +2315,7 @@ const createDefaultGeometry = (board, points, shape) => {
2305
2315
  }
2306
2316
  };
2307
2317
  const editText = (board, element, text) => {
2308
- const textManage = text ? getTextManage(board, `${element.id}-${text.key}`) : getFirstTextManage(element);
2318
+ const textManage = text ? getTextManage(board, element, text) : getFirstTextManage(element);
2309
2319
  if (textManage) {
2310
2320
  textManage.edit(() => {
2311
2321
  // delay to avoid blinking
@@ -2450,6 +2460,10 @@ const getSelectedGeometryElements = (board) => {
2450
2460
  const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isGeometry(value));
2451
2461
  return selectedElements;
2452
2462
  };
2463
+ const getSelectedCustomGeometryElements = (board) => {
2464
+ const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isCustomGeometryElement(board, value));
2465
+ return selectedElements;
2466
+ };
2453
2467
  const getSelectedArrowLineElements = (board) => {
2454
2468
  const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isArrowLine(value));
2455
2469
  return selectedElements;
@@ -2466,6 +2480,10 @@ const isSingleSelectSwimlane = (board) => {
2466
2480
  const selectedElements = getSelectedElements(board);
2467
2481
  return selectedElements && selectedElements.length === 1 && PlaitDrawElement.isSwimlane(selectedElements[0]);
2468
2482
  };
2483
+ const isSingleSelectArrowLine = (board) => {
2484
+ const selectedElements = getSelectedElements(board);
2485
+ return selectedElements && selectedElements.length === 1 && PlaitDrawElement.isArrowLine(selectedElements[0]);
2486
+ };
2469
2487
  const getSelectedSwimlane = (board) => {
2470
2488
  const selectedElements = getSelectedElements(board);
2471
2489
  return selectedElements.find(item => PlaitDrawElement.isSwimlane(item));
@@ -2924,9 +2942,9 @@ const updateSwimlane = (board, swimlane, newColumns, newRows, newCells, newPoint
2924
2942
  }, path);
2925
2943
  };
2926
2944
 
2927
- const setDrawShapeText = (board, element, text) => {
2945
+ const setDrawTexts = (board, element, text) => {
2928
2946
  const newTexts = element.texts?.map(item => {
2929
- if (item.key === text.key) {
2947
+ if (item.id === text.id) {
2930
2948
  return { ...item, ...text };
2931
2949
  }
2932
2950
  return item;
@@ -3056,7 +3074,7 @@ const insertDrawByVector = (board, point, shape, vector) => {
3056
3074
 
3057
3075
  const DrawTransforms = {
3058
3076
  setText,
3059
- setDrawShapeText,
3077
+ setDrawTexts,
3060
3078
  insertGeometry,
3061
3079
  resizeGeometry,
3062
3080
  insertText,
@@ -3118,7 +3136,10 @@ function withDrawResize(board) {
3118
3136
  let resizeActivePoints = null;
3119
3137
  const canResize = () => {
3120
3138
  const elements = getSelectedElements(board);
3121
- return elements.length > 1 && elements.every(el => PlaitDrawElement.isDrawElement(el));
3139
+ return (elements.length >= 1 &&
3140
+ elements.every(el => (PlaitDrawElement.isDrawElement(el) || PlaitDrawElement.isCustomGeometryElement(board, el)) &&
3141
+ !isSingleSelectArrowLine(board) &&
3142
+ !isSingleSelectSwimlane(board)));
3122
3143
  };
3123
3144
  const options = {
3124
3145
  key: 'draw-elements',
@@ -3142,7 +3163,7 @@ function withDrawResize(board) {
3142
3163
  snapG?.remove();
3143
3164
  debugGenerator$2.isDebug() && debugGenerator$2.clear();
3144
3165
  const isFromCorner = isCornerHandle(board, resizeRef.handle);
3145
- const isAspectRatio = resizeState.isShift || isFromCorner;
3166
+ const isAspectRatio = resizeState.isShift;
3146
3167
  const centerPoint = RectangleClient.getCenterPoint(resizeRef.rectangle);
3147
3168
  const handleIndex = getIndexByResizeHandle(resizeRef.handle);
3148
3169
  const { originPoint, handlePoint } = getResizeOriginPointAndHandlePoint(board, handleIndex, resizeRef.rectangle);
@@ -3212,7 +3233,7 @@ function withDrawResize(board) {
3212
3233
  }
3213
3234
  }
3214
3235
  if (PlaitDrawElement.isGeometry(target)) {
3215
- if (isGeometryIncludeText(target)) {
3236
+ if (PlaitDrawElement.isGeometry(target) && isGeometryIncludeText(target)) {
3216
3237
  const { height: textHeight } = getFirstTextManage(target).getSize();
3217
3238
  DrawTransforms.resizeGeometry(board, points, textHeight, path);
3218
3239
  }
@@ -3221,7 +3242,9 @@ function withDrawResize(board) {
3221
3242
  Transforms.setNode(board, { points }, path);
3222
3243
  }
3223
3244
  }
3224
- else if (PlaitDrawElement.isArrowLine(target)) {
3245
+ else if (PlaitDrawElement.isLine(target) ||
3246
+ PlaitDrawElement.isCustomGeometryElement(board, target) ||
3247
+ PlaitDrawElement.isVectorLine(target)) {
3225
3248
  Transforms.setNode(board, { points }, path);
3226
3249
  }
3227
3250
  else if (PlaitDrawElement.isImage(target)) {
@@ -3600,6 +3623,56 @@ function getMiddlePoints(board, element) {
3600
3623
  return result;
3601
3624
  }
3602
3625
 
3626
+ const buildClipboardData = (board, elements, startPoint) => {
3627
+ return buildClipboardData$1(board, elements, startPoint, (element) => {
3628
+ if (PlaitDrawElement.isArrowLine(element)) {
3629
+ let source = { ...element.source };
3630
+ let target = { ...element.target };
3631
+ let points = [...element.points];
3632
+ if (element.source.boundId) {
3633
+ points[0] = getConnectionPoint(getElementById(board, element.source.boundId), element.source.connection);
3634
+ if (!getElementById(board, element.source.boundId, elements)) {
3635
+ delete source.boundId;
3636
+ delete source.connection;
3637
+ }
3638
+ }
3639
+ if (element.target.boundId) {
3640
+ points[points.length - 1] = getConnectionPoint(getElementById(board, element.target.boundId), element.target.connection);
3641
+ if (!getElementById(board, element.target.boundId, elements)) {
3642
+ delete target.boundId;
3643
+ delete target.connection;
3644
+ }
3645
+ }
3646
+ points = points.map(point => [point[0] - startPoint[0], point[1] - startPoint[1]]);
3647
+ return { ...element, points, source, target };
3648
+ }
3649
+ return undefined;
3650
+ });
3651
+ };
3652
+ const insertClipboardData = (board, elements, startPoint) => {
3653
+ insertClipboardData$1(board, elements, startPoint, (element, idsMap) => {
3654
+ if (PlaitDrawElement.isArrowLine(element)) {
3655
+ if (element.source.boundId) {
3656
+ const boundElement = elements.find(item => [element.source.boundId, idsMap[element.source.boundId]].includes(item.id));
3657
+ if (boundElement) {
3658
+ element.source.boundId = idsMap[element.source.boundId];
3659
+ }
3660
+ }
3661
+ if (element.target.boundId) {
3662
+ const boundElement = elements.find(item => [element.target.boundId, idsMap[element.target.boundId]].includes(item.id));
3663
+ if (boundElement) {
3664
+ element.target.boundId = idsMap[element.target.boundId];
3665
+ }
3666
+ }
3667
+ }
3668
+ if (PlaitDrawElement.isElementByTable(element)) {
3669
+ updateRowOrColumnIds(element, 'row');
3670
+ updateRowOrColumnIds(element, 'column');
3671
+ updateCellIds(element.cells);
3672
+ }
3673
+ });
3674
+ };
3675
+
3603
3676
  const getCenterPointsOnPolygon = (points) => {
3604
3677
  const centerPoints = [];
3605
3678
  for (let i = 0; i < points.length; i++) {
@@ -5411,8 +5484,8 @@ const TableEngine = {
5411
5484
  },
5412
5485
  getTextRectangle(element, options) {
5413
5486
  try {
5414
- if (options && options.key) {
5415
- const cell = getCellWithPoints(options?.board, element, options.key);
5487
+ if (options && options.id) {
5488
+ const cell = getCellWithPoints(options?.board, element, options.id);
5416
5489
  if (cell) {
5417
5490
  if (PlaitTableElement.isVerticalText(cell)) {
5418
5491
  return getVerticalTextRectangle(cell);
@@ -5643,8 +5716,8 @@ const PackageEngine = {
5643
5716
  getTextRectangle(element, options) {
5644
5717
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
5645
5718
  const strokeWidth = getStrokeWidthByElement(element);
5646
- const textHeight = element.texts?.find(item => item.key === options?.key)?.textHeight;
5647
- if (options?.key === MultipleTextGeometryCommonTextKeys.name) {
5719
+ const textHeight = element.texts?.find(item => item.id === options?.id)?.textHeight;
5720
+ if (options?.id === GeometryCommonTextKeys.name) {
5648
5721
  const width = elementRectangle.width * 0.7 - ShapeDefaultSpace.rectangleAndText - strokeWidth;
5649
5722
  return {
5650
5723
  height: textHeight,
@@ -5653,7 +5726,7 @@ const PackageEngine = {
5653
5726
  y: elementRectangle.y + (25 - textHeight) / 2
5654
5727
  };
5655
5728
  }
5656
- if (options?.key === MultipleTextGeometryCommonTextKeys.content) {
5729
+ if (options?.id === GeometryCommonTextKeys.content) {
5657
5730
  const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
5658
5731
  return {
5659
5732
  height: textHeight,
@@ -5703,8 +5776,8 @@ const CombinedFragmentEngine = {
5703
5776
  getTextRectangle(element, options) {
5704
5777
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
5705
5778
  const strokeWidth = getStrokeWidthByElement(element);
5706
- const textHeight = element.texts?.find(item => item.key === options?.key)?.textHeight;
5707
- if (options?.key === MultipleTextGeometryCommonTextKeys.name) {
5779
+ const textHeight = element.texts?.find(item => item.id === options?.id)?.textHeight;
5780
+ if (options?.id === GeometryCommonTextKeys.name) {
5708
5781
  const width = elementRectangle.width / 3 - 8 - ShapeDefaultSpace.rectangleAndText - strokeWidth;
5709
5782
  return {
5710
5783
  height: textHeight,
@@ -5713,7 +5786,7 @@ const CombinedFragmentEngine = {
5713
5786
  y: elementRectangle.y + (25 - textHeight) / 2
5714
5787
  };
5715
5788
  }
5716
- if (options?.key === MultipleTextGeometryCommonTextKeys.content) {
5789
+ if (options?.id === GeometryCommonTextKeys.content) {
5717
5790
  const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
5718
5791
  return {
5719
5792
  height: textHeight,
@@ -6443,12 +6516,6 @@ const PlaitArrowLine = {
6443
6516
  }
6444
6517
  };
6445
6518
 
6446
- var StrokeStyle;
6447
- (function (StrokeStyle) {
6448
- StrokeStyle["solid"] = "solid";
6449
- StrokeStyle["dashed"] = "dashed";
6450
- StrokeStyle["dotted"] = "dotted";
6451
- })(StrokeStyle || (StrokeStyle = {}));
6452
6519
  var MemorizeKey;
6453
6520
  (function (MemorizeKey) {
6454
6521
  MemorizeKey["basicShape"] = "basicShape";
@@ -6458,10 +6525,10 @@ var MemorizeKey;
6458
6525
  MemorizeKey["UML"] = "UML";
6459
6526
  })(MemorizeKey || (MemorizeKey = {}));
6460
6527
 
6461
- var VectorPenPointerType;
6462
- (function (VectorPenPointerType) {
6463
- VectorPenPointerType["vectorPen"] = "vectorPen";
6464
- })(VectorPenPointerType || (VectorPenPointerType = {}));
6528
+ var VectorLinePointerType;
6529
+ (function (VectorLinePointerType) {
6530
+ VectorLinePointerType["vectorLine"] = "vectorLine";
6531
+ })(VectorLinePointerType || (VectorLinePointerType = {}));
6465
6532
  var VectorLineShape;
6466
6533
  (function (VectorLineShape) {
6467
6534
  VectorLineShape["straight"] = "straight";
@@ -6502,6 +6569,16 @@ const PlaitDrawElement = {
6502
6569
  return false;
6503
6570
  }
6504
6571
  },
6572
+ isCustomGeometryElement: (board, value) => {
6573
+ const options = board.getPluginOptions(WithDrawPluginKey);
6574
+ const customGeometryTypes = options?.customGeometryTypes || [];
6575
+ if (customGeometryTypes.includes(value.type)) {
6576
+ return true;
6577
+ }
6578
+ else {
6579
+ return false;
6580
+ }
6581
+ },
6505
6582
  isShapeElement: (value) => {
6506
6583
  return (PlaitDrawElement.isImage(value) ||
6507
6584
  PlaitDrawElement.isGeometry(value) ||
@@ -6608,11 +6685,11 @@ class SingleTextGenerator extends TextGenerator {
6608
6685
  return this.textManages[0];
6609
6686
  }
6610
6687
  constructor(board, element, text, options) {
6611
- super(board, element, [{ key: element.id, text: text, textHeight: element.textHeight }], options);
6688
+ super(board, element, [{ id: element.id, text: text, textHeight: element.textHeight }], options);
6612
6689
  }
6613
6690
  update(element, previousText, currentText, elementG) {
6614
6691
  if (!isMultipleTextGeometry(element)) {
6615
- super.update(element, [{ text: previousText, key: element.id, textHeight: element.textHeight }], [{ text: currentText, key: element.id, textHeight: element.textHeight }], elementG);
6692
+ super.update(element, [{ text: previousText, id: element.id, textHeight: element.textHeight }], [{ text: currentText, id: element.id, textHeight: element.textHeight }], elementG);
6616
6693
  }
6617
6694
  }
6618
6695
  }
@@ -6669,8 +6746,7 @@ class GeometryComponent extends CommonElementFlavour {
6669
6746
  this.textGenerator && this.textGenerator.draw(this.getElementG());
6670
6747
  }
6671
6748
  onContextChanged(value, previous) {
6672
- const isChangeTheme = this.board.operations.find(op => op.type === 'set_theme');
6673
- if (value.element !== previous.element || isChangeTheme) {
6749
+ if (value.element !== previous.element || value.hasThemeChanged) {
6674
6750
  this.shapeGenerator.processDrawing(this.element, this.getElementG());
6675
6751
  this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
6676
6752
  this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
@@ -6701,8 +6777,8 @@ class GeometryComponent extends CommonElementFlavour {
6701
6777
  const onTextChange = (element, textManageChangeData, text) => {
6702
6778
  if (textManageChangeData.newText) {
6703
6779
  if (isMultipleTextGeometry(element)) {
6704
- DrawTransforms.setDrawShapeText(this.board, element, {
6705
- key: text.key,
6780
+ DrawTransforms.setDrawTexts(this.board, element, {
6781
+ id: text.id,
6706
6782
  text: textManageChangeData.newText,
6707
6783
  textHeight: textManageChangeData.height
6708
6784
  });
@@ -6873,7 +6949,7 @@ class ArrowLineComponent extends CommonElementFlavour {
6873
6949
  initializeGenerator() {
6874
6950
  this.shapeGenerator = new ArrowLineShapeGenerator(this.board);
6875
6951
  this.activeGenerator = new LineActiveGenerator(this.board);
6876
- this.initializeTextManagesByElement();
6952
+ this.initializeTextManages();
6877
6953
  }
6878
6954
  initialize() {
6879
6955
  this.initializeGenerator();
@@ -6905,13 +6981,11 @@ class ArrowLineComponent extends CommonElementFlavour {
6905
6981
  return boundedElements;
6906
6982
  }
6907
6983
  onContextChanged(value, previous) {
6908
- this.initializeWeakMap();
6909
6984
  const boundedElements = this.getBoundedElements();
6910
6985
  const isBoundedElementsChanged = boundedElements.source !== this.boundedElements.source || boundedElements.target !== this.boundedElements.target;
6911
6986
  this.boundedElements = boundedElements;
6912
- const isChangeTheme = this.board.operations.find(op => op.type === 'set_theme');
6913
6987
  const linePoints = getArrowLinePoints(this.board, this.element);
6914
- if (value.element !== previous.element || isChangeTheme) {
6988
+ if (value.element !== previous.element || value.hasThemeChanged) {
6915
6989
  this.shapeGenerator.processDrawing(this.element, this.getElementG());
6916
6990
  this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
6917
6991
  selected: this.selected,
@@ -6939,19 +7013,21 @@ class ArrowLineComponent extends CommonElementFlavour {
6939
7013
  return;
6940
7014
  }
6941
7015
  }
6942
- initializeTextManagesByElement() {
7016
+ initializeTextManages() {
6943
7017
  if (this.element.texts?.length) {
6944
7018
  const textManages = [];
6945
7019
  this.element.texts.forEach((text, index) => {
6946
7020
  const manage = this.createTextManage(text, index);
6947
7021
  textManages.push(manage);
6948
7022
  });
6949
- this.initializeTextManages(textManages);
7023
+ this.getRef().initializeTextManage(textManages);
6950
7024
  }
6951
7025
  }
6952
7026
  drawText() {
6953
7027
  if (this.element.texts?.length) {
6954
- this.getTextManages().forEach((manage, index) => {
7028
+ this.getRef()
7029
+ .getTextManages()
7030
+ .forEach((manage, index) => {
6955
7031
  manage.draw(this.element.texts[index].text);
6956
7032
  this.getElementG().append(manage.g);
6957
7033
  });
@@ -6985,7 +7061,7 @@ class ArrowLineComponent extends CommonElementFlavour {
6985
7061
  return;
6986
7062
  const previousTextsLength = previousTexts.length;
6987
7063
  const currentTextsLength = currentTexts.length;
6988
- const textManages = this.getTextManages();
7064
+ const textManages = this.getRef().getTextManages();
6989
7065
  if (currentTextsLength === previousTextsLength) {
6990
7066
  for (let i = 0; i < previousTextsLength; i++) {
6991
7067
  if (previousTexts[i].text !== currentTexts[i].text) {
@@ -6994,13 +7070,13 @@ class ArrowLineComponent extends CommonElementFlavour {
6994
7070
  }
6995
7071
  }
6996
7072
  else {
6997
- this.destroyTextManages();
6998
- this.initializeTextManagesByElement();
7073
+ this.getRef().destroyTextManage();
7074
+ this.initializeTextManages();
6999
7075
  this.drawText();
7000
7076
  }
7001
7077
  }
7002
7078
  updateTextRectangle() {
7003
- const textManages = this.getTextManages();
7079
+ const textManages = this.getRef().getTextManages();
7004
7080
  textManages.forEach(manage => {
7005
7081
  manage.updateRectangle();
7006
7082
  });
@@ -7008,7 +7084,7 @@ class ArrowLineComponent extends CommonElementFlavour {
7008
7084
  destroy() {
7009
7085
  super.destroy();
7010
7086
  this.activeGenerator.destroy();
7011
- this.destroyTextManages();
7087
+ this.getRef().destroyTextManage();
7012
7088
  }
7013
7089
  }
7014
7090
 
@@ -7031,10 +7107,8 @@ class VectorLineComponent extends CommonElementFlavour {
7031
7107
  super.initialize();
7032
7108
  }
7033
7109
  onContextChanged(value, previous) {
7034
- this.initializeWeakMap();
7035
- const isChangeTheme = this.board.operations.find(op => op.type === 'set_theme');
7036
7110
  const linePoints = getVectorLinePoints(this.board, this.element);
7037
- if (value.element !== previous.element || isChangeTheme) {
7111
+ if (value.element !== previous.element || value.hasThemeChanged) {
7038
7112
  this.shapeGenerator.processDrawing(this.element, this.getElementG());
7039
7113
  this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
7040
7114
  selected: this.selected,
@@ -7083,7 +7157,7 @@ const withDrawHotkey = (board) => {
7083
7157
  if (hitElement && PlaitDrawElement.isGeometry(hitElement)) {
7084
7158
  if (isMultipleTextGeometry(hitElement)) {
7085
7159
  const hitText = getHitMultipleGeometryText(hitElement, point) ||
7086
- hitElement.texts.find(item => item.key.includes(MultipleTextGeometryCommonTextKeys.content)) ||
7160
+ hitElement.texts.find(item => item.id.includes(GeometryCommonTextKeys.content)) ||
7087
7161
  hitElement.texts[0];
7088
7162
  editText(board, hitElement, hitText);
7089
7163
  }
@@ -7290,68 +7364,6 @@ const withGeometryCreateByDrawing = (board) => {
7290
7364
  return board;
7291
7365
  };
7292
7366
 
7293
- const buildClipboardData = (board, elements, startPoint) => {
7294
- return elements.map(element => {
7295
- if (PlaitDrawElement.isShapeElement(element)) {
7296
- const points = element.points.map(point => [point[0] - startPoint[0], point[1] - startPoint[1]]);
7297
- return { ...element, points };
7298
- }
7299
- if (PlaitDrawElement.isArrowLine(element)) {
7300
- let source = { ...element.source };
7301
- let target = { ...element.target };
7302
- let points = [...element.points];
7303
- if (element.source.boundId) {
7304
- points[0] = getConnectionPoint(getElementById(board, element.source.boundId), element.source.connection);
7305
- if (!getElementById(board, element.source.boundId, elements)) {
7306
- delete source.boundId;
7307
- delete source.connection;
7308
- }
7309
- }
7310
- if (element.target.boundId) {
7311
- points[points.length - 1] = getConnectionPoint(getElementById(board, element.target.boundId), element.target.connection);
7312
- if (!getElementById(board, element.target.boundId, elements)) {
7313
- delete target.boundId;
7314
- delete target.connection;
7315
- }
7316
- }
7317
- points = points.map(point => [point[0] - startPoint[0], point[1] - startPoint[1]]);
7318
- return { ...element, points, source, target };
7319
- }
7320
- return element;
7321
- });
7322
- };
7323
- const insertClipboardData = (board, elements, startPoint) => {
7324
- const idsMap = {};
7325
- elements.forEach(element => {
7326
- idsMap[element.id] = idCreator();
7327
- });
7328
- elements.forEach(element => {
7329
- element.id = idsMap[element.id];
7330
- if (PlaitDrawElement.isArrowLine(element)) {
7331
- if (element.source.boundId) {
7332
- const boundElement = elements.find(item => [element.source.boundId, idsMap[element.source.boundId]].includes(item.id));
7333
- if (boundElement) {
7334
- element.source.boundId = idsMap[element.source.boundId];
7335
- }
7336
- }
7337
- if (element.target.boundId) {
7338
- const boundElement = elements.find(item => [element.target.boundId, idsMap[element.target.boundId]].includes(item.id));
7339
- if (boundElement) {
7340
- element.target.boundId = idsMap[element.target.boundId];
7341
- }
7342
- }
7343
- }
7344
- if (PlaitDrawElement.isElementByTable(element)) {
7345
- updateRowOrColumnIds(element, 'row');
7346
- updateRowOrColumnIds(element, 'column');
7347
- updateCellIds(element.cells);
7348
- }
7349
- element.points = element.points.map(point => [startPoint[0] + point[0], startPoint[1] + point[1]]);
7350
- Transforms.insertNode(board, element, [board.children.length]);
7351
- });
7352
- Transforms.addSelectionWithTemporaryElements(board, elements);
7353
- };
7354
-
7355
7367
  const withDrawFragment = (baseBoard) => {
7356
7368
  const board = baseBoard;
7357
7369
  const { getDeletedFragment, buildFragment, insertFragment } = board;
@@ -7394,16 +7406,12 @@ const withDrawFragment = (baseBoard) => {
7394
7406
  const selectedElements = [...targetDrawElements, ...boundLineElements];
7395
7407
  const elements = buildClipboardData(board, selectedElements, rectangle ? [rectangle.x, rectangle.y] : [0, 0]);
7396
7408
  const text = getElementsText(selectedElements);
7397
- if (!clipboardContext) {
7398
- clipboardContext = createClipboardContext(WritableClipboardType.elements, elements, text);
7399
- }
7400
- else {
7401
- clipboardContext = addClipboardContext(clipboardContext, {
7402
- text,
7403
- type: WritableClipboardType.elements,
7404
- elements
7405
- });
7406
- }
7409
+ const addition = {
7410
+ text,
7411
+ type: WritableClipboardType.elements,
7412
+ elements: elements
7413
+ };
7414
+ clipboardContext = addOrCreateClipboardContext(clipboardContext, addition);
7407
7415
  }
7408
7416
  return buildFragment(clipboardContext, rectangle, operationType, originData);
7409
7417
  };
@@ -7492,67 +7500,6 @@ const withArrowLineCreateByDraw = (board) => {
7492
7500
  return board;
7493
7501
  };
7494
7502
 
7495
- const withGeometryResize = (board) => {
7496
- let snapG;
7497
- const options = {
7498
- key: 'draw-geometry',
7499
- canResize: () => {
7500
- return true;
7501
- },
7502
- hitTest: (point) => {
7503
- const selectedElements = [...getSelectedGeometryElements(board), ...getSelectedImageElements(board)];
7504
- if (selectedElements.length !== 1 || getSelectedElements(board).length !== 1) {
7505
- return null;
7506
- }
7507
- const target = selectedElements[0];
7508
- if (canResize(board, target)) {
7509
- const rectangle = board.getRectangle(target);
7510
- const handleRef = getHitRectangleResizeHandleRef(board, rectangle, point, target.angle);
7511
- if (handleRef) {
7512
- return {
7513
- element: target,
7514
- handle: handleRef.handle,
7515
- cursorClass: handleRef.cursorClass,
7516
- rectangle
7517
- };
7518
- }
7519
- }
7520
- return null;
7521
- },
7522
- onResize: (resizeRef, resizeState) => {
7523
- resizeState.startPoint = rotateAntiPointsByElement(resizeState.startPoint, resizeRef.element) || resizeState.startPoint;
7524
- resizeState.endPoint = rotateAntiPointsByElement(resizeState.endPoint, resizeRef.element) || resizeState.endPoint;
7525
- snapG?.remove();
7526
- const isFromCorner = isCornerHandle(board, resizeRef.handle);
7527
- const isAspectRatio = resizeState.isShift || PlaitDrawElement.isImage(resizeRef.element);
7528
- const handleIndex = getIndexByResizeHandle(resizeRef.handle);
7529
- const { originPoint, handlePoint } = getResizeOriginPointAndHandlePoint(board, handleIndex, resizeRef.rectangle);
7530
- const resizeSnapRefOptions = getSnapResizingRefOptions(board, resizeRef, resizeState, {
7531
- originPoint,
7532
- handlePoint
7533
- }, isAspectRatio, isFromCorner);
7534
- const resizeSnapRef = getSnapResizingRef(board, [resizeRef.element], resizeSnapRefOptions);
7535
- snapG = resizeSnapRef.snapG;
7536
- PlaitBoard.getElementActiveHost(board).append(snapG);
7537
- let points = resizeSnapRef.activePoints;
7538
- if (PlaitDrawElement.isGeometry(resizeRef.element) && isGeometryIncludeText(resizeRef.element)) {
7539
- const { height: textHeight } = getFirstTextManage(resizeRef.element).getSize();
7540
- DrawTransforms.resizeGeometry(board, points, textHeight, resizeRef.path);
7541
- }
7542
- else {
7543
- points = normalizeShapePoints(points);
7544
- Transforms.setNode(board, { points }, resizeRef.path);
7545
- }
7546
- },
7547
- afterResize: (resizeRef) => {
7548
- snapG?.remove();
7549
- snapG = null;
7550
- }
7551
- };
7552
- withResize(board, options);
7553
- return board;
7554
- };
7555
-
7556
7503
  const withArrowLineResize = (board) => {
7557
7504
  let elbowLineIndex;
7558
7505
  let elbowLineDeleteCount;
@@ -7766,7 +7713,7 @@ const withArrowLineText = (board) => {
7766
7713
  }
7767
7714
  else {
7768
7715
  const ratio = getRatioByPoint(points, point);
7769
- const textMemory = getMemorizedLatest('line')?.text || {};
7716
+ const textMemory = getMemorizedLatest('arrow-line')?.text || {};
7770
7717
  texts.push({
7771
7718
  text: buildText(LINE_TEXT, undefined, textMemory),
7772
7719
  position: ratio,
@@ -8016,7 +7963,8 @@ const withDrawRotate = (board) => {
8016
7963
  let needCustomActiveRectangle = false;
8017
7964
  const canRotate = () => {
8018
7965
  const elements = getSelectedElements(board);
8019
- return elements.length > 0 && elements.every(el => PlaitDrawElement.isGeometry(el) || PlaitDrawElement.isImage(el));
7966
+ return (elements.length > 0 &&
7967
+ elements.every(el => PlaitDrawElement.isDrawElement(el) || PlaitDrawElement.isCustomGeometryElement(board, el)));
8020
7968
  };
8021
7969
  board.pointerDown = (event) => {
8022
7970
  if (!canRotate() || PlaitBoard.isReadonly(board) || PlaitBoard.hasBeenTextEditing(board) || !isMainPointer(event)) {
@@ -8179,7 +8127,7 @@ class TableComponent extends CommonElementFlavour {
8179
8127
  const table = this.board.buildTable(this.element);
8180
8128
  table.cells.forEach(item => {
8181
8129
  if (PlaitTableElement.isVerticalText(item)) {
8182
- const textManage = getTextManage(this.board, item.id);
8130
+ const textManage = getTextManageByCell(this.board, item);
8183
8131
  if (textManage) {
8184
8132
  const engine = getEngine(TableSymbols.table);
8185
8133
  const rectangle = engine.getTextRectangle(this.element, { key: item.id, board: this.board });
@@ -8194,7 +8142,7 @@ class TableComponent extends CommonElementFlavour {
8194
8142
  .filter(item => isCellIncludeText(item))
8195
8143
  .map(item => {
8196
8144
  return {
8197
- key: item.id,
8145
+ id: item.id,
8198
8146
  text: item.text,
8199
8147
  textHeight: item.textHeight,
8200
8148
  board: this.board
@@ -8207,12 +8155,12 @@ class TableComponent extends CommonElementFlavour {
8207
8155
  onChange: (value, data, text) => {
8208
8156
  const path = PlaitBoard.findPath(this.board, value);
8209
8157
  if (data.newText) {
8210
- DrawTransforms.setTableText(this.board, path, text.key, data.newText, data.height);
8158
+ DrawTransforms.setTableText(this.board, path, text.id, data.newText, data.height);
8211
8159
  }
8212
8160
  data.operations && memorizeLatestText(value, data.operations);
8213
8161
  },
8214
8162
  getRenderRectangle: (value, text) => {
8215
- const cell = getCellWithPoints(this.board, value, text.key);
8163
+ const cell = getCellWithPoints(this.board, value, text.id);
8216
8164
  if (PlaitTableElement.isVerticalText(cell)) {
8217
8165
  const cellRectangle = RectangleClient.getRectangleByPoints(cell.points);
8218
8166
  const strokeWidth = getStrokeWidthByElement(cell);
@@ -8233,8 +8181,7 @@ class TableComponent extends CommonElementFlavour {
8233
8181
  this.textGenerator.initialize();
8234
8182
  }
8235
8183
  onContextChanged(value, previous) {
8236
- const isChangeTheme = this.board.operations.find(op => op.type === 'set_theme');
8237
- if (value.element !== previous.element || isChangeTheme) {
8184
+ if (value.element !== previous.element || value.hasThemeChanged) {
8238
8185
  const previousSelectedCells = getSelectedCells(previous.element);
8239
8186
  if (previousSelectedCells?.length) {
8240
8187
  clearSelectedCells(previous.element);
@@ -8631,57 +8578,57 @@ const withSwimlane = (board) => {
8631
8578
  return withSwimlaneCreateByDrawing(withSwimlaneCreateByDrag(board));
8632
8579
  };
8633
8580
 
8634
- const withVectorPenCreateByDraw = (board) => {
8581
+ const withVectorLineCreateByDraw = (board) => {
8635
8582
  const { pointerDown, pointerMove, dblClick, globalKeyDown } = board;
8636
8583
  let lineShapeG = null;
8637
8584
  let temporaryElement = null;
8638
- let vectorPenRef;
8585
+ let vectorLineRef;
8639
8586
  const vectorLineComplete = () => {
8640
- if (vectorPenRef) {
8587
+ if (vectorLineRef) {
8641
8588
  clearSelectedElement(board);
8642
- if (vectorPenRef?.element) {
8643
- addSelectedElement(board, vectorPenRef?.element);
8589
+ if (vectorLineRef?.element) {
8590
+ addSelectedElement(board, vectorLineRef?.element);
8644
8591
  }
8645
8592
  }
8646
8593
  PlaitBoard.getBoardContainer(board).classList.remove(`vector-line-closed`);
8647
8594
  lineShapeG?.remove();
8648
8595
  lineShapeG = null;
8649
- vectorPenRef = null;
8596
+ vectorLineRef = null;
8650
8597
  temporaryElement = null;
8651
8598
  };
8652
8599
  board.pointerDown = (event) => {
8653
- const penPointers = getVectorPenPointers();
8654
- const isVectorPenPointer = PlaitBoard.isInPointer(board, penPointers);
8655
- if (isVectorPenPointer && !vectorPenRef) {
8656
- vectorPenRef = { shape: VectorLineShape.straight };
8600
+ const penPointers = getVectorLinePointers();
8601
+ const isVectorLinePointer = PlaitBoard.isInPointer(board, penPointers);
8602
+ if (isVectorLinePointer && !vectorLineRef) {
8603
+ vectorLineRef = { shape: VectorLineShape.straight };
8657
8604
  }
8658
- if (!PlaitBoard.isReadonly(board) && vectorPenRef && isDrawingMode(board)) {
8605
+ if (!PlaitBoard.isReadonly(board) && vectorLineRef && isDrawingMode(board)) {
8659
8606
  let point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
8660
8607
  if (!temporaryElement) {
8661
- vectorPenRef = {
8662
- ...vectorPenRef,
8608
+ vectorLineRef = {
8609
+ ...vectorLineRef,
8663
8610
  start: point
8664
8611
  };
8665
8612
  }
8666
8613
  else {
8667
- if (!vectorPenRef.element) {
8668
- vectorPenRef.element = temporaryElement;
8669
- Transforms.insertNode(board, vectorPenRef.element, [board.children.length]);
8614
+ if (!vectorLineRef.element) {
8615
+ vectorLineRef.element = temporaryElement;
8616
+ Transforms.insertNode(board, vectorLineRef.element, [board.children.length]);
8670
8617
  }
8671
8618
  else {
8672
- let points = vectorPenRef.element.points;
8673
- const isClosed = distanceBetweenPointAndPoint(...point, ...vectorPenRef.start) <= LINE_HIT_GEOMETRY_BUFFER;
8619
+ let points = vectorLineRef.element.points;
8620
+ const isClosed = distanceBetweenPointAndPoint(...point, ...vectorLineRef.start) <= LINE_HIT_GEOMETRY_BUFFER;
8674
8621
  if (isClosed) {
8675
- point = vectorPenRef.start;
8622
+ point = vectorLineRef.start;
8676
8623
  }
8677
- if (vectorPenRef.path) {
8624
+ if (vectorLineRef.path) {
8678
8625
  const lastPoint = points[points.length - 1];
8679
8626
  const distance = distanceBetweenPointAndPoint(...point, ...lastPoint);
8680
8627
  if (distance > 2) {
8681
- Transforms.setNode(board, { points: [...points, point] }, vectorPenRef.path);
8628
+ Transforms.setNode(board, { points: [...points, point] }, vectorLineRef.path);
8682
8629
  }
8683
8630
  }
8684
- vectorPenRef.element = getElementById(board, vectorPenRef.element.id);
8631
+ vectorLineRef.element = getElementById(board, vectorLineRef.element.id);
8685
8632
  if (isClosed) {
8686
8633
  vectorLineComplete();
8687
8634
  }
@@ -8695,33 +8642,33 @@ const withVectorPenCreateByDraw = (board) => {
8695
8642
  lineShapeG = createG();
8696
8643
  let movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
8697
8644
  const pointer = PlaitBoard.getPointer(board);
8698
- if (pointer !== VectorPenPointerType.vectorPen) {
8645
+ if (pointer !== VectorLinePointerType.vectorLine) {
8699
8646
  vectorLineComplete();
8700
8647
  }
8701
- if (vectorPenRef && vectorPenRef.start) {
8702
- let drawPoints = [vectorPenRef.start];
8703
- if (vectorPenRef.element) {
8704
- drawPoints = [vectorPenRef.start, ...vectorPenRef.element.points];
8705
- const path = PlaitBoard.findPath(board, vectorPenRef.element);
8706
- vectorPenRef.path = path;
8648
+ if (vectorLineRef && vectorLineRef.start) {
8649
+ let drawPoints = [vectorLineRef.start];
8650
+ if (vectorLineRef.element) {
8651
+ drawPoints = [vectorLineRef.start, ...vectorLineRef.element.points];
8652
+ const path = PlaitBoard.findPath(board, vectorLineRef.element);
8653
+ vectorLineRef.path = path;
8707
8654
  }
8708
- const distance = distanceBetweenPointAndPoint(...movingPoint, ...vectorPenRef.start);
8655
+ const distance = distanceBetweenPointAndPoint(...movingPoint, ...vectorLineRef.start);
8709
8656
  if (distance <= LINE_HIT_GEOMETRY_BUFFER) {
8710
- movingPoint = vectorPenRef.start;
8657
+ movingPoint = vectorLineRef.start;
8711
8658
  PlaitBoard.getBoardContainer(board).classList.add(`vector-line-closed`);
8712
8659
  }
8713
8660
  else {
8714
8661
  PlaitBoard.getBoardContainer(board).classList.remove(`vector-line-closed`);
8715
8662
  }
8716
- temporaryElement = vectorLineCreating(board, vectorPenRef.shape, drawPoints, movingPoint, lineShapeG);
8663
+ temporaryElement = vectorLineCreating(board, vectorLineRef.shape, drawPoints, movingPoint, lineShapeG);
8717
8664
  }
8718
8665
  pointerMove(event);
8719
8666
  };
8720
8667
  board.dblClick = (event) => {
8721
8668
  if (!PlaitBoard.isReadonly(board)) {
8722
- if (vectorPenRef) {
8723
- if (vectorPenRef.path) {
8724
- Transforms.setNode(board, { points: vectorPenRef?.element?.points }, vectorPenRef.path);
8669
+ if (vectorLineRef) {
8670
+ if (vectorLineRef.path) {
8671
+ Transforms.setNode(board, { points: vectorLineRef?.element?.points }, vectorLineRef.path);
8725
8672
  }
8726
8673
  vectorLineComplete();
8727
8674
  BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
@@ -8733,9 +8680,9 @@ const withVectorPenCreateByDraw = (board) => {
8733
8680
  if (!PlaitBoard.isReadonly(board)) {
8734
8681
  const isEsc = isKeyHotkey('esc', event);
8735
8682
  const isV = isKeyHotkey('v', event);
8736
- if ((isEsc || isV) && vectorPenRef) {
8737
- if (vectorPenRef.path) {
8738
- Transforms.setNode(board, { points: vectorPenRef.element?.points }, vectorPenRef.path);
8683
+ if ((isEsc || isV) && vectorLineRef) {
8684
+ if (vectorLineRef.path) {
8685
+ Transforms.setNode(board, { points: vectorLineRef.element?.points }, vectorLineRef.path);
8739
8686
  }
8740
8687
  vectorLineComplete();
8741
8688
  if (isV) {
@@ -8777,7 +8724,7 @@ const withVectorLineResize = (board) => {
8777
8724
  let handleIndex = resizeRef.handleIndex;
8778
8725
  if (resizeRef.handle === LineResizeHandle.source || resizeRef.handle === LineResizeHandle.target) {
8779
8726
  points[handleIndex] = resizeState.endPoint;
8780
- if (isClosedVectorLine(resizeRef.element)) {
8727
+ if (isClosedPoints(resizeRef.element.points)) {
8781
8728
  points[points.length - 1] = resizeState.endPoint;
8782
8729
  }
8783
8730
  else {
@@ -8804,7 +8751,7 @@ const withVectorLineResize = (board) => {
8804
8751
  };
8805
8752
 
8806
8753
  const withDraw = (board) => {
8807
- const { drawElement, getRectangle, isRectangleHit, isHit, isInsidePoint, isMovable, isAlign, getRelatedFragment, getHitElement } = board;
8754
+ const { drawElement, getRectangle, isRectangleHit, isHit, isInsidePoint, isMovable, isAlign, getRelatedFragment, getOneHitElement } = board;
8808
8755
  board.drawElement = (context) => {
8809
8756
  if (PlaitDrawElement.isGeometry(context.element)) {
8810
8757
  if (PlaitDrawElement.isUML(context.element)) {
@@ -8860,12 +8807,12 @@ const withDraw = (board) => {
8860
8807
  }
8861
8808
  return isHit(element, point);
8862
8809
  };
8863
- board.getHitElement = elements => {
8864
- const isDrawElements = elements.every(item => PlaitDrawElement.isDrawElement(item));
8865
- if (isDrawElements) {
8866
- return getDrawHitElement(board, elements);
8810
+ board.getOneHitElement = elements => {
8811
+ const isAllDrawElements = elements.every(item => PlaitDrawElement.isDrawElement(item));
8812
+ if (isAllDrawElements) {
8813
+ return getHitDrawElement(board, elements);
8867
8814
  }
8868
- return getHitElement(elements);
8815
+ return getOneHitElement(elements);
8869
8816
  };
8870
8817
  board.isInsidePoint = (element, point) => {
8871
8818
  const result = isHitElementInside(board, element, point);
@@ -8919,12 +8866,12 @@ const withDraw = (board) => {
8919
8866
  });
8920
8867
  return getRelatedFragment([...elements, ...activeLines], originData);
8921
8868
  };
8922
- return withSwimlane(withTable(withDrawResize(withVectorPenCreateByDraw(withArrowLineAutoCompleteReaction(withArrowLineBoundReaction(withVectorLineResize(withArrowLineResize(withArrowLineTextMove(withArrowLineText(withGeometryResize(withDrawRotate(withArrowLineCreateByDraw(withArrowLineAutoComplete(withGeometryCreateByDrag(withGeometryCreateByDrawing(withDrawFragment(withDrawHotkey(board))))))))))))))))));
8869
+ return withSwimlane(withTable(withDrawResize(withVectorLineCreateByDraw(withArrowLineAutoCompleteReaction(withArrowLineBoundReaction(withVectorLineResize(withArrowLineResize(withArrowLineTextMove(withArrowLineText(withDrawRotate(withArrowLineCreateByDraw(withArrowLineAutoComplete(withGeometryCreateByDrag(withGeometryCreateByDrawing(withDrawFragment(withDrawHotkey(board)))))))))))))))));
8923
8870
  };
8924
8871
 
8925
8872
  /**
8926
8873
  * Generated bundle index. Do not edit.
8927
8874
  */
8928
8875
 
8929
- export { ArrowLineAutoCompleteGenerator, ArrowLineComponent, ArrowLineHandleKey, ArrowLineMarkerType, ArrowLineShape, BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultActivationProperty, DefaultActorProperty, DefaultArrowProperty, DefaultAssemblyProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultClassProperty, DefaultCloudProperty, DefaultCombinedFragmentProperty, DefaultComponentBoxProperty, DefaultConnectorProperty, DefaultContainerProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDeletionProperty, DefaultDocumentProperty, DefaultDrawActiveStyle, DefaultDrawStyle, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultInterfaceProperty, DefaultInternalStorageProperty, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultObjectProperty, DefaultPackageProperty, DefaultPentagonArrowProperty, DefaultPortProperty, DefaultProvidedInterfaceProperty, DefaultRequiredInterfaceProperty, DefaultSwimlaneHorizontalProperty, DefaultSwimlaneHorizontalWithHeaderProperty, DefaultSwimlanePropertyMap, DefaultSwimlaneVerticalProperty, DefaultSwimlaneVerticalWithHeaderProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, DefaultUMLPropertyMap, DrawThemeColors, DrawTransforms, FlowchartSymbols, GEOMETRY_NOT_CLOSED, GEOMETRY_WITHOUT_TEXT, GEOMETRY_WITH_MULTIPLE_TEXT, GeometryComponent, GeometryShapeGenerator, GeometryThreshold, KEY_TO_TEXT_MANAGE, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LineActiveGenerator, MIN_TEXT_WIDTH, MemorizeKey, MultipleTextGeometryCommonTextKeys, MultipleTextGeometryTextKeys, PlaitArrowLine, PlaitDrawElement, PlaitGeometry, PlaitTableElement, Q2C, SELECTED_CELLS, SWIMLANE_HEADER_SIZE, ShapeDefaultSpace, SingleTextGenerator, StrokeStyle, SwimlaneDrawSymbols, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, VectorLineComponent, VectorLineShape, VectorPenPointerType, WithArrowLineAutoCompletePluginKey, adjustSwimlaneShape, alignElbowSegment, alignPoints, buildDefaultTextsByShape, buildSwimlaneTable, clearSelectedCells, collectArrowLineUpdatedRefsByGeometry, createArrowLineElement, createCell, createDefaultCells, createDefaultFlowchart, createDefaultGeometry, createDefaultRowsOrColumns, createDefaultSwimlane, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createMultipleTextGeometryElement, createTextElement, createUMLClassOrInterfaceGeometryElement, createVectorLineElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawArrowLine, drawArrowLineArrow, drawBoundReaction, drawGeometry, drawShape, drawVectorLine, editCell, editText, getArrowLineHandleRefPair, getArrowLinePointers, getArrowLinePoints, getArrowLineTextRectangle, getArrowLines, getAutoCompletePoints, getBasicPointers, getCellWithPoints, getCellsRectangle, getCellsWithPoints, getCenterPointsOnPolygon$1 as getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultSwimlanePoints, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getDrawHitElement, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFirstFilledDrawElement, getFirstTextOrLineElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitCell, getHitConnection, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getHitMultipleGeometryText, getHitShape, getIndexAndDeleteCountByKeyPoint, getLineMemorizedLatest, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getMultipleTextGeometryTextKeys, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedArrowLineElements, getSelectedCells, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedSwimlane, getSelectedTableCellsEditor, getSelectedTableElements, getSelectedVectorLineElements, getSnapResizingRef, getSnapResizingRefOptions, getSnappingRef, getSnappingShape, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlaneCount, getSwimlanePointers, getTextKey, getTextManage, getTextManageByCell, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, getVectorLinePoints, getVectorPenPointers, handleArrowLineCreating, hasIllegalElbowPoint, insertElement, isCellIncludeText, isClosedVectorLine, isDrawElementClosed, isDrawElementIncludeText, isDrawElementsIncludeText, isGeometryClosed, isGeometryIncludeText, isHitArrowLine, isHitArrowLineText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitPolyLine, isHitVectorLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isSelfLoop, isSingleSelectElementByTable, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isSwimlanePointers, isSwimlaneWithHeader, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, rerenderGeometryActive, setSelectedCells, setTextManage, traverseDrawShapes, updateCellIds, updateCellIdsByRowOrColumn, updateColumns, updateRowOrColumnIds, updateRows, vectorLineCreating, withArrowLineAutoComplete, withDraw };
8876
+ export { ArrowLineAutoCompleteGenerator, ArrowLineComponent, ArrowLineHandleKey, ArrowLineMarkerType, ArrowLineShape, BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultActivationProperty, DefaultActorProperty, DefaultArrowProperty, DefaultAssemblyProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultClassProperty, DefaultCloudProperty, DefaultCombinedFragmentProperty, DefaultComponentBoxProperty, DefaultConnectorProperty, DefaultContainerProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDeletionProperty, DefaultDocumentProperty, DefaultDrawActiveStyle, DefaultDrawStyle, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultInterfaceProperty, DefaultInternalStorageProperty, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultObjectProperty, DefaultPackageProperty, DefaultPentagonArrowProperty, DefaultPortProperty, DefaultProvidedInterfaceProperty, DefaultRequiredInterfaceProperty, DefaultSwimlaneHorizontalProperty, DefaultSwimlaneHorizontalWithHeaderProperty, DefaultSwimlanePropertyMap, DefaultSwimlaneVerticalProperty, DefaultSwimlaneVerticalWithHeaderProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, DefaultUMLPropertyMap, DrawThemeColors, DrawTransforms, FlowchartSymbols, GEOMETRY_NOT_CLOSED, GEOMETRY_WITHOUT_TEXT, GEOMETRY_WITH_MULTIPLE_TEXT, GeometryCommonTextKeys, GeometryComponent, GeometryShapeGenerator, GeometryThreshold, KEY_TO_TEXT_MANAGE, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LineActiveGenerator, MIN_TEXT_WIDTH, MemorizeKey, MultipleTextGeometryTextKeys, PlaitArrowLine, PlaitDrawElement, PlaitGeometry, PlaitTableElement, Q2C, SELECTED_CELLS, SWIMLANE_HEADER_SIZE, ShapeDefaultSpace, SingleTextGenerator, SwimlaneDrawSymbols, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, VectorLineComponent, VectorLinePointerType, VectorLineShape, WithArrowLineAutoCompletePluginKey, WithDrawPluginKey, adjustSwimlaneShape, alignElbowSegment, alignPoints, buildClipboardData, buildDefaultTextsByShape, buildSwimlaneTable, clearSelectedCells, collectArrowLineUpdatedRefsByGeometry, createArrowLineElement, createCell, createDefaultCells, createDefaultFlowchart, createDefaultGeometry, createDefaultRowsOrColumns, createDefaultSwimlane, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createMultipleTextGeometryElement, createTextElement, createUMLClassOrInterfaceGeometryElement, createVectorLineElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawArrowLine, drawArrowLineArrow, drawBoundReaction, drawGeometry, drawShape, drawVectorLine, editCell, editText, getArrowLineHandleRefPair, getArrowLinePointers, getArrowLinePoints, getArrowLineTextRectangle, getArrowLines, getAutoCompletePoints, getBasicPointers, getCellWithPoints, getCellsRectangle, getCellsWithPoints, getCenterPointsOnPolygon$1 as getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFill, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultSwimlanePoints, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFirstFilledDrawElement, getFirstTextOrLineElement, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitCell, getHitConnection, getHitConnectorPoint, getHitDrawElement, getHitIndexOfAutoCompletePoint, getHitMultipleGeometryText, getHitShape, getIndexAndDeleteCountByKeyPoint, getLineMemorizedLatest, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getMultipleTextGeometryTextKeys, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedArrowLineElements, getSelectedCells, getSelectedCustomGeometryElements, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedSwimlane, getSelectedTableCellsEditor, getSelectedTableElements, getSelectedVectorLineElements, getSnapResizingRef, getSnapResizingRefOptions, getSnappingRef, getSnappingShape, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlaneCount, getSwimlanePointers, getTextKey, getTextManage, getTextManageByCell, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, getVectorLinePointers, getVectorLinePoints, handleArrowLineCreating, hasIllegalElbowPoint, insertClipboardData, insertElement, isCellIncludeText, isClosedPoints, isCustomGeometryClosed, isDrawElementClosed, isDrawElementIncludeText, isDrawElementsIncludeText, isGeometryClosed, isGeometryIncludeText, isHitArrowLine, isHitArrowLineText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitPolyLine, isHitVectorLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isRectangleHitRotatedElement, isRectangleHitRotatedPoints, isSelfLoop, isSingleSelectArrowLine, isSingleSelectElementByTable, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isSwimlanePointers, isSwimlaneWithHeader, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, rerenderGeometryActive, setSelectedCells, setTextManage, traverseDrawShapes, updateCellIds, updateCellIdsByRowOrColumn, updateColumns, updateRowOrColumnIds, updateRows, vectorLineCreating, withArrowLineAutoComplete, withDraw };
8930
8877
  //# sourceMappingURL=plait-draw.mjs.map