@plait/draw 0.36.0 → 0.37.0

package/fesm2022/plait-draw.mjs

@@ -1,10 +1,10 @@
-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 { PlaitElement, ACTIVE_STROKE_WIDTH, ThemeColorMode, PlaitBoard, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, RectangleClient, isPointInEllipse, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, createG, transformPoint, toPoint, preventTouchMove, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, idCreator, 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, PlaitNode, BOARD_TO_HOST, isSelectionMoving, RgbaToHEX, PlaitPluginElementComponent, setClipboardData, getDataFromClipboard, getHitElementByPoint, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER } from '@plait/core';
+import { getRectangleByPoints, Generator, isDndMode, isDrawingMode, normalizeShapePoints, RESIZE_HANDLE_DIAMETER, getExtendPoint, getFactorByPoints, getRectangleResizeHandleRefs, getMemorizedLatest, memorizeLatest, 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 { TextManage, Alignment, buildText, DEFAULT_FONT_SIZE, getTextSize, AlignEditor, getTextFromClipboard } from '@plait/text';
 import { isKeyHotkey } from 'is-hotkey';
-import { pointsOnBezierCurves } from 'points-on-curve';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { NgZone, Component, ChangeDetectionStrategy } from '@angular/core';
+import { pointsOnBezierCurves } from 'points-on-curve';
 import { Subject } from 'rxjs';
 import { Node } from 'slate';
 
@@ -1223,236 +1223,11 @@ class GeometryShapeGenerator extends Generator {
     }
 }
 
-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 setStrokeColor = (board, strokeColor) => {
-    PropertyTransforms.setProperty(board, { strokeColor }, { getMemorizeKey });
-};
-const setStrokeWidth = (board, strokeWidth) => {
-    PropertyTransforms.setProperty(board, { strokeWidth }, { getMemorizeKey });
-};
-const setFillColor = (board, fill) => {
-    PropertyTransforms.setProperty(board, { fill }, { getMemorizeKey });
-};
-const setStrokeStyle = (board, strokeStyle) => {
-    PropertyTransforms.setProperty(board, { strokeStyle }, { getMemorizeKey });
-};
-
-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;
+    let temporaryElement = null;
+    let fakeCreateTextRef = null;
     board.pointerMove = (event) => {
         geometryShapeG?.remove();
         geometryShapeG = createG();
@@ -1463,16 +1238,39 @@ const withGeometryCreateByDrag = (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);
+            const memorizedLatest = getMemorizedLatestByPointer(pointer);
             if (pointer === BasicShapes.text) {
-                const textG = getTemporaryTextG(movingPoint);
-                geometryShapeG.appendChild(textG);
-                PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
+                const points = getDefaultGeometryPoints(board, pointer, movingPoint, memorizedLatest.textProperties['font-size']);
+                temporaryElement = createGeometryElement(board, BasicShapes.text, points, DefaultTextProperty.text, memorizedLatest.geometryProperties, memorizedLatest.textProperties);
+                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 temporaryElement = createGeometryElement(pointer, points, '', {
-                    strokeWidth: DefaultBasicShapeProperty.strokeWidth
-                });
+                const points = getDefaultGeometryPoints(board, pointer, movingPoint);
+                temporaryElement = createGeometryElement(board, pointer, points, '', {
+                    strokeWidth: DefaultBasicShapeProperty.strokeWidth,
+                    ...memorizedLatest.geometryProperties
+                }, memorizedLatest.textProperties);
                 geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
                 PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
             }
@@ -1480,20 +1278,14 @@ const withGeometryCreateByDrag = (board) => {
         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);
+        if (dragMode && temporaryElement) {
+            insertElement(board, temporaryElement);
+            fakeCreateTextRef?.textManage.destroy();
+            fakeCreateTextRef?.g.remove();
+            fakeCreateTextRef = null;
         }
         geometryShapeG?.remove();
         geometryShapeG = null;
@@ -1526,8 +1318,8 @@ const withGeometryCreateByDrawing = (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);
+                const points = getDefaultGeometryPoints(board, pointer, point, memorizedLatest.textProperties['font-size']);
+                const textElement = createGeometryElement(board, BasicShapes.text, points, DefaultTextProperty.text, memorizedLatest.geometryProperties, memorizedLatest.textProperties);
                 Transforms.insertNode(board, textElement, [board.children.length]);
                 clearSelectedElement(board);
                 addSelectedElement(board, textElement);
@@ -1547,7 +1339,7 @@ const withGeometryCreateByDrawing = (board) => {
         if (drawMode && pointer !== BasicShapes.text) {
             const points = normalizeShapePoints([start, movingPoint], isShift);
             const memorizedLatest = getMemorizedLatestByPointer(pointer);
-            temporaryElement = createGeometryElement(pointer, points, '', {
+            temporaryElement = createGeometryElement(board, pointer, points, '', {
                 strokeWidth: DefaultBasicShapeProperty.strokeWidth,
                 ...memorizedLatest.geometryProperties
             }, memorizedLatest.textProperties);
@@ -1563,10 +1355,10 @@ const withGeometryCreateByDrawing = (board) => {
             const { width, height } = RectangleClient.toRectangleClient([start, targetPoint]);
             if (Math.hypot(width, height) === 0) {
                 const pointer = PlaitBoard.getPointer(board);
-                const points = getDefaultGeometryPoints(pointer, targetPoint);
+                const points = getDefaultGeometryPoints(board, pointer, targetPoint);
                 if (pointer !== BasicShapes.text) {
                     const memorizedLatest = getMemorizedLatestByPointer(pointer);
-                    temporaryElement = createGeometryElement(pointer, points, '', {
+                    temporaryElement = createGeometryElement(board, pointer, points, '', {
                         strokeWidth: DefaultBasicShapeProperty.strokeWidth,
                         ...memorizedLatest.geometryProperties
                     }, memorizedLatest.textProperties);
@@ -1574,11 +1366,7 @@ const withGeometryCreateByDrawing = (board) => {
             }
         }
         if (temporaryElement) {
-            memorizeLatestShape(board, temporaryElement.shape);
-            Transforms.insertNode(board, temporaryElement, [board.children.length]);
-            clearSelectedElement(board);
-            addSelectedElement(board, temporaryElement);
-            BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
+            insertElement(board, temporaryElement);
         }
         geometryShapeG?.remove();
         geometryShapeG = null;
@@ -1589,15 +1377,15 @@ const withGeometryCreateByDrawing = (board) => {
     };
     return board;
 };
-const getDefaultGeometryPoints = (pointer, targetPoint) => {
-    const defaultProperty = getGeometryDefaultProperty(pointer);
+const getDefaultGeometryPoints = (board, pointer, targetPoint, fontSize) => {
+    const defaultProperty = getGeometryDefaultProperty(board, pointer, fontSize);
     return getPointsByCenterPoint(targetPoint, defaultProperty.width, defaultProperty.height);
 };
-const getGeometryDefaultProperty = (pointer) => {
+const getGeometryDefaultProperty = (board, pointer, fontSize) => {
     const isText = pointer === BasicShapes.text;
     const isFlowChart = getFlowchartPointers().includes(pointer);
     if (isText) {
-        return DefaultTextProperty;
+        return getDefaultTextShapeProperty(board, fontSize);
     }
     else if (isFlowChart) {
         return getDefaultFlowchartProperty(pointer);
@@ -1606,17 +1394,12 @@ const getGeometryDefaultProperty = (pointer) => {
         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 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 DefaultLineStyle = {
@@ -1629,7 +1412,7 @@ 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 = {}) => {
+const createGeometryElement = (board, shape, points, text, options = {}, textProperties = {}) => {
     let textOptions = {};
     let alignment = Alignment.center;
     if (shape === BasicShapes.text) {
@@ -1639,13 +1422,14 @@ const createGeometryElement = (shape, points, text, options = {}, textProperties
     textProperties = { ...textProperties };
     textProperties?.align && (alignment = textProperties?.align);
     delete textProperties?.align;
+    const textHeight = getDefaultTextShapeProperty(board, textProperties['font-size']).height;
     return {
         id: idCreator(),
         type: 'geometry',
         shape,
         angle: 0,
         opacity: 1,
-        textHeight: DefaultTextProperty.height,
+        textHeight,
         text: buildText(text, alignment, textProperties),
         points,
         ...textOptions,
@@ -1724,7 +1508,7 @@ const getEdgeOnPolygonByPoint = (corners, point) => {
 const getDefaultFlowchartProperty = (symbol) => {
     return DefaultFlowchartPropertyMap[symbol];
 };
-const createDefaultFlowchart = (point) => {
+const createDefaultFlowchart = (board, point) => {
     const decisionProperty = getDefaultFlowchartProperty(FlowchartSymbols.decision);
     const processProperty = getDefaultFlowchartProperty(FlowchartSymbols.process);
     const terminalProperty = getDefaultFlowchartProperty(FlowchartSymbols.terminal);
@@ -1734,15 +1518,15 @@ const createDefaultFlowchart = (point) => {
     const lineOptions = {
         strokeWidth: DefaultLineStyle.strokeWidth
     };
-    const startElement = createGeometryElement(FlowchartSymbols.terminal, getDefaultGeometryPoints(FlowchartSymbols.terminal, point), '开始', options);
+    const startElement = createGeometryElement(board, FlowchartSymbols.terminal, getDefaultGeometryPoints(board, 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 processElement1 = createGeometryElement(board, FlowchartSymbols.process, getDefaultGeometryPoints(board, 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 decisionElement = createGeometryElement(board, FlowchartSymbols.decision, getDefaultGeometryPoints(board, 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 processElement2 = createGeometryElement(board, FlowchartSymbols.process, getDefaultGeometryPoints(board, 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 endElement = createGeometryElement(board, FlowchartSymbols.terminal, getDefaultGeometryPoints(board, FlowchartSymbols.terminal, endPoint), '结束', options);
     const line1 = createLineElement(LineShape.elbow, [
         [0, 0],
         [0, 0]
@@ -1799,6 +1583,15 @@ 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 ARROW_LENGTH = 20;
 const drawLineArrow = (element, points, options) => {
@@ -1954,6 +1747,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(),
@@ -2506,6 +2372,143 @@ const PlaitDrawElement = {
     }
 };
 
+const insertGeometry = (board, points, shape) => {
+    let newElement = createGeometryElement(board, 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(board, 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
+};
+
 class LineAutoCompleteGenerator extends Generator {
     constructor(board) {
         super(board);
@@ -2636,7 +2639,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 +2677,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 }); }
@@ -3455,22 +3458,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 +3492,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 +3514,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 +3547,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 +3672,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, 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