@plait/draw 0.86.1 → 0.87.0-next.1

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.
@@ -1,7 +1,7 @@
1
- import { ACTIVE_STROKE_WIDTH, DEFAULT_COLOR, ThemeColorMode, PlaitElement, RectangleClient, getSelectedElements, idCreator, createDebugGenerator, Point, createG, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, catmullRomFitting, PlaitBoard, setStrokeLinecap, findElements, createMask, createRect, getNearestPointBetweenPointAndArc, setPathStrokeLinecap, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPointInPolygon, isLineHitRectangle, rotatePointsByAngle, rotateAntiPointsByElement, getEllipseArcCenter, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, depthFirstRecursion, getIsRecursionFunc, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, getI18nValue, SELECTION_RECTANGLE_CLASS_NAME, toActivePointFromViewBoxPoint, toActiveRectangleFromViewBoxRectangle, drawRectangle, isSelectionMoving, rgbaToHEX, getElementById, rotatePointsByElement, PlaitNode, hasValidAngle, toViewBoxPoint, toHostPoint, Direction, rotatePoints, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, getRectangleByElements, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, getNearestPointBetweenPointAndSegments, getEllipseTangentSlope, getVectorFromPointAndSlope, getNearestPointBetweenPointAndEllipse, isPointInEllipse, isPointInRoundRectangle, drawRoundRectangle, getCrossingPointsBetweenEllipseAndSegment, drawLine, getNearestPointBetweenPointAndDiscreteSegments, getNearestPointBetweenPointAndSegment, Path, getHitElementByPoint, WritableClipboardOperationType, WritableClipboardType, addOrCreateClipboardContext, setAngleForG, toActivePoint, temporaryDisableSelection, toScreenPointFromActivePoint, PRESS_AND_MOVE_BUFFER, CursorClass, isHorizontalDirection, 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, removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, getExtendPoint, getUnitVectorByPointAndPoint, Generator, getPointByVectorComponent, getStrokeLineDash, StrokeStyle, getPointOnPolyline, buildText, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getFirstTextEditor, sortElementsByArea, isFilled, getTextEditorsByElement, RESIZE_HANDLE_DIAMETER, drawPrimaryHandle, drawFillPrimaryHandle, PRIMARY_COLOR, measureElement, DEFAULT_FONT_FAMILY, getFirstTextManage, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, normalizeShapePoints, resetPointsAfterResize, getDirectionByVector, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, ROTATE_HANDLE_SIZE, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, isCornerHandle, getIndexByResizeHandle, withResize, getSymmetricHandleIndex, getResizeHandlePointByIndex, drawHandle, getDirectionFactorByDirectionComponent, buildClipboardData as buildClipboardData$1, insertClipboardData as insertClipboardData$1, getDirectionByPointOfRectangle, getDirectionFactor, rotateVector, getOppositeDirection, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, CommonElementFlavour, createActiveGenerator, hasResizeHandle, ActiveGenerator, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, isResizingByCondition, getRatioByPoint, getTextManages, ImageGenerator, getDirectionByIndex, moveXOfPoint, getXDistanceBetweenPoint, ResizeHandle, addRotating, removeRotating, drawRotateHandle } from '@plait/common';
3
- import { TEXT_DEFAULT_HEIGHT, DEFAULT_FONT_SIZE, AlignEditor } from '@plait/text-plugins';
1
+ import { ACTIVE_STROKE_WIDTH, DEFAULT_COLOR, ThemeColorMode, PlaitElement, RectangleClient, getSelectedElements, idCreator, createDebugGenerator, Point, createG, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, catmullRomFitting, PlaitBoard, setStrokeLinecap, findElements, createMask, createRect, getNearestPointBetweenPointAndArc, setPathStrokeLinecap, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPointInPolygon, isLineHitRectangle, rotatePointsByAngle, rotateAntiPointsByElement, getEllipseArcCenter, Transforms, clearSelectedElement, depthFirstRecursion, getIsRecursionFunc, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, getI18nValue, SELECTION_RECTANGLE_CLASS_NAME, toActivePointFromViewBoxPoint, toActiveRectangleFromViewBoxRectangle, drawRectangle, isSelectionMoving, rgbaToHEX, getElementById, rotatePointsByElement, PlaitNode, hasValidAngle, toViewBoxPoint, toHostPoint, Direction, rotatePoints, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, getRectangleByElements, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, getNearestPointBetweenPointAndSegments, getEllipseTangentSlope, getVectorFromPointAndSlope, getNearestPointBetweenPointAndEllipse, isPointInEllipse, isPointInRoundRectangle, drawRoundRectangle, getCrossingPointsBetweenEllipseAndSegment, drawLine, getNearestPointBetweenPointAndDiscreteSegments, getNearestPointBetweenPointAndSegment, Path, getHitElementByPoint, WritableClipboardOperationType, WritableClipboardType, addOrCreateClipboardContext, addSelectedElement, BoardTransforms, PlaitPointerType, setAngleForG, toActivePoint, temporaryDisableSelection, toScreenPointFromActivePoint, PRESS_AND_MOVE_BUFFER, CursorClass, isHorizontalDirection, 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, removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, getExtendPoint, getUnitVectorByPointAndPoint, Generator, getElementSize, DEFAULT_FONT_FAMILY, getPointByVectorComponent, getStrokeLineDash, StrokeStyle, getPointOnPolyline, buildText, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getFirstTextEditor, sortElementsByArea, isFilled, getTextEditorsByElement, RESIZE_HANDLE_DIAMETER, drawPrimaryHandle, drawFillPrimaryHandle, PRIMARY_COLOR, measureElement, getFirstTextManage, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, normalizeShapePoints, resetPointsAfterResize, getDirectionByVector, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, ROTATE_HANDLE_SIZE, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, isCornerHandle, getIndexByResizeHandle, withResize, getSymmetricHandleIndex, getResizeHandlePointByIndex, drawHandle, getDirectionFactorByDirectionComponent, buildClipboardData as buildClipboardData$1, insertClipboardData as insertClipboardData$1, getDirectionByPointOfRectangle, getDirectionFactor, rotateVector, getOppositeDirection, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, CommonElementFlavour, createActiveGenerator, hasResizeHandle, ActiveGenerator, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, isResizingByCondition, getRatioByPoint, getTextManages, ImageGenerator, getDirectionByIndex, moveXOfPoint, getXDistanceBetweenPoint, ResizeHandle, addRotating, removeRotating, drawRotateHandle } from '@plait/common';
4
3
  import { pointsOnBezierCurves } from 'points-on-curve';
4
+ import { DEFAULT_FONT_SIZE, AlignEditor } from '@plait/text-plugins';
5
5
  import { Editor, Node } from 'slate';
6
6
  import { isKeyHotkey } from 'is-hotkey';
7
7
 
@@ -545,7 +545,7 @@ class TextGenerator {
545
545
  removedTexts.forEach(item => {
546
546
  const textManage = getTextManage(this.board, element, item);
547
547
  const index = this.textManages.findIndex(value => value === textManage);
548
- if (index > -1 && item.text && item.textHeight) {
548
+ if (index > -1 && item.text) {
549
549
  this.textManages.splice(index, 1);
550
550
  }
551
551
  textManage?.destroy();
@@ -591,9 +591,9 @@ class TextGenerator {
591
591
  getRectangle(text) {
592
592
  const getRectangle = getEngine(this.shape).getTextRectangle;
593
593
  if (getRectangle) {
594
- return getRectangle(this.element, text);
594
+ return getRectangle(this.board, this.element, text);
595
595
  }
596
- return getTextRectangle(this.element);
596
+ return getTextRectangle$1(this.board, this.element);
597
597
  }
598
598
  getMaxWidth(text) {
599
599
  return this.options.getMaxWidth ? this.options.getMaxWidth() : this.getRectangle(text).width;
@@ -754,7 +754,7 @@ function updateCellIds(cells) {
754
754
  });
755
755
  }
756
756
  function isCellIncludeText(cell) {
757
- return cell.text && cell.textHeight;
757
+ return cell.text;
758
758
  }
759
759
  function getCellsRectangle(board, element, cells) {
760
760
  const cellsWithPoints = getCellsWithPoints(board, element);
@@ -771,7 +771,6 @@ const createCell = (rowId, columnId, text = null) => {
771
771
  columnId
772
772
  };
773
773
  if (text !== null) {
774
- cell['textHeight'] = TEXT_DEFAULT_HEIGHT;
775
774
  cell['text'] = {
776
775
  children: [{ text }],
777
776
  align: Alignment.center
@@ -823,7 +822,7 @@ const getMemorizeKey = (element) => {
823
822
  };
824
823
  const getLineMemorizedLatest = () => {
825
824
  const properties = getMemorizedLatest(MemorizeKey.arrowLine);
826
- return { ...properties } || {};
825
+ return { ...properties };
827
826
  };
828
827
  const getMemorizedLatestByPointer = (pointer) => {
829
828
  let memorizeKey = '';
@@ -836,15 +835,15 @@ const getMemorizedLatestByPointer = (pointer) => {
836
835
  else {
837
836
  memorizeKey = MemorizeKey.flowchart;
838
837
  }
839
- const properties = { ...getMemorizedLatest(memorizeKey) } || {};
840
- const textProperties = { ...properties.text } || {};
838
+ const properties = { ...getMemorizedLatest(memorizeKey) };
839
+ const textProperties = { ...properties.text };
841
840
  delete properties.text;
842
841
  return { textProperties, geometryProperties: properties };
843
842
  };
844
843
  const memorizeLatestText = (element, operations) => {
845
844
  const memorizeKey = getMemorizeKey(element);
846
845
  let textMemory = getMemorizedLatest(memorizeKey)?.text || {};
847
- const setNodeOperation = operations.find(operation => operation.type === 'set_node');
846
+ const setNodeOperation = operations.find((operation) => operation.type === 'set_node');
848
847
  if (setNodeOperation) {
849
848
  const { properties, newProperties } = setNodeOperation;
850
849
  for (const key in newProperties) {
@@ -1320,6 +1319,15 @@ class ArrowLineShapeGenerator extends Generator {
1320
1319
  }
1321
1320
  }
1322
1321
 
1322
+ const getTextSize = (board, text, maxWidth) => {
1323
+ const textSize = getElementSize(board, text, { fontSize: DEFAULT_FONT_SIZE, fontFamily: DEFAULT_FONT_FAMILY }, maxWidth);
1324
+ const normalizedTextSize = normalizeWidthAndHeight(textSize);
1325
+ return normalizedTextSize;
1326
+ };
1327
+ const normalizeWidthAndHeight = (textSize) => {
1328
+ return { ...textSize, width: textSize.width < MIN_TEXT_WIDTH ? MIN_TEXT_WIDTH : textSize.width };
1329
+ };
1330
+
1323
1331
  const createArrowLineElement = (shape, points, source, target, texts, options) => {
1324
1332
  return {
1325
1333
  id: idCreator(),
@@ -1434,11 +1442,12 @@ const getArrowLineTextRectangle = (board, element, index) => {
1434
1442
  const text = element.texts[index];
1435
1443
  const elbowPoints = getArrowLinePoints(board, element);
1436
1444
  const point = getPointOnPolyline(elbowPoints, text.position);
1445
+ const textSize = getTextSize(board, text.text);
1437
1446
  return {
1438
- x: point[0] - text.width / 2,
1439
- y: point[1] - text.height / 2,
1440
- width: text.width,
1441
- height: text.height
1447
+ x: point[0] - textSize.width / 2,
1448
+ y: point[1] - textSize.height / 2,
1449
+ width: textSize.width,
1450
+ height: textSize.height
1442
1451
  };
1443
1452
  };
1444
1453
  const getArrowLines = (board) => {
@@ -1518,13 +1527,14 @@ const getHitArrowLineTextIndex = (board, element, point) => {
1518
1527
  if (!texts.length)
1519
1528
  return -1;
1520
1529
  const points = getArrowLinePoints(board, element);
1521
- return texts.findIndex(text => {
1530
+ return texts.findIndex((text) => {
1522
1531
  const center = getPointOnPolyline(points, text.position);
1532
+ const textSize = getTextSize(board, text.text);
1523
1533
  const rectangle = {
1524
- x: center[0] - text.width / 2,
1525
- y: center[1] - text.height / 2,
1526
- width: text.width,
1527
- height: text.height
1534
+ x: center[0] - textSize.width / 2,
1535
+ y: center[1] - textSize.height / 2,
1536
+ width: textSize.width,
1537
+ height: textSize.height
1528
1538
  };
1529
1539
  return RectangleClient.isHit(rectangle, RectangleClient.getRectangleByPoints([point, point]));
1530
1540
  });
@@ -1557,27 +1567,24 @@ const buildDefaultTextsByShape = (shape) => {
1557
1567
  const memorizedLatest = getMemorizedLatestByPointer(shape);
1558
1568
  const textProperties = { ...memorizedLatest.textProperties };
1559
1569
  const alignment = textProperties?.align;
1560
- const textHeight = textProperties?.textHeight || DefaultTextProperty.height;
1561
1570
  delete textProperties?.align;
1562
- delete textProperties?.textHeight;
1563
1571
  const defaultTexts = getDefaultGeometryProperty(shape)?.texts || [];
1564
1572
  const textKeys = getMultipleTextGeometryTextKeys(shape);
1565
1573
  return (textKeys || []).map((textKey) => {
1566
1574
  const text = defaultTexts?.find((item) => item?.key === textKey);
1567
1575
  return {
1568
1576
  id: textKey,
1569
- text: buildText(text?.text || '', alignment || text?.align || Alignment.center, textProperties),
1570
- textHeight: textHeight
1577
+ text: buildText(text?.text || '', alignment || text?.align || Alignment.center, textProperties)
1571
1578
  };
1572
1579
  });
1573
1580
  };
1574
- const getHitMultipleGeometryText = (element, point) => {
1581
+ const getHitMultipleGeometryText = (board, element, point) => {
1575
1582
  const engine = getEngine(element.shape);
1576
1583
  const rectangle = RectangleClient.getRectangleByPoints([point, point]);
1577
1584
  let hitText;
1578
1585
  if (engine.getTextRectangle) {
1579
- hitText = element.texts.find(text => {
1580
- const textRectangle = engine.getTextRectangle(element, { id: text.id });
1586
+ hitText = element.texts.find((text) => {
1587
+ const textRectangle = engine.getTextRectangle(board, element, { id: text.id });
1581
1588
  return RectangleClient.isHit(rectangle, textRectangle);
1582
1589
  });
1583
1590
  }
@@ -1811,28 +1818,22 @@ const CloudEngine = {
1811
1818
  getConnectorPoints(rectangle) {
1812
1819
  return RectangleClient.getEdgeCenterPoints(rectangle);
1813
1820
  },
1814
- getTextRectangle(element) {
1821
+ getTextRectangle: (board, element) => {
1815
1822
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
1816
1823
  const strokeWidth = getStrokeWidthByElement(element);
1817
- const height = element.textHeight;
1818
1824
  const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
1819
1825
  const width = originWidth / 1.5;
1826
+ const text = element.text;
1827
+ const textSize = getTextSize(board, text, width);
1820
1828
  return {
1821
- height,
1829
+ height: textSize.height,
1822
1830
  width: width > 0 ? width : 0,
1823
1831
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + originWidth / 6,
1824
- y: elementRectangle.y + elementRectangle.height / 6 + ((elementRectangle.height * 4) / 6 - height) / 2
1832
+ y: elementRectangle.y + elementRectangle.height / 6 + ((elementRectangle.height * 4) / 6 - textSize.height) / 2
1825
1833
  };
1826
1834
  }
1827
1835
  };
1828
1836
 
1829
- const isTextExceedingBounds = (geometry) => {
1830
- const client = RectangleClient.getRectangleByPoints(geometry.points);
1831
- if (geometry.textHeight && geometry.textHeight > client.height) {
1832
- return true;
1833
- }
1834
- return false;
1835
- };
1836
1837
  const isHitArrowLineText = (board, element, point) => {
1837
1838
  return getHitArrowLineTextIndex(board, element, point) !== -1;
1838
1839
  };
@@ -1854,31 +1855,31 @@ const isHitVectorLine = (board, element, point) => {
1854
1855
  return isHitPolyLine(points, point);
1855
1856
  }
1856
1857
  };
1857
- const isRectangleHitElementText = (element, rectangle) => {
1858
+ const isRectangleHitElementText = (board, element, rectangle) => {
1858
1859
  const engine = getEngine(element.shape);
1859
1860
  if (isMultipleTextGeometry(element)) {
1860
1861
  const texts = element.texts;
1861
1862
  return texts.some((item) => {
1862
- const textClient = engine.getTextRectangle(element, { id: item.id });
1863
+ const textClient = engine.getTextRectangle(board, element, { id: item.id });
1863
1864
  return isRectangleHitRotatedPoints(rectangle, RectangleClient.getCornerPoints(textClient), element.angle);
1864
1865
  });
1865
1866
  }
1866
1867
  else {
1867
- const textClient = engine.getTextRectangle ? engine.getTextRectangle(element) : getTextRectangle(element);
1868
+ const textClient = engine.getTextRectangle ? engine.getTextRectangle(board, element) : getTextRectangle$1(board, element);
1868
1869
  return isRectangleHitRotatedPoints(rectangle, RectangleClient.getCornerPoints(textClient), element.angle);
1869
1870
  }
1870
1871
  };
1871
- const isHitElementText = (element, point) => {
1872
+ const isHitElementText = (board, element, point) => {
1872
1873
  const engine = getEngine(element.shape);
1873
1874
  if (isMultipleTextGeometry(element)) {
1874
1875
  const texts = element.texts;
1875
1876
  return texts.some((item) => {
1876
- const textClient = engine.getTextRectangle(element, { id: item.id });
1877
+ const textClient = engine.getTextRectangle(board, element, { id: item.id });
1877
1878
  return RectangleClient.isPointInRectangle(textClient, point);
1878
1879
  });
1879
1880
  }
1880
1881
  else {
1881
- const textClient = engine.getTextRectangle ? engine.getTextRectangle(element) : getTextRectangle(element);
1882
+ const textClient = engine.getTextRectangle ? engine.getTextRectangle(board, element) : getTextRectangle$1(board, element);
1882
1883
  return RectangleClient.isPointInRectangle(textClient, point);
1883
1884
  }
1884
1885
  };
@@ -1896,7 +1897,7 @@ const isRectangleHitDrawElement = (board, element, selection) => {
1896
1897
  if (isHitElement) {
1897
1898
  return isHitElement;
1898
1899
  }
1899
- return !isEmptyTextElement(element) && isRectangleHitElementText(element, rangeRectangle);
1900
+ return !isEmptyTextElement(element) && isRectangleHitElementText(board, element, rangeRectangle);
1900
1901
  }
1901
1902
  if (PlaitDrawElement.isImage(element)) {
1902
1903
  return isRectangleHitRotatedElement(board, rangeRectangle, element);
@@ -1991,13 +1992,13 @@ const isHitDrawElement = (board, element, point, isStrict = true) => {
1991
1992
  }
1992
1993
  const engine = getEngine(getElementShape(element));
1993
1994
  if (PlaitDrawElement.isText(element)) {
1994
- const textClient = getTextRectangle(element);
1995
+ const textClient = getTextRectangle$1(board, element);
1995
1996
  return RectangleClient.isPointInRectangle(textClient, point);
1996
1997
  }
1997
1998
  if (!!isStrict && isEmptyTextElement(element) && !isFilledDrawElement(board, element)) {
1998
1999
  return false;
1999
2000
  }
2000
- const isHitText = isHitElementText(element, point);
2001
+ const isHitText = isHitElementText(board, element, point);
2001
2002
  return isHitText || engine.isInsidePoint(rectangle, point);
2002
2003
  }
2003
2004
  if (PlaitDrawElement.isImage(element)) {
@@ -2031,7 +2032,7 @@ const isHitElementInside = (board, element, point) => {
2031
2032
  return isHitInside;
2032
2033
  }
2033
2034
  if (engine.getTextRectangle) {
2034
- const isHitText = isHitElementText(element, point);
2035
+ const isHitText = isHitElementText(board, element, point);
2035
2036
  if (isHitText) {
2036
2037
  return isHitText;
2037
2038
  }
@@ -2050,16 +2051,25 @@ const isHitElementInside = (board, element, point) => {
2050
2051
  return null;
2051
2052
  };
2052
2053
 
2053
- const getTextRectangle = (element) => {
2054
+ const getTextRectangle$1 = (board, element) => {
2055
+ const isAutoSize = PlaitDrawElement.isText(element) ? element.autoSize : false;
2054
2056
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
2055
2057
  const strokeWidth = getStrokeWidthByElement(element);
2056
- const height = element.textHeight;
2057
2058
  const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
2059
+ const textSize = getTextSize(board, element.text, isAutoSize ? GeometryThreshold.defaultTextMaxWidth : width);
2060
+ if (isAutoSize) {
2061
+ return {
2062
+ height: textSize.height,
2063
+ width: textSize.width,
2064
+ x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
2065
+ y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2
2066
+ };
2067
+ }
2058
2068
  return {
2059
- height,
2069
+ height: textSize.height,
2060
2070
  width: width > 0 ? width : 0,
2061
2071
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
2062
- y: elementRectangle.y + (elementRectangle.height - height) / 2
2072
+ y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2
2063
2073
  };
2064
2074
  };
2065
2075
  const getStrokeWidthByElement = (element) => {
@@ -2073,8 +2083,6 @@ const insertElement = (board, element) => {
2073
2083
  memorizeLatestShape(board, element.shape);
2074
2084
  Transforms.insertNode(board, element, [board.children.length]);
2075
2085
  clearSelectedElement(board);
2076
- addSelectedElement(board, element);
2077
- BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
2078
2086
  };
2079
2087
  const isDrawElementIncludeText = (element) => {
2080
2088
  if (PlaitDrawElement.isText(element)) {
@@ -2492,11 +2500,11 @@ class SingleTextGenerator extends TextGenerator {
2492
2500
  return this.textManages[0];
2493
2501
  }
2494
2502
  constructor(board, element, text, options) {
2495
- super(board, element, [{ id: element.id, text: text, textHeight: element.textHeight }], options);
2503
+ super(board, element, [{ id: element.id, text: text }], options);
2496
2504
  }
2497
2505
  update(element, previousText, currentText, elementG) {
2498
2506
  if (!isMultipleTextGeometry(element)) {
2499
- super.update(element, [{ text: previousText, id: element.id, textHeight: element.textHeight }], [{ text: currentText, id: element.id, textHeight: element.textHeight }], elementG);
2507
+ super.update(element, [{ text: previousText, id: element.id }], [{ text: currentText, id: element.id }], elementG);
2500
2508
  }
2501
2509
  }
2502
2510
  }
@@ -2596,13 +2604,8 @@ const createUMLClassOrInterfaceGeometryElement = (board, shape, points) => {
2596
2604
  };
2597
2605
  };
2598
2606
  const buildTableCellsForGeometry = (board, rows, columns, shape) => {
2599
- const memorizedLatest = getMemorizedLatestByPointer(shape);
2600
2607
  const cellCount = rows.length * columns.length;
2601
2608
  const defaultTexts = getDefaultGeometryProperty(shape)?.texts || [];
2602
- const textHeights = defaultTexts.map((textItem) => {
2603
- return getTextShapeProperty(board, textItem.text || getDefaultGeometryText(board), memorizedLatest.textProperties['font-size'])
2604
- .height;
2605
- });
2606
2609
  return new Array(cellCount).fill('').map((item, index) => {
2607
2610
  const rowIndex = Math.floor(index / columns.length);
2608
2611
  const columnIndex = index % columns.length;
@@ -2610,7 +2613,6 @@ const buildTableCellsForGeometry = (board, rows, columns, shape) => {
2610
2613
  id: idCreator(),
2611
2614
  rowId: rows[rowIndex].id,
2612
2615
  columnId: columns[columnIndex].id,
2613
- textHeight: textHeights[index],
2614
2616
  text: {
2615
2617
  children: [
2616
2618
  {
@@ -2634,23 +2636,19 @@ const createGeometryElement = (shape, points, text, options = {}, textProperties
2634
2636
  const createGeometryElementWithText = (shape, points, text, options = {}, textProperties = {}) => {
2635
2637
  let textOptions = {};
2636
2638
  let alignment = Alignment.center;
2637
- let textHeight = DefaultTextProperty.height;
2638
2639
  if (shape === BasicShapes.text) {
2639
2640
  textOptions = { autoSize: true };
2640
2641
  alignment = undefined;
2641
2642
  }
2642
2643
  textProperties = { ...textProperties };
2643
2644
  textProperties?.align && (alignment = textProperties?.align);
2644
- textProperties?.textHeight && (textHeight = textProperties?.textHeight);
2645
2645
  delete textProperties?.align;
2646
- delete textProperties?.textHeight;
2647
2646
  return {
2648
2647
  id: idCreator(),
2649
2648
  type: 'geometry',
2650
2649
  shape,
2651
2650
  angle: 0,
2652
2651
  opacity: 1,
2653
- textHeight,
2654
2652
  text: buildText(text, alignment, textProperties),
2655
2653
  points,
2656
2654
  ...textOptions,
@@ -2743,17 +2741,14 @@ const getDefaultTextPoints = (board, centerPoint, fontSize) => {
2743
2741
  const property = getTextShapeProperty(board, DefaultTextProperty.text, fontSize);
2744
2742
  return RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(centerPoint, property.width, property.height));
2745
2743
  };
2746
- const createTextElement = (board, points, text, textHeight) => {
2744
+ const createTextElement = (board, points, text) => {
2747
2745
  const memorizedLatest = getMemorizedLatestByPointer(BasicShapes.text);
2748
- textHeight = textHeight ? textHeight : RectangleClient.getRectangleByPoints(points).height;
2749
2746
  return createGeometryElement(BasicShapes.text, points, text, memorizedLatest.geometryProperties, {
2750
- ...memorizedLatest.textProperties,
2751
- textHeight
2747
+ ...memorizedLatest.textProperties
2752
2748
  });
2753
2749
  };
2754
2750
  const createDefaultGeometry = (board, points, shape) => {
2755
2751
  const memorizedLatest = getMemorizedLatestByPointer(shape);
2756
- const textHeight = getTextShapeProperty(board, DefaultTextProperty.text, memorizedLatest.textProperties['font-size']).height;
2757
2752
  if (PlaitDrawElement.isUMLClassOrInterface({ shape })) {
2758
2753
  return createUMLClassOrInterfaceGeometryElement(board, shape, points);
2759
2754
  }
@@ -2767,7 +2762,7 @@ const createDefaultGeometry = (board, points, shape) => {
2767
2762
  return createGeometryElement(shape, points, '', {
2768
2763
  strokeWidth: DefaultBasicShapeProperty.strokeWidth,
2769
2764
  ...memorizedLatest.geometryProperties
2770
- }, { ...memorizedLatest.textProperties, textHeight });
2765
+ }, { ...memorizedLatest.textProperties });
2771
2766
  }
2772
2767
  };
2773
2768
  const editText = (board, element, text) => {
@@ -2945,10 +2940,10 @@ const insertText = (board, point, text) => {
2945
2940
  const newElement = createTextElement(board, points, text);
2946
2941
  insertElement(board, newElement);
2947
2942
  };
2948
- const resizeGeometry = (board, points, textHeight, path) => {
2943
+ const resizeGeometry = (board, points, path) => {
2949
2944
  const normalizePoints = normalizeShapePoints(points);
2950
2945
  const element = PlaitNode.get(board, path);
2951
- const newProperties = { points: normalizePoints, textHeight };
2946
+ const newProperties = { points: normalizePoints, text: { ...element.text } };
2952
2947
  if (PlaitDrawElement.isText(element) && element.autoSize) {
2953
2948
  newProperties.autoSize = false;
2954
2949
  }
@@ -2957,7 +2952,7 @@ const resizeGeometry = (board, points, textHeight, path) => {
2957
2952
  const switchGeometryShape = (board, shape) => {
2958
2953
  const selectedElements = getSelectedElements(board);
2959
2954
  const refs = [];
2960
- selectedElements.forEach(item => {
2955
+ selectedElements.forEach((item) => {
2961
2956
  if (PlaitDrawElement.isGeometry(item) && !PlaitDrawElement.isText(item)) {
2962
2957
  const path = PlaitBoard.findPath(board, item);
2963
2958
  Transforms.setNode(board, { shape }, path);
@@ -2965,15 +2960,15 @@ const switchGeometryShape = (board, shape) => {
2965
2960
  }
2966
2961
  });
2967
2962
  if (refs.length) {
2968
- refs.forEach(ref => {
2963
+ refs.forEach((ref) => {
2969
2964
  DrawTransforms.resizeArrowLine(board, ref.property, ref.path);
2970
2965
  });
2971
2966
  }
2972
2967
  };
2973
2968
 
2974
- const normalizePoints = (board, element, width, textHeight) => {
2969
+ const normalizePoints = (board, element, width, height) => {
2975
2970
  let points = element.points;
2976
- let autoSize = element.autoSize;
2971
+ let autoSize = PlaitDrawElement.isText(element) ? element.autoSize : false;
2977
2972
  const defaultSpace = ShapeDefaultSpace.rectangleAndText;
2978
2973
  if (autoSize) {
2979
2974
  const newWidth = width < MIN_TEXT_WIDTH ? MIN_TEXT_WIDTH : width;
@@ -2981,7 +2976,7 @@ const normalizePoints = (board, element, width, textHeight) => {
2981
2976
  if (AlignEditor.isActive(editor, Alignment.right)) {
2982
2977
  points = [
2983
2978
  [points[1][0] - (newWidth + defaultSpace * 2), points[0][1]],
2984
- [points[1][0], points[0][1] + textHeight]
2979
+ [points[1][0], points[0][1] + height]
2985
2980
  ];
2986
2981
  }
2987
2982
  else if (AlignEditor.isActive(editor, Alignment.center)) {
@@ -2989,11 +2984,11 @@ const normalizePoints = (board, element, width, textHeight) => {
2989
2984
  const offset = (newWidth - oldWidth) / 2;
2990
2985
  points = [
2991
2986
  [points[0][0] - offset - defaultSpace, points[0][1]],
2992
- [points[1][0] + offset + defaultSpace, points[0][1] + textHeight]
2987
+ [points[1][0] + offset + defaultSpace, points[0][1] + height]
2993
2988
  ];
2994
2989
  }
2995
2990
  else {
2996
- points = [points[0], [points[0][0] + newWidth + defaultSpace * 2, points[0][1] + textHeight]];
2991
+ points = [points[0], [points[0][0] + newWidth + defaultSpace * 2, points[0][1] + height]];
2997
2992
  }
2998
2993
  if (hasValidAngle(element)) {
2999
2994
  points = resetPointsAfterResize(RectangleClient.getRectangleByPoints(element.points), RectangleClient.getRectangleByPoints(points), RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(element.points)), RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(points)), element.angle);
@@ -3001,27 +2996,22 @@ const normalizePoints = (board, element, width, textHeight) => {
3001
2996
  }
3002
2997
  return { points };
3003
2998
  };
3004
- const setText = (board, element, text, width, textHeight) => {
2999
+ const setText = (board, element, text, width, height) => {
3005
3000
  const newElement = {
3006
3001
  text,
3007
- textHeight,
3008
- ...normalizePoints(board, element, width, textHeight)
3002
+ ...normalizePoints(board, element, width, height)
3009
3003
  };
3010
- const path = board.children.findIndex(child => child === element);
3004
+ const path = board.children.findIndex((child) => child === element);
3011
3005
  Transforms.setNode(board, newElement, [path]);
3012
3006
  };
3013
- const setTextSize = (board, element, textWidth, textHeight) => {
3014
- if (element.autoSize) {
3007
+ const setTextSize = (board, element, width, height) => {
3008
+ const isAutoSize = PlaitDrawElement.isText(element) ? element.autoSize : false;
3009
+ if (isAutoSize) {
3015
3010
  const newElement = {
3016
- textHeight,
3017
- ...normalizePoints(board, element, textWidth, textHeight)
3011
+ ...normalizePoints(board, element, width, height)
3018
3012
  };
3019
- const isPointsEqual = Point.isEquals(element.points[0], newElement.points[0]) && Point.isEquals(element.points[1], newElement.points[1]);
3020
- const isTextHeightEqual = Math.round(textHeight) === Math.round(element.textHeight);
3021
- if (!isPointsEqual || !isTextHeightEqual) {
3022
- const path = board.children.findIndex(child => child === element);
3023
- Transforms.setNode(board, newElement, [path]);
3024
- }
3013
+ const path = board.children.findIndex((child) => child === element);
3014
+ Transforms.setNode(board, newElement, [path]);
3025
3015
  }
3026
3016
  };
3027
3017
 
@@ -3128,7 +3118,7 @@ function buildSwimlaneTable(element) {
3128
3118
  rowspan: element.rows.length
3129
3119
  };
3130
3120
  }
3131
- if (item.text && item.textHeight && !item.text.direction) {
3121
+ if (item.text && !item.text.direction) {
3132
3122
  item = {
3133
3123
  ...item,
3134
3124
  text: {
@@ -3385,8 +3375,7 @@ const createNewSwimlaneCells = (swimlane, newId, type) => {
3385
3375
  children: [{ text: swimlane.header ? 'Lane' : 'New Swimlane' }],
3386
3376
  align: Alignment.center,
3387
3377
  direction: type === 'row' ? undefined : 'vertical'
3388
- },
3389
- textHeight: 20
3378
+ }
3390
3379
  };
3391
3380
  return cells;
3392
3381
  };
@@ -3417,7 +3406,7 @@ const setDrawTexts = (board, element, text) => {
3417
3406
  const setTableText = (board, path, cellId, text, textHeight) => {
3418
3407
  const table = PlaitNode.get(board, path);
3419
3408
  const cell = getCellWithPoints(board, table, cellId);
3420
- const cellIndex = table.cells.findIndex(item => item.id === cell.id);
3409
+ const cellIndex = table.cells.findIndex((item) => item.id === cell.id);
3421
3410
  let rows = [...table.rows];
3422
3411
  let columns = [...table.columns];
3423
3412
  let cells = [...table.cells];
@@ -3425,7 +3414,7 @@ const setTableText = (board, path, cellId, text, textHeight) => {
3425
3414
  const { width: cellWidth, height: cellHeight } = RectangleClient.getRectangleByPoints(cell.points);
3426
3415
  const defaultSpace = ShapeDefaultSpace.rectangleAndText;
3427
3416
  if (PlaitTableElement.isVerticalText(cell)) {
3428
- const columnIdx = table.columns.findIndex(column => column.id === cell.columnId);
3417
+ const columnIdx = table.columns.findIndex((column) => column.id === cell.columnId);
3429
3418
  if (textHeight > cellWidth) {
3430
3419
  const newColumnWidth = textHeight + defaultSpace * 2;
3431
3420
  const offset = newColumnWidth - cellWidth;
@@ -3435,9 +3424,9 @@ const setTableText = (board, path, cellId, text, textHeight) => {
3435
3424
  }
3436
3425
  }
3437
3426
  else {
3438
- const rowIdx = table.rows.findIndex(row => row.id === cell.rowId);
3427
+ const rowIdx = table.rows.findIndex((row) => row.id === cell.rowId);
3439
3428
  const tableRow = table.rows[rowIdx];
3440
- const compareHeight = tableRow.height ?? Math.max(cellHeight, cell.textHeight || 0);
3429
+ const compareHeight = tableRow.height ?? Math.max(cellHeight, 0);
3441
3430
  if (textHeight > compareHeight) {
3442
3431
  const newRowHeight = textHeight + defaultSpace * 2;
3443
3432
  const offset = newRowHeight - compareHeight;
@@ -3448,7 +3437,6 @@ const setTableText = (board, path, cellId, text, textHeight) => {
3448
3437
  }
3449
3438
  cells[cellIndex] = {
3450
3439
  ...cells[cellIndex],
3451
- textHeight: textHeight,
3452
3440
  text
3453
3441
  };
3454
3442
  Transforms.setNode(board, { rows, columns, cells, points }, path);
@@ -3467,7 +3455,7 @@ const setTableFill = (board, element, fill, path) => {
3467
3455
  }
3468
3456
  else {
3469
3457
  newCells = element.cells.map(cell => {
3470
- if (cell.text && cell.textHeight) {
3458
+ if (cell.text) {
3471
3459
  return getNewCell(cell, fill);
3472
3460
  }
3473
3461
  return cell;
@@ -3691,14 +3679,7 @@ function withDrawResize(board) {
3691
3679
  }
3692
3680
  }
3693
3681
  if (PlaitDrawElement.isGeometry(target)) {
3694
- if (PlaitDrawElement.isGeometry(target) && isGeometryIncludeText(target)) {
3695
- const { height: textHeight } = getFirstTextManage(target).getSize();
3696
- DrawTransforms.resizeGeometry(board, points, textHeight, path);
3697
- }
3698
- else {
3699
- points = normalizeShapePoints(points);
3700
- Transforms.setNode(board, { points }, path);
3701
- }
3682
+ DrawTransforms.resizeGeometry(board, points, path);
3702
3683
  }
3703
3684
  else if (PlaitDrawElement.isLine(target) ||
3704
3685
  PlaitDrawElement.isCustomGeometryElement(board, target) ||
@@ -4105,16 +4086,17 @@ const CommentEngine = {
4105
4086
  getConnectorPoints(rectangle) {
4106
4087
  return RectangleClient.getEdgeCenterPoints(rectangle);
4107
4088
  },
4108
- getTextRectangle(element) {
4089
+ getTextRectangle: (board, element) => {
4109
4090
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
4110
4091
  const strokeWidth = getStrokeWidthByElement(element);
4111
- const height = element.textHeight;
4112
4092
  const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
4093
+ const text = element.text;
4094
+ const textSize = getTextSize(board, text, width);
4113
4095
  return {
4114
- height,
4096
+ height: textSize.height,
4115
4097
  width: width > 0 ? width : 0,
4116
4098
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
4117
- y: elementRectangle.y + (elementRectangle.height * heightRatio$1 - height) / 2
4099
+ y: elementRectangle.y + (elementRectangle.height * heightRatio$1 - textSize.height) / 2
4118
4100
  };
4119
4101
  }
4120
4102
  };
@@ -4205,8 +4187,8 @@ const CrossEngine = createPolygonEngine({
4205
4187
  getConnectorPoints(rectangle) {
4206
4188
  return RectangleClient.getEdgeCenterPoints(rectangle);
4207
4189
  },
4208
- getTextRectangle(element) {
4209
- const rectangle = getTextRectangle(element);
4190
+ getTextRectangle: (board, element) => {
4191
+ const rectangle = getTextRectangle$1(board, element);
4210
4192
  const width = rectangle.width;
4211
4193
  rectangle.width = rectangle.width / 2;
4212
4194
  rectangle.x += width / 4;
@@ -4219,8 +4201,8 @@ const DiamondEngine = createPolygonEngine({
4219
4201
  getConnectorPoints(rectangle) {
4220
4202
  return RectangleClient.getEdgeCenterPoints(rectangle);
4221
4203
  },
4222
- getTextRectangle(element) {
4223
- const rectangle = getTextRectangle(element);
4204
+ getTextRectangle: (board, element) => {
4205
+ const rectangle = getTextRectangle$1(board, element);
4224
4206
  rectangle.width = rectangle.width / 2;
4225
4207
  rectangle.x += rectangle.width / 2;
4226
4208
  return rectangle;
@@ -4260,8 +4242,8 @@ function createEllipseEngine(createOptions) {
4260
4242
  getConnectorPoints(rectangle) {
4261
4243
  return RectangleClient.getEdgeCenterPoints(rectangle);
4262
4244
  },
4263
- getTextRectangle(element) {
4264
- const rectangle = getTextRectangle(element);
4245
+ getTextRectangle: (board, element) => {
4246
+ const rectangle = getTextRectangle$1(board, element);
4265
4247
  const width = rectangle.width;
4266
4248
  rectangle.width = (rectangle.width * 3) / 4;
4267
4249
  rectangle.x += width / 8;
@@ -4293,8 +4275,8 @@ const HexagonEngine = createPolygonEngine({
4293
4275
  getConnectorPoints(rectangle) {
4294
4276
  return RectangleClient.getEdgeCenterPoints(rectangle);
4295
4277
  },
4296
- getTextRectangle(element) {
4297
- const rectangle = getTextRectangle(element);
4278
+ getTextRectangle: (board, element) => {
4279
+ const rectangle = getTextRectangle$1(board, element);
4298
4280
  const width = rectangle.width;
4299
4281
  rectangle.width = (rectangle.width * 3) / 4;
4300
4282
  rectangle.x += width / 8;
@@ -4321,8 +4303,8 @@ const LeftArrowEngine = createPolygonEngine({
4321
4303
  [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2]
4322
4304
  ];
4323
4305
  },
4324
- getTextRectangle(element) {
4325
- const rectangle = getTextRectangle(element);
4306
+ getTextRectangle: (board, element) => {
4307
+ const rectangle = getTextRectangle$1(board, element);
4326
4308
  const width = rectangle.width;
4327
4309
  rectangle.width = rectangle.width * (1 - 0.32);
4328
4310
  rectangle.x += width * 0.32;
@@ -4347,8 +4329,8 @@ const OctagonEngine = createPolygonEngine({
4347
4329
  getConnectorPoints(rectangle) {
4348
4330
  return RectangleClient.getEdgeCenterPoints(rectangle);
4349
4331
  },
4350
- getTextRectangle(element) {
4351
- const rectangle = getTextRectangle(element);
4332
+ getTextRectangle: (board, element) => {
4333
+ const rectangle = getTextRectangle$1(board, element);
4352
4334
  const width = rectangle.width;
4353
4335
  rectangle.width = (rectangle.width * 3) / 4;
4354
4336
  rectangle.x += width / 8;
@@ -4370,8 +4352,8 @@ const ParallelogramEngine = createPolygonEngine({
4370
4352
  const cornerPoints = getParallelogramPoints(rectangle);
4371
4353
  return getCenterPointsOnPolygon$1(cornerPoints);
4372
4354
  },
4373
- getTextRectangle(element) {
4374
- const rectangle = getTextRectangle(element);
4355
+ getTextRectangle: (board, element) => {
4356
+ const rectangle = getTextRectangle$1(board, element);
4375
4357
  const width = rectangle.width;
4376
4358
  rectangle.width = rectangle.width / 2;
4377
4359
  rectangle.x += width / 4;
@@ -4390,17 +4372,18 @@ const getPentagonPoints = (rectangle) => {
4390
4372
  };
4391
4373
  const PentagonEngine = createPolygonEngine({
4392
4374
  getPolygonPoints: getPentagonPoints,
4393
- getTextRectangle(element) {
4375
+ getTextRectangle: (board, element) => {
4394
4376
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
4395
4377
  const strokeWidth = getStrokeWidthByElement(element);
4396
- const height = element.textHeight;
4397
4378
  const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
4398
4379
  const width = (originWidth * 3) / 5;
4380
+ const text = element.text;
4381
+ const textSize = getTextSize(board, text, width);
4399
4382
  return {
4400
- height,
4383
+ height: textSize.height,
4401
4384
  width: width > 0 ? width : 0,
4402
4385
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + originWidth / 5,
4403
- y: elementRectangle.y + elementRectangle.height / 5 + ((elementRectangle.height * 4) / 5 - height) / 2
4386
+ y: elementRectangle.y + elementRectangle.height / 5 + ((elementRectangle.height * 4) / 5 - textSize.height) / 2
4404
4387
  };
4405
4388
  }
4406
4389
  });
@@ -4420,9 +4403,9 @@ const PentagonArrowEngine = createPolygonEngine({
4420
4403
  getConnectorPoints(rectangle) {
4421
4404
  return RectangleClient.getEdgeCenterPoints(rectangle);
4422
4405
  },
4423
- getTextRectangle(element) {
4406
+ getTextRectangle: (board, element) => {
4424
4407
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
4425
- const rectangle = getTextRectangle(element);
4408
+ const rectangle = getTextRectangle$1(board, element);
4426
4409
  const wider = elementRectangle.width > elementRectangle.height / 2 + 20;
4427
4410
  rectangle.width = wider ? elementRectangle.width - elementRectangle.height / 2 : rectangle.width;
4428
4411
  return rectangle;
@@ -4442,9 +4425,9 @@ const getProcessArrowPoints = (rectangle) => {
4442
4425
  };
4443
4426
  const ProcessArrowEngine = createPolygonEngine({
4444
4427
  getPolygonPoints: getProcessArrowPoints,
4445
- getTextRectangle(element) {
4428
+ getTextRectangle: (board, element) => {
4446
4429
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
4447
- const rectangle = getTextRectangle(element);
4430
+ const rectangle = getTextRectangle$1(board, element);
4448
4431
  const wider = elementRectangle.width > elementRectangle.height + 20;
4449
4432
  rectangle.width = wider ? elementRectangle.width - elementRectangle.height : rectangle.width;
4450
4433
  rectangle.x = wider ? elementRectangle.x + elementRectangle.height / 2 : rectangle.x;
@@ -4471,8 +4454,8 @@ const RightArrowEngine = createPolygonEngine({
4471
4454
  [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2]
4472
4455
  ];
4473
4456
  },
4474
- getTextRectangle(element) {
4475
- const rectangle = getTextRectangle(element);
4457
+ getTextRectangle: (board, element) => {
4458
+ const rectangle = getTextRectangle$1(board, element);
4476
4459
  rectangle.width = rectangle.width * 0.68;
4477
4460
  return rectangle;
4478
4461
  }
@@ -4609,16 +4592,17 @@ const RoundCommentEngine = {
4609
4592
  [rectangle.x, rectangle.y + rectangle.height / 2]
4610
4593
  ];
4611
4594
  },
4612
- getTextRectangle(element) {
4595
+ getTextRectangle: (board, element) => {
4613
4596
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
4614
4597
  const strokeWidth = getStrokeWidthByElement(element);
4615
- const height = element.textHeight;
4616
4598
  const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
4599
+ const text = element.text;
4600
+ const textSize = getTextSize(board, text, width);
4617
4601
  return {
4618
- height,
4602
+ height: textSize.height,
4619
4603
  width: width > 0 ? width : 0,
4620
4604
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
4621
- y: elementRectangle.y + (elementRectangle.height * heightRatio - height) / 2
4605
+ y: elementRectangle.y + (elementRectangle.height * heightRatio - textSize.height) / 2
4622
4606
  };
4623
4607
  }
4624
4608
  };
@@ -4648,8 +4632,8 @@ const TrapezoidEngine = createPolygonEngine({
4648
4632
  const points = getTrapezoidPoints(rectangle);
4649
4633
  return getCenterPointsOnPolygon$1(points);
4650
4634
  },
4651
- getTextRectangle(element) {
4652
- const rectangle = getTextRectangle(element);
4635
+ getTextRectangle(board, element) {
4636
+ const rectangle = getTextRectangle$1(board, element);
4653
4637
  const width = rectangle.width;
4654
4638
  rectangle.width = (rectangle.width * 3) / 4;
4655
4639
  rectangle.x += width / 8;
@@ -4671,17 +4655,18 @@ const TriangleEngine = createPolygonEngine({
4671
4655
  const lineCenterPoints = getCenterPointsOnPolygon$1(cornerPoints);
4672
4656
  return [...lineCenterPoints, ...cornerPoints];
4673
4657
  },
4674
- getTextRectangle(element) {
4658
+ getTextRectangle: (board, element) => {
4675
4659
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
4676
4660
  const strokeWidth = getStrokeWidthByElement(element);
4677
- const height = element.textHeight;
4678
4661
  const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
4679
4662
  const width = (originWidth * 2) / 3;
4663
+ const text = element.text;
4664
+ const textSize = getTextSize(board, text, width);
4680
4665
  return {
4681
- height,
4666
+ height: textSize.height,
4682
4667
  width: width > 0 ? width : 0,
4683
4668
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + originWidth / 6,
4684
- y: elementRectangle.y + (elementRectangle.height * 3) / 5 + ((elementRectangle.height * 2) / 5 - height) / 2
4669
+ y: elementRectangle.y + (elementRectangle.height * 3) / 5 + ((elementRectangle.height * 2) / 5 - textSize.height) / 2
4685
4670
  };
4686
4671
  }
4687
4672
  });
@@ -4730,17 +4715,18 @@ const StarEngine = createPolygonEngine({
4730
4715
  const points = getStarPoints(rectangle);
4731
4716
  return [points[1], points[3], points[5], points[7], points[9]];
4732
4717
  },
4733
- getTextRectangle(element) {
4718
+ getTextRectangle: (board, element) => {
4734
4719
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
4735
4720
  const strokeWidth = getStrokeWidthByElement(element);
4736
- const height = element.textHeight;
4737
4721
  const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
4738
4722
  const width = originWidth / 2;
4723
+ const text = element.text;
4724
+ const textSize = getTextSize(board, text, width);
4739
4725
  return {
4740
- height,
4726
+ height: textSize.height,
4741
4727
  width: width > 0 ? width : 0,
4742
4728
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + originWidth / 4,
4743
- y: elementRectangle.y + (elementRectangle.height * 1) / 6 + ((elementRectangle.height * 4) / 5 - height) / 2
4729
+ y: elementRectangle.y + (elementRectangle.height * 1) / 6 + ((elementRectangle.height * 4) / 5 - textSize.height) / 2
4744
4730
  };
4745
4731
  }
4746
4732
  });
@@ -4826,16 +4812,17 @@ const ManualInputEngine = createPolygonEngine({
4826
4812
  const cornerPoints = getManualInputPoints(rectangle);
4827
4813
  return getCenterPointsOnPolygon$1(cornerPoints);
4828
4814
  },
4829
- getTextRectangle: (element) => {
4815
+ getTextRectangle: (board, element) => {
4830
4816
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
4831
4817
  const strokeWidth = getStrokeWidthByElement(element);
4832
- const height = element.textHeight;
4833
4818
  const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
4819
+ const text = element.text;
4820
+ const textSize = getTextSize(board, text, width);
4834
4821
  return {
4835
- height,
4822
+ height: textSize.height,
4836
4823
  width: width > 0 ? width : 0,
4837
4824
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
4838
- y: elementRectangle.y + elementRectangle.height / 4 + ((elementRectangle.height * 3) / 4 - height) / 2
4825
+ y: elementRectangle.y + elementRectangle.height / 4 + ((elementRectangle.height * 3) / 4 - textSize.height) / 2
4839
4826
  };
4840
4827
  }
4841
4828
  });
@@ -4855,8 +4842,8 @@ const PreparationEngine = createPolygonEngine({
4855
4842
  getConnectorPoints: (rectangle) => {
4856
4843
  return RectangleClient.getEdgeCenterPoints(rectangle);
4857
4844
  },
4858
- getTextRectangle(element) {
4859
- const rectangle = getTextRectangle(element);
4845
+ getTextRectangle(board, element) {
4846
+ const rectangle = getTextRectangle$1(board, element);
4860
4847
  const width = rectangle.width;
4861
4848
  rectangle.width = (rectangle.width * 2) / 3;
4862
4849
  rectangle.x += width / 6;
@@ -4878,8 +4865,8 @@ const ManualLoopEngine = createPolygonEngine({
4878
4865
  const cornerPoints = getManualLoopPoints(rectangle);
4879
4866
  return getCenterPointsOnPolygon$1(cornerPoints);
4880
4867
  },
4881
- getTextRectangle(element) {
4882
- const rectangle = getTextRectangle(element);
4868
+ getTextRectangle: (board, element) => {
4869
+ const rectangle = getTextRectangle$1(board, element);
4883
4870
  const width = rectangle.width;
4884
4871
  rectangle.width = (rectangle.width * 3) / 4;
4885
4872
  rectangle.x += width / 8;
@@ -4901,17 +4888,18 @@ const MergeEngine = createPolygonEngine({
4901
4888
  const lineCenterPoints = getCenterPointsOnPolygon$1(cornerPoints);
4902
4889
  return [...lineCenterPoints, ...cornerPoints];
4903
4890
  },
4904
- getTextRectangle(element) {
4891
+ getTextRectangle: (board, element) => {
4905
4892
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
4906
4893
  const strokeWidth = getStrokeWidthByElement(element);
4907
- const height = element.textHeight;
4908
4894
  const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
4909
4895
  const width = (originWidth * 2) / 3;
4896
+ const text = element.text;
4897
+ const textSize = getTextSize(board, text, width);
4910
4898
  return {
4911
- height,
4899
+ height: textSize.height,
4912
4900
  width: width > 0 ? width : 0,
4913
4901
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + originWidth / 6,
4914
- y: elementRectangle.y + ((elementRectangle.height * 2) / 3 - height) / 2
4902
+ y: elementRectangle.y + ((elementRectangle.height * 2) / 3 - textSize.height) / 2
4915
4903
  };
4916
4904
  }
4917
4905
  });
@@ -5025,8 +5013,8 @@ const StoredDataEngine = {
5025
5013
  [rectangle.x, rectangle.y + rectangle.height / 2]
5026
5014
  ];
5027
5015
  },
5028
- getTextRectangle(element) {
5029
- const rectangle = getTextRectangle(element);
5016
+ getTextRectangle(board, element) {
5017
+ const rectangle = getTextRectangle$1(board, element);
5030
5018
  const width = rectangle.width;
5031
5019
  rectangle.width = (rectangle.width * 3) / 4;
5032
5020
  rectangle.x += width / 8;
@@ -5062,16 +5050,17 @@ const PredefinedProcessEngine = {
5062
5050
  getConnectorPoints(rectangle) {
5063
5051
  return RectangleClient.getEdgeCenterPoints(rectangle);
5064
5052
  },
5065
- getTextRectangle: (element) => {
5053
+ getTextRectangle: (board, element) => {
5066
5054
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
5067
5055
  const strokeWidth = getStrokeWidthByElement(element);
5068
- const height = element.textHeight;
5069
5056
  const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2 - elementRectangle.width * 0.06 * 2;
5057
+ const text = element.text;
5058
+ const textSize = getTextSize(board, text, width);
5070
5059
  return {
5071
- height,
5060
+ height: textSize.height,
5072
5061
  width: width > 0 ? width : 0,
5073
5062
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + elementRectangle.width * 0.06,
5074
- y: elementRectangle.y + (elementRectangle.height - height) / 2
5063
+ y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2
5075
5064
  };
5076
5065
  }
5077
5066
  };
@@ -5090,16 +5079,17 @@ const OffPageEngine = createPolygonEngine({
5090
5079
  getConnectorPoints: (rectangle) => {
5091
5080
  return RectangleClient.getEdgeCenterPoints(rectangle);
5092
5081
  },
5093
- getTextRectangle: (element) => {
5082
+ getTextRectangle: (board, element) => {
5094
5083
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
5095
5084
  const strokeWidth = getStrokeWidthByElement(element);
5096
- const height = element.textHeight;
5097
5085
  const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
5086
+ const text = element.text;
5087
+ const textSize = getTextSize(board, text, width);
5098
5088
  return {
5099
5089
  width: width > 0 ? width : 0,
5100
- height: height,
5090
+ height: textSize.height,
5101
5091
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
5102
- y: elementRectangle.y + (elementRectangle.height - elementRectangle.height / 2 - height) / 2
5092
+ y: elementRectangle.y + (elementRectangle.height - elementRectangle.height / 2 - textSize.height) / 2
5103
5093
  };
5104
5094
  }
5105
5095
  });
@@ -5204,16 +5194,17 @@ const DocumentEngine = {
5204
5194
  }
5205
5195
  return getUnitVectorByPointAndPoint(connectionPoint, [rectangle.x + rectangle.width / 4, rectangle.y + rectangle.height]);
5206
5196
  },
5207
- getTextRectangle: (element) => {
5197
+ getTextRectangle: (board, element) => {
5208
5198
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
5209
5199
  const strokeWidth = getStrokeWidthByElement(element);
5210
- const height = element.textHeight;
5211
5200
  const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2 - elementRectangle.width * 0.06 * 2;
5201
+ const text = element.text;
5202
+ const textSize = getTextSize(board, text, width);
5212
5203
  return {
5213
- height,
5204
+ height: textSize.height,
5214
5205
  width: width > 0 ? width : 0,
5215
5206
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + elementRectangle.width * 0.06,
5216
- y: elementRectangle.y + (elementRectangle.height - height) / 2
5207
+ y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2
5217
5208
  };
5218
5209
  }
5219
5210
  };
@@ -5245,39 +5236,14 @@ const getMultiDocumentPoints = (rectangle) => {
5245
5236
  const MultiDocumentEngine = {
5246
5237
  draw(board, rectangle, options) {
5247
5238
  const rs = PlaitBoard.getRoughSVG(board);
5248
- const shape = rs.path(`M${rectangle.x} ${rectangle.y + rectangle.height - rectangle.height / 9} V${rectangle.y + 10} H${rectangle.x +
5249
- 5} V${rectangle.y + 5} H${rectangle.x + 10} V${rectangle.y} H${rectangle.x + rectangle.width} V${rectangle.y +
5250
- rectangle.height -
5251
- rectangle.height / 9 -
5252
- 10 -
5253
- 3} L${rectangle.x + rectangle.width - 5} ${rectangle.y +
5254
- rectangle.height -
5255
- rectangle.height / 9 -
5256
- 10 -
5257
- 3 -
5258
- 4} V${rectangle.y + rectangle.height - rectangle.height / 9 - 5 - 3}
5259
- L${rectangle.x + rectangle.width - 10} ${rectangle.y +
5260
- rectangle.height -
5261
- rectangle.height / 9 -
5262
- 5 -
5263
- 3 -
5264
- 4} V${rectangle.y + rectangle.height - rectangle.height / 9}
5239
+ const shape = rs.path(`M${rectangle.x} ${rectangle.y + rectangle.height - rectangle.height / 9} V${rectangle.y + 10} H${rectangle.x + 5} V${rectangle.y + 5} H${rectangle.x + 10} V${rectangle.y} H${rectangle.x + rectangle.width} V${rectangle.y + rectangle.height - rectangle.height / 9 - 10 - 3} L${rectangle.x + rectangle.width - 5} ${rectangle.y + rectangle.height - rectangle.height / 9 - 10 - 3 - 4} V${rectangle.y + rectangle.height - rectangle.height / 9 - 5 - 3}
5240
+ L${rectangle.x + rectangle.width - 10} ${rectangle.y + rectangle.height - rectangle.height / 9 - 5 - 3 - 4} V${rectangle.y + rectangle.height - rectangle.height / 9}
5265
5241
 
5266
- Q${rectangle.x + rectangle.width - 10 - (rectangle.width - 10) / 4} ${rectangle.y +
5267
- rectangle.height -
5268
- (rectangle.height / 9) * 3}, ${rectangle.x + (rectangle.width - 10) / 2} ${rectangle.y +
5269
- rectangle.height -
5270
- rectangle.height / 9} T${rectangle.x} ${rectangle.y + rectangle.height - rectangle.height / 9}
5242
+ Q${rectangle.x + rectangle.width - 10 - (rectangle.width - 10) / 4} ${rectangle.y + rectangle.height - (rectangle.height / 9) * 3}, ${rectangle.x + (rectangle.width - 10) / 2} ${rectangle.y + rectangle.height - rectangle.height / 9} T${rectangle.x} ${rectangle.y + rectangle.height - rectangle.height / 9}
5271
5243
 
5272
- M${rectangle.x + 5} ${rectangle.y + 10} H${rectangle.x + rectangle.width - 10} V${rectangle.y +
5273
- rectangle.height -
5274
- rectangle.height / 9}
5244
+ M${rectangle.x + 5} ${rectangle.y + 10} H${rectangle.x + rectangle.width - 10} V${rectangle.y + rectangle.height - rectangle.height / 9}
5275
5245
 
5276
- M${rectangle.x + 10} ${rectangle.y + 5} H${rectangle.x + rectangle.width - 5} V${rectangle.y +
5277
- rectangle.height -
5278
- rectangle.height / 9 -
5279
- 10 -
5280
- 3}
5246
+ M${rectangle.x + 10} ${rectangle.y + 5} H${rectangle.x + rectangle.width - 5} V${rectangle.y + rectangle.height - rectangle.height / 9 - 10 - 3}
5281
5247
  `, { ...options, fillStyle: 'solid' });
5282
5248
  setStrokeLinecap(shape, 'round');
5283
5249
  return shape;
@@ -5315,7 +5281,7 @@ const MultiDocumentEngine = {
5315
5281
  let nearestDistance = distanceBetweenPointAndPoint(point[0], point[1], nearestPoint[0], nearestPoint[1]);
5316
5282
  crossingPoints
5317
5283
  .filter((v, index) => index > 0)
5318
- .forEach(crossingPoint => {
5284
+ .forEach((crossingPoint) => {
5319
5285
  let distance = distanceBetweenPointAndPoint(point[0], point[1], crossingPoint[0], crossingPoint[1]);
5320
5286
  if (distance < nearestDistance) {
5321
5287
  nearestDistance = distance;
@@ -5341,16 +5307,17 @@ const MultiDocumentEngine = {
5341
5307
  const factor = getDirectionFactor(direction);
5342
5308
  return [factor.x, factor.y];
5343
5309
  },
5344
- getTextRectangle: (element) => {
5310
+ getTextRectangle: (board, element) => {
5345
5311
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
5346
5312
  const strokeWidth = getStrokeWidthByElement(element);
5347
- const height = element.textHeight;
5348
5313
  const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2 - elementRectangle.width * 0.06 * 2;
5314
+ const text = element.text;
5315
+ const textSize = getTextSize(board, text, width);
5349
5316
  return {
5350
- height,
5317
+ height: textSize.height,
5351
5318
  width: width > 0 ? width - 10 : 0,
5352
5319
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + elementRectangle.width * 0.06,
5353
- y: elementRectangle.y + (elementRectangle.height - height) / 2
5320
+ y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2
5354
5321
  };
5355
5322
  }
5356
5323
  };
@@ -5421,16 +5388,17 @@ const DatabaseEngine = {
5421
5388
  const vector = getVectorFromPointAndSlope(point[0], point[1], slope);
5422
5389
  return vector;
5423
5390
  },
5424
- getTextRectangle: (element) => {
5391
+ getTextRectangle: (board, element) => {
5425
5392
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
5426
5393
  const strokeWidth = getStrokeWidthByElement(element);
5427
- const height = element.textHeight;
5428
5394
  const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
5395
+ const text = element.text;
5396
+ const textSize = getTextSize(board, text, width);
5429
5397
  return {
5430
- height,
5398
+ height: textSize.height,
5431
5399
  width: width > 0 ? width : 0,
5432
5400
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
5433
- y: elementRectangle.y + elementRectangle.height * 0.3 + (elementRectangle.height - elementRectangle.height * 0.45 - height) / 2
5401
+ y: elementRectangle.y + elementRectangle.height * 0.3 + (elementRectangle.height - elementRectangle.height * 0.45 - textSize.height) / 2
5434
5402
  };
5435
5403
  }
5436
5404
  };
@@ -5501,16 +5469,17 @@ const HardDiskEngine = {
5501
5469
  const vector = getVectorFromPointAndSlope(point[0], point[1], slope);
5502
5470
  return vector;
5503
5471
  },
5504
- getTextRectangle: (element) => {
5472
+ getTextRectangle: (board, element) => {
5505
5473
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
5506
5474
  const strokeWidth = getStrokeWidthByElement(element);
5507
- const height = element.textHeight;
5508
5475
  const width = elementRectangle.width - elementRectangle.width * 0.45 - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
5476
+ const text = element.text;
5477
+ const textSize = getTextSize(board, text, width);
5509
5478
  return {
5510
- height,
5479
+ height: textSize.height,
5511
5480
  width: width > 0 ? width : 0,
5512
5481
  x: elementRectangle.x + elementRectangle.width * 0.15 + ShapeDefaultSpace.rectangleAndText + strokeWidth,
5513
- y: elementRectangle.y + (elementRectangle.height - height) / 2
5482
+ y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2
5514
5483
  };
5515
5484
  }
5516
5485
  };
@@ -5543,16 +5512,17 @@ const InternalStorageEngine = {
5543
5512
  getConnectorPoints(rectangle) {
5544
5513
  return RectangleClient.getEdgeCenterPoints(rectangle);
5545
5514
  },
5546
- getTextRectangle: (element) => {
5515
+ getTextRectangle: (board, element) => {
5547
5516
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
5548
5517
  const strokeWidth = getStrokeWidthByElement(element);
5549
- const height = element.textHeight;
5550
5518
  const width = elementRectangle.width - elementRectangle.width * 0.1 - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
5519
+ const text = element.text;
5520
+ const textSize = getTextSize(board, text, width);
5551
5521
  return {
5552
- height,
5522
+ height: textSize.height,
5553
5523
  width: width > 0 ? width : 0,
5554
5524
  x: elementRectangle.x + elementRectangle.width * 0.1 + ShapeDefaultSpace.rectangleAndText + strokeWidth,
5555
- y: elementRectangle.y + elementRectangle.height * 0.1 + (elementRectangle.height - elementRectangle.height * 0.1 - height) / 2
5525
+ y: elementRectangle.y + elementRectangle.height * 0.1 + (elementRectangle.height - elementRectangle.height * 0.1 - textSize.height) / 2
5556
5526
  };
5557
5527
  }
5558
5528
  };
@@ -5623,16 +5593,17 @@ const NoteCurlyLeftEngine = {
5623
5593
  getConnectorPoints(rectangle) {
5624
5594
  return RectangleClient.getEdgeCenterPoints(rectangle);
5625
5595
  },
5626
- getTextRectangle: (element) => {
5596
+ getTextRectangle: (board, element) => {
5627
5597
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
5628
5598
  const strokeWidth = getStrokeWidthByElement(element);
5629
- const height = element.textHeight;
5630
5599
  const width = elementRectangle.width - elementRectangle.width * 0.09 - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
5600
+ const text = element.text;
5601
+ const textSize = getTextSize(board, text, width);
5631
5602
  return {
5632
- height,
5603
+ height: textSize.height,
5633
5604
  width: width > 0 ? width : 0,
5634
5605
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
5635
- y: elementRectangle.y + (elementRectangle.height - height) / 2
5606
+ y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2
5636
5607
  };
5637
5608
  }
5638
5609
  };
@@ -5706,16 +5677,17 @@ const NoteCurlyRightEngine = {
5706
5677
  getConnectorPoints(rectangle) {
5707
5678
  return RectangleClient.getEdgeCenterPoints(rectangle);
5708
5679
  },
5709
- getTextRectangle: (element) => {
5680
+ getTextRectangle: (board, element) => {
5710
5681
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
5711
5682
  const strokeWidth = getStrokeWidthByElement(element);
5712
- const height = element.textHeight;
5713
5683
  const width = elementRectangle.width - elementRectangle.width * 0.09 - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
5684
+ const text = element.text;
5685
+ const textSize = getTextSize(board, text, width);
5714
5686
  return {
5715
- height,
5687
+ height: textSize.height,
5716
5688
  width: width > 0 ? width : 0,
5717
5689
  x: elementRectangle.x + elementRectangle.width * 0.09 + ShapeDefaultSpace.rectangleAndText + strokeWidth,
5718
- y: elementRectangle.y + (elementRectangle.height - height) / 2
5690
+ y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2
5719
5691
  };
5720
5692
  }
5721
5693
  };
@@ -5747,16 +5719,17 @@ const NoteSquareEngine = {
5747
5719
  getConnectorPoints(rectangle) {
5748
5720
  return RectangleClient.getEdgeCenterPoints(rectangle);
5749
5721
  },
5750
- getTextRectangle: (element) => {
5722
+ getTextRectangle: (board, element) => {
5751
5723
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
5752
5724
  const strokeWidth = getStrokeWidthByElement(element);
5753
- const height = element.textHeight;
5754
5725
  const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
5726
+ const text = element.text;
5727
+ const textSize = getTextSize(board, text, width);
5755
5728
  return {
5756
- height,
5729
+ height: textSize.height,
5757
5730
  width: width > 0 ? width : 0,
5758
5731
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
5759
- y: elementRectangle.y + (elementRectangle.height - height) / 2
5732
+ y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2
5760
5733
  };
5761
5734
  }
5762
5735
  };
@@ -5819,16 +5792,17 @@ const DisplayEngine = {
5819
5792
  getConnectorPoints(rectangle) {
5820
5793
  return RectangleClient.getEdgeCenterPoints(rectangle);
5821
5794
  },
5822
- getTextRectangle: (element) => {
5795
+ getTextRectangle: (board, element) => {
5823
5796
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
5824
5797
  const strokeWidth = getStrokeWidthByElement(element);
5825
- const height = element.textHeight;
5826
5798
  const width = elementRectangle.width - strokeWidth * 2 - elementRectangle.width * 0.25;
5799
+ const text = element.text;
5800
+ const textSize = getTextSize(board, text, width);
5827
5801
  return {
5828
5802
  width: width > 0 ? width : 0,
5829
- height: height,
5803
+ height: textSize.height,
5830
5804
  x: elementRectangle.x + strokeWidth + elementRectangle.width * 0.15,
5831
- y: elementRectangle.y + (elementRectangle.height - height) / 2
5805
+ y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2
5832
5806
  };
5833
5807
  }
5834
5808
  };
@@ -5844,7 +5818,7 @@ const TableEngine = {
5844
5818
  const tableTopBorder = drawLine(rs, [x, y], [x + width, y], roughOptions);
5845
5819
  const tableLeftBorder = drawLine(rs, [x, y], [x, y + height], roughOptions);
5846
5820
  g.append(tableTopBorder, tableLeftBorder);
5847
- pointCells.forEach(cell => {
5821
+ pointCells.forEach((cell) => {
5848
5822
  const rectangle = RectangleClient.getRectangleByPoints(cell.points);
5849
5823
  const { x, y, width, height } = rectangle;
5850
5824
  const cellRectangle = drawRectangle(board, {
@@ -5878,16 +5852,16 @@ const TableEngine = {
5878
5852
  getConnectorPoints(rectangle) {
5879
5853
  return RectangleClient.getEdgeCenterPoints(rectangle);
5880
5854
  },
5881
- getTextRectangle(element, options) {
5855
+ getTextRectangle(board, element, options) {
5882
5856
  try {
5883
5857
  if (options && options.id) {
5884
- const cell = getCellWithPoints(options?.board, element, options.id);
5858
+ const cell = getCellWithPoints(board, element, options.id);
5885
5859
  if (cell) {
5886
5860
  if (PlaitTableElement.isVerticalText(cell)) {
5887
- return getVerticalTextRectangle(cell);
5861
+ return getVerticalTextRectangle(board, cell);
5888
5862
  }
5889
5863
  else {
5890
- return getHorizontalTextRectangle(cell);
5864
+ return getHorizontalTextRectangle(board, cell);
5891
5865
  }
5892
5866
  }
5893
5867
  }
@@ -5903,30 +5877,50 @@ const TableEngine = {
5903
5877
  };
5904
5878
  }
5905
5879
  };
5906
- function getVerticalTextRectangle(cell) {
5880
+ function getVerticalTextRectangle(board, cell) {
5907
5881
  const cellRectangle = RectangleClient.getRectangleByPoints(cell.points);
5908
5882
  const strokeWidth = getStrokeWidthByElement(cell);
5909
- const height = cell.textHeight || 0;
5910
5883
  const width = cellRectangle.height - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
5911
- return {
5912
- width: width > 0 ? width : 0,
5913
- height,
5914
- x: cellRectangle.x - width / 2 + cellRectangle.width / 2,
5915
- y: cellRectangle.y + (cellRectangle.height - height) / 2
5916
- };
5884
+ return getTextRectangle(board, cell, width, cellRectangle);
5917
5885
  }
5918
- function getHorizontalTextRectangle(cell) {
5886
+ function getHorizontalTextRectangle(board, cell) {
5919
5887
  const cellRectangle = RectangleClient.getRectangleByPoints(cell.points);
5920
5888
  const strokeWidth = getStrokeWidthByElement(cell);
5921
- const height = cell.textHeight || 0;
5922
5889
  const width = cellRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
5923
- return {
5924
- height,
5925
- width: width > 0 ? width : 0,
5926
- x: cellRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
5927
- y: cellRectangle.y + (cellRectangle.height - height) / 2
5928
- };
5890
+ return getTextRectangle(board, cell, width, cellRectangle);
5891
+ }
5892
+ function getTextRectangle(board, cell, width, cellRectangle) {
5893
+ const text = cell.text;
5894
+ if (text) {
5895
+ const textSize = getTextSize(board, text, width);
5896
+ return {
5897
+ width: width > 0 ? width : 0,
5898
+ height: textSize.height,
5899
+ x: cellRectangle.x - width / 2 + cellRectangle.width / 2,
5900
+ y: cellRectangle.y + (cellRectangle.height - textSize.height) / 2
5901
+ };
5902
+ }
5903
+ else {
5904
+ return {
5905
+ width: 0,
5906
+ height: 0,
5907
+ x: cellRectangle.x,
5908
+ y: cellRectangle.y
5909
+ };
5910
+ }
5929
5911
  }
5912
+ const getCellTextHeight = (board, cell, isVertical = false) => {
5913
+ if (cell.text) {
5914
+ const cellRectangle = RectangleClient.getRectangleByPoints(cell.points);
5915
+ const strokeWidth = getStrokeWidthByElement(cell);
5916
+ let width = cellRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
5917
+ if (isVertical) {
5918
+ width = cellRectangle.height - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
5919
+ }
5920
+ return getTextSize(board, cell.text, width).height;
5921
+ }
5922
+ return 0;
5923
+ };
5930
5924
 
5931
5925
  function generateActorPath(rectangle) {
5932
5926
  const centerX = rectangle.x + rectangle.width / 2;
@@ -6032,12 +6026,13 @@ const ActorEngine = {
6032
6026
  }
6033
6027
  return getUnitVectorByPointAndPoint(connectionPoint, [rectangle.x + rectangle.width / 4, rectangle.y + rectangle.height]);
6034
6028
  },
6035
- getTextRectangle: (element) => {
6029
+ getTextRectangle: (board, element) => {
6036
6030
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
6037
- const height = element.textHeight;
6038
6031
  const width = elementRectangle.width + 40;
6032
+ const text = element.text;
6033
+ const textSize = getTextSize(board, text, width);
6039
6034
  return {
6040
- height,
6035
+ height: textSize.height,
6041
6036
  width: width > 0 ? width : 0,
6042
6037
  x: elementRectangle.x - 20,
6043
6038
  y: elementRectangle.y + elementRectangle.height + 4
@@ -6070,16 +6065,17 @@ const ContainerEngine = {
6070
6065
  getConnectorPoints(rectangle) {
6071
6066
  return RectangleClient.getEdgeCenterPoints(rectangle);
6072
6067
  },
6073
- getTextRectangle(element) {
6068
+ getTextRectangle(board, element) {
6074
6069
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
6075
6070
  const strokeWidth = getStrokeWidthByElement(element);
6076
- const height = element.textHeight;
6077
6071
  const width = 40 - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
6072
+ const text = element.text;
6073
+ const textSize = getTextSize(board, text, width);
6078
6074
  return {
6079
- height,
6075
+ height: textSize.height,
6080
6076
  width: width > 0 ? width : 0,
6081
6077
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
6082
- y: elementRectangle.y + (elementRectangle.height - height) / 2
6078
+ y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2
6083
6079
  };
6084
6080
  }
6085
6081
  };
@@ -6158,26 +6154,28 @@ const PackageEngine = {
6158
6154
  }
6159
6155
  return getUnitVectorByPointAndPoint([rectangle.x + rectangle.width * 0.8, rectangle.y + 25], connectionPoint);
6160
6156
  },
6161
- getTextRectangle(element, options) {
6157
+ getTextRectangle(board, element, options) {
6162
6158
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
6163
6159
  const strokeWidth = getStrokeWidthByElement(element);
6164
- const textHeight = element.texts?.find(item => item.id === options?.id)?.textHeight;
6165
- if (options?.id === GeometryCommonTextKeys.name) {
6160
+ const textInfo = element.texts?.find((item) => item.id === options?.id);
6161
+ if (options?.id === GeometryCommonTextKeys.name && textInfo) {
6166
6162
  const width = elementRectangle.width * 0.7 - ShapeDefaultSpace.rectangleAndText - strokeWidth;
6163
+ const textSize = getTextSize(board, textInfo.text, width);
6167
6164
  return {
6168
- height: textHeight,
6165
+ height: textSize.height,
6169
6166
  width: width > 0 ? width : 0,
6170
6167
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
6171
- y: elementRectangle.y + (25 - textHeight) / 2
6168
+ y: elementRectangle.y + (25 - textSize.height) / 2
6172
6169
  };
6173
6170
  }
6174
- if (options?.id === GeometryCommonTextKeys.content) {
6171
+ if (options?.id === GeometryCommonTextKeys.content && textInfo) {
6175
6172
  const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
6173
+ const textSize = getTextSize(board, textInfo.text, width);
6176
6174
  return {
6177
- height: textHeight,
6175
+ height: textSize.height,
6178
6176
  width: width > 0 ? width : 0,
6179
6177
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
6180
- y: elementRectangle.y + 25 + (elementRectangle.height - 25 - textHeight) / 2
6178
+ y: elementRectangle.y + 25 + (elementRectangle.height - 25 - textSize.height) / 2
6181
6179
  };
6182
6180
  }
6183
6181
  return elementRectangle;
@@ -6218,23 +6216,25 @@ const CombinedFragmentEngine = {
6218
6216
  getConnectorPoints(rectangle) {
6219
6217
  return RectangleClient.getEdgeCenterPoints(rectangle);
6220
6218
  },
6221
- getTextRectangle(element, options) {
6219
+ getTextRectangle(board, element, options) {
6222
6220
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
6223
6221
  const strokeWidth = getStrokeWidthByElement(element);
6224
- const textHeight = element.texts?.find(item => item.id === options?.id)?.textHeight;
6225
- if (options?.id === GeometryCommonTextKeys.name) {
6222
+ const textInfo = element.texts?.find((item) => item.id === options?.id);
6223
+ if (options?.id === GeometryCommonTextKeys.name && textInfo) {
6226
6224
  const width = elementRectangle.width / 3 - 8 - ShapeDefaultSpace.rectangleAndText - strokeWidth;
6225
+ const textSize = getTextSize(board, textInfo.text, width);
6227
6226
  return {
6228
- height: textHeight,
6227
+ height: textSize.height,
6229
6228
  width: width > 0 ? width : 0,
6230
6229
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
6231
- y: elementRectangle.y + (25 - textHeight) / 2
6230
+ y: elementRectangle.y + (25 - textSize.height) / 2
6232
6231
  };
6233
6232
  }
6234
- if (options?.id === GeometryCommonTextKeys.content) {
6233
+ if (options?.id === GeometryCommonTextKeys.content && textInfo) {
6235
6234
  const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
6235
+ const textSize = getTextSize(board, textInfo.text, width);
6236
6236
  return {
6237
- height: textHeight,
6237
+ height: textSize.height,
6238
6238
  width: width > 0 ? width : 0,
6239
6239
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
6240
6240
  y: elementRectangle.y + 25 + ShapeDefaultSpace.rectangleAndText + strokeWidth
@@ -6323,16 +6323,17 @@ const ActiveClassEngine = {
6323
6323
  getConnectorPoints(rectangle) {
6324
6324
  return RectangleClient.getEdgeCenterPoints(rectangle);
6325
6325
  },
6326
- getTextRectangle: (element) => {
6326
+ getTextRectangle: (board, element) => {
6327
6327
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
6328
6328
  const strokeWidth = getStrokeWidthByElement(element);
6329
- const height = element.textHeight;
6330
6329
  const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2 - elementRectangle.width * 0.125 * 2;
6330
+ const text = element.text;
6331
+ const textSize = getTextSize(board, text, width);
6331
6332
  return {
6332
- height,
6333
+ height: textSize.height,
6333
6334
  width: width > 0 ? width : 0,
6334
6335
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + elementRectangle.width * 0.125,
6335
- y: elementRectangle.y + (elementRectangle.height - height) / 2
6336
+ y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2
6336
6337
  };
6337
6338
  }
6338
6339
  };
@@ -6377,16 +6378,17 @@ const NoteEngine = {
6377
6378
  getConnectorPoints(rectangle) {
6378
6379
  return RectangleClient.getEdgeCenterPoints(rectangle);
6379
6380
  },
6380
- getTextRectangle: (element) => {
6381
+ getTextRectangle: (board, element) => {
6381
6382
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
6382
6383
  const strokeWidth = getStrokeWidthByElement(element);
6383
- const height = element.textHeight;
6384
6384
  const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth - 15;
6385
+ const text = element.text;
6386
+ const textSize = getTextSize(board, text, width);
6385
6387
  return {
6386
- height,
6388
+ height: textSize.height,
6387
6389
  width: width > 0 ? width : 0,
6388
6390
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
6389
- y: elementRectangle.y + (elementRectangle.height - height) / 2
6391
+ y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2
6390
6392
  };
6391
6393
  }
6392
6394
  };
@@ -6761,16 +6763,17 @@ const ComponentEngine = {
6761
6763
  [points.mainStart[0], rectangle.y + rectangle.height / 2]
6762
6764
  ];
6763
6765
  },
6764
- getTextRectangle(element) {
6766
+ getTextRectangle(board, element) {
6765
6767
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
6766
6768
  const strokeWidth = getStrokeWidthByElement(element);
6767
- const height = element.textHeight;
6768
6769
  const width = elementRectangle.width - 24 - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
6770
+ const text = element.text;
6771
+ const textSize = getTextSize(board, text, width);
6769
6772
  return {
6770
- height,
6773
+ height: textSize.height,
6771
6774
  width: width > 0 ? width : 0,
6772
6775
  x: elementRectangle.x + 24 + ShapeDefaultSpace.rectangleAndText + strokeWidth,
6773
- y: elementRectangle.y + (elementRectangle.height - height) / 2
6776
+ y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2
6774
6777
  };
6775
6778
  }
6776
6779
  };
@@ -6815,17 +6818,18 @@ const ComponentBoxEngine = {
6815
6818
  getConnectorPoints(rectangle) {
6816
6819
  return RectangleClient.getEdgeCenterPoints(rectangle);
6817
6820
  },
6818
- getTextRectangle(element) {
6821
+ getTextRectangle(board, element) {
6819
6822
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
6820
6823
  const strokeWidth = getStrokeWidthByElement(element);
6821
- const height = element.textHeight;
6822
6824
  const componentWidth = elementRectangle.width - 45 * 2 - 18 > 1 ? 45 : elementRectangle.width * 0.25;
6823
6825
  const width = elementRectangle.width - 18 - componentWidth - ShapeDefaultSpace.rectangleAndText - strokeWidth * 2;
6826
+ const text = element.text;
6827
+ const textSize = getTextSize(board, text, width);
6824
6828
  return {
6825
- height,
6829
+ height: textSize.height,
6826
6830
  width: width > 0 ? width : 0,
6827
6831
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
6828
- y: elementRectangle.y + (elementRectangle.height - height) / 2
6832
+ y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2
6829
6833
  };
6830
6834
  }
6831
6835
  };
@@ -6858,16 +6862,17 @@ const TemplateEngine = {
6858
6862
  getConnectorPoints(rectangle) {
6859
6863
  return RectangleClient.getEdgeCenterPoints(rectangle);
6860
6864
  },
6861
- getTextRectangle(element) {
6865
+ getTextRectangle(board, element) {
6862
6866
  const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
6863
6867
  const strokeWidth = getStrokeWidthByElement(element);
6864
- const height = element.textHeight;
6865
6868
  const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
6869
+ const text = element.text;
6870
+ const textSize = getTextSize(board, text, width);
6866
6871
  return {
6867
- height,
6872
+ height: textSize.height,
6868
6873
  width: width > 0 ? width : 0,
6869
6874
  x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
6870
- y: elementRectangle.y + (elementRectangle.height - height) / 2
6875
+ y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2
6871
6876
  };
6872
6877
  }
6873
6878
  };
@@ -7361,8 +7366,7 @@ class GeometryComponent extends CommonElementFlavour {
7361
7366
  if (isMultipleTextGeometry(element)) {
7362
7367
  DrawTransforms.setDrawTexts(this.board, element, {
7363
7368
  id: text.id,
7364
- text: textManageChangeData.newText,
7365
- textHeight: textManageChangeData.height
7369
+ text: textManageChangeData.newText
7366
7370
  });
7367
7371
  }
7368
7372
  else {
@@ -7383,12 +7387,12 @@ class GeometryComponent extends CommonElementFlavour {
7383
7387
  this.textGenerator = new SingleTextGenerator(this.board, this.element, this.element.text, {
7384
7388
  onChange: onTextChange,
7385
7389
  getMaxWidth: () => {
7386
- let width = getTextRectangle(this.element).width;
7390
+ let width = getTextRectangle$1(this.board, this.element).width;
7387
7391
  const getRectangle = getEngine(this.element.shape).getTextRectangle;
7388
7392
  if (getRectangle) {
7389
- width = getRectangle(this.element).width;
7393
+ width = getRectangle(this.board, this.element).width;
7390
7394
  }
7391
- return this.element?.autoSize ? GeometryThreshold.defaultTextMaxWidth : width;
7395
+ return PlaitDrawElement.isText(this.element) && this.element.autoSize ? GeometryThreshold.defaultTextMaxWidth : width;
7392
7396
  }
7393
7397
  });
7394
7398
  }
@@ -7512,12 +7516,10 @@ class ArrowLineComponent extends CommonElementFlavour {
7512
7516
  const path = PlaitBoard.findPath(this.board, this.element);
7513
7517
  const node = PlaitNode.get(this.board, path);
7514
7518
  const texts = [...node.texts];
7515
- const newWidth = textManageChangeData.width < MIN_TEXT_WIDTH ? MIN_TEXT_WIDTH : textManageChangeData.width;
7519
+ // const newWidth = textManageChangeData.width < MIN_TEXT_WIDTH ? MIN_TEXT_WIDTH : textManageChangeData.width;
7516
7520
  texts.splice(index, 1, {
7517
7521
  text: textManageChangeData.newText ? textManageChangeData.newText : this.element.texts[index].text,
7518
- position: this.element.texts[index].position,
7519
- width: newWidth,
7520
- height: textManageChangeData.height
7522
+ position: this.element.texts[index].position
7521
7523
  });
7522
7524
  DrawTransforms.setArrowLineTexts(this.board, this.element, texts);
7523
7525
  textManageChangeData.operations && memorizeLatestText(this.element, textManageChangeData.operations);
@@ -7633,7 +7635,7 @@ const withDrawHotkey = (board) => {
7633
7635
  const hitElement = getHitElementByPoint(board, point, undefined, false);
7634
7636
  if (hitElement && PlaitDrawElement.isGeometry(hitElement) && isDrawElementIncludeText(hitElement)) {
7635
7637
  if (isMultipleTextGeometry(hitElement)) {
7636
- const hitText = getHitMultipleGeometryText(hitElement, point) ||
7638
+ const hitText = getHitMultipleGeometryText(board, hitElement, point) ||
7637
7639
  hitElement.texts.find((item) => item.id.includes(GeometryCommonTextKeys.content)) ||
7638
7640
  hitElement.texts[0];
7639
7641
  editText(board, hitElement, hitText);
@@ -7683,7 +7685,7 @@ const withGeometryCreateByDrag = (board) => {
7683
7685
  if (!fakeCreateTextRef) {
7684
7686
  const textManage = new TextManage(board, {
7685
7687
  getRectangle: () => {
7686
- return getTextRectangle(temporaryElement);
7688
+ return getTextRectangle$1(board, temporaryElement);
7687
7689
  }
7688
7690
  });
7689
7691
  textManage.draw(temporaryElement.text);
@@ -8167,16 +8169,10 @@ const withArrowLineText = (board) => {
8167
8169
  const defaultLineText = getDefaultLineText(board);
8168
8170
  const textMemory = getMemorizedLatest('arrow-line')?.text || {};
8169
8171
  const textElement = buildText(defaultLineText, undefined, textMemory);
8170
- const { width, height } = measureElement(board, textElement, {
8171
- fontSize: DEFAULT_FONT_SIZE,
8172
- fontFamily: DEFAULT_FONT_FAMILY
8173
- });
8174
8172
  const ratio = getRatioByPoint(points, point);
8175
8173
  texts.push({
8176
8174
  text: textElement,
8177
- position: ratio,
8178
- width,
8179
- height
8175
+ position: ratio
8180
8176
  });
8181
8177
  DrawTransforms.setArrowLineTexts(board, hitTarget, texts);
8182
8178
  setTimeout(() => {
@@ -8679,7 +8675,7 @@ class TableComponent extends CommonElementFlavour {
8679
8675
  const textManage = getTextManageByCell(this.board, item);
8680
8676
  if (textManage) {
8681
8677
  const engine = getEngine(TableSymbols.table);
8682
- const rectangle = engine.getTextRectangle(this.element, { id: item.id, board: this.board });
8678
+ const rectangle = engine.getTextRectangle(this.board, this.element, { id: item.id, board: this.board });
8683
8679
  textManage.g.classList.add('vertical-cell-text');
8684
8680
  setAngleForG(textManage.g, RectangleClient.getCenterPoint(rectangle), degreesToRadians(-90));
8685
8681
  }
@@ -8693,7 +8689,6 @@ class TableComponent extends CommonElementFlavour {
8693
8689
  return {
8694
8690
  id: item.id,
8695
8691
  text: item.text,
8696
- textHeight: item.textHeight,
8697
8692
  board: this.board
8698
8693
  };
8699
8694
  });
@@ -8713,17 +8708,17 @@ class TableComponent extends CommonElementFlavour {
8713
8708
  if (PlaitTableElement.isVerticalText(cell)) {
8714
8709
  const cellRectangle = RectangleClient.getRectangleByPoints(cell.points);
8715
8710
  const strokeWidth = getStrokeWidthByElement(cell);
8716
- const width = cell.textHeight || 0;
8717
- const height = cellRectangle.height - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
8711
+ const width = cellRectangle.height - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
8712
+ const height = getCellTextHeight(this.board, cell, true);
8718
8713
  return {
8719
- width,
8720
- height: height > 0 ? height : 0,
8714
+ width: height,
8715
+ height: width > 0 ? width : 0,
8721
8716
  x: cellRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
8722
- y: cellRectangle.y + (cellRectangle.height - height) / 2
8717
+ y: cellRectangle.y + (cellRectangle.height - width) / 2
8723
8718
  };
8724
8719
  }
8725
8720
  else {
8726
- return getHorizontalTextRectangle(cell);
8721
+ return getHorizontalTextRectangle(this.board, cell);
8727
8722
  }
8728
8723
  }
8729
8724
  });
@@ -8946,9 +8941,9 @@ const withTable = (board) => {
8946
8941
  event.preventDefault();
8947
8942
  if (PlaitDrawElement.isElementByTable(targetElement)) {
8948
8943
  const cells = getSelectedCells(targetElement);
8949
- let cell = targetElement.cells.find((item) => item.text && item.textHeight);
8944
+ let cell = targetElement.cells.find((item) => item.text);
8950
8945
  if (cells?.length) {
8951
- cell = cells.find((item) => item.text && item.textHeight);
8946
+ cell = cells.find((item) => item.text);
8952
8947
  }
8953
8948
  if (cell) {
8954
8949
  editCell(board, cell);
@@ -8965,7 +8960,7 @@ const withTable = (board) => {
8965
8960
  const hitElement = getHitElementByPoint(board, point);
8966
8961
  if (hitElement && PlaitDrawElement.isElementByTable(hitElement)) {
8967
8962
  const hitCell = getHitCell(tableBoard, hitElement, point);
8968
- if (hitCell && hitCell.text && hitCell.textHeight) {
8963
+ if (hitCell && hitCell.text) {
8969
8964
  editCell(board, hitCell);
8970
8965
  return;
8971
8966
  }
@@ -8984,7 +8979,7 @@ const withTable = (board) => {
8984
8979
  const point = toViewBoxPoint(tableBoard, toHostPoint(tableBoard, event.x, event.y));
8985
8980
  const element = getSelectedTableElements(tableBoard)[0];
8986
8981
  const hitCell = getHitCell(tableBoard, element, point);
8987
- if (hitCell && hitCell.text && hitCell.textHeight) {
8982
+ if (hitCell && hitCell.text) {
8988
8983
  setSelectedCells(element, [hitCell]);
8989
8984
  }
8990
8985
  }
@@ -9390,5 +9385,5 @@ const withDraw = (board) => {
9390
9385
  * Generated bundle index. Do not edit.
9391
9386
  */
9392
9387
 
9393
- export { ArrowLineAutoCompleteGenerator, ArrowLineComponent, ArrowLineHandleKey, ArrowLineMarkerType, ArrowLineShape, BOARD_TO_PRE_COMMIT, 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, DefaultLineStyle, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultObjectProperty, DefaultPackageProperty, DefaultPentagonArrowProperty, DefaultPortProperty, DefaultProvidedInterfaceProperty, DefaultRequiredInterfaceProperty, DefaultSwimlaneHorizontalProperty, DefaultSwimlaneHorizontalWithHeaderProperty, DefaultSwimlanePropertyMap, DefaultSwimlaneVerticalProperty, DefaultSwimlaneVerticalWithHeaderProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, DefaultUMLPropertyMap, DrawI18nKey, DrawThemeColors, DrawTransforms, FlowchartSymbols, GEOMETRY_NOT_CLOSED, GEOMETRY_WITHOUT_TEXT, GEOMETRY_WITH_MULTIPLE_TEXT, GeometryCommonTextKeys, GeometryComponent, GeometryShapeGenerator, GeometryThreshold, KEY_TO_TEXT_MANAGE, LINE_ALIGN_TOLERANCE, LINE_AUTO_COMPLETE_DIAMETER, LINE_AUTO_COMPLETE_HOVERED_DIAMETER, LINE_AUTO_COMPLETE_HOVERED_OPACITY, LINE_AUTO_COMPLETE_OPACITY, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LINE_TEXT, LINE_TEXT_SPACE, 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, 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, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultGeometryText, getDefaultSwimlanePoints, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFirstFilledDrawElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitCell, getHitConnection, getHitConnectionFromConnectionPoint, 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, getSolidElements, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlaneCount, getSwimlanePointers, getSwimlaneShapes, getTextKey, getTextManage, getTextManageByCell, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, getVectorLinePointers, getVectorLinePoints, handleArrowLineCreating, hasIllegalElbowPoint, insertClipboardData, insertElement, isCellIncludeText, isClosedCustomGeometry, isClosedDrawElement, isClosedPoints, isDrawElementIncludeText, isDrawElementsIncludeText, isEmptyTextElement, isFilledDrawElement, isGeometryClosed, isGeometryIncludeText, isHitArrowLine, isHitArrowLineText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitPolyLine, isHitVectorLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isRectangleHitRotatedElement, isRectangleHitRotatedPoints, isSelfLoop, isSingleSelectLine, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isSwimlanePointers, isSwimlaneShape, isSwimlaneWithHeader, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, setSelectedCells, setTextManage, traverseDrawShapes, updateCellIds, updateCellIdsByRowOrColumn, updateColumns, updateRowOrColumnIds, updateRows, vectorLineCreating, withArrowLineAutoComplete, withDraw };
9388
+ export { ArrowLineAutoCompleteGenerator, ArrowLineComponent, ArrowLineHandleKey, ArrowLineMarkerType, ArrowLineShape, BOARD_TO_PRE_COMMIT, 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, DefaultLineStyle, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultObjectProperty, DefaultPackageProperty, DefaultPentagonArrowProperty, DefaultPortProperty, DefaultProvidedInterfaceProperty, DefaultRequiredInterfaceProperty, DefaultSwimlaneHorizontalProperty, DefaultSwimlaneHorizontalWithHeaderProperty, DefaultSwimlanePropertyMap, DefaultSwimlaneVerticalProperty, DefaultSwimlaneVerticalWithHeaderProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, DefaultUMLPropertyMap, DrawI18nKey, DrawThemeColors, DrawTransforms, FlowchartSymbols, GEOMETRY_NOT_CLOSED, GEOMETRY_WITHOUT_TEXT, GEOMETRY_WITH_MULTIPLE_TEXT, GeometryCommonTextKeys, GeometryComponent, GeometryShapeGenerator, GeometryThreshold, KEY_TO_TEXT_MANAGE, LINE_ALIGN_TOLERANCE, LINE_AUTO_COMPLETE_DIAMETER, LINE_AUTO_COMPLETE_HOVERED_DIAMETER, LINE_AUTO_COMPLETE_HOVERED_OPACITY, LINE_AUTO_COMPLETE_OPACITY, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LINE_TEXT, LINE_TEXT_SPACE, 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, 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, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultGeometryText, getDefaultSwimlanePoints, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFirstFilledDrawElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitCell, getHitConnection, getHitConnectionFromConnectionPoint, 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, getSolidElements, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlaneCount, getSwimlanePointers, getSwimlaneShapes, getTextKey, getTextManage, getTextManageByCell, getTextRectangle$1 as getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, getVectorLinePointers, getVectorLinePoints, handleArrowLineCreating, hasIllegalElbowPoint, insertClipboardData, insertElement, isCellIncludeText, isClosedCustomGeometry, isClosedDrawElement, isClosedPoints, isDrawElementIncludeText, isDrawElementsIncludeText, isEmptyTextElement, isFilledDrawElement, isGeometryClosed, isGeometryIncludeText, isHitArrowLine, isHitArrowLineText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitPolyLine, isHitVectorLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isRectangleHitRotatedElement, isRectangleHitRotatedPoints, isSelfLoop, isSingleSelectLine, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isSwimlanePointers, isSwimlaneShape, isSwimlaneWithHeader, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, setSelectedCells, setTextManage, traverseDrawShapes, updateCellIds, updateCellIdsByRowOrColumn, updateColumns, updateRowOrColumnIds, updateRows, vectorLineCreating, withArrowLineAutoComplete, withDraw };
9394
9389
  //# sourceMappingURL=plait-draw.mjs.map