@plait/draw 0.1.0-next.10 → 0.1.0-next.11

package/fesm2015/plait-draw.mjs

@@ -1,1765 +0,0 @@
-import { PlaitElement, ACTIVE_STROKE_WIDTH, RectangleClient, PlaitBoard, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, isPointInEllipse, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, idCreator, createG, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, arrowPoints, createPath, drawLinearPath, distanceBetweenPointAndSegments, createMask, createRect, getElementById, findElements, getSelectedElements, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, Point, isSelectionMoving, PlaitPluginElementComponent, 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, getFactorByPoints, Direction, getDirectionByPoint, getPoints, getPointOnPolyline, getDirectionFactor, Generator, normalizeShapePoints, CommonPluginElement, ActiveGenerator, WithTextPluginKey, RESIZE_HANDLE_DIAMETER, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, 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) {
-        return PlaitGeometry.getTextManage(element).componentRef.instance.editor;
-    },
-    getTextManage(element) {
-        const component = PlaitElement.getComponent(element);
-        if (component) {
-            return component.textManage;
-        }
-        throw new Error('can not get correctly component in get text editor');
-    }
-};
-
-var LineMarkerType;
-(function (LineMarkerType) {
-    LineMarkerType["arrow"] = "arrow";
-    LineMarkerType["none"] = "none";
-    LineMarkerType["openTriangle"] = "open-triangle";
-    LineMarkerType["solidTriangle"] = "solid-triangle";
-    LineMarkerType["sharpArrow"] = "sharp-arrow";
-})(LineMarkerType || (LineMarkerType = {}));
-var LineShape;
-(function (LineShape) {
-    LineShape["straight"] = "straight";
-    LineShape["curve"] = "curve";
-    LineShape["elbow"] = "elbow";
-})(LineShape || (LineShape = {}));
-var LineHandleKey;
-(function (LineHandleKey) {
-    LineHandleKey["source"] = "source";
-    LineHandleKey["target"] = "target";
-})(LineHandleKey || (LineHandleKey = {}));
-const PlaitLine = {
-    getTextEditors(element) {
-        const component = PlaitElement.getComponent(element);
-        if (component) {
-            const manage = component.textManages.find(manage => manage.isEditing);
-            if (manage) {
-                return [manage.componentRef.instance.editor];
-            }
-            else {
-                return component.textManages.map(manage => manage.componentRef.instance.editor);
-            }
-        }
-        throw new Error('can not get correctly component in get text editor');
-    },
-    isSourceMark(line, markType) {
-        return line.source.marker === markType;
-    },
-    isTargetMark(line, markType) {
-        return line.target.marker === markType;
-    },
-    isBoundElementOfSource(line, element) {
-        return line.source.boundId === element.id;
-    },
-    isBoundElementOfTarget(line, element) {
-        return line.target.boundId === element.id;
-    }
-};
-
-var StrokeStyle;
-(function (StrokeStyle) {
-    StrokeStyle["solid"] = "solid";
-    StrokeStyle["dashed"] = "dashed";
-})(StrokeStyle || (StrokeStyle = {}));
-
-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: ACTIVE_STROKE_WIDTH,
-    selectionStrokeWidth: ACTIVE_STROKE_WIDTH
-};
-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) => {
-    if (PlaitDrawElement.isText(element)) {
-        return 0;
-    }
-    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 getStrokeStyleByElement = (element) => {
-    return element.strokeStyle || StrokeStyle.solid;
-};
-
-const DiamondEngine = {
-    draw(board, rectangle, options) {
-        const points = RectangleClient.getEdgeCenterPoints(rectangle);
-        const rs = PlaitBoard.getRoughSVG(board);
-        const polygon = rs.polygon(points, Object.assign(Object.assign({}, options), { fillStyle: 'solid' }));
-        setStrokeLinecap(polygon, 'round');
-        return polygon;
-    },
-    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, Object.assign(Object.assign({}, 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) * Math.pow(tx, 3)) / a;
-        const ey = ((b * b - a * a) * Math.pow(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);
-        const polygon = rs.polygon(points, Object.assign(Object.assign({}, options), { fillStyle: 'solid' }));
-        setStrokeLinecap(polygon, 'round');
-        return polygon;
-    },
-    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, Object.assign(Object.assign({}, 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, Object.assign(Object.assign({}, 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 Object.assign(Object.assign({ 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 strokeWidth = getStrokeWidthByElement(element);
-    const height = element.textHeight;
-    const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
-    return {
-        height,
-        width: width > 0 ? width : 0,
-        x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
-        y: elementRectangle.y + (elementRectangle.height - height) / 2
-    };
-};
-const drawBoundMask = (board, element) => {
-    const G = createG();
-    const rectangle = getRectangleByPoints(element.points);
-    const activeRectangle = RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH);
-    const 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, inflateDelta = 0) => {
-    const rectangle = getRectangleByPoints(element.points);
-    const activeRectangle = RectangleClient.inflate(rectangle, inflateDelta);
-    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 drawLineArrow = (element, points, options) => {
-    const arrowG = createG();
-    if (PlaitLine.isSourceMark(element, LineMarkerType.none) && PlaitLine.isTargetMark(element, LineMarkerType.none)) {
-        return null;
-    }
-    if (!PlaitLine.isSourceMark(element, LineMarkerType.none)) {
-        const sourceArrow = getArrow(element, element.source.marker, points[1], points[0], options);
-        sourceArrow && arrowG.appendChild(sourceArrow);
-    }
-    if (!PlaitLine.isTargetMark(element, LineMarkerType.none)) {
-        const arrow = getArrow(element, element.target.marker, points[points.length - 2], points[points.length - 1], options);
-        arrow && arrowG.appendChild(arrow);
-    }
-    return arrowG;
-};
-const getArrow = (element, marker, source, target, options) => {
-    let targetArrow;
-    switch (marker) {
-        case LineMarkerType.openTriangle: {
-            targetArrow = drawOpenTriangle(element, source, target, options);
-            break;
-        }
-        case LineMarkerType.solidTriangle: {
-            targetArrow = drawSolidTriangle(source, target, options);
-            break;
-        }
-        case LineMarkerType.arrow: {
-            targetArrow = drawArrow(element, source, target, options);
-            break;
-        }
-        case LineMarkerType.sharpArrow: {
-            targetArrow = drawSharpArrow(source, target, options);
-            break;
-        }
-    }
-    return targetArrow;
-};
-const drawSharpArrow = (source, target, options) => {
-    const directionFactor = getFactorByPoints(source, target);
-    const startPoint = target;
-    // const startPoint: Point = [
-    //     target[0],
-    //     target[1]
-    // ];
-    const { pointLeft, pointRight } = arrowPoints(source, target, 12, 20);
-    const g = createG();
-    const path = createPath();
-    let polylinePath = `M${pointRight[0]},${pointRight[1]}A8,8,20,0,1,${pointLeft[0]},${pointLeft[1]}L${startPoint[0]},${startPoint[1]}Z`;
-    path.setAttribute('d', polylinePath);
-    path.setAttribute('stroke', `${options === null || options === void 0 ? void 0 : options.stroke}`);
-    path.setAttribute('stroke-width', `${options === null || options === void 0 ? void 0 : options.strokeWidth}`);
-    path.setAttribute('fill', `${options === null || options === void 0 ? void 0 : options.stroke}`);
-    g.appendChild(path);
-    return g;
-};
-const drawArrow = (element, source, target, options) => {
-    const directionFactor = getFactorByPoints(source, target);
-    const strokeWidth = getStrokeWidthByElement(element);
-    const endPoint = [
-        target[0] + strokeWidth * directionFactor.x / 2,
-        target[1] + strokeWidth * directionFactor.y / 2
-    ];
-    const middlePoint = [endPoint[0] - 8 * directionFactor.x, endPoint[1] - 8 * directionFactor.y];
-    const { pointLeft, pointRight } = arrowPoints(source, endPoint, 12, 30);
-    const arrowG = drawLinearPath([pointLeft, endPoint, pointRight, middlePoint], Object.assign(Object.assign({}, options), { fill: options.stroke }), true);
-    const path = arrowG.querySelector('path');
-    path.setAttribute('stroke-linejoin', 'round');
-    return arrowG;
-};
-const drawSolidTriangle = (source, target, options) => {
-    const endPoint = target;
-    const { pointLeft, pointRight } = arrowPoints(source, endPoint, 12, 30);
-    return drawLinearPath([pointLeft, endPoint, pointRight], Object.assign(Object.assign({}, options), { fill: options.stroke }), true);
-};
-const drawOpenTriangle = (element, source, target, options) => {
-    const directionFactor = getFactorByPoints(source, target);
-    const strokeWidth = getStrokeWidthByElement(element);
-    const endPoint = [
-        target[0] + strokeWidth * directionFactor.x / 2,
-        target[1] + strokeWidth * directionFactor.y / 2
-    ];
-    const { pointLeft, pointRight } = arrowPoints(source, endPoint, 12, 40);
-    return drawLinearPath([pointLeft, endPoint, pointRight], options);
-};
-
-const createLineElement = (shape, points, source, target, options) => {
-    return Object.assign({ id: idCreator(), type: 'line', shape,
-        source, texts: [], target, opacity: 1, points }, options);
-};
-const getLinePoints = (board, element) => {
-    return element.shape === LineShape.elbow ? getElbowPoints(board, element) : getStraightPoints(board, element);
-};
-const getStraightPoints = (board, element) => {
-    return [getSourcePoint(board, element), getTargetPoint(board, element)];
-};
-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 drawLine = (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 = getLinePoints(board, element);
-    const line = drawLinearPath(points, options);
-    const id = idCreator();
-    line.setAttribute('mask', `url(#${id})`);
-    lineG.appendChild(line);
-    const { mask, maskTargetFillRect } = drawMask(board, element, id);
-    lineG.appendChild(mask);
-    line.appendChild(maskTargetFillRect);
-    const arrow = drawLineArrow(element, points, { stroke: strokeColor, strokeWidth });
-    arrow && lineG.appendChild(arrow);
-    return lineG;
-};
-function drawMask(board, element, id) {
-    const mask = createMask();
-    mask.setAttribute('id', id);
-    const points = getLinePoints(board, element);
-    let rectangle = getRectangleByPoints(points);
-    rectangle = RectangleClient.getOutlineRectangle(rectangle, -30);
-    const maskFillRect = createRect(rectangle, {
-        fill: 'white'
-    });
-    mask.appendChild(maskFillRect);
-    const texts = element.texts;
-    texts.forEach((text, index) => {
-        const textRectangle = getLineTextRectangle(board, element, index);
-        const rect = createRect(textRectangle, {
-            fill: 'black'
-        });
-        mask.appendChild(rect);
-    });
-    //撑开 line
-    const maskTargetFillRect = createRect(rectangle);
-    maskTargetFillRect.setAttribute('opacity', '0');
-    return { mask, maskTargetFillRect };
-}
-const getSourcePoint = (board, element) => {
-    if (element.source.boundId) {
-        const strokeWidth = getStrokeWidthByElement(element);
-        const connectionOffset = PlaitLine.isSourceMark(element, LineMarkerType.none) ? 0 : strokeWidth;
-        const boundElement = getElementById(board, element.source.boundId);
-        return boundElement ? getConnectionPoint(boundElement, element.source.connection, connectionOffset) : element.points[0];
-    }
-    return element.points[0];
-};
-const getTargetPoint = (board, element) => {
-    if (element.target.boundId) {
-        const strokeWidth = getStrokeWidthByElement(element);
-        const connectionOffset = PlaitLine.isTargetMark(element, LineMarkerType.none) ? 0 : strokeWidth;
-        const boundElement = getElementById(board, element.target.boundId);
-        return boundElement
-            ? getConnectionPoint(boundElement, element.target.connection, connectionOffset)
-            : element.points[element.points.length - 1];
-    }
-    return element.points[element.points.length - 1];
-};
-const getConnectionPoint = (geometry, connection, offset) => {
-    const rectangle = getRectangleByPoints(geometry.points);
-    const directionFactor = getDirectionFactor(getDirectionByPoint(connection, Direction.bottom));
-    return [
-        rectangle.x + rectangle.width * connection[0] + directionFactor.x * offset,
-        rectangle.y + rectangle.height * connection[1] + directionFactor.y * offset
-    ];
-};
-const transformPointToConnection = (board, point, hitElement) => {
-    let rectangle = getRectangleByPoints(hitElement.points);
-    rectangle = RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH);
-    let nearestPoint = getNearestPoint(hitElement, point, ACTIVE_STROKE_WIDTH);
-    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 = getLinePoints(board, element);
-    const point = getPointOnPolyline(elbowPoints, text.position);
-    return {
-        x: point[0] - text.width / 2,
-        y: point[1] - text.height / 2,
-        width: text.width,
-        height: text.height
-    };
-};
-const getBoardLines = (board) => {
-    return findElements(board, {
-        match: (element) => PlaitDrawElement.isLine(element),
-        recursion: (element) => PlaitDrawElement.isDrawElement(element)
-    });
-};
-
-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 rectangle = 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, RectangleClient.inflate(rectangle, -strokeWidth), 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 = Object.assign({ 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 = Object.assign({ 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) => {
-    var _a;
-    const path = PlaitBoard.findPath(board, element);
-    const texts = ((_a = element.texts) === null || _a === void 0 ? void 0 : _a.length) ? [...element.texts] : [];
-    const newTexts = [...texts];
-    newTexts.splice(index, 1);
-    Transforms.setNode(board, { texts: newTexts }, path);
-};
-const setLineMark = (board, element, handleKey, marker) => {
-    const path = PlaitBoard.findPath(board, element);
-    let handle = handleKey === LineHandleKey.source ? element.source : element.target;
-    handle = Object.assign(Object.assign({}, handle), { marker });
-    Transforms.setNode(board, { [handleKey]: handle }, path);
-};
-
-const DrawTransforms = {
-    setText,
-    insertGeometry,
-    resizeGeometry,
-    insertText,
-    setTextSize,
-    resizeLine,
-    setLineTexts,
-    removeLineText,
-    setLineMark
-};
-
-class GeometryComponent extends CommonPluginElement {
-    get textManage() {
-        return this.getTextManages()[0];
-    }
-    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;
-                }
-            },
-            getStrokeOpacity: () => {
-                const selectedElements = getSelectedElements(this.board);
-                if (selectedElements.length === 1 && !isSelectionMoving(this.board)) {
-                    return 1;
-                }
-                else {
-                    return 0.5;
-                }
-            },
-            getRectangle: (element) => {
-                return getRectangleByPoints(element.points);
-            },
-            hasResizeHandle: () => {
-                const selectedElements = getSelectedElements(this.board);
-                if (PlaitBoard.hasBeenTextEditing(this.board) && PlaitDrawElement.isText(this.element)) {
-                    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() {
-        const plugins = this.board.getPluginOptions(WithTextPluginKey).textPlugins;
-        const manage = 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: () => {
-                var _a;
-                const width = getTextRectangle(this.element).width;
-                return ((_a = this.element) === null || _a === void 0 ? void 0 : _a.autoSize) ? GeometryThreshold.defaultTextMaxWidth : width;
-            },
-            textPlugins: plugins
-        });
-        this.initializeTextManages([manage]);
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.textManage.destroy();
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-}
-GeometryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: GeometryComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-GeometryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: GeometryComponent, selector: "plait-draw-geometry", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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:
-            case LineShape.straight:
-                lineG = drawLine(this.board, element);
-                break;
-            default:
-                break;
-        }
-        return lineG;
-    }
-}
-
-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() {
-        var _a;
-        if ((_a = this.element.texts) === null || _a === void 0 ? void 0 : _a.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() {
-        var _a;
-        if ((_a = this.element.texts) === null || _a === void 0 ? void 0 : _a.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();
-    }
-}
-LineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: LineComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-LineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: LineComponent, selector: "plait-draw-line", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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, dblclick } = board;
-    board.keydown = (event) => {
-        const selectedElements = getSelectedElements(board);
-        const isSingleSelection = selectedElements.length === 1;
-        const targetElement = selectedElements[0];
-        if (!isVirtualKey(event) &&
-            !isDelete(event) &&
-            !isSpaceHotkey(event) &&
-            isSingleSelection &&
-            PlaitDrawElement.isGeometry(targetElement)) {
-            event.preventDefault();
-            PlaitElement.getComponent(targetElement).editText();
-            return;
-        }
-        keydown(event);
-    };
-    board.dblclick = (event) => {
-        event.preventDefault();
-        const geometries = getSelectedGeometryElements(board);
-        if (geometries.length === 1) {
-            const component = PlaitElement.getComponent(geometries[0]);
-            component.editText();
-        }
-        dblclick(event);
-    };
-    return board;
-};
-
-const withGeometryCreateByDrag = (board) => {
-    const { pointerMove, pointerUp } = board;
-    let geometryShapeG = null;
-    board.pointerMove = (event) => {
-        geometryShapeG === null || geometryShapeG === void 0 ? void 0 : geometryShapeG.remove();
-        geometryShapeG = createG();
-        const geometryGenerator = new GeometryShapeGenerator(board);
-        const isGeometryPointer = PlaitBoard.isInPointer(board, GeometryPointer);
-        const dragMode = isGeometryPointer && isDndMode(board);
-        const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        const pointer = PlaitBoard.getPointer(board);
-        if (dragMode) {
-            const points = getDefaultGeometryPoints(pointer, movingPoint);
-            if (pointer === 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 && isDndMode(board);
-        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 === null || geometryShapeG === void 0 ? void 0 : geometryShapeG.remove();
-        geometryShapeG = null;
-        preventTouchMove(board, event, 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 isGeometryPointer = PlaitBoard.isInPointer(board, GeometryPointer);
-        if (isGeometryPointer && isDrawingMode(board)) {
-            const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-            start = point;
-            const pointer = PlaitBoard.getPointer(board);
-            preventTouchMove(board, event, true);
-            if (pointer === 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;
-            }
-        }
-        pointerDown(event);
-    };
-    board.pointerMove = (event) => {
-        geometryShapeG === null || geometryShapeG === void 0 ? void 0 : 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 === null || geometryShapeG === void 0 ? void 0 : geometryShapeG.remove();
-        geometryShapeG = null;
-        start = null;
-        temporaryElement = null;
-        preventTouchMove(board, event, 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 Object.assign(Object.assign({}, element), { points });
-        }
-        if (PlaitDrawElement.isLine(element)) {
-            let source = Object.assign({}, element.source);
-            let target = Object.assign({}, element.target);
-            if (element.source.boundId && !getElementById(board, element.source.boundId, elements)) {
-                delete source.boundId;
-                delete source.connection;
-            }
-            if (element.target.boundId && !getElementById(board, element.target.boundId, elements)) {
-                delete target.boundId;
-                delete target.connection;
-            }
-            const points = element.points.map(point => [point[0] - startPoint[0], point[1] - startPoint[1]]);
-            return Object.assign(Object.assign({}, element), { points, source, target });
-        }
-        return element;
-    });
-};
-const insertClipboardData = (board, elements, startPoint) => {
-    const lines = elements.filter(value => PlaitDrawElement.isLine(value));
-    const geometries = elements.filter(value => PlaitDrawElement.isGeometry(value));
-    geometries.forEach(element => {
-        const sourceLines = [];
-        const targetLines = [];
-        lines.forEach(line => {
-            if (PlaitLine.isBoundElementOfSource(line, element)) {
-                sourceLines.push(line);
-            }
-            if (PlaitLine.isBoundElementOfTarget(line, element)) {
-                targetLines.push(line);
-            }
-        });
-        element.id = idCreator();
-        // update lines
-        sourceLines.forEach(sourceLine => (sourceLine.source.boundId = element.id));
-        targetLines.forEach(targetLine => (targetLine.target.boundId = element.id));
-        element.points = element.points.map(point => [startPoint[0] + point[0], startPoint[1] + point[1]]);
-        Transforms.insertNode(board, element, [board.children.length]);
-    });
-    lines.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 { getDeletedFragment, setFragment, insertFragment } = board;
-    board.getDeletedFragment = (data) => {
-        const drawElements = getSelectedDrawElements(board);
-        if (drawElements.length) {
-            const lines = getBoardLines(board);
-            const geometryElements = drawElements.filter(value => PlaitDrawElement.isGeometry(value));
-            const lineElements = drawElements.filter(value => PlaitDrawElement.isLine(value));
-            const boundLineElements = lines.filter(line => geometryElements.find(geometry => PlaitLine.isBoundElementOfSource(line, geometry) || PlaitLine.isBoundElementOfTarget(line, geometry)));
-            data.push(...[...geometryElements, ...lineElements, ...boundLineElements.filter(line => !lineElements.includes(line))]);
-        }
-        return getDeletedFragment(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 isLinePointer = PlaitBoard.isPointer(board, DrawPointerType.line);
-        if (isLinePointer && isDrawingMode(board)) {
-            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, event, true);
-        }
-        pointerDown(event);
-    };
-    board.pointerMove = (event) => {
-        lineShapeG === null || lineShapeG === void 0 ? void 0 : 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 === null || sourceRef === void 0 ? void 0 : sourceRef.boundId }, { marker: LineMarkerType.arrow, connection: targetRef.connection, boundId: targetRef === null || targetRef === void 0 ? void 0 : 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 === null || lineShapeG === void 0 ? void 0 : lineShapeG.remove();
-        lineShapeG = null;
-        start = null;
-        sourceRef = {};
-        targetRef = {};
-        temporaryElement = null;
-        preventTouchMove(board, event, 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 || getSelectedElements(board).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];
-            const rectangle = getRectangleByPoints(resizeRef.element.points);
-            const ratio = rectangle.height / rectangle.width;
-            if (resizeRef.handle === ResizeHandle.nw) {
-                points = [resizeState.endTransformPoint, resizeRef.element.points[1]];
-            }
-            if (resizeRef.handle === ResizeHandle.ne) {
-                points = [resizeState.endTransformPoint, [resizeRef.element.points[0][0], resizeRef.element.points[1][1]]];
-            }
-            if (resizeRef.handle === ResizeHandle.se) {
-                points = [resizeState.endTransformPoint, resizeRef.element.points[0]];
-            }
-            if (resizeRef.handle === ResizeHandle.sw) {
-                points = [resizeState.endTransformPoint, [resizeRef.element.points[1][0], resizeRef.element.points[0][1]]];
-            }
-            if (isShift) {
-                const rectangle = getRectangleByPoints(points);
-                const factor = points[0][1] > points[1][1] ? 1 : -1;
-                const height = rectangle.width * ratio * factor;
-                points = [[resizeState.endTransformPoint[0], points[1][1] + height], points[1]];
-            }
-            points = normalizeShapePoints(points);
-            const { height: textHeight } = PlaitGeometry.getTextManage(resizeRef.element).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 = Object.assign({}, resizeRef.element.source);
-            let target = Object.assign({}, 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 === null || boundShapeG === void 0 ? void 0 : 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);
-                let nearestPoint = getNearestPoint(hitElement, movingPoint, ACTIVE_STROKE_WIDTH);
-                const rectangle = getRectangleByPoints(hitElement.points);
-                const activeRectangle = RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH);
-                const hitConnector = getHitConnectorPoint(nearestPoint, hitElement, activeRectangle);
-                nearestPoint = hitConnector ? hitConnector : nearestPoint;
-                const circleG = drawCircle(PlaitBoard.getRoughSVG(board), nearestPoint, 6, {
-                    stroke: SELECTION_BORDER_COLOR,
-                    strokeWidth: ACTIVE_STROKE_WIDTH,
-                    fill: SELECTION_BORDER_COLOR,
-                    fillStyle: 'solid'
-                });
-                boundShapeG.appendChild(circleG);
-                PlaitBoard.getElementActiveHost(board).append(boundShapeG);
-            }
-        }
-        pointerMove(event);
-    };
-    board.pointerUp = event => {
-        boundShapeG === null || boundShapeG === void 0 ? void 0 : boundShapeG.remove();
-        boundShapeG = null;
-        pointerUp(event);
-    };
-    return board;
-};
-
-const withLineText = (board) => {
-    const { dblclick } = board;
-    board.dblclick = (event) => {
-        var _a;
-        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 = getLinePoints(board, hitTarget);
-            const point = getNearestPointBetweenPointAndSegments(clickPoint, points);
-            const texts = ((_a = hitTarget.texts) === null || _a === void 0 ? void 0 : _a.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);
-        }
-        if (PlaitDrawElement.isLine(element)) {
-            const source = getSourcePoint(board, element);
-            const target = getTargetPoint(board, element);
-            return getRectangleByPoints([source, target]);
-        }
-        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 = getLinePoints(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.target.boundId;
-        }
-        return isMovable(element);
-    };
-    return withLineText(withLineBoundReaction(withLineResize(withGeometryResize(withLineCreateByDraw(withGeometryCreateByDrag(withGeometryCreateByDraw(withDrawFragment(withDrawHotkey(board)))))))));
-};
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { DefaultGeometryActiveStyle, DefaultGeometryProperty, DefaultGeometryStyle, DefaultTextProperty, DrawPointerType, DrawTransforms, GeometryComponent, GeometryPointer, GeometryShape, GeometryThreshold, LineComponent, LineHandleKey, LineMarkerType, LineShape, PlaitDrawElement, PlaitGeometry, PlaitLine, ShapeDefaultSpace, StrokeStyle, createGeometryElement, createLineElement, drawBoundMask, drawGeometry, drawLine, getBoardLines, getCenterPointsOnPolygon, getConnectionPoint, getElbowPoints, getFillByElement, getHitConnectorPoint, getHitLineTextIndex, getLineDashByElement, getLinePoints, getLineTextRectangle, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedLineElements, getSourcePoint, getStraightPoints, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTargetPoint, getTextRectangle, isHitLineText, isHitPolyLine, transformPointToConnection, withDraw };
-//# sourceMappingURL=plait-draw.mjs.map