@plait/draw 0.75.0 → 0.77.0

package/fesm2022/plait-draw.mjs

@@ -1,7 +1,7 @@
-import { ACTIVE_STROKE_WIDTH, DEFAULT_COLOR, ThemeColorMode, PlaitElement, RectangleClient, getSelectedElements, idCreator, catmullRomFitting, PlaitBoard, createG, drawLinearPath, setStrokeLinecap, setPathStrokeLinecap, getNearestPointBetweenPointAndArc, distanceBetweenPointAndPoint, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPointInPolygon, isLineHitRectangle, rotatePointsByAngle, createDebugGenerator, rotateAntiPointsByElement, getEllipseArcCenter, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, depthFirstRecursion, getIsRecursionFunc, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, Point, arrowPoints, createPath, rotate, findElements, createMask, createRect, getElementById, rotatePointsByElement, PlaitNode, hasValidAngle, toViewBoxPoint, toHostPoint, Direction, rotatePoints, getRectangleByElements, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, isSelectionMoving, drawRectangle, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, getNearestPointBetweenPointAndSegments, isPointInEllipse, getNearestPointBetweenPointAndEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRoundRectangle, isPointInRoundRectangle, getCrossingPointsBetweenEllipseAndSegment, drawLine, getNearestPointBetweenPointAndDiscreteSegments, getNearestPointBetweenPointAndSegment, Path, RgbaToHEX, SELECTION_RECTANGLE_CLASS_NAME, getHitElementByPoint, WritableClipboardOperationType, WritableClipboardType, addOrCreateClipboardContext, setAngleForG, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER, isMainPointer, throttleRAF, getAngleBetweenPoints, normalizeAngle, degreesToRadians, rotateElements, MERGING, ROTATE_HANDLE_CLASS_NAME, isSelectedElement, isDragging } from '@plait/core';
-import { DEFAULT_FILL, Alignment, WithTextPluginKey, TextManage, getMemorizedLatest, memorizeLatest, getPointOnPolyline, buildText, Generator, getStrokeLineDash, StrokeStyle, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getFirstTextEditor, sortElementsByArea, isFilled, getTextEditorsByElement, removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, getExtendPoint, getUnitVectorByPointAndPoint, getPointByVectorComponent, RESIZE_HANDLE_DIAMETER, measureElement, DEFAULT_FONT_FAMILY, getFirstTextManage, ActiveGenerator, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, normalizeShapePoints, resetPointsAfterResize, getDirectionByVector, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, isCornerHandle, getIndexByResizeHandle, withResize, drawHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, getDirectionFactorByDirectionComponent, buildClipboardData as buildClipboardData$1, insertClipboardData as insertClipboardData$1, getDirectionByPointOfRectangle, getDirectionFactor, rotateVector, getOppositeDirection, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, PRIMARY_COLOR, CommonElementFlavour, hasResizeHandle, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, isResizingByCondition, getRatioByPoint, getTextManages, ImageGenerator, ResizeHandle, addRotating, removeRotating, drawRotateHandle } from '@plait/common';
-import { pointsOnBezierCurves } from 'points-on-curve';
+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, setPathStrokeLinecap, getNearestPointBetweenPointAndArc, 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, toActiveRectangleFromViewBoxRectangle, getElementById, rotatePointsByElement, PlaitNode, hasValidAngle, toViewBoxPoint, toHostPoint, Direction, rotatePoints, getRectangleByElements, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, isSelectionMoving, drawRectangle, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, getNearestPointBetweenPointAndSegments, isPointInEllipse, getNearestPointBetweenPointAndEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRoundRectangle, isPointInRoundRectangle, getCrossingPointsBetweenEllipseAndSegment, drawLine, getNearestPointBetweenPointAndDiscreteSegments, getNearestPointBetweenPointAndSegment, Path, RgbaToHEX, SELECTION_RECTANGLE_CLASS_NAME, toActivePointFromViewBoxPoint, getHitElementByPoint, WritableClipboardOperationType, WritableClipboardType, addOrCreateClipboardContext, setAngleForG, CursorClass, toActivePoint, temporaryDisableSelection, toScreenPointFromActivePoint, PRESS_AND_MOVE_BUFFER, isMainPointer, throttleRAF, getAngleBetweenPoints, normalizeAngle, degreesToRadians, rotateElements, MERGING, ROTATE_HANDLE_CLASS_NAME, isSelectedElement, isDragging } from '@plait/core';
+import { DEFAULT_FILL, Alignment, getMemorizedLatest, memorizeLatest, WithTextPluginKey, TextManage, StrokeStyle, removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, getExtendPoint, getUnitVectorByPointAndPoint, Generator, getPointByVectorComponent, getStrokeLineDash, getPointOnPolyline, buildText, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getFirstTextEditor, sortElementsByArea, isFilled, getTextEditorsByElement, RESIZE_HANDLE_DIAMETER, measureElement, DEFAULT_FONT_FAMILY, getFirstTextManage, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, normalizeShapePoints, resetPointsAfterResize, getDirectionByVector, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, isCornerHandle, getIndexByResizeHandle, withResize, getSymmetricHandleIndex, getResizeHandlePointByIndex, drawHandle, getDirectionFactorByDirectionComponent, buildClipboardData as buildClipboardData$1, insertClipboardData as insertClipboardData$1, getDirectionByPointOfRectangle, getDirectionFactor, rotateVector, getOppositeDirection, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, PRIMARY_COLOR, CommonElementFlavour, createActiveGenerator, hasResizeHandle, ActiveGenerator, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, isResizingByCondition, getRatioByPoint, getTextManages, ImageGenerator, ResizeHandle, addRotating, removeRotating, drawRotateHandle } from '@plait/common';
 import { TEXT_DEFAULT_HEIGHT, DEFAULT_FONT_SIZE, AlignEditor } from '@plait/text-plugins';
+import { pointsOnBezierCurves } from 'points-on-curve';
 import { Editor, Node } from 'slate';
 import { isKeyHotkey } from 'is-hotkey';
 
@@ -114,6 +114,11 @@ const PlaitTableElement = {
 };
 
 const WithDrawPluginKey = 'plait-draw-plugin-key';
+var DrawI18nKey;
+(function (DrawI18nKey) {
+    DrawI18nKey["lineText"] = "line-text";
+    DrawI18nKey["geometryText"] = "geometry-text";
+})(DrawI18nKey || (DrawI18nKey = {}));
 
 const ShapeDefaultSpace = {
     rectangleAndText: 4
@@ -461,6 +466,18 @@ const DefaultSwimlanePropertyMap = {
 
 const MIN_TEXT_WIDTH = 5;
 
+const DefaultLineStyle = {
+    strokeWidth: 2,
+    strokeColor: '#000'
+};
+const LINE_TEXT_SPACE = 4;
+const LINE_AUTO_COMPLETE_DIAMETER = 6;
+const LINE_AUTO_COMPLETE_OPACITY = 0.6;
+const LINE_AUTO_COMPLETE_HOVERED_OPACITY = 0.8;
+const LINE_AUTO_COMPLETE_HOVERED_DIAMETER = 10;
+const LINE_ALIGN_TOLERANCE = 3;
+const LINE_TEXT = '文本';
+
 const getElementShape = (value) => {
     if (PlaitDrawElement.isImage(value)) {
         return BasicShapes.rectangle;
@@ -471,6 +488,97 @@ const getElementShape = (value) => {
     return value.shape;
 };
 
+const SHAPE_MAX_LENGTH = 6;
+const memorizedShape = new WeakMap();
+const getMemorizeKey = (element) => {
+    let key = '';
+    switch (true) {
+        case PlaitDrawElement.isText(element): {
+            key = MemorizeKey.text;
+            break;
+        }
+        case PlaitDrawElement.isBasicShape(element): {
+            key = MemorizeKey.basicShape;
+            break;
+        }
+        case PlaitDrawElement.isFlowchart(element): {
+            key = MemorizeKey.flowchart;
+            break;
+        }
+        case PlaitDrawElement.isArrowLine(element): {
+            key = MemorizeKey.arrowLine;
+            break;
+        }
+        case PlaitDrawElement.isUML(element): {
+            key = MemorizeKey.UML;
+        }
+    }
+    return key;
+};
+const getLineMemorizedLatest = () => {
+    const properties = getMemorizedLatest(MemorizeKey.arrowLine);
+    return { ...properties } || {};
+};
+const getMemorizedLatestByPointer = (pointer) => {
+    let memorizeKey = '';
+    if (PlaitDrawElement.isBasicShape({ shape: pointer })) {
+        memorizeKey = pointer === BasicShapes.text ? MemorizeKey.text : MemorizeKey.basicShape;
+    }
+    else if (PlaitDrawElement.isUML({ shape: pointer })) {
+        memorizeKey = MemorizeKey.UML;
+    }
+    else {
+        memorizeKey = MemorizeKey.flowchart;
+    }
+    const properties = { ...getMemorizedLatest(memorizeKey) } || {};
+    const textProperties = { ...properties.text } || {};
+    delete properties.text;
+    return { textProperties, geometryProperties: properties };
+};
+const memorizeLatestText = (element, operations) => {
+    const memorizeKey = getMemorizeKey(element);
+    let textMemory = getMemorizedLatest(memorizeKey)?.text || {};
+    const setNodeOperation = operations.find(operation => operation.type === 'set_node');
+    if (setNodeOperation) {
+        const { properties, newProperties } = setNodeOperation;
+        for (const key in newProperties) {
+            const value = newProperties[key];
+            if (value == null) {
+                delete textMemory[key];
+            }
+            else {
+                textMemory[key] = value;
+            }
+        }
+        for (const key in properties) {
+            if (!newProperties.hasOwnProperty(key)) {
+                delete textMemory[key];
+            }
+        }
+        memorizeLatest(memorizeKey, 'text', textMemory);
+    }
+};
+const memorizeLatestShape = (board, shape) => {
+    const shapes = memorizedShape.has(board) ? memorizedShape.get(board) : [];
+    const shapeIndex = shapes.indexOf(shape);
+    if (shape === BasicShapes.text || shapeIndex === 0) {
+        return;
+    }
+    if (shapeIndex !== -1) {
+        shapes.splice(shapeIndex, 1);
+    }
+    else {
+        if (shapes.length === SHAPE_MAX_LENGTH) {
+            shapes.pop();
+        }
+    }
+    shapes.unshift(shape);
+    memorizedShape.set(board, shapes);
+};
+const getMemorizedLatestShape = (board) => {
+    return memorizedShape.get(board);
+};
+
 // TODO: 是否可以完全基于位置定位 TextManager，实现 line 和 多文本 geometry 统一
 // 一个元素有多个文本时，单纯通过位置无法获取 TextManage，因此这里单独通过 Map 保存关键字 key 和 TextManage 的对应关系
 // 1. 单文本元素 key 就是元素的 id
@@ -602,10 +710,6 @@ const isSingleSelectTable = (board) => {
     const selectedElements = getSelectedElements(board);
     return selectedElements && selectedElements.length === 1 && PlaitDrawElement.isElementByTable(selectedElements[0]);
 };
-const isSingleSelectElementByTable = (board) => {
-    const selectedElements = getSelectedElements(board);
-    return selectedElements && selectedElements.length === 1 && PlaitDrawElement.isElementByTable(selectedElements[0]);
-};
 const getSelectedTableElements = (board, elements) => {
     const selectedElements = elements?.length ? elements : getSelectedElements(board);
     return selectedElements.filter(value => PlaitDrawElement.isElementByTable(value));
@@ -774,7 +878,7 @@ const createCell = (rowId, columnId, text = null) => {
     return cell;
 };
 const getSelectedTableCellsEditor = (board) => {
-    if (isSingleSelectElementByTable(board)) {
+    if (isSingleSelectTable(board)) {
         const elements = getSelectedTableElements(board);
         const selectedCells = getSelectedCells(elements[0]);
         const selectedCellsEditor = selectedCells?.map(cell => {
@@ -788,1458 +892,1358 @@ const getSelectedTableCellsEditor = (board) => {
     return undefined;
 };
 
-const SHAPE_MAX_LENGTH = 6;
-const memorizedShape = new WeakMap();
-const getMemorizeKey = (element) => {
-    let key = '';
-    switch (true) {
-        case PlaitDrawElement.isText(element): {
-            key = MemorizeKey.text;
-            break;
-        }
-        case PlaitDrawElement.isBasicShape(element): {
-            key = MemorizeKey.basicShape;
-            break;
-        }
-        case PlaitDrawElement.isFlowchart(element): {
-            key = MemorizeKey.flowchart;
-            break;
-        }
-        case PlaitDrawElement.isArrowLine(element): {
-            key = MemorizeKey.arrowLine;
-            break;
-        }
-        case PlaitDrawElement.isUML(element): {
-            key = MemorizeKey.UML;
-        }
-    }
-    return key;
+const getStrokeColorByElement = (board, element) => {
+    const defaultColor = getDrawDefaultStrokeColor(board.theme.themeColorMode);
+    const strokeColor = element.strokeColor || defaultColor;
+    return strokeColor;
 };
-const getLineMemorizedLatest = () => {
-    const properties = getMemorizedLatest(MemorizeKey.arrowLine);
-    return { ...properties } || {};
+const getFillByElement = (board, element) => {
+    const defaultFill = PlaitDrawElement.isFlowchart(element) && isClosedDrawElement(element)
+        ? getFlowchartDefaultFill(board.theme.themeColorMode)
+        : DefaultDrawStyle.fill;
+    const fill = element.fill || defaultFill;
+    return fill;
 };
-const getMemorizedLatestByPointer = (pointer) => {
-    let memorizeKey = '';
-    if (PlaitDrawElement.isBasicShape({ shape: pointer })) {
-        memorizeKey = pointer === BasicShapes.text ? MemorizeKey.text : MemorizeKey.basicShape;
-    }
-    else if (PlaitDrawElement.isUML({ shape: pointer })) {
-        memorizeKey = MemorizeKey.UML;
+const getStrokeStyleByElement = (board, element) => {
+    return element.strokeStyle || StrokeStyle.solid;
+};
+
+const debugKey$4 = 'debug:plait:line-mirror';
+const debugGenerator$4 = createDebugGenerator(debugKey$4);
+const alignPoints = (basePoint, movingPoint) => {
+    const newPoint = [...movingPoint];
+    if (Point.isVertical(newPoint, basePoint, LINE_ALIGN_TOLERANCE)) {
+        newPoint[0] = basePoint[0];
     }
-    else {
-        memorizeKey = MemorizeKey.flowchart;
+    if (Point.isHorizontal(newPoint, basePoint, LINE_ALIGN_TOLERANCE)) {
+        newPoint[1] = basePoint[1];
     }
-    const properties = { ...getMemorizedLatest(memorizeKey) } || {};
-    const textProperties = { ...properties.text } || {};
-    delete properties.text;
-    return { textProperties, geometryProperties: properties };
+    return newPoint;
 };
-const memorizeLatestText = (element, operations) => {
-    const memorizeKey = getMemorizeKey(element);
-    let textMemory = getMemorizedLatest(memorizeKey)?.text || {};
-    const setNodeOperation = operations.find(operation => operation.type === 'set_node');
-    if (setNodeOperation) {
-        const { properties, newProperties } = setNodeOperation;
-        for (const key in newProperties) {
-            const value = newProperties[key];
-            if (value == null) {
-                delete textMemory[key];
-            }
-            else {
-                textMemory[key] = value;
-            }
-        }
-        for (const key in properties) {
-            if (!newProperties.hasOwnProperty(key)) {
-                delete textMemory[key];
-            }
-        }
-        memorizeLatest(memorizeKey, 'text', textMemory);
+function getResizedPreviousAndNextPoint(nextRenderPoints, sourcePoint, targetPoint, handleIndex) {
+    const referencePoint = {
+        previous: null,
+        next: null
+    };
+    const startPoint = nextRenderPoints[handleIndex];
+    const endPoint = nextRenderPoints[handleIndex + 1];
+    const isHorizontal = Point.isHorizontal(startPoint, endPoint);
+    const isVertical = Point.isVertical(startPoint, endPoint);
+    const previousPoint = nextRenderPoints[handleIndex - 1] ?? nextRenderPoints[0];
+    const beforePreviousPoint = nextRenderPoints[handleIndex - 2] ?? sourcePoint;
+    if ((isHorizontal && Point.isHorizontal(beforePreviousPoint, previousPoint)) ||
+        (isVertical && Point.isVertical(beforePreviousPoint, previousPoint))) {
+        referencePoint.previous = previousPoint;
     }
-};
-const memorizeLatestShape = (board, shape) => {
-    const shapes = memorizedShape.has(board) ? memorizedShape.get(board) : [];
-    const shapeIndex = shapes.indexOf(shape);
-    if (shape === BasicShapes.text || shapeIndex === 0) {
-        return;
+    const nextPoint = nextRenderPoints[handleIndex + 2] ?? nextRenderPoints[nextRenderPoints.length - 1];
+    const afterNextPoint = nextRenderPoints[handleIndex + 3] ?? targetPoint;
+    if ((isHorizontal && Point.isHorizontal(nextPoint, afterNextPoint)) || (isVertical && Point.isVertical(nextPoint, afterNextPoint))) {
+        referencePoint.next = nextPoint;
     }
-    if (shapeIndex !== -1) {
-        shapes.splice(shapeIndex, 1);
+    return referencePoint;
+}
+function alignElbowSegment(startKeyPoint, endKeyPoint, resizeState, resizedPreviousAndNextPoint) {
+    let newStartPoint = startKeyPoint;
+    let newEndPoint = endKeyPoint;
+    if (Point.isHorizontal(startKeyPoint, endKeyPoint)) {
+        const offsetY = Point.getOffsetY(resizeState.startPoint, resizeState.endPoint);
+        let pointY = startKeyPoint[1] + offsetY;
+        if (resizedPreviousAndNextPoint.previous && Math.abs(resizedPreviousAndNextPoint.previous[1] - pointY) < LINE_ALIGN_TOLERANCE) {
+            pointY = resizedPreviousAndNextPoint.previous[1];
+        }
+        else if (resizedPreviousAndNextPoint.next && Math.abs(resizedPreviousAndNextPoint.next[1] - pointY) < LINE_ALIGN_TOLERANCE) {
+            pointY = resizedPreviousAndNextPoint.next[1];
+        }
+        newStartPoint = [startKeyPoint[0], pointY];
+        newEndPoint = [endKeyPoint[0], pointY];
     }
-    else {
-        if (shapes.length === SHAPE_MAX_LENGTH) {
-            shapes.pop();
+    if (Point.isVertical(startKeyPoint, endKeyPoint)) {
+        const offsetX = Point.getOffsetX(resizeState.startPoint, resizeState.endPoint);
+        let pointX = startKeyPoint[0] + offsetX;
+        if (resizedPreviousAndNextPoint.previous && Math.abs(resizedPreviousAndNextPoint.previous[0] - pointX) < LINE_ALIGN_TOLERANCE) {
+            pointX = resizedPreviousAndNextPoint.previous[0];
+        }
+        else if (resizedPreviousAndNextPoint.next && Math.abs(resizedPreviousAndNextPoint.next[0] - pointX) < LINE_ALIGN_TOLERANCE) {
+            pointX = resizedPreviousAndNextPoint.next[0];
         }
+        newStartPoint = [pointX, startKeyPoint[1]];
+        newEndPoint = [pointX, endKeyPoint[1]];
     }
-    shapes.unshift(shape);
-    memorizedShape.set(board, shapes);
-};
-const getMemorizedLatestShape = (board) => {
-    return memorizedShape.get(board);
-};
-
-const getHitArrowLineTextIndex = (board, element, point) => {
-    const texts = element.texts;
-    if (!texts.length)
-        return -1;
-    const points = getArrowLinePoints(board, element);
-    return texts.findIndex(text => {
-        const center = getPointOnPolyline(points, text.position);
-        const rectangle = {
-            x: center[0] - text.width / 2,
-            y: center[1] - text.height / 2,
-            width: text.width,
-            height: text.height
-        };
-        return RectangleClient.isHit(rectangle, RectangleClient.getRectangleByPoints([point, point]));
-    });
-};
-
-const isMultipleTextShape = (shape) => {
-    return GEOMETRY_WITH_MULTIPLE_TEXT.includes(shape);
-};
-const isMultipleTextGeometry = (geometry) => {
-    return PlaitDrawElement.isGeometry(geometry) && isMultipleTextShape(geometry.shape);
-};
-const getMultipleTextGeometryTextKeys = (shape) => {
-    return MultipleTextGeometryTextKeys[shape];
-};
-const createMultipleTextGeometryElement = (shape, points, options = {}) => {
-    const id = idCreator();
-    const drawShapeTexts = buildDefaultTextsByShape(shape);
-    return {
-        id,
-        type: 'geometry',
-        shape,
-        angle: 0,
-        opacity: 1,
-        texts: drawShapeTexts,
-        points,
-        ...options
-    };
-};
-const buildDefaultTextsByShape = (shape) => {
-    const memorizedLatest = getMemorizedLatestByPointer(shape);
-    const textProperties = { ...memorizedLatest.textProperties };
-    const alignment = textProperties?.align;
-    const textHeight = textProperties?.textHeight || DefaultTextProperty.height;
-    delete textProperties?.align;
-    delete textProperties?.textHeight;
-    const defaultTexts = getDefaultGeometryProperty(shape)?.texts || [];
-    const textKeys = getMultipleTextGeometryTextKeys(shape);
-    return (textKeys || []).map((textKey) => {
-        const text = defaultTexts?.find((item) => item?.key === textKey);
+    return [newStartPoint, newEndPoint];
+}
+function getIndexAndDeleteCountByKeyPoint(board, element, dataPoints, nextRenderPoints, handleIndex) {
+    let index = null;
+    let deleteCount = null;
+    const startKeyPoint = nextRenderPoints[handleIndex];
+    const endKeyPoint = nextRenderPoints[handleIndex + 1];
+    if (!startKeyPoint || !endKeyPoint) {
         return {
-            id: textKey,
-            text: buildText(text?.text || '', alignment || text?.align || Alignment.center, textProperties),
-            textHeight: textHeight
+            index,
+            deleteCount
         };
-    });
-};
-const getHitMultipleGeometryText = (element, point) => {
-    const engine = getEngine(element.shape);
-    const rectangle = RectangleClient.getRectangleByPoints([point, point]);
-    let hitText;
-    if (engine.getTextRectangle) {
-        hitText = element.texts.find(text => {
-            const textRectangle = engine.getTextRectangle(element, { id: text.id });
-            return RectangleClient.isHit(rectangle, textRectangle);
-        });
-    }
-    return hitText;
-};
-
-const DefaultLineStyle = {
-    strokeWidth: 2,
-    strokeColor: '#000'
-};
-const LINE_TEXT_SPACE = 4;
-const LINE_AUTO_COMPLETE_DIAMETER = 6;
-const LINE_AUTO_COMPLETE_OPACITY = 0.6;
-const LINE_AUTO_COMPLETE_HOVERED_OPACITY = 0.8;
-const LINE_AUTO_COMPLETE_HOVERED_DIAMETER = 10;
-const LINE_ALIGN_TOLERANCE = 3;
-const LINE_TEXT = '文本';
-
-class VectorLineShapeGenerator extends Generator {
-    canDraw(element) {
-        return true;
     }
-    draw(element) {
-        let lineG;
-        lineG = drawVectorLine(this.board, element);
-        return lineG;
+    const midDataPoints = dataPoints.slice(1, -1);
+    const startIndex = midDataPoints.findIndex(item => Point.isEquals(item, startKeyPoint));
+    const endIndex = midDataPoints.findIndex(item => Point.isEquals(item, endKeyPoint));
+    if (Math.max(startIndex, endIndex) > -1) {
+        if (startIndex > -1 && endIndex > -1) {
+            return {
+                index: startIndex,
+                deleteCount: 2
+            };
+        }
+        if (startIndex > -1 && endIndex === -1) {
+            const isReplace = startIndex < midDataPoints.length - 1 &&
+                Point.isAlign([midDataPoints[startIndex], midDataPoints[startIndex + 1], startKeyPoint, endKeyPoint]);
+            if (isReplace) {
+                return {
+                    index: startIndex,
+                    deleteCount: 2
+                };
+            }
+            return {
+                index: startIndex,
+                deleteCount: 1
+            };
+        }
+        if (startIndex === -1 && endIndex > -1) {
+            const isReplace = endIndex > 0 && Point.isAlign([midDataPoints[endIndex], midDataPoints[endIndex - 1], startKeyPoint, endKeyPoint]);
+            if (isReplace) {
+                return {
+                    index: endIndex - 1,
+                    deleteCount: 2
+                };
+            }
+            return {
+                index: endIndex,
+                deleteCount: 1
+            };
+        }
     }
-}
-
-const getVectorLinePoints = (board, element) => {
-    switch (element.shape) {
-        case VectorLineShape.straight: {
-            return element.points;
+    else {
+        for (let i = 0; i < midDataPoints.length - 1; i++) {
+            const currentPoint = midDataPoints[i];
+            const nextPoint = midDataPoints[i + 1];
+            if (Point.isAlign([currentPoint, nextPoint, startKeyPoint, endKeyPoint])) {
+                index = i;
+                deleteCount = 2;
+                break;
+            }
+            if (Point.isAlign([currentPoint, nextPoint, startKeyPoint])) {
+                index = Math.min(i + 1, midDataPoints.length - 1);
+                deleteCount = 1;
+                break;
+            }
+            if (Point.isAlign([currentPoint, nextPoint, endKeyPoint])) {
+                index = Math.max(i - 1, 0);
+                deleteCount = 1;
+                break;
+            }
         }
-        case VectorLineShape.curve: {
-            if (element.points.length === 2) {
-                return pointsOnBezierCurves(element.points);
+    }
+    if (index === null) {
+        deleteCount = 0;
+        if (midDataPoints.length > 0) {
+            const handleRefPair = getArrowLineHandleRefPair(board, element);
+            const params = getElbowLineRouteOptions(board, element, handleRefPair);
+            const keyPoints = removeDuplicatePoints(generateElbowLineRoute(params, board));
+            const nextKeyPoints = simplifyOrthogonalPoints(keyPoints.slice(1, keyPoints.length - 1));
+            const nextDataPoints = [nextRenderPoints[0], ...midDataPoints, nextRenderPoints[nextRenderPoints.length - 1]];
+            const mirrorDataPoints = getMirrorDataPoints(board, nextDataPoints, nextKeyPoints, params);
+            for (let i = handleIndex - 1; i >= 0; i--) {
+                const previousIndex = mirrorDataPoints.slice(1, -1).findIndex(item => Point.isEquals(item, nextRenderPoints[i]));
+                if (previousIndex > -1) {
+                    index = previousIndex + 1;
+                    break;
+                }
             }
-            else {
-                let dataPoints = element.points;
-                const points = catmullRomFitting(dataPoints);
-                return pointsOnBezierCurves(points);
+            if (index === null) {
+                index = 0;
+                // When renderPoints is a straight line and dataPoints are not on the line,
+                // the default 'deleteCount' is set to midDataPoints.length.
+                if (Point.isAlign(nextRenderPoints)) {
+                    deleteCount = midDataPoints.length;
+                }
             }
         }
-        default:
-            return null;
+        else {
+            index = 0;
+        }
     }
-};
-const createVectorLineElement = (shape, points, options) => {
     return {
-        id: idCreator(),
-        type: 'vector-line',
-        shape,
-        opacity: 1,
-        points,
-        ...options
+        index,
+        deleteCount
     };
-};
-const vectorLineCreating = (board, lineShape, points, movingPoint, lineShapeG) => {
-    const lineGenerator = new VectorLineShapeGenerator(board);
-    const memorizedLatest = getLineMemorizedLatest();
-    const temporaryLineElement = createVectorLineElement(lineShape, [...points, movingPoint], {
-        strokeWidth: DefaultLineStyle.strokeWidth,
-        ...memorizedLatest
-    });
-    const otherPoint = points[points.length - 1];
-    temporaryLineElement.points[temporaryLineElement.points.length - 1] = alignPoints(otherPoint, movingPoint);
-    lineGenerator.processDrawing(temporaryLineElement, lineShapeG);
-    PlaitBoard.getElementActiveHost(board).append(lineShapeG);
-    return temporaryLineElement;
-};
-const drawVectorLine = (board, element) => {
-    const strokeWidth = getStrokeWidthByElement(element);
-    const strokeColor = getStrokeColorByElement(board, element);
-    const strokeStyle = getStrokeStyleByElement(board, element);
-    const strokeLineDash = getStrokeLineDash(strokeStyle, strokeWidth);
-    const fill = getFillByElement(board, element);
-    const options = { stroke: strokeColor, strokeWidth, strokeLineDash, fill };
-    const lineG = createG();
-    let points = getVectorLinePoints(board, element);
-    const line = drawLinearPath(points, options);
-    const id = idCreator();
-    line.setAttribute('mask', `url(#${id})`);
-    if (element.strokeStyle === StrokeStyle.dotted) {
-        setStrokeLinecap(line, 'round');
-    }
-    lineG.appendChild(line);
-    return lineG;
-};
-
-const getCenterPointsOnPolygon$1 = (points) => {
-    const centerPoints = [];
-    for (let i = 0; i < points.length; i++) {
-        let j = i == points.length - 1 ? 0 : i + 1;
-        centerPoints.push([(points[i][0] + points[j][0]) / 2, (points[i][1] + points[j][1]) / 2]);
-    }
-    return centerPoints;
-};
-const getCrossingPointBetweenPointAndPolygon = (corners, point) => {
-    const result = [];
-    for (let index = 1; index <= corners.length; index++) {
-        let start = corners[index - 1];
-        let end = index === corners.length ? corners[0] : corners[index];
-        const crossingPoint = getCrossingPointsBetweenPointAndSegment(point, start, end);
-        result.push(...crossingPoint);
+}
+function getMirrorDataPoints(board, nextDataPoints, nextKeyPoints, params) {
+    for (let index = 1; index < nextDataPoints.length - 2; index++) {
+        adjustByCustomPointStartIndex(board, index, nextDataPoints, nextKeyPoints, params);
     }
-    return result;
-};
-const getPolygonEdgeByConnectionPoint = (corners, point) => {
-    for (let index = 1; index <= corners.length; index++) {
-        let start = corners[index - 1];
-        let end = index === corners.length ? corners[0] : corners[index];
-        if (isPointOnSegment(point, start, end)) {
-            return [start, end];
-        }
+    return nextDataPoints;
+}
+/**
+ * adjust based parallel segment
+ */
+const adjustByCustomPointStartIndex = (board, customPointStartIndex, nextDataPoints, nextKeyPoints, params) => {
+    const beforePoint = nextDataPoints[customPointStartIndex - 1];
+    const startPoint = nextDataPoints[customPointStartIndex];
+    const endPoint = nextDataPoints[customPointStartIndex + 1];
+    const afterPoint = nextDataPoints[customPointStartIndex + 2];
+    const beforeSegment = [beforePoint, startPoint];
+    const afterSegment = [endPoint, afterPoint];
+    const isStraightWithBefore = Point.isAlign(beforeSegment);
+    const isStraightWithAfter = Point.isAlign(afterSegment);
+    let isAdjustStart = false;
+    let isAdjustEnd = false;
+    if (!isStraightWithBefore || !isStraightWithAfter) {
+        const midKeyPointsWithBefore = getMidKeyPoints(nextKeyPoints, beforeSegment[0], beforeSegment[1]);
+        const midKeyPointsWithAfter = getMidKeyPoints(nextKeyPoints, afterSegment[0], afterSegment[1]);
+        const hasMidKeyPoints = midKeyPointsWithBefore.length > 0 && midKeyPointsWithAfter.length > 0;
+        isAdjustStart = !isStraightWithBefore && !hasMidKeyPoints;
+        isAdjustEnd = !isStraightWithAfter && !hasMidKeyPoints;
     }
-    return null;
-};
-
-function generateCloudPath(rectangle) {
-    const divisionWidth = rectangle.width / 7;
-    const divisionHeight = rectangle.height / 3.2;
-    const xRadius = divisionWidth / 8.5;
-    const yRadius = divisionHeight / 20;
-    const startPoint = [rectangle.x + divisionWidth, rectangle.y + divisionHeight];
-    const arcCommands = [
-        {
-            rx: xRadius,
-            ry: yRadius * 1.2,
-            xAxisRotation: 0,
-            largeArcFlag: 1,
-            sweepFlag: 1,
-            endX: rectangle.x + divisionWidth * 2,
-            endY: rectangle.y + divisionHeight / 2
-        },
-        {
-            rx: xRadius,
-            ry: yRadius,
-            xAxisRotation: 0,
-            largeArcFlag: 1,
-            sweepFlag: 1,
-            endX: rectangle.x + divisionWidth * 4.2,
-            endY: rectangle.y + divisionHeight / 2.2
-        },
-        {
-            rx: xRadius,
-            ry: yRadius,
-            xAxisRotation: 0,
-            largeArcFlag: 1,
-            sweepFlag: 1,
-            endX: rectangle.x + divisionWidth * 5.8,
-            endY: rectangle.y + divisionHeight
-        },
-        {
-            rx: xRadius,
-            ry: yRadius * 1.3,
-            xAxisRotation: 0,
-            largeArcFlag: 1,
-            sweepFlag: 1,
-            endX: rectangle.x + divisionWidth * 6,
-            endY: rectangle.y + divisionHeight * 2.2
-        },
-        {
-            rx: xRadius,
-            ry: yRadius * 1.2,
-            xAxisRotation: 0,
-            largeArcFlag: 1,
-            sweepFlag: 1,
-            endX: rectangle.x + divisionWidth * 5,
-            endY: rectangle.y + divisionHeight * 2.8
-        },
-        {
-            rx: xRadius,
-            ry: yRadius / 1.2,
-            xAxisRotation: 0,
-            largeArcFlag: 1,
-            sweepFlag: 1,
-            endX: rectangle.x + divisionWidth * 2.8,
-            endY: rectangle.y + divisionHeight * 2.8
-        },
-        {
-            rx: xRadius,
-            ry: yRadius,
-            xAxisRotation: 0,
-            largeArcFlag: 1,
-            sweepFlag: 1,
-            endX: rectangle.x + divisionWidth,
-            endY: rectangle.y + divisionHeight * 2.2
-        },
-        {
-            rx: xRadius,
-            ry: yRadius * 1.42,
-            xAxisRotation: 0,
-            largeArcFlag: 1,
-            sweepFlag: 1,
-            endX: rectangle.x + divisionWidth,
-            endY: rectangle.y + divisionHeight
+    if (isAdjustStart || isAdjustEnd) {
+        const parallelSegment = [startPoint, endPoint];
+        const parallelSegments = findOrthogonalParallelSegments(parallelSegment, nextKeyPoints);
+        const mirrorSegments = findMirrorSegments(board, parallelSegment, parallelSegments, params.sourceRectangle, params.targetRectangle);
+        if (mirrorSegments.length === 1) {
+            const mirrorSegment = mirrorSegments[0];
+            if (isAdjustStart) {
+                nextDataPoints.splice(customPointStartIndex, 1, mirrorSegment[0]);
+            }
+            if (isAdjustEnd) {
+                nextDataPoints.splice(customPointStartIndex + 1, 1, mirrorSegment[1]);
+            }
         }
-    ];
-    return { startPoint, arcCommands };
-}
-const CloudEngine = {
-    draw(board, rectangle, options) {
-        const rs = PlaitBoard.getRoughSVG(board);
-        const { startPoint, arcCommands } = generateCloudPath(rectangle);
-        const pathData = `M ${startPoint[0]} ${startPoint[1]} ` +
-            arcCommands
-                .map((command) => `A ${command.rx} ${command.ry} ${command.xAxisRotation} ${command.largeArcFlag} ${command.sweepFlag} ${command.endX} ${command.endY}`)
-                .join('\n') +
-            ' Z';
-        const svgElement = rs.path(pathData, { ...options, fillStyle: 'solid' });
-        setPathStrokeLinecap(svgElement, 'round');
-        return svgElement;
-    },
-    isInsidePoint(rectangle, point) {
-        const rangeRectangle = RectangleClient.getRectangleByPoints([point, point]);
-        return RectangleClient.isHit(rectangle, rangeRectangle);
-    },
-    getCornerPoints(rectangle) {
-        return RectangleClient.getCornerPoints(rectangle);
-    },
-    getNearestPoint(rectangle, point) {
-        const { startPoint, arcCommands } = generateCloudPath(rectangle);
-        let minDistance = Infinity;
-        let nearestPoint = point;
-        let currentStart = startPoint;
-        for (const arcCommand of arcCommands) {
-            const arcNearestPoint = getNearestPointBetweenPointAndArc(point, currentStart, arcCommand);
-            const distance = distanceBetweenPointAndPoint(point[0], point[1], arcNearestPoint[0], arcNearestPoint[1]);
-            if (distance < minDistance) {
-                minDistance = distance;
-                nearestPoint = arcNearestPoint;
+        else {
+            const isHorizontal = Point.isHorizontal(startPoint, endPoint);
+            const adjustIndex = isHorizontal ? 0 : 1;
+            if (isAdjustStart) {
+                const newStartPoint = [startPoint[0], startPoint[1]];
+                newStartPoint[adjustIndex] = beforePoint[adjustIndex];
+                nextDataPoints.splice(customPointStartIndex, 1, newStartPoint);
+            }
+            if (isAdjustEnd) {
+                const newEndPoint = [endPoint[0], endPoint[1]];
+                newEndPoint[adjustIndex] = afterPoint[adjustIndex];
+                nextDataPoints.splice(customPointStartIndex + 1, 1, newEndPoint);
             }
-            currentStart = [arcCommand.endX, arcCommand.endY];
         }
-        return nearestPoint;
-    },
-    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
-        const corners = CloudEngine.getCornerPoints(rectangle);
-        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        return getPolygonEdgeByConnectionPoint(corners, point);
-    },
-    getConnectorPoints(rectangle) {
-        return RectangleClient.getEdgeCenterPoints(rectangle);
-    },
-    getTextRectangle(element) {
-        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
-        const strokeWidth = getStrokeWidthByElement(element);
-        const height = element.textHeight;
-        const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
-        const width = originWidth / 1.5;
-        return {
-            height,
-            width: width > 0 ? width : 0,
-            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + originWidth / 6,
-            y: elementRectangle.y + elementRectangle.height / 6 + ((elementRectangle.height * 4) / 6 - height) / 2
-        };
     }
 };
-
-const isTextExceedingBounds = (geometry) => {
-    const client = RectangleClient.getRectangleByPoints(geometry.points);
-    if (geometry.textHeight && geometry.textHeight > client.height) {
+function isUpdatedHandleIndex(board, element, dataPoints, nextRenderPoints, handleIndex) {
+    const { deleteCount } = getIndexAndDeleteCountByKeyPoint(board, element, dataPoints, nextRenderPoints, handleIndex);
+    if (deleteCount !== null && deleteCount > 1) {
         return true;
     }
     return false;
-};
-const isHitArrowLineText = (board, element, point) => {
-    return getHitArrowLineTextIndex(board, element, point) !== -1;
-};
-const isHitPolyLine = (pathPoints, point) => {
-    const distance = distanceBetweenPointAndSegments(point, pathPoints);
-    return distance <= HIT_DISTANCE_BUFFER;
-};
-const isHitArrowLine = (board, element, point) => {
-    const points = getArrowLinePoints(board, element);
-    const isHitText = isHitArrowLineText(board, element, point);
-    return isHitText || isHitPolyLine(points, point);
-};
-const isHitVectorLine = (board, element, point) => {
-    const points = getVectorLinePoints(board, element);
-    if (isClosedPoints(element.points)) {
-        return isPointInPolygon(point, points) || isHitPolyLine(points, point);
-    }
-    else {
-        return isHitPolyLine(points, point);
-    }
-};
-const isRectangleHitElementText = (element, rectangle) => {
-    const engine = getEngine(element.shape);
-    if (isMultipleTextGeometry(element)) {
-        const texts = element.texts;
-        return texts.some((item) => {
-            const textClient = engine.getTextRectangle(element, { id: item.id });
-            return isRectangleHitRotatedPoints(rectangle, RectangleClient.getCornerPoints(textClient), element.angle);
-        });
+}
+function getMidKeyPoints(simplifiedNextKeyPoints, startPoint, endPoint) {
+    let midElbowPoints = [];
+    let startPointIndex = -1;
+    let endPointIndex = -1;
+    for (let i = 0; i < simplifiedNextKeyPoints.length; i++) {
+        if (Point.isAlign([simplifiedNextKeyPoints[i], startPoint])) {
+            startPointIndex = i;
+        }
+        if (startPointIndex > -1 && Point.isAlign([simplifiedNextKeyPoints[i], endPoint])) {
+            endPointIndex = i;
+            break;
+        }
     }
-    else {
-        const textClient = engine.getTextRectangle ? engine.getTextRectangle(element) : getTextRectangle(element);
-        return isRectangleHitRotatedPoints(rectangle, RectangleClient.getCornerPoints(textClient), element.angle);
+    if (startPointIndex > -1 && endPointIndex > -1) {
+        midElbowPoints = simplifiedNextKeyPoints.slice(startPointIndex, endPointIndex + 1);
     }
-};
-const isHitElementText = (element, point) => {
-    const engine = getEngine(element.shape);
-    if (isMultipleTextGeometry(element)) {
-        const texts = element.texts;
-        return texts.some((item) => {
-            const textClient = engine.getTextRectangle(element, { id: item.id });
-            return RectangleClient.isPointInRectangle(textClient, point);
-        });
+    return midElbowPoints;
+}
+function findOrthogonalParallelSegments(segment, keyPoints) {
+    const isHorizontalSegment = Point.isHorizontal(segment[0], segment[1]);
+    const parallelSegments = [];
+    for (let i = 0; i < keyPoints.length - 1; i++) {
+        const current = keyPoints[i];
+        const next = keyPoints[i + 1];
+        const isHorizontal = Point.isHorizontal(current, next, 0.1);
+        if (isHorizontalSegment && isHorizontal) {
+            parallelSegments.push([current, next]);
+        }
+        if (!isHorizontalSegment && !isHorizontal) {
+            parallelSegments.push([current, next]);
+        }
     }
-    else {
-        const textClient = engine.getTextRectangle ? engine.getTextRectangle(element) : getTextRectangle(element);
-        return RectangleClient.isPointInRectangle(textClient, point);
+    return parallelSegments;
+}
+function findMirrorSegments(board, segment, parallelSegments, sourceRectangle, targetRectangle) {
+    debugGenerator$4.isDebug() && debugGenerator$4.clear();
+    const mirrorSegments = [];
+    for (let index = 0; index < parallelSegments.length; index++) {
+        const parallelPath = parallelSegments[index];
+        const startPoint = [segment[0][0], segment[0][1]];
+        const endPoint = [segment[1][0], segment[1][1]];
+        const isHorizontal = Point.isHorizontal(startPoint, endPoint);
+        const adjustDataIndex = isHorizontal ? 0 : 1;
+        startPoint[adjustDataIndex] = parallelPath[0][adjustDataIndex];
+        endPoint[adjustDataIndex] = parallelPath[1][adjustDataIndex];
+        const fakeRectangle = RectangleClient.getRectangleByPoints([startPoint, endPoint, ...parallelPath]);
+        const isValid = !RectangleClient.isHit(fakeRectangle, sourceRectangle) && !RectangleClient.isHit(fakeRectangle, targetRectangle);
+        if (isValid) {
+            mirrorSegments.push([startPoint, endPoint]);
+            debugGenerator$4.isDebug() && debugGenerator$4.drawPolygon(board, RectangleClient.getCornerPoints(fakeRectangle));
+        }
     }
-};
-const isEmptyTextElement = (element) => {
-    if (!isDrawElementIncludeText(element)) {
+    return mirrorSegments;
+}
+const hasIllegalElbowPoint = (midDataPoints) => {
+    if (midDataPoints.length === 1) {
         return true;
     }
-    const editor = getFirstTextEditor(element);
-    return Editor.isEmpty(editor, editor.children[0]);
-};
-const isRectangleHitDrawElement = (board, element, selection) => {
-    const rangeRectangle = RectangleClient.getRectangleByPoints([selection.anchor, selection.focus]);
-    if (PlaitDrawElement.isGeometry(element)) {
-        const isHitElement = isRectangleHitRotatedElement(board, rangeRectangle, element);
-        if (isHitElement) {
-            return isHitElement;
+    return midDataPoints.some((item, index) => {
+        const beforePoint = midDataPoints[index - 1];
+        const afterPoint = midDataPoints[index + 1];
+        const beforeSegment = beforePoint && [beforePoint, item];
+        const afterSegment = afterPoint && [item, afterPoint];
+        const isStraightWithBefore = beforeSegment && Point.isAlign(beforeSegment);
+        const isStraightWithAfter = afterSegment && Point.isAlign(afterSegment);
+        if (index === 0) {
+            return !isStraightWithAfter;
         }
-        return !isEmptyTextElement(element) && isRectangleHitElementText(element, rangeRectangle);
-    }
-    if (PlaitDrawElement.isImage(element)) {
-        return isRectangleHitRotatedElement(board, rangeRectangle, element);
-    }
-    if (PlaitDrawElement.isArrowLine(element)) {
-        const points = getArrowLinePoints(board, element);
-        return isLineHitRectangle(points, rangeRectangle);
-    }
-    if (PlaitDrawElement.isVectorLine(element)) {
-        const points = getVectorLinePoints(board, element);
-        return isLineHitRectangle(points, rangeRectangle);
-    }
-    return null;
-};
-const isRectangleHitRotatedElement = (board, rectangle, element) => {
-    const client = RectangleClient.getRectangleByPoints(element.points);
-    return isRectangleHitRotatedPoints(rectangle, RectangleClient.getCornerPoints(client), element.angle);
-};
-const isRectangleHitRotatedPoints = (rectangle, points, angle) => {
-    let rotatedPoints = rotatePointsByAngle(points, angle) || points;
-    return isLineHitRectangle(rotatedPoints, rectangle);
+        if (index === midDataPoints.length - 1) {
+            return !isStraightWithBefore;
+        }
+        return !isStraightWithBefore && !isStraightWithAfter;
+    });
 };
-const getHitDrawElement = (board, elements) => {
-    let firstFilledElement = getFirstFilledDrawElement(board, elements);
-    let endIndex = elements.length;
-    if (firstFilledElement) {
-        endIndex = elements.indexOf(firstFilledElement) + 1;
-    }
-    const newElements = elements.slice(0, endIndex);
-    const element = getFirstTextOrLineElement(newElements);
-    if (element) {
-        return element;
+
+const ARROW_LENGTH = 20;
+const drawArrowLineArrow = (element, points, options) => {
+    const arrowG = createG();
+    if (PlaitArrowLine.isSourceMark(element, ArrowLineMarkerType.none) && PlaitArrowLine.isTargetMark(element, ArrowLineMarkerType.none)) {
+        return null;
     }
-    const sortElements = sortElementsByArea(board, newElements, 'asc');
-    return sortElements[0];
-};
-const getFirstFilledDrawElement = (board, elements) => {
-    let filledElement = null;
-    for (let i = 0; i < elements.length; i++) {
-        const element = elements[i];
-        if (isClosedCustomGeometry(board, element) || isClosedDrawElement(element)) {
-            const fill = getFillByElement(board, element);
-            if (isFilled(fill)) {
-                filledElement = element;
-                break;
-            }
-        }
+    const strokeWidth = getStrokeWidthByElement(element);
+    const offset = (strokeWidth * strokeWidth) / 3;
+    if (points.length === 1) {
+        points = [points[0], [points[0][0] + 0.1, points[0][1]]];
     }
-    return filledElement;
-};
-const isFilledDrawElement = (board, element) => {
-    return getFirstFilledDrawElement(board, [element]) !== null;
-};
-const getFirstTextOrLineElement = (elements) => {
-    const texts = elements.filter((item) => PlaitDrawElement.isText(item));
-    if (texts.length) {
-        return texts[0];
+    if (!PlaitArrowLine.isSourceMark(element, ArrowLineMarkerType.none)) {
+        const source = getExtendPoint(points[0], points[1], ARROW_LENGTH + offset);
+        const sourceArrow = getArrow(element, { marker: element.source.marker, source, target: points[0], isSource: true }, options);
+        sourceArrow && arrowG.appendChild(sourceArrow);
     }
-    const lines = elements.filter((item) => PlaitDrawElement.isArrowLine(item));
-    if (lines.length) {
-        return lines[0];
+    if (!PlaitArrowLine.isTargetMark(element, ArrowLineMarkerType.none)) {
+        const source = getExtendPoint(points[points.length - 1], points[points.length - 2], ARROW_LENGTH + offset);
+        const arrow = getArrow(element, { marker: element.target.marker, source, target: points[points.length - 1], isSource: false }, options);
+        arrow && arrowG.appendChild(arrow);
     }
-    return null;
+    return arrowG;
 };
-const debugKey$4 = 'debug:plait:hit:shape:edge:sample-points';
-const debugGenerator$4 = createDebugGenerator(debugKey$4);
-const shapes = [BasicShapes.cloud];
-const isHitDrawElement = (board, element, point, isStrict = true) => {
-    const rectangle = board.getRectangle(element);
-    point = rotateAntiPointsByElement(point, element) || point;
-    if (PlaitDrawElement.isGeometry(element) && rectangle) {
-        if (debugGenerator$4.isDebug() && shapes.includes(element.shape)) {
-            debugGenerator$4.clear();
-            const { startPoint, arcCommands } = generateCloudPath(rectangle);
-            const points = [startPoint, ...arcCommands.map((arc) => [arc.endX, arc.endY])];
-            debugGenerator$4.drawCircles(board, points, 5, false);
-            let minDistance = Infinity;
-            let nearestPoint = point;
-            let currentStart = startPoint;
-            for (const arc of arcCommands) {
-                const arcNearestPoint = getNearestPointBetweenPointAndArc(point, currentStart, arc);
-                const distance = distanceBetweenPointAndPoint(point[0], point[1], arcNearestPoint[0], arcNearestPoint[1]);
-                const { center } = getEllipseArcCenter(currentStart, arc);
-                debugGenerator$4.drawCircles(board, [center], 8, false, { fill: 'yellow' });
-                if (distance < minDistance) {
-                    minDistance = distance;
-                    nearestPoint = arcNearestPoint;
-                }
-                currentStart = [arc.endX, arc.endY];
-            }
-            debugGenerator$4.drawCircles(board, [point], 12, false, { fill: 'black', stroke: 'black' });
-            debugGenerator$4.drawCircles(board, [nearestPoint], 12, false, { fill: 'green', stroke: 'green' });
+const getArrow = (element, arrowOptions, options) => {
+    const { marker, target, source, isSource } = arrowOptions;
+    let targetArrow;
+    switch (marker) {
+        case ArrowLineMarkerType.openTriangle: {
+            targetArrow = drawOpenTriangle(element, source, target, options);
+            break;
         }
-        if (isHitEdgeOfShape(board, element, point, HIT_DISTANCE_BUFFER)) {
-            return true;
+        case ArrowLineMarkerType.solidTriangle: {
+            targetArrow = drawSolidTriangle(source, target, options);
+            break;
         }
-        const engine = getEngine(getElementShape(element));
-        if (PlaitDrawElement.isText(element)) {
-            const textClient = getTextRectangle(element);
-            return RectangleClient.isPointInRectangle(textClient, point);
+        case ArrowLineMarkerType.arrow: {
+            targetArrow = drawArrow(element, source, target, options);
+            break;
         }
-        if (!!isStrict && isEmptyTextElement(element) && !isFilledDrawElement(board, element)) {
-            return false;
+        case ArrowLineMarkerType.sharpArrow: {
+            targetArrow = drawSharpArrow(source, target, options);
+            break;
         }
-        const isHitText = isHitElementText(element, point);
-        return isHitText || engine.isInsidePoint(rectangle, point);
-    }
-    if (PlaitDrawElement.isImage(element)) {
-        const client = RectangleClient.getRectangleByPoints(element.points);
-        return RectangleClient.isPointInRectangle(client, point);
-    }
-    if (PlaitDrawElement.isArrowLine(element)) {
-        return isHitArrowLine(board, element, point);
-    }
-    if (PlaitDrawElement.isVectorLine(element)) {
-        return isHitVectorLine(board, element, point);
-    }
-    return null;
-};
-const isHitEdgeOfShape = (board, element, point, hitDistanceBuffer) => {
-    const nearestPoint = getNearestPoint(element, point);
-    const distance = distanceBetweenPointAndPoint(nearestPoint[0], nearestPoint[1], point[0], point[1]);
-    return distance <= hitDistanceBuffer;
-};
-const isInsideOfShape = (board, element, point, hitDistanceBuffer) => {
-    const client = RectangleClient.inflate(RectangleClient.getRectangleByPoints(element.points), hitDistanceBuffer);
-    return getEngine(getElementShape(element)).isInsidePoint(client, point);
-};
-const isHitElementInside = (board, element, point) => {
-    const rectangle = board.getRectangle(element);
-    point = rotateAntiPointsByElement(point, element) || point;
-    if (PlaitDrawElement.isGeometry(element) && !PlaitDrawElement.isGeometryByTable(element)) {
-        const engine = getEngine(getElementShape(element));
-        const isHitInside = engine.isInsidePoint(rectangle, point);
-        if (isHitInside) {
-            return isHitInside;
+        case ArrowLineMarkerType.oneSideUp: {
+            targetArrow = drawOneSideArrow(source, target, isSource ? 'down' : 'up', options);
+            break;
         }
-        if (engine.getTextRectangle) {
-            const isHitText = isHitElementText(element, point);
-            if (isHitText) {
-                return isHitText;
-            }
+        case ArrowLineMarkerType.oneSideDown: {
+            targetArrow = drawOneSideArrow(source, target, isSource ? 'up' : 'down', options);
+            break;
+        }
+        case ArrowLineMarkerType.hollowTriangle: {
+            targetArrow = drawHollowTriangleArrow(source, target, options);
+            break;
+        }
+        case ArrowLineMarkerType.singleSlash: {
+            targetArrow = drawSingleSlash(source, target, isSource, options);
+            break;
         }
     }
-    if (PlaitDrawElement.isImage(element)) {
-        const client = RectangleClient.getRectangleByPoints(element.points);
-        return RectangleClient.isPointInRectangle(client, point);
-    }
-    if (PlaitDrawElement.isArrowLine(element)) {
-        return isHitArrowLine(board, element, point);
-    }
-    if (PlaitDrawElement.isVectorLine(element)) {
-        return isHitVectorLine(board, element, point);
-    }
-    return null;
+    return targetArrow;
 };
-
-const getTextRectangle = (element) => {
-    const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
-    const strokeWidth = getStrokeWidthByElement(element);
-    const height = element.textHeight;
-    const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
-    return {
-        height,
-        width: width > 0 ? width : 0,
-        x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
-        y: elementRectangle.y + (elementRectangle.height - height) / 2
-    };
+const drawSharpArrow = (source, target, options) => {
+    const startPoint = target;
+    const { pointLeft, pointRight } = arrowPoints(source, target, 20);
+    const g = createG();
+    const path = createPath();
+    let polylinePath = `M${pointRight[0]},${pointRight[1]}A25,25,20,0,1,${pointLeft[0]},${pointLeft[1]}L${startPoint[0]},${startPoint[1]}Z`;
+    path.setAttribute('d', polylinePath);
+    path.setAttribute('stroke', `${options?.stroke}`);
+    path.setAttribute('stroke-width', `${options?.strokeWidth}`);
+    path.setAttribute('fill', `${options?.stroke}`);
+    g.appendChild(path);
+    return g;
 };
-const getStrokeWidthByElement = (element) => {
-    if (PlaitDrawElement.isText(element)) {
-        return 0;
-    }
-    const strokeWidth = element.strokeWidth || DefaultDrawStyle.strokeWidth;
-    return strokeWidth;
+const drawArrow = (element, source, target, options) => {
+    const unitVector = getUnitVectorByPointAndPoint(source, target);
+    const strokeWidth = getStrokeWidthByElement(element);
+    const endPoint = [target[0] + (strokeWidth * unitVector[0]) / 2, target[1] + (strokeWidth * unitVector[1]) / 2];
+    const distance = distanceBetweenPointAndPoint(...source, ...endPoint);
+    const middlePoint = [
+        endPoint[0] - (((distance * 3) / 5 + strokeWidth) / 2) * unitVector[0],
+        endPoint[1] - (((distance * 3) / 5 + strokeWidth) / 2) * unitVector[1]
+    ];
+    const { pointLeft, pointRight } = arrowPoints(source, endPoint, 30);
+    const arrowG = drawLinearPath([pointLeft, endPoint, pointRight, middlePoint], { ...options, fill: options.stroke }, true);
+    const path = arrowG.querySelector('path');
+    path.setAttribute('stroke-linejoin', 'round');
+    return arrowG;
 };
-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 drawSolidTriangle = (source, target, options) => {
+    const endPoint = target;
+    const { pointLeft, pointRight } = arrowPoints(source, endPoint, 30);
+    return drawLinearPath([pointLeft, endPoint, pointRight], { ...options, fill: options.stroke }, true);
 };
-const isDrawElementIncludeText = (element) => {
-    if (PlaitDrawElement.isText(element)) {
+const drawOpenTriangle = (element, source, target, options) => {
+    const unitVector = getUnitVectorByPointAndPoint(source, target);
+    const strokeWidth = getStrokeWidthByElement(element);
+    const endPoint = [target[0] + (strokeWidth * unitVector[0]) / 2, target[1] + (strokeWidth * unitVector[1]) / 2];
+    const { pointLeft, pointRight } = arrowPoints(source, endPoint, 40);
+    return drawLinearPath([pointLeft, endPoint, pointRight], options);
+};
+const drawOneSideArrow = (source, target, side, options) => {
+    const { pointLeft, pointRight } = arrowPoints(source, target, 40);
+    return drawLinearPath([side === 'up' ? pointRight : pointLeft, target], options);
+};
+const drawSingleSlash = (source, target, isSource, options) => {
+    const length = distanceBetweenPointAndPoint(...source, ...target);
+    const middlePoint = getExtendPoint(target, source, length / 2);
+    const angle = isSource ? 120 : 60;
+    const start = rotate(...source, ...middlePoint, (angle * Math.PI) / 180);
+    const end = rotate(...target, ...middlePoint, (angle * Math.PI) / 180);
+    return drawLinearPath([start, end], options);
+};
+const drawHollowTriangleArrow = (source, target, options) => {
+    const { pointLeft, pointRight } = arrowPoints(source, target, 30);
+    return drawLinearPath([pointLeft, pointRight, target], { ...options, fill: 'white' }, true);
+};
+
+class ArrowLineShapeGenerator extends Generator {
+    canDraw(element) {
         return true;
     }
-    if (PlaitDrawElement.isImage(element)) {
-        return false;
-    }
-    if (PlaitDrawElement.isGeometry(element)) {
-        return isGeometryIncludeText(element);
-    }
-    if (PlaitDrawElement.isArrowLine(element)) {
-        const editors = getTextEditorsByElement(element);
-        return editors.length > 0;
-    }
-    if (PlaitDrawElement.isElementByTable(element)) {
-        return element.cells.some(cell => isCellIncludeText(cell));
+    draw(element) {
+        let lineG;
+        lineG = drawArrowLine(this.board, element);
+        return lineG;
     }
-    return true;
-};
-const isDrawElementsIncludeText = (elements) => {
-    return elements.some(item => {
-        return isDrawElementIncludeText(item);
-    });
+}
+
+const createArrowLineElement = (shape, points, source, target, texts, options) => {
+    return {
+        id: idCreator(),
+        type: 'arrow-line',
+        shape,
+        source,
+        texts: texts ? texts : [],
+        target,
+        opacity: 1,
+        points,
+        ...options
+    };
 };
-const isClosedDrawElement = (element) => {
-    if (PlaitDrawElement.isDrawElement(element)) {
-        if (PlaitDrawElement.isText(element) || PlaitDrawElement.isArrowLine(element) || PlaitDrawElement.isImage(element)) {
-            return false;
+const getArrowLinePoints = (board, element) => {
+    switch (element.shape) {
+        case ArrowLineShape.elbow: {
+            return getElbowPoints(board, element);
         }
-        if (PlaitDrawElement.isVectorLine(element)) {
-            return isClosedPoints(element.points);
+        case ArrowLineShape.curve: {
+            return getCurvePoints(board, element);
         }
-        if (PlaitDrawElement.isGeometry(element)) {
-            return isGeometryClosed(element);
+        default: {
+            const points = PlaitArrowLine.getPoints(board, element);
+            const handleRefPair = getArrowLineHandleRefPair(board, element);
+            points[0] = handleRefPair.source.point;
+            points[points.length - 1] = handleRefPair.target.point;
+            return points;
         }
-        return true;
     }
-    return false;
-};
-const isClosedCustomGeometry = (board, value) => {
-    return PlaitDrawElement.isCustomGeometryElement(board, value) && isClosedPoints(value.points);
 };
-const getSnappingShape = (board, point) => {
-    let hitElement = getHitShape(board, point);
-    if (hitElement) {
-        const ref = getSnappingRef(board, hitElement, point);
-        if (ref.isHitConnector || ref.isHitEdge) {
-            return hitElement;
+const getCurvePoints = (board, element) => {
+    if (element.points.length === 2) {
+        const handleRefPair = getArrowLineHandleRefPair(board, element);
+        const { source, target } = handleRefPair;
+        const sourceBoundElement = handleRefPair.source.boundElement;
+        const targetBoundElement = handleRefPair.target.boundElement;
+        let curvePoints = [source.point];
+        const sumDistance = distanceBetweenPointAndPoint(...source.point, ...target.point);
+        const offset = 12 + sumDistance / 3;
+        if (sourceBoundElement) {
+            curvePoints.push(getPointByVectorComponent(source.point, source.vector, offset));
         }
-    }
-    return null;
-};
-const getSnappingRef = (board, hitElement, point) => {
-    const rotatedPoint = rotateAntiPointsByElement(point, hitElement) || point;
-    const connectorPoint = getHitConnectorPoint(rotatedPoint, hitElement);
-    const edgePoint = getNearestPoint(hitElement, rotatedPoint);
-    const isHitEdge = isHitEdgeOfShape(board, hitElement, rotatedPoint, LINE_SNAPPING_BUFFER);
-    return { isHitEdge, isHitConnector: !!connectorPoint, connectorPoint, edgePoint };
-};
-const getHitShape = (board, point, offset = LINE_HIT_GEOMETRY_BUFFER) => {
-    let hitShape = null;
-    traverseDrawShapes(board, (element) => {
-        if (hitShape === null && isInsideOfShape(board, element, rotateAntiPointsByElement(point, element) || point, offset * 2)) {
-            hitShape = element;
+        if (targetBoundElement) {
+            curvePoints.push(getPointByVectorComponent(target.point, target.vector, offset));
         }
-    });
-    return hitShape;
-};
-const traverseDrawShapes = (board, callback) => {
-    depthFirstRecursion(board, node => {
-        if (!PlaitBoard.isBoard(node) && PlaitDrawElement.isShapeElement(node)) {
-            callback(node);
+        const isSingleBound = (sourceBoundElement && !targetBoundElement) || (!sourceBoundElement && targetBoundElement);
+        if (isSingleBound) {
+            curvePoints.push(target.point);
+            const points = Q2C(curvePoints);
+            return pointsOnBezierCurves(points);
         }
-    }, getIsRecursionFunc(board), true);
-};
-const drawShape = (board, outerRectangle, shape, roughOptions, drawOptions) => {
-    return getEngine(shape).draw(board, outerRectangle, roughOptions, drawOptions);
-};
-const drawBoundReaction = (board, element, roughOptions = { hasMask: true, hasConnector: true }) => {
-    const g = createG();
-    const rectangle = RectangleClient.getRectangleByPoints(element.points);
-    const activeRectangle = RectangleClient.inflate(rectangle, SNAPPING_STROKE_WIDTH);
-    const shape = getElementShape(element);
-    let drawOptions;
-    if (PlaitDrawElement.isElementByTable(element)) {
-        drawOptions = { element };
-    }
-    const strokeG = drawShape(board, activeRectangle, shape, {
-        stroke: SELECTION_BORDER_COLOR,
-        strokeWidth: SNAPPING_STROKE_WIDTH
-    }, drawOptions);
-    g.appendChild(strokeG);
-    if (roughOptions.hasMask) {
-        const maskG = drawShape(board, activeRectangle, shape, {
-            stroke: SELECTION_BORDER_COLOR,
-            strokeWidth: 0,
-            fill: isClosedDrawElement(element) ? SELECTION_FILL_COLOR : DefaultDrawStyle.fill,
-            fillStyle: 'solid'
-        }, drawOptions);
-        g.appendChild(maskG);
-    }
-    if (roughOptions.hasConnector) {
-        const connectorPoints = getEngine(shape).getConnectorPoints(rectangle);
-        connectorPoints.forEach(point => {
-            const circleG = drawCircle(PlaitBoard.getRoughSVG(board), point, 8, {
-                stroke: SELECTION_BORDER_COLOR,
-                strokeWidth: ACTIVE_STROKE_WIDTH,
-                fill: '#FFF',
-                fillStyle: 'solid'
-            });
-            g.appendChild(circleG);
-        });
-    }
-    return g;
-};
-const getTextKey = (element, text) => {
-    if (element && isMultipleTextGeometry(element)) {
-        return `${element.id}-${text.id}`;
+        if (!sourceBoundElement && !targetBoundElement) {
+            curvePoints.push(getPointByVectorComponent(source.point, source.vector, offset));
+            curvePoints.push(getPointByVectorComponent(target.point, target.vector, offset));
+        }
+        curvePoints.push(target.point);
+        return pointsOnBezierCurves(curvePoints);
     }
     else {
-        return text.id;
+        let dataPoints = PlaitArrowLine.getPoints(board, element);
+        dataPoints = removeDuplicatePoints(dataPoints);
+        const points = catmullRomFitting(dataPoints);
+        return pointsOnBezierCurves(points);
     }
 };
-const getGeometryAlign = (board, element) => {
-    if (isMultipleTextGeometry(element)) {
-        const drawShapeText = element.texts.find(item => item.id.includes(GeometryCommonTextKeys.content));
-        return drawShapeText?.text.align || Alignment.center;
+const drawArrowLine = (board, element) => {
+    const strokeWidth = getStrokeWidthByElement(element);
+    const strokeColor = getStrokeColorByElement(board, element);
+    const strokeStyle = getStrokeStyleByElement(board, element);
+    const strokeLineDash = getStrokeLineDash(strokeStyle, strokeWidth);
+    const options = { stroke: strokeColor, strokeWidth, strokeLineDash };
+    const lineG = createG();
+    let points = getArrowLinePoints(board, element);
+    let line;
+    if (element.shape === ArrowLineShape.curve) {
+        line = PlaitBoard.getRoughSVG(board).curve(points, options);
     }
-    if (isSingleTextGeometry(element)) {
-        return element.text?.align || Alignment.center;
+    else {
+        line = drawLinearPath(points, options);
     }
-    if (PlaitDrawElement.isElementByTable(element)) {
-        const firstTextCell = element.cells.find(item => item.text);
-        return firstTextCell?.text?.align || Alignment.center;
+    const id = idCreator();
+    line.setAttribute('mask', `url(#${id})`);
+    if (element.strokeStyle === StrokeStyle.dotted) {
+        setStrokeLinecap(line, 'round');
     }
-    return Alignment.center;
+    lineG.appendChild(line);
+    const { mask, maskTargetFillRect } = drawArrowLineMask(board, element, id);
+    lineG.appendChild(mask);
+    line.appendChild(maskTargetFillRect);
+    const arrow = drawArrowLineArrow(element, points, { stroke: strokeColor, strokeWidth });
+    arrow && lineG.appendChild(arrow);
+    return lineG;
 };
-const isClosedPoints = (points) => {
-    const startPoint = points[0];
-    const endPoint = points[points.length - 1];
-    return startPoint[0] === endPoint[0] && startPoint[1] === endPoint[1];
+const getHitConnection = (board, point, hitElement) => {
+    let rectangle = RectangleClient.getRectangleByPoints(hitElement.points);
+    const ref = getSnappingRef(board, hitElement, point);
+    const connectionPoint = ref.connectorPoint || ref.edgePoint;
+    return [(connectionPoint[0] - rectangle.x) / rectangle.width, (connectionPoint[1] - rectangle.y) / rectangle.height];
 };
-
-const getStrokeColorByElement = (board, element) => {
-    const defaultColor = getDrawDefaultStrokeColor(board.theme.themeColorMode);
-    const strokeColor = element.strokeColor || defaultColor;
-    return strokeColor;
+const getHitConnectorPoint = (point, hitElement) => {
+    const rectangle = RectangleClient.getRectangleByPoints(hitElement.points);
+    const shape = getElementShape(hitElement);
+    const connectorPoints = getEngine(shape).getConnectorPoints(rectangle);
+    return connectorPoints.find((connectorPoint) => {
+        return distanceBetweenPointAndPoint(...connectorPoint, ...point) <= LINE_SNAPPING_CONNECTOR_BUFFER;
+    });
 };
-const getFillByElement = (board, element) => {
-    const defaultFill = PlaitDrawElement.isFlowchart(element) && isClosedDrawElement(element)
-        ? getFlowchartDefaultFill(board.theme.themeColorMode)
-        : DefaultDrawStyle.fill;
-    const fill = element.fill || defaultFill;
-    return fill;
+const getArrowLineTextRectangle = (board, element, index) => {
+    const text = element.texts[index];
+    const elbowPoints = getArrowLinePoints(board, element);
+    const point = getPointOnPolyline(elbowPoints, text.position);
+    return {
+        x: point[0] - text.width / 2,
+        y: point[1] - text.height / 2,
+        width: text.width,
+        height: text.height
+    };
 };
-const getStrokeStyleByElement = (board, element) => {
-    return element.strokeStyle || StrokeStyle.solid;
+const getArrowLines = (board) => {
+    return findElements(board, {
+        match: (element) => PlaitDrawElement.isArrowLine(element),
+        recursion: (element) => PlaitDrawElement.isDrawElement(element)
+    });
 };
-
-const debugKey$3 = 'debug:plait:line-mirror';
-const debugGenerator$3 = createDebugGenerator(debugKey$3);
-const alignPoints = (basePoint, movingPoint) => {
-    const newPoint = [...movingPoint];
-    if (Point.isVertical(newPoint, basePoint, LINE_ALIGN_TOLERANCE)) {
-        newPoint[0] = basePoint[0];
-    }
-    if (Point.isHorizontal(newPoint, basePoint, LINE_ALIGN_TOLERANCE)) {
-        newPoint[1] = basePoint[1];
+// quadratic Bezier to cubic Bezier
+const Q2C = (points) => {
+    const result = [];
+    const numSegments = points.length / 3;
+    for (let i = 0; i < numSegments; i++) {
+        const start = points[i];
+        const qControl = points[i + 1];
+        const end = points[i + 2];
+        const startDistance = distanceBetweenPointAndPoint(...start, ...qControl);
+        const endDistance = distanceBetweenPointAndPoint(...end, ...qControl);
+        const cControl1 = getExtendPoint(start, qControl, (startDistance * 2) / 3);
+        const cControl2 = getExtendPoint(end, qControl, (endDistance * 2) / 3);
+        result.push(start, cControl1, cControl2, end);
     }
-    return newPoint;
+    return result;
 };
-function getResizedPreviousAndNextPoint(nextRenderPoints, sourcePoint, targetPoint, handleIndex) {
-    const referencePoint = {
-        previous: null,
-        next: null
+const handleArrowLineCreating = (board, lineShape, sourcePoint, movingPoint, sourceElement, lineShapeG) => {
+    const hitElement = getSnappingShape(board, movingPoint);
+    const targetConnection = hitElement ? getHitConnection(board, movingPoint, hitElement) : undefined;
+    const sourceConnection = sourceElement ? getHitConnection(board, sourcePoint, sourceElement) : undefined;
+    const targetBoundId = hitElement ? hitElement.id : undefined;
+    const lineGenerator = new ArrowLineShapeGenerator(board);
+    const memorizedLatest = getLineMemorizedLatest();
+    let sourceMarker, targetMarker;
+    sourceMarker = memorizedLatest.source;
+    targetMarker = memorizedLatest.target;
+    sourceMarker && delete memorizedLatest.source;
+    targetMarker && delete memorizedLatest.target;
+    const temporaryLineElement = createArrowLineElement(lineShape, [sourcePoint, movingPoint], { marker: sourceMarker || ArrowLineMarkerType.none, connection: sourceConnection, boundId: sourceElement?.id }, { marker: targetMarker || ArrowLineMarkerType.arrow, connection: targetConnection, boundId: targetBoundId }, [], {
+        strokeWidth: DefaultLineStyle.strokeWidth,
+        ...memorizedLatest
+    });
+    const linePoints = getArrowLinePoints(board, temporaryLineElement);
+    const otherPoint = linePoints[0];
+    temporaryLineElement.points[1] = alignPoints(otherPoint, movingPoint);
+    lineGenerator.processDrawing(temporaryLineElement, lineShapeG);
+    PlaitBoard.getElementTopHost(board).append(lineShapeG);
+    return temporaryLineElement;
+};
+function drawArrowLineMask(board, element, id) {
+    const mask = createMask();
+    mask.setAttribute('id', id);
+    const points = getArrowLinePoints(board, element);
+    let rectangle = RectangleClient.getRectangleByPoints(points);
+    rectangle = RectangleClient.getOutlineRectangle(rectangle, -30);
+    const maskFillRect = createRect(rectangle, {
+        fill: 'white'
+    });
+    mask.appendChild(maskFillRect);
+    const texts = element.texts;
+    texts.forEach((text, index) => {
+        let textRectangle = getArrowLineTextRectangle(board, element, index);
+        textRectangle = RectangleClient.inflate(textRectangle, LINE_TEXT_SPACE * 2);
+        const rect = createRect(textRectangle, {
+            fill: 'black'
+        });
+        mask.appendChild(rect);
+    });
+    // open line
+    const maskTargetFillRect = createRect(rectangle);
+    maskTargetFillRect.setAttribute('opacity', '0');
+    maskTargetFillRect.setAttribute('fill', 'none');
+    return { mask, maskTargetFillRect };
+}
+
+const getHitArrowLineTextIndex = (board, element, point) => {
+    const texts = element.texts;
+    if (!texts.length)
+        return -1;
+    const points = getArrowLinePoints(board, element);
+    return texts.findIndex(text => {
+        const center = getPointOnPolyline(points, text.position);
+        const rectangle = {
+            x: center[0] - text.width / 2,
+            y: center[1] - text.height / 2,
+            width: text.width,
+            height: text.height
+        };
+        return RectangleClient.isHit(rectangle, RectangleClient.getRectangleByPoints([point, point]));
+    });
+};
+
+const isMultipleTextShape = (shape) => {
+    return GEOMETRY_WITH_MULTIPLE_TEXT.includes(shape);
+};
+const isMultipleTextGeometry = (geometry) => {
+    return PlaitDrawElement.isGeometry(geometry) && isMultipleTextShape(geometry.shape);
+};
+const getMultipleTextGeometryTextKeys = (shape) => {
+    return MultipleTextGeometryTextKeys[shape];
+};
+const createMultipleTextGeometryElement = (shape, points, options = {}) => {
+    const id = idCreator();
+    const drawShapeTexts = buildDefaultTextsByShape(shape);
+    return {
+        id,
+        type: 'geometry',
+        shape,
+        angle: 0,
+        opacity: 1,
+        texts: drawShapeTexts,
+        points,
+        ...options
     };
-    const startPoint = nextRenderPoints[handleIndex];
-    const endPoint = nextRenderPoints[handleIndex + 1];
-    const isHorizontal = Point.isHorizontal(startPoint, endPoint);
-    const isVertical = Point.isVertical(startPoint, endPoint);
-    const previousPoint = nextRenderPoints[handleIndex - 1] ?? nextRenderPoints[0];
-    const beforePreviousPoint = nextRenderPoints[handleIndex - 2] ?? sourcePoint;
-    if ((isHorizontal && Point.isHorizontal(beforePreviousPoint, previousPoint)) ||
-        (isVertical && Point.isVertical(beforePreviousPoint, previousPoint))) {
-        referencePoint.previous = previousPoint;
+};
+const buildDefaultTextsByShape = (shape) => {
+    const memorizedLatest = getMemorizedLatestByPointer(shape);
+    const textProperties = { ...memorizedLatest.textProperties };
+    const alignment = textProperties?.align;
+    const textHeight = textProperties?.textHeight || DefaultTextProperty.height;
+    delete textProperties?.align;
+    delete textProperties?.textHeight;
+    const defaultTexts = getDefaultGeometryProperty(shape)?.texts || [];
+    const textKeys = getMultipleTextGeometryTextKeys(shape);
+    return (textKeys || []).map((textKey) => {
+        const text = defaultTexts?.find((item) => item?.key === textKey);
+        return {
+            id: textKey,
+            text: buildText(text?.text || '', alignment || text?.align || Alignment.center, textProperties),
+            textHeight: textHeight
+        };
+    });
+};
+const getHitMultipleGeometryText = (element, point) => {
+    const engine = getEngine(element.shape);
+    const rectangle = RectangleClient.getRectangleByPoints([point, point]);
+    let hitText;
+    if (engine.getTextRectangle) {
+        hitText = element.texts.find(text => {
+            const textRectangle = engine.getTextRectangle(element, { id: text.id });
+            return RectangleClient.isHit(rectangle, textRectangle);
+        });
     }
-    const nextPoint = nextRenderPoints[handleIndex + 2] ?? nextRenderPoints[nextRenderPoints.length - 1];
-    const afterNextPoint = nextRenderPoints[handleIndex + 3] ?? targetPoint;
-    if ((isHorizontal && Point.isHorizontal(nextPoint, afterNextPoint)) || (isVertical && Point.isVertical(nextPoint, afterNextPoint))) {
-        referencePoint.next = nextPoint;
+    return hitText;
+};
+
+class VectorLineShapeGenerator extends Generator {
+    canDraw(element) {
+        return true;
+    }
+    draw(element) {
+        let lineG;
+        lineG = drawVectorLine(this.board, element);
+        return lineG;
     }
-    return referencePoint;
 }
-function alignElbowSegment(startKeyPoint, endKeyPoint, resizeState, resizedPreviousAndNextPoint) {
-    let newStartPoint = startKeyPoint;
-    let newEndPoint = endKeyPoint;
-    if (Point.isHorizontal(startKeyPoint, endKeyPoint)) {
-        const offsetY = Point.getOffsetY(resizeState.startPoint, resizeState.endPoint);
-        let pointY = startKeyPoint[1] + offsetY;
-        if (resizedPreviousAndNextPoint.previous && Math.abs(resizedPreviousAndNextPoint.previous[1] - pointY) < LINE_ALIGN_TOLERANCE) {
-            pointY = resizedPreviousAndNextPoint.previous[1];
+
+const getVectorLinePoints = (board, element) => {
+    switch (element.shape) {
+        case VectorLineShape.straight: {
+            return element.points;
         }
-        else if (resizedPreviousAndNextPoint.next && Math.abs(resizedPreviousAndNextPoint.next[1] - pointY) < LINE_ALIGN_TOLERANCE) {
-            pointY = resizedPreviousAndNextPoint.next[1];
+        case VectorLineShape.curve: {
+            if (element.points.length === 2) {
+                return pointsOnBezierCurves(element.points);
+            }
+            else {
+                let dataPoints = element.points;
+                const points = catmullRomFitting(dataPoints);
+                return pointsOnBezierCurves(points);
+            }
         }
-        newStartPoint = [startKeyPoint[0], pointY];
-        newEndPoint = [endKeyPoint[0], pointY];
+        default:
+            return null;
     }
-    if (Point.isVertical(startKeyPoint, endKeyPoint)) {
-        const offsetX = Point.getOffsetX(resizeState.startPoint, resizeState.endPoint);
-        let pointX = startKeyPoint[0] + offsetX;
-        if (resizedPreviousAndNextPoint.previous && Math.abs(resizedPreviousAndNextPoint.previous[0] - pointX) < LINE_ALIGN_TOLERANCE) {
-            pointX = resizedPreviousAndNextPoint.previous[0];
-        }
-        else if (resizedPreviousAndNextPoint.next && Math.abs(resizedPreviousAndNextPoint.next[0] - pointX) < LINE_ALIGN_TOLERANCE) {
-            pointX = resizedPreviousAndNextPoint.next[0];
-        }
-        newStartPoint = [pointX, startKeyPoint[1]];
-        newEndPoint = [pointX, endKeyPoint[1]];
+};
+const createVectorLineElement = (shape, points, options) => {
+    return {
+        id: idCreator(),
+        type: 'vector-line',
+        shape,
+        opacity: 1,
+        points,
+        ...options
+    };
+};
+const vectorLineCreating = (board, lineShape, points, movingPoint, lineShapeG) => {
+    const lineGenerator = new VectorLineShapeGenerator(board);
+    const memorizedLatest = getLineMemorizedLatest();
+    const temporaryLineElement = createVectorLineElement(lineShape, [...points, movingPoint], {
+        strokeWidth: DefaultLineStyle.strokeWidth,
+        ...memorizedLatest
+    });
+    const otherPoint = points[points.length - 1];
+    temporaryLineElement.points[temporaryLineElement.points.length - 1] = alignPoints(otherPoint, movingPoint);
+    lineGenerator.processDrawing(temporaryLineElement, lineShapeG);
+    PlaitBoard.getElementTopHost(board).append(lineShapeG);
+    return temporaryLineElement;
+};
+const drawVectorLine = (board, element) => {
+    const strokeWidth = getStrokeWidthByElement(element);
+    const strokeColor = getStrokeColorByElement(board, element);
+    const strokeStyle = getStrokeStyleByElement(board, element);
+    const strokeLineDash = getStrokeLineDash(strokeStyle, strokeWidth);
+    const fill = getFillByElement(board, element);
+    const options = { stroke: strokeColor, strokeWidth, strokeLineDash, fill };
+    const lineG = createG();
+    let points = getVectorLinePoints(board, element);
+    const line = drawLinearPath(points, options);
+    const id = idCreator();
+    line.setAttribute('mask', `url(#${id})`);
+    if (element.strokeStyle === StrokeStyle.dotted) {
+        setStrokeLinecap(line, 'round');
     }
-    return [newStartPoint, newEndPoint];
-}
-function getIndexAndDeleteCountByKeyPoint(board, element, dataPoints, nextRenderPoints, handleIndex) {
-    let index = null;
-    let deleteCount = null;
-    const startKeyPoint = nextRenderPoints[handleIndex];
-    const endKeyPoint = nextRenderPoints[handleIndex + 1];
-    if (!startKeyPoint || !endKeyPoint) {
-        return {
-            index,
-            deleteCount
-        };
+    lineG.appendChild(line);
+    return lineG;
+};
+
+const getCenterPointsOnPolygon$1 = (points) => {
+    const centerPoints = [];
+    for (let i = 0; i < points.length; i++) {
+        let j = i == points.length - 1 ? 0 : i + 1;
+        centerPoints.push([(points[i][0] + points[j][0]) / 2, (points[i][1] + points[j][1]) / 2]);
     }
-    const midDataPoints = dataPoints.slice(1, -1);
-    const startIndex = midDataPoints.findIndex(item => Point.isEquals(item, startKeyPoint));
-    const endIndex = midDataPoints.findIndex(item => Point.isEquals(item, endKeyPoint));
-    if (Math.max(startIndex, endIndex) > -1) {
-        if (startIndex > -1 && endIndex > -1) {
-            return {
-                index: startIndex,
-                deleteCount: 2
-            };
-        }
-        if (startIndex > -1 && endIndex === -1) {
-            const isReplace = startIndex < midDataPoints.length - 1 &&
-                Point.isAlign([midDataPoints[startIndex], midDataPoints[startIndex + 1], startKeyPoint, endKeyPoint]);
-            if (isReplace) {
-                return {
-                    index: startIndex,
-                    deleteCount: 2
-                };
-            }
-            return {
-                index: startIndex,
-                deleteCount: 1
-            };
-        }
-        if (startIndex === -1 && endIndex > -1) {
-            const isReplace = endIndex > 0 && Point.isAlign([midDataPoints[endIndex], midDataPoints[endIndex - 1], startKeyPoint, endKeyPoint]);
-            if (isReplace) {
-                return {
-                    index: endIndex - 1,
-                    deleteCount: 2
-                };
-            }
-            return {
-                index: endIndex,
-                deleteCount: 1
-            };
-        }
+    return centerPoints;
+};
+const getCrossingPointBetweenPointAndPolygon = (corners, point) => {
+    const result = [];
+    for (let index = 1; index <= corners.length; index++) {
+        let start = corners[index - 1];
+        let end = index === corners.length ? corners[0] : corners[index];
+        const crossingPoint = getCrossingPointsBetweenPointAndSegment(point, start, end);
+        result.push(...crossingPoint);
     }
-    else {
-        for (let i = 0; i < midDataPoints.length - 1; i++) {
-            const currentPoint = midDataPoints[i];
-            const nextPoint = midDataPoints[i + 1];
-            if (Point.isAlign([currentPoint, nextPoint, startKeyPoint, endKeyPoint])) {
-                index = i;
-                deleteCount = 2;
-                break;
-            }
-            if (Point.isAlign([currentPoint, nextPoint, startKeyPoint])) {
-                index = Math.min(i + 1, midDataPoints.length - 1);
-                deleteCount = 1;
-                break;
-            }
-            if (Point.isAlign([currentPoint, nextPoint, endKeyPoint])) {
-                index = Math.max(i - 1, 0);
-                deleteCount = 1;
-                break;
-            }
+    return result;
+};
+const getPolygonEdgeByConnectionPoint = (corners, point) => {
+    for (let index = 1; index <= corners.length; index++) {
+        let start = corners[index - 1];
+        let end = index === corners.length ? corners[0] : corners[index];
+        if (isPointOnSegment(point, start, end)) {
+            return [start, end];
         }
     }
-    if (index === null) {
-        deleteCount = 0;
-        if (midDataPoints.length > 0) {
-            const handleRefPair = getArrowLineHandleRefPair(board, element);
-            const params = getElbowLineRouteOptions(board, element, handleRefPair);
-            const keyPoints = removeDuplicatePoints(generateElbowLineRoute(params, board));
-            const nextKeyPoints = simplifyOrthogonalPoints(keyPoints.slice(1, keyPoints.length - 1));
-            const nextDataPoints = [nextRenderPoints[0], ...midDataPoints, nextRenderPoints[nextRenderPoints.length - 1]];
-            const mirrorDataPoints = getMirrorDataPoints(board, nextDataPoints, nextKeyPoints, params);
-            for (let i = handleIndex - 1; i >= 0; i--) {
-                const previousIndex = mirrorDataPoints.slice(1, -1).findIndex(item => Point.isEquals(item, nextRenderPoints[i]));
-                if (previousIndex > -1) {
-                    index = previousIndex + 1;
-                    break;
-                }
-            }
-            if (index === null) {
-                index = 0;
-                // When renderPoints is a straight line and dataPoints are not on the line,
-                // the default 'deleteCount' is set to midDataPoints.length.
-                if (Point.isAlign(nextRenderPoints)) {
-                    deleteCount = midDataPoints.length;
-                }
-            }
-        }
-        else {
-            index = 0;
+    return null;
+};
+
+function generateCloudPath(rectangle) {
+    const divisionWidth = rectangle.width / 7;
+    const divisionHeight = rectangle.height / 3.2;
+    const xRadius = divisionWidth / 8.5;
+    const yRadius = divisionHeight / 20;
+    const startPoint = [rectangle.x + divisionWidth, rectangle.y + divisionHeight];
+    const arcCommands = [
+        {
+            rx: xRadius,
+            ry: yRadius * 1.2,
+            xAxisRotation: 0,
+            largeArcFlag: 1,
+            sweepFlag: 1,
+            endX: rectangle.x + divisionWidth * 2,
+            endY: rectangle.y + divisionHeight / 2
+        },
+        {
+            rx: xRadius,
+            ry: yRadius,
+            xAxisRotation: 0,
+            largeArcFlag: 1,
+            sweepFlag: 1,
+            endX: rectangle.x + divisionWidth * 4.2,
+            endY: rectangle.y + divisionHeight / 2.2
+        },
+        {
+            rx: xRadius,
+            ry: yRadius,
+            xAxisRotation: 0,
+            largeArcFlag: 1,
+            sweepFlag: 1,
+            endX: rectangle.x + divisionWidth * 5.8,
+            endY: rectangle.y + divisionHeight
+        },
+        {
+            rx: xRadius,
+            ry: yRadius * 1.3,
+            xAxisRotation: 0,
+            largeArcFlag: 1,
+            sweepFlag: 1,
+            endX: rectangle.x + divisionWidth * 6,
+            endY: rectangle.y + divisionHeight * 2.2
+        },
+        {
+            rx: xRadius,
+            ry: yRadius * 1.2,
+            xAxisRotation: 0,
+            largeArcFlag: 1,
+            sweepFlag: 1,
+            endX: rectangle.x + divisionWidth * 5,
+            endY: rectangle.y + divisionHeight * 2.8
+        },
+        {
+            rx: xRadius,
+            ry: yRadius / 1.2,
+            xAxisRotation: 0,
+            largeArcFlag: 1,
+            sweepFlag: 1,
+            endX: rectangle.x + divisionWidth * 2.8,
+            endY: rectangle.y + divisionHeight * 2.8
+        },
+        {
+            rx: xRadius,
+            ry: yRadius,
+            xAxisRotation: 0,
+            largeArcFlag: 1,
+            sweepFlag: 1,
+            endX: rectangle.x + divisionWidth,
+            endY: rectangle.y + divisionHeight * 2.2
+        },
+        {
+            rx: xRadius,
+            ry: yRadius * 1.42,
+            xAxisRotation: 0,
+            largeArcFlag: 1,
+            sweepFlag: 1,
+            endX: rectangle.x + divisionWidth,
+            endY: rectangle.y + divisionHeight
         }
-    }
-    return {
-        index,
-        deleteCount
-    };
-}
-function getMirrorDataPoints(board, nextDataPoints, nextKeyPoints, params) {
-    for (let index = 1; index < nextDataPoints.length - 2; index++) {
-        adjustByCustomPointStartIndex(board, index, nextDataPoints, nextKeyPoints, params);
-    }
-    return nextDataPoints;
+    ];
+    return { startPoint, arcCommands };
 }
-/**
- * adjust based parallel segment
- */
-const adjustByCustomPointStartIndex = (board, customPointStartIndex, nextDataPoints, nextKeyPoints, params) => {
-    const beforePoint = nextDataPoints[customPointStartIndex - 1];
-    const startPoint = nextDataPoints[customPointStartIndex];
-    const endPoint = nextDataPoints[customPointStartIndex + 1];
-    const afterPoint = nextDataPoints[customPointStartIndex + 2];
-    const beforeSegment = [beforePoint, startPoint];
-    const afterSegment = [endPoint, afterPoint];
-    const isStraightWithBefore = Point.isAlign(beforeSegment);
-    const isStraightWithAfter = Point.isAlign(afterSegment);
-    let isAdjustStart = false;
-    let isAdjustEnd = false;
-    if (!isStraightWithBefore || !isStraightWithAfter) {
-        const midKeyPointsWithBefore = getMidKeyPoints(nextKeyPoints, beforeSegment[0], beforeSegment[1]);
-        const midKeyPointsWithAfter = getMidKeyPoints(nextKeyPoints, afterSegment[0], afterSegment[1]);
-        const hasMidKeyPoints = midKeyPointsWithBefore.length > 0 && midKeyPointsWithAfter.length > 0;
-        isAdjustStart = !isStraightWithBefore && !hasMidKeyPoints;
-        isAdjustEnd = !isStraightWithAfter && !hasMidKeyPoints;
-    }
-    if (isAdjustStart || isAdjustEnd) {
-        const parallelSegment = [startPoint, endPoint];
-        const parallelSegments = findOrthogonalParallelSegments(parallelSegment, nextKeyPoints);
-        const mirrorSegments = findMirrorSegments(board, parallelSegment, parallelSegments, params.sourceRectangle, params.targetRectangle);
-        if (mirrorSegments.length === 1) {
-            const mirrorSegment = mirrorSegments[0];
-            if (isAdjustStart) {
-                nextDataPoints.splice(customPointStartIndex, 1, mirrorSegment[0]);
-            }
-            if (isAdjustEnd) {
-                nextDataPoints.splice(customPointStartIndex + 1, 1, mirrorSegment[1]);
-            }
-        }
-        else {
-            const isHorizontal = Point.isHorizontal(startPoint, endPoint);
-            const adjustIndex = isHorizontal ? 0 : 1;
-            if (isAdjustStart) {
-                const newStartPoint = [startPoint[0], startPoint[1]];
-                newStartPoint[adjustIndex] = beforePoint[adjustIndex];
-                nextDataPoints.splice(customPointStartIndex, 1, newStartPoint);
-            }
-            if (isAdjustEnd) {
-                const newEndPoint = [endPoint[0], endPoint[1]];
-                newEndPoint[adjustIndex] = afterPoint[adjustIndex];
-                nextDataPoints.splice(customPointStartIndex + 1, 1, newEndPoint);
+const CloudEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const { startPoint, arcCommands } = generateCloudPath(rectangle);
+        const pathData = `M ${startPoint[0]} ${startPoint[1]} ` +
+            arcCommands
+                .map((command) => `A ${command.rx} ${command.ry} ${command.xAxisRotation} ${command.largeArcFlag} ${command.sweepFlag} ${command.endX} ${command.endY}`)
+                .join('\n') +
+            ' Z';
+        const svgElement = rs.path(pathData, { ...options, fillStyle: 'solid' });
+        setPathStrokeLinecap(svgElement, 'round');
+        return svgElement;
+    },
+    isInsidePoint(rectangle, point) {
+        const rangeRectangle = RectangleClient.getRectangleByPoints([point, point]);
+        return RectangleClient.isHit(rectangle, rangeRectangle);
+    },
+    getCornerPoints(rectangle) {
+        return RectangleClient.getCornerPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        const { startPoint, arcCommands } = generateCloudPath(rectangle);
+        let minDistance = Infinity;
+        let nearestPoint = point;
+        let currentStart = startPoint;
+        for (const arcCommand of arcCommands) {
+            const arcNearestPoint = getNearestPointBetweenPointAndArc(point, currentStart, arcCommand);
+            const distance = distanceBetweenPointAndPoint(point[0], point[1], arcNearestPoint[0], arcNearestPoint[1]);
+            if (distance < minDistance) {
+                minDistance = distance;
+                nearestPoint = arcNearestPoint;
             }
+            currentStart = [arcCommand.endX, arcCommand.endY];
         }
+        return nearestPoint;
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = CloudEngine.getCornerPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getPolygonEdgeByConnectionPoint(corners, point);
+    },
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    },
+    getTextRectangle(element) {
+        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
+        const strokeWidth = getStrokeWidthByElement(element);
+        const height = element.textHeight;
+        const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
+        const width = originWidth / 1.5;
+        return {
+            height,
+            width: width > 0 ? width : 0,
+            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + originWidth / 6,
+            y: elementRectangle.y + elementRectangle.height / 6 + ((elementRectangle.height * 4) / 6 - height) / 2
+        };
     }
 };
-function isUpdatedHandleIndex(board, element, dataPoints, nextRenderPoints, handleIndex) {
-    const { deleteCount } = getIndexAndDeleteCountByKeyPoint(board, element, dataPoints, nextRenderPoints, handleIndex);
-    if (deleteCount !== null && deleteCount > 1) {
+
+const isTextExceedingBounds = (geometry) => {
+    const client = RectangleClient.getRectangleByPoints(geometry.points);
+    if (geometry.textHeight && geometry.textHeight > client.height) {
         return true;
     }
     return false;
-}
-function getMidKeyPoints(simplifiedNextKeyPoints, startPoint, endPoint) {
-    let midElbowPoints = [];
-    let startPointIndex = -1;
-    let endPointIndex = -1;
-    for (let i = 0; i < simplifiedNextKeyPoints.length; i++) {
-        if (Point.isAlign([simplifiedNextKeyPoints[i], startPoint])) {
-            startPointIndex = i;
-        }
-        if (startPointIndex > -1 && Point.isAlign([simplifiedNextKeyPoints[i], endPoint])) {
-            endPointIndex = i;
-            break;
-        }
+};
+const isHitArrowLineText = (board, element, point) => {
+    return getHitArrowLineTextIndex(board, element, point) !== -1;
+};
+const isHitPolyLine = (pathPoints, point) => {
+    const distance = distanceBetweenPointAndSegments(point, pathPoints);
+    return distance <= HIT_DISTANCE_BUFFER;
+};
+const isHitArrowLine = (board, element, point) => {
+    const points = getArrowLinePoints(board, element);
+    const isHitText = isHitArrowLineText(board, element, point);
+    return isHitText || isHitPolyLine(points, point);
+};
+const isHitVectorLine = (board, element, point) => {
+    const points = getVectorLinePoints(board, element);
+    if (isClosedPoints(element.points)) {
+        return isPointInPolygon(point, points) || isHitPolyLine(points, point);
     }
-    if (startPointIndex > -1 && endPointIndex > -1) {
-        midElbowPoints = simplifiedNextKeyPoints.slice(startPointIndex, endPointIndex + 1);
+    else {
+        return isHitPolyLine(points, point);
     }
-    return midElbowPoints;
-}
-function findOrthogonalParallelSegments(segment, keyPoints) {
-    const isHorizontalSegment = Point.isHorizontal(segment[0], segment[1]);
-    const parallelSegments = [];
-    for (let i = 0; i < keyPoints.length - 1; i++) {
-        const current = keyPoints[i];
-        const next = keyPoints[i + 1];
-        const isHorizontal = Point.isHorizontal(current, next, 0.1);
-        if (isHorizontalSegment && isHorizontal) {
-            parallelSegments.push([current, next]);
-        }
-        if (!isHorizontalSegment && !isHorizontal) {
-            parallelSegments.push([current, next]);
-        }
+};
+const isRectangleHitElementText = (element, rectangle) => {
+    const engine = getEngine(element.shape);
+    if (isMultipleTextGeometry(element)) {
+        const texts = element.texts;
+        return texts.some((item) => {
+            const textClient = engine.getTextRectangle(element, { id: item.id });
+            return isRectangleHitRotatedPoints(rectangle, RectangleClient.getCornerPoints(textClient), element.angle);
+        });
     }
-    return parallelSegments;
-}
-function findMirrorSegments(board, segment, parallelSegments, sourceRectangle, targetRectangle) {
-    debugGenerator$3.isDebug() && debugGenerator$3.clear();
-    const mirrorSegments = [];
-    for (let index = 0; index < parallelSegments.length; index++) {
-        const parallelPath = parallelSegments[index];
-        const startPoint = [segment[0][0], segment[0][1]];
-        const endPoint = [segment[1][0], segment[1][1]];
-        const isHorizontal = Point.isHorizontal(startPoint, endPoint);
-        const adjustDataIndex = isHorizontal ? 0 : 1;
-        startPoint[adjustDataIndex] = parallelPath[0][adjustDataIndex];
-        endPoint[adjustDataIndex] = parallelPath[1][adjustDataIndex];
-        const fakeRectangle = RectangleClient.getRectangleByPoints([startPoint, endPoint, ...parallelPath]);
-        const isValid = !RectangleClient.isHit(fakeRectangle, sourceRectangle) && !RectangleClient.isHit(fakeRectangle, targetRectangle);
-        if (isValid) {
-            mirrorSegments.push([startPoint, endPoint]);
-            debugGenerator$3.isDebug() && debugGenerator$3.drawPolygon(board, RectangleClient.getCornerPoints(fakeRectangle));
-        }
+    else {
+        const textClient = engine.getTextRectangle ? engine.getTextRectangle(element) : getTextRectangle(element);
+        return isRectangleHitRotatedPoints(rectangle, RectangleClient.getCornerPoints(textClient), element.angle);
     }
-    return mirrorSegments;
-}
-const hasIllegalElbowPoint = (midDataPoints) => {
-    if (midDataPoints.length === 1) {
+};
+const isHitElementText = (element, point) => {
+    const engine = getEngine(element.shape);
+    if (isMultipleTextGeometry(element)) {
+        const texts = element.texts;
+        return texts.some((item) => {
+            const textClient = engine.getTextRectangle(element, { id: item.id });
+            return RectangleClient.isPointInRectangle(textClient, point);
+        });
+    }
+    else {
+        const textClient = engine.getTextRectangle ? engine.getTextRectangle(element) : getTextRectangle(element);
+        return RectangleClient.isPointInRectangle(textClient, point);
+    }
+};
+const isEmptyTextElement = (element) => {
+    if (!isDrawElementIncludeText(element)) {
         return true;
     }
-    return midDataPoints.some((item, index) => {
-        const beforePoint = midDataPoints[index - 1];
-        const afterPoint = midDataPoints[index + 1];
-        const beforeSegment = beforePoint && [beforePoint, item];
-        const afterSegment = afterPoint && [item, afterPoint];
-        const isStraightWithBefore = beforeSegment && Point.isAlign(beforeSegment);
-        const isStraightWithAfter = afterSegment && Point.isAlign(afterSegment);
-        if (index === 0) {
-            return !isStraightWithAfter;
-        }
-        if (index === midDataPoints.length - 1) {
-            return !isStraightWithBefore;
-        }
-        return !isStraightWithBefore && !isStraightWithAfter;
-    });
+    const editor = getFirstTextEditor(element);
+    return Editor.isEmpty(editor, editor.children[0]);
 };
-
-const ARROW_LENGTH = 20;
-const drawArrowLineArrow = (element, points, options) => {
-    const arrowG = createG();
-    if (PlaitArrowLine.isSourceMark(element, ArrowLineMarkerType.none) && PlaitArrowLine.isTargetMark(element, ArrowLineMarkerType.none)) {
-        return null;
+const isRectangleHitDrawElement = (board, element, selection) => {
+    const rangeRectangle = RectangleClient.getRectangleByPoints([selection.anchor, selection.focus]);
+    if (PlaitDrawElement.isGeometry(element)) {
+        const isHitElement = isRectangleHitRotatedElement(board, rangeRectangle, element);
+        if (isHitElement) {
+            return isHitElement;
+        }
+        return !isEmptyTextElement(element) && isRectangleHitElementText(element, rangeRectangle);
     }
-    const strokeWidth = getStrokeWidthByElement(element);
-    const offset = (strokeWidth * strokeWidth) / 3;
-    if (points.length === 1) {
-        points = [points[0], [points[0][0] + 0.1, points[0][1]]];
+    if (PlaitDrawElement.isImage(element)) {
+        return isRectangleHitRotatedElement(board, rangeRectangle, element);
     }
-    if (!PlaitArrowLine.isSourceMark(element, ArrowLineMarkerType.none)) {
-        const source = getExtendPoint(points[0], points[1], ARROW_LENGTH + offset);
-        const sourceArrow = getArrow(element, { marker: element.source.marker, source, target: points[0], isSource: true }, options);
-        sourceArrow && arrowG.appendChild(sourceArrow);
+    if (PlaitDrawElement.isArrowLine(element)) {
+        const points = getArrowLinePoints(board, element);
+        return isLineHitRectangle(points, rangeRectangle);
     }
-    if (!PlaitArrowLine.isTargetMark(element, ArrowLineMarkerType.none)) {
-        const source = getExtendPoint(points[points.length - 1], points[points.length - 2], ARROW_LENGTH + offset);
-        const arrow = getArrow(element, { marker: element.target.marker, source, target: points[points.length - 1], isSource: false }, options);
-        arrow && arrowG.appendChild(arrow);
+    if (PlaitDrawElement.isVectorLine(element)) {
+        const points = getVectorLinePoints(board, element);
+        return isLineHitRectangle(points, rangeRectangle);
     }
-    return arrowG;
+    return null;
 };
-const getArrow = (element, arrowOptions, options) => {
-    const { marker, target, source, isSource } = arrowOptions;
-    let targetArrow;
-    switch (marker) {
-        case ArrowLineMarkerType.openTriangle: {
-            targetArrow = drawOpenTriangle(element, source, target, options);
-            break;
-        }
-        case ArrowLineMarkerType.solidTriangle: {
-            targetArrow = drawSolidTriangle(source, target, options);
-            break;
-        }
-        case ArrowLineMarkerType.arrow: {
-            targetArrow = drawArrow(element, source, target, options);
-            break;
-        }
-        case ArrowLineMarkerType.sharpArrow: {
-            targetArrow = drawSharpArrow(source, target, options);
-            break;
+const isRectangleHitRotatedElement = (board, rectangle, element) => {
+    const client = RectangleClient.getRectangleByPoints(element.points);
+    return isRectangleHitRotatedPoints(rectangle, RectangleClient.getCornerPoints(client), element.angle);
+};
+const isRectangleHitRotatedPoints = (rectangle, points, angle) => {
+    let rotatedPoints = rotatePointsByAngle(points, angle) || points;
+    return isLineHitRectangle(rotatedPoints, rectangle);
+};
+const getHitDrawElement = (board, elements) => {
+    let firstFilledElement = getFirstFilledDrawElement(board, elements);
+    let endIndex = elements.length;
+    if (firstFilledElement) {
+        endIndex = elements.indexOf(firstFilledElement) + 1;
+    }
+    const newElements = elements.slice(0, endIndex);
+    const element = getFirstTextOrLineElement(newElements);
+    if (element) {
+        return element;
+    }
+    const sortElements = sortElementsByArea(board, newElements, 'asc');
+    return sortElements[0];
+};
+const getFirstFilledDrawElement = (board, elements) => {
+    let filledElement = null;
+    for (let i = 0; i < elements.length; i++) {
+        const element = elements[i];
+        if (isClosedCustomGeometry(board, element) || isClosedDrawElement(element)) {
+            const fill = getFillByElement(board, element);
+            if (isFilled(fill)) {
+                filledElement = element;
+                break;
+            }
         }
-        case ArrowLineMarkerType.oneSideUp: {
-            targetArrow = drawOneSideArrow(source, target, isSource ? 'down' : 'up', options);
-            break;
+    }
+    return filledElement;
+};
+const isFilledDrawElement = (board, element) => {
+    return getFirstFilledDrawElement(board, [element]) !== null;
+};
+const getFirstTextOrLineElement = (elements) => {
+    const texts = elements.filter((item) => PlaitDrawElement.isText(item));
+    if (texts.length) {
+        return texts[0];
+    }
+    const lines = elements.filter((item) => PlaitDrawElement.isArrowLine(item));
+    if (lines.length) {
+        return lines[0];
+    }
+    return null;
+};
+const debugKey$3 = 'debug:plait:hit:shape:edge:sample-points';
+const debugGenerator$3 = createDebugGenerator(debugKey$3);
+const shapes = [BasicShapes.cloud];
+const isHitDrawElement = (board, element, point, isStrict = true) => {
+    const rectangle = board.getRectangle(element);
+    point = rotateAntiPointsByElement(board, point, element) || point;
+    if (PlaitDrawElement.isGeometry(element) && rectangle) {
+        if (debugGenerator$3.isDebug() && shapes.includes(element.shape)) {
+            debugGenerator$3.clear();
+            const { startPoint, arcCommands } = generateCloudPath(rectangle);
+            const points = [startPoint, ...arcCommands.map((arc) => [arc.endX, arc.endY])];
+            debugGenerator$3.drawCircles(board, points, 5, false);
+            let minDistance = Infinity;
+            let nearestPoint = point;
+            let currentStart = startPoint;
+            for (const arc of arcCommands) {
+                const arcNearestPoint = getNearestPointBetweenPointAndArc(point, currentStart, arc);
+                const distance = distanceBetweenPointAndPoint(point[0], point[1], arcNearestPoint[0], arcNearestPoint[1]);
+                const { center } = getEllipseArcCenter(currentStart, arc);
+                debugGenerator$3.drawCircles(board, [center], 8, false, { fill: 'yellow' });
+                if (distance < minDistance) {
+                    minDistance = distance;
+                    nearestPoint = arcNearestPoint;
+                }
+                currentStart = [arc.endX, arc.endY];
+            }
+            debugGenerator$3.drawCircles(board, [point], 12, false, { fill: 'black', stroke: 'black' });
+            debugGenerator$3.drawCircles(board, [nearestPoint], 12, false, { fill: 'green', stroke: 'green' });
         }
-        case ArrowLineMarkerType.oneSideDown: {
-            targetArrow = drawOneSideArrow(source, target, isSource ? 'up' : 'down', options);
-            break;
+        if (isHitEdgeOfShape(board, element, point, HIT_DISTANCE_BUFFER)) {
+            return true;
         }
-        case ArrowLineMarkerType.hollowTriangle: {
-            targetArrow = drawHollowTriangleArrow(source, target, options);
-            break;
+        const engine = getEngine(getElementShape(element));
+        if (PlaitDrawElement.isText(element)) {
+            const textClient = getTextRectangle(element);
+            return RectangleClient.isPointInRectangle(textClient, point);
         }
-        case ArrowLineMarkerType.singleSlash: {
-            targetArrow = drawSingleSlash(source, target, isSource, options);
-            break;
+        if (!!isStrict && isEmptyTextElement(element) && !isFilledDrawElement(board, element)) {
+            return false;
         }
+        const isHitText = isHitElementText(element, point);
+        return isHitText || engine.isInsidePoint(rectangle, point);
     }
-    return targetArrow;
+    if (PlaitDrawElement.isImage(element)) {
+        const client = RectangleClient.getRectangleByPoints(element.points);
+        return RectangleClient.isPointInRectangle(client, point);
+    }
+    if (PlaitDrawElement.isArrowLine(element)) {
+        return isHitArrowLine(board, element, point);
+    }
+    if (PlaitDrawElement.isVectorLine(element)) {
+        return isHitVectorLine(board, element, point);
+    }
+    return null;
 };
-const drawSharpArrow = (source, target, options) => {
-    const startPoint = target;
-    const { pointLeft, pointRight } = arrowPoints(source, target, 20);
-    const g = createG();
-    const path = createPath();
-    let polylinePath = `M${pointRight[0]},${pointRight[1]}A25,25,20,0,1,${pointLeft[0]},${pointLeft[1]}L${startPoint[0]},${startPoint[1]}Z`;
-    path.setAttribute('d', polylinePath);
-    path.setAttribute('stroke', `${options?.stroke}`);
-    path.setAttribute('stroke-width', `${options?.strokeWidth}`);
-    path.setAttribute('fill', `${options?.stroke}`);
-    g.appendChild(path);
-    return g;
+const isHitEdgeOfShape = (board, element, point, hitDistanceBuffer) => {
+    const nearestPoint = getNearestPoint(element, point);
+    const distance = distanceBetweenPointAndPoint(nearestPoint[0], nearestPoint[1], point[0], point[1]);
+    return distance <= hitDistanceBuffer;
 };
-const drawArrow = (element, source, target, options) => {
-    const unitVector = getUnitVectorByPointAndPoint(source, target);
-    const strokeWidth = getStrokeWidthByElement(element);
-    const endPoint = [target[0] + (strokeWidth * unitVector[0]) / 2, target[1] + (strokeWidth * unitVector[1]) / 2];
-    const distance = distanceBetweenPointAndPoint(...source, ...endPoint);
-    const middlePoint = [
-        endPoint[0] - (((distance * 3) / 5 + strokeWidth) / 2) * unitVector[0],
-        endPoint[1] - (((distance * 3) / 5 + strokeWidth) / 2) * unitVector[1]
-    ];
-    const { pointLeft, pointRight } = arrowPoints(source, endPoint, 30);
-    const arrowG = drawLinearPath([pointLeft, endPoint, pointRight, middlePoint], { ...options, fill: options.stroke }, true);
-    const path = arrowG.querySelector('path');
-    path.setAttribute('stroke-linejoin', 'round');
-    return arrowG;
+const isInsideOfShape = (board, element, point, hitDistanceBuffer) => {
+    const client = RectangleClient.inflate(RectangleClient.getRectangleByPoints(element.points), hitDistanceBuffer);
+    return getEngine(getElementShape(element)).isInsidePoint(client, point);
 };
-const drawSolidTriangle = (source, target, options) => {
-    const endPoint = target;
-    const { pointLeft, pointRight } = arrowPoints(source, endPoint, 30);
-    return drawLinearPath([pointLeft, endPoint, pointRight], { ...options, fill: options.stroke }, true);
+const isHitElementInside = (board, element, point) => {
+    const rectangle = board.getRectangle(element);
+    point = rotateAntiPointsByElement(board, point, element) || point;
+    if (PlaitDrawElement.isGeometry(element) && !PlaitDrawElement.isGeometryByTable(element)) {
+        const engine = getEngine(getElementShape(element));
+        const isHitInside = engine.isInsidePoint(rectangle, point);
+        if (isHitInside) {
+            return isHitInside;
+        }
+        if (engine.getTextRectangle) {
+            const isHitText = isHitElementText(element, point);
+            if (isHitText) {
+                return isHitText;
+            }
+        }
+    }
+    if (PlaitDrawElement.isImage(element)) {
+        const client = RectangleClient.getRectangleByPoints(element.points);
+        return RectangleClient.isPointInRectangle(client, point);
+    }
+    if (PlaitDrawElement.isArrowLine(element)) {
+        return isHitArrowLine(board, element, point);
+    }
+    if (PlaitDrawElement.isVectorLine(element)) {
+        return isHitVectorLine(board, element, point);
+    }
+    return null;
 };
-const drawOpenTriangle = (element, source, target, options) => {
-    const unitVector = getUnitVectorByPointAndPoint(source, target);
+
+const getTextRectangle = (element) => {
+    const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
     const strokeWidth = getStrokeWidthByElement(element);
-    const endPoint = [target[0] + (strokeWidth * unitVector[0]) / 2, target[1] + (strokeWidth * unitVector[1]) / 2];
-    const { pointLeft, pointRight } = arrowPoints(source, endPoint, 40);
-    return drawLinearPath([pointLeft, endPoint, pointRight], options);
-};
-const drawOneSideArrow = (source, target, side, options) => {
-    const { pointLeft, pointRight } = arrowPoints(source, target, 40);
-    return drawLinearPath([side === 'up' ? pointRight : pointLeft, target], options);
+    const height = element.textHeight;
+    const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
+    return {
+        height,
+        width: width > 0 ? width : 0,
+        x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
+        y: elementRectangle.y + (elementRectangle.height - height) / 2
+    };
 };
-const drawSingleSlash = (source, target, isSource, options) => {
-    const length = distanceBetweenPointAndPoint(...source, ...target);
-    const middlePoint = getExtendPoint(target, source, length / 2);
-    const angle = isSource ? 120 : 60;
-    const start = rotate(...source, ...middlePoint, (angle * Math.PI) / 180);
-    const end = rotate(...target, ...middlePoint, (angle * Math.PI) / 180);
-    return drawLinearPath([start, end], options);
+const getStrokeWidthByElement = (element) => {
+    if (PlaitDrawElement.isText(element)) {
+        return 0;
+    }
+    const strokeWidth = element.strokeWidth || DefaultDrawStyle.strokeWidth;
+    return strokeWidth;
 };
-const drawHollowTriangleArrow = (source, target, options) => {
-    const { pointLeft, pointRight } = arrowPoints(source, target, 30);
-    return drawLinearPath([pointLeft, pointRight, target], { ...options, fill: 'white' }, true);
+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);
 };
-
-class ArrowLineShapeGenerator extends Generator {
-    canDraw(element) {
+const isDrawElementIncludeText = (element) => {
+    if (PlaitDrawElement.isText(element)) {
         return true;
     }
-    draw(element) {
-        let lineG;
-        lineG = drawArrowLine(this.board, element);
-        return lineG;
+    if (PlaitDrawElement.isImage(element)) {
+        return false;
     }
-}
-
-const createArrowLineElement = (shape, points, source, target, texts, options) => {
-    return {
-        id: idCreator(),
-        type: 'arrow-line',
-        shape,
-        source,
-        texts: texts ? texts : [],
-        target,
-        opacity: 1,
-        points,
-        ...options
-    };
+    if (PlaitDrawElement.isGeometry(element)) {
+        return isGeometryIncludeText(element);
+    }
+    if (PlaitDrawElement.isArrowLine(element)) {
+        const editors = getTextEditorsByElement(element);
+        return editors.length > 0;
+    }
+    if (PlaitDrawElement.isElementByTable(element)) {
+        return element.cells.some((cell) => isCellIncludeText(cell));
+    }
+    return true;
 };
-const getArrowLinePoints = (board, element) => {
-    switch (element.shape) {
-        case ArrowLineShape.elbow: {
-            return getElbowPoints(board, element);
+const isDrawElementsIncludeText = (elements) => {
+    return elements.some((item) => {
+        return isDrawElementIncludeText(item);
+    });
+};
+const isClosedDrawElement = (element) => {
+    if (PlaitDrawElement.isDrawElement(element)) {
+        if (PlaitDrawElement.isText(element) || PlaitDrawElement.isArrowLine(element) || PlaitDrawElement.isImage(element)) {
+            return false;
         }
-        case ArrowLineShape.curve: {
-            return getCurvePoints(board, element);
+        if (PlaitDrawElement.isVectorLine(element)) {
+            return isClosedPoints(element.points);
         }
-        default: {
-            const points = PlaitArrowLine.getPoints(board, element);
-            const handleRefPair = getArrowLineHandleRefPair(board, element);
-            points[0] = handleRefPair.source.point;
-            points[points.length - 1] = handleRefPair.target.point;
-            return points;
+        if (PlaitDrawElement.isGeometry(element)) {
+            return isGeometryClosed(element);
         }
+        return true;
     }
+    return false;
 };
-const getCurvePoints = (board, element) => {
-    if (element.points.length === 2) {
-        const handleRefPair = getArrowLineHandleRefPair(board, element);
-        const { source, target } = handleRefPair;
-        const sourceBoundElement = handleRefPair.source.boundElement;
-        const targetBoundElement = handleRefPair.target.boundElement;
-        let curvePoints = [source.point];
-        const sumDistance = distanceBetweenPointAndPoint(...source.point, ...target.point);
-        const offset = 12 + sumDistance / 3;
-        if (sourceBoundElement) {
-            curvePoints.push(getPointByVectorComponent(source.point, source.vector, offset));
-        }
-        if (targetBoundElement) {
-            curvePoints.push(getPointByVectorComponent(target.point, target.vector, offset));
+const isClosedCustomGeometry = (board, value) => {
+    return PlaitDrawElement.isCustomGeometryElement(board, value) && isClosedPoints(value.points);
+};
+const getSnappingShape = (board, point) => {
+    let hitElement = getHitShape(board, point);
+    if (hitElement) {
+        const ref = getSnappingRef(board, hitElement, point);
+        if (ref.isHitConnector || ref.isHitEdge) {
+            return hitElement;
         }
-        const isSingleBound = (sourceBoundElement && !targetBoundElement) || (!sourceBoundElement && targetBoundElement);
-        if (isSingleBound) {
-            curvePoints.push(target.point);
-            const points = Q2C(curvePoints);
-            return pointsOnBezierCurves(points);
+    }
+    return null;
+};
+const getSnappingRef = (board, hitElement, point) => {
+    const rotatedPoint = rotateAntiPointsByElement(board, point, hitElement) || point;
+    const connectorPoint = getHitConnectorPoint(rotatedPoint, hitElement);
+    const edgePoint = getNearestPoint(hitElement, rotatedPoint);
+    const isHitEdge = isHitEdgeOfShape(board, hitElement, rotatedPoint, LINE_SNAPPING_BUFFER);
+    return { isHitEdge, isHitConnector: !!connectorPoint, connectorPoint, edgePoint };
+};
+const getHitShape = (board, point, offset = LINE_HIT_GEOMETRY_BUFFER) => {
+    let hitShape = null;
+    traverseDrawShapes(board, (element) => {
+        if (hitShape === null && isInsideOfShape(board, element, rotateAntiPointsByElement(board, point, element) || point, offset * 2)) {
+            hitShape = element;
         }
-        if (!sourceBoundElement && !targetBoundElement) {
-            curvePoints.push(getPointByVectorComponent(source.point, source.vector, offset));
-            curvePoints.push(getPointByVectorComponent(target.point, target.vector, offset));
+    });
+    return hitShape;
+};
+const traverseDrawShapes = (board, callback) => {
+    depthFirstRecursion(board, (node) => {
+        if (!PlaitBoard.isBoard(node) && PlaitDrawElement.isShapeElement(node)) {
+            callback(node);
         }
-        curvePoints.push(target.point);
-        return pointsOnBezierCurves(curvePoints);
+    }, getIsRecursionFunc(board), true);
+};
+const drawShape = (board, outerRectangle, shape, roughOptions, drawOptions) => {
+    return getEngine(shape).draw(board, outerRectangle, roughOptions, drawOptions);
+};
+const drawBoundReaction = (board, element, roughOptions = { hasMask: true, hasConnector: true }) => {
+    const g = createG();
+    const rectangle = RectangleClient.getRectangleByPoints(element.points);
+    const activeRectangle = RectangleClient.inflate(rectangle, SNAPPING_STROKE_WIDTH);
+    const shape = getElementShape(element);
+    let drawOptions;
+    if (PlaitDrawElement.isElementByTable(element)) {
+        drawOptions = { element };
     }
-    else {
-        let dataPoints = PlaitArrowLine.getPoints(board, element);
-        dataPoints = removeDuplicatePoints(dataPoints);
-        const points = catmullRomFitting(dataPoints);
-        return pointsOnBezierCurves(points);
+    const strokeG = drawShape(board, activeRectangle, shape, {
+        stroke: SELECTION_BORDER_COLOR,
+        strokeWidth: SNAPPING_STROKE_WIDTH
+    }, drawOptions);
+    g.appendChild(strokeG);
+    if (roughOptions.hasMask) {
+        const maskG = drawShape(board, activeRectangle, shape, {
+            stroke: SELECTION_BORDER_COLOR,
+            strokeWidth: 0,
+            fill: isClosedDrawElement(element) ? SELECTION_FILL_COLOR : DefaultDrawStyle.fill,
+            fillStyle: 'solid'
+        }, drawOptions);
+        g.appendChild(maskG);
+    }
+    if (roughOptions.hasConnector) {
+        const connectorPoints = getEngine(shape).getConnectorPoints(rectangle);
+        connectorPoints.forEach((point) => {
+            const circleG = drawCircle(PlaitBoard.getRoughSVG(board), point, 8, {
+                stroke: SELECTION_BORDER_COLOR,
+                strokeWidth: ACTIVE_STROKE_WIDTH,
+                fill: '#FFF',
+                fillStyle: 'solid'
+            });
+            g.appendChild(circleG);
+        });
     }
+    return g;
 };
-const drawArrowLine = (board, element) => {
-    const strokeWidth = getStrokeWidthByElement(element);
-    const strokeColor = getStrokeColorByElement(board, element);
-    const strokeStyle = getStrokeStyleByElement(board, element);
-    const strokeLineDash = getStrokeLineDash(strokeStyle, strokeWidth);
-    const options = { stroke: strokeColor, strokeWidth, strokeLineDash };
-    const lineG = createG();
-    let points = getArrowLinePoints(board, element);
-    let line;
-    if (element.shape === ArrowLineShape.curve) {
-        line = PlaitBoard.getRoughSVG(board).curve(points, options);
+const getTextKey = (element, text) => {
+    if (element && isMultipleTextGeometry(element)) {
+        return `${element.id}-${text.id}`;
     }
     else {
-        line = drawLinearPath(points, options);
-    }
-    const id = idCreator();
-    line.setAttribute('mask', `url(#${id})`);
-    if (element.strokeStyle === StrokeStyle.dotted) {
-        setStrokeLinecap(line, 'round');
+        return text.id;
     }
-    lineG.appendChild(line);
-    const { mask, maskTargetFillRect } = drawArrowLineMask(board, element, id);
-    lineG.appendChild(mask);
-    line.appendChild(maskTargetFillRect);
-    const arrow = drawArrowLineArrow(element, points, { stroke: strokeColor, strokeWidth });
-    arrow && lineG.appendChild(arrow);
-    return lineG;
-};
-const getHitConnection = (board, point, hitElement) => {
-    let rectangle = RectangleClient.getRectangleByPoints(hitElement.points);
-    const ref = getSnappingRef(board, hitElement, point);
-    const connectionPoint = ref.connectorPoint || ref.edgePoint;
-    return [(connectionPoint[0] - rectangle.x) / rectangle.width, (connectionPoint[1] - rectangle.y) / rectangle.height];
-};
-const getHitConnectorPoint = (point, hitElement) => {
-    const rectangle = RectangleClient.getRectangleByPoints(hitElement.points);
-    const shape = getElementShape(hitElement);
-    const connectorPoints = getEngine(shape).getConnectorPoints(rectangle);
-    return connectorPoints.find(connectorPoint => {
-        return distanceBetweenPointAndPoint(...connectorPoint, ...point) <= LINE_SNAPPING_CONNECTOR_BUFFER;
-    });
-};
-const getArrowLineTextRectangle = (board, element, index) => {
-    const text = element.texts[index];
-    const elbowPoints = getArrowLinePoints(board, element);
-    const point = getPointOnPolyline(elbowPoints, text.position);
-    return {
-        x: point[0] - text.width / 2,
-        y: point[1] - text.height / 2,
-        width: text.width,
-        height: text.height
-    };
-};
-const getArrowLines = (board) => {
-    return findElements(board, {
-        match: (element) => PlaitDrawElement.isArrowLine(element),
-        recursion: (element) => PlaitDrawElement.isDrawElement(element)
-    });
 };
-// quadratic Bezier to cubic Bezier
-const Q2C = (points) => {
-    const result = [];
-    const numSegments = points.length / 3;
-    for (let i = 0; i < numSegments; i++) {
-        const start = points[i];
-        const qControl = points[i + 1];
-        const end = points[i + 2];
-        const startDistance = distanceBetweenPointAndPoint(...start, ...qControl);
-        const endDistance = distanceBetweenPointAndPoint(...end, ...qControl);
-        const cControl1 = getExtendPoint(start, qControl, (startDistance * 2) / 3);
-        const cControl2 = getExtendPoint(end, qControl, (endDistance * 2) / 3);
-        result.push(start, cControl1, cControl2, end);
+const getGeometryAlign = (board, element) => {
+    if (isMultipleTextGeometry(element)) {
+        const drawShapeText = element.texts.find((item) => item.id.includes(GeometryCommonTextKeys.content));
+        return drawShapeText?.text.align || Alignment.center;
     }
-    return result;
+    if (isSingleTextGeometry(element)) {
+        return element.text?.align || Alignment.center;
+    }
+    if (PlaitDrawElement.isElementByTable(element)) {
+        const firstTextCell = element.cells.find((item) => item.text);
+        return firstTextCell?.text?.align || Alignment.center;
+    }
+    return Alignment.center;
 };
-const handleArrowLineCreating = (board, lineShape, sourcePoint, movingPoint, sourceElement, lineShapeG) => {
-    const hitElement = getSnappingShape(board, movingPoint);
-    const targetConnection = hitElement ? getHitConnection(board, movingPoint, hitElement) : undefined;
-    const sourceConnection = sourceElement ? getHitConnection(board, sourcePoint, sourceElement) : undefined;
-    const targetBoundId = hitElement ? hitElement.id : undefined;
-    const lineGenerator = new ArrowLineShapeGenerator(board);
-    const memorizedLatest = getLineMemorizedLatest();
-    let sourceMarker, targetMarker;
-    sourceMarker = memorizedLatest.source;
-    targetMarker = memorizedLatest.target;
-    sourceMarker && delete memorizedLatest.source;
-    targetMarker && delete memorizedLatest.target;
-    const temporaryLineElement = createArrowLineElement(lineShape, [sourcePoint, movingPoint], { marker: sourceMarker || ArrowLineMarkerType.none, connection: sourceConnection, boundId: sourceElement?.id }, { marker: targetMarker || ArrowLineMarkerType.arrow, connection: targetConnection, boundId: targetBoundId }, [], {
-        strokeWidth: DefaultLineStyle.strokeWidth,
-        ...memorizedLatest
-    });
-    const linePoints = getArrowLinePoints(board, temporaryLineElement);
-    const otherPoint = linePoints[0];
-    temporaryLineElement.points[1] = alignPoints(otherPoint, movingPoint);
-    lineGenerator.processDrawing(temporaryLineElement, lineShapeG);
-    PlaitBoard.getElementActiveHost(board).append(lineShapeG);
-    return temporaryLineElement;
+const isClosedPoints = (points) => {
+    const startPoint = points[0];
+    const endPoint = points[points.length - 1];
+    return startPoint[0] === endPoint[0] && startPoint[1] === endPoint[1];
+};
+const getDefaultGeometryText = (board) => {
+    return getI18nValue(board, DrawI18nKey.geometryText, DefaultTextProperty.text);
 };
-function drawArrowLineMask(board, element, id) {
-    const mask = createMask();
-    mask.setAttribute('id', id);
-    const points = getArrowLinePoints(board, element);
-    let rectangle = RectangleClient.getRectangleByPoints(points);
-    rectangle = RectangleClient.getOutlineRectangle(rectangle, -30);
-    const maskFillRect = createRect(rectangle, {
-        fill: 'white'
-    });
-    mask.appendChild(maskFillRect);
-    const texts = element.texts;
-    texts.forEach((text, index) => {
-        let textRectangle = getArrowLineTextRectangle(board, element, index);
-        textRectangle = RectangleClient.inflate(textRectangle, LINE_TEXT_SPACE * 2);
-        const rect = createRect(textRectangle, {
-            fill: 'black'
-        });
-        mask.appendChild(rect);
-    });
-    // open line
-    const maskTargetFillRect = createRect(rectangle);
-    maskTargetFillRect.setAttribute('opacity', '0');
-    maskTargetFillRect.setAttribute('fill', 'none');
-    return { mask, maskTargetFillRect };
-}
 
 const createUMLClassOrInterfaceGeometryElement = (board, shape, points) => {
     const memorizedLatest = getMemorizedLatestByPointer(shape);
@@ -2301,8 +2305,9 @@ const buildTableCellsForGeometry = (board, rows, columns, shape) => {
     const memorizedLatest = getMemorizedLatestByPointer(shape);
     const cellCount = rows.length * columns.length;
     const defaultTexts = getDefaultGeometryProperty(shape)?.texts || [];
-    const testHeights = defaultTexts.map((textItem) => {
-        return getTextShapeProperty(board, textItem.text || DefaultTextProperty.text, memorizedLatest.textProperties['font-size']).height;
+    const textHeights = defaultTexts.map((textItem) => {
+        return getTextShapeProperty(board, textItem.text || getDefaultGeometryText(board), memorizedLatest.textProperties['font-size'])
+            .height;
     });
     return new Array(cellCount).fill('').map((item, index) => {
         const rowIndex = Math.floor(index / columns.length);
@@ -2311,7 +2316,7 @@ const buildTableCellsForGeometry = (board, rows, columns, shape) => {
             id: idCreator(),
             rowId: rows[rowIndex].id,
             columnId: columns[columnIndex].id,
-            textHeight: testHeights[index],
+            textHeight: textHeights[index],
             text: {
                 children: [
                     {
@@ -2394,66 +2399,12 @@ const getDefaultBasicShapeProperty = (shape) => {
 const getDefaultUMLProperty = (shape) => {
     return DefaultUMLPropertyMap[shape];
 };
-const createDefaultFlowchart = (point) => {
-    const decisionProperty = getDefaultFlowchartProperty(FlowchartSymbols.decision);
-    const processProperty = getDefaultFlowchartProperty(FlowchartSymbols.process);
-    const terminalProperty = getDefaultFlowchartProperty(FlowchartSymbols.terminal);
-    const options = {
-        strokeWidth: DefaultBasicShapeProperty.strokeWidth
-    };
-    const lineOptions = {
-        strokeWidth: DefaultLineStyle.strokeWidth
-    };
-    const startElement = createGeometryElement(FlowchartSymbols.terminal, getDefaultGeometryPoints(FlowchartSymbols.terminal, point), '开始', options);
-    const processPoint1 = [point[0], point[1] + terminalProperty.height / 2 + 55 + processProperty.height / 2];
-    const processElement1 = createGeometryElement(FlowchartSymbols.process, getDefaultGeometryPoints(FlowchartSymbols.process, processPoint1), '过程', options);
-    const decisionPoint = [processPoint1[0], processPoint1[1] + processProperty.height / 2 + 55 + decisionProperty.height / 2];
-    const decisionElement = createGeometryElement(FlowchartSymbols.decision, getDefaultGeometryPoints(FlowchartSymbols.decision, decisionPoint), '判断', options);
-    const processPoint2 = [decisionPoint[0] + decisionProperty.width / 2 + 75 + processProperty.width / 2, decisionPoint[1]];
-    const processElement2 = createGeometryElement(FlowchartSymbols.process, getDefaultGeometryPoints(FlowchartSymbols.process, processPoint2), '过程', options);
-    const endPoint = [decisionPoint[0], decisionPoint[1] + decisionProperty.height / 2 + 95 + terminalProperty.height / 2];
-    const endElement = createGeometryElement(FlowchartSymbols.terminal, getDefaultGeometryPoints(FlowchartSymbols.terminal, endPoint), '结束', options);
-    const line1 = createArrowLineElement(ArrowLineShape.elbow, [
-        [0, 0],
-        [0, 0]
-    ], { marker: ArrowLineMarkerType.none, connection: [0.5, 1], boundId: startElement.id }, { marker: ArrowLineMarkerType.arrow, connection: [0.5, 0], boundId: processElement1.id }, [], lineOptions);
-    const line2 = createArrowLineElement(ArrowLineShape.elbow, [
-        [0, 0],
-        [0, 0]
-    ], { marker: ArrowLineMarkerType.none, connection: [0.5, 1], boundId: processElement1.id }, { marker: ArrowLineMarkerType.arrow, connection: [0.5, 0], boundId: decisionElement.id }, [], lineOptions);
-    const line3 = createArrowLineElement(ArrowLineShape.elbow, [
-        [0, 0],
-        [0, 0]
-    ], { marker: ArrowLineMarkerType.none, connection: [0.5, 1], boundId: decisionElement.id }, { marker: ArrowLineMarkerType.arrow, connection: [0.5, 0], boundId: endElement.id }, [
-        {
-            text: buildText('是'),
-            position: 0.5,
-            width: 14,
-            height: 20
-        }
-    ], lineOptions);
-    const line4 = createArrowLineElement(ArrowLineShape.elbow, [
-        [0, 0],
-        [0, 0]
-    ], { marker: ArrowLineMarkerType.none, connection: [1, 0.5], boundId: decisionElement.id }, { marker: ArrowLineMarkerType.arrow, connection: [0, 0.5], boundId: processElement2.id }, [
-        {
-            text: buildText('否'),
-            position: 0.5,
-            width: 14,
-            height: 20
-        }
-    ], lineOptions);
-    const line5 = createArrowLineElement(ArrowLineShape.elbow, [
-        [0, 0],
-        [0, 0]
-    ], { marker: ArrowLineMarkerType.none, connection: [0.5, 1], boundId: processElement2.id }, { marker: ArrowLineMarkerType.arrow, connection: [1, 0.5], boundId: endElement.id }, [], lineOptions);
-    return [startElement, processElement1, decisionElement, processElement2, endElement, line1, line2, line3, line4, line5];
-};
-const getAutoCompletePoints = (element) => {
+const getAutoCompletePoints = (board, element, isToActive = false) => {
     const AutoCompleteMargin = (12 + RESIZE_HANDLE_DIAMETER / 2) * 2;
-    let rectangle = RectangleClient.getRectangleByPoints(element.points);
-    rectangle = RectangleClient.inflate(rectangle, AutoCompleteMargin);
-    return RectangleClient.getEdgeCenterPoints(rectangle);
+    const rectangle = RectangleClient.getRectangleByPoints(element.points);
+    const activeRectangle = toActiveRectangleFromViewBoxRectangle(board, rectangle);
+    const targetRectangle = isToActive ? activeRectangle : rectangle;
+    return RectangleClient.getEdgeCenterPoints(RectangleClient.inflate(targetRectangle, AutoCompleteMargin));
 };
 const getHitIndexOfAutoCompletePoint = (movingPoint, points) => {
     return points.findIndex((point) => {
@@ -2469,7 +2420,7 @@ const getDrawDefaultStrokeColor = (theme) => {
 const getFlowchartDefaultFill = (theme) => {
     return DrawThemeColors[theme].fill;
 };
-const getTextShapeProperty = (board, text = DefaultTextProperty.text, fontSize) => {
+const getTextShapeProperty = (board, text, fontSize) => {
     fontSize = fontSize ? Number(fontSize) : DEFAULT_FONT_SIZE;
     const textSize = measureElement(buildText(text), { fontSize, fontFamily: DEFAULT_FONT_FAMILY });
     return {
@@ -2498,7 +2449,7 @@ const getDefaultTextPoints = (board, centerPoint, fontSize) => {
     const property = getTextShapeProperty(board, DefaultTextProperty.text, fontSize);
     return RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(centerPoint, property.width, property.height));
 };
-const createTextElement = (board, points, text = DefaultTextProperty.text, textHeight) => {
+const createTextElement = (board, points, text, textHeight) => {
     const memorizedLatest = getMemorizedLatestByPointer(BasicShapes.text);
     textHeight = textHeight ? textHeight : RectangleClient.getRectangleByPoints(points).height;
     return createGeometryElement(BasicShapes.text, points, text, memorizedLatest.geometryProperties, {
@@ -2531,12 +2482,6 @@ const editText = (board, element, text) => {
         textManage.edit(() => { });
     }
 };
-const rerenderGeometryActive = (board, element) => {
-    const elementRef = PlaitElement.getElementRef(element);
-    const activeGenerator = elementRef.getGenerator(ActiveGenerator.key);
-    const selected = getSelectedElements(board).includes(element);
-    activeGenerator.processDrawing(element, PlaitBoard.getElementActiveHost(board), { selected });
-};
 const isGeometryIncludeText = (element) => {
     return isSingleTextGeometry(element) || isMultipleTextGeometry(element);
 };
@@ -3392,7 +3337,7 @@ function withDrawResize(board) {
             const resizeSnapRef = getSnapResizingRef(board, resizeRef.element, resizeSnapRefOptions);
             resizeActivePoints = resizeSnapRef.activePoints;
             snapG = resizeSnapRef.snapG;
-            PlaitBoard.getElementActiveHost(board).append(snapG);
+            PlaitBoard.getElementTopHost(board).append(snapG);
             if (bulkRotationRef) {
                 const boundingBoxCornerPoints = RectangleClient.getPoints(resizeRef.rectangle);
                 const resizedBoundingBoxCornerPoints = boundingBoxCornerPoints.map((p) => {
@@ -3485,29 +3430,17 @@ function withDrawResize(board) {
             handleG.remove();
             handleG = null;
         }
-        if (canResize() && !isSelectionMoving(board)) {
-            handleG = createG();
-            const elements = getSelectedElements(board);
-            const boundingRectangle = needCustomActiveRectangle
-                ? RectangleClient.getRectangleByPoints(resizeActivePoints)
-                : getRectangleByElements(board, elements, false);
-            let corners = RectangleClient.getCornerPoints(boundingRectangle);
-            const angle = getSelectionAngle(elements);
-            if (angle) {
-                const centerPoint = RectangleClient.getCenterPoint(boundingRectangle);
-                corners = rotatePoints(corners, centerPoint, angle);
-            }
-            corners.forEach((corner) => {
-                const g = drawHandle(board, corner);
-                handleG && handleG.append(g);
-            });
-            PlaitBoard.getElementActiveHost(board).append(handleG);
+        const selectedElements = getSelectedElements(board);
+        if (canResize() && !isSelectionMoving(board) && selectedElements.length > 1) {
+            handleG = generatorResizeHandles(board, resizeActivePoints, needCustomActiveRectangle);
+            PlaitBoard.getActiveHost(board).append(handleG);
         }
     };
     board.drawSelectionRectangle = () => {
         if (needCustomActiveRectangle) {
             const rectangle = RectangleClient.getRectangleByPoints(resizeActivePoints);
-            return drawRectangle(board, RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH), {
+            const activeRectangle = toActiveRectangleFromViewBoxRectangle(board, rectangle);
+            return drawRectangle(board, RectangleClient.inflate(activeRectangle, ACTIVE_STROKE_WIDTH), {
                 stroke: SELECTION_BORDER_COLOR,
                 strokeWidth: ACTIVE_STROKE_WIDTH
             });
@@ -3585,6 +3518,25 @@ const getResizePointsByOtherwiseAxis = (board, points, resizeOriginPoint, xZoom,
     const newRectangle = RectangleClient.getRectangleByPoints(resultPoints);
     return rotatePoints(resultPoints, RectangleClient.getCenterPoint(newRectangle), -(1 / 2) * Math.PI);
 };
+const generatorResizeHandles = (board, resizeActivePoints, needCustomActiveRectangle) => {
+    const handleG = createG();
+    const elements = getSelectedElements(board);
+    const boundingRectangle = needCustomActiveRectangle
+        ? RectangleClient.getRectangleByPoints(resizeActivePoints)
+        : getRectangleByElements(board, elements, false);
+    const boundingActiveRectangle = toActiveRectangleFromViewBoxRectangle(board, boundingRectangle);
+    let corners = RectangleClient.getCornerPoints(boundingActiveRectangle);
+    const angle = getSelectionAngle(elements);
+    if (angle) {
+        const centerPoint = RectangleClient.getCenterPoint(boundingActiveRectangle);
+        corners = rotatePoints(corners, centerPoint, angle);
+    }
+    corners.forEach((corner) => {
+        const g = drawHandle(board, corner);
+        handleG.append(g);
+    });
+    return handleG;
+};
 
 const debugKey$1 = 'debug:plait:point-for-geometry';
 const debugGenerator$1 = createDebugGenerator(debugKey$1);
@@ -7094,7 +7046,7 @@ class GeometryShapeGenerator extends Generator {
 class ArrowLineAutoCompleteGenerator extends Generator {
     static { this.key = 'line-auto-complete-generator'; }
     constructor(board) {
-        super(board);
+        super(board, { active: true });
         this.board = board;
         this.hoverElement = null;
     }
@@ -7109,7 +7061,7 @@ class ArrowLineAutoCompleteGenerator extends Generator {
     }
     draw(element, data) {
         this.autoCompleteG = createG();
-        const middlePoints = getAutoCompletePoints(element);
+        const middlePoints = getAutoCompletePoints(this.board, element, true);
         middlePoints.forEach((point, index) => {
             const circle = drawCircle(PlaitBoard.getRoughSVG(this.board), point, LINE_AUTO_COMPLETE_DIAMETER, {
                 stroke: 'none',
@@ -7152,7 +7104,7 @@ class GeometryComponent extends CommonElementFlavour {
         super();
     }
     initializeGenerator() {
-        this.activeGenerator = new ActiveGenerator(this.board, {
+        this.activeGenerator = createActiveGenerator(this.board, {
             getStrokeWidth: () => {
                 const selectedElements = getSelectedElements(this.board);
                 if (selectedElements.length === 1 && !isSelectionMoving(this.board)) {
@@ -7185,15 +7137,23 @@ class GeometryComponent extends CommonElementFlavour {
         }
         this.getRef().addGenerator(ArrowLineAutoCompleteGenerator.key, this.lineAutoCompleteGenerator);
         this.getRef().addGenerator(ActiveGenerator.key, this.activeGenerator);
+        this.getRef().updateActiveSection = () => {
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
+                selected: this.selected
+            });
+            this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
+                selected: this.selected
+            });
+        };
     }
     initialize() {
         super.initialize();
         this.initializeGenerator();
         this.shapeGenerator.processDrawing(this.element, this.getElementG());
-        this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+        this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
             selected: this.selected
         });
-        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementTopHost(this.board), {
             selected: this.selected
         });
         this.textGenerator && this.textGenerator.draw(this.getElementG());
@@ -7201,18 +7161,19 @@ class GeometryComponent extends CommonElementFlavour {
     onContextChanged(value, previous) {
         if (value.element !== previous.element || value.hasThemeChanged) {
             this.shapeGenerator.processDrawing(this.element, this.getElementG());
-            this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
-            this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), { selected: this.selected });
+            this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                 selected: this.selected
             });
             this.textGenerator && this.updateText(previous.element, value.element);
         }
         else {
             const hasSameSelected = value.selected === previous.selected;
-            const hasSameHandleState = this.activeGenerator.options.hasResizeHandle() === this.activeGenerator.hasResizeHandle;
-            if (!hasSameSelected || !hasSameHandleState) {
-                this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
-                this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            if (!hasSameSelected || value.selected) {
+                this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
+                    selected: this.selected
+                });
+                this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                     selected: this.selected
                 });
             }
@@ -7321,8 +7282,9 @@ function getHitPointIndex(points, movingPoint) {
 }
 
 class LineActiveGenerator extends Generator {
-    constructor() {
-        super(...arguments);
+    constructor(board, options = { active: true }) {
+        super(board, options);
+        this.board = board;
         this.onlySelectedCurrentLine = false;
     }
     canDraw(element, data) {
@@ -7346,16 +7308,18 @@ class LineActiveGenerator extends Generator {
                 updatePoints = points.slice(0, 1).concat(points.slice(-1));
                 elbowNextRenderPoints = getNextRenderPoints(this.board, element, data.linePoints);
             }
-            updatePoints.forEach(point => {
+            const activePoints = updatePoints.map((point) => toActivePointFromViewBoxPoint(this.board, point));
+            activePoints.forEach((point) => {
                 const updateHandle = drawPrimaryHandle(this.board, point);
                 activeG.appendChild(updateHandle);
             });
             const middlePoints = getMiddlePoints(this.board, element);
+            const activeMiddlePoints = middlePoints.map((point) => toActivePointFromViewBoxPoint(this.board, point));
             if (!PlaitBoard.hasBeenTextEditing(this.board)) {
-                for (let i = 0; i < middlePoints.length; i++) {
-                    const point = middlePoints[i];
+                for (let i = 0; i < activeMiddlePoints.length; i++) {
+                    const point = activeMiddlePoints[i];
                     if (element.shape === ArrowLineShape.elbow && elbowNextRenderPoints.length) {
-                        const handleIndex = getHitPointIndex(middlePoints, point);
+                        const handleIndex = getHitPointIndex(activeMiddlePoints, point);
                         const isUpdateHandleIndex = isUpdatedHandleIndex(this.board, element, [...points], elbowNextRenderPoints, handleIndex);
                         if (isUpdateHandleIndex) {
                             const updateHandle = drawPrimaryHandle(this.board, point);
@@ -7369,8 +7333,9 @@ class LineActiveGenerator extends Generator {
             }
         }
         else {
-            const activeRectangle = this.board.getRectangle(element);
-            if (activeRectangle) {
+            const rectangle = this.board.getRectangle(element);
+            if (rectangle) {
+                const activeRectangle = toActiveRectangleFromViewBoxRectangle(this.board, rectangle);
                 let opacity = '0.5';
                 if (activeRectangle.height === 0 || activeRectangle.width === 0) {
                     opacity = '0.8';
@@ -7408,13 +7373,20 @@ class ArrowLineComponent extends CommonElementFlavour {
         this.initializeGenerator();
         this.shapeGenerator.processDrawing(this.element, this.getElementG());
         const linePoints = getArrowLinePoints(this.board, this.element);
-        this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+        this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
             selected: this.selected,
             linePoints
         });
         super.initialize();
         this.boundedElements = this.getBoundedElements();
         this.drawText();
+        this.getRef().updateActiveSection = () => {
+            const linePoints = getArrowLinePoints(this.board, this.element);
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
+                selected: this.selected,
+                linePoints
+            });
+        };
         debugGenerator.isDebug() && debugGenerator.drawCircles(this.board, this.element.points.slice(1, -1), 4, true);
     }
     getBoundedElements() {
@@ -7440,7 +7412,7 @@ class ArrowLineComponent extends CommonElementFlavour {
         const linePoints = getArrowLinePoints(this.board, this.element);
         if (value.element !== previous.element || value.hasThemeChanged) {
             this.shapeGenerator.processDrawing(this.element, this.getElementG());
-            this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                 selected: this.selected,
                 linePoints
             });
@@ -7449,8 +7421,8 @@ class ArrowLineComponent extends CommonElementFlavour {
         }
         else {
             const needUpdate = value.selected !== previous.selected || this.activeGenerator.needUpdate();
-            if (needUpdate) {
-                this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            if (needUpdate || value.selected) {
+                this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                     selected: this.selected,
                     linePoints
                 });
@@ -7458,7 +7430,7 @@ class ArrowLineComponent extends CommonElementFlavour {
         }
         if (isBoundedElementsChanged) {
             this.shapeGenerator.processDrawing(this.element, this.getElementG());
-            this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                 selected: this.selected,
                 linePoints
             });
@@ -7530,7 +7502,7 @@ class ArrowLineComponent extends CommonElementFlavour {
     }
     updateTextRectangle() {
         const textManages = this.getRef().getTextManages();
-        textManages.forEach(manage => {
+        textManages.forEach((manage) => {
             manage.updateRectangle();
         });
     }
@@ -7548,12 +7520,19 @@ class VectorLineComponent extends CommonElementFlavour {
     initializeGenerator() {
         this.shapeGenerator = new VectorLineShapeGenerator(this.board);
         this.activeGenerator = new LineActiveGenerator(this.board);
+        this.getRef().updateActiveSection = () => {
+            const linePoints = getVectorLinePoints(this.board, this.element);
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
+                selected: this.selected,
+                linePoints
+            });
+        };
     }
     initialize() {
         this.initializeGenerator();
         this.shapeGenerator.processDrawing(this.element, this.getElementG());
         const linePoints = getVectorLinePoints(this.board, this.element);
-        this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+        this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
             selected: this.selected,
             linePoints
         });
@@ -7563,15 +7542,15 @@ class VectorLineComponent extends CommonElementFlavour {
         const linePoints = getVectorLinePoints(this.board, this.element);
         if (value.element !== previous.element || value.hasThemeChanged) {
             this.shapeGenerator.processDrawing(this.element, this.getElementG());
-            this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                 selected: this.selected,
                 linePoints
             });
         }
         else {
-            const needUpdate = value.selected !== previous.selected || this.activeGenerator.needUpdate();
+            const needUpdate = value.selected !== previous.selected || this.activeGenerator.needUpdate() || value.selected;
             if (needUpdate) {
-                this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+                this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                     selected: this.selected,
                     linePoints
                 });
@@ -7681,9 +7660,9 @@ const withGeometryCreateByDrag = (board) => {
         if (dragMode) {
             const memorizedLatest = getMemorizedLatestByPointer(pointer);
             if (pointer === BasicShapes.text) {
-                const property = getTextShapeProperty(board, DefaultTextProperty.text, memorizedLatest.textProperties['font-size']);
+                const property = getTextShapeProperty(board, getDefaultGeometryText(board), memorizedLatest.textProperties['font-size']);
                 const points = RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(movingPoint, property.width, property.height));
-                temporaryElement = createTextElement(board, points);
+                temporaryElement = createTextElement(board, points, getDefaultGeometryText(board));
                 if (!fakeCreateTextRef) {
                     const textManage = new TextManage(board, {
                         getRectangle: () => {
@@ -7707,7 +7686,7 @@ const withGeometryCreateByDrag = (board) => {
                 const points = getDefaultGeometryPoints(pointer, movingPoint);
                 temporaryElement = createDefaultGeometry(board, points, pointer);
                 geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
-                PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
+                PlaitBoard.getElementTopHost(board).append(geometryShapeG);
             }
         }
         pointerMove(event);
@@ -7754,9 +7733,9 @@ const withGeometryCreateByDrawing = (board) => {
             const pointer = PlaitBoard.getPointer(board);
             if (pointer === BasicShapes.text) {
                 const memorizedLatest = getMemorizedLatestByPointer(pointer);
-                const property = getTextShapeProperty(board, DefaultTextProperty.text, memorizedLatest.textProperties['font-size']);
+                const property = getTextShapeProperty(board, getDefaultGeometryText(board), memorizedLatest.textProperties['font-size']);
                 const points = RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(point, property.width, property.height));
-                const textElement = createTextElement(board, points);
+                const textElement = createTextElement(board, points, getDefaultGeometryText(board));
                 insertElement(board, textElement);
                 start = null;
             }
@@ -7783,11 +7762,11 @@ const withGeometryCreateByDrawing = (board) => {
                 isCreate: true
             });
             snapG = resizeSnapRef.snapG;
-            PlaitBoard.getElementActiveHost(board).append(snapG);
+            PlaitBoard.getElementTopHost(board).append(snapG);
             points = normalizeShapePoints(resizeSnapRef.activePoints, isShift);
             temporaryElement = createDefaultGeometry(board, points, pointer);
             geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
-            PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
+            PlaitBoard.getElementTopHost(board).append(geometryShapeG);
         }
         pointerMove(event);
     };
@@ -8112,7 +8091,7 @@ const withArrowLineBoundReaction = (board) => {
         const linePointers = Object.keys(ArrowLineShape);
         const isLinePointer = PlaitBoard.isInPointer(board, linePointers);
         const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-        const isLineResizing = isResizingByCondition(board, resizeRef => {
+        const isLineResizing = isResizingByCondition(board, (resizeRef) => {
             const { element, handle } = resizeRef;
             const isSourceOrTarget = handle === LineResizeHandle.target || handle === LineResizeHandle.source;
             return PlaitDrawElement.isArrowLine(element) && isSourceOrTarget;
@@ -8135,12 +8114,12 @@ const withArrowLineBoundReaction = (board) => {
                 if (hasValidAngle(hitElement)) {
                     setAngleForG(boundShapeG, RectangleClient.getCenterPointByPoints(hitElement.points), hitElement.angle);
                 }
-                PlaitBoard.getElementActiveHost(board).append(boundShapeG);
+                PlaitBoard.getElementTopHost(board).append(boundShapeG);
             }
         }
         pointerMove(event);
     };
-    board.pointerUp = event => {
+    board.pointerUp = (event) => {
         boundShapeG?.remove();
         boundShapeG = null;
         pointerUp(event);
@@ -8148,6 +8127,9 @@ const withArrowLineBoundReaction = (board) => {
     return board;
 };
 
+const getDefaultLineText = (board) => {
+    return getI18nValue(board, DrawI18nKey.lineText, LINE_TEXT);
+};
 const withArrowLineText = (board) => {
     const { dblClick } = board;
     board.dblClick = (event) => {
@@ -8165,13 +8147,19 @@ const withArrowLineText = (board) => {
                     editHandle(board, hitTarget, textIndex);
                 }
                 else {
-                    const ratio = getRatioByPoint(points, point);
+                    const defaultLineText = getDefaultLineText(board);
                     const textMemory = getMemorizedLatest('arrow-line')?.text || {};
+                    const textElement = buildText(defaultLineText, undefined, textMemory);
+                    const { width, height } = measureElement(textElement, {
+                        fontSize: DEFAULT_FONT_SIZE,
+                        fontFamily: DEFAULT_FONT_FAMILY
+                    });
+                    const ratio = getRatioByPoint(points, point);
                     texts.push({
-                        text: buildText(LINE_TEXT, undefined, textMemory),
+                        text: textElement,
                         position: ratio,
-                        width: 28,
-                        height: 20
+                        width,
+                        height
                     });
                     DrawTransforms.setArrowLineTexts(board, hitTarget, texts);
                     setTimeout(() => {
@@ -8193,7 +8181,8 @@ function editHandle(board, element, manageIndex, isFirstEdit = false) {
     const textManage = textManages[manageIndex];
     textManage.edit(() => {
         const text = Node.string(textManage.getText());
-        const shouldRemove = !text || (isFirstEdit && text === LINE_TEXT);
+        const defaultLineText = getDefaultLineText(board);
+        const shouldRemove = !text || (isFirstEdit && text === defaultLineText);
         if (shouldRemove) {
             DrawTransforms.removeArrowLineText(board, element, manageIndex);
         }
@@ -8214,7 +8203,7 @@ class ImageComponent extends CommonElementFlavour {
                     height: element.points[1][1] - element.points[0][1]
                 };
             },
-            getImageItem: element => {
+            getImageItem: (element) => {
                 return {
                     url: element.url,
                     width: element.points[1][0] - element.points[0][0],
@@ -8224,12 +8213,18 @@ class ImageComponent extends CommonElementFlavour {
         });
         this.lineAutoCompleteGenerator = new ArrowLineAutoCompleteGenerator(this.board);
         this.getRef().addGenerator(ArrowLineAutoCompleteGenerator.key, this.lineAutoCompleteGenerator);
+        this.getRef().updateActiveSection = () => {
+            this.imageGenerator.setFocus(this.element, this.selected);
+            this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
+                selected: this.selected
+            });
+        };
     }
     initialize() {
         super.initialize();
         this.initializeGenerator();
         this.imageGenerator.processDrawing(this.element, this.getElementG());
-        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
             selected: this.selected
         });
     }
@@ -8237,17 +8232,15 @@ class ImageComponent extends CommonElementFlavour {
         if (value.element !== previous.element) {
             this.imageGenerator.updateImage(this.getElementG(), previous.element, value.element);
             this.imageGenerator.setFocus(this.element, this.selected);
-            this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                 selected: this.selected
             });
         }
         else {
             const hasSameSelected = value.selected === previous.selected;
-            const hasSameHandleState = this.imageGenerator.activeGenerator &&
-                this.imageGenerator.activeGenerator.options.hasResizeHandle() === this.imageGenerator.activeGenerator.hasResizeHandle;
-            if (!hasSameSelected || !hasSameHandleState) {
+            if (!hasSameSelected || value.selected) {
                 this.imageGenerator.setFocus(this.element, this.selected);
-                this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+                this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                     selected: this.selected
                 });
             }
@@ -8268,10 +8261,10 @@ const withArrowLineAutoCompleteReaction = (board) => {
         PlaitBoard.getBoardContainer(board).classList.remove(CursorClass.crosshair);
         const selectedElements = getSelectedDrawElements(board);
         const targetElement = selectedElements.length === 1 && selectedElements[0];
-        const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+        const activePoint = toActivePoint(board, event.x, event.y);
         if (!PlaitBoard.isReadonly(board) && !isSelectionMoving(board) && targetElement && PlaitDrawElement.isShapeElement(targetElement)) {
-            const points = getAutoCompletePoints(targetElement);
-            const hitIndex = getHitIndexOfAutoCompletePoint(rotateAntiPointsByElement(movingPoint, targetElement) || movingPoint, points);
+            const points = getAutoCompletePoints(board, targetElement, true);
+            const hitIndex = getHitIndexOfAutoCompletePoint(rotateAntiPointsByElement(board, activePoint, targetElement, true) || activePoint, points);
             const hitPoint = points[hitIndex];
             const ref = PlaitElement.getElementRef(targetElement);
             const lineAutoCompleteGenerator = ref.getGenerator(ArrowLineAutoCompleteGenerator.key);
@@ -8283,10 +8276,12 @@ const withArrowLineAutoCompleteReaction = (board) => {
                     fill: RgbaToHEX(PRIMARY_COLOR, LINE_AUTO_COMPLETE_HOVERED_OPACITY),
                     fillStyle: 'solid'
                 });
-                PlaitBoard.getElementActiveHost(board).append(reactionG);
+                PlaitBoard.getActiveHost(board).append(reactionG);
                 PlaitBoard.getBoardContainer(board).classList.add(CursorClass.crosshair);
                 if (hasValidAngle(targetElement)) {
-                    setAngleForG(reactionG, RectangleClient.getCenterPoint(board.getRectangle(targetElement)), targetElement.angle);
+                    const rectangle = board.getRectangle(targetElement);
+                    const activeRectangle = toActiveRectangleFromViewBoxRectangle(board, rectangle);
+                    setAngleForG(reactionG, RectangleClient.getCenterPoint(activeRectangle), targetElement.angle);
                 }
             }
         }
@@ -8305,14 +8300,15 @@ const withArrowLineAutoComplete = (board) => {
     board.pointerDown = (event) => {
         const selectedElements = getSelectedDrawElements(board);
         const targetElement = selectedElements.length === 1 && selectedElements[0];
-        const clickPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+        const activePoint = toActivePoint(board, event.x, event.y);
         if (!PlaitBoard.isReadonly(board) && targetElement && PlaitDrawElement.isShapeElement(targetElement)) {
-            const points = getAutoCompletePoints(targetElement);
-            const index = getHitIndexOfAutoCompletePoint(rotateAntiPointsByElement(clickPoint, targetElement) || clickPoint, points);
+            const points = getAutoCompletePoints(board, targetElement, true);
+            const index = getHitIndexOfAutoCompletePoint(rotateAntiPointsByElement(board, activePoint, targetElement, true) || activePoint, points);
             const hitPoint = points[index];
             if (hitPoint) {
                 temporaryDisableSelection(board);
-                autoCompletePoint = hitPoint;
+                const screenPoint = toScreenPointFromActivePoint(board, hitPoint);
+                autoCompletePoint = toViewBoxPoint(board, toHostPoint(board, screenPoint[0], screenPoint[1]));
                 sourceElement = targetElement;
                 BoardTransforms.updatePointerType(board, ArrowLineShape.elbow);
             }
@@ -8324,7 +8320,7 @@ const withArrowLineAutoComplete = (board) => {
         lineShapeG = createG();
         let movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         if (autoCompletePoint && sourceElement) {
-            const distance = distanceBetweenPointAndPoint(...(rotateAntiPointsByElement(movingPoint, sourceElement) || movingPoint), ...autoCompletePoint);
+            const distance = distanceBetweenPointAndPoint(...(rotateAntiPointsByElement(board, movingPoint, sourceElement) || movingPoint), ...autoCompletePoint);
             if (distance > PRESS_AND_MOVE_BUFFER) {
                 const rectangle = RectangleClient.getRectangleByPoints(sourceElement.points);
                 const shape = getElementShape(sourceElement);
@@ -8342,7 +8338,7 @@ const withArrowLineAutoComplete = (board) => {
         }
         pointerMove(event);
     };
-    board.globalPointerUp = event => {
+    board.globalPointerUp = (event) => {
         if (temporaryElement) {
             Transforms.insertNode(board, temporaryElement, [board.children.length]);
             clearSelectedElement(board);
@@ -8418,7 +8414,7 @@ const withDrawRotate = (board) => {
     const canRotate = () => {
         const elements = getSelectedElements(board);
         return (elements.length > 0 &&
-            elements.every(el => (PlaitDrawElement.isDrawElement(el) && !PlaitDrawElement.isArrowLine(el)) ||
+            elements.every((el) => (PlaitDrawElement.isDrawElement(el) && !PlaitDrawElement.isArrowLine(el)) ||
                 PlaitDrawElement.isCustomGeometryElement(board, el)));
     };
     board.pointerDown = (event) => {
@@ -8426,16 +8422,17 @@ const withDrawRotate = (board) => {
             pointerDown(event);
             return;
         }
-        const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+        const activePoint = toActivePoint(board, event.x, event.y);
         const elements = getSelectedElements(board);
-        const boundingRectangle = getRectangleByElements(board, elements, false);
-        const handleRectangle = getRotateHandleRectangle(boundingRectangle);
+        const rectangle = getRectangleByElements(board, elements, false);
+        const activeRectangle = toActiveRectangleFromViewBoxRectangle(board, rectangle);
+        const handleRectangle = getRotateHandleRectangle(activeRectangle);
         const angle = getSelectionAngle(elements);
-        const rotatedPoint = angle ? rotatePoints(point, RectangleClient.getCenterPoint(boundingRectangle), -angle) : point;
+        const rotatedPoint = angle ? rotatePoints(activePoint, RectangleClient.getCenterPoint(activeRectangle), -angle) : activePoint;
         if (handleRectangle && RectangleClient.isHit(RectangleClient.getRectangleByPoints([rotatedPoint, rotatedPoint]), handleRectangle)) {
             rotateRef = {
                 elements: [...elements],
-                startPoint: point
+                startPoint: activePoint
             };
         }
         pointerDown(event);
@@ -8445,9 +8442,10 @@ const withDrawRotate = (board) => {
             event.preventDefault();
             const isShift = !!event.shiftKey;
             addRotating(board, rotateRef);
-            const endPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-            const selectionRectangle = getRectangleByElements(board, rotateRef.elements, false);
-            const selectionCenterPoint = RectangleClient.getCenterPoint(selectionRectangle);
+            const endPoint = toActivePoint(board, event.x, event.y);
+            const rectangle = getRectangleByElements(board, rotateRef.elements, false);
+            const activeRectangle = toActiveRectangleFromViewBoxRectangle(board, rectangle);
+            const selectionCenterPoint = RectangleClient.getCenterPoint(activeRectangle);
             if (!getSelectionAngle(rotateRef.elements) && rotateRef.elements.length > 1) {
                 needCustomActiveRectangle = true;
             }
@@ -8499,32 +8497,35 @@ const withDrawRotate = (board) => {
         if (canRotate() && !isSelectionMoving(board)) {
             if (needCustomActiveRectangle && rotateRef) {
                 const boundingRectangle = getRectangleByElements(board, rotateRef.elements, false);
-                rotateHandleG = drawRotateHandle(board, boundingRectangle);
+                const boundingActiveRectangle = toActiveRectangleFromViewBoxRectangle(board, boundingRectangle);
+                rotateHandleG = drawRotateHandle(board, boundingActiveRectangle);
                 rotateHandleG.classList.add(ROTATE_HANDLE_CLASS_NAME);
                 if (rotateRef.angle) {
-                    setAngleForG(rotateHandleG, RectangleClient.getCenterPoint(boundingRectangle), rotateRef.angle);
+                    setAngleForG(rotateHandleG, RectangleClient.getCenterPoint(boundingActiveRectangle), rotateRef.angle);
                 }
             }
             else {
                 const elements = getSelectedElements(board);
                 const boundingRectangle = getRectangleByElements(board, elements, false);
-                rotateHandleG = drawRotateHandle(board, boundingRectangle);
+                const boundingActiveRectangle = toActiveRectangleFromViewBoxRectangle(board, boundingRectangle);
+                rotateHandleG = drawRotateHandle(board, boundingActiveRectangle);
                 rotateHandleG.classList.add(ROTATE_HANDLE_CLASS_NAME);
-                setAngleForG(rotateHandleG, RectangleClient.getCenterPoint(boundingRectangle), getSelectionAngle(elements));
+                setAngleForG(rotateHandleG, RectangleClient.getCenterPoint(boundingActiveRectangle), getSelectionAngle(elements));
             }
-            PlaitBoard.getElementActiveHost(board).append(rotateHandleG);
+            PlaitBoard.getActiveHost(board).append(rotateHandleG);
         }
     };
     board.drawSelectionRectangle = () => {
         if (needCustomActiveRectangle && rotateRef) {
             const rectangle = getRectangleByElements(board, rotateRef.elements, false);
-            const rectangleG = drawRectangle(board, RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH), {
+            const activeRectangle = toActiveRectangleFromViewBoxRectangle(board, rectangle);
+            const rectangleG = drawRectangle(board, RectangleClient.inflate(activeRectangle, ACTIVE_STROKE_WIDTH), {
                 stroke: SELECTION_BORDER_COLOR,
                 strokeWidth: ACTIVE_STROKE_WIDTH
             });
             rectangleG.classList.add(SELECTION_RECTANGLE_CLASS_NAME);
             if (rotateRef.angle) {
-                setAngleForG(rectangleG, RectangleClient.getCenterPoint(rectangle), rotateRef.angle);
+                setAngleForG(rectangleG, RectangleClient.getCenterPoint(activeRectangle), rotateRef.angle);
             }
             return rectangleG;
         }
@@ -8538,7 +8539,7 @@ class TableComponent extends CommonElementFlavour {
         super();
     }
     initializeGenerator() {
-        this.activeGenerator = new ActiveGenerator(this.board, {
+        this.activeGenerator = createActiveGenerator(this.board, {
             getStrokeWidth: () => {
                 return ACTIVE_STROKE_WIDTH;
             },
@@ -8564,6 +8565,14 @@ class TableComponent extends CommonElementFlavour {
         this.initializeTextManage();
         this.lineAutoCompleteGenerator = new ArrowLineAutoCompleteGenerator(this.board);
         this.getRef().addGenerator(ArrowLineAutoCompleteGenerator.key, this.lineAutoCompleteGenerator);
+        this.getRef().updateActiveSection = () => {
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
+                selected: this.selected
+            });
+            this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
+                selected: this.selected
+            });
+        };
     }
     initialize() {
         super.initialize();
@@ -8574,13 +8583,13 @@ class TableComponent extends CommonElementFlavour {
         this.tableGenerator.processDrawing(this.element, this.getElementG());
         this.textGenerator.draw(this.getElementG());
         this.rotateVerticalText();
-        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
             selected: this.selected
         });
     }
     rotateVerticalText() {
         const table = this.board.buildTable(this.element);
-        table.cells.forEach(item => {
+        table.cells.forEach((item) => {
             if (PlaitTableElement.isVerticalText(item)) {
                 const textManage = getTextManageByCell(this.board, item);
                 if (textManage) {
@@ -8594,8 +8603,8 @@ class TableComponent extends CommonElementFlavour {
     }
     getDrawShapeTexts(cells) {
         return cells
-            .filter(item => isCellIncludeText(item))
-            .map(item => {
+            .filter((item) => isCellIncludeText(item))
+            .map((item) => {
             return {
                 id: item.id,
                 text: item.text,
@@ -8643,7 +8652,7 @@ class TableComponent extends CommonElementFlavour {
                 setSelectedCells(value.element, previousSelectedCells);
             }
             this.tableGenerator.processDrawing(value.element, this.getElementG());
-            this.activeGenerator.processDrawing(value.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
+            this.activeGenerator.processDrawing(value.element, PlaitBoard.getActiveHost(this.board), { selected: this.selected });
             const previousTexts = this.getDrawShapeTexts(previous.element.cells);
             const currentTexts = this.getDrawShapeTexts(value.element.cells);
             this.textGenerator.update(value.element, previousTexts, currentTexts, this.getElementG());
@@ -8651,10 +8660,9 @@ class TableComponent extends CommonElementFlavour {
         }
         else {
             const hasSameSelected = value.selected === previous.selected;
-            const hasSameHandleState = this.activeGenerator.options.hasResizeHandle() === this.activeGenerator.hasResizeHandle;
             const currentSelectedCells = getSelectedCells(value.element);
-            if (!hasSameSelected || !hasSameHandleState || currentSelectedCells?.length) {
-                this.activeGenerator.processDrawing(value.element, PlaitBoard.getElementActiveHost(this.board), {
+            if (!hasSameSelected || currentSelectedCells?.length || value.selected) {
+                this.activeGenerator.processDrawing(value.element, PlaitBoard.getActiveHost(this.board), {
                     selected: this.selected
                 });
             }
@@ -8662,7 +8670,7 @@ class TableComponent extends CommonElementFlavour {
                 clearSelectedCells(value.element);
             }
         }
-        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
             selected: this.selected
         });
     }
@@ -8681,17 +8689,21 @@ function withTableResize(board) {
     const options = {
         key: 'draw-table',
         canResize: () => {
-            return true;
+            const selectedElements = getSelectedElements(board);
+            return isSingleSelectTable(board) && !hasValidAngle(selectedElements[0]);
         },
         hitTest: (point) => {
-            const hitElement = getHitElementByPoint(board, point);
+            const selectedElements = getSelectedElements(board);
+            const hitElement = selectedElements[0];
+            // debugGenerator.clear();
             if (hitElement && PlaitDrawElement.isElementByTable(hitElement)) {
                 let rectangle = board.getRectangle(hitElement);
+                // debugGenerator.drawRectangle(board, rectangle);
+                // debugGenerator.drawCircles(board, [point], 5);
                 let handleRef = getHitRectangleResizeHandleRef(board, rectangle, point, hitElement.angle);
                 if (handleRef) {
                     const selectElement = isSelectedElement(board, hitElement);
-                    if ((selectElement && isSingleSelectElementByTable(board)) ||
-                        (!selectElement && !isCornerHandle(board, handleRef.handle))) {
+                    if ((selectElement && isSingleSelectTable(board)) || (!selectElement && !isCornerHandle(board, handleRef.handle))) {
                         return {
                             element: hitElement,
                             handle: handleRef.handle,
@@ -8728,7 +8740,7 @@ function withTableResize(board) {
                 const resizePoints = [resizeState.startPoint, resizeState.endPoint];
                 const { xZoom, yZoom } = getResizeZoom(resizePoints, originPoint, handlePoint, false, false);
                 const originPoints = resizeRef.options?.cell.points;
-                const targetPoints = originPoints.map(p => {
+                const targetPoints = originPoints.map((p) => {
                     return movePointByZoomAndOriginPoint(p, originPoint, xZoom, yZoom);
                 });
                 const offsetX = targetPoints[1][0] - originPoints[1][0];
@@ -8755,7 +8767,7 @@ function withTableResize(board) {
                 }, isAspectRatio, isFromCorner);
                 const resizeSnapRef = getSnapResizingRef(board, [resizeRef.element], resizeSnapRefOptions);
                 snapG = resizeSnapRef.snapG;
-                PlaitBoard.getElementActiveHost(board).append(snapG);
+                PlaitBoard.getElementTopHost(board).append(snapG);
                 const points = resizeSnapRef.activePoints;
                 const originPoints = resizeRef.element.points;
                 const originRect = RectangleClient.getRectangleByPoints(originPoints);
@@ -8765,7 +8777,7 @@ function withTableResize(board) {
                 let columns = [...resizeRef.element.columns];
                 let rows = [...resizeRef.element.rows];
                 if (offsetWidth !== 0) {
-                    columns = columns.map(item => {
+                    columns = columns.map((item) => {
                         if (item.width) {
                             return {
                                 ...item,
@@ -8776,7 +8788,7 @@ function withTableResize(board) {
                     });
                 }
                 if (offsetHeight !== 0) {
-                    rows = rows.map(item => {
+                    rows = rows.map((item) => {
                         if (item.height) {
                             return {
                                 ...item,
@@ -8810,7 +8822,9 @@ const withTable = (board) => {
     tableBoard.isHit = (element, point, isStrict) => {
         if (PlaitDrawElement.isElementByTable(element)) {
             const client = RectangleClient.getRectangleByPoints(element.points);
-            return RectangleClient.isPointInRectangle(client, point);
+            const nearestPoint = TableEngine.getNearestPoint(client, point);
+            const distance = distanceBetweenPointAndPoint(nearestPoint[0], nearestPoint[1], point[0], point[1]);
+            return distance <= HIT_DISTANCE_BUFFER || RectangleClient.isPointInRectangle(client, point);
         }
         return isHit(element, point, isStrict);
     };
@@ -8847,9 +8861,9 @@ const withTable = (board) => {
             event.preventDefault();
             if (PlaitDrawElement.isElementByTable(targetElement)) {
                 const cells = getSelectedCells(targetElement);
-                let cell = targetElement.cells.find(item => item.text && item.textHeight);
+                let cell = targetElement.cells.find((item) => item.text && item.textHeight);
                 if (cells?.length) {
-                    cell = cells.find(item => item.text && item.textHeight);
+                    cell = cells.find((item) => item.text && item.textHeight);
                 }
                 if (cell) {
                     editCell(board, cell);
@@ -8922,7 +8936,7 @@ const withSwimlaneCreateByDrag = (board) => {
             const points = getDefaultSwimlanePoints(pointer, movingPoint);
             temporaryElement = createDefaultSwimlane(pointer, points);
             tableGenerator.processDrawing(temporaryElement, swimlaneG);
-            PlaitBoard.getElementActiveHost(board).append(swimlaneG);
+            PlaitBoard.getElementTopHost(board).append(swimlaneG);
         }
         pointerMove(event);
     };
@@ -8985,11 +8999,11 @@ const withSwimlaneCreateByDrawing = (board) => {
                 isCreate: true
             });
             snapG = resizeSnapRef.snapG;
-            PlaitBoard.getElementActiveHost(board).append(snapG);
+            PlaitBoard.getElementTopHost(board).append(snapG);
             points = normalizeShapePoints(resizeSnapRef.activePoints, isShift);
             temporaryElement = createDefaultSwimlane(pointer, points);
             tableGenerator.processDrawing(temporaryElement, swimlaneG);
-            PlaitBoard.getElementActiveHost(board).append(swimlaneG);
+            PlaitBoard.getElementTopHost(board).append(swimlaneG);
         }
         pointerMove(event);
     };
@@ -9291,5 +9305,5 @@ const withDraw = (board) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ArrowLineAutoCompleteGenerator, ArrowLineComponent, ArrowLineHandleKey, ArrowLineMarkerType, ArrowLineShape, BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultActivationProperty, DefaultActorProperty, DefaultArrowProperty, DefaultAssemblyProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultClassProperty, DefaultCloudProperty, DefaultCombinedFragmentProperty, DefaultComponentBoxProperty, DefaultConnectorProperty, DefaultContainerProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDeletionProperty, DefaultDocumentProperty, DefaultDrawActiveStyle, DefaultDrawStyle, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultInterfaceProperty, DefaultInternalStorageProperty, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultObjectProperty, DefaultPackageProperty, DefaultPentagonArrowProperty, DefaultPortProperty, DefaultProvidedInterfaceProperty, DefaultRequiredInterfaceProperty, DefaultSwimlaneHorizontalProperty, DefaultSwimlaneHorizontalWithHeaderProperty, DefaultSwimlanePropertyMap, DefaultSwimlaneVerticalProperty, DefaultSwimlaneVerticalWithHeaderProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, DefaultUMLPropertyMap, DrawThemeColors, DrawTransforms, FlowchartSymbols, GEOMETRY_NOT_CLOSED, GEOMETRY_WITHOUT_TEXT, GEOMETRY_WITH_MULTIPLE_TEXT, GeometryCommonTextKeys, GeometryComponent, GeometryShapeGenerator, GeometryThreshold, KEY_TO_TEXT_MANAGE, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LineActiveGenerator, MIN_TEXT_WIDTH, MemorizeKey, MultipleTextGeometryTextKeys, PlaitArrowLine, PlaitDrawElement, PlaitGeometry, PlaitTableElement, Q2C, SELECTED_CELLS, SWIMLANE_HEADER_SIZE, ShapeDefaultSpace, SingleTextGenerator, SwimlaneDrawSymbols, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, VectorLineComponent, VectorLinePointerType, VectorLineShape, WithArrowLineAutoCompletePluginKey, WithDrawPluginKey, adjustSwimlaneShape, alignElbowSegment, alignPoints, buildClipboardData, buildDefaultTextsByShape, buildSwimlaneTable, clearSelectedCells, collectArrowLineUpdatedRefsByGeometry, createArrowLineElement, createCell, createDefaultCells, createDefaultFlowchart, createDefaultGeometry, createDefaultRowsOrColumns, createDefaultSwimlane, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createMultipleTextGeometryElement, createTextElement, createUMLClassOrInterfaceGeometryElement, createVectorLineElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawArrowLine, drawArrowLineArrow, drawBoundReaction, drawGeometry, drawShape, drawVectorLine, editCell, editText, getArrowLineHandleRefPair, getArrowLinePointers, getArrowLinePoints, getArrowLineTextRectangle, getArrowLines, getAutoCompletePoints, getBasicPointers, getCellWithPoints, getCellsRectangle, getCellsWithPoints, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultSwimlanePoints, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFirstFilledDrawElement, getFirstTextOrLineElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitCell, getHitConnection, getHitConnectorPoint, getHitDrawElement, getHitIndexOfAutoCompletePoint, getHitMultipleGeometryText, getHitShape, getIndexAndDeleteCountByKeyPoint, getLineMemorizedLatest, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getMultipleTextGeometryTextKeys, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedArrowLineElements, getSelectedCells, getSelectedCustomGeometryElements, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedSwimlane, getSelectedTableCellsEditor, getSelectedTableElements, getSelectedVectorLineElements, getSnapResizingRef, getSnapResizingRefOptions, getSnappingRef, getSnappingShape, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlaneCount, getSwimlanePointers, getTextKey, getTextManage, getTextManageByCell, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, getVectorLinePointers, getVectorLinePoints, handleArrowLineCreating, hasIllegalElbowPoint, insertClipboardData, insertElement, isCellIncludeText, 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, isSingleSelectElementByTable, isSingleSelectLine, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isSwimlanePointers, isSwimlaneWithHeader, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, rerenderGeometryActive, setSelectedCells, setTextManage, traverseDrawShapes, updateCellIds, updateCellIdsByRowOrColumn, updateColumns, updateRowOrColumnIds, updateRows, vectorLineCreating, withArrowLineAutoComplete, withDraw };
+export { ArrowLineAutoCompleteGenerator, ArrowLineComponent, ArrowLineHandleKey, ArrowLineMarkerType, ArrowLineShape, BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultActivationProperty, DefaultActorProperty, DefaultArrowProperty, DefaultAssemblyProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultClassProperty, DefaultCloudProperty, DefaultCombinedFragmentProperty, DefaultComponentBoxProperty, DefaultConnectorProperty, DefaultContainerProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDeletionProperty, DefaultDocumentProperty, DefaultDrawActiveStyle, DefaultDrawStyle, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultInterfaceProperty, DefaultInternalStorageProperty, 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, getFirstTextOrLineElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitCell, getHitConnection, getHitConnectorPoint, getHitDrawElement, getHitIndexOfAutoCompletePoint, getHitMultipleGeometryText, getHitShape, getIndexAndDeleteCountByKeyPoint, getLineMemorizedLatest, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getMultipleTextGeometryTextKeys, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedArrowLineElements, getSelectedCells, getSelectedCustomGeometryElements, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedSwimlane, getSelectedTableCellsEditor, getSelectedTableElements, getSelectedVectorLineElements, getSnapResizingRef, getSnapResizingRefOptions, getSnappingRef, getSnappingShape, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlaneCount, getSwimlanePointers, getTextKey, getTextManage, getTextManageByCell, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, getVectorLinePointers, getVectorLinePoints, handleArrowLineCreating, hasIllegalElbowPoint, insertClipboardData, insertElement, isCellIncludeText, 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, isSwimlaneWithHeader, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, setSelectedCells, setTextManage, traverseDrawShapes, updateCellIds, updateCellIdsByRowOrColumn, updateColumns, updateRowOrColumnIds, updateRows, vectorLineCreating, withArrowLineAutoComplete, withDraw };
 //# sourceMappingURL=plait-draw.mjs.map