@plait/draw 0.37.0 → 0.38.0

package/fesm2022/plait-draw.mjs

@@ -1,11 +1,11 @@
-import { PlaitElement, ACTIVE_STROKE_WIDTH, ThemeColorMode, PlaitBoard, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, RectangleClient, isPointInEllipse, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, createG, transformPoint, toPoint, preventTouchMove, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, idCreator, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, distanceBetweenPointAndSegment, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, depthFirstRecursion, getIsRecursionFunc, getElementById, Direction, catmullRomFitting, distanceBetweenPointAndSegments, createMask, createRect, findElements, Point, getSelectedElements, isPolylineHitRectangle, PlaitNode, BOARD_TO_HOST, isSelectionMoving, RgbaToHEX, PlaitPluginElementComponent, setClipboardData, getDataFromClipboard, getHitElementByPoint, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER } from '@plait/core';
-import { getRectangleByPoints, Generator, isDndMode, isDrawingMode, normalizeShapePoints, RESIZE_HANDLE_DIAMETER, getExtendPoint, getFactorByPoints, getRectangleResizeHandleRefs, getMemorizedLatest, memorizeLatest, getDirectionByVector, getOppositeDirection, getDirectionFactor, DEFAULT_ROUTE_MARGIN, reduceRouteMargin, getNextPoint, generateElbowLineRoute, getPoints, removeDuplicatePoints, getPointByVector, getPointOnPolyline, getDirectionByPointOfRectangle, rotateVectorAnti90, TRANSPARENT, PRIMARY_COLOR, CommonPluginElement, ActiveGenerator, WithTextPluginKey, isVirtualKey, isDelete, isSpaceHotkey, acceptImageTypes, getElementOfFocusedImage, buildImage, ResizeHandle, withResize, isResizingByCondition, getRatioByPoint, ImageGenerator } from '@plait/common';
-import { TextManage, Alignment, buildText, DEFAULT_FONT_SIZE, getTextSize, AlignEditor, getTextFromClipboard } from '@plait/text';
-import { isKeyHotkey } from 'is-hotkey';
-import * as i0 from '@angular/core';
-import { NgZone, Component, ChangeDetectionStrategy } from '@angular/core';
+import { PlaitElement, ACTIVE_STROKE_WIDTH, ThemeColorMode, PlaitBoard, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, RectangleClient, isPointInEllipse, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, idCreator, createG, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, distanceBetweenPointAndSegment, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, depthFirstRecursion, getIsRecursionFunc, getElementById, Direction, catmullRomFitting, distanceBetweenPointAndSegments, createMask, createRect, findElements, Point, getSelectedElements, isPolylineHitRectangle, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, BOARD_TO_HOST, transformPoint, toPoint, isSelectionMoving, RgbaToHEX, PlaitPluginElementComponent, preventTouchMove, BoardTransforms, PlaitPointerType, setClipboardData, getDataFromClipboard, getHitElementByPoint, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER } from '@plait/core';
+import { getRectangleByPoints, RESIZE_HANDLE_DIAMETER, getExtendPoint, getFactorByPoints, Generator, getRectangleResizeHandleRefs, getMemorizedLatest, memorizeLatest, getDirectionByVector, getOppositeDirection, getDirectionFactor, DEFAULT_ROUTE_MARGIN, reduceRouteMargin, getNextPoint, generateElbowLineRoute, getPoints, removeDuplicatePoints, getPointByVector, getPointOnPolyline, getDirectionByPointOfRectangle, rotateVectorAnti90, TRANSPARENT, normalizeShapePoints, PRIMARY_COLOR, CommonPluginElement, ActiveGenerator, WithTextPluginKey, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, acceptImageTypes, getElementOfFocusedImage, buildImage, ResizeHandle, withResize, isResizingByCondition, getRatioByPoint, ImageGenerator } from '@plait/common';
+import { Alignment, buildText, DEFAULT_FONT_SIZE, getTextSize, AlignEditor, TextManage, getTextFromClipboard } from '@plait/text';
 import { pointsOnBezierCurves } from 'points-on-curve';
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, NgZone } from '@angular/core';
 import { Subject } from 'rxjs';
+import { isKeyHotkey } from 'is-hotkey';
 import { Node } from 'slate';
 
 var BasicShapes;
@@ -1200,208 +1200,6 @@ const getShape = (value) => {
     return value.shape;
 };
 
-class GeometryShapeGenerator extends Generator {
-    canDraw(element, data) {
-        return true;
-    }
-    draw(element, data) {
-        const rectangle = getRectangleByPoints(element.points);
-        const shape = element.shape;
-        if (shape === BasicShapes.text) {
-            return;
-        }
-        const strokeWidth = getStrokeWidthByElement(element);
-        const strokeColor = getStrokeColorByElement(this.board, element);
-        const fill = getFillByElement(this.board, element);
-        const strokeLineDash = getLineDashByElement(element);
-        return drawGeometry(this.board, RectangleClient.inflate(rectangle, -strokeWidth), shape, {
-            stroke: strokeColor,
-            strokeWidth,
-            fill,
-            strokeLineDash
-        });
-    }
-}
-
-const withGeometryCreateByDrag = (board) => {
-    const { pointerMove, pointerUp } = board;
-    let geometryShapeG = null;
-    let temporaryElement = null;
-    let fakeCreateTextRef = null;
-    board.pointerMove = (event) => {
-        geometryShapeG?.remove();
-        geometryShapeG = createG();
-        const geometryGenerator = new GeometryShapeGenerator(board);
-        const geometryPointers = getGeometryPointers();
-        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
-        const dragMode = isGeometryPointer && isDndMode(board);
-        const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        const pointer = PlaitBoard.getPointer(board);
-        if (dragMode) {
-            const memorizedLatest = getMemorizedLatestByPointer(pointer);
-            if (pointer === BasicShapes.text) {
-                const points = getDefaultGeometryPoints(board, pointer, movingPoint, memorizedLatest.textProperties['font-size']);
-                temporaryElement = createGeometryElement(board, BasicShapes.text, points, DefaultTextProperty.text, memorizedLatest.geometryProperties, memorizedLatest.textProperties);
-                if (!fakeCreateTextRef) {
-                    const textManage = new TextManage(board, PlaitBoard.getComponent(board).viewContainerRef, {
-                        getRectangle: () => {
-                            return getTextRectangle(temporaryElement);
-                        }
-                    });
-                    PlaitBoard.getComponent(board)
-                        .viewContainerRef.injector.get(NgZone)
-                        .run(() => {
-                        textManage.draw(temporaryElement.text);
-                    });
-                    fakeCreateTextRef = {
-                        g: createG(),
-                        textManage
-                    };
-                    PlaitBoard.getHost(board).append(fakeCreateTextRef.g);
-                    fakeCreateTextRef.g.append(textManage.g);
-                }
-                else {
-                    fakeCreateTextRef.textManage.updateRectangle();
-                    fakeCreateTextRef.g.append(fakeCreateTextRef.textManage.g);
-                }
-            }
-            else {
-                const points = getDefaultGeometryPoints(board, pointer, movingPoint);
-                temporaryElement = createGeometryElement(board, pointer, points, '', {
-                    strokeWidth: DefaultBasicShapeProperty.strokeWidth,
-                    ...memorizedLatest.geometryProperties
-                }, memorizedLatest.textProperties);
-                geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
-                PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
-            }
-        }
-        pointerMove(event);
-    };
-    board.pointerUp = (event) => {
-        const geometryPointers = getGeometryPointers();
-        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
-        const dragMode = isGeometryPointer && isDndMode(board);
-        if (dragMode && temporaryElement) {
-            insertElement(board, temporaryElement);
-            fakeCreateTextRef?.textManage.destroy();
-            fakeCreateTextRef?.g.remove();
-            fakeCreateTextRef = null;
-        }
-        geometryShapeG?.remove();
-        geometryShapeG = null;
-        preventTouchMove(board, event, false);
-        pointerUp(event);
-    };
-    return board;
-};
-const withGeometryCreateByDrawing = (board) => {
-    const { pointerDown, pointerMove, pointerUp, keydown, keyup } = board;
-    let start = null;
-    let geometryShapeG = null;
-    let temporaryElement = null;
-    let isShift = false;
-    board.keydown = (event) => {
-        isShift = isKeyHotkey('shift', event);
-        keydown(event);
-    };
-    board.keyup = (event) => {
-        isShift = false;
-        keyup(event);
-    };
-    board.pointerDown = (event) => {
-        const geometryPointers = getGeometryPointers();
-        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
-        if (!PlaitBoard.isReadonly(board) && isGeometryPointer && isDrawingMode(board)) {
-            const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-            start = point;
-            const pointer = PlaitBoard.getPointer(board);
-            preventTouchMove(board, event, true);
-            if (pointer === BasicShapes.text) {
-                const memorizedLatest = getMemorizedLatestByPointer(pointer);
-                const points = getDefaultGeometryPoints(board, pointer, point, memorizedLatest.textProperties['font-size']);
-                const textElement = createGeometryElement(board, BasicShapes.text, points, DefaultTextProperty.text, memorizedLatest.geometryProperties, memorizedLatest.textProperties);
-                Transforms.insertNode(board, textElement, [board.children.length]);
-                clearSelectedElement(board);
-                addSelectedElement(board, textElement);
-                BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
-                start = null;
-            }
-        }
-        pointerDown(event);
-    };
-    board.pointerMove = (event) => {
-        geometryShapeG?.remove();
-        geometryShapeG = createG();
-        const geometryGenerator = new GeometryShapeGenerator(board);
-        const drawMode = !!start;
-        const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        const pointer = PlaitBoard.getPointer(board);
-        if (drawMode && pointer !== BasicShapes.text) {
-            const points = normalizeShapePoints([start, movingPoint], isShift);
-            const memorizedLatest = getMemorizedLatestByPointer(pointer);
-            temporaryElement = createGeometryElement(board, pointer, points, '', {
-                strokeWidth: DefaultBasicShapeProperty.strokeWidth,
-                ...memorizedLatest.geometryProperties
-            }, memorizedLatest.textProperties);
-            geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
-            PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
-        }
-        pointerMove(event);
-    };
-    board.pointerUp = (event) => {
-        const isDrawMode = !!start;
-        if (isDrawMode) {
-            const targetPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-            const { width, height } = RectangleClient.toRectangleClient([start, targetPoint]);
-            if (Math.hypot(width, height) === 0) {
-                const pointer = PlaitBoard.getPointer(board);
-                const points = getDefaultGeometryPoints(board, pointer, targetPoint);
-                if (pointer !== BasicShapes.text) {
-                    const memorizedLatest = getMemorizedLatestByPointer(pointer);
-                    temporaryElement = createGeometryElement(board, pointer, points, '', {
-                        strokeWidth: DefaultBasicShapeProperty.strokeWidth,
-                        ...memorizedLatest.geometryProperties
-                    }, memorizedLatest.textProperties);
-                }
-            }
-        }
-        if (temporaryElement) {
-            insertElement(board, temporaryElement);
-        }
-        geometryShapeG?.remove();
-        geometryShapeG = null;
-        start = null;
-        temporaryElement = null;
-        preventTouchMove(board, event, false);
-        pointerUp(event);
-    };
-    return board;
-};
-const getDefaultGeometryPoints = (board, pointer, targetPoint, fontSize) => {
-    const defaultProperty = getGeometryDefaultProperty(board, pointer, fontSize);
-    return getPointsByCenterPoint(targetPoint, defaultProperty.width, defaultProperty.height);
-};
-const getGeometryDefaultProperty = (board, pointer, fontSize) => {
-    const isText = pointer === BasicShapes.text;
-    const isFlowChart = getFlowchartPointers().includes(pointer);
-    if (isText) {
-        return getDefaultTextShapeProperty(board, fontSize);
-    }
-    else if (isFlowChart) {
-        return getDefaultFlowchartProperty(pointer);
-    }
-    else {
-        return DefaultBasicShapeProperty;
-    }
-};
-const insertElement = (board, element) => {
-    memorizeLatestShape(board, element.shape);
-    Transforms.insertNode(board, element, [board.children.length]);
-    clearSelectedElement(board);
-    addSelectedElement(board, element);
-    BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
-};
-
 const DefaultLineStyle = {
     strokeWidth: 2,
     strokeColor: '#000'
@@ -1412,17 +1210,19 @@ const LINE_AUTO_COMPLETE_OPACITY = 0.6;
 const LINE_AUTO_COMPLETE_HOVERED_OPACITY = 0.8;
 const LINE_AUTO_COMPLETE_HOVERED_DIAMETER = 10;
 
-const createGeometryElement = (board, shape, points, text, options = {}, textProperties = {}) => {
+const createGeometryElement = (shape, points, text, options = {}, textProperties = {}) => {
     let textOptions = {};
     let alignment = Alignment.center;
+    let textHeight = DefaultTextProperty.height;
     if (shape === BasicShapes.text) {
         textOptions = { autoSize: true };
         alignment = undefined;
     }
     textProperties = { ...textProperties };
     textProperties?.align && (alignment = textProperties?.align);
+    textProperties?.textHeight && (textHeight = textProperties?.textHeight);
     delete textProperties?.align;
-    const textHeight = getDefaultTextShapeProperty(board, textProperties['font-size']).height;
+    delete textProperties?.textHeight;
     return {
         id: idCreator(),
         type: 'geometry',
@@ -1508,7 +1308,7 @@ const getEdgeOnPolygonByPoint = (corners, point) => {
 const getDefaultFlowchartProperty = (symbol) => {
     return DefaultFlowchartPropertyMap[symbol];
 };
-const createDefaultFlowchart = (board, point) => {
+const createDefaultFlowchart = (point) => {
     const decisionProperty = getDefaultFlowchartProperty(FlowchartSymbols.decision);
     const processProperty = getDefaultFlowchartProperty(FlowchartSymbols.process);
     const terminalProperty = getDefaultFlowchartProperty(FlowchartSymbols.terminal);
@@ -1518,15 +1318,15 @@ const createDefaultFlowchart = (board, point) => {
     const lineOptions = {
         strokeWidth: DefaultLineStyle.strokeWidth
     };
-    const startElement = createGeometryElement(board, FlowchartSymbols.terminal, getDefaultGeometryPoints(board, FlowchartSymbols.terminal, point), '开始', options);
+    const startElement = createGeometryElement(FlowchartSymbols.terminal, getDefaultGeometryPoints(FlowchartSymbols.terminal, point), '开始', options);
     const processPoint1 = [point[0], point[1] + terminalProperty.height / 2 + 55 + processProperty.height / 2];
-    const processElement1 = createGeometryElement(board, FlowchartSymbols.process, getDefaultGeometryPoints(board, FlowchartSymbols.process, processPoint1), '过程', options);
+    const processElement1 = createGeometryElement(FlowchartSymbols.process, getDefaultGeometryPoints(FlowchartSymbols.process, processPoint1), '过程', options);
     const decisionPoint = [processPoint1[0], processPoint1[1] + processProperty.height / 2 + 55 + decisionProperty.height / 2];
-    const decisionElement = createGeometryElement(board, FlowchartSymbols.decision, getDefaultGeometryPoints(board, FlowchartSymbols.decision, decisionPoint), '过程', options);
+    const decisionElement = createGeometryElement(FlowchartSymbols.decision, getDefaultGeometryPoints(FlowchartSymbols.decision, decisionPoint), '过程', options);
     const processPoint2 = [decisionPoint[0] + decisionProperty.width / 2 + 75 + processProperty.width / 2, decisionPoint[1]];
-    const processElement2 = createGeometryElement(board, FlowchartSymbols.process, getDefaultGeometryPoints(board, FlowchartSymbols.process, processPoint2), '过程', options);
+    const processElement2 = createGeometryElement(FlowchartSymbols.process, getDefaultGeometryPoints(FlowchartSymbols.process, processPoint2), '过程', options);
     const endPoint = [decisionPoint[0], decisionPoint[1] + decisionProperty.height / 2 + 95 + terminalProperty.height / 2];
-    const endElement = createGeometryElement(board, FlowchartSymbols.terminal, getDefaultGeometryPoints(board, FlowchartSymbols.terminal, endPoint), '结束', options);
+    const endElement = createGeometryElement(FlowchartSymbols.terminal, getDefaultGeometryPoints(FlowchartSymbols.terminal, endPoint), '结束', options);
     const line1 = createLineElement(LineShape.elbow, [
         [0, 0],
         [0, 0]
@@ -1592,6 +1392,23 @@ const getDefaultTextShapeProperty = (board, fontSize) => {
         text: '文本'
     };
 };
+const getDefaultGeometryPoints = (pointer, centerPoint) => {
+    const defaultProperty = getDefaultGeometryProperty(pointer);
+    return getPointsByCenterPoint(centerPoint, defaultProperty.width, defaultProperty.height);
+};
+const getDefaultGeometryProperty = (pointer) => {
+    const isFlowChart = getFlowchartPointers().includes(pointer);
+    if (isFlowChart) {
+        return getDefaultFlowchartProperty(pointer);
+    }
+    else {
+        return DefaultBasicShapeProperty;
+    }
+};
+const getDefaultTextPoints = (board, centerPoint, fontSize) => {
+    const property = getDefaultTextShapeProperty(board, fontSize);
+    return getPointsByCenterPoint(centerPoint, property.width, property.height);
+};
 
 const ARROW_LENGTH = 20;
 const drawLineArrow = (element, points, options) => {
@@ -1785,7 +1602,7 @@ const getMemorizedLatestByPointer = (pointer) => {
         memorizeKey = MemorizeKey.flowchart;
     }
     const properties = { ...getMemorizedLatest(memorizeKey) } || {};
-    const textProperties = properties.text || {};
+    const textProperties = { ...properties.text } || {};
     delete properties.text;
     return { textProperties, geometryProperties: properties };
 };
@@ -2372,8 +2189,31 @@ const PlaitDrawElement = {
     }
 };
 
+class GeometryShapeGenerator extends Generator {
+    canDraw(element, data) {
+        return true;
+    }
+    draw(element, data) {
+        const rectangle = getRectangleByPoints(element.points);
+        const shape = element.shape;
+        if (shape === BasicShapes.text) {
+            return;
+        }
+        const strokeWidth = getStrokeWidthByElement(element);
+        const strokeColor = getStrokeColorByElement(this.board, element);
+        const fill = getFillByElement(this.board, element);
+        const strokeLineDash = getLineDashByElement(element);
+        return drawGeometry(this.board, RectangleClient.inflate(rectangle, -strokeWidth), shape, {
+            stroke: strokeColor,
+            strokeWidth,
+            fill,
+            strokeLineDash
+        });
+    }
+}
+
 const insertGeometry = (board, points, shape) => {
-    let newElement = createGeometryElement(board, shape, points, '', {
+    let newElement = createGeometryElement(shape, points, '', {
         strokeWidth: DefaultBasicShapeProperty.strokeWidth
     });
     Transforms.insertNode(board, newElement, [board.children.length]);
@@ -2381,7 +2221,7 @@ const insertGeometry = (board, points, shape) => {
     addSelectedElement(board, newElement);
 };
 const insertText = (board, points, text = '文本') => {
-    let newElement = createGeometryElement(board, BasicShapes.text, points, text);
+    let newElement = createGeometryElement(BasicShapes.text, points, text);
     Transforms.insertNode(board, newElement, [board.children.length]);
     clearSelectedElement(board);
     addSelectedElement(board, newElement);
@@ -2952,6 +2792,173 @@ const withDrawHotkey = (board) => {
     return board;
 };
 
+const withGeometryCreateByDrag = (board) => {
+    const { pointerMove, pointerUp } = board;
+    let geometryShapeG = null;
+    let temporaryElement = null;
+    let fakeCreateTextRef = null;
+    board.pointerMove = (event) => {
+        geometryShapeG?.remove();
+        geometryShapeG = createG();
+        const geometryGenerator = new GeometryShapeGenerator(board);
+        const geometryPointers = getGeometryPointers();
+        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
+        const dragMode = isGeometryPointer && isDndMode(board);
+        const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const pointer = PlaitBoard.getPointer(board);
+        if (dragMode) {
+            const memorizedLatest = getMemorizedLatestByPointer(pointer);
+            if (pointer === BasicShapes.text) {
+                const property = getDefaultTextShapeProperty(board, memorizedLatest.textProperties['font-size']);
+                const points = getPointsByCenterPoint(movingPoint, property.width, property.height);
+                temporaryElement = createGeometryElement(BasicShapes.text, points, DefaultTextProperty.text, memorizedLatest.geometryProperties, { ...memorizedLatest.textProperties, textHeight: property.height });
+                if (!fakeCreateTextRef) {
+                    const textManage = new TextManage(board, PlaitBoard.getComponent(board).viewContainerRef, {
+                        getRectangle: () => {
+                            return getTextRectangle(temporaryElement);
+                        }
+                    });
+                    PlaitBoard.getComponent(board)
+                        .viewContainerRef.injector.get(NgZone)
+                        .run(() => {
+                        textManage.draw(temporaryElement.text);
+                    });
+                    fakeCreateTextRef = {
+                        g: createG(),
+                        textManage
+                    };
+                    PlaitBoard.getHost(board).append(fakeCreateTextRef.g);
+                    fakeCreateTextRef.g.append(textManage.g);
+                }
+                else {
+                    fakeCreateTextRef.textManage.updateRectangle();
+                    fakeCreateTextRef.g.append(fakeCreateTextRef.textManage.g);
+                }
+            }
+            else {
+                const points = getDefaultGeometryPoints(pointer, movingPoint);
+                const textHeight = getDefaultTextShapeProperty(board, memorizedLatest.textProperties['font-size']).height;
+                temporaryElement = createGeometryElement(pointer, points, '', {
+                    strokeWidth: DefaultBasicShapeProperty.strokeWidth,
+                    ...memorizedLatest.geometryProperties
+                }, { ...memorizedLatest.textProperties, textHeight });
+                geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
+                PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
+            }
+        }
+        pointerMove(event);
+    };
+    board.pointerUp = (event) => {
+        const geometryPointers = getGeometryPointers();
+        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
+        const dragMode = isGeometryPointer && isDndMode(board);
+        if (dragMode && temporaryElement) {
+            insertElement(board, temporaryElement);
+            fakeCreateTextRef?.textManage.destroy();
+            fakeCreateTextRef?.g.remove();
+            fakeCreateTextRef = null;
+        }
+        geometryShapeG?.remove();
+        geometryShapeG = null;
+        preventTouchMove(board, event, false);
+        pointerUp(event);
+    };
+    return board;
+};
+const withGeometryCreateByDrawing = (board) => {
+    const { pointerDown, pointerMove, pointerUp, keydown, keyup } = board;
+    let start = null;
+    let geometryShapeG = null;
+    let temporaryElement = null;
+    let isShift = false;
+    board.keydown = (event) => {
+        isShift = isKeyHotkey('shift', event);
+        keydown(event);
+    };
+    board.keyup = (event) => {
+        isShift = false;
+        keyup(event);
+    };
+    board.pointerDown = (event) => {
+        const geometryPointers = getGeometryPointers();
+        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
+        if (!PlaitBoard.isReadonly(board) && isGeometryPointer && isDrawingMode(board)) {
+            const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            start = point;
+            const pointer = PlaitBoard.getPointer(board);
+            preventTouchMove(board, event, true);
+            if (pointer === BasicShapes.text) {
+                const memorizedLatest = getMemorizedLatestByPointer(pointer);
+                const property = getDefaultTextShapeProperty(board, memorizedLatest.textProperties['font-size']);
+                const points = getPointsByCenterPoint(point, property.width, property.height);
+                const textElement = createGeometryElement(BasicShapes.text, points, DefaultTextProperty.text, memorizedLatest.geometryProperties, { ...memorizedLatest.textProperties, textHeight: property.height });
+                Transforms.insertNode(board, textElement, [board.children.length]);
+                clearSelectedElement(board);
+                addSelectedElement(board, textElement);
+                BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
+                start = null;
+            }
+        }
+        pointerDown(event);
+    };
+    board.pointerMove = (event) => {
+        geometryShapeG?.remove();
+        geometryShapeG = createG();
+        const geometryGenerator = new GeometryShapeGenerator(board);
+        const drawMode = !!start;
+        const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const pointer = PlaitBoard.getPointer(board);
+        if (drawMode && pointer !== BasicShapes.text) {
+            const points = normalizeShapePoints([start, movingPoint], isShift);
+            const memorizedLatest = getMemorizedLatestByPointer(pointer);
+            const textHeight = getDefaultTextShapeProperty(board, memorizedLatest.textProperties['font-size']).height;
+            temporaryElement = createGeometryElement(pointer, points, '', {
+                strokeWidth: DefaultBasicShapeProperty.strokeWidth,
+                ...memorizedLatest.geometryProperties
+            }, { ...memorizedLatest.textProperties, textHeight });
+            geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
+            PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
+        }
+        pointerMove(event);
+    };
+    board.pointerUp = (event) => {
+        const isDrawMode = !!start;
+        if (isDrawMode) {
+            const targetPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            const { width, height } = RectangleClient.toRectangleClient([start, targetPoint]);
+            if (Math.hypot(width, height) === 0) {
+                const pointer = PlaitBoard.getPointer(board);
+                if (pointer !== BasicShapes.text) {
+                    const points = getDefaultGeometryPoints(pointer, targetPoint);
+                    const memorizedLatest = getMemorizedLatestByPointer(pointer);
+                    const textHeight = getDefaultTextShapeProperty(board, memorizedLatest.textProperties['font-size']).height;
+                    temporaryElement = createGeometryElement(pointer, points, '', {
+                        strokeWidth: DefaultBasicShapeProperty.strokeWidth,
+                        ...memorizedLatest.geometryProperties
+                    }, { ...memorizedLatest.textProperties, textHeight });
+                }
+            }
+        }
+        if (temporaryElement) {
+            insertElement(board, temporaryElement);
+        }
+        geometryShapeG?.remove();
+        geometryShapeG = null;
+        start = null;
+        temporaryElement = null;
+        preventTouchMove(board, event, false);
+        pointerUp(event);
+    };
+    return board;
+};
+const insertElement = (board, element) => {
+    memorizeLatestShape(board, element.shape);
+    Transforms.insertNode(board, element, [board.children.length]);
+    clearSelectedElement(board);
+    addSelectedElement(board, element);
+    BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
+};
+
 const buildClipboardData = (board, elements, startPoint) => {
     return elements.map(element => {
         if (PlaitDrawElement.isGeometry(element) || PlaitDrawElement.isImage(element)) {
@@ -3672,5 +3679,5 @@ const withDraw = (board) => {
  * Generated bundle index. Do not edit.
  */
 
-export { BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultBasicShapeProperty, DefaultConnectorProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultGeometryActiveStyle, DefaultGeometryStyle, DefaultManualInputProperty, DefaultMergeProperty, DefaultTextProperty, DrawThemeColors, DrawTransforms, FlowchartSymbols, GeometryComponent, GeometryThreshold, LineComponent, LineHandleKey, LineMarkerType, LineShape, MemorizeKey, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, REACTION_MARGIN, ShapeDefaultSpace, StrokeStyle, alignPoints, createDefaultFlowchart, createGeometryElement, createLineElement, drawBoundMask, drawGeometry, drawLine, getAutoCompletePoints, getBasicPointers, getBoardLines, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultFlowchartProperty, getDefaultTextShapeProperty, getDrawDefaultStrokeColor, getEdgeOnPolygonByPoint, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryPointers, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getHitLineTextIndex, getLineDashByElement, getLineHandleRefPair, getLineMemorizedLatest, getLinePointers, getLinePoints, getLineTextRectangle, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTextRectangle, getVectorByConnection, handleLineCreating, isHitDrawElement, isHitLineText, isHitPolyLine, isRectangleHitDrawElement, isTextExceedingBounds, memorizeLatestShape, memorizeLatestText, transformOpsToPoints, transformPointToConnection, withDraw };
+export { BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultBasicShapeProperty, DefaultConnectorProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultGeometryActiveStyle, DefaultGeometryStyle, DefaultManualInputProperty, DefaultMergeProperty, DefaultTextProperty, DrawThemeColors, DrawTransforms, FlowchartSymbols, GeometryComponent, GeometryThreshold, LineComponent, LineHandleKey, LineMarkerType, LineShape, MemorizeKey, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, REACTION_MARGIN, ShapeDefaultSpace, StrokeStyle, alignPoints, createDefaultFlowchart, createGeometryElement, createLineElement, drawBoundMask, drawGeometry, drawLine, getAutoCompletePoints, getBasicPointers, getBoardLines, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultTextPoints, getDefaultTextShapeProperty, getDrawDefaultStrokeColor, getEdgeOnPolygonByPoint, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryPointers, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getHitLineTextIndex, getLineDashByElement, getLineHandleRefPair, getLineMemorizedLatest, getLinePointers, getLinePoints, getLineTextRectangle, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTextRectangle, getVectorByConnection, handleLineCreating, isHitDrawElement, isHitLineText, isHitPolyLine, isRectangleHitDrawElement, isTextExceedingBounds, memorizeLatestShape, memorizeLatestText, transformOpsToPoints, transformPointToConnection, withDraw };
 //# sourceMappingURL=plait-draw.mjs.map