@plait/draw 0.32.0 → 0.33.0

package/fesm2022/plait-draw.mjs

@@ -1,5 +1,5 @@
-import { PlaitElement, ACTIVE_STROKE_WIDTH, 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, drawLinearPath, distanceBetweenPointAndPoint, rotate, getElementById, distanceBetweenPointAndSegments, createMask, createRect, findElements, getSelectedElements, isPolylineHitRectangle, isSelectionMoving, PlaitPluginElementComponent, setClipboardData, getDataFromClipboard, depthFirstRecursion, getIsRecursionFunc, getHitElementByPoint } from '@plait/core';
-import { getRectangleByPoints, Generator, normalizeShapePoints, isDndMode, isDrawingMode, getExtendPoint, getFactorByPoints, getDirectionByVector, getOppositeDirection, getDirectionFactor, DEFAULT_ROUTE_MARGIN, reduceRouteMargin, getNextPoint, generateElbowLineRoute, getPoints, removeDuplicatePoints, getPointByVector, getPointOnPolyline, getDirectionByPointOfRectangle, rotateVectorAnti90, TRANSPARENT, CommonPluginElement, ActiveGenerator, WithTextPluginKey, RESIZE_HANDLE_DIAMETER, PRIMARY_COLOR, isVirtualKey, isDelete, isSpaceHotkey, acceptImageTypes, getElementOfFocusedImage, buildImage, getRectangleResizeHandleRefs, ResizeHandle, withResize, isResizingByCondition, getRatioByPoint, ImageGenerator } from '@plait/common';
+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, drawLinearPath, distanceBetweenPointAndPoint, rotate, depthFirstRecursion, getIsRecursionFunc, getElementById, Direction, catmullRomFitting, distanceBetweenPointAndSegments, createMask, createRect, findElements, getSelectedElements, isPolylineHitRectangle, isSelectionMoving, PlaitPluginElementComponent, setClipboardData, getDataFromClipboard, getHitElementByPoint, temporaryDisableSelection } from '@plait/core';
+import { getRectangleByPoints, Generator, 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, CommonPluginElement, ActiveGenerator, WithTextPluginKey, PRIMARY_COLOR, 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 { pointsOnBezierCurves } from 'points-on-curve';
@@ -122,6 +122,7 @@ const DefaultFlowchartPropertyMap = {
     [FlowchartSymbols.delay]: DefaultFlowchartProperty,
     [FlowchartSymbols.storedData]: DefaultFlowchartProperty
 };
+const REACTION_MARGIN = -4;
 
 const getGeometryPointers = () => {
     return [...Object.keys(BasicShapes), ...Object.keys(FlowchartSymbols)];
@@ -138,6 +139,33 @@ const getLinePointers = () => {
 
 const DEFAULT_IMAGE_WIDTH = 1000;
 
+const DrawThemeColors = {
+    [ThemeColorMode.default]: {
+        strokeColor: '#333333',
+        fill: '#FFFFFF'
+    },
+    [ThemeColorMode.colorful]: {
+        strokeColor: '#06ADBF',
+        fill: '#CDEFF2'
+    },
+    [ThemeColorMode.soft]: {
+        strokeColor: '#6D89C1',
+        fill: '#DADFEB'
+    },
+    [ThemeColorMode.retro]: {
+        strokeColor: '#E9C358',
+        fill: '#F6EDCF'
+    },
+    [ThemeColorMode.dark]: {
+        strokeColor: '#FFFFFF',
+        fill: '#434343'
+    },
+    [ThemeColorMode.starry]: {
+        strokeColor: '#42ABE5',
+        fill: '#163F5A'
+    }
+};
+
 const getStrokeWidthByElement = (element) => {
     if (PlaitDrawElement.isText(element)) {
         return 0;
@@ -145,12 +173,16 @@ const getStrokeWidthByElement = (element) => {
     const strokeWidth = element.strokeWidth || DefaultGeometryStyle.strokeWidth;
     return strokeWidth;
 };
-const getStrokeColorByElement = (element) => {
-    const strokeColor = element.strokeColor || DefaultGeometryStyle.strokeColor;
+const getStrokeColorByElement = (board, element) => {
+    const defaultColor = getDrawDefaultStrokeColor(board.theme.themeColorMode);
+    const strokeColor = element.strokeColor || defaultColor;
     return strokeColor;
 };
-const getFillByElement = (element) => {
-    const fill = element.fill || DefaultGeometryStyle.fill;
+const getFillByElement = (board, element) => {
+    const defaultFill = PlaitDrawElement.isFlowchart(element)
+        ? getFlowchartDefaultFill(board.theme.themeColorMode)
+        : DefaultGeometryStyle.fill;
+    const fill = element.fill || defaultFill;
     return fill;
 };
 const getLineDashByElement = (element) => {
@@ -1172,15 +1204,15 @@ class GeometryShapeGenerator extends Generator {
     canDraw(element, data) {
         return true;
     }
-    baseDraw(element, data) {
+    draw(element, data) {
         const rectangle = getRectangleByPoints(element.points);
         const shape = element.shape;
         if (shape === BasicShapes.text) {
             return;
         }
         const strokeWidth = getStrokeWidthByElement(element);
-        const strokeColor = getStrokeColorByElement(element);
-        const fill = getFillByElement(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,
@@ -1193,7 +1225,6 @@ class GeometryShapeGenerator extends Generator {
 
 const insertGeometry = (board, points, shape) => {
     let newElement = createGeometryElement(shape, points, '', {
-        strokeColor: DefaultBasicShapeProperty.strokeColor,
         strokeWidth: DefaultBasicShapeProperty.strokeWidth
     });
     Transforms.insertNode(board, newElement, [board.children.length]);
@@ -1216,6 +1247,10 @@ const resizeGeometry = (board, points, textHeight, path) => {
     }
     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;
@@ -1320,7 +1355,8 @@ const DrawTransforms = {
     setLineTexts,
     removeLineText,
     setLineMark,
-    insertImage
+    insertImage,
+    transformShape
 };
 
 const withGeometryCreateByDrag = (board) => {
@@ -1344,10 +1380,9 @@ const withGeometryCreateByDrag = (board) => {
             }
             else {
                 const temporaryElement = createGeometryElement(pointer, points, '', {
-                    strokeColor: DefaultBasicShapeProperty.strokeColor,
                     strokeWidth: DefaultBasicShapeProperty.strokeWidth
                 });
-                geometryGenerator.draw(temporaryElement, geometryShapeG);
+                geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
                 PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
             }
         }
@@ -1420,10 +1455,9 @@ const withGeometryCreateByDrawing = (board) => {
         if (drawMode && pointer !== BasicShapes.text) {
             const points = normalizeShapePoints([start, movingPoint], isShift);
             temporaryElement = createGeometryElement(pointer, points, '', {
-                strokeColor: DefaultBasicShapeProperty.strokeColor,
                 strokeWidth: DefaultBasicShapeProperty.strokeWidth
             });
-            geometryGenerator.draw(temporaryElement, geometryShapeG);
+            geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
             PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
         }
         pointerMove(event);
@@ -1438,7 +1472,6 @@ const withGeometryCreateByDrawing = (board) => {
                 const points = getDefaultGeometryPoints(pointer, targetPoint);
                 if (pointer !== BasicShapes.text) {
                     temporaryElement = createGeometryElement(pointer, points, '', {
-                        strokeColor: DefaultBasicShapeProperty.strokeColor,
                         strokeWidth: DefaultBasicShapeProperty.strokeWidth
                     });
                 }
@@ -1502,10 +1535,6 @@ const createGeometryElement = (shape, points, text, options) => {
         textOptions = { autoSize: true };
         alignment = undefined;
     }
-    let flowchartOptions = {};
-    if (getFlowchartPointers().includes(shape)) {
-        flowchartOptions = { fill: '#ffffff' };
-    }
     return {
         id: idCreator(),
         type: 'geometry',
@@ -1516,8 +1545,7 @@ const createGeometryElement = (shape, points, text, options) => {
         text: buildText(text, alignment),
         points,
         ...textOptions,
-        ...options,
-        ...flowchartOptions
+        ...options
     };
 };
 const getPointsByCenterPoint = (point, width, height) => {
@@ -1649,6 +1677,26 @@ const createDefaultFlowchart = (point) => {
     ], { 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 getDrawDefaultStrokeColor = (theme) => {
+    return DrawThemeColors[theme].strokeColor;
+};
+const getFlowchartDefaultFill = (theme) => {
+    return DrawThemeColors[theme].fill;
+};
 
 const MAX_LENGTH = 100;
 const drawLineArrow = (element, points, options) => {
@@ -1765,6 +1813,41 @@ const drawHollowTriangleArrow = (source, target, options) => {
     return drawLinearPath([pointLeft, pointRight, target], { ...options, fill: 'white' }, true);
 };
 
+class LineShapeGenerator extends Generator {
+    canDraw(element, data) {
+        return true;
+    }
+    draw(element, data) {
+        let lineG;
+        lineG = drawLine(this.board, element);
+        return lineG;
+    }
+}
+
+const getHitGeometryResizeHandleRef = (board, element, point) => {
+    const rectangle = getRectangleByPoints(element.points);
+    const resizeHandleRefs = getRectangleResizeHandleRefs(rectangle, RESIZE_HANDLE_DIAMETER);
+    const result = resizeHandleRefs.find(resizeHandleRef => {
+        return RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), resizeHandleRef.rectangle);
+    });
+    return result;
+};
+const getHitOutlineGeometry = (board, point, offset = 0) => {
+    let geometry = null;
+    depthFirstRecursion(board, node => {
+        if (PlaitDrawElement.isGeometry(node) || PlaitDrawElement.isImage(node)) {
+            let client = getRectangleByPoints(node.points);
+            client = RectangleClient.getOutlineRectangle(client, offset);
+            const shape = getShape(node);
+            const isHit = getEngine(shape).isHit(client, point);
+            if (isHit) {
+                geometry = node;
+            }
+        }
+    }, getIsRecursionFunc(board), true);
+    return geometry;
+};
+
 const createLineElement = (shape, points, source, target, texts, options) => {
     return {
         id: idCreator(),
@@ -1799,7 +1882,7 @@ const getLineHandleRefPair = (board, element) => {
     let targetPoint = targetBoundElement
         ? getConnectionPoint(targetBoundElement, element.target.connection)
         : element.points[element.points.length - 1];
-    let sourceDirection = getDirectionByVector([targetPoint[0] - sourcePoint[0], targetPoint[1] - sourcePoint[1]]);
+    let sourceDirection = getDirectionByVector([targetPoint[0] - sourcePoint[0], targetPoint[1] - sourcePoint[1]]) || Direction.right;
     let targetDirection = getOppositeDirection(sourceDirection);
     const sourceFactor = getDirectionFactor(sourceDirection);
     const targetFactor = getDirectionFactor(targetDirection);
@@ -1911,12 +1994,9 @@ const getCurvePoints = (board, element) => {
         return pointsOnBezierCurves(curvePoints);
     }
     else {
-        //TODO 直接获取贝塞尔曲线上高密度点
-        const points = PlaitLine.getPoints(board, element);
-        const draw = PlaitBoard.getRoughSVG(board).generator.curve(points);
-        let bezierPoints = transformOpsToPoints(draw.sets[0].ops);
-        bezierPoints = removeDuplicatePoints(bezierPoints);
-        return pointsOnBezierCurves(bezierPoints);
+        const allPoints = PlaitLine.getPoints(board, element);
+        const points = catmullRomFitting(allPoints);
+        return pointsOnBezierCurves(points);
     }
 };
 const transformOpsToPoints = (ops) => {
@@ -1958,7 +2038,7 @@ const isHitLineText = (board, element, point) => {
 };
 const drawLine = (board, element) => {
     const strokeWidth = getStrokeWidthByElement(element);
-    const strokeColor = getStrokeColorByElement(element);
+    const strokeColor = getStrokeColorByElement(board, element);
     const strokeLineDash = getLineDashByElement(element);
     const options = { stroke: strokeColor, strokeWidth, strokeLineDash };
     const lineG = createG();
@@ -2092,6 +2172,33 @@ const getVectorByConnection = (boundElement, connection) => {
     }
     return vector;
 };
+const alignPoints = (basePoint, movingPoint) => {
+    const offset = 3;
+    const newPoint = [...movingPoint];
+    if (Point.isVerticalAlign(newPoint, basePoint, offset)) {
+        newPoint[0] = basePoint[0];
+    }
+    if (Point.isHorizontalAlign(newPoint, basePoint, offset)) {
+        newPoint[1] = basePoint[1];
+    }
+    return newPoint;
+};
+const handleLineCreating = (board, lineShape, startPoint, movingPoint, sourceElement, lineShapeG) => {
+    const hitElement = getHitOutlineGeometry(board, movingPoint, REACTION_MARGIN);
+    const targetConnection = hitElement ? transformPointToConnection(board, movingPoint, hitElement) : undefined;
+    const connection = sourceElement ? transformPointToConnection(board, startPoint, sourceElement) : undefined;
+    const targetBoundId = hitElement ? hitElement.id : undefined;
+    const lineGenerator = new LineShapeGenerator(board);
+    const temporaryLineElement = createLineElement(lineShape, [startPoint, movingPoint], { marker: LineMarkerType.none, connection: connection, boundId: sourceElement?.id }, { marker: LineMarkerType.arrow, connection: targetConnection, boundId: targetBoundId }, [], {
+        strokeWidth: DefaultLineStyle.strokeWidth
+    });
+    const linePoints = getLinePoints(board, temporaryLineElement);
+    const otherPoint = linePoints[0];
+    temporaryLineElement.points[1] = alignPoints(otherPoint, movingPoint);
+    lineGenerator.processDrawing(temporaryLineElement, lineShapeG);
+    PlaitBoard.getElementActiveHost(board).append(lineShapeG);
+    return temporaryLineElement;
+};
 
 const getSelectedDrawElements = (board) => {
     const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isDrawElement(value));
@@ -2146,7 +2253,7 @@ const isRectangleHitDrawElement = (board, element, selection) => {
 };
 const isHitDrawElement = (board, element, point) => {
     if (PlaitDrawElement.isGeometry(element)) {
-        const fill = getFillByElement(element);
+        const fill = getFillByElement(board, element);
         // when shape equals text, fill is not allowed
         if (fill !== DefaultGeometryStyle.fill && fill !== TRANSPARENT && !PlaitDrawElement.isText(element)) {
             return isRectangleHitDrawElement(board, element, { anchor: point, focus: point });
@@ -2273,13 +2380,54 @@ const PlaitDrawElement = {
         return PlaitDrawElement.isImage(value) || PlaitDrawElement.isGeometry(value);
     },
     isBaseShape: (value) => {
-        return Object.keys(BasicShapes).includes(value.type);
+        return Object.keys(BasicShapes).includes(value.shape);
     },
     isFlowchart: (value) => {
-        return Object.keys(FlowchartSymbols).includes(value.type);
+        return Object.keys(FlowchartSymbols).includes(value.shape);
     }
 };
 
+class AutoCompleteGenerator extends Generator {
+    constructor(board) {
+        super(board);
+        this.board = board;
+        this.hoverElement = null;
+    }
+    canDraw(element, data) {
+        const selectedElements = getSelectedElements(this.board);
+        if (data.selected && selectedElements.length === 1 && !isSelectionMoving(this.board)) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    draw(element, data) {
+        this.autoCompleteG = createG();
+        const middlePoints = getAutoCompletePoints(element);
+        middlePoints.forEach((point, index) => {
+            const circle = drawCircle(PlaitBoard.getRoughSVG(this.board), point, RESIZE_HANDLE_DIAMETER, {
+                stroke: 'none',
+                fill: '#6698FF4d',
+                fillStyle: 'solid'
+            });
+            circle.classList.add(`geometry-auto-complete-${index}`);
+            this.autoCompleteG.appendChild(circle);
+        });
+        return this.autoCompleteG;
+    }
+    removeAutoCompleteG(index) {
+        this.hoverElement = this.autoCompleteG.querySelector(`.geometry-auto-complete-${index}`);
+        this.hoverElement.style.visibility = 'hidden';
+    }
+    recoverAutoCompleteG() {
+        if (this.hoverElement) {
+            this.hoverElement.style.visibility = 'visible';
+            this.hoverElement = null;
+        }
+    }
+}
+
 class GeometryComponent extends CommonPluginElement {
     get textManage() {
         return this.getTextManages()[0];
@@ -2321,33 +2469,38 @@ class GeometryComponent extends CommonPluginElement {
                 return selectedElements.length === 1 && !isSelectionMoving(this.board);
             }
         });
+        this.autoCompleteGenerator = new AutoCompleteGenerator(this.board);
         this.shapeGenerator = new GeometryShapeGenerator(this.board);
         this.initializeTextManage();
     }
     ngOnInit() {
         super.ngOnInit();
         this.initializeGenerator();
-        this.shapeGenerator.draw(this.element, this.g);
-        this.activeGenerator.draw(this.element, this.g, { selected: this.selected });
+        this.shapeGenerator.processDrawing(this.element, this.g);
+        this.activeGenerator.processDrawing(this.element, this.g, { selected: this.selected });
+        this.autoCompleteGenerator.processDrawing(this.element, this.g, { selected: this.selected });
         this.drawText();
     }
     onContextChanged(value, previous) {
-        if (value.element !== previous.element) {
-            this.shapeGenerator.draw(this.element, this.g);
-            this.activeGenerator.draw(this.element, this.g, { selected: this.selected });
+        const isChangeTheme = this.board.operations.find(op => op.type === 'set_theme');
+        if (value.element !== previous.element || isChangeTheme) {
+            this.shapeGenerator.processDrawing(this.element, this.g);
+            this.activeGenerator.processDrawing(this.element, this.g, { selected: this.selected });
+            this.autoCompleteGenerator.processDrawing(this.element, this.g, { selected: this.selected });
             this.updateText();
         }
         else {
             const hasSameSelected = value.selected === previous.selected;
             const hasSameHandleState = this.activeGenerator.options.hasResizeHandle() === this.activeGenerator.hasResizeHandle;
             if (!hasSameSelected || !hasSameHandleState) {
-                this.activeGenerator.draw(this.element, this.g, { selected: this.selected });
+                this.activeGenerator.processDrawing(this.element, this.g, { selected: this.selected });
+                this.autoCompleteGenerator.processDrawing(this.element, this.g, { selected: this.selected });
             }
         }
     }
     editText() {
         this.textManage.edit();
-        this.activeGenerator.draw(this.element, this.g, { selected: this.selected });
+        this.activeGenerator.processDrawing(this.element, this.g, { selected: this.selected });
     }
     drawText() {
         this.textManage.draw(this.element.text);
@@ -2408,17 +2561,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
 
-class LineShapeGenerator extends Generator {
-    canDraw(element, data) {
-        return true;
-    }
-    baseDraw(element, data) {
-        let lineG;
-        lineG = drawLine(this.board, element);
-        return lineG;
-    }
-}
-
 class LineActiveGenerator extends Generator {
     constructor() {
         super(...arguments);
@@ -2432,7 +2574,7 @@ class LineActiveGenerator extends Generator {
             return false;
         }
     }
-    baseDraw(element, data) {
+    draw(element, data) {
         const activeG = createG();
         if (this.hasResizeHandle) {
             activeG.classList.add('active');
@@ -2515,8 +2657,8 @@ class LineComponent extends PlaitPluginElementComponent {
     }
     ngOnInit() {
         this.initializeGenerator();
-        this.shapeGenerator.draw(this.element, this.g);
-        this.activeGenerator.draw(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
+        this.shapeGenerator.processDrawing(this.element, this.g);
+        this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
         super.ngOnInit();
         this.boundedElements = this.getBoundedElements();
         this.drawText();
@@ -2541,21 +2683,22 @@ class LineComponent extends PlaitPluginElementComponent {
         const boundedElements = this.getBoundedElements();
         const isBoundedElementsChanged = boundedElements.source !== this.boundedElements.source || boundedElements.target !== this.boundedElements.target;
         this.boundedElements = boundedElements;
-        if (value.element !== previous.element) {
-            this.shapeGenerator.draw(this.element, this.g);
-            this.activeGenerator.draw(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
+        const isChangeTheme = this.board.operations.find(op => op.type === 'set_theme');
+        if (value.element !== previous.element || isChangeTheme) {
+            this.shapeGenerator.processDrawing(this.element, this.g);
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
             this.updateText(previous.element.texts, value.element.texts);
             this.updateTextRectangle();
         }
         if (isBoundedElementsChanged) {
-            this.shapeGenerator.draw(this.element, this.g);
-            this.activeGenerator.draw(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
+            this.shapeGenerator.processDrawing(this.element, this.g);
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
             this.updateTextRectangle();
             return;
         }
         if (!isSelectionMoving(this.board)) {
             this.activeGenerator.hasResizeHandle = this.hasResizeHandle();
-            this.activeGenerator.draw(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
         }
     }
     hasResizeHandle() {
@@ -2804,35 +2947,10 @@ const getBoundedLineElements = (board, plaitShapes) => {
     return lines.filter(line => plaitShapes.find(shape => PlaitLine.isBoundElementOfSource(line, shape) || PlaitLine.isBoundElementOfTarget(line, shape)));
 };
 
-const getHitGeometryResizeHandleRef = (board, element, point) => {
-    const rectangle = getRectangleByPoints(element.points);
-    const resizeHandleRefs = getRectangleResizeHandleRefs(rectangle, RESIZE_HANDLE_DIAMETER);
-    const result = resizeHandleRefs.find(resizeHandleRef => {
-        return RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), resizeHandleRef.rectangle);
-    });
-    return result;
-};
-const getHitOutlineGeometry = (board, point, offset = 0) => {
-    let geometry = null;
-    depthFirstRecursion(board, node => {
-        if (PlaitDrawElement.isGeometry(node) || PlaitDrawElement.isImage(node)) {
-            let client = getRectangleByPoints(node.points);
-            client = RectangleClient.getOutlineRectangle(client, offset);
-            const shape = getShape(node);
-            const isHit = getEngine(shape).isHit(client, point);
-            if (isHit) {
-                geometry = node;
-            }
-        }
-    }, getIsRecursionFunc(board), true);
-    return geometry;
-};
-
 const withLineCreateByDraw = (board) => {
     const { pointerDown, pointerMove, pointerUp } = board;
     let start = null;
-    let sourceRef = {};
-    let targetRef = {};
+    let sourceElement;
     let lineShapeG = null;
     let temporaryElement = null;
     board.pointerDown = (event) => {
@@ -2841,10 +2959,9 @@ const withLineCreateByDraw = (board) => {
         if (isLinePointer && isDrawingMode(board)) {
             const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
             start = point;
-            const hitElement = getHitOutlineGeometry(board, point, -4);
+            const hitElement = getHitOutlineGeometry(board, point, REACTION_MARGIN);
             if (hitElement) {
-                sourceRef.connection = transformPointToConnection(board, point, hitElement);
-                sourceRef.boundId = hitElement.id;
+                sourceElement = hitElement;
             }
             preventTouchMove(board, event, true);
         }
@@ -2853,19 +2970,10 @@ const withLineCreateByDraw = (board) => {
     board.pointerMove = (event) => {
         lineShapeG?.remove();
         lineShapeG = createG();
-        const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        let movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
         if (start) {
-            const hitElement = getHitOutlineGeometry(board, movingPoint, -4);
-            targetRef.connection = hitElement ? transformPointToConnection(board, movingPoint, hitElement) : undefined;
-            targetRef.boundId = hitElement ? hitElement.id : undefined;
-            const lineGenerator = new LineShapeGenerator(board);
             const lineShape = PlaitBoard.getPointer(board);
-            temporaryElement = createLineElement(lineShape, [start, movingPoint], { marker: LineMarkerType.none, connection: sourceRef.connection, boundId: sourceRef?.boundId }, { marker: LineMarkerType.arrow, connection: targetRef.connection, boundId: targetRef?.boundId }, [], {
-                strokeColor: DefaultLineStyle.strokeColor,
-                strokeWidth: DefaultLineStyle.strokeWidth
-            });
-            lineGenerator.draw(temporaryElement, lineShapeG);
-            PlaitBoard.getElementActiveHost(board).append(lineShapeG);
+            temporaryElement = handleLineCreating(board, lineShape, start, movingPoint, sourceElement, lineShapeG);
         }
         pointerMove(event);
     };
@@ -2878,9 +2986,8 @@ const withLineCreateByDraw = (board) => {
         }
         lineShapeG?.remove();
         lineShapeG = null;
+        sourceElement = null;
         start = null;
-        sourceRef = {};
-        targetRef = {};
         temporaryElement = null;
         preventTouchMove(board, event, false);
         pointerUp(event);
@@ -3066,7 +3173,7 @@ const withLineResize = (board) => {
             if (resizeRef.handle === LineResizeHandle.source || resizeRef.handle === LineResizeHandle.target) {
                 const object = resizeRef.handle === LineResizeHandle.source ? source : target;
                 points[pointIndex] = resizeState.endTransformPoint;
-                const hitElement = getHitOutlineGeometry(board, resizeState.endTransformPoint, -4);
+                const hitElement = getHitOutlineGeometry(board, resizeState.endTransformPoint, REACTION_MARGIN);
                 if (hitElement) {
                     object.connection = transformPointToConnection(board, resizeState.endTransformPoint, hitElement);
                     object.boundId = hitElement.id;
@@ -3076,7 +3183,9 @@ const withLineResize = (board) => {
                     object.boundId = undefined;
                     if (points.length === 2) {
                         let movingPoint = points[pointIndex];
-                        const otherPoint = points[Number(!pointIndex)];
+                        const drawPoints = getLinePoints(board, resizeRef.element);
+                        const index = pointIndex === 0 ? drawPoints.length - 1 : pointIndex;
+                        const otherPoint = drawPoints[index];
                         points[pointIndex] = alignPoints(otherPoint, movingPoint);
                     }
                 }
@@ -3093,17 +3202,6 @@ const withLineResize = (board) => {
     withResize(board, options);
     return board;
 };
-const alignPoints = (basePoint, movingPoint) => {
-    const offset = 3;
-    const newPoint = [...movingPoint];
-    if (Point.isVerticalAlign(newPoint, basePoint, offset)) {
-        newPoint[0] = basePoint[0];
-    }
-    if (Point.isHorizontalAlign(newPoint, basePoint, offset)) {
-        newPoint[1] = basePoint[1];
-    }
-    return newPoint;
-};
 
 const withLineBoundReaction = (board) => {
     const { pointerMove, pointerUp } = board;
@@ -3227,7 +3325,7 @@ class ImageComponent extends CommonPluginElement {
     ngOnInit() {
         super.ngOnInit();
         this.initializeGenerator();
-        this.imageGenerator.draw(this.element, this.g, this.viewContainerRef);
+        this.imageGenerator.processDrawing(this.element, this.g, this.viewContainerRef);
     }
     onContextChanged(value, previous) {
         if (value.element !== previous.element) {
@@ -3261,6 +3359,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
 
+const withAutoCompleteReaction = (board) => {
+    const { pointerMove } = board;
+    let reactionG = null;
+    board.pointerMove = (event) => {
+        reactionG?.remove();
+        if (isSelectionMoving(board)) {
+            pointerMove(event);
+            return;
+        }
+        const selectedElements = getSelectedDrawElements(board);
+        const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        if (selectedElements.length === 1 && PlaitDrawElement.isGeometry(selectedElements[0])) {
+            const points = getAutoCompletePoints(selectedElements[0]);
+            const hitIndex = getHitIndexOfAutoCompletePoint(movingPoint, points);
+            const hitPoint = points[hitIndex];
+            const component = PlaitElement.getComponent(selectedElements[0]);
+            component.autoCompleteGenerator.recoverAutoCompleteG();
+            if (hitPoint) {
+                component.autoCompleteGenerator.removeAutoCompleteG(hitIndex);
+                reactionG = drawCircle(PlaitBoard.getRoughSVG(board), hitPoint, 10, {
+                    stroke: 'none',
+                    fill: '#6698FF80',
+                    fillStyle: 'solid'
+                });
+                PlaitBoard.getElementActiveHost(board).append(reactionG);
+            }
+        }
+        pointerMove(event);
+    };
+    return board;
+};
+
+const withAutoCompletePluginKey = 'plait-auto-complete-plugin-key';
+const withAutoComplete = (board) => {
+    const { pointerDown, pointerMove, pointerUp } = board;
+    const tolerance = 3;
+    let startPoint = null;
+    let lineShapeG = null;
+    let sourceElement;
+    let temporaryElement;
+    board.pointerDown = (event) => {
+        const selectedElements = getSelectedDrawElements(board);
+        const clickPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        if (selectedElements.length === 1 && PlaitDrawElement.isGeometry(selectedElements[0])) {
+            const points = getAutoCompletePoints(selectedElements[0]);
+            const index = getHitIndexOfAutoCompletePoint(clickPoint, points);
+            const hitPoint = points[index];
+            if (hitPoint) {
+                temporaryDisableSelection(board);
+                startPoint = clickPoint;
+                sourceElement = selectedElements[0];
+                BoardTransforms.updatePointerType(board, LineShape.elbow);
+            }
+        }
+        pointerDown(event);
+    };
+    board.pointerMove = (event) => {
+        lineShapeG?.remove();
+        lineShapeG = createG();
+        let movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        if (startPoint && sourceElement) {
+            const distance = distanceBetweenPointAndPoint(...movingPoint, ...startPoint);
+            if (distance > tolerance) {
+                temporaryElement = handleLineCreating(board, LineShape.elbow, startPoint, movingPoint, sourceElement, lineShapeG);
+            }
+        }
+        pointerMove(event);
+    };
+    board.pointerUp = event => {
+        if (temporaryElement) {
+            Transforms.insertNode(board, temporaryElement, [board.children.length]);
+            clearSelectedElement(board);
+            addSelectedElement(board, temporaryElement);
+            const afterComplete = board.getPluginOptions(withAutoCompletePluginKey)
+                ?.afterComplete;
+            afterComplete && afterComplete(temporaryElement);
+        }
+        if (startPoint) {
+            BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
+            startPoint = null;
+        }
+        lineShapeG?.remove();
+        lineShapeG = null;
+        sourceElement = null;
+        temporaryElement = null;
+        pointerUp(event);
+    };
+    return board;
+};
+
 const withDraw = (board) => {
     const { drawElement, getRectangle, isRectangleHit, isHit, isMovable, isAlign } = board;
     board.drawElement = (context) => {
@@ -3314,11 +3502,13 @@ const withDraw = (board) => {
             const isSelected = (boundId) => {
                 return !!selectedElements.find(value => value.id === boundId);
             };
-            if ((element.source.boundId && !isSelected(element.source.boundId)) ||
-                (element.target.boundId && !isSelected(element.target.boundId))) {
-                return false;
+            if ((!element.source.boundId ||
+                (element.source.boundId && isSelected(element.source.boundId) && selectedElements.includes(element))) &&
+                (!element.target.boundId ||
+                    (element.source.boundId && isSelected(element.source.boundId) && selectedElements.includes(element)))) {
+                return true;
             }
-            return true;
+            return false;
         }
         return isMovable(element);
     };
@@ -3328,12 +3518,12 @@ const withDraw = (board) => {
         }
         return isAlign(element);
     };
-    return withLineText(withLineBoundReaction(withLineResize(withGeometryResize(withLineCreateByDraw(withGeometryCreateByDrag(withGeometryCreateByDrawing(withDrawFragment(withDrawHotkey(board)))))))));
+    return withAutoCompleteReaction(withLineText(withLineBoundReaction(withLineResize(withGeometryResize(withLineCreateByDraw(withAutoComplete(withGeometryCreateByDrag(withGeometryCreateByDrawing(withDrawFragment(withDrawHotkey(board)))))))))));
 };
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultBasicShapeProperty, DefaultConnectorProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultGeometryActiveStyle, DefaultGeometryStyle, DefaultManualInputProperty, DefaultMergeProperty, DefaultTextProperty, DrawTransforms, FlowchartSymbols, GeometryComponent, GeometryThreshold, LineComponent, LineHandleKey, LineMarkerType, LineShape, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, ShapeDefaultSpace, StrokeStyle, createDefaultFlowchart, createGeometryElement, createLineElement, drawBoundMask, drawGeometry, drawLine, getBasicPointers, getBoardLines, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultFlowchartProperty, getEdgeOnPolygonByPoint, getElbowPoints, getFillByElement, getFlowchartPointers, getGeometryPointers, getHitConnectorPoint, getHitLineTextIndex, getLineDashByElement, getLineHandleRefPair, getLinePointers, getLinePoints, getLineTextRectangle, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTextRectangle, getVectorByConnection, isHitDrawElement, isHitLineText, isHitPolyLine, isRectangleHitDrawElement, isTextExceedingBounds, 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, 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, getLinePointers, getLinePoints, getLineTextRectangle, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTextRectangle, getVectorByConnection, handleLineCreating, isHitDrawElement, isHitLineText, isHitPolyLine, isRectangleHitDrawElement, isTextExceedingBounds, transformOpsToPoints, transformPointToConnection, withDraw };
 //# sourceMappingURL=plait-draw.mjs.map