@plait/draw 0.36.0 → 0.38.0

package/fesm2022/plait-draw.mjs

@@ -1,11 +1,11 @@
-import { PlaitElement, ACTIVE_STROKE_WIDTH, ThemeColorMode, PlaitBoard, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, RectangleClient, isPointInEllipse, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, Point, BOARD_TO_HOST, transformPoint, toPoint, idCreator, createG, BoardTransforms, PlaitPointerType, preventTouchMove, createForeignObject, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, distanceBetweenPointAndSegment, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, depthFirstRecursion, getIsRecursionFunc, getElementById, Direction, catmullRomFitting, distanceBetweenPointAndSegments, createMask, createRect, findElements, getSelectedElements, isPolylineHitRectangle, isSelectionMoving, RgbaToHEX, PlaitPluginElementComponent, setClipboardData, getDataFromClipboard, getHitElementByPoint, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER } from '@plait/core';
-import { getRectangleByPoints, Generator, getMemorizedLatest, memorizeLatest, PropertyTransforms, normalizeShapePoints, isDndMode, isDrawingMode, RESIZE_HANDLE_DIAMETER, getExtendPoint, getFactorByPoints, getRectangleResizeHandleRefs, getDirectionByVector, getOppositeDirection, getDirectionFactor, DEFAULT_ROUTE_MARGIN, reduceRouteMargin, getNextPoint, generateElbowLineRoute, getPoints, removeDuplicatePoints, getPointByVector, getPointOnPolyline, getDirectionByPointOfRectangle, rotateVectorAnti90, TRANSPARENT, PRIMARY_COLOR, CommonPluginElement, ActiveGenerator, WithTextPluginKey, isVirtualKey, isDelete, isSpaceHotkey, acceptImageTypes, getElementOfFocusedImage, buildImage, ResizeHandle, withResize, isResizingByCondition, getRatioByPoint, ImageGenerator } from '@plait/common';
-import { AlignEditor, Alignment, DEFAULT_FONT_SIZE, buildText, TextManage, getTextFromClipboard, getTextSize } from '@plait/text';
-import { isKeyHotkey } from 'is-hotkey';
+import { PlaitElement, ACTIVE_STROKE_WIDTH, ThemeColorMode, PlaitBoard, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, RectangleClient, isPointInEllipse, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, idCreator, createG, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, distanceBetweenPointAndSegment, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, depthFirstRecursion, getIsRecursionFunc, getElementById, Direction, catmullRomFitting, distanceBetweenPointAndSegments, createMask, createRect, findElements, Point, getSelectedElements, isPolylineHitRectangle, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, BOARD_TO_HOST, transformPoint, toPoint, isSelectionMoving, RgbaToHEX, PlaitPluginElementComponent, preventTouchMove, BoardTransforms, PlaitPointerType, setClipboardData, getDataFromClipboard, getHitElementByPoint, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER } from '@plait/core';
+import { getRectangleByPoints, RESIZE_HANDLE_DIAMETER, getExtendPoint, getFactorByPoints, Generator, getRectangleResizeHandleRefs, getMemorizedLatest, memorizeLatest, getDirectionByVector, getOppositeDirection, getDirectionFactor, DEFAULT_ROUTE_MARGIN, reduceRouteMargin, getNextPoint, generateElbowLineRoute, getPoints, removeDuplicatePoints, getPointByVector, getPointOnPolyline, getDirectionByPointOfRectangle, rotateVectorAnti90, TRANSPARENT, normalizeShapePoints, PRIMARY_COLOR, CommonPluginElement, ActiveGenerator, WithTextPluginKey, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, acceptImageTypes, getElementOfFocusedImage, buildImage, ResizeHandle, withResize, isResizingByCondition, getRatioByPoint, ImageGenerator } from '@plait/common';
+import { Alignment, buildText, DEFAULT_FONT_SIZE, getTextSize, AlignEditor, TextManage, getTextFromClipboard } from '@plait/text';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, NgZone } from '@angular/core';
 import { Subject } from 'rxjs';
+import { isKeyHotkey } from 'is-hotkey';
 import { Node } from 'slate';
 
 var BasicShapes;
@@ -1200,597 +1200,181 @@ const getShape = (value) => {
     return value.shape;
 };
 
-class GeometryShapeGenerator extends Generator {
-    canDraw(element, data) {
-        return true;
-    }
-    draw(element, data) {
-        const rectangle = getRectangleByPoints(element.points);
-        const shape = element.shape;
-        if (shape === BasicShapes.text) {
-            return;
-        }
-        const strokeWidth = getStrokeWidthByElement(element);
-        const strokeColor = getStrokeColorByElement(this.board, element);
-        const fill = getFillByElement(this.board, element);
-        const strokeLineDash = getLineDashByElement(element);
-        return drawGeometry(this.board, RectangleClient.inflate(rectangle, -strokeWidth), shape, {
-            stroke: strokeColor,
-            strokeWidth,
-            fill,
-            strokeLineDash
-        });
-    }
-}
+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 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.isLine(element): {
-            key = MemorizeKey.line;
-            break;
-        }
+const createGeometryElement = (shape, points, text, options = {}, textProperties = {}) => {
+    let textOptions = {};
+    let alignment = Alignment.center;
+    let textHeight = DefaultTextProperty.height;
+    if (shape === BasicShapes.text) {
+        textOptions = { autoSize: true };
+        alignment = undefined;
     }
-    return key;
+    textProperties = { ...textProperties };
+    textProperties?.align && (alignment = textProperties?.align);
+    textProperties?.textHeight && (textHeight = textProperties?.textHeight);
+    delete textProperties?.align;
+    delete textProperties?.textHeight;
+    return {
+        id: idCreator(),
+        type: 'geometry',
+        shape,
+        angle: 0,
+        opacity: 1,
+        textHeight,
+        text: buildText(text, alignment, textProperties),
+        points,
+        ...textOptions,
+        ...options
+    };
 };
-const getLineMemorizedLatest = () => {
-    const properties = getMemorizedLatest(MemorizeKey.line);
-    delete properties?.text;
-    return properties || {};
+const getPointsByCenterPoint = (point, width, height) => {
+    const leftTopPoint = [point[0] - width / 2, point[1] - height / 2];
+    const rightBottomPoint = [point[0] + width / 2, point[1] + height / 2];
+    return [leftTopPoint, rightBottomPoint];
 };
-const getMemorizedLatestByPointer = (pointer) => {
-    let memorizeKey = '';
-    if (PlaitDrawElement.isBasicShape({ shape: pointer })) {
-        memorizeKey = pointer === BasicShapes.text ? MemorizeKey.text : MemorizeKey.basicShape;
-    }
-    else {
-        memorizeKey = MemorizeKey.flowchart;
-    }
-    const properties = { ...getMemorizedLatest(memorizeKey) } || {};
-    const textProperties = properties.text || {};
-    delete properties.text;
-    return { textProperties, geometryProperties: properties };
+const getTextRectangle = (element) => {
+    const elementRectangle = 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 memorizeLatestText = (element, operations) => {
-    const memorizeKey = getMemorizeKey(element);
-    let textMemory = getMemorizedLatest(memorizeKey)?.text || {};
-    const setNodeOperation = operations.find(operation => operation.type === 'set_node');
-    if (setNodeOperation) {
-        const newProperties = setNodeOperation.newProperties;
-        textMemory = { ...textMemory, ...newProperties };
-        memorizeLatest(memorizeKey, 'text', textMemory);
-    }
+const drawBoundMask = (board, element) => {
+    const G = createG();
+    const rectangle = getRectangleByPoints(element.points);
+    const activeRectangle = RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH);
+    const shape = getShape(element);
+    const maskG = drawGeometry(board, activeRectangle, shape, {
+        stroke: SELECTION_BORDER_COLOR,
+        strokeWidth: 1,
+        fill: SELECTION_FILL_COLOR,
+        fillStyle: 'solid'
+    });
+    G.appendChild(maskG);
+    const connectorPoints = getEngine(shape).getConnectorPoints(activeRectangle);
+    connectorPoints.forEach(point => {
+        const circleG = drawCircle(PlaitBoard.getRoughSVG(board), point, 6, {
+            stroke: '#999999',
+            strokeWidth: 1,
+            fill: '#FFF',
+            fillStyle: 'solid'
+        });
+        G.appendChild(circleG);
+    });
+    return G;
 };
-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);
+const drawGeometry = (board, outerRectangle, shape, options) => {
+    return getEngine(shape).draw(board, outerRectangle, options);
+};
+const getNearestPoint = (element, point, inflateDelta = 0) => {
+    const rectangle = getRectangleByPoints(element.points);
+    const activeRectangle = RectangleClient.inflate(rectangle, inflateDelta);
+    const shape = getShape(element);
+    return getEngine(shape).getNearestPoint(activeRectangle, point);
+};
+const getCenterPointsOnPolygon = (points) => {
+    const centerPoint = [];
+    for (let i = 0; i < points.length; i++) {
+        let j = i == points.length - 1 ? 0 : i + 1;
+        centerPoint.push([(points[i][0] + points[j][0]) / 2, (points[i][1] + points[j][1]) / 2]);
     }
-    else {
-        if (shapes.length === SHAPE_MAX_LENGTH) {
-            shapes.pop();
+    return centerPoint;
+};
+const getEdgeOnPolygonByPoint = (corners, point) => {
+    for (let index = 1; index <= corners.length; index++) {
+        let start = corners[index - 1];
+        let end = index === corners.length ? corners[0] : corners[index];
+        const distance = distanceBetweenPointAndSegment(point[0], point[1], start[0], start[1], end[0], end[1]);
+        if (distance < 1) {
+            return [start, end];
         }
     }
-    shapes.unshift(shape);
-    memorizedShape.set(board, shapes);
-};
-const getMemorizedLatestShape = (board) => {
-    return memorizedShape.get(board);
-};
-
-const setStrokeColor = (board, strokeColor) => {
-    PropertyTransforms.setProperty(board, { strokeColor }, { getMemorizeKey });
+    return null;
 };
-const setStrokeWidth = (board, strokeWidth) => {
-    PropertyTransforms.setProperty(board, { strokeWidth }, { getMemorizeKey });
+const getDefaultFlowchartProperty = (symbol) => {
+    return DefaultFlowchartPropertyMap[symbol];
 };
-const setFillColor = (board, fill) => {
-    PropertyTransforms.setProperty(board, { fill }, { getMemorizeKey });
+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 = createLineElement(LineShape.elbow, [
+        [0, 0],
+        [0, 0]
+    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: startElement.id }, { marker: LineMarkerType.arrow, connection: [0.5, 0], boundId: processElement1.id }, [], lineOptions);
+    const line2 = createLineElement(LineShape.elbow, [
+        [0, 0],
+        [0, 0]
+    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: processElement1.id }, { marker: LineMarkerType.arrow, connection: [0.5, 0], boundId: decisionElement.id }, [], lineOptions);
+    const line3 = createLineElement(LineShape.elbow, [
+        [0, 0],
+        [0, 0]
+    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: decisionElement.id }, { marker: LineMarkerType.arrow, connection: [0.5, 0], boundId: endElement.id }, [
+        {
+            text: buildText('是'),
+            position: 0.5,
+            width: 14,
+            height: 20
+        }
+    ], lineOptions);
+    const line4 = createLineElement(LineShape.elbow, [
+        [0, 0],
+        [0, 0]
+    ], { marker: LineMarkerType.none, connection: [1, 0.5], boundId: decisionElement.id }, { marker: LineMarkerType.arrow, connection: [0, 0.5], boundId: processElement2.id }, [
+        {
+            text: buildText('否'),
+            position: 0.5,
+            width: 14,
+            height: 20
+        }
+    ], lineOptions);
+    const line5 = createLineElement(LineShape.elbow, [
+        [0, 0],
+        [0, 0]
+    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: processElement2.id }, { marker: LineMarkerType.arrow, connection: [1, 0.5], boundId: endElement.id }, [], lineOptions);
+    return [startElement, processElement1, decisionElement, processElement2, endElement, line1, line2, line3, line4, line5];
 };
-const setStrokeStyle = (board, strokeStyle) => {
-    PropertyTransforms.setProperty(board, { strokeStyle }, { getMemorizeKey });
+const getAutoCompletePoints = (element) => {
+    const AutoCompleteMargin = (12 + RESIZE_HANDLE_DIAMETER / 2) * 2;
+    let rectangle = getRectangleByPoints(element.points);
+    rectangle = RectangleClient.inflate(rectangle, AutoCompleteMargin);
+    return RectangleClient.getEdgeCenterPoints(rectangle);
 };
-
-const insertGeometry = (board, points, shape) => {
-    let newElement = createGeometryElement(shape, points, '', {
-        strokeWidth: DefaultBasicShapeProperty.strokeWidth
-    });
-    Transforms.insertNode(board, newElement, [board.children.length]);
-    clearSelectedElement(board);
-    addSelectedElement(board, newElement);
-};
-const insertText = (board, points, text = '文本') => {
-    let newElement = createGeometryElement(BasicShapes.text, points, text);
-    Transforms.insertNode(board, newElement, [board.children.length]);
-    clearSelectedElement(board);
-    addSelectedElement(board, newElement);
-};
-const resizeGeometry = (board, points, textHeight, path) => {
-    const normalizePoints = normalizeShapePoints(points);
-    const element = PlaitNode.get(board, path);
-    const newHeight = textHeight / board.viewport.zoom;
-    const newProperties = { points: normalizePoints, textHeight: newHeight };
-    if (PlaitDrawElement.isText(element) && element.autoSize) {
-        newProperties.autoSize = false;
-    }
-    Transforms.setNode(board, newProperties, path);
-};
-const transformShape = (board, element, shape) => {
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, { shape }, path);
-};
-
-const normalizePoints = (board, element, width, textHeight) => {
-    let points = element.points;
-    let autoSize = element.autoSize;
-    const defaultSpace = ShapeDefaultSpace.rectangleAndText;
-    if (autoSize) {
-        const editor = PlaitGeometry.getTextEditor(element);
-        if (AlignEditor.isActive(editor, Alignment.right)) {
-            points = [
-                [points[1][0] - (width + defaultSpace * 2), points[0][1]],
-                [points[1][0], points[0][1] + textHeight]
-            ];
-        }
-        else if (AlignEditor.isActive(editor, Alignment.center)) {
-            const oldWidth = Math.abs(points[0][0] - points[1][0]);
-            const offset = (width - oldWidth) / 2;
-            points = [
-                [points[0][0] - offset - defaultSpace, points[0][1]],
-                [points[1][0] + offset + defaultSpace, points[0][1] + textHeight]
-            ];
-        }
-        else {
-            points = [points[0], [points[0][0] + width + defaultSpace * 2, points[0][1] + textHeight]];
-        }
-    }
-    return { points };
-};
-const setText = (board, element, text, width, textHeight) => {
-    const newElement = {
-        text,
-        textHeight,
-        ...normalizePoints(board, element, width, textHeight)
-    };
-    const path = board.children.findIndex(child => child === element);
-    Transforms.setNode(board, newElement, [path]);
-};
-const setTextSize = (board, element, textWidth, textHeight) => {
-    if (element.autoSize) {
-        const newElement = {
-            textHeight,
-            ...normalizePoints(board, element, textWidth, textHeight)
-        };
-        const isPointsEqual = Point.isEquals(element.points[0], newElement.points[0]) && Point.isEquals(element.points[1], newElement.points[1]);
-        const isTextHeightEqual = Math.round(textHeight) === Math.round(element.textHeight);
-        if (!isPointsEqual || !isTextHeightEqual) {
-            const path = board.children.findIndex(child => child === element);
-            Transforms.setNode(board, newElement, [path]);
-        }
-    }
-};
-
-const insertImage = (board, imageItem, startPoint) => {
-    const { width, height, url } = imageItem;
-    const host = BOARD_TO_HOST.get(board);
-    const viewportWidth = PlaitBoard.getComponent(board).nativeElement.clientWidth;
-    const viewportHeight = PlaitBoard.getComponent(board).nativeElement.clientHeight;
-    const point = transformPoint(board, toPoint(viewportWidth / 2, viewportHeight / 2, host));
-    const points = startPoint
-        ? [startPoint, [startPoint[0] + width, startPoint[1] + height]]
-        : [
-            [point[0] - width / 2, point[1] - height / 2],
-            [point[0] + width / 2, point[1] + height / 2]
-        ];
-    const imageElement = {
-        id: idCreator(),
-        type: 'image',
-        points,
-        url
-    };
-    Transforms.insertNode(board, imageElement, [board.children.length]);
-    Transforms.addSelectionWithTemporaryElements(board, [imageElement]);
-};
-
-const resizeLine = (board, options, path) => {
-    Transforms.setNode(board, options, path);
-};
-const setLineTexts = (board, element, texts) => {
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, { texts }, path);
-};
-const removeLineText = (board, element, index) => {
-    const path = PlaitBoard.findPath(board, element);
-    const texts = element.texts?.length ? [...element.texts] : [];
-    const newTexts = [...texts];
-    newTexts.splice(index, 1);
-    Transforms.setNode(board, { texts: newTexts }, path);
-};
-const setLineMark = (board, element, handleKey, marker) => {
-    const path = PlaitBoard.findPath(board, element);
-    let handle = handleKey === LineHandleKey.source ? element.source : element.target;
-    handle = { ...handle, marker };
-    memorizeLatest(MemorizeKey.line, handleKey, marker);
-    Transforms.setNode(board, { [handleKey]: handle }, path);
-};
-
-const DrawTransforms = {
-    setText,
-    insertGeometry,
-    resizeGeometry,
-    insertText,
-    setTextSize,
-    resizeLine,
-    setLineTexts,
-    removeLineText,
-    setLineMark,
-    insertImage,
-    transformShape,
-    setStrokeColor,
-    setStrokeWidth,
-    setFillColor,
-    setStrokeStyle
-};
-
-const withGeometryCreateByDrag = (board) => {
-    const { pointerMove, pointerUp } = board;
-    let geometryShapeG = null;
-    board.pointerMove = (event) => {
-        geometryShapeG?.remove();
-        geometryShapeG = createG();
-        const geometryGenerator = new GeometryShapeGenerator(board);
-        const geometryPointers = getGeometryPointers();
-        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
-        const dragMode = isGeometryPointer && isDndMode(board);
-        const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        const pointer = PlaitBoard.getPointer(board);
-        if (dragMode) {
-            const points = getDefaultGeometryPoints(pointer, movingPoint);
-            if (pointer === BasicShapes.text) {
-                const textG = getTemporaryTextG(movingPoint);
-                geometryShapeG.appendChild(textG);
-                PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
-            }
-            else {
-                const temporaryElement = createGeometryElement(pointer, points, '', {
-                    strokeWidth: DefaultBasicShapeProperty.strokeWidth
-                });
-                geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
-                PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
-            }
-        }
-        pointerMove(event);
-    };
-    board.pointerUp = (event) => {
-        const pointer = PlaitBoard.getPointer(board);
-        const geometryPointers = getGeometryPointers();
-        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
-        const dragMode = isGeometryPointer && isDndMode(board);
-        if (dragMode) {
-            const targetPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-            const points = getDefaultGeometryPoints(pointer, targetPoint);
-            if (pointer === BasicShapes.text) {
-                DrawTransforms.insertText(board, points);
-            }
-            else {
-                DrawTransforms.insertGeometry(board, points, pointer);
-            }
-            BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
-        }
-        geometryShapeG?.remove();
-        geometryShapeG = null;
-        preventTouchMove(board, event, false);
-        pointerUp(event);
-    };
-    return board;
-};
-const withGeometryCreateByDrawing = (board) => {
-    const { pointerDown, pointerMove, pointerUp, keydown, keyup } = board;
-    let start = null;
-    let geometryShapeG = null;
-    let temporaryElement = null;
-    let isShift = false;
-    board.keydown = (event) => {
-        isShift = isKeyHotkey('shift', event);
-        keydown(event);
-    };
-    board.keyup = (event) => {
-        isShift = false;
-        keyup(event);
-    };
-    board.pointerDown = (event) => {
-        const geometryPointers = getGeometryPointers();
-        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
-        if (!PlaitBoard.isReadonly(board) && isGeometryPointer && isDrawingMode(board)) {
-            const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-            start = point;
-            const pointer = PlaitBoard.getPointer(board);
-            preventTouchMove(board, event, true);
-            if (pointer === BasicShapes.text) {
-                const memorizedLatest = getMemorizedLatestByPointer(pointer);
-                const points = getDefaultGeometryPoints(pointer, point);
-                const textElement = createGeometryElement(BasicShapes.text, points, DefaultTextProperty.text, memorizedLatest.geometryProperties, memorizedLatest.textProperties);
-                Transforms.insertNode(board, textElement, [board.children.length]);
-                clearSelectedElement(board);
-                addSelectedElement(board, textElement);
-                BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
-                start = null;
-            }
-        }
-        pointerDown(event);
-    };
-    board.pointerMove = (event) => {
-        geometryShapeG?.remove();
-        geometryShapeG = createG();
-        const geometryGenerator = new GeometryShapeGenerator(board);
-        const drawMode = !!start;
-        const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        const pointer = PlaitBoard.getPointer(board);
-        if (drawMode && pointer !== BasicShapes.text) {
-            const points = normalizeShapePoints([start, movingPoint], isShift);
-            const memorizedLatest = getMemorizedLatestByPointer(pointer);
-            temporaryElement = createGeometryElement(pointer, points, '', {
-                strokeWidth: DefaultBasicShapeProperty.strokeWidth,
-                ...memorizedLatest.geometryProperties
-            }, memorizedLatest.textProperties);
-            geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
-            PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
-        }
-        pointerMove(event);
-    };
-    board.pointerUp = (event) => {
-        const isDrawMode = !!start;
-        if (isDrawMode) {
-            const targetPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-            const { width, height } = RectangleClient.toRectangleClient([start, targetPoint]);
-            if (Math.hypot(width, height) === 0) {
-                const pointer = PlaitBoard.getPointer(board);
-                const points = getDefaultGeometryPoints(pointer, targetPoint);
-                if (pointer !== BasicShapes.text) {
-                    const memorizedLatest = getMemorizedLatestByPointer(pointer);
-                    temporaryElement = createGeometryElement(pointer, points, '', {
-                        strokeWidth: DefaultBasicShapeProperty.strokeWidth,
-                        ...memorizedLatest.geometryProperties
-                    }, memorizedLatest.textProperties);
-                }
-            }
-        }
-        if (temporaryElement) {
-            memorizeLatestShape(board, temporaryElement.shape);
-            Transforms.insertNode(board, temporaryElement, [board.children.length]);
-            clearSelectedElement(board);
-            addSelectedElement(board, temporaryElement);
-            BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
-        }
-        geometryShapeG?.remove();
-        geometryShapeG = null;
-        start = null;
-        temporaryElement = null;
-        preventTouchMove(board, event, false);
-        pointerUp(event);
-    };
-    return board;
-};
-const getDefaultGeometryPoints = (pointer, targetPoint) => {
-    const defaultProperty = getGeometryDefaultProperty(pointer);
-    return getPointsByCenterPoint(targetPoint, defaultProperty.width, defaultProperty.height);
-};
-const getGeometryDefaultProperty = (pointer) => {
-    const isText = pointer === BasicShapes.text;
-    const isFlowChart = getFlowchartPointers().includes(pointer);
-    if (isText) {
-        return DefaultTextProperty;
-    }
-    else if (isFlowChart) {
-        return getDefaultFlowchartProperty(pointer);
-    }
-    else {
-        return DefaultBasicShapeProperty;
-    }
-};
-const getTemporaryTextG = (movingPoint) => {
-    const textG = createG();
-    const width = DefaultTextProperty.width - ShapeDefaultSpace.rectangleAndText * 2;
-    const foreignObject = createForeignObject(movingPoint[0] - width / 2, movingPoint[1] - DefaultTextProperty.height / 2, width, DefaultTextProperty.height);
-    const richtext = document.createElement('div');
-    richtext.textContent = DefaultTextProperty.text;
-    richtext.style.fontSize = `${DEFAULT_FONT_SIZE}px`;
-    richtext.style.cursor = 'default';
-    foreignObject.appendChild(richtext);
-    textG.appendChild(foreignObject);
-    return textG;
-};
-
-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 createGeometryElement = (shape, points, text, options = {}, textProperties = {}) => {
-    let textOptions = {};
-    let alignment = Alignment.center;
-    if (shape === BasicShapes.text) {
-        textOptions = { autoSize: true };
-        alignment = undefined;
-    }
-    textProperties = { ...textProperties };
-    textProperties?.align && (alignment = textProperties?.align);
-    delete textProperties?.align;
-    return {
-        id: idCreator(),
-        type: 'geometry',
-        shape,
-        angle: 0,
-        opacity: 1,
-        textHeight: DefaultTextProperty.height,
-        text: buildText(text, alignment, textProperties),
-        points,
-        ...textOptions,
-        ...options
-    };
-};
-const getPointsByCenterPoint = (point, width, height) => {
-    const leftTopPoint = [point[0] - width / 2, point[1] - height / 2];
-    const rightBottomPoint = [point[0] + width / 2, point[1] + height / 2];
-    return [leftTopPoint, rightBottomPoint];
-};
-const getTextRectangle = (element) => {
-    const elementRectangle = 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 drawBoundMask = (board, element) => {
-    const G = createG();
-    const rectangle = getRectangleByPoints(element.points);
-    const activeRectangle = RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH);
-    const shape = getShape(element);
-    const maskG = drawGeometry(board, activeRectangle, shape, {
-        stroke: SELECTION_BORDER_COLOR,
-        strokeWidth: 1,
-        fill: SELECTION_FILL_COLOR,
-        fillStyle: 'solid'
-    });
-    G.appendChild(maskG);
-    const connectorPoints = getEngine(shape).getConnectorPoints(activeRectangle);
-    connectorPoints.forEach(point => {
-        const circleG = drawCircle(PlaitBoard.getRoughSVG(board), point, 6, {
-            stroke: '#999999',
-            strokeWidth: 1,
-            fill: '#FFF',
-            fillStyle: 'solid'
-        });
-        G.appendChild(circleG);
-    });
-    return G;
-};
-const drawGeometry = (board, outerRectangle, shape, options) => {
-    return getEngine(shape).draw(board, outerRectangle, options);
-};
-const getNearestPoint = (element, point, inflateDelta = 0) => {
-    const rectangle = getRectangleByPoints(element.points);
-    const activeRectangle = RectangleClient.inflate(rectangle, inflateDelta);
-    const shape = getShape(element);
-    return getEngine(shape).getNearestPoint(activeRectangle, point);
-};
-const getCenterPointsOnPolygon = (points) => {
-    const centerPoint = [];
-    for (let i = 0; i < points.length; i++) {
-        let j = i == points.length - 1 ? 0 : i + 1;
-        centerPoint.push([(points[i][0] + points[j][0]) / 2, (points[i][1] + points[j][1]) / 2]);
-    }
-    return centerPoint;
-};
-const getEdgeOnPolygonByPoint = (corners, point) => {
-    for (let index = 1; index <= corners.length; index++) {
-        let start = corners[index - 1];
-        let end = index === corners.length ? corners[0] : corners[index];
-        const distance = distanceBetweenPointAndSegment(point[0], point[1], start[0], start[1], end[0], end[1]);
-        if (distance < 1) {
-            return [start, end];
-        }
-    }
-    return null;
-};
-const getDefaultFlowchartProperty = (symbol) => {
-    return DefaultFlowchartPropertyMap[symbol];
-};
-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 = createLineElement(LineShape.elbow, [
-        [0, 0],
-        [0, 0]
-    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: startElement.id }, { marker: LineMarkerType.arrow, connection: [0.5, 0], boundId: processElement1.id }, [], lineOptions);
-    const line2 = createLineElement(LineShape.elbow, [
-        [0, 0],
-        [0, 0]
-    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: processElement1.id }, { marker: LineMarkerType.arrow, connection: [0.5, 0], boundId: decisionElement.id }, [], lineOptions);
-    const line3 = createLineElement(LineShape.elbow, [
-        [0, 0],
-        [0, 0]
-    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: decisionElement.id }, { marker: LineMarkerType.arrow, connection: [0.5, 0], boundId: endElement.id }, [
-        {
-            text: buildText('是'),
-            position: 0.5,
-            width: 14,
-            height: 20
-        }
-    ], lineOptions);
-    const line4 = createLineElement(LineShape.elbow, [
-        [0, 0],
-        [0, 0]
-    ], { marker: LineMarkerType.none, connection: [1, 0.5], boundId: decisionElement.id }, { marker: LineMarkerType.arrow, connection: [0, 0.5], boundId: processElement2.id }, [
-        {
-            text: buildText('否'),
-            position: 0.5,
-            width: 14,
-            height: 20
-        }
-    ], lineOptions);
-    const line5 = createLineElement(LineShape.elbow, [
-        [0, 0],
-        [0, 0]
-    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: processElement2.id }, { marker: LineMarkerType.arrow, connection: [1, 0.5], boundId: endElement.id }, [], lineOptions);
-    return [startElement, processElement1, decisionElement, processElement2, endElement, line1, line2, line3, line4, line5];
-};
-const getAutoCompletePoints = (element) => {
-    const AutoCompleteMargin = (12 + RESIZE_HANDLE_DIAMETER / 2) * 2;
-    let rectangle = getRectangleByPoints(element.points);
-    rectangle = RectangleClient.inflate(rectangle, AutoCompleteMargin);
-    return RectangleClient.getEdgeCenterPoints(rectangle);
-};
-const getHitIndexOfAutoCompletePoint = (movingPoint, points) => {
-    return points.findIndex(point => {
-        const movingRectangle = RectangleClient.toRectangleClient([movingPoint]);
-        let rectangle = RectangleClient.toRectangleClient([point]);
-        rectangle = RectangleClient.inflate(rectangle, RESIZE_HANDLE_DIAMETER);
-        return RectangleClient.isHit(movingRectangle, rectangle);
+const getHitIndexOfAutoCompletePoint = (movingPoint, points) => {
+    return points.findIndex(point => {
+        const movingRectangle = RectangleClient.toRectangleClient([movingPoint]);
+        let rectangle = RectangleClient.toRectangleClient([point]);
+        rectangle = RectangleClient.inflate(rectangle, RESIZE_HANDLE_DIAMETER);
+        return RectangleClient.isHit(movingRectangle, rectangle);
     });
 };
 const getDrawDefaultStrokeColor = (theme) => {
@@ -1799,6 +1383,32 @@ const getDrawDefaultStrokeColor = (theme) => {
 const getFlowchartDefaultFill = (theme) => {
     return DrawThemeColors[theme].fill;
 };
+const getDefaultTextShapeProperty = (board, fontSize) => {
+    fontSize = fontSize ? Number(fontSize) : DEFAULT_FONT_SIZE;
+    const textSize = getTextSize(board, '文本', 10, { fontSize });
+    return {
+        width: textSize.width + ShapeDefaultSpace.rectangleAndText * 2,
+        height: textSize.height,
+        text: '文本'
+    };
+};
+const getDefaultGeometryPoints = (pointer, centerPoint) => {
+    const defaultProperty = getDefaultGeometryProperty(pointer);
+    return getPointsByCenterPoint(centerPoint, defaultProperty.width, defaultProperty.height);
+};
+const getDefaultGeometryProperty = (pointer) => {
+    const isFlowChart = getFlowchartPointers().includes(pointer);
+    if (isFlowChart) {
+        return getDefaultFlowchartProperty(pointer);
+    }
+    else {
+        return DefaultBasicShapeProperty;
+    }
+};
+const getDefaultTextPoints = (board, centerPoint, fontSize) => {
+    const property = getDefaultTextShapeProperty(board, fontSize);
+    return getPointsByCenterPoint(centerPoint, property.width, property.height);
+};
 
 const ARROW_LENGTH = 20;
 const drawLineArrow = (element, points, options) => {
@@ -1954,6 +1564,79 @@ const getHitOutlineGeometry = (board, point, offset = 0) => {
     return geometry;
 };
 
+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.isLine(element): {
+            key = MemorizeKey.line;
+            break;
+        }
+    }
+    return key;
+};
+const getLineMemorizedLatest = () => {
+    const properties = getMemorizedLatest(MemorizeKey.line);
+    delete properties?.text;
+    return { ...properties } || {};
+};
+const getMemorizedLatestByPointer = (pointer) => {
+    let memorizeKey = '';
+    if (PlaitDrawElement.isBasicShape({ shape: pointer })) {
+        memorizeKey = pointer === BasicShapes.text ? MemorizeKey.text : MemorizeKey.basicShape;
+    }
+    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 newProperties = setNodeOperation.newProperties;
+        textMemory = { ...textMemory, ...newProperties };
+        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);
+};
+
 const createLineElement = (shape, points, source, target, texts, options) => {
     return {
         id: idCreator(),
@@ -2436,74 +2119,234 @@ const PlaitLine = {
         else {
             return line.target.marker === markType;
         }
-    },
-    isSourceMark(line, markType) {
-        return PlaitLine.isSourceMarkOrTargetMark(line, markType, LineHandleKey.source);
-    },
-    isTargetMark(line, markType) {
-        return PlaitLine.isSourceMarkOrTargetMark(line, markType, LineHandleKey.target);
-    },
-    isBoundElementOfSource(line, element) {
-        return line.source.boundId === element.id;
-    },
-    isBoundElementOfTarget(line, element) {
-        return line.target.boundId === element.id;
-    },
-    getPoints(board, line) {
-        let sourcePoint = line.source.boundId
-            ? getConnectionPoint(getElementById(board, line.source.boundId), line.source.connection)
-            : line.points[0];
-        let targetPoint = line.target.boundId
-            ? getConnectionPoint(getElementById(board, line.target.boundId), line.target.connection)
-            : line.points[line.points.length - 1];
-        const restPoints = line.points.length > 2 ? line.points.slice(1, line.points.length - 1) : [];
-        return [sourcePoint, ...restPoints, targetPoint];
+    },
+    isSourceMark(line, markType) {
+        return PlaitLine.isSourceMarkOrTargetMark(line, markType, LineHandleKey.source);
+    },
+    isTargetMark(line, markType) {
+        return PlaitLine.isSourceMarkOrTargetMark(line, markType, LineHandleKey.target);
+    },
+    isBoundElementOfSource(line, element) {
+        return line.source.boundId === element.id;
+    },
+    isBoundElementOfTarget(line, element) {
+        return line.target.boundId === element.id;
+    },
+    getPoints(board, line) {
+        let sourcePoint = line.source.boundId
+            ? getConnectionPoint(getElementById(board, line.source.boundId), line.source.connection)
+            : line.points[0];
+        let targetPoint = line.target.boundId
+            ? getConnectionPoint(getElementById(board, line.target.boundId), line.target.connection)
+            : line.points[line.points.length - 1];
+        const restPoints = line.points.length > 2 ? line.points.slice(1, line.points.length - 1) : [];
+        return [sourcePoint, ...restPoints, targetPoint];
+    }
+};
+
+var StrokeStyle;
+(function (StrokeStyle) {
+    StrokeStyle["solid"] = "solid";
+    StrokeStyle["dashed"] = "dashed";
+})(StrokeStyle || (StrokeStyle = {}));
+var MemorizeKey;
+(function (MemorizeKey) {
+    MemorizeKey["basicShape"] = "basicShape";
+    MemorizeKey["flowchart"] = "flowchart";
+    MemorizeKey["text"] = "text";
+    MemorizeKey["line"] = "line";
+})(MemorizeKey || (MemorizeKey = {}));
+
+const PlaitDrawElement = {
+    isGeometry: (value) => {
+        return value.type === 'geometry';
+    },
+    isLine: (value) => {
+        return value.type === 'line';
+    },
+    isText: (value) => {
+        return value.type === 'geometry' && value.shape === BasicShapes.text;
+    },
+    isImage: (value) => {
+        return value.type === 'image';
+    },
+    isDrawElement: (value) => {
+        if (PlaitDrawElement.isGeometry(value) || PlaitDrawElement.isLine(value) || PlaitDrawElement.isImage(value)) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    },
+    isShape: (value) => {
+        return PlaitDrawElement.isImage(value) || PlaitDrawElement.isGeometry(value);
+    },
+    isBasicShape: (value) => {
+        return Object.keys(BasicShapes).includes(value.shape);
+    },
+    isFlowchart: (value) => {
+        return Object.keys(FlowchartSymbols).includes(value.shape);
+    }
+};
+
+class GeometryShapeGenerator extends Generator {
+    canDraw(element, data) {
+        return true;
+    }
+    draw(element, data) {
+        const rectangle = getRectangleByPoints(element.points);
+        const shape = element.shape;
+        if (shape === BasicShapes.text) {
+            return;
+        }
+        const strokeWidth = getStrokeWidthByElement(element);
+        const strokeColor = getStrokeColorByElement(this.board, element);
+        const fill = getFillByElement(this.board, element);
+        const strokeLineDash = getLineDashByElement(element);
+        return drawGeometry(this.board, RectangleClient.inflate(rectangle, -strokeWidth), shape, {
+            stroke: strokeColor,
+            strokeWidth,
+            fill,
+            strokeLineDash
+        });
+    }
+}
+
+const insertGeometry = (board, points, shape) => {
+    let newElement = createGeometryElement(shape, points, '', {
+        strokeWidth: DefaultBasicShapeProperty.strokeWidth
+    });
+    Transforms.insertNode(board, newElement, [board.children.length]);
+    clearSelectedElement(board);
+    addSelectedElement(board, newElement);
+};
+const insertText = (board, points, text = '文本') => {
+    let newElement = createGeometryElement(BasicShapes.text, points, text);
+    Transforms.insertNode(board, newElement, [board.children.length]);
+    clearSelectedElement(board);
+    addSelectedElement(board, newElement);
+};
+const resizeGeometry = (board, points, textHeight, path) => {
+    const normalizePoints = normalizeShapePoints(points);
+    const element = PlaitNode.get(board, path);
+    const newHeight = textHeight / board.viewport.zoom;
+    const newProperties = { points: normalizePoints, textHeight: newHeight };
+    if (PlaitDrawElement.isText(element) && element.autoSize) {
+        newProperties.autoSize = false;
+    }
+    Transforms.setNode(board, newProperties, path);
+};
+const transformShape = (board, element, shape) => {
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, { shape }, path);
+};
+
+const normalizePoints = (board, element, width, textHeight) => {
+    let points = element.points;
+    let autoSize = element.autoSize;
+    const defaultSpace = ShapeDefaultSpace.rectangleAndText;
+    if (autoSize) {
+        const editor = PlaitGeometry.getTextEditor(element);
+        if (AlignEditor.isActive(editor, Alignment.right)) {
+            points = [
+                [points[1][0] - (width + defaultSpace * 2), points[0][1]],
+                [points[1][0], points[0][1] + textHeight]
+            ];
+        }
+        else if (AlignEditor.isActive(editor, Alignment.center)) {
+            const oldWidth = Math.abs(points[0][0] - points[1][0]);
+            const offset = (width - oldWidth) / 2;
+            points = [
+                [points[0][0] - offset - defaultSpace, points[0][1]],
+                [points[1][0] + offset + defaultSpace, points[0][1] + textHeight]
+            ];
+        }
+        else {
+            points = [points[0], [points[0][0] + width + defaultSpace * 2, points[0][1] + textHeight]];
+        }
+    }
+    return { points };
+};
+const setText = (board, element, text, width, textHeight) => {
+    const newElement = {
+        text,
+        textHeight,
+        ...normalizePoints(board, element, width, textHeight)
+    };
+    const path = board.children.findIndex(child => child === element);
+    Transforms.setNode(board, newElement, [path]);
+};
+const setTextSize = (board, element, textWidth, textHeight) => {
+    if (element.autoSize) {
+        const newElement = {
+            textHeight,
+            ...normalizePoints(board, element, textWidth, textHeight)
+        };
+        const isPointsEqual = Point.isEquals(element.points[0], newElement.points[0]) && Point.isEquals(element.points[1], newElement.points[1]);
+        const isTextHeightEqual = Math.round(textHeight) === Math.round(element.textHeight);
+        if (!isPointsEqual || !isTextHeightEqual) {
+            const path = board.children.findIndex(child => child === element);
+            Transforms.setNode(board, newElement, [path]);
+        }
     }
 };
 
-var StrokeStyle;
-(function (StrokeStyle) {
-    StrokeStyle["solid"] = "solid";
-    StrokeStyle["dashed"] = "dashed";
-})(StrokeStyle || (StrokeStyle = {}));
-var MemorizeKey;
-(function (MemorizeKey) {
-    MemorizeKey["basicShape"] = "basicShape";
-    MemorizeKey["flowchart"] = "flowchart";
-    MemorizeKey["text"] = "text";
-    MemorizeKey["line"] = "line";
-})(MemorizeKey || (MemorizeKey = {}));
+const insertImage = (board, imageItem, startPoint) => {
+    const { width, height, url } = imageItem;
+    const host = BOARD_TO_HOST.get(board);
+    const viewportWidth = PlaitBoard.getComponent(board).nativeElement.clientWidth;
+    const viewportHeight = PlaitBoard.getComponent(board).nativeElement.clientHeight;
+    const point = transformPoint(board, toPoint(viewportWidth / 2, viewportHeight / 2, host));
+    const points = startPoint
+        ? [startPoint, [startPoint[0] + width, startPoint[1] + height]]
+        : [
+            [point[0] - width / 2, point[1] - height / 2],
+            [point[0] + width / 2, point[1] + height / 2]
+        ];
+    const imageElement = {
+        id: idCreator(),
+        type: 'image',
+        points,
+        url
+    };
+    Transforms.insertNode(board, imageElement, [board.children.length]);
+    Transforms.addSelectionWithTemporaryElements(board, [imageElement]);
+};
 
-const PlaitDrawElement = {
-    isGeometry: (value) => {
-        return value.type === 'geometry';
-    },
-    isLine: (value) => {
-        return value.type === 'line';
-    },
-    isText: (value) => {
-        return value.type === 'geometry' && value.shape === BasicShapes.text;
-    },
-    isImage: (value) => {
-        return value.type === 'image';
-    },
-    isDrawElement: (value) => {
-        if (PlaitDrawElement.isGeometry(value) || PlaitDrawElement.isLine(value) || PlaitDrawElement.isImage(value)) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    },
-    isShape: (value) => {
-        return PlaitDrawElement.isImage(value) || PlaitDrawElement.isGeometry(value);
-    },
-    isBasicShape: (value) => {
-        return Object.keys(BasicShapes).includes(value.shape);
-    },
-    isFlowchart: (value) => {
-        return Object.keys(FlowchartSymbols).includes(value.shape);
-    }
+const resizeLine = (board, options, path) => {
+    Transforms.setNode(board, options, path);
+};
+const setLineTexts = (board, element, texts) => {
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, { texts }, path);
+};
+const removeLineText = (board, element, index) => {
+    const path = PlaitBoard.findPath(board, element);
+    const texts = element.texts?.length ? [...element.texts] : [];
+    const newTexts = [...texts];
+    newTexts.splice(index, 1);
+    Transforms.setNode(board, { texts: newTexts }, path);
+};
+const setLineMark = (board, element, handleKey, marker) => {
+    const path = PlaitBoard.findPath(board, element);
+    let handle = handleKey === LineHandleKey.source ? element.source : element.target;
+    handle = { ...handle, marker };
+    memorizeLatest(MemorizeKey.line, handleKey, marker);
+    Transforms.setNode(board, { [handleKey]: handle }, path);
+};
+
+const DrawTransforms = {
+    setText,
+    insertGeometry,
+    resizeGeometry,
+    insertText,
+    setTextSize,
+    resizeLine,
+    setLineTexts,
+    removeLineText,
+    setLineMark,
+    insertImage,
+    transformShape
 };
 
 class LineAutoCompleteGenerator extends Generator {
@@ -2636,7 +2479,7 @@ class GeometryComponent extends CommonPluginElement {
         this.textManage.updateRectangle();
     }
     initializeTextManage() {
-        const plugins = this.board.getPluginOptions(WithTextPluginKey).textPlugins;
+        const plugins = (this.board.getPluginOptions(WithTextPluginKey) || {}).textPlugins;
         const manage = new TextManage(this.board, this.viewContainerRef, {
             getRectangle: () => {
                 const getRectangle = getEngine(this.element.shape).getTextRectangle;
@@ -2674,7 +2517,7 @@ class GeometryComponent extends CommonPluginElement {
         this.destroy$.next();
         this.destroy$.complete();
         this.activeGenerator.destroy();
-        this.lineAutoCompleteGenerator;
+        this.lineAutoCompleteGenerator.destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GeometryComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GeometryComponent, isStandalone: true, selector: "plait-draw-geometry", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -2949,6 +2792,173 @@ const withDrawHotkey = (board) => {
     return board;
 };
 
+const withGeometryCreateByDrag = (board) => {
+    const { pointerMove, pointerUp } = board;
+    let geometryShapeG = null;
+    let temporaryElement = null;
+    let fakeCreateTextRef = null;
+    board.pointerMove = (event) => {
+        geometryShapeG?.remove();
+        geometryShapeG = createG();
+        const geometryGenerator = new GeometryShapeGenerator(board);
+        const geometryPointers = getGeometryPointers();
+        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
+        const dragMode = isGeometryPointer && isDndMode(board);
+        const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const pointer = PlaitBoard.getPointer(board);
+        if (dragMode) {
+            const memorizedLatest = getMemorizedLatestByPointer(pointer);
+            if (pointer === BasicShapes.text) {
+                const property = getDefaultTextShapeProperty(board, memorizedLatest.textProperties['font-size']);
+                const points = getPointsByCenterPoint(movingPoint, property.width, property.height);
+                temporaryElement = createGeometryElement(BasicShapes.text, points, DefaultTextProperty.text, memorizedLatest.geometryProperties, { ...memorizedLatest.textProperties, textHeight: property.height });
+                if (!fakeCreateTextRef) {
+                    const textManage = new TextManage(board, PlaitBoard.getComponent(board).viewContainerRef, {
+                        getRectangle: () => {
+                            return getTextRectangle(temporaryElement);
+                        }
+                    });
+                    PlaitBoard.getComponent(board)
+                        .viewContainerRef.injector.get(NgZone)
+                        .run(() => {
+                        textManage.draw(temporaryElement.text);
+                    });
+                    fakeCreateTextRef = {
+                        g: createG(),
+                        textManage
+                    };
+                    PlaitBoard.getHost(board).append(fakeCreateTextRef.g);
+                    fakeCreateTextRef.g.append(textManage.g);
+                }
+                else {
+                    fakeCreateTextRef.textManage.updateRectangle();
+                    fakeCreateTextRef.g.append(fakeCreateTextRef.textManage.g);
+                }
+            }
+            else {
+                const points = getDefaultGeometryPoints(pointer, movingPoint);
+                const textHeight = getDefaultTextShapeProperty(board, memorizedLatest.textProperties['font-size']).height;
+                temporaryElement = createGeometryElement(pointer, points, '', {
+                    strokeWidth: DefaultBasicShapeProperty.strokeWidth,
+                    ...memorizedLatest.geometryProperties
+                }, { ...memorizedLatest.textProperties, textHeight });
+                geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
+                PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
+            }
+        }
+        pointerMove(event);
+    };
+    board.pointerUp = (event) => {
+        const geometryPointers = getGeometryPointers();
+        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
+        const dragMode = isGeometryPointer && isDndMode(board);
+        if (dragMode && temporaryElement) {
+            insertElement(board, temporaryElement);
+            fakeCreateTextRef?.textManage.destroy();
+            fakeCreateTextRef?.g.remove();
+            fakeCreateTextRef = null;
+        }
+        geometryShapeG?.remove();
+        geometryShapeG = null;
+        preventTouchMove(board, event, false);
+        pointerUp(event);
+    };
+    return board;
+};
+const withGeometryCreateByDrawing = (board) => {
+    const { pointerDown, pointerMove, pointerUp, keydown, keyup } = board;
+    let start = null;
+    let geometryShapeG = null;
+    let temporaryElement = null;
+    let isShift = false;
+    board.keydown = (event) => {
+        isShift = isKeyHotkey('shift', event);
+        keydown(event);
+    };
+    board.keyup = (event) => {
+        isShift = false;
+        keyup(event);
+    };
+    board.pointerDown = (event) => {
+        const geometryPointers = getGeometryPointers();
+        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
+        if (!PlaitBoard.isReadonly(board) && isGeometryPointer && isDrawingMode(board)) {
+            const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            start = point;
+            const pointer = PlaitBoard.getPointer(board);
+            preventTouchMove(board, event, true);
+            if (pointer === BasicShapes.text) {
+                const memorizedLatest = getMemorizedLatestByPointer(pointer);
+                const property = getDefaultTextShapeProperty(board, memorizedLatest.textProperties['font-size']);
+                const points = getPointsByCenterPoint(point, property.width, property.height);
+                const textElement = createGeometryElement(BasicShapes.text, points, DefaultTextProperty.text, memorizedLatest.geometryProperties, { ...memorizedLatest.textProperties, textHeight: property.height });
+                Transforms.insertNode(board, textElement, [board.children.length]);
+                clearSelectedElement(board);
+                addSelectedElement(board, textElement);
+                BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
+                start = null;
+            }
+        }
+        pointerDown(event);
+    };
+    board.pointerMove = (event) => {
+        geometryShapeG?.remove();
+        geometryShapeG = createG();
+        const geometryGenerator = new GeometryShapeGenerator(board);
+        const drawMode = !!start;
+        const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const pointer = PlaitBoard.getPointer(board);
+        if (drawMode && pointer !== BasicShapes.text) {
+            const points = normalizeShapePoints([start, movingPoint], isShift);
+            const memorizedLatest = getMemorizedLatestByPointer(pointer);
+            const textHeight = getDefaultTextShapeProperty(board, memorizedLatest.textProperties['font-size']).height;
+            temporaryElement = createGeometryElement(pointer, points, '', {
+                strokeWidth: DefaultBasicShapeProperty.strokeWidth,
+                ...memorizedLatest.geometryProperties
+            }, { ...memorizedLatest.textProperties, textHeight });
+            geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
+            PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
+        }
+        pointerMove(event);
+    };
+    board.pointerUp = (event) => {
+        const isDrawMode = !!start;
+        if (isDrawMode) {
+            const targetPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            const { width, height } = RectangleClient.toRectangleClient([start, targetPoint]);
+            if (Math.hypot(width, height) === 0) {
+                const pointer = PlaitBoard.getPointer(board);
+                if (pointer !== BasicShapes.text) {
+                    const points = getDefaultGeometryPoints(pointer, targetPoint);
+                    const memorizedLatest = getMemorizedLatestByPointer(pointer);
+                    const textHeight = getDefaultTextShapeProperty(board, memorizedLatest.textProperties['font-size']).height;
+                    temporaryElement = createGeometryElement(pointer, points, '', {
+                        strokeWidth: DefaultBasicShapeProperty.strokeWidth,
+                        ...memorizedLatest.geometryProperties
+                    }, { ...memorizedLatest.textProperties, textHeight });
+                }
+            }
+        }
+        if (temporaryElement) {
+            insertElement(board, temporaryElement);
+        }
+        geometryShapeG?.remove();
+        geometryShapeG = null;
+        start = null;
+        temporaryElement = null;
+        preventTouchMove(board, event, false);
+        pointerUp(event);
+    };
+    return board;
+};
+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 buildClipboardData = (board, elements, startPoint) => {
     return elements.map(element => {
         if (PlaitDrawElement.isGeometry(element) || PlaitDrawElement.isImage(element)) {
@@ -3455,22 +3465,32 @@ class ImageComponent extends CommonPluginElement {
                 };
             }
         });
+        this.lineAutoCompleteGenerator = new LineAutoCompleteGenerator(this.board);
     }
     ngOnInit() {
         super.ngOnInit();
         this.initializeGenerator();
         this.imageGenerator.processDrawing(this.element, this.g, this.viewContainerRef);
+        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            selected: this.selected
+        });
     }
     onContextChanged(value, previous) {
         if (value.element !== previous.element) {
             this.imageGenerator.updateImage(this.g, previous.element, value.element);
             this.imageGenerator.componentRef.instance.isFocus = this.selected;
+            this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+                selected: this.selected
+            });
         }
         else {
             const hasSameSelected = value.selected === previous.selected;
             const hasSameHandleState = this.activeGenerator.options.hasResizeHandle() === this.activeGenerator.hasResizeHandle;
             if (!hasSameSelected || !hasSameHandleState) {
                 this.imageGenerator.componentRef.instance.isFocus = this.selected;
+                this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+                    selected: this.selected
+                });
             }
         }
     }
@@ -3479,6 +3499,7 @@ class ImageComponent extends CommonPluginElement {
         this.destroy$.next();
         this.destroy$.complete();
         this.imageGenerator.destroy();
+        this.lineAutoCompleteGenerator.destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ImageComponent, isStandalone: true, selector: "plait-draw-geometry", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -3500,12 +3521,13 @@ const withLineAutoCompleteReaction = (board) => {
         reactionG?.remove();
         PlaitBoard.getBoardContainer(board).classList.remove(CursorClass.crosshair);
         const selectedElements = getSelectedDrawElements(board);
+        const targetElement = selectedElements.length === 1 && selectedElements[0];
         const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        if (!PlaitBoard.isReadonly(board) && !isSelectionMoving(board) && selectedElements.length === 1 && PlaitDrawElement.isGeometry(selectedElements[0])) {
-            const points = getAutoCompletePoints(selectedElements[0]);
+        if (!PlaitBoard.isReadonly(board) && !isSelectionMoving(board) && targetElement && PlaitDrawElement.isShape(targetElement)) {
+            const points = getAutoCompletePoints(targetElement);
             const hitIndex = getHitIndexOfAutoCompletePoint(movingPoint, points);
             const hitPoint = points[hitIndex];
-            const component = PlaitElement.getComponent(selectedElements[0]);
+            const component = PlaitElement.getComponent(targetElement);
             component.lineAutoCompleteGenerator.recoverAutoCompleteG();
             if (hitPoint) {
                 component.lineAutoCompleteGenerator.removeAutoCompleteG(hitIndex);
@@ -3532,15 +3554,16 @@ const withLineAutoComplete = (board) => {
     let temporaryElement;
     board.pointerDown = (event) => {
         const selectedElements = getSelectedDrawElements(board);
+        const targetElement = selectedElements.length === 1 && selectedElements[0];
         const clickPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        if (!PlaitBoard.isReadonly(board) && selectedElements.length === 1 && PlaitDrawElement.isGeometry(selectedElements[0])) {
-            const points = getAutoCompletePoints(selectedElements[0]);
+        if (!PlaitBoard.isReadonly(board) && targetElement && PlaitDrawElement.isShape(targetElement)) {
+            const points = getAutoCompletePoints(targetElement);
             const index = getHitIndexOfAutoCompletePoint(clickPoint, points);
             const hitPoint = points[index];
             if (hitPoint) {
                 temporaryDisableSelection(board);
                 startPoint = clickPoint;
-                sourceElement = selectedElements[0];
+                sourceElement = targetElement;
                 BoardTransforms.updatePointerType(board, LineShape.elbow);
             }
         }
@@ -3656,5 +3679,5 @@ const withDraw = (board) => {
  * Generated bundle index. Do not edit.
  */
 
-export { BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultBasicShapeProperty, DefaultConnectorProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultGeometryActiveStyle, DefaultGeometryStyle, DefaultManualInputProperty, DefaultMergeProperty, DefaultTextProperty, DrawThemeColors, DrawTransforms, FlowchartSymbols, GeometryComponent, GeometryThreshold, LineComponent, LineHandleKey, LineMarkerType, LineShape, MemorizeKey, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, REACTION_MARGIN, ShapeDefaultSpace, StrokeStyle, alignPoints, createDefaultFlowchart, createGeometryElement, createLineElement, drawBoundMask, drawGeometry, drawLine, getAutoCompletePoints, getBasicPointers, getBoardLines, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultFlowchartProperty, getDrawDefaultStrokeColor, getEdgeOnPolygonByPoint, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryPointers, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getHitLineTextIndex, getLineDashByElement, getLineHandleRefPair, getLineMemorizedLatest, getLinePointers, getLinePoints, getLineTextRectangle, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTextRectangle, getVectorByConnection, handleLineCreating, isHitDrawElement, isHitLineText, isHitPolyLine, isRectangleHitDrawElement, isTextExceedingBounds, memorizeLatestShape, memorizeLatestText, transformOpsToPoints, transformPointToConnection, withDraw };
+export { BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultBasicShapeProperty, DefaultConnectorProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultGeometryActiveStyle, DefaultGeometryStyle, DefaultManualInputProperty, DefaultMergeProperty, DefaultTextProperty, DrawThemeColors, DrawTransforms, FlowchartSymbols, GeometryComponent, GeometryThreshold, LineComponent, LineHandleKey, LineMarkerType, LineShape, MemorizeKey, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, REACTION_MARGIN, ShapeDefaultSpace, StrokeStyle, alignPoints, createDefaultFlowchart, createGeometryElement, createLineElement, drawBoundMask, drawGeometry, drawLine, getAutoCompletePoints, getBasicPointers, getBoardLines, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultTextPoints, getDefaultTextShapeProperty, getDrawDefaultStrokeColor, getEdgeOnPolygonByPoint, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryPointers, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getHitLineTextIndex, getLineDashByElement, getLineHandleRefPair, getLineMemorizedLatest, getLinePointers, getLinePoints, getLineTextRectangle, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTextRectangle, getVectorByConnection, handleLineCreating, isHitDrawElement, isHitLineText, isHitPolyLine, isRectangleHitDrawElement, isTextExceedingBounds, memorizeLatestShape, memorizeLatestText, transformOpsToPoints, transformPointToConnection, withDraw };
 //# sourceMappingURL=plait-draw.mjs.map