@plait/core 0.50.1 → 0.51.0

package/fesm2022/plait-core.mjs

@@ -84,6 +84,165 @@ const sortElements = (board, elements) => {
     });
 };
 
+const RectangleClient = {
+    isHit: (origin, target) => {
+        return RectangleClient.isHitX(origin, target) && RectangleClient.isHitY(origin, target);
+    },
+    isHitX: (origin, target) => {
+        const minX = origin.x < target.x ? origin.x : target.x;
+        const maxX = origin.x + origin.width > target.x + target.width ? origin.x + origin.width : target.x + target.width;
+        // float calculate error( eg: 1.4210854715202004e-14 > 0)
+        if (Math.floor(maxX - minX - origin.width - target.width) <= 0) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    },
+    isHitY: (origin, target) => {
+        const minY = origin.y < target.y ? origin.y : target.y;
+        const maxY = origin.y + origin.height > target.y + target.height ? origin.y + origin.height : target.y + target.height;
+        // float calculate error( eg: 1.4210854715202004e-14 > 0)
+        if (Math.floor(maxY - minY - origin.height - target.height) <= 0) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    },
+    getPoints(rectangle) {
+        return [
+            [rectangle.x, rectangle.y],
+            [rectangle.x + rectangle.width, rectangle.y + rectangle.height]
+        ];
+    },
+    getRectangleByCenterPoint(point, width, height) {
+        return RectangleClient.getRectangleByPoint([point[0] - width / 2, point[1] - height / 2], width, height);
+    },
+    getRectangleByPoint(point, width, height) {
+        return {
+            x: point[0],
+            y: point[1],
+            width,
+            height
+        };
+    },
+    getRectangleByPoints(points) {
+        const xArray = points.map(ele => ele[0]);
+        const yArray = points.map(ele => ele[1]);
+        const xMin = Math.min(...xArray);
+        const xMax = Math.max(...xArray);
+        const yMin = Math.min(...yArray);
+        const yMax = Math.max(...yArray);
+        const rect = { x: xMin, y: yMin, width: xMax - xMin, height: yMax - yMin };
+        return rect;
+    },
+    getCornerPointsByPoints(points) {
+        const xArray = points.map(ele => ele[0]);
+        const yArray = points.map(ele => ele[1]);
+        const xMin = Math.min(...xArray);
+        const xMax = Math.max(...xArray);
+        const yMin = Math.min(...yArray);
+        const yMax = Math.max(...yArray);
+        return [
+            [xMin, yMin],
+            [xMax, yMin],
+            [xMax, yMax],
+            [xMin, yMax]
+        ];
+    },
+    getOutlineRectangle: (rectangle, offset) => {
+        return {
+            x: rectangle.x + offset,
+            y: rectangle.y + offset,
+            width: rectangle.width - offset * 2,
+            height: rectangle.height - offset * 2
+        };
+    },
+    inflate: (rectangle, delta) => {
+        const half = delta / 2;
+        return {
+            x: rectangle.x - half,
+            y: rectangle.y - half,
+            width: rectangle.width + half * 2,
+            height: rectangle.height + half * 2
+        };
+    },
+    isEqual: (rectangle, otherRectangle) => {
+        return (rectangle.x === otherRectangle.x &&
+            rectangle.y === otherRectangle.y &&
+            rectangle.width === otherRectangle.width &&
+            rectangle.height === otherRectangle.height);
+    },
+    getCornerPoints: (rectangle) => {
+        return [
+            [rectangle.x, rectangle.y],
+            [rectangle.x + rectangle.width, rectangle.y],
+            [rectangle.x + rectangle.width, rectangle.y + rectangle.height],
+            [rectangle.x, rectangle.y + rectangle.height]
+        ];
+    },
+    getCenterPoint: (rectangle) => {
+        return [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
+    },
+    getEdgeCenterPoints: (rectangle) => {
+        return [
+            [rectangle.x + rectangle.width / 2, rectangle.y],
+            [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
+            [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height],
+            [rectangle.x, rectangle.y + rectangle.height / 2]
+        ];
+    },
+    getConnectionPoint: (rectangle, point) => {
+        return [rectangle.x + rectangle.width * point[0], rectangle.y + rectangle.height * point[1]];
+    },
+    expand(rectangle, left, top = left, right = left, bottom = top) {
+        return {
+            x: rectangle.x - left,
+            y: rectangle.y - top,
+            width: rectangle.width + left + right,
+            height: rectangle.height + top + bottom
+        };
+    },
+    getGapCenter(rectangle1, rectangle2, isHorizontal) {
+        const axis = isHorizontal ? 'x' : 'y';
+        const side = isHorizontal ? 'width' : 'height';
+        const align = [rectangle1[axis], rectangle1[axis] + rectangle1[side], rectangle2[axis], rectangle2[axis] + rectangle2[side]];
+        const sortArr = align.sort((a, b) => a - b);
+        return (sortArr[1] + sortArr[2]) / 2;
+    },
+    isPointInRectangle(rectangle, point) {
+        const x = point[0], y = point[1];
+        return x > rectangle.x && x < rectangle.x + rectangle.width && y > rectangle.y && y < rectangle.y + rectangle.height;
+    },
+    getBoundingRectangle(rectangles) {
+        if (rectangles.length === 0) {
+            throw new Error('rectangles can not be empty array');
+        }
+        let minX = Number.MAX_VALUE;
+        let minY = Number.MAX_VALUE;
+        let maxX = Number.NEGATIVE_INFINITY;
+        let maxY = Number.NEGATIVE_INFINITY;
+        rectangles.forEach(rect => {
+            minX = Math.min(minX, rect.x);
+            minY = Math.min(minY, rect.y);
+            maxX = Math.max(maxX, rect.x + rect.width);
+            maxY = Math.max(maxY, rect.y + rect.height);
+        });
+        return {
+            x: minX,
+            y: minY,
+            width: maxX - minX,
+            height: maxY - minY
+        };
+    }
+};
+
+var PlaitPluginKey;
+(function (PlaitPluginKey) {
+    PlaitPluginKey["withSelection"] = "withSelection";
+})(PlaitPluginKey || (PlaitPluginKey = {}));
+
 const getHitElementsBySelection = (board, selection, match = () => true) => {
     const newSelection = selection || board.selection;
     const rectangleHitElements = [];
@@ -127,6 +286,17 @@ const getHitElementByPoint = (board, point, match = () => true) => {
     }, getIsRecursionFunc(board), true);
     return hitElement || rectangleHitElement;
 };
+const getHitSelectedElements = (board, point) => {
+    const selectedElements = getSelectedElements(board);
+    const targetRectangle = selectedElements.length > 0 && getRectangleByElements(board, selectedElements, false);
+    const isInTargetRectangle = targetRectangle && RectangleClient.isPointInRectangle(targetRectangle, point);
+    if (isInTargetRectangle) {
+        return selectedElements;
+    }
+    else {
+        return [];
+    }
+};
 const cacheSelectedElements = (board, selectedElements) => {
     const sortedElements = sortElements(board, selectedElements);
     BOARD_TO_SELECTED_ELEMENT.set(board, sortedElements);
@@ -357,6 +527,22 @@ function createRect(rectangle, options) {
 const setStrokeLinecap = (g, value) => {
     g.setAttribute('stroke-linecap', value);
 };
+const setTransformRotate = (g, rectangle, angle) => {
+    var centerX = rectangle.x + rectangle.width / 2;
+    var centerY = rectangle.y + rectangle.height / 2;
+    let cosTheta = Math.cos(angle);
+    let sinTheta = Math.sin(angle);
+    let transformMatrix = [
+        cosTheta,
+        sinTheta,
+        -sinTheta,
+        cosTheta,
+        centerX * (1 - cosTheta) + centerY * sinTheta,
+        centerY * (1 - cosTheta) - centerX * sinTheta
+    ];
+    let matrix = 'matrix(' + transformMatrix.join(',') + ')';
+    g.setAttribute('transform', `${matrix}`);
+};
 const setPathStrokeLinecap = (g, value) => {
     g.querySelectorAll('path').forEach(path => {
         path.setAttribute('stroke-linecap', value);
@@ -486,105 +672,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 const ELEMENT_TO_COMPONENT = new WeakMap();
 
-const RectangleClient = {
-    isHit: (origin, target) => {
-        return RectangleClient.isHitX(origin, target) && RectangleClient.isHitY(origin, target);
-    },
-    isHitX: (origin, target) => {
-        const minX = origin.x < target.x ? origin.x : target.x;
-        const maxX = origin.x + origin.width > target.x + target.width ? origin.x + origin.width : target.x + target.width;
-        // float calculate error( eg: 1.4210854715202004e-14 > 0)
-        if (Math.floor(maxX - minX - origin.width - target.width) <= 0) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    },
-    isHitY: (origin, target) => {
-        const minY = origin.y < target.y ? origin.y : target.y;
-        const maxY = origin.y + origin.height > target.y + target.height ? origin.y + origin.height : target.y + target.height;
-        // float calculate error( eg: 1.4210854715202004e-14 > 0)
-        if (Math.floor(maxY - minY - origin.height - target.height) <= 0) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    },
-    toRectangleClient: (points) => {
-        const xArray = points.map(ele => ele[0]);
-        const yArray = points.map(ele => ele[1]);
-        const xMin = Math.min(...xArray);
-        const xMax = Math.max(...xArray);
-        const yMin = Math.min(...yArray);
-        const yMax = Math.max(...yArray);
-        const rect = { x: xMin, y: yMin, width: xMax - xMin, height: yMax - yMin };
-        return rect;
-    },
-    getOutlineRectangle: (rectangle, offset) => {
-        return {
-            x: rectangle.x + offset,
-            y: rectangle.y + offset,
-            width: rectangle.width - offset * 2,
-            height: rectangle.height - offset * 2
-        };
-    },
-    inflate: (rectangle, delta) => {
-        const half = delta / 2;
-        return {
-            x: rectangle.x - half,
-            y: rectangle.y - half,
-            width: rectangle.width + half * 2,
-            height: rectangle.height + half * 2
-        };
-    },
-    isEqual: (rectangle, otherRectangle) => {
-        return (rectangle.x === otherRectangle.x &&
-            rectangle.y === otherRectangle.y &&
-            rectangle.width === otherRectangle.width &&
-            rectangle.height === otherRectangle.height);
-    },
-    getCornerPoints: (rectangle) => {
-        return [
-            [rectangle.x, rectangle.y],
-            [rectangle.x + rectangle.width, rectangle.y],
-            [rectangle.x + rectangle.width, rectangle.y + rectangle.height],
-            [rectangle.x, rectangle.y + rectangle.height]
-        ];
-    },
-    getEdgeCenterPoints: (rectangle) => {
-        return [
-            [rectangle.x + rectangle.width / 2, rectangle.y],
-            [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
-            [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height],
-            [rectangle.x, rectangle.y + rectangle.height / 2]
-        ];
-    },
-    getConnectionPoint: (rectangle, point) => {
-        return [rectangle.x + rectangle.width * point[0], rectangle.y + rectangle.height * point[1]];
-    },
-    expand(rectangle, left, top = left, right = left, bottom = top) {
-        return {
-            x: rectangle.x - left,
-            y: rectangle.y - top,
-            width: rectangle.width + left + right,
-            height: rectangle.height + top + bottom
-        };
-    },
-    getGapCenter(rectangle1, rectangle2, isHorizontal) {
-        const axis = isHorizontal ? 'x' : 'y';
-        const side = isHorizontal ? 'width' : 'height';
-        const align = [rectangle1[axis], rectangle1[axis] + rectangle1[side], rectangle2[axis], rectangle2[axis] + rectangle2[side]];
-        const sortArr = align.sort((a, b) => a - b);
-        return (sortArr[1] + sortArr[2]) / 2;
-    },
-    isPointInRectangle(rectangle, point) {
-        const x = point[0], y = point[1];
-        return x > rectangle.x && x < rectangle.x + rectangle.width && y > rectangle.y && y < rectangle.y + rectangle.height;
-    }
-};
-
 // https://stackoverflow.com/a/6853926/232122
 function distanceBetweenPointAndSegment(x, y, x1, y1, x2, y2) {
     const A = x - x1;
@@ -761,9 +848,6 @@ const isPointInRoundRectangle = (point, rectangle, radius) => {
     const isInCorner = handleLeftTop || handleLeftBottom || handleRightTop || handleRightBottom;
     return isInRectangle && !isInCorner;
 };
-const downScale = (number) => {
-    return Number(number.toFixed(2));
-};
 // https://gist.github.com/nicholaswmin/c2661eb11cad5671d816
 const catmullRomFitting = function (points) {
     const alpha = 0.5;
@@ -815,6 +899,42 @@ const catmullRomFitting = function (points) {
     }
     return result;
 };
+/**
+ * the result of slope is based on Cartesian coordinate system
+ * x, y are based on the position in the Cartesian coordinate system
+ */
+function getEllipseTangentSlope(x, y, a, b) {
+    if (Math.abs(y) === 0) {
+        return x > 0 ? -Infinity : Infinity;
+    }
+    const k = (-b * b * x) / (a * a * y);
+    return k;
+}
+/**
+ * x, y are based on the position in the Cartesian coordinate system
+ */
+function getVectorFromPointAndSlope(x, y, slope) {
+    if (slope === Infinity) {
+        return [0, -1];
+    }
+    else if (slope === -Infinity) {
+        return [0, 1];
+    }
+    let vector = [1, -slope];
+    if (y < 0) {
+        vector = [-vector[0], -vector[1]];
+    }
+    return vector;
+}
+/**
+ * The DOM likes values to be fixed to 3 decimal places
+ */
+function toDomPrecision(v) {
+    return +v.toFixed(4);
+}
+function toFixed(v) {
+    return +v.toFixed(2);
+}
 
 function isInPlaitBoard(board, x, y) {
     const plaitBoardElement = PlaitBoard.getBoardContainer(board);
@@ -875,7 +995,7 @@ function isNullOrUndefined(value) {
     return value === null || value === undefined;
 }
 /**
- * 规范 point
+ * get {x,y} point
  * @param point
  * @returns point
  */
@@ -1063,7 +1183,7 @@ const hotkeys = {
 
 function idCreator(length = 5) {
     // remove numeral
-    const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
+    const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz'; /**** Easily confusing characters are removed by default oOLl,9gq,Vv,Uu,I1****/
     const maxPosition = $chars.length;
     let key = '';
     for (let i = 0; i < length; i++) {
@@ -1532,17 +1652,29 @@ const setIsFromViewportChange = (board, state) => {
 };
 function scrollToRectangle(board, client) { }
 
-let timerId = null;
-const throttleRAF = (fn) => {
+const BOARD_TO_RAF = new WeakMap();
+const getTimerId = (board, key) => {
+    const state = getRAFState(board);
+    return state[key] || null;
+};
+const getRAFState = (board) => {
+    return BOARD_TO_RAF.get(board) || {};
+};
+const throttleRAF = (board, key, fn) => {
     const scheduleFunc = () => {
-        timerId = requestAnimationFrame(() => {
-            timerId = null;
+        let timerId = requestAnimationFrame(() => {
+            const value = BOARD_TO_RAF.get(board) || {};
+            value[key] = null;
+            BOARD_TO_RAF.set(board, value);
             fn();
         });
+        const state = getRAFState(board);
+        state[key] = timerId;
+        BOARD_TO_RAF.set(board, state);
     };
+    let timerId = getTimerId(board, key);
     if (timerId !== null) {
         cancelAnimationFrame(timerId);
-        timerId = null;
     }
     scheduleFunc();
 };
@@ -1580,18 +1712,13 @@ const getMovingElements = (board) => {
 const isMovingElements = (board) => {
     return (BOARD_TO_MOVING_ELEMENT.get(board) || []).length > 0;
 };
-const addMovingElements = (board, elements) => {
-    const movingElements = getMovingElements(board);
-    const newElements = elements.filter(item => !movingElements.find(movingElement => movingElement.key === item.key));
-    cacheMovingElements(board, [...movingElements, ...newElements]);
-    setDragging(board, true);
-};
 const removeMovingElements = (board) => {
     BOARD_TO_MOVING_ELEMENT.delete(board);
     setDragging(board, false);
 };
 const cacheMovingElements = (board, elements) => {
     BOARD_TO_MOVING_ELEMENT.set(board, elements);
+    setDragging(board, true);
 };
 
 const IMAGE_CONTAINER = 'plait-image-container';
@@ -2364,11 +2491,26 @@ const Point = {
     isEquals(point, otherPoint) {
         return point && otherPoint && point[0] === otherPoint[0] && point[1] === otherPoint[1];
     },
-    isHorizontalAlign(point, otherPoint, tolerance = 0) {
-        return point && otherPoint && Math.abs(point[1] - otherPoint[1]) <= tolerance;
+    isHorizontal(point, otherPoint, tolerance = 0) {
+        return point && otherPoint && Point.isOverHorizontal([point, otherPoint], tolerance);
+    },
+    isOverHorizontal(points, tolerance = 0) {
+        return points.every(point => Math.abs(point[1] - points[0][1]) <= tolerance);
+    },
+    isVertical(point, otherPoint, tolerance = 0) {
+        return point && otherPoint && Point.isOverVertical([point, otherPoint], tolerance);
+    },
+    isOverVertical(points, tolerance = 0) {
+        return points.every(point => Math.abs(point[0] - points[0][0]) <= tolerance);
+    },
+    isAlign(points, tolerance = 0) {
+        return Point.isOverHorizontal(points, tolerance) || Point.isOverVertical(points, tolerance);
     },
-    isVerticalAlign(point, otherPoint, tolerance = 0) {
-        return point && otherPoint && Math.abs(point[0] - otherPoint[0]) <= tolerance;
+    getOffsetX(point1, point2) {
+        return point2[0] - point1[0];
+    },
+    getOffsetY(point1, point2) {
+        return point2[1] - point1[1];
     }
 };
 
@@ -2381,11 +2523,6 @@ const Viewport = {
 const SAVING = new WeakMap();
 const MERGING = new WeakMap();
 
-var PlaitPluginKey;
-(function (PlaitPluginKey) {
-    PlaitPluginKey["withSelection"] = "withSelection";
-})(PlaitPluginKey || (PlaitPluginKey = {}));
-
 var ThemeColorMode;
 (function (ThemeColorMode) {
     ThemeColorMode["default"] = "default";
@@ -2443,19 +2580,11 @@ var Direction;
 })(Direction || (Direction = {}));
 
 function getRectangleByElements(board, elements, recursion) {
-    const boundaryBox = {
-        left: Number.MAX_VALUE,
-        top: Number.MAX_VALUE,
-        right: Number.NEGATIVE_INFINITY,
-        bottom: Number.NEGATIVE_INFINITY
-    };
-    const calcRectangleClient = (node) => {
+    const rectangles = [];
+    const callback = (node) => {
         const nodeRectangle = board.getRectangle(node);
         if (nodeRectangle) {
-            boundaryBox.left = Math.min(boundaryBox.left, nodeRectangle.x);
-            boundaryBox.top = Math.min(boundaryBox.top, nodeRectangle.y);
-            boundaryBox.right = Math.max(boundaryBox.right, nodeRectangle.x + nodeRectangle.width);
-            boundaryBox.bottom = Math.max(boundaryBox.bottom, nodeRectangle.y + nodeRectangle.height);
+            rectangles.push(nodeRectangle);
         }
         else {
             console.error(`can not get rectangle of element:`, node);
@@ -2463,13 +2592,16 @@ function getRectangleByElements(board, elements, recursion) {
     };
     elements.forEach(element => {
         if (recursion) {
-            depthFirstRecursion(element, node => calcRectangleClient(node), node => board.isRecursion(node));
+            depthFirstRecursion(element, node => callback(node), node => board.isRecursion(node));
         }
         else {
-            calcRectangleClient(element);
+            callback(element);
         }
     });
-    if (boundaryBox.left === Number.MAX_VALUE) {
+    if (rectangles.length > 0) {
+        return RectangleClient.getBoundingRectangle(rectangles);
+    }
+    else {
         return {
             x: 0,
             y: 0,
@@ -2477,12 +2609,6 @@ function getRectangleByElements(board, elements, recursion) {
             height: 0
         };
     }
-    return {
-        x: boundaryBox.left,
-        y: boundaryBox.top,
-        width: boundaryBox.right - boundaryBox.left,
-        height: boundaryBox.bottom - boundaryBox.top
-    };
 }
 function getBoardRectangle(board) {
     return getRectangleByElements(board, board.children, true);
@@ -2563,13 +2689,13 @@ const PlaitBoard = {
         return BOARD_TO_COMPONENT.get(board);
     },
     getBoardContainer(board) {
-        return PlaitBoard.getComponent(board).nativeElement;
+        return BOARD_TO_ELEMENT_HOST.get(board)?.container;
     },
     getRectangle(board) {
         return getRectangleByElements(board, board.children, true);
     },
     getViewportContainer(board) {
-        return PlaitBoard.getHost(board).parentElement;
+        return BOARD_TO_ELEMENT_HOST.get(board)?.viewportContainer;
     },
     isFocus(board) {
         return !!board.selection;
@@ -2785,7 +2911,7 @@ const NodeTransforms = {
 };
 
 function withSelection(board) {
-    const { pointerDown, pointerUp, pointerMove, globalPointerUp, keydown, keyup, onChange, afterChange } = board;
+    const { pointerDown, pointerUp, pointerMove, globalPointerUp, onChange, afterChange } = board;
     let start = null;
     let end = null;
     let selectionMovingG;
@@ -2807,9 +2933,12 @@ function withSelection(board) {
             event.preventDefault();
         }
         const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+        const selectedElements = getSelectedElements(board);
         const hitElement = getHitElementByPoint(board, point);
+        const hitSelectedElements = selectedElements.length > 1 ? getHitSelectedElements(board, point) : [];
+        const isHitTarget = hitElement || hitSelectedElements.length > 0;
         const options = board.getPluginOptions(PlaitPluginKey.withSelection);
-        if (PlaitBoard.isPointer(board, PlaitPointerType.selection) && !hitElement && options.isMultiple && !options.isDisabledSelect) {
+        if (PlaitBoard.isPointer(board, PlaitPointerType.selection) && !isHitTarget && options.isMultiple && !options.isDisabledSelect) {
             preventTouchMove(board, event, true);
             // start rectangle selection
             start = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
@@ -2823,11 +2952,11 @@ function withSelection(board) {
         }
         if (start && PlaitBoard.isPointer(board, PlaitPointerType.selection)) {
             const movedTarget = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-            const rectangle = RectangleClient.toRectangleClient([start, movedTarget]);
+            const rectangle = RectangleClient.getRectangleByPoints([start, movedTarget]);
             selectionMovingG?.remove();
             if (Math.hypot(rectangle.width, rectangle.height) > PRESS_AND_MOVE_BUFFER || isSelectionMoving(board)) {
                 end = movedTarget;
-                throttleRAF(() => {
+                throttleRAF(board, 'with-selection', () => {
                     if (start && end) {
                         Transforms.setSelection(board, { anchor: start, focus: end });
                     }
@@ -2849,7 +2978,7 @@ function withSelection(board) {
         const isSetSelectionPointer = PlaitBoard.isPointer(board, PlaitPointerType.selection) || PlaitBoard.isPointer(board, PlaitPointerType.hand);
         const isSkip = !isMainPointer(event) || isDragging(board) || !isSetSelectionPointer;
         if (isSkip) {
-            pointerDown(event);
+            pointerUp(event);
             return;
         }
         const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
@@ -2892,23 +3021,36 @@ function withSelection(board) {
         });
         if (isHandleSelection(board) && isSetSelectionOperation(board)) {
             try {
-                selectionRectangleG?.remove();
+                if (!isShift) {
+                    selectionRectangleG?.remove();
+                }
                 const temporaryElements = getTemporaryElements(board);
                 let elements = temporaryElements ? temporaryElements : getHitElementsBySelection(board);
                 if (!options.isMultiple && elements.length > 1) {
                     elements = [elements[0]];
                 }
-                if (isShift && board.selection && Selection.isCollapsed(board.selection)) {
-                    const newSelectedElements = [...getSelectedElements(board)];
-                    elements.forEach(element => {
-                        if (newSelectedElements.includes(element)) {
-                            newSelectedElements.splice(newSelectedElements.indexOf(element), 1);
-                        }
-                        else {
-                            newSelectedElements.push(element);
-                        }
-                    });
-                    cacheSelectedElements(board, newSelectedElements);
+                if (isShift) {
+                    if (board.selection && Selection.isCollapsed(board.selection)) {
+                        const newSelectedElements = [...getSelectedElements(board)];
+                        elements.forEach(element => {
+                            if (newSelectedElements.includes(element)) {
+                                newSelectedElements.splice(newSelectedElements.indexOf(element), 1);
+                            }
+                            else {
+                                newSelectedElements.push(element);
+                            }
+                        });
+                        cacheSelectedElements(board, newSelectedElements);
+                    }
+                    else {
+                        const newSelectedElements = [...getSelectedElements(board)];
+                        elements.forEach(element => {
+                            if (!newSelectedElements.includes(element)) {
+                                newSelectedElements.push(element);
+                            }
+                        });
+                        cacheSelectedElements(board, newSelectedElements);
+                    }
                 }
                 else {
                     const newSelectedElements = [...elements];
@@ -2918,6 +3060,7 @@ function withSelection(board) {
                 previousSelectedElements = newElements;
                 deleteTemporaryElements(board);
                 if (!isSelectionMoving(board) && newElements.length > 1) {
+                    selectionRectangleG?.remove();
                     selectionRectangleG = createSelectionRectangleG(board);
                 }
             }
@@ -3140,10 +3283,10 @@ function createBoard(children, options) {
         globalMousemove: (event) => { },
         mouseup: (event) => { },
         globalMouseup: (event) => { },
-        keydown: (event) => { },
-        globalKeydown: (event) => { },
-        keyup: (event) => { },
-        dblclick: (event) => { },
+        keyDown: (event) => { },
+        globalKeyDown: (event) => { },
+        keyUp: (event) => { },
+        dblClick: (event) => { },
         setFragment: (data, clipboardContext) => {
             setClipboardData(data, clipboardContext);
         },
@@ -3198,7 +3341,7 @@ function withBoard(board) {
 }
 
 function withHistory(board) {
-    const { apply, keydown } = board;
+    const { apply, keyDown } = board;
     board.history = { undos: [], redos: [] };
     board.redo = () => {
         const { history } = board;
@@ -3267,7 +3410,7 @@ function withHistory(board) {
         }
         apply(op);
     };
-    board.keydown = (event) => {
+    board.keyDown = (event) => {
         if (isHotkey('mod+z', event)) {
             board.undo();
             return;
@@ -3276,13 +3419,13 @@ function withHistory(board) {
             board.redo();
             return;
         }
-        keydown(event);
+        keyDown(event);
     };
     return board;
 }
 
 function withHandPointer(board) {
-    const { pointerDown, pointerMove, globalPointerUp, keydown, keyup } = board;
+    const { pointerDown, pointerMove, globalPointerUp, keyDown, keyUp } = board;
     let isMoving = false;
     const plaitBoardMove = {
         x: 0,
@@ -3317,20 +3460,20 @@ function withHandPointer(board) {
         }
         globalPointerUp(event);
     };
-    board.keydown = (event) => {
+    board.keyDown = (event) => {
         if (event.code === 'Space') {
             if (!PlaitBoard.isPointer(board, PlaitPointerType.hand)) {
                 BoardTransforms.updatePointerType(board, PlaitPointerType.hand);
             }
             event.preventDefault();
         }
-        keydown(event);
+        keyDown(event);
     };
-    board.keyup = (event) => {
+    board.keyUp = (event) => {
         if (!board.options.readonly && event.code === 'Space') {
             BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
         }
-        keyup(event);
+        keyUp(event);
     };
     return board;
 }
@@ -3740,29 +3883,32 @@ function withMoving(board) {
     let alignG = null;
     let activeElementsRectangle = null;
     board.pointerDown = (event) => {
+        if (PlaitBoard.isReadonly(board) ||
+            !PlaitBoard.isPointer(board, PlaitPointerType.selection) ||
+            isPreventTouchMove(board) ||
+            !isMainPointer(event)) {
+            pointerDown(event);
+        }
         const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-        let movableElements = board.children.filter(item => board.isMovable(item));
-        if (!PlaitBoard.isReadonly(board) &&
-            PlaitBoard.isPointer(board, PlaitPointerType.selection) &&
-            movableElements.length &&
-            !isPreventTouchMove(board) &&
-            isMainPointer(event)) {
+        const targetElements = getTargetElements(board);
+        const targetRectangle = targetElements.length > 0 && getRectangleByElements(board, targetElements, false);
+        const isInTargetRectangle = targetRectangle && RectangleClient.isPointInRectangle(targetRectangle, point);
+        if (isInTargetRectangle) {
             startPoint = point;
-            const selectedMovableElements = getSelectedElements(board).filter(item => movableElements.includes(item));
-            const hitElement = getHitElementByPoint(board, point);
-            if (hitElement && movableElements.includes(hitElement)) {
-                if (selectedMovableElements.includes(hitElement)) {
-                    const relatedElements = board.getRelatedFragment([]);
-                    activeElements = [...selectedMovableElements, ...relatedElements];
-                }
-                else {
-                    activeElements = [hitElement];
+            activeElements = targetElements;
+            preventTouchMove(board, event, true);
+            activeElementsRectangle = getRectangleByElements(board, activeElements, true);
+        }
+        else {
+            const targetElement = getHitElementByPoint(board, point, el => board.isMovable(el));
+            if (targetElement) {
+                startPoint = point;
+                activeElements = [targetElement];
+                if (targetElements.length > 0) {
+                    addSelectionWithTemporaryElements(board, []);
                 }
+                activeElementsRectangle = getRectangleByElements(board, activeElements, true);
             }
-            if (activeElements.length > 0) {
-                preventTouchMove(board, event, true);
-            }
-            activeElementsRectangle = getRectangleByElements(board, activeElements, true);
         }
         pointerDown(event);
     };
@@ -3777,7 +3923,7 @@ function withMoving(board) {
             offsetY = endPoint[1] - startPoint[1];
             const distance = distanceBetweenPointAndPoint(...endPoint, ...startPoint);
             if (distance > PRESS_AND_MOVE_BUFFER || getMovingElements(board).length > 0) {
-                throttleRAF(() => {
+                throttleRAF(board, 'with-moving', () => {
                     if (!activeElementsRectangle) {
                         return;
                     }
@@ -3794,19 +3940,9 @@ function withMoving(board) {
                     alignG.classList.add(ACTIVE_MOVING_CLASS_NAME);
                     PlaitBoard.getElementActiveHost(board).append(alignG);
                     handleTouchTarget(board);
-                    const currentElements = activeElements.map(activeElement => {
-                        const points = activeElement.points || [];
-                        const [x, y] = activeElement.points[0];
-                        const newPoints = points.map(p => [p[0] + offsetX, p[1] + offsetY]);
-                        const index = board.children.findIndex(item => item.id === activeElement.id);
-                        Transforms.setNode(board, {
-                            points: newPoints
-                        }, [index]);
-                        MERGING.set(board, true);
-                        return PlaitNode.get(board, [index]);
-                    });
+                    const currentElements = updatePoints(board, activeElements, offsetX, offsetY);
                     PlaitBoard.getBoardContainer(board).classList.add('element-moving');
-                    addMovingElements(board, currentElements);
+                    cacheMovingElements(board, currentElements);
                 });
             }
         }
@@ -3840,12 +3976,78 @@ function withMoving(board) {
         offsetX = 0;
         offsetY = 0;
         activeElements = [];
-        removeMovingElements(board);
+        if (isMovingElements(board)) {
+            removeMovingElements(board);
+        }
         MERGING.set(board, false);
         PlaitBoard.getBoardContainer(board).classList.remove('element-moving');
     }
+    return withArrowMoving(board);
+}
+function withArrowMoving(board) {
+    const { keyDown, keyUp } = board;
+    board.keyDown = (event) => {
+        const selectedElements = getSelectedElements(board);
+        if (!PlaitBoard.isReadonly(board) && selectedElements.length > 0 && (hotkeys.isArrow(event) || hotkeys.isExtendArrow(event))) {
+            event.preventDefault();
+            const isShift = event.shiftKey ? true : false;
+            const offset = [0, 0];
+            const buffer = isShift ? 10 : 1;
+            switch (true) {
+                case hotkeys.isMoveUp(event) || hotkeys.isExtendUp(event): {
+                    offset[1] = -buffer;
+                    break;
+                }
+                case hotkeys.isMoveDown(event) || hotkeys.isExtendDown(event): {
+                    offset[1] = buffer;
+                    break;
+                }
+                case hotkeys.isMoveBackward(event) || hotkeys.isExtendBackward(event): {
+                    offset[0] = -buffer;
+                    break;
+                }
+                case hotkeys.isMoveForward(event) || hotkeys.isExtendForward(event): {
+                    offset[0] = buffer;
+                    break;
+                }
+            }
+            const targetElements = getTargetElements(board);
+            throttleRAF(board, 'with-arrow-moving', () => {
+                updatePoints(board, targetElements, offset[0], offset[1]);
+            });
+        }
+        keyDown(event);
+    };
+    board.keyUp = (event) => {
+        MERGING.set(board, false);
+        keyUp(event);
+    };
     return board;
 }
+function getTargetElements(board) {
+    const selectedElements = getSelectedElements(board);
+    const movableElements = board.children.filter(item => board.isMovable(item));
+    const targetElements = selectedElements.filter(element => {
+        return movableElements.includes(element);
+    });
+    const relatedElements = board.getRelatedFragment([]);
+    targetElements.push(...relatedElements);
+    return targetElements;
+}
+function updatePoints(board, targetElements, offsetX, offsetY) {
+    const validElements = targetElements.filter(element => board.children.findIndex(item => item.id === element.id) > -1);
+    const currentElements = validElements.map(element => {
+        const points = element.points || [];
+        const newPoints = points.map(p => [p[0] + offsetX, p[1] + offsetY]);
+        const index = board.children.findIndex(item => item.id === element.id);
+        Transforms.setNode(board, {
+            points: newPoints
+        }, [index]);
+        MERGING.set(board, true);
+        return PlaitNode.get(board, [index]);
+    });
+    return currentElements;
+}
 
 const withOptions = (board) => {
     const pluginOptions = new Map();
@@ -3930,13 +4132,9 @@ const hasOnBoardChange = (value) => {
 };
 
 const withHotkey = (board) => {
-    const { keydown, keyup, globalKeydown } = board;
-    let isShift = false;
-    board.keydown = (event) => {
+    const { keyDown, keyUp, globalKeyDown } = board;
+    board.keyDown = (event) => {
         const options = board.getPluginOptions(PlaitPluginKey.withSelection);
-        if (hotkeys.isShift(event)) {
-            isShift = true;
-        }
         if (!PlaitBoard.isReadonly(board) && options.isMultiple && isHotkey('mod+a', event)) {
             event.preventDefault();
             let elements = [];
@@ -3963,54 +4161,12 @@ const withHotkey = (board) => {
             event.preventDefault();
             board.deleteFragment(null);
         }
-        if (!PlaitBoard.isReadonly(board) && selectedElements.length > 0 && (hotkeys.isArrow(event) || hotkeys.isExtendArrow(event))) {
-            event.preventDefault();
-            const offset = [0, 0];
-            const buffer = isShift ? 10 : 1;
-            switch (true) {
-                case hotkeys.isMoveUp(event) || hotkeys.isExtendUp(event): {
-                    offset[1] = -buffer;
-                    break;
-                }
-                case hotkeys.isMoveDown(event) || hotkeys.isExtendDown(event): {
-                    offset[1] = buffer;
-                    break;
-                }
-                case hotkeys.isMoveBackward(event) || hotkeys.isExtendBackward(event): {
-                    offset[0] = -buffer;
-                    break;
-                }
-                case hotkeys.isMoveForward(event) || hotkeys.isExtendForward(event): {
-                    offset[0] = buffer;
-                    break;
-                }
-            }
-            const selectedElements = getSelectedElements(board);
-            const relatedElements = board.getRelatedFragment([]);
-            const movableElements = board.children.filter(item => board.isMovable(item));
-            throttleRAF(() => {
-                [...selectedElements, ...relatedElements]
-                    .filter(element => movableElements.includes(element))
-                    .forEach(element => {
-                    const points = element.points || [];
-                    const newPoints = points.map(p => [p[0] + offset[0], p[1] + offset[1]]);
-                    Transforms.setNode(board, {
-                        points: newPoints
-                    }, PlaitBoard.findPath(board, element));
-                    MERGING.set(board, true);
-                });
-            });
-        }
-        keydown(event);
+        keyDown(event);
     };
-    board.keyup = (event) => {
-        if (event.key === 'Shift') {
-            isShift = false;
-        }
-        MERGING.set(board, false);
-        keyup(event);
+    board.keyUp = (event) => {
+        keyUp(event);
     };
-    board.globalKeydown = (event) => {
+    board.globalKeyDown = (event) => {
         if (PlaitBoard.getMovingPointInBoard(board) || PlaitBoard.isMovingPointInBoard(board)) {
             if (isHotkey(['mod+=', 'mod++'], { byKey: true })(event)) {
                 event.preventDefault();
@@ -4033,7 +4189,7 @@ const withHotkey = (board) => {
                 return;
             }
         }
-        globalKeydown(event);
+        globalKeyDown(event);
     };
     return board;
 };
@@ -4287,7 +4443,9 @@ class PlaitBoardComponent {
         BOARD_TO_ELEMENT_HOST.set(this.board, {
             host: elementHost,
             upperHost: elementUpperHost,
-            activeHost: elementActiveHost
+            activeHost: elementActiveHost,
+            container: this.elementRef.nativeElement,
+            viewportContainer: this.viewportContainer.nativeElement
         });
         BOARD_TO_ON_CHANGE.set(this.board, () => {
             this.ngZone.run(() => {
@@ -4416,19 +4574,19 @@ class PlaitBoardComponent {
         fromEvent(this.host, 'dblclick')
             .pipe(takeUntil(this.destroy$), filter(() => this.isFocused && !PlaitBoard.hasBeenTextEditing(this.board)))
             .subscribe((event) => {
-            this.board.dblclick(event);
+            this.board.dblClick(event);
         });
         fromEvent(document, 'keydown')
             .pipe(takeUntil(this.destroy$), tap(event => {
-            this.board.globalKeydown(event);
+            this.board.globalKeyDown(event);
         }), filter(event => this.isFocused && !PlaitBoard.hasBeenTextEditing(this.board) && !hasInputOrTextareaTarget(event.target)))
             .subscribe((event) => {
-            this.board.keydown(event);
+            this.board.keyDown(event);
         });
         fromEvent(document, 'keyup')
             .pipe(takeUntil(this.destroy$), filter(() => this.isFocused && !PlaitBoard.hasBeenTextEditing(this.board)))
             .subscribe((event) => {
-            this.board?.keyup(event);
+            this.board?.keyUp(event);
         });
         fromEvent(document, 'copy')
             .pipe(takeUntil(this.destroy$), filter(() => this.isFocused && !PlaitBoard.hasBeenTextEditing(this.board)))
@@ -4538,6 +4696,7 @@ class PlaitBoardComponent {
         BOARD_TO_HOST.delete(this.board);
         BOARD_TO_ELEMENT_HOST.delete(this.board);
         BOARD_TO_ON_CHANGE.delete(this.board);
+        BOARD_TO_AFTER_CHANGE.set(this.board, () => { });
     }
     markForCheck() {
         this.cdr.markForCheck();
@@ -4783,5 +4942,5 @@ function createModModifierKeys() {
  * Generated bundle index. Do not edit.
  */
 
-export { A, ACTIVE_MOVING_CLASS_NAME, ACTIVE_STROKE_WIDTH, ALT, APOSTROPHE, ATTACHED_ELEMENT_CLASS_NAME, AT_SIGN, B, BACKSLASH, BACKSPACE, BOARD_TO_AFTER_CHANGE, BOARD_TO_COMPONENT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_MOVING_POINT_IN_BOARD, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_TOUCH_REF, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, C, CAPS_LOCK, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, ColorfulThemeColor, CoreTransforms, CursorClass, D, DASH, DELETE, DOWN_ARROW, DarkThemeColor, DefaultThemeColor, Direction, E, EIGHT, ELEMENT_TO_COMPONENT, END, ENTER, EQUALS, ESCAPE, F, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, FF_EQUALS, FF_MINUS, FF_MUTE, FF_SEMICOLON, FF_VOLUME_DOWN, FF_VOLUME_UP, FIRST_MEDIA, FIVE, FLUSHING, FOUR, G, H, HOME, HOST_CLASS_NAME, I, INSERT, IS_APPLE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_DRAGGING, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_MAC, IS_SAFARI, IS_TEXT_EDITABLE, J, K, L, LAST_MEDIA, LEFT_ARROW, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, MAX_RADIUS, MERGING, META, MUTE, N, NINE, NODE_TO_INDEX, NODE_TO_PARENT, NS, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PATH_REFS, PAUSE, PERIOD, PLUS_SIGN, POINTER_BUTTON, PRESS_AND_MOVE_BUFFER, PRINT_SCREEN, Path, PlaitBoard, PlaitBoardComponent, PlaitChildrenElementComponent, PlaitContextService, PlaitElement, PlaitElementComponent, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitIslandPopoverBaseComponent, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, Q, QUESTION_MARK, R, RIGHT_ARROW, RectangleClient, ResizeCursorClass, RetroThemeColor, RgbaToHEX, S, SAVING, SCROLL_BAR_WIDTH, SCROLL_LOCK, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, SELECTION_RECTANGLE_CLASS_NAME, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SPACE, Selection, SoftThemeColor, StarryThemeColor, T, TAB, THREE, TILDE, TWO, ThemeColorMode, ThemeColors, Transforms, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, Viewport, W, WritableClipboardType, X, Y, Z, ZERO, addClipboardContext, addMovingElements, addSelectedElement, arrowPoints, buildPlaitHtml, cacheMovingElements, cacheSelectedElements, calcNewViewBox, catmullRomFitting, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createClipboardContext, createFakeEvent, createForeignObject, createG, createKeyboardEvent, createMask, createModModifierKeys, createMouseEvent, createPath, createPointerEvent, createRect, createSVG, createSelectionRectangleG, createTestingBoard, createText, createTouchEvent, debounce, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, distanceBetweenPointAndSegments, downScale, downloadImage, drawArrow, drawBezierPath, drawCircle, drawLine, drawLinearPath, drawRectangle, drawRoundRectangle, fakeNodeWeakMap, findElements, getBoardRectangle, getClipboardData, getClipboardFromHtml, getDataTransferClipboard, getDataTransferClipboardText, getElementById, getElementHostBBox, getHitElementByPoint, getHitElementsBySelection, getIsRecursionFunc, getMovingElements, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getProbablySupportsClipboardRead, getProbablySupportsClipboardWrite, getProbablySupportsClipboardWriteText, getRealScrollBarWidth, getRectangleByElements, getSelectedElements, getTemporaryElements, getTemporaryRef, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, handleTouchTarget, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isContextmenu, isDOMElement, isDOMNode, isDragging, isFromScrolling, isFromViewportChange, isHandleSelection, isInPlaitBoard, isLineHitLine, isMainPointer, isMovingElements, isNullOrUndefined, isPointInEllipse, isPointInPolygon, isPointInRoundRectangle, isPolylineHitRectangle, isPreventTouchMove, isSecondaryPointer, isSelectedElement, isSelectionMoving, isSetSelectionOperation, isSetViewportOperation, normalizePoint, preventTouchMove, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setDragging, setIsFromScrolling, setIsFromViewportChange, setPathStrokeLinecap, setSVGViewBox, setSelectionMoving, setStrokeLinecap, shouldClear, shouldMerge, shouldSave, stripHtml, temporaryDisableSelection, throttleRAF, toHostPoint, toHostPointFromViewBoxPoint, toImage, toScreenPointFromHostPoint, toViewBoxPoint, toViewBoxPoints, updateForeignObject, updateForeignObjectWidth, updateViewportByScrolling, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withMoving, withOptions, withSelection };
+export { A, ACTIVE_MOVING_CLASS_NAME, ACTIVE_STROKE_WIDTH, ALT, APOSTROPHE, ATTACHED_ELEMENT_CLASS_NAME, AT_SIGN, B, BACKSLASH, BACKSPACE, BOARD_TO_AFTER_CHANGE, BOARD_TO_COMPONENT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_MOVING_POINT_IN_BOARD, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_TOUCH_REF, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, C, CAPS_LOCK, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, ColorfulThemeColor, CoreTransforms, CursorClass, D, DASH, DELETE, DOWN_ARROW, DarkThemeColor, DefaultThemeColor, Direction, E, EIGHT, ELEMENT_TO_COMPONENT, END, ENTER, EQUALS, ESCAPE, F, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, FF_EQUALS, FF_MINUS, FF_MUTE, FF_SEMICOLON, FF_VOLUME_DOWN, FF_VOLUME_UP, FIRST_MEDIA, FIVE, FLUSHING, FOUR, G, H, HOME, HOST_CLASS_NAME, I, INSERT, IS_APPLE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_DRAGGING, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_MAC, IS_SAFARI, IS_TEXT_EDITABLE, J, K, L, LAST_MEDIA, LEFT_ARROW, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, MAX_RADIUS, MERGING, META, MUTE, N, NINE, NODE_TO_INDEX, NODE_TO_PARENT, NS, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PATH_REFS, PAUSE, PERIOD, PLUS_SIGN, POINTER_BUTTON, PRESS_AND_MOVE_BUFFER, PRINT_SCREEN, Path, PlaitBoard, PlaitBoardComponent, PlaitChildrenElementComponent, PlaitContextService, PlaitElement, PlaitElementComponent, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitIslandPopoverBaseComponent, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, Q, QUESTION_MARK, R, RIGHT_ARROW, RectangleClient, ResizeCursorClass, RetroThemeColor, RgbaToHEX, S, SAVING, SCROLL_BAR_WIDTH, SCROLL_LOCK, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, SELECTION_RECTANGLE_CLASS_NAME, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SPACE, Selection, SoftThemeColor, StarryThemeColor, T, TAB, THREE, TILDE, TWO, ThemeColorMode, ThemeColors, Transforms, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, Viewport, W, WritableClipboardType, X, Y, Z, ZERO, addClipboardContext, addSelectedElement, arrowPoints, buildPlaitHtml, cacheMovingElements, cacheSelectedElements, calcNewViewBox, catmullRomFitting, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createClipboardContext, createFakeEvent, createForeignObject, createG, createKeyboardEvent, createMask, createModModifierKeys, createMouseEvent, createPath, createPointerEvent, createRect, createSVG, createSelectionRectangleG, createTestingBoard, createText, createTouchEvent, debounce, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, distanceBetweenPointAndSegments, downloadImage, drawArrow, drawBezierPath, drawCircle, drawLine, drawLinearPath, drawRectangle, drawRoundRectangle, fakeNodeWeakMap, findElements, getBoardRectangle, getClipboardData, getClipboardFromHtml, getDataTransferClipboard, getDataTransferClipboardText, getElementById, getElementHostBBox, getEllipseTangentSlope, getHitElementByPoint, getHitElementsBySelection, getHitSelectedElements, getIsRecursionFunc, getMovingElements, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getProbablySupportsClipboardRead, getProbablySupportsClipboardWrite, getProbablySupportsClipboardWriteText, getRealScrollBarWidth, getRectangleByElements, getSelectedElements, getTargetElements, getTemporaryElements, getTemporaryRef, getVectorFromPointAndSlope, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, handleTouchTarget, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isContextmenu, isDOMElement, isDOMNode, isDragging, isFromScrolling, isFromViewportChange, isHandleSelection, isInPlaitBoard, isLineHitLine, isMainPointer, isMovingElements, isNullOrUndefined, isPointInEllipse, isPointInPolygon, isPointInRoundRectangle, isPolylineHitRectangle, isPreventTouchMove, isSecondaryPointer, isSelectedElement, isSelectionMoving, isSetSelectionOperation, isSetViewportOperation, normalizePoint, preventTouchMove, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setDragging, setIsFromScrolling, setIsFromViewportChange, setPathStrokeLinecap, setSVGViewBox, setSelectionMoving, setStrokeLinecap, setTransformRotate, shouldClear, shouldMerge, shouldSave, stripHtml, temporaryDisableSelection, throttleRAF, toDomPrecision, toFixed, toHostPoint, toHostPointFromViewBoxPoint, toImage, toScreenPointFromHostPoint, toViewBoxPoint, toViewBoxPoints, updateForeignObject, updateForeignObjectWidth, updatePoints, updateViewportByScrolling, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withArrowMoving, withMoving, withOptions, withSelection };
 //# sourceMappingURL=plait-core.mjs.map