@plait/draw 0.1.0-next.3

package/fesm2022/plait-draw.mjs

@@ -0,0 +1,1602 @@
+import { PlaitElement, RectangleClient, PlaitBoard, isPointInPolygon, getNearestPointBetweenPointAndSegments, isPointInEllipse, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, idCreator, createG, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, distanceBetweenPointAndSegments, arrowPoints, drawLinearPath, getElementById, getSelectedElements, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, Point, PlaitPluginElementComponent, isSelectionMoving, createMask, createRect, transformPoint, toPoint, BoardTransforms, PlaitPointerType, preventTouchMove, createForeignObject, setClipboardData, getDataFromClipboard, depthFirstRecursion, getIsRecursionFunc, getHitElements, isPolylineHitRectangle } from '@plait/core';
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { getRectangleByPoints, Direction, getDirectionByPoint, getPoints, getPointOnPolyline, Generator, normalizeShapePoints, ActiveGenerator, RESIZE_HANDLE_DIAMETER, isVirtualKey, isSpaceHotkey, CommonTransforms, getRectangleResizeHandleRefs, ResizeHandle, withResize, isResizingByCondition, getRatioByPoint } from '@plait/common';
+import { Alignment, buildText, AlignEditor, TextManage, DEFAULT_FONT_SIZE, getTextFromClipboard, getTextSize } from '@plait/text';
+import { isKeyHotkey } from 'is-hotkey';
+import { Node } from 'slate';
+
+var GeometryShape;
+(function (GeometryShape) {
+    GeometryShape["rectangle"] = "rectangle";
+    GeometryShape["ellipse"] = "ellipse";
+    GeometryShape["diamond"] = "diamond";
+    GeometryShape["roundRectangle"] = "roundRectangle";
+    GeometryShape["parallelogram"] = "parallelogram";
+    GeometryShape["text"] = "text";
+})(GeometryShape || (GeometryShape = {}));
+const PlaitGeometry = {
+    getTextEditor(element) {
+        const component = PlaitElement.getComponent(element);
+        if (component) {
+            return component.textManage.componentRef.instance.editor;
+        }
+        throw new Error('can not get correctly component in get text editor');
+    }
+};
+
+var LineMarkerType;
+(function (LineMarkerType) {
+    LineMarkerType["arrow"] = "arrow";
+    LineMarkerType["none"] = "none";
+})(LineMarkerType || (LineMarkerType = {}));
+var LineShape;
+(function (LineShape) {
+    LineShape["straight"] = "straight";
+    LineShape["curve"] = "curve";
+    LineShape["elbow"] = "elbow";
+})(LineShape || (LineShape = {}));
+
+const PlaitDrawElement = {
+    isGeometry: (value) => {
+        return value.type === 'geometry';
+    },
+    isLine: (value) => {
+        return value.type === 'line';
+    },
+    isText: (value) => {
+        return value.type === 'geometry' && value.shape === GeometryShape.text;
+    },
+    isDrawElement: (value) => {
+        if (PlaitDrawElement.isGeometry(value) || PlaitDrawElement.isLine(value)) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+};
+
+const ShapeDefaultSpace = {
+    rectangleAndText: 4
+};
+const DefaultGeometryStyle = {
+    strokeWidth: 2,
+    defaultRadius: 4,
+    strokeColor: '#000',
+    fill: 'none'
+};
+const DefaultGeometryActiveStyle = {
+    strokeWidth: 2,
+    selectionStrokeWidth: 1
+};
+const DefaultGeometryProperty = {
+    width: 100,
+    height: 100,
+    strokeColor: '#333',
+    strokeWidth: 2
+};
+const DefaultTextProperty = {
+    width: 36,
+    height: 20,
+    text: '文本'
+};
+const GeometryThreshold = {
+    defaultTextMaxWidth: 34 * 14,
+};
+
+var DrawPointerType;
+(function (DrawPointerType) {
+    DrawPointerType["text"] = "text";
+    DrawPointerType["rectangle"] = "rectangle";
+    DrawPointerType["line"] = "line";
+    DrawPointerType["diamond"] = "diamond";
+    DrawPointerType["roundRectangle"] = "roundRectangle";
+    DrawPointerType["parallelogram"] = "parallelogram";
+    DrawPointerType["ellipse"] = "ellipse";
+})(DrawPointerType || (DrawPointerType = {}));
+const GeometryPointer = [
+    DrawPointerType.rectangle,
+    DrawPointerType.text,
+    DrawPointerType.diamond,
+    DrawPointerType.ellipse,
+    DrawPointerType.parallelogram,
+    DrawPointerType.roundRectangle
+];
+
+const getStrokeWidthByElement = (element) => {
+    const strokeWidth = element.strokeWidth || DefaultGeometryStyle.strokeWidth;
+    return strokeWidth;
+};
+const getStrokeColorByElement = (element) => {
+    const strokeColor = element.strokeColor || DefaultGeometryStyle.strokeColor;
+    return strokeColor;
+};
+const getFillByElement = (element) => {
+    const fill = element.fill || DefaultGeometryStyle.fill;
+    return fill;
+};
+const getLineDashByElement = (element) => {
+    return element.strokeStyle === 'dashed' ? [8, 8 + getStrokeWidthByElement(element)] : undefined;
+};
+
+const DiamondEngine = {
+    draw(board, rectangle, options) {
+        const points = RectangleClient.getEdgeCenterPoints(rectangle);
+        const rs = PlaitBoard.getRoughSVG(board);
+        return rs.polygon(points, { ...options, fillStyle: 'solid' });
+    },
+    isHit(rectangle, point) {
+        const controlPoints = RectangleClient.getEdgeCenterPoints(rectangle);
+        return isPointInPolygon(point, controlPoints);
+    },
+    getNearestPoint(rectangle, point) {
+        const connectorPoints = RectangleClient.getEdgeCenterPoints(rectangle);
+        return getNearestPointBetweenPointAndSegments(point, connectorPoints);
+    },
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    }
+};
+
+const EllipseEngine = {
+    draw(board, rectangle, options) {
+        const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
+        const rs = PlaitBoard.getRoughSVG(board);
+        return rs.ellipse(centerPoint[0], centerPoint[1], rectangle.width, rectangle.height, { ...options, fillStyle: 'solid' });
+    },
+    isHit(rectangle, point) {
+        const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
+        return isPointInEllipse(point, centerPoint, rectangle.width / 2, rectangle.height / 2);
+    },
+    getNearestPoint(rectangle, point) {
+        const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
+        return getNearestPointBetweenPointAndEllipse(point, centerPoint, rectangle.width / 2, rectangle.height / 2);
+    },
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    }
+};
+function getNearestPointBetweenPointAndEllipse(point, center, rx, ry, rotation = 0) {
+    const rectangleClient = {
+        x: center[0] - rx,
+        y: center[1] - ry,
+        height: ry * 2,
+        width: rx * 2
+    };
+    // https://stackoverflow.com/a/46007540/232122
+    const px = Math.abs(point[0] - rectangleClient.x - rectangleClient.width / 2);
+    const py = Math.abs(point[1] - rectangleClient.y - rectangleClient.height / 2);
+    let tx = 0.707;
+    let ty = 0.707;
+    const a = Math.abs(rectangleClient.width) / 2;
+    const b = Math.abs(rectangleClient.height) / 2;
+    [0, 1, 2, 3].forEach(x => {
+        const xx = a * tx;
+        const yy = b * ty;
+        const ex = ((a * a - b * b) * tx ** 3) / a;
+        const ey = ((b * b - a * a) * ty ** 3) / b;
+        const rx = xx - ex;
+        const ry = yy - ey;
+        const qx = px - ex;
+        const qy = py - ey;
+        const r = Math.hypot(ry, rx);
+        const q = Math.hypot(qy, qx);
+        tx = Math.min(1, Math.max(0, ((qx * r) / q + ex) / a));
+        ty = Math.min(1, Math.max(0, ((qy * r) / q + ey) / b));
+        const t = Math.hypot(ty, tx);
+        tx /= t;
+        ty /= t;
+    });
+    const signX = point[0] > center[0] ? 1 : -1;
+    const signY = point[1] > center[1] ? 1 : -1;
+    return [center[0] + a * tx * signX, center[1] + b * ty * signY];
+}
+
+const ParallelogramEngine = {
+    draw(board, rectangle, options) {
+        const points = getParallelogramPoints(rectangle);
+        const rs = PlaitBoard.getRoughSVG(board);
+        return rs.polygon(points, { ...options, fillStyle: 'solid' });
+    },
+    isHit(rectangle, point) {
+        const parallelogramPoints = getParallelogramPoints(rectangle);
+        return isPointInPolygon(point, parallelogramPoints);
+    },
+    getNearestPoint(rectangle, point) {
+        const cornerPoints = getParallelogramPoints(rectangle);
+        return getNearestPointBetweenPointAndSegments(point, cornerPoints);
+    },
+    getConnectorPoints(rectangle) {
+        const cornerPoints = getParallelogramPoints(rectangle);
+        return getCenterPointsOnPolygon(cornerPoints);
+    }
+};
+const getParallelogramPoints = (rectangle) => {
+    return [
+        [rectangle.x + rectangle.width / 4, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y],
+        [rectangle.x + (rectangle.width * 3) / 4, rectangle.y + rectangle.height],
+        [rectangle.x, rectangle.y + rectangle.height]
+    ];
+};
+
+const RectangleEngine = {
+    draw(board, rectangle, options) {
+        return drawRectangle(board, rectangle, { ...options, fillStyle: 'solid' });
+    },
+    isHit(rectangle, point) {
+        const rangeRectangle = RectangleClient.toRectangleClient([point, point]);
+        return RectangleClient.isHit(rectangle, rangeRectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        const cornerPoints = RectangleClient.getCornerPoints(rectangle);
+        return getNearestPointBetweenPointAndSegments(point, cornerPoints);
+    },
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    }
+};
+
+const RoundRectangleEngine = {
+    draw(board, rectangle, options) {
+        return drawRoundRectangle(PlaitBoard.getRoughSVG(board), rectangle.x, rectangle.y, rectangle.x + rectangle.width, rectangle.y + rectangle.height, { ...options, fillStyle: 'solid' }, false, getRoundRectangleRadius(rectangle));
+    },
+    isHit(rectangle, point) {
+        return isPointInRoundRectangle(point, rectangle, getRoundRectangleRadius(rectangle));
+    },
+    getNearestPoint(rectangle, point) {
+        return getNearestPointBetweenPointAndRoundRectangle(point, rectangle, getRoundRectangleRadius(rectangle));
+    },
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    }
+};
+const getRoundRectangleRadius = (rectangle) => {
+    return Math.min(rectangle.width * 0.1, rectangle.height * 0.1);
+};
+function getNearestPointBetweenPointAndRoundRectangle(point, rectangle, radius) {
+    const { x: rectX, y: rectY, width, height } = rectangle;
+    const cornerPoints = RectangleClient.getCornerPoints(rectangle);
+    let result = getNearestPointBetweenPointAndSegments(point, cornerPoints);
+    let circleCenter = null;
+    const inLeftTop = point[0] >= rectX && point[0] <= rectX + radius && point[1] >= rectY && point[1] <= rectY + radius;
+    if (inLeftTop) {
+        circleCenter = [rectX + radius, rectY + radius];
+    }
+    const inLeftBottom = point[0] >= rectX && point[0] <= rectX + radius && point[1] >= rectY + height && point[1] <= rectY + height - radius;
+    if (inLeftBottom) {
+        circleCenter = [rectX + radius, rectY + height - radius];
+    }
+    const inRightTop = point[0] >= rectX + width - radius && point[0] <= rectX + width && point[1] >= rectY && point[1] <= rectY + radius;
+    if (inRightTop) {
+        circleCenter = [rectX + width - radius, rectY + radius];
+    }
+    const inRightBottom = point[0] >= rectX + width - radius &&
+        point[0] <= rectX + width &&
+        point[1] >= rectY + height - radius &&
+        point[1] <= rectY + height;
+    if (inRightBottom) {
+        circleCenter = [rectX + width - radius, rectY + height - radius];
+    }
+    if (circleCenter) {
+        result = getNearestPointBetweenPointAndEllipse(point, circleCenter, radius, radius);
+    }
+    return result;
+}
+
+const ShapeEngineMap = {
+    [GeometryShape.rectangle]: RectangleEngine,
+    [GeometryShape.diamond]: DiamondEngine,
+    [GeometryShape.ellipse]: EllipseEngine,
+    [GeometryShape.parallelogram]: ParallelogramEngine,
+    [GeometryShape.roundRectangle]: RoundRectangleEngine,
+    [GeometryShape.text]: RectangleEngine
+};
+const getEngine = (shape) => {
+    return ShapeEngineMap[shape];
+};
+
+const createGeometryElement = (shape, points, text, options) => {
+    let textOptions = {};
+    let alignment = Alignment.center;
+    if (shape === GeometryShape.text) {
+        textOptions = { autoSize: true };
+        alignment = undefined;
+    }
+    return {
+        id: idCreator(),
+        type: 'geometry',
+        shape,
+        angle: 0,
+        opacity: 1,
+        textHeight: DefaultTextProperty.height,
+        text: buildText(text, alignment),
+        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 height = element.textHeight;
+    const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2;
+    return {
+        height,
+        width: width > 0 ? width : 0,
+        x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText,
+        y: elementRectangle.y + (elementRectangle.height - height) / 2
+    };
+};
+const drawBoundMask = (board, element) => {
+    const G = createG();
+    const rectangle = getRectangleByPoints(element.points);
+    const offset = (getStrokeWidthByElement(element) + 1) / 2 - 0.1;
+    const activeRectangle = RectangleClient.getOutlineRectangle(rectangle, -offset);
+    const maskG = drawGeometry(board, activeRectangle, element.shape, {
+        stroke: SELECTION_BORDER_COLOR,
+        strokeWidth: 1,
+        fill: SELECTION_FILL_COLOR,
+        fillStyle: 'solid'
+    });
+    G.appendChild(maskG);
+    const connectorPoints = getEngine(element.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, offset = 0) => {
+    const rectangle = getRectangleByPoints(element.points);
+    const activeRectangle = RectangleClient.getOutlineRectangle(rectangle, -offset);
+    return getEngine(element.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 createLineElement = (shape, points, source, target, options) => {
+    return {
+        id: idCreator(),
+        type: 'line',
+        shape,
+        source,
+        texts: [],
+        target,
+        opacity: 1,
+        points,
+        ...options
+    };
+};
+const getElbowPoints = (board, element) => {
+    if (element.points.length === 2) {
+        const source = getSourcePoint(board, element);
+        const target = getTargetPoint(board, element);
+        let sourceDirection = source[0] < target[0] ? Direction.right : Direction.left;
+        let targetDirection = source[0] < target[0] ? Direction.left : Direction.right;
+        if (element.source.connection) {
+            sourceDirection = getDirectionByPoint(element.source.connection, sourceDirection);
+        }
+        if (element.target.connection) {
+            targetDirection = getDirectionByPoint(element.target.connection, targetDirection);
+        }
+        const points = getPoints(source, sourceDirection, target, targetDirection, 30);
+        return points;
+    }
+    return element.points;
+};
+const isHitPolyLine = (pathPoints, point, strokeWidth, expand = 0) => {
+    const distance = distanceBetweenPointAndSegments(pathPoints, point);
+    return distance <= strokeWidth + expand;
+};
+const getHitLineTextIndex = (board, element, point) => {
+    const texts = element.texts;
+    if (!texts.length)
+        return -1;
+    const points = getElbowPoints(board, element);
+    return texts.findIndex(text => {
+        const center = getPointOnPolyline(points, text.position);
+        const rectangle = {
+            x: center[0] - text.width / 2,
+            y: center[1] - text.height / 2,
+            width: text.width,
+            height: text.height
+        };
+        return RectangleClient.isHit(rectangle, RectangleClient.toRectangleClient([point, point]));
+    });
+};
+const isHitLineText = (board, element, point) => {
+    return getHitLineTextIndex(board, element, point) !== -1;
+};
+const drawElbowLine = (board, element) => {
+    const strokeWidth = getStrokeWidthByElement(element);
+    const strokeColor = getStrokeColorByElement(element);
+    const strokeLineDash = getLineDashByElement(element);
+    const options = { stroke: strokeColor, strokeWidth, strokeLineDash };
+    const lineG = createG();
+    const points = getElbowPoints(board, element);
+    const elbowLine = PlaitBoard.getRoughSVG(board).linearPath(points, options);
+    const path = elbowLine.querySelector('path');
+    path?.setAttribute('mask', `url(#${element.id})`);
+    lineG.appendChild(elbowLine);
+    const arrow = drawLineArrow(element, points, options);
+    arrow && lineG.appendChild(arrow);
+    return lineG;
+};
+const drawLineArrow = (element, points, options) => {
+    const sourceMarker = element.source.marker;
+    const targetMarker = element.target.marker;
+    const arrowG = createG();
+    if (sourceMarker === LineMarkerType.none && targetMarker === LineMarkerType.none)
+        return null;
+    if (sourceMarker === LineMarkerType.arrow) {
+        const sourcePoint = points[0];
+        const { pointLeft, pointRight } = arrowPoints(points[1], sourcePoint, 10, 20);
+        const sourceArrow = drawLinearPath([pointLeft, sourcePoint, pointRight], options);
+        arrowG.appendChild(sourceArrow);
+    }
+    if (targetMarker === LineMarkerType.arrow) {
+        const endPoint = points[points.length - 1];
+        const { pointLeft, pointRight } = arrowPoints(points[points.length - 2], endPoint, 10, 20);
+        const targetArrow = drawLinearPath([pointLeft, endPoint, pointRight], options);
+        arrowG.appendChild(targetArrow);
+    }
+    return arrowG;
+};
+const getSourcePoint = (board, element) => {
+    if (element.source.boundId) {
+        const boundElement = getElementById(board, element.source.boundId);
+        return boundElement ? normalizeConnection(boundElement, element.source.connection) : element.points[0];
+    }
+    return element.points[0];
+};
+const getTargetPoint = (board, element) => {
+    if (element.target.boundId) {
+        const boundElement = getElementById(board, element.target.boundId);
+        return boundElement ? normalizeConnection(boundElement, element.target.connection) : element.points[element.points.length - 1];
+    }
+    return element.points[element.points.length - 1];
+};
+const normalizeConnection = (geometry, connection) => {
+    const rectangle = getRectangleByPoints(geometry.points);
+    const strokeWidth = getStrokeWidthByElement(geometry);
+    return [
+        rectangle.x - strokeWidth / 2 + (rectangle.width + strokeWidth) * connection[0],
+        rectangle.y - strokeWidth / 2 + (rectangle.height + strokeWidth) * connection[1]
+    ];
+};
+const transformPointToConnection = (board, point, hitElement) => {
+    const offset = (getStrokeWidthByElement(hitElement) + 1) / 2;
+    let rectangle = getRectangleByPoints(hitElement.points);
+    rectangle = RectangleClient.getOutlineRectangle(rectangle, -offset);
+    let nearestPoint = getNearestPoint(hitElement, point, offset);
+    const hitConnector = getHitConnectorPoint(nearestPoint, hitElement, rectangle);
+    nearestPoint = hitConnector ? hitConnector : nearestPoint;
+    return [(nearestPoint[0] - rectangle.x) / rectangle.width, (nearestPoint[1] - rectangle.y) / rectangle.height];
+};
+const getHitConnectorPoint = (movingPoint, hitElement, rectangle) => {
+    const connector = getEngine(hitElement.shape).getConnectorPoints(rectangle);
+    const points = getPointsByCenterPoint(movingPoint, 5, 5);
+    const pointRectangle = getRectangleByPoints(points);
+    return connector.find(point => {
+        return RectangleClient.isHit(pointRectangle, RectangleClient.toRectangleClient([point, point]));
+    });
+};
+const getLineTextRectangle = (board, element, index) => {
+    const text = element.texts[index];
+    const elbowPoints = getElbowPoints(board, element);
+    const point = getPointOnPolyline(elbowPoints, text.position);
+    return {
+        x: point[0] - text.width / 2,
+        y: point[1] - text.height / 2,
+        width: text.width,
+        height: text.height
+    };
+};
+
+var DrawCreateMode;
+(function (DrawCreateMode) {
+    DrawCreateMode["drag"] = "drag";
+    DrawCreateMode["draw"] = "draw";
+})(DrawCreateMode || (DrawCreateMode = {}));
+const BOARD_TO_CREATE_MODE = new WeakMap();
+const getCreateMode = (board) => {
+    return BOARD_TO_CREATE_MODE.get(board);
+};
+const setCreateMode = (board, mode) => {
+    BOARD_TO_CREATE_MODE.set(board, mode);
+};
+
+const getSelectedDrawElements = (board) => {
+    const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isDrawElement(value));
+    return selectedElements;
+};
+const getSelectedGeometryElements = (board) => {
+    const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isGeometry(value));
+    return selectedElements;
+};
+const getSelectedLineElements = (board) => {
+    const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isLine(value));
+    return selectedElements;
+};
+
+class GeometryShapeGenerator extends Generator {
+    canDraw(element, data) {
+        return true;
+    }
+    baseDraw(element, data) {
+        const outerRectangle = getRectangleByPoints(element.points);
+        const shape = element.shape;
+        if (shape === GeometryShape.text) {
+            return;
+        }
+        const strokeWidth = getStrokeWidthByElement(element);
+        const strokeColor = getStrokeColorByElement(element);
+        const fill = getFillByElement(element);
+        const strokeLineDash = getLineDashByElement(element);
+        return drawGeometry(this.board, outerRectangle, shape, { stroke: strokeColor, strokeWidth, fill, strokeLineDash });
+    }
+}
+
+const insertGeometry = (board, points, shape) => {
+    let newElement = createGeometryElement(shape, points, '', {
+        strokeColor: DefaultGeometryProperty.strokeColor,
+        strokeWidth: DefaultGeometryProperty.strokeWidth
+    });
+    Transforms.insertNode(board, newElement, [board.children.length]);
+    clearSelectedElement(board);
+    addSelectedElement(board, newElement);
+};
+const insertText = (board, points, text = '文本') => {
+    let newElement = createGeometryElement(GeometryShape.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 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 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 DrawTransforms = {
+    setText,
+    insertGeometry,
+    resizeGeometry,
+    insertText,
+    setTextSize,
+    resizeLine,
+    setLineTexts,
+    removeLineText
+};
+
+class GeometryComponent extends PlaitPluginElementComponent {
+    constructor(viewContainerRef, cdr) {
+        super(cdr);
+        this.viewContainerRef = viewContainerRef;
+        this.cdr = cdr;
+        this.destroy$ = new Subject();
+    }
+    initializeGenerator() {
+        this.activeGenerator = new ActiveGenerator(this.board, {
+            getStrokeWidth: () => {
+                const selectedElements = getSelectedElements(this.board);
+                if (selectedElements.length === 1 && !isSelectionMoving(this.board)) {
+                    return DefaultGeometryActiveStyle.strokeWidth;
+                }
+                else {
+                    return DefaultGeometryActiveStyle.selectionStrokeWidth;
+                }
+            },
+            getRectangle: (element) => {
+                return getRectangleByPoints(element.points);
+            },
+            getStrokeWidthByElement: (element) => {
+                return getStrokeWidthByElement(element);
+            },
+            hasResizeHandle: () => {
+                const selectedElements = getSelectedElements(this.board);
+                if (PlaitBoard.hasBeenTextEditing(this.board)) {
+                    return false;
+                }
+                return selectedElements.length === 1 && !isSelectionMoving(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.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 });
+            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 });
+            }
+        }
+    }
+    editText() {
+        this.textManage.edit();
+        this.activeGenerator.draw(this.element, this.g, { selected: this.selected });
+    }
+    drawText() {
+        this.textManage.draw(this.element.text);
+        this.g.append(this.textManage.g);
+    }
+    updateText() {
+        this.textManage.updateText(this.element.text);
+        this.textManage.updateRectangle();
+    }
+    initializeTextManage() {
+        this.textManage = new TextManage(this.board, this.viewContainerRef, {
+            getRectangle: () => {
+                return getTextRectangle(this.element);
+            },
+            onValueChangeHandle: (textManageRef) => {
+                const height = textManageRef.height / this.board.viewport.zoom;
+                const width = textManageRef.width / this.board.viewport.zoom;
+                if (textManageRef.newValue) {
+                    DrawTransforms.setText(this.board, this.element, textManageRef.newValue, width, height);
+                }
+                else {
+                    DrawTransforms.setTextSize(this.board, this.element, width, height);
+                }
+            },
+            getMaxWidth: () => {
+                const width = getTextRectangle(this.element).width;
+                return this.element?.autoSize ? GeometryThreshold.defaultTextMaxWidth : width;
+            }
+        });
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.textManage.destroy();
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", 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.3", type: GeometryComponent, selector: "plait-draw-geometry", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: GeometryComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'plait-draw-geometry',
+                    template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
+
+class LineShapeGenerator extends Generator {
+    canDraw(element, data) {
+        return true;
+    }
+    baseDraw(element, data) {
+        const shape = element.shape;
+        let lineG;
+        switch (shape) {
+            case LineShape.elbow:
+                lineG = drawElbowLine(this.board, element);
+                drawMask(this.board, lineG, element);
+                break;
+            default:
+                break;
+        }
+        return lineG;
+    }
+}
+function drawMask(board, g, element) {
+    const mask = createMask();
+    mask.setAttribute('id', element.id);
+    const points = getElbowPoints(board, element);
+    let rectangle = getRectangleByPoints(points);
+    rectangle = RectangleClient.getOutlineRectangle(rectangle, -3);
+    const maskRect = createRect(rectangle, {
+        fill: 'white'
+    });
+    mask.appendChild(maskRect);
+    const texts = element.texts;
+    texts.forEach((text, index) => {
+        const textRectangle = getLineTextRectangle(board, element, index);
+        const rect = createRect(textRectangle, {
+            fill: 'black'
+        });
+        mask.appendChild(rect);
+    });
+    g.appendChild(mask);
+}
+
+class LineActiveGenerator extends Generator {
+    canDraw(element, data) {
+        if (data.selected) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    baseDraw(element, data) {
+        const activeG = createG();
+        activeG.classList.add('active');
+        activeG.classList.add('line-handle');
+        const sourcePoint = getSourcePoint(this.board, element);
+        const targetPoint = getTargetPoint(this.board, element);
+        const sourceCircle = drawCircle(PlaitBoard.getRoughSVG(this.board), sourcePoint, RESIZE_HANDLE_DIAMETER, {
+            stroke: '#999999',
+            strokeWidth: 1,
+            fill: '#FFF',
+            fillStyle: 'solid'
+        });
+        const targetCircle = drawCircle(PlaitBoard.getRoughSVG(this.board), targetPoint, RESIZE_HANDLE_DIAMETER, {
+            stroke: '#999999',
+            strokeWidth: 1,
+            fill: '#FFF',
+            fillStyle: 'solid'
+        });
+        activeG.appendChild(targetCircle);
+        activeG.appendChild(sourceCircle);
+        return activeG;
+    }
+}
+
+class LineComponent extends PlaitPluginElementComponent {
+    constructor(viewContainerRef, cdr) {
+        super(cdr);
+        this.viewContainerRef = viewContainerRef;
+        this.cdr = cdr;
+        this.destroy$ = new Subject();
+        this.textManages = [];
+        this.boundedElements = {};
+    }
+    initializeGenerator() {
+        this.shapeGenerator = new LineShapeGenerator(this.board);
+        this.activeGenerator = new LineActiveGenerator(this.board);
+        this.initializeTextManages();
+    }
+    ngOnInit() {
+        this.initializeGenerator();
+        this.shapeGenerator.draw(this.element, this.g);
+        this.activeGenerator.draw(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
+        super.ngOnInit();
+        this.boundedElements = this.getBoundedElements();
+        this.drawText();
+    }
+    getBoundedElements() {
+        const boundedElements = {};
+        if (this.element.source.boundId) {
+            const boundElement = getElementById(this.board, this.element.source.boundId);
+            if (boundElement) {
+                boundedElements.source = boundElement;
+            }
+        }
+        if (this.element.target.boundId) {
+            const boundElement = getElementById(this.board, this.element.target.boundId);
+            if (boundElement) {
+                boundedElements.target = boundElement;
+            }
+        }
+        return boundedElements;
+    }
+    onContextChanged(value, previous) {
+        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 });
+            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.updateTextRectangle();
+            return;
+        }
+        const hasSameSelected = value.selected === previous.selected;
+        if (!hasSameSelected) {
+            this.activeGenerator.draw(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
+        }
+    }
+    initializeTextManages() {
+        if (this.element.texts?.length) {
+            this.element.texts.forEach((text, index) => {
+                const manage = this.createTextManage(text, index);
+                this.textManages.push(manage);
+            });
+        }
+    }
+    destroyTextManages() {
+        this.textManages.forEach(manage => {
+            manage.destroy();
+        });
+    }
+    drawText() {
+        if (this.element.texts?.length) {
+            this.textManages.forEach((manage, index) => {
+                manage.draw(this.element.texts[index].text);
+                this.g.append(manage.g);
+            });
+        }
+    }
+    createTextManage(text, index) {
+        return new TextManage(this.board, this.viewContainerRef, {
+            getRectangle: () => {
+                return getLineTextRectangle(this.board, this.element, index);
+            },
+            onValueChangeHandle: (textManageRef) => {
+                const height = textManageRef.height / this.board.viewport.zoom;
+                const width = textManageRef.width / this.board.viewport.zoom;
+                const texts = [...this.element.texts];
+                texts.splice(index, 1, {
+                    text: textManageRef.newValue ? textManageRef.newValue : this.element.texts[index].text,
+                    position: this.element.texts[index].position,
+                    width,
+                    height
+                });
+                DrawTransforms.setLineTexts(this.board, this.element, texts);
+            },
+            getMaxWidth: () => GeometryThreshold.defaultTextMaxWidth
+        });
+    }
+    updateText(previousTexts, currentTexts) {
+        if (previousTexts === currentTexts)
+            return;
+        const previousTextsLength = previousTexts.length;
+        const currentTextsLength = currentTexts.length;
+        if (currentTextsLength === previousTextsLength) {
+            for (let i = 0; i < previousTextsLength; i++) {
+                if (previousTexts[i].text !== currentTexts[i].text) {
+                    this.textManages[i].updateText(currentTexts[i].text);
+                }
+            }
+        }
+        else {
+            this.destroyTextManages();
+            this.textManages = [];
+            this.initializeTextManages();
+            this.drawText();
+        }
+    }
+    updateTextRectangle() {
+        this.textManages.forEach(manage => {
+            manage.updateRectangle();
+        });
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.activeGenerator.destroy();
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: LineComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: LineComponent, selector: "plait-draw-line", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: LineComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'plait-draw-line',
+                    template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
+
+const withDrawHotkey = (board) => {
+    const { keydown } = board;
+    board.keydown = (event) => {
+        const selectedElements = getSelectedElements(board);
+        const isSingleSelection = selectedElements.length === 1;
+        const targetElement = selectedElements[0];
+        if (!isVirtualKey(event) && !isSpaceHotkey(event) && isSingleSelection && PlaitDrawElement.isDrawElement(targetElement)) {
+            event.preventDefault();
+            PlaitElement.getComponent(targetElement).editText();
+            return;
+        }
+        keydown(event);
+    };
+    return board;
+};
+
+const withGeometryCreateByDrag = (board) => {
+    const { pointerMove, pointerUp } = board;
+    let createMode = undefined;
+    let geometryShapeG = null;
+    board.pointerMove = (event) => {
+        geometryShapeG?.remove();
+        geometryShapeG = createG();
+        createMode = getCreateMode(board);
+        const geometryGenerator = new GeometryShapeGenerator(board);
+        const isGeometryPointer = PlaitBoard.isInPointer(board, GeometryPointer);
+        const dragMode = isGeometryPointer && createMode === DrawCreateMode.drag;
+        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 === DrawPointerType.text) {
+                const textG = getTemporaryTextG(movingPoint);
+                geometryShapeG.appendChild(textG);
+                PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
+            }
+            else {
+                const temporaryElement = createGeometryElement(pointer, points, '', {
+                    strokeColor: DefaultGeometryProperty.strokeColor,
+                    strokeWidth: DefaultGeometryProperty.strokeWidth
+                });
+                geometryGenerator.draw(temporaryElement, geometryShapeG);
+                PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
+            }
+        }
+        pointerMove(event);
+    };
+    board.pointerUp = (event) => {
+        const pointer = PlaitBoard.getPointer(board);
+        const isGeometryPointer = PlaitBoard.isInPointer(board, GeometryPointer);
+        const dragMode = isGeometryPointer && createMode === DrawCreateMode.drag;
+        if (dragMode) {
+            const targetPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            const points = getDefaultGeometryPoints(pointer, targetPoint);
+            if (pointer === DrawPointerType.text) {
+                DrawTransforms.insertText(board, points);
+            }
+            else {
+                DrawTransforms.insertGeometry(board, points, pointer);
+            }
+            BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
+        }
+        geometryShapeG?.remove();
+        geometryShapeG = null;
+        preventTouchMove(board, false);
+        pointerUp(event);
+    };
+    return board;
+};
+const withGeometryCreateByDraw = (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 createMode = getCreateMode(board);
+        const isGeometryPointer = PlaitBoard.isInPointer(board, GeometryPointer);
+        if (isGeometryPointer && createMode === DrawCreateMode.draw) {
+            const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            start = point;
+            preventTouchMove(board, true);
+            const pointer = PlaitBoard.getPointer(board);
+            if (pointer === DrawPointerType.text) {
+                const points = getDefaultGeometryPoints(pointer, point);
+                const textElement = createGeometryElement(GeometryShape.text, points, DefaultTextProperty.text);
+                Transforms.insertNode(board, textElement, [board.children.length]);
+                clearSelectedElement(board);
+                addSelectedElement(board, textElement);
+                BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
+                start = null;
+                preventTouchMove(board, false);
+            }
+        }
+        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 !== DrawPointerType.text) {
+            const points = normalizeShapePoints([start, movingPoint], isShift);
+            temporaryElement = createGeometryElement(pointer, points, '', {
+                strokeColor: DefaultGeometryProperty.strokeColor,
+                strokeWidth: DefaultGeometryProperty.strokeWidth
+            });
+            geometryGenerator.draw(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 !== DrawPointerType.text) {
+                    temporaryElement = createGeometryElement(pointer, points, '', {
+                        strokeColor: DefaultGeometryProperty.strokeColor,
+                        strokeWidth: DefaultGeometryProperty.strokeWidth
+                    });
+                }
+            }
+        }
+        if (temporaryElement) {
+            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, false);
+        pointerUp(event);
+    };
+    return board;
+};
+const getDefaultGeometryPoints = (pointer, targetPoint) => {
+    return pointer === DrawPointerType.text
+        ? getPointsByCenterPoint(targetPoint, DefaultTextProperty.width, DefaultTextProperty.height)
+        : getPointsByCenterPoint(targetPoint, DefaultGeometryProperty.width, DefaultGeometryProperty.height);
+};
+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 buildClipboardData = (board, elements, startPoint) => {
+    return elements.map(element => {
+        if (PlaitDrawElement.isGeometry(element)) {
+            const points = element.points.map(point => [point[0] - startPoint[0], point[1] - startPoint[1]]);
+            return { ...element, points };
+        }
+        if (PlaitDrawElement.isLine(element)) {
+            const points = element.points.map(point => [point[0] - startPoint[0], point[1] - startPoint[1]]);
+            return { ...element, points };
+        }
+        return element;
+    });
+};
+const insertClipboardData = (board, elements, startPoint) => {
+    elements.forEach(element => {
+        element.id = idCreator();
+        element.points = element.points.map(point => [startPoint[0] + point[0], startPoint[1] + point[1]]);
+        Transforms.insertNode(board, element, [board.children.length]);
+    });
+};
+
+const withDrawFragment = (baseBoard) => {
+    const board = baseBoard;
+    const { deleteFragment, setFragment, insertFragment } = board;
+    board.deleteFragment = (data) => {
+        const drawElements = getSelectedDrawElements(board);
+        if (drawElements.length) {
+            const geometryElements = drawElements.filter(value => PlaitDrawElement.isDrawElement(value));
+            // query bound lines
+            const boundLineElements = [];
+            CommonTransforms.removeElements(board, [...geometryElements, ...boundLineElements]);
+        }
+        deleteFragment(data);
+    };
+    board.setFragment = (data, rectangle) => {
+        const targetDrawElements = getSelectedDrawElements(board);
+        if (targetDrawElements.length) {
+            const elements = buildClipboardData(board, targetDrawElements, rectangle ? [rectangle.x, rectangle.y] : [0, 0]);
+            setClipboardData(data, elements);
+        }
+        setFragment(data, rectangle);
+    };
+    board.insertFragment = (data, targetPoint) => {
+        const elements = getDataFromClipboard(data);
+        const drawElements = elements.filter(value => PlaitDrawElement.isDrawElement(value));
+        if (elements.length > 0 && drawElements.length > 0) {
+            insertClipboardData(board, drawElements, targetPoint);
+        }
+        else if (elements.length === 0) {
+            const text = getTextFromClipboard(data);
+            const selectedElements = getSelectedElements(board);
+            // (*￣︶￣)
+            const insertAsChildren = selectedElements.length === 1 && selectedElements[0].children;
+            const insertAsFreeText = !insertAsChildren;
+            if (text && insertAsFreeText) {
+                const { width, height } = getTextSize(board, text);
+                DrawTransforms.insertText(board, [targetPoint, [targetPoint[0] + width, targetPoint[1] + height]], text);
+                return;
+            }
+        }
+        insertFragment(data, targetPoint);
+    };
+    return board;
+};
+
+const DefaultLineStyle = {
+    strokeWidth: 2,
+    strokeColor: '#000'
+};
+
+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)) {
+            const shape = node.shape;
+            let client = getRectangleByPoints(node.points);
+            client = RectangleClient.getOutlineRectangle(client, offset);
+            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 lineShapeG = null;
+    let temporaryElement = null;
+    board.pointerDown = (event) => {
+        const createMode = getCreateMode(board);
+        const isLinePointer = PlaitBoard.isPointer(board, DrawPointerType.line);
+        if (isLinePointer && createMode === DrawCreateMode.draw) {
+            const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            start = point;
+            const hitElement = getHitOutlineGeometry(board, point, -4);
+            if (hitElement) {
+                sourceRef.connection = transformPointToConnection(board, point, hitElement);
+                sourceRef.boundId = hitElement.id;
+            }
+            preventTouchMove(board, true);
+        }
+        pointerDown(event);
+    };
+    board.pointerMove = (event) => {
+        lineShapeG?.remove();
+        lineShapeG = createG();
+        const 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);
+            temporaryElement = createLineElement(LineShape.elbow, [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);
+        }
+        pointerMove(event);
+    };
+    board.pointerUp = (event) => {
+        if (temporaryElement) {
+            Transforms.insertNode(board, temporaryElement, [board.children.length]);
+            clearSelectedElement(board);
+            addSelectedElement(board, temporaryElement);
+            BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
+        }
+        lineShapeG?.remove();
+        lineShapeG = null;
+        start = null;
+        sourceRef = {};
+        targetRef = {};
+        temporaryElement = null;
+        preventTouchMove(board, false);
+        pointerUp(event);
+    };
+    return board;
+};
+
+const withGeometryResize = (board) => {
+    const { keydown, keyup } = board;
+    let isShift = false;
+    board.keydown = (event) => {
+        isShift = isKeyHotkey('shift', event);
+        keydown(event);
+    };
+    board.keyup = (event) => {
+        isShift = false;
+        keyup(event);
+    };
+    const options = {
+        key: 'draw-geometry',
+        canResize: () => {
+            return true;
+        },
+        detect: (point) => {
+            const selectedGeometryElements = getSelectedGeometryElements(board);
+            if (selectedGeometryElements.length !== 1) {
+                return null;
+            }
+            const target = selectedGeometryElements[0];
+            const targetComponent = PlaitElement.getComponent(selectedGeometryElements[0]);
+            if (targetComponent.activeGenerator.hasResizeHandle) {
+                const handleRef = getHitGeometryResizeHandleRef(board, target, point);
+                if (handleRef) {
+                    return {
+                        element: target,
+                        handle: handleRef.handle,
+                        cursorClass: handleRef.cursorClass
+                    };
+                }
+            }
+            return null;
+        },
+        onResize: (resizeRef, resizeState) => {
+            let points = [...resizeRef.element.points];
+            if (resizeRef.handle === ResizeHandle.nw) {
+                points = [resizeState.endTransformPoint, resizeRef.element.points[1]];
+            }
+            if (resizeRef.handle === ResizeHandle.ne) {
+                points = [
+                    [resizeRef.element.points[0][0], resizeState.endTransformPoint[1]],
+                    [resizeState.endTransformPoint[0], resizeRef.element.points[1][1]]
+                ];
+            }
+            if (resizeRef.handle === ResizeHandle.se) {
+                points = [resizeRef.element.points[0], resizeState.endTransformPoint];
+            }
+            if (resizeRef.handle === ResizeHandle.sw) {
+                points = [
+                    [resizeState.endTransformPoint[0], resizeRef.element.points[0][1]],
+                    [resizeRef.element.points[1][0], resizeState.endTransformPoint[1]]
+                ];
+            }
+            points = normalizeShapePoints(points, isShift);
+            const component = PlaitElement.getComponent(resizeRef.element);
+            const { height: textHeight } = component.textManage.getSize();
+            DrawTransforms.resizeGeometry(board, points, textHeight, resizeRef.path);
+        }
+    };
+    withResize(board, options);
+    return board;
+};
+
+var LineResizeHandle;
+(function (LineResizeHandle) {
+    LineResizeHandle["source"] = "source";
+    LineResizeHandle["target"] = "target";
+})(LineResizeHandle || (LineResizeHandle = {}));
+const getHitLineResizeHandleRef = (board, element, point) => {
+    const sourcePoint = getSourcePoint(board, element);
+    const targetPoint = getTargetPoint(board, element);
+    const sourceRectangle = {
+        x: sourcePoint[0] - RESIZE_HANDLE_DIAMETER / 2,
+        y: sourcePoint[1] - RESIZE_HANDLE_DIAMETER / 2,
+        width: RESIZE_HANDLE_DIAMETER,
+        height: RESIZE_HANDLE_DIAMETER
+    };
+    const targetRectangle = {
+        x: targetPoint[0] - RESIZE_HANDLE_DIAMETER / 2,
+        y: targetPoint[1] - RESIZE_HANDLE_DIAMETER / 2,
+        width: RESIZE_HANDLE_DIAMETER,
+        height: RESIZE_HANDLE_DIAMETER
+    };
+    const isHitSourceRectangle = RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), sourceRectangle);
+    const isHitTargetRectangle = RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), targetRectangle);
+    if (isHitSourceRectangle) {
+        return { rectangle: sourceRectangle, handle: LineResizeHandle.source };
+    }
+    if (isHitTargetRectangle) {
+        return { rectangle: targetRectangle, handle: LineResizeHandle.target };
+    }
+    return undefined;
+};
+
+const withLineResize = (board) => {
+    const options = {
+        key: 'draw-line',
+        canResize: () => {
+            return true;
+        },
+        detect: (point) => {
+            const selectedLineElements = getSelectedLineElements(board);
+            if (selectedLineElements.length > 0) {
+                let result = null;
+                selectedLineElements.forEach(value => {
+                    const handleRef = getHitLineResizeHandleRef(board, value, point);
+                    if (handleRef) {
+                        result = {
+                            element: value,
+                            handle: handleRef.handle
+                        };
+                    }
+                });
+                return result;
+            }
+            return null;
+        },
+        onResize: (resizeRef, resizeState) => {
+            let points = [...resizeRef.element.points];
+            let source = { ...resizeRef.element.source };
+            let target = { ...resizeRef.element.target };
+            if (resizeRef.handle === LineResizeHandle.source) {
+                points[0] = resizeState.endTransformPoint;
+                const hitElement = getHitOutlineGeometry(board, resizeState.endTransformPoint, -4);
+                source.connection = hitElement ? transformPointToConnection(board, resizeState.endTransformPoint, hitElement) : undefined;
+                source.boundId = hitElement ? hitElement.id : undefined;
+            }
+            if (resizeRef.handle === LineResizeHandle.target) {
+                points[1] = resizeState.endTransformPoint;
+                const hitElement = getHitOutlineGeometry(board, resizeState.endTransformPoint, -4);
+                target.connection = hitElement ? transformPointToConnection(board, resizeState.endTransformPoint, hitElement) : undefined;
+                target.boundId = hitElement ? hitElement.id : undefined;
+            }
+            DrawTransforms.resizeLine(board, { points, source, target }, resizeRef.path);
+        }
+    };
+    withResize(board, options);
+    return board;
+};
+
+const withLineBoundReaction = (board) => {
+    const { pointerMove, pointerUp } = board;
+    let boundShapeG = null;
+    board.pointerMove = (event) => {
+        boundShapeG?.remove();
+        const isLinePointer = PlaitBoard.isPointer(board, DrawPointerType.line);
+        const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const isLineResizing = isResizingByCondition(board, element => PlaitDrawElement.isLine(element));
+        if (isLinePointer || isLineResizing) {
+            const hitElement = getHitOutlineGeometry(board, movingPoint, -4);
+            if (hitElement) {
+                boundShapeG = drawBoundMask(board, hitElement);
+                const offset = (getStrokeWidthByElement(hitElement) + 1) / 2;
+                let nearestPoint = getNearestPoint(hitElement, movingPoint, offset);
+                const rectangle = getRectangleByPoints(hitElement.points);
+                const activeRectangle = RectangleClient.getOutlineRectangle(rectangle, -offset);
+                const hitConnector = getHitConnectorPoint(nearestPoint, hitElement, activeRectangle);
+                nearestPoint = hitConnector ? hitConnector : nearestPoint;
+                const circleG = drawCircle(PlaitBoard.getRoughSVG(board), nearestPoint, 6, {
+                    stroke: SELECTION_BORDER_COLOR,
+                    strokeWidth: 1,
+                    fill: SELECTION_BORDER_COLOR,
+                    fillStyle: 'solid'
+                });
+                boundShapeG.appendChild(circleG);
+                PlaitBoard.getElementActiveHost(board).append(boundShapeG);
+            }
+        }
+        pointerMove(event);
+    };
+    board.pointerUp = event => {
+        boundShapeG?.remove();
+        boundShapeG = null;
+        pointerUp(event);
+    };
+    return board;
+};
+
+const withLineText = (board) => {
+    const { dblclick } = board;
+    board.dblclick = (event) => {
+        const clickPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const hitTarget = getHitElements(board, { ranges: [{ anchor: clickPoint, focus: clickPoint }] }, (element) => {
+            return PlaitDrawElement.isLine(element);
+        })[0];
+        if (hitTarget) {
+            const points = getElbowPoints(board, hitTarget);
+            const point = getNearestPointBetweenPointAndSegments(clickPoint, points);
+            const texts = hitTarget.texts?.length ? [...hitTarget.texts] : [];
+            const textIndex = getHitLineTextIndex(board, hitTarget, clickPoint);
+            const isHitText = isHitLineText(board, hitTarget, clickPoint);
+            if (isHitText) {
+                editHandle(board, hitTarget, textIndex);
+            }
+            else {
+                const ratio = getRatioByPoint(points, point);
+                texts.push({
+                    text: buildText('文本'),
+                    position: ratio,
+                    width: 28,
+                    height: 20
+                });
+                DrawTransforms.setLineTexts(board, hitTarget, texts);
+                setTimeout(() => {
+                    const hitComponent = PlaitElement.getComponent(hitTarget);
+                    editHandle(board, hitTarget, hitComponent.textManages.length - 1, true);
+                });
+            }
+        }
+        dblclick(event);
+    };
+    return board;
+};
+function editHandle(board, element, manageIndex, isFirstEdit = false) {
+    const hitComponent = PlaitElement.getComponent(element);
+    const textManage = hitComponent.textManages[manageIndex];
+    const originText = textManage.componentRef.instance.children;
+    textManage.edit((origin, descendant) => {
+        const text = Node.string(descendant[0]);
+        const shouldRemove = (isFirstEdit && originText === descendant) || !text;
+        if (shouldRemove) {
+            DrawTransforms.removeLineText(board, element, manageIndex);
+        }
+    });
+}
+
+const withDraw = (board) => {
+    const { drawElement, getRectangle, isHitSelection, isMovable, dblclick } = board;
+    board.drawElement = (context) => {
+        if (PlaitDrawElement.isGeometry(context.element)) {
+            return GeometryComponent;
+        }
+        else if (PlaitDrawElement.isLine(context.element)) {
+            return LineComponent;
+        }
+        return drawElement(context);
+    };
+    board.getRectangle = (element) => {
+        if (PlaitDrawElement.isGeometry(element)) {
+            return getRectangleByPoints(element.points);
+        }
+        return getRectangle(element);
+    };
+    board.isHitSelection = (element, range) => {
+        if (PlaitDrawElement.isGeometry(element)) {
+            const client = getRectangleByPoints(element.points);
+            const rangeRectangle = RectangleClient.toRectangleClient([range.anchor, range.focus]);
+            if (element.textHeight > client.height) {
+                const textClient = getTextRectangle(element);
+                return RectangleClient.isHit(rangeRectangle, client) || RectangleClient.isHit(rangeRectangle, textClient);
+            }
+            return RectangleClient.isHit(rangeRectangle, client);
+        }
+        if (PlaitDrawElement.isLine(element)) {
+            const points = getElbowPoints(board, element);
+            const strokeWidth = getStrokeWidthByElement(element);
+            const isHitText = isHitLineText(board, element, range.focus);
+            const isHit = isHitPolyLine(points, range.focus, strokeWidth, 3) || isHitText;
+            const rangeRectangle = RectangleClient.toRectangleClient([range.anchor, range.focus]);
+            const isContainPolyLinePoint = points.some(point => {
+                return RectangleClient.isHit(rangeRectangle, RectangleClient.toRectangleClient([point, point]));
+            });
+            const isIntersect = range.anchor === range.focus ? isHit : isPolylineHitRectangle(points, rangeRectangle);
+            return isContainPolyLinePoint || isIntersect;
+        }
+        return isHitSelection(element, range);
+    };
+    board.isMovable = (element) => {
+        if (PlaitDrawElement.isGeometry(element)) {
+            return true;
+        }
+        if (PlaitDrawElement.isLine(element)) {
+            return !element.source.boundId && !element.source.boundId;
+        }
+        return isMovable(element);
+    };
+    board.dblclick = (event) => {
+        const element = getSelectedElements(board)[0];
+        if (element && PlaitDrawElement.isGeometry(element)) {
+            const component = PlaitElement.getComponent(element);
+            component.editText();
+        }
+        dblclick(event);
+    };
+    return withLineText(withLineBoundReaction(withLineResize(withGeometryResize(withLineCreateByDraw(withGeometryCreateByDrag(withGeometryCreateByDraw(withDrawFragment(withDrawHotkey(board)))))))));
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DefaultGeometryActiveStyle, DefaultGeometryProperty, DefaultGeometryStyle, DefaultTextProperty, DrawCreateMode, DrawPointerType, GeometryPointer, GeometryShape, GeometryThreshold, LineMarkerType, LineShape, PlaitDrawElement, PlaitGeometry, ShapeDefaultSpace, createGeometryElement, createLineElement, drawBoundMask, drawElbowLine, drawGeometry, drawLineArrow, getCenterPointsOnPolygon, getCreateMode, getElbowPoints, getHitConnectorPoint, getHitLineTextIndex, getLineTextRectangle, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedLineElements, getSourcePoint, getTargetPoint, getTextRectangle, isHitLineText, isHitPolyLine, normalizeConnection, setCreateMode, transformPointToConnection, withDraw };
+//# sourceMappingURL=plait-draw.mjs.map