@plait/draw 0.87.0-next.1 → 0.88.0

package/fesm2022/plait-draw.mjs

@@ -1,4 +1,4 @@
-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';
+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';
 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';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import { DEFAULT_FONT_SIZE, AlignEditor } from '@plait/text-plugins';
@@ -1819,18 +1819,10 @@ const CloudEngine = {
         return RectangleClient.getEdgeCenterPoints(rectangle);
     },
     getTextRectangle: (board, element) => {
-        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
-        const strokeWidth = getStrokeWidthByElement(element);
-        const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
-        const width = originWidth / 1.5;
-        const text = element.text;
-        const textSize = getTextSize(board, text, width);
-        return {
-            height: textSize.height,
-            width: width > 0 ? width : 0,
-            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + originWidth / 6,
-            y: elementRectangle.y + elementRectangle.height / 6 + ((elementRectangle.height * 4) / 6 - textSize.height) / 2
-        };
+        const widthRatio = 1 / 1.5;
+        const rectangle = RectangleClient.getRectangleByPoints(element.points);
+        const textRectangle = getCustomTextRectangle(board, element, widthRatio);
+        return textRectangle;
     }
 };
 
@@ -2072,6 +2064,17 @@ const getTextRectangle$1 = (board, element) => {
         y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2
     };
 };
+const getCustomTextRectangle = (board, element, widthRatio) => {
+    const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
+    const width = widthRatio * elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - getStrokeWidthByElement(element) * 2;
+    const textSize = getTextSize(board, element.text, width);
+    return {
+        height: textSize.height,
+        width: width,
+        x: elementRectangle.x + (elementRectangle.width - width) / 2,
+        y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2
+    };
+};
 const getStrokeWidthByElement = (element) => {
     if (PlaitDrawElement.isText(element)) {
         return 0;
@@ -2083,6 +2086,8 @@ const insertElement = (board, element) => {
     memorizeLatestShape(board, element.shape);
     Transforms.insertNode(board, element, [board.children.length]);
     clearSelectedElement(board);
+    addSelectedElement(board, element);
+    BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
 };
 const isDrawElementIncludeText = (element) => {
     if (PlaitDrawElement.isText(element)) {
@@ -4088,16 +4093,9 @@ const CommentEngine = {
     },
     getTextRectangle: (board, element) => {
         const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
-        const strokeWidth = getStrokeWidthByElement(element);
-        const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
-        const text = element.text;
-        const textSize = getTextSize(board, text, width);
-        return {
-            height: textSize.height,
-            width: width > 0 ? width : 0,
-            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
-            y: elementRectangle.y + (elementRectangle.height * heightRatio$1 - textSize.height) / 2
-        };
+        const textRectangle = getTextRectangle$1(board, element);
+        textRectangle.y = elementRectangle.y + (elementRectangle.height * heightRatio$1 - textRectangle.height) / 2;
+        return textRectangle;
     }
 };
 const getCommentPoints = (rectangle) => {
@@ -4188,11 +4186,8 @@ const CrossEngine = createPolygonEngine({
         return RectangleClient.getEdgeCenterPoints(rectangle);
     },
     getTextRectangle: (board, element) => {
-        const rectangle = getTextRectangle$1(board, element);
-        const width = rectangle.width;
-        rectangle.width = rectangle.width / 2;
-        rectangle.x += width / 4;
-        return rectangle;
+        const widthRatio = 1 / 2;
+        return getCustomTextRectangle(board, element, widthRatio);
     }
 });
 
@@ -4202,10 +4197,7 @@ const DiamondEngine = createPolygonEngine({
         return RectangleClient.getEdgeCenterPoints(rectangle);
     },
     getTextRectangle: (board, element) => {
-        const rectangle = getTextRectangle$1(board, element);
-        rectangle.width = rectangle.width / 2;
-        rectangle.x += rectangle.width / 2;
-        return rectangle;
+        return getCustomTextRectangle(board, element, 1 / 2);
     }
 });
 
@@ -4243,11 +4235,7 @@ function createEllipseEngine(createOptions) {
             return RectangleClient.getEdgeCenterPoints(rectangle);
         },
         getTextRectangle: (board, element) => {
-            const rectangle = getTextRectangle$1(board, element);
-            const width = rectangle.width;
-            rectangle.width = (rectangle.width * 3) / 4;
-            rectangle.x += width / 8;
-            return rectangle;
+            return getCustomTextRectangle(board, element, 3 / 4);
         }
     };
     if (createOptions?.draw) {
@@ -4276,11 +4264,7 @@ const HexagonEngine = createPolygonEngine({
         return RectangleClient.getEdgeCenterPoints(rectangle);
     },
     getTextRectangle: (board, element) => {
-        const rectangle = getTextRectangle$1(board, element);
-        const width = rectangle.width;
-        rectangle.width = (rectangle.width * 3) / 4;
-        rectangle.x += width / 8;
-        return rectangle;
+        return getCustomTextRectangle(board, element, 3 / 4);
     }
 });
 
@@ -4304,11 +4288,10 @@ const LeftArrowEngine = createPolygonEngine({
         ];
     },
     getTextRectangle: (board, element) => {
-        const rectangle = getTextRectangle$1(board, element);
-        const width = rectangle.width;
-        rectangle.width = rectangle.width * (1 - 0.32);
-        rectangle.x += width * 0.32;
-        return rectangle;
+        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
+        const customTextRectangle = getCustomTextRectangle(board, element, 1 - 0.32);
+        customTextRectangle.x = elementRectangle.x + elementRectangle.width * 0.32 + ShapeDefaultSpace.rectangleAndText;
+        return customTextRectangle;
     }
 });
 
@@ -4330,11 +4313,7 @@ const OctagonEngine = createPolygonEngine({
         return RectangleClient.getEdgeCenterPoints(rectangle);
     },
     getTextRectangle: (board, element) => {
-        const rectangle = getTextRectangle$1(board, element);
-        const width = rectangle.width;
-        rectangle.width = (rectangle.width * 3) / 4;
-        rectangle.x += width / 8;
-        return rectangle;
+        return getCustomTextRectangle(board, element, 3 / 4);
     }
 });
 
@@ -4353,11 +4332,7 @@ const ParallelogramEngine = createPolygonEngine({
         return getCenterPointsOnPolygon$1(cornerPoints);
     },
     getTextRectangle: (board, element) => {
-        const rectangle = getTextRectangle$1(board, element);
-        const width = rectangle.width;
-        rectangle.width = rectangle.width / 2;
-        rectangle.x += width / 4;
-        return rectangle;
+        return getCustomTextRectangle(board, element, 1 / 2);
     }
 });
 
@@ -4374,17 +4349,11 @@ const PentagonEngine = createPolygonEngine({
     getPolygonPoints: getPentagonPoints,
     getTextRectangle: (board, element) => {
         const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
-        const strokeWidth = getStrokeWidthByElement(element);
-        const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
-        const width = (originWidth * 3) / 5;
-        const text = element.text;
-        const textSize = getTextSize(board, text, width);
-        return {
-            height: textSize.height,
-            width: width > 0 ? width : 0,
-            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + originWidth / 5,
-            y: elementRectangle.y + elementRectangle.height / 5 + ((elementRectangle.height * 4) / 5 - textSize.height) / 2
-        };
+        const customTextRectangle = getCustomTextRectangle(board, element, 3 / 5);
+        const startY = elementRectangle.y + elementRectangle.height / 5;
+        const endY = elementRectangle.y + elementRectangle.height;
+        customTextRectangle.y = startY + (endY - startY - customTextRectangle.height) / 2;
+        return customTextRectangle;
     }
 });
 
@@ -4405,10 +4374,9 @@ const PentagonArrowEngine = createPolygonEngine({
     },
     getTextRectangle: (board, element) => {
         const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
-        const rectangle = getTextRectangle$1(board, element);
-        const wider = elementRectangle.width > elementRectangle.height / 2 + 20;
-        rectangle.width = wider ? elementRectangle.width - elementRectangle.height / 2 : rectangle.width;
-        return rectangle;
+        const customTextRectangle = getCustomTextRectangle(board, element, 3 / 4);
+        customTextRectangle.x = elementRectangle.x + ShapeDefaultSpace.rectangleAndText;
+        return customTextRectangle;
     }
 });
 
@@ -4427,11 +4395,10 @@ const ProcessArrowEngine = createPolygonEngine({
     getPolygonPoints: getProcessArrowPoints,
     getTextRectangle: (board, element) => {
         const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
-        const rectangle = getTextRectangle$1(board, element);
         const wider = elementRectangle.width > elementRectangle.height + 20;
-        rectangle.width = wider ? elementRectangle.width - elementRectangle.height : rectangle.width;
-        rectangle.x = wider ? elementRectangle.x + elementRectangle.height / 2 : rectangle.x;
-        return rectangle;
+        const widthRatio = wider ? (elementRectangle.width - elementRectangle.height) / elementRectangle.width : 3 / 4;
+        const customTextRectangle = getCustomTextRectangle(board, element, widthRatio);
+        return customTextRectangle;
     }
 });
 
@@ -4455,9 +4422,10 @@ const RightArrowEngine = createPolygonEngine({
         ];
     },
     getTextRectangle: (board, element) => {
-        const rectangle = getTextRectangle$1(board, element);
-        rectangle.width = rectangle.width * 0.68;
-        return rectangle;
+        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
+        const customTextRectangle = getCustomTextRectangle(board, element, 1 - 0.32);
+        customTextRectangle.x = elementRectangle.x + ShapeDefaultSpace.rectangleAndText;
+        return customTextRectangle;
     }
 });
 
@@ -4594,16 +4562,9 @@ const RoundCommentEngine = {
     },
     getTextRectangle: (board, element) => {
         const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
-        const strokeWidth = getStrokeWidthByElement(element);
-        const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
-        const text = element.text;
-        const textSize = getTextSize(board, text, width);
-        return {
-            height: textSize.height,
-            width: width > 0 ? width : 0,
-            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
-            y: elementRectangle.y + (elementRectangle.height * heightRatio - textSize.height) / 2
-        };
+        const textRectangle = getTextRectangle$1(board, element);
+        textRectangle.y = elementRectangle.y + (elementRectangle.height * heightRatio - textRectangle.height) / 2;
+        return textRectangle;
     }
 };
 const getRoundCommentPoints = (rectangle) => {
@@ -4633,11 +4594,7 @@ const TrapezoidEngine = createPolygonEngine({
         return getCenterPointsOnPolygon$1(points);
     },
     getTextRectangle(board, element) {
-        const rectangle = getTextRectangle$1(board, element);
-        const width = rectangle.width;
-        rectangle.width = (rectangle.width * 3) / 4;
-        rectangle.x += width / 8;
-        return rectangle;
+        return getCustomTextRectangle(board, element, 3 / 4);
     }
 });
 
@@ -4656,18 +4613,13 @@ const TriangleEngine = createPolygonEngine({
         return [...lineCenterPoints, ...cornerPoints];
     },
     getTextRectangle: (board, element) => {
+        const customTextRectangle = getCustomTextRectangle(board, element, 1 / 2);
         const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
-        const strokeWidth = getStrokeWidthByElement(element);
-        const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
-        const width = (originWidth * 2) / 3;
-        const text = element.text;
-        const textSize = getTextSize(board, text, width);
-        return {
-            height: textSize.height,
-            width: width > 0 ? width : 0,
-            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + originWidth / 6,
-            y: elementRectangle.y + (elementRectangle.height * 3) / 5 + ((elementRectangle.height * 2) / 5 - textSize.height) / 2
-        };
+        customTextRectangle.y =
+            elementRectangle.y +
+                (elementRectangle.height * 2.5) / 5 +
+                (elementRectangle.height - (elementRectangle.height * 2.5) / 5 - customTextRectangle.height) / 2;
+        return customTextRectangle;
     }
 });
 
@@ -4717,17 +4669,12 @@ const StarEngine = createPolygonEngine({
     },
     getTextRectangle: (board, element) => {
         const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
-        const strokeWidth = getStrokeWidthByElement(element);
-        const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
-        const width = originWidth / 2;
-        const text = element.text;
-        const textSize = getTextSize(board, text, width);
-        return {
-            height: textSize.height,
-            width: width > 0 ? width : 0,
-            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + originWidth / 4,
-            y: elementRectangle.y + (elementRectangle.height * 1) / 6 + ((elementRectangle.height * 4) / 5 - textSize.height) / 2
-        };
+        const customTextRectangle = getCustomTextRectangle(board, element, 1 / 2);
+        customTextRectangle.y =
+            elementRectangle.y +
+                elementRectangle.height / 5 +
+                (elementRectangle.height - elementRectangle.height / 5 - customTextRectangle.height) / 2;
+        return customTextRectangle;
     }
 });
 
@@ -4949,10 +4896,7 @@ const DelayEngine = {
 const StoredDataEngine = {
     draw(board, rectangle, options) {
         const rs = PlaitBoard.getRoughSVG(board);
-        const shape = rs.path(`M${rectangle.x + rectangle.width / 10} ${rectangle.y} L${rectangle.x + rectangle.width} ${rectangle.y} A  ${rectangle.width /
-            10} ${rectangle.height / 2}, 0, 0, 0,${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height} L${rectangle.x +
-            rectangle.width / 10} ${rectangle.y + rectangle.height}A  ${rectangle.width / 10} ${rectangle.height /
-            2}, 0, 0, 1,${rectangle.x + rectangle.width / 10} ${rectangle.y}`, { ...options, fillStyle: 'solid' });
+        const shape = rs.path(`M${rectangle.x + rectangle.width / 10} ${rectangle.y} L${rectangle.x + rectangle.width} ${rectangle.y} A  ${rectangle.width / 10} ${rectangle.height / 2}, 0, 0, 0,${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height} L${rectangle.x + rectangle.width / 10} ${rectangle.y + rectangle.height}A  ${rectangle.width / 10} ${rectangle.height / 2}, 0, 0, 1,${rectangle.x + rectangle.width / 10} ${rectangle.y}`, { ...options, fillStyle: 'solid' });
         setStrokeLinecap(shape, 'round');
         return shape;
     },
@@ -5003,7 +4947,7 @@ const StoredDataEngine = {
         const point = [connectionPoint[0] - centerPoint[0], -(connectionPoint[1] - centerPoint[1])];
         const slope = getEllipseTangentSlope(point[0], point[1], a, b);
         const vector = getVectorFromPointAndSlope(point[0], point[1], slope);
-        return isBackEllipse ? vector.map(num => -num) : vector;
+        return isBackEllipse ? vector.map((num) => -num) : vector;
     },
     getConnectorPoints(rectangle) {
         return [
@@ -5014,11 +4958,8 @@ const StoredDataEngine = {
         ];
     },
     getTextRectangle(board, element) {
-        const rectangle = getTextRectangle$1(board, element);
-        const width = rectangle.width;
-        rectangle.width = (rectangle.width * 3) / 4;
-        rectangle.x += width / 8;
-        return rectangle;
+        const widthRatio = 3 / 4;
+        return getCustomTextRectangle(board, element, widthRatio);
     }
 };
 
@@ -5195,17 +5136,7 @@ const DocumentEngine = {
         return getUnitVectorByPointAndPoint(connectionPoint, [rectangle.x + rectangle.width / 4, rectangle.y + rectangle.height]);
     },
     getTextRectangle: (board, element) => {
-        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
-        const strokeWidth = getStrokeWidthByElement(element);
-        const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2 - elementRectangle.width * 0.06 * 2;
-        const text = element.text;
-        const textSize = getTextSize(board, text, width);
-        return {
-            height: textSize.height,
-            width: width > 0 ? width : 0,
-            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + elementRectangle.width * 0.06,
-            y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2
-        };
+        return getCustomTextRectangle(board, element, 0.88);
     }
 };
 
@@ -5308,17 +5239,7 @@ const MultiDocumentEngine = {
         return [factor.x, factor.y];
     },
     getTextRectangle: (board, element) => {
-        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
-        const strokeWidth = getStrokeWidthByElement(element);
-        const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2 - elementRectangle.width * 0.06 * 2;
-        const text = element.text;
-        const textSize = getTextSize(board, text, width);
-        return {
-            height: textSize.height,
-            width: width > 0 ? width - 10 : 0,
-            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + elementRectangle.width * 0.06,
-            y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2
-        };
+        return getCustomTextRectangle(board, element, 0.88);
     }
 };
 
@@ -5326,13 +5247,10 @@ const DatabaseEngine = {
     draw(board, rectangle, options) {
         const rs = PlaitBoard.getRoughSVG(board);
         const shape = rs.path(`M${rectangle.x} ${rectangle.y + rectangle.height * 0.15}  
-            A${rectangle.width / 2} ${rectangle.height * 0.15}, 0, 0, 0,${rectangle.x + rectangle.width} ${rectangle.y +
-            rectangle.height * 0.15} 
+            A${rectangle.width / 2} ${rectangle.height * 0.15}, 0, 0, 0,${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height * 0.15} 
             A${rectangle.width / 2} ${rectangle.height * 0.15}, 0, 0, 0,${rectangle.x} ${rectangle.y + rectangle.height * 0.15} 
             V${rectangle.y + rectangle.height - rectangle.height * 0.15}
-            A${rectangle.width / 2} ${rectangle.height * 0.15}, 0, 0, 0, ${rectangle.x + rectangle.width} ${rectangle.y +
-            rectangle.height -
-            rectangle.height * 0.15}
+            A${rectangle.width / 2} ${rectangle.height * 0.15}, 0, 0, 0, ${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height - rectangle.height * 0.15}
             V${rectangle.y + rectangle.height * 0.15}`, { ...options, fillStyle: 'solid' });
         setStrokeLinecap(shape, 'round');
         return shape;
@@ -5390,16 +5308,12 @@ const DatabaseEngine = {
     },
     getTextRectangle: (board, element) => {
         const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
-        const strokeWidth = getStrokeWidthByElement(element);
-        const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
-        const text = element.text;
-        const textSize = getTextSize(board, text, width);
-        return {
-            height: textSize.height,
-            width: width > 0 ? width : 0,
-            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
-            y: elementRectangle.y + elementRectangle.height * 0.3 + (elementRectangle.height - elementRectangle.height * 0.45 - textSize.height) / 2
-        };
+        const textRectangle = getCustomTextRectangle(board, element, 1);
+        textRectangle.y += getStrokeWidthByElement(element);
+        const startY = elementRectangle.y + elementRectangle.height * 0.45;
+        const endY = elementRectangle.y + elementRectangle.height - elementRectangle.height * 0.3;
+        textRectangle.y = startY + (endY - startY - textRectangle.height) / 2;
+        return textRectangle;
     }
 };
 
@@ -5595,16 +5509,9 @@ const NoteCurlyLeftEngine = {
     },
     getTextRectangle: (board, element) => {
         const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
-        const strokeWidth = getStrokeWidthByElement(element);
-        const width = elementRectangle.width - elementRectangle.width * 0.09 - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
-        const text = element.text;
-        const textSize = getTextSize(board, text, width);
-        return {
-            height: textSize.height,
-            width: width > 0 ? width : 0,
-            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
-            y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2
-        };
+        const textRectangle = getCustomTextRectangle(board, element, 0.9);
+        textRectangle.x = elementRectangle.x + getStrokeWidthByElement(element) + ShapeDefaultSpace.rectangleAndText;
+        return textRectangle;
     }
 };
 
@@ -5679,16 +5586,10 @@ const NoteCurlyRightEngine = {
     },
     getTextRectangle: (board, element) => {
         const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
-        const strokeWidth = getStrokeWidthByElement(element);
-        const width = elementRectangle.width - elementRectangle.width * 0.09 - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
-        const text = element.text;
-        const textSize = getTextSize(board, text, width);
-        return {
-            height: textSize.height,
-            width: width > 0 ? width : 0,
-            x: elementRectangle.x + elementRectangle.width * 0.09 + ShapeDefaultSpace.rectangleAndText + strokeWidth,
-            y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2
-        };
+        const textRectangle = getCustomTextRectangle(board, element, 0.9);
+        textRectangle.x =
+            elementRectangle.x + getStrokeWidthByElement(element) + ShapeDefaultSpace.rectangleAndText + elementRectangle.width * 0.1;
+        return textRectangle;
     }
 };
 
@@ -5720,17 +5621,7 @@ const NoteSquareEngine = {
         return RectangleClient.getEdgeCenterPoints(rectangle);
     },
     getTextRectangle: (board, element) => {
-        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
-        const strokeWidth = getStrokeWidthByElement(element);
-        const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
-        const text = element.text;
-        const textSize = getTextSize(board, text, width);
-        return {
-            height: textSize.height,
-            width: width > 0 ? width : 0,
-            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
-            y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2
-        };
+        return getCustomTextRectangle(board, element, 0.88);
     }
 };
 
@@ -5793,17 +5684,7 @@ const DisplayEngine = {
         return RectangleClient.getEdgeCenterPoints(rectangle);
     },
     getTextRectangle: (board, element) => {
-        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
-        const strokeWidth = getStrokeWidthByElement(element);
-        const width = elementRectangle.width - strokeWidth * 2 - elementRectangle.width * 0.25;
-        const text = element.text;
-        const textSize = getTextSize(board, text, width);
-        return {
-            width: width > 0 ? width : 0,
-            height: textSize.height,
-            x: elementRectangle.x + strokeWidth + elementRectangle.width * 0.15,
-            y: elementRectangle.y + (elementRectangle.height - textSize.height) / 2
-        };
+        return getCustomTextRectangle(board, element, 0.75);
     }
 };
 
@@ -9385,5 +9266,5 @@ const withDraw = (board) => {
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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, getCustomTextRectangle, 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 };
 //# sourceMappingURL=plait-draw.mjs.map