@plait/core 0.1.0 → 0.1.2

package/fesm2020/plait-core.mjs

@@ -4,13 +4,99 @@ import rough from 'roughjs/bin/rough';
 import { Subject, fromEvent } from 'rxjs';
 import { takeUntil, filter } from 'rxjs/operators';
 import produce, { createDraft, finishDraft, isDraft } from 'immer';
-import { isKeyHotkey, isHotkey } from 'is-hotkey';
+import isHotkey$1, { isKeyHotkey, isHotkey } from 'is-hotkey';
 import * as i1 from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
 
-const CLIP_BOARD_FORMAT_KEY = 'x-plait-fragment';
-const SCROLL_BAR_WIDTH = 20;
-const MAX_RADIUS = 16;
+// record richtext type status
+const FLUSHING = new WeakMap();
+const IS_TEXT_EDITABLE = new WeakMap();
+const BOARD_TO_ON_CHANGE = new WeakMap();
+const BOARD_TO_COMPONENT = new WeakMap();
+const BOARD_TO_ROUGH_SVG = new WeakMap();
+const BOARD_TO_HOST = new WeakMap();
+const BOARD_TO_ELEMENT_HOST = new WeakMap();
+const BOARD_TO_SELECTED_ELEMENT = new WeakMap();
+const BOARD_TO_MOVING_POINT = new WeakMap();
+const BOARD_TO_IS_SELECTION_MOVING = new WeakMap();
+// save no standard selected elements
+const BOARD_TO_TEMPORARY_ELEMENTS = new WeakMap();
+const BOARD_TO_MOVING_ELEMENT = new WeakMap();
+
+function depthFirstRecursion(node, callback) {
+    node.children?.forEach(child => {
+        depthFirstRecursion(child, callback);
+    });
+    callback(node);
+}
+
+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 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);
+        }
+    };
+    elements.forEach(element => {
+        if (recursion) {
+            depthFirstRecursion(element, node => calcRectangleClient(node));
+        }
+        else {
+            calcRectangleClient(element);
+        }
+    });
+    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);
+}
+
+const PlaitBoard = {
+    getHost(board) {
+        return BOARD_TO_HOST.get(board);
+    },
+    getElementHost(board) {
+        return BOARD_TO_ELEMENT_HOST.get(board);
+    },
+    getRoughSVG(board) {
+        return BOARD_TO_ROUGH_SVG.get(board);
+    },
+    getComponent(board) {
+        return BOARD_TO_COMPONENT.get(board);
+    },
+    getBoardNativeElement(board) {
+        return PlaitBoard.getComponent(board).nativeElement;
+    },
+    getRectangle(board) {
+        return getRectangleByElements(board, board.children, true);
+    },
+    getViewportContainer(board) {
+        return PlaitBoard.getHost(board).parentElement;
+    },
+    isFocus(board) {
+        return !!board.selection;
+    },
+    isReadonly(board) {
+        return board.options.readonly;
+    },
+    hasBeenTextEditing(board) {
+        return !!IS_TEXT_EDITABLE.get(board);
+    }
+};
 
 var PlaitPointerType;
 (function (PlaitPointerType) {
@@ -21,6 +107,19 @@ var PlaitPointerType;
 function isNullOrUndefined(value) {
     return value === null || value === undefined;
 }
+/**
+ * 规范 point
+ * @param point
+ * @returns point
+ */
+function normalizePoint(point) {
+    return Array.isArray(point)
+        ? {
+            x: point[0],
+            y: point[1]
+        }
+        : point;
+}
 
 const Viewport = {
     isViewport: (value) => {
@@ -360,93 +459,71 @@ function setSelection(board, selection) {
     board.apply(operation);
 }
 const SelectionTransforms = {
-    setSelection
+    setSelection,
+    setSelectionWithTemporaryElements
 };
+function setSelectionWithTemporaryElements(board, elements) {
+    setTimeout(() => {
+        BOARD_TO_TEMPORARY_ELEMENTS.set(board, elements);
+        setSelection(board, { ranges: [] });
+    });
+}
 
-function setViewport(board, viewport) {
+function setViewport$1(board, viewport) {
     const operation = { type: 'set_viewport', properties: board.viewport, newProperties: viewport };
     board.apply(operation);
 }
 const ViewportTransforms = {
-    setViewport
+    setViewport: setViewport$1
 };
 
-// record richtext type status
-const FLUSHING = new WeakMap();
-const IS_TEXT_EDITABLE = new WeakMap();
-const BOARD_TO_ON_CHANGE = new WeakMap();
-const BOARD_TO_COMPONENT = new WeakMap();
-const BOARD_TO_ROUGH_SVG = new WeakMap();
-const BOARD_TO_HOST = new WeakMap();
-const BOARD_TO_ELEMENT_HOST = new WeakMap();
-const BOARD_TO_SELECTED_ELEMENT = new WeakMap();
-const BOARD_TO_MOVING_POINT = new WeakMap();
-
-function depthFirstRecursion(node, callback) {
-    node.children?.forEach(child => {
-        depthFirstRecursion(child, callback);
-    });
-    callback(node);
+// https://stackoverflow.com/a/6853926/232122
+function distanceBetweenPointAndSegment(x, y, x1, y1, x2, y2) {
+    const A = x - x1;
+    const B = y - y1;
+    const C = x2 - x1;
+    const D = y2 - y1;
+    const dot = A * C + B * D;
+    const lenSquare = C * C + D * D;
+    let param = -1;
+    if (lenSquare !== 0) {
+        // in case of 0 length line
+        param = dot / lenSquare;
+    }
+    let xx, yy;
+    if (param < 0) {
+        xx = x1;
+        yy = y1;
+    }
+    else if (param > 1) {
+        xx = x2;
+        yy = y2;
+    }
+    else {
+        xx = x1 + param * C;
+        yy = y1 + param * D;
+    }
+    const dx = x - xx;
+    const dy = y - yy;
+    return Math.hypot(dx, dy);
 }
-
-function getRectangleByElements(board, elements, recursion) {
-    const boundaryBox = {
-        left: Number.MAX_VALUE,
-        top: Number.MAX_VALUE,
-        right: Number.MIN_VALUE,
-        bottom: Number.MIN_VALUE
-    };
-    const calcRectangleClient = (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);
-        }
-    };
-    elements.forEach(element => {
-        if (recursion) {
-            depthFirstRecursion(element, node => calcRectangleClient(node));
-        }
-        else {
-            calcRectangleClient(element);
-        }
-    });
-    return {
-        x: boundaryBox.left,
-        y: boundaryBox.top,
-        width: boundaryBox.right - boundaryBox.left,
-        height: boundaryBox.bottom - boundaryBox.top
-    };
+function rotate(x1, y1, x2, y2, angle) {
+    // 𝑎′𝑥=(𝑎𝑥−𝑐𝑥)cos𝜃−(𝑎𝑦−𝑐𝑦)sin𝜃+𝑐𝑥
+    // 𝑎′𝑦=(𝑎𝑥−𝑐𝑥)sin𝜃+(𝑎𝑦−𝑐𝑦)cos𝜃+𝑐𝑦.
+    // https://math.stackexchange.com/questions/2204520/how-do-i-rotate-a-line-segment-in-a-specific-point-on-the-line
+    return [(x1 - x2) * Math.cos(angle) - (y1 - y2) * Math.sin(angle) + x2, (x1 - x2) * Math.sin(angle) + (y1 - y2) * Math.cos(angle) + y2];
 }
-function getBoardRectangle(board) {
-    return getRectangleByElements(board, board.children, true);
+function distanceBetweenPointAndPoint(x1, y1, x2, y2) {
+    const dx = x1 - x2;
+    const dy = y1 - y2;
+    return Math.hypot(dx, dy);
+}
+// https://stackoverflow.com/questions/5254838/calculating-distance-between-a-point-and-a-rectangular-box-nearest-point
+function distanceBetweenPointAndRectangle(x, y, rect) {
+    var dx = Math.max(rect.x - x, 0, x - (rect.x + rect.width));
+    var dy = Math.max(rect.y - y, 0, y - (rect.y + rect.height));
+    return Math.sqrt(dx * dx + dy * dy);
 }
-
-const PlaitBoard = {
-    getHost(board) {
-        return BOARD_TO_HOST.get(board);
-    },
-    getElementHost(board) {
-        return BOARD_TO_ELEMENT_HOST.get(board);
-    },
-    getRoughSVG(board) {
-        return BOARD_TO_ROUGH_SVG.get(board);
-    },
-    getComponent(board) {
-        return BOARD_TO_COMPONENT.get(board);
-    },
-    getBoardNativeElement(board) {
-        return PlaitBoard.getComponent(board).nativeElement;
-    },
-    getRectangle(board) {
-        return getRectangleByElements(board, board.children, true);
-    },
-    getViewportContainer(board) {
-        return PlaitBoard.getHost(board).parentElement;
-    }
-};
 
 function transformPoints(board, points) {
     const newPoints = points.map(point => {
@@ -462,8 +539,11 @@ function transformPoint(board, point) {
     const newPoint = [x, y];
     return newPoint;
 }
-function isNoSelectionElement(e) {
-    return e.target?.closest('.plait-board-attached');
+function isInPlaitBoard(board, x, y) {
+    const plaitBoardElement = PlaitBoard.getBoardNativeElement(board);
+    const plaitBoardRect = plaitBoardElement.getBoundingClientRect();
+    const distances = distanceBetweenPointAndRectangle(x, y, plaitBoardRect);
+    return distances === 0;
 }
 
 const NS = 'http://www.w3.org/2000/svg';
@@ -804,222 +884,6 @@ function idCreator(length = 5) {
     return key;
 }
 
-// https://stackoverflow.com/a/6853926/232122
-function distanceBetweenPointAndSegment(x, y, x1, y1, x2, y2) {
-    const A = x - x1;
-    const B = y - y1;
-    const C = x2 - x1;
-    const D = y2 - y1;
-    const dot = A * C + B * D;
-    const lenSquare = C * C + D * D;
-    let param = -1;
-    if (lenSquare !== 0) {
-        // in case of 0 length line
-        param = dot / lenSquare;
-    }
-    let xx, yy;
-    if (param < 0) {
-        xx = x1;
-        yy = y1;
-    }
-    else if (param > 1) {
-        xx = x2;
-        yy = y2;
-    }
-    else {
-        xx = x1 + param * C;
-        yy = y1 + param * D;
-    }
-    const dx = x - xx;
-    const dy = y - yy;
-    return Math.hypot(dx, dy);
-}
-function rotate(x1, y1, x2, y2, angle) {
-    // 𝑎′𝑥=(𝑎𝑥−𝑐𝑥)cos𝜃−(𝑎𝑦−𝑐𝑦)sin𝜃+𝑐𝑥
-    // 𝑎′𝑦=(𝑎𝑥−𝑐𝑥)sin𝜃+(𝑎𝑦−𝑐𝑦)cos𝜃+𝑐𝑦.
-    // https://math.stackexchange.com/questions/2204520/how-do-i-rotate-a-line-segment-in-a-specific-point-on-the-line
-    return [(x1 - x2) * Math.cos(angle) - (y1 - y2) * Math.sin(angle) + x2, (x1 - x2) * Math.sin(angle) + (y1 - y2) * Math.cos(angle) + y2];
-}
-function distanceBetweenPointAndPoint(x1, y1, x2, y2) {
-    const dx = x1 - x2;
-    const dy = y1 - y2;
-    return Math.hypot(dx, dy);
-}
-// https://stackoverflow.com/questions/5254838/calculating-distance-between-a-point-and-a-rectangular-box-nearest-point
-function distanceBetweenPointAndRectangle(x, y, rect) {
-    var dx = Math.max(rect.x - x, 0, x - (rect.x + rect.width));
-    var dy = Math.max(rect.y - y, 0, y - (rect.y + rect.height));
-    return Math.sqrt(dx * dx + dy * dy);
-}
-
-/**
- * 逆矩阵
- * [a c e]
- * [b d f]
- * [0 0 1]
- * @param newMatrix 输出返回矩阵
- * @param matrix 新矩阵
- * @returns 逆矩阵
- */
-function invertMatrix(newMatrix, matrix) {
-    const [n, r, a, i, o, c, l, s, u] = matrix;
-    const determinant = u * o - c * s;
-    const h = -u * i + c * l;
-    const f = s * i - o * l;
-    const product = n * determinant + r * h + a * f;
-    if (!product) {
-        return null;
-    }
-    const reciprocal = 1 / product;
-    newMatrix[0] = determinant * reciprocal;
-    newMatrix[1] = (-u * r + a * s) * reciprocal;
-    newMatrix[2] = (c * r - a * o) * reciprocal;
-    newMatrix[3] = h * reciprocal;
-    newMatrix[4] = (u * n - a * l) * reciprocal;
-    newMatrix[5] = (-c * n + a * i) * reciprocal;
-    newMatrix[6] = f * reciprocal;
-    newMatrix[7] = (-s * n + r * l) * reciprocal;
-    newMatrix[8] = (o * n - r * i) * reciprocal;
-    return newMatrix;
-}
-/**
- * 将视图坐标与反转矩阵相乘，以得到原始坐标
- * 使用给定的矩阵进行转换
- * 矩阵与向量乘法，3 维向量与3x3矩阵的乘积
- * [m11 m12 m13][v1]
- * [m21 m22 m23][v2]
- * [m31 m32 m33][v3]
- * @param out 输出结果向量
- * @param t 要转换的向量
- * @param n 矩阵转换
- * @returns [v1 * m11 + v2 * m12 + v3 * m13, v1 * m21 + v2 * m22 + v3 * m23, v1 * m31 + v2 * m32 + v3 * m33];
- */
-function transformMat3(out, vector, matrix) {
-    out = [
-        vector[0] * matrix[0] + vector[1] * matrix[3] + vector[2] * matrix[6],
-        vector[0] * matrix[1] + vector[1] * matrix[4] + vector[2] * matrix[7],
-        vector[0] * matrix[2] + vector[1] * matrix[5] + vector[2] * matrix[8]
-    ];
-    return out;
-}
-/**
- * 规范 point
- * @param point
- * @returns point
- */
-function normalizePoint(point) {
-    return Array.isArray(point)
-        ? {
-            x: point[0],
-            y: point[1]
-        }
-        : point;
-}
-/**
- * 将一个点坐标反转回它的原始坐标
- * @param point 表示要反转的点的视图坐标，它是一个长度为 2 的数组，存储点的 x 和 y 坐标
- * @param matrix 表示视图矩阵，是在视图中对图形进行缩放和平移时使用的矩阵
- * @returns 最终结果是一个长度为 3 的数组，存储点的 x，y 和 w 坐标（w 坐标是点的齐次坐标)
- */
-function invertViewportCoordinates(point, matrix) {
-    const { x, y } = normalizePoint(point);
-    const invertedMatrix = invertMatrix([], matrix);
-    return transformMat3([], [x, y, 1], invertedMatrix);
-}
-function convertToViewportCoordinates(point, matrix) {
-    const { x, y } = normalizePoint(point);
-    return transformMat3([], [x, y, 1], matrix);
-}
-/**
- * 获取 contentContainer 的 clientBox
- * @param board
- * @returns
- */
-function getViewportContainerBox(board) {
-    const { hideScrollbar } = board.options;
-    const scrollBarWidth = hideScrollbar ? SCROLL_BAR_WIDTH : 0;
-    const container = PlaitBoard.getViewportContainer(board);
-    const containerRect = container.getBoundingClientRect();
-    const x = containerRect.x || containerRect.left;
-    const y = containerRect.y || containerRect.top;
-    const width = containerRect.width - scrollBarWidth;
-    const height = containerRect.height - scrollBarWidth;
-    return {
-        minX: x,
-        minY: y,
-        maxX: x + width,
-        maxY: y + height,
-        x,
-        y,
-        width,
-        height
-    };
-}
-/**
- * 获取 board.plait-board 的 clientBox
- * @param board
- * @returns
- */
-function getBoardClientBox(board) {
-    const { hideScrollbar } = board.options;
-    const scrollBarWidth = hideScrollbar ? SCROLL_BAR_WIDTH : 0;
-    const viewportRect = PlaitBoard.getViewportContainer(board).getBoundingClientRect();
-    return {
-        width: viewportRect.width + scrollBarWidth,
-        height: viewportRect.height + scrollBarWidth
-    };
-}
-/**
- * 获取 rootGroup 相对于当前 svg 空间的最小矩阵坐标
- */
-function getRootGroupBBox(board, zoom) {
-    const elementHost = PlaitBoard.getElementHost(board);
-    const rootGroupBox = elementHost.getBBox();
-    const viewportContainerBox = getViewportContainerBox(board);
-    const containerWidth = viewportContainerBox.width / zoom;
-    const containerHeight = viewportContainerBox.height / zoom;
-    let left;
-    let right;
-    let top;
-    let bottom;
-    if (rootGroupBox.width < containerWidth) {
-        const offsetX = rootGroupBox.x + rootGroupBox.width / 2;
-        const containerX = containerWidth / 2;
-        left = offsetX - containerX;
-        right = offsetX + containerX;
-    }
-    else {
-        left = rootGroupBox.x;
-        right = rootGroupBox.x + rootGroupBox.width;
-    }
-    if (rootGroupBox.height < containerHeight) {
-        const offsetY = rootGroupBox.y + rootGroupBox.height / 2;
-        const containerY = containerHeight / 2;
-        top = offsetY - containerY;
-        bottom = offsetY + containerY;
-    }
-    else {
-        top = rootGroupBox.y;
-        bottom = rootGroupBox.y + rootGroupBox.height;
-    }
-    return {
-        left,
-        right,
-        top,
-        bottom
-    };
-}
-/**
- * 验证缩放比是否符合限制，如果超出限制，则返回合适的缩放比
- * @param zoom 缩放比
- * @param minZoom 最小缩放比
- * @param maxZoom 最大缩放比
- * @returns 正确的缩放比
- */
-function clampZoomLevel(zoom, minZoom = 0.2, maxZoom = 4) {
-    return zoom < minZoom ? minZoom : zoom > maxZoom ? maxZoom : zoom;
-}
-
 const calcElementIntersectionSelection = (board) => {
     const selectedElements = [];
     depthFirstRecursion(board, node => {
@@ -1032,6 +896,19 @@ const calcElementIntersectionSelection = (board) => {
     });
     return selectedElements;
 };
+const isIntersectionElements = (board, elements, ranges) => {
+    let isIntersectionElements = false;
+    if (elements.length) {
+        elements.map(item => {
+            if (!isIntersectionElements) {
+                isIntersectionElements = ranges.some(range => {
+                    return board.isIntersectionSelection(item, range);
+                });
+            }
+        });
+    }
+    return isIntersectionElements;
+};
 const cacheSelectedElements = (board, selectedElements) => {
     BOARD_TO_SELECTED_ELEMENT.set(board, selectedElements);
 };
@@ -1052,6 +929,10 @@ const isSelectedElement = (board, element) => {
     return !!selectedElements.find(value => value === element);
 };
 
+const CLIP_BOARD_FORMAT_KEY = 'x-plait-fragment';
+const SCROLL_BAR_WIDTH = 20;
+const MAX_RADIUS = 16;
+
 /**
  * drawRoundRectangle
  * @param rs RoughSVG
@@ -1104,6 +985,198 @@ function drawArrow(rs, start, end, options, maxHypotenuseLength = 10, degree = 4
     return [arrowLineLeft, arrowLineRight];
 }
 
+function getViewportContainerRect(board) {
+    const { hideScrollbar } = board.options;
+    const scrollBarWidth = hideScrollbar ? SCROLL_BAR_WIDTH : 0;
+    const viewportRect = PlaitBoard.getBoardNativeElement(board).getBoundingClientRect();
+    return {
+        width: viewportRect.width + scrollBarWidth,
+        height: viewportRect.height + scrollBarWidth
+    };
+}
+function getElementHostBBox(board, zoom) {
+    const childrenRect = getRectangleByElements(board, board.children, true);
+    const viewportContainerRect = getViewportContainerRect(board);
+    const containerWidth = viewportContainerRect.width / zoom;
+    const containerHeight = viewportContainerRect.height / zoom;
+    let left;
+    let right;
+    let top;
+    let bottom;
+    if (childrenRect.width < containerWidth) {
+        const centerX = Math.ceil(childrenRect.x + childrenRect.width / 2);
+        const halfContainerWidth = Math.ceil(containerWidth / 2);
+        left = centerX - halfContainerWidth;
+        right = centerX + halfContainerWidth;
+    }
+    else {
+        left = childrenRect.x;
+        right = childrenRect.x + childrenRect.width;
+    }
+    if (childrenRect.height < containerHeight) {
+        const centerY = Math.ceil(childrenRect.y + childrenRect.height / 2);
+        const halfContainerHeight = Math.ceil(containerHeight / 2);
+        top = centerY - halfContainerHeight;
+        bottom = centerY + halfContainerHeight;
+    }
+    else {
+        top = childrenRect.y;
+        bottom = childrenRect.y + childrenRect.height;
+    }
+    return {
+        left,
+        right,
+        top,
+        bottom
+    };
+}
+/**
+ * 验证缩放比是否符合限制，如果超出限制，则返回合适的缩放比
+ * @param zoom 缩放比
+ * @param minZoom 最小缩放比
+ * @param maxZoom 最大缩放比
+ * @returns 正确的缩放比
+ */
+function clampZoomLevel(zoom, minZoom = 0.2, maxZoom = 4) {
+    return zoom < minZoom ? minZoom : zoom > maxZoom ? maxZoom : zoom;
+}
+function getViewBox(board, zoom) {
+    const { hideScrollbar } = board.options;
+    const scrollBarWidth = hideScrollbar ? SCROLL_BAR_WIDTH : 0;
+    const viewportContainerRect = getViewportContainerRect(board);
+    const elementHostBBox = getElementHostBBox(board, zoom);
+    const horizontalPadding = viewportContainerRect.width / 2;
+    const verticalPadding = viewportContainerRect.height / 2;
+    const viewportWidth = (elementHostBBox.right - elementHostBBox.left) * zoom + 2 * horizontalPadding + scrollBarWidth;
+    const viewportHeight = (elementHostBBox.bottom - elementHostBBox.top) * zoom + 2 * verticalPadding + scrollBarWidth;
+    const viewBox = [
+        elementHostBBox.left - horizontalPadding / zoom,
+        elementHostBBox.top - verticalPadding / zoom,
+        viewportWidth / zoom,
+        viewportHeight / zoom
+    ];
+    return viewBox;
+}
+function setSVGViewBox(board, viewBox) {
+    const zoom = board.viewport.zoom;
+    const hostElement = PlaitBoard.getHost(board);
+    hostElement.style.display = 'block';
+    hostElement.style.width = `${viewBox[2] * zoom}px`;
+    hostElement.style.height = `${viewBox[3] * zoom}px`;
+    if (viewBox && viewBox[2] > 0 && viewBox[3] > 0) {
+        hostElement.setAttribute('viewBox', viewBox.join(' '));
+    }
+}
+function updateViewportContainerOffset(board, origination) {
+    origination = origination ?? board.viewport.origination;
+    if (!origination)
+        return;
+    const { zoom } = board.viewport;
+    const viewBox = getViewBox(board, zoom);
+    const scrollLeft = (origination[0] - viewBox[0]) * zoom;
+    const scrollTop = (origination[1] - viewBox[1]) * zoom;
+    setViewportContainerScroll(board, scrollLeft, scrollTop);
+}
+function setViewportContainerScroll(board, left, top) {
+    const viewportContainer = PlaitBoard.getViewportContainer(board);
+    viewportContainer.scrollLeft = Math.floor(left);
+    viewportContainer.scrollTop = Math.floor(top);
+}
+function initializeViewport(board) {
+    const zoom = board.viewport.zoom;
+    const viewBox = getViewBox(board, zoom);
+    setSVGViewBox(board, viewBox);
+}
+function initializeViewportContainerOffset(board) {
+    if (!board.viewport?.origination) {
+        const zoom = board.viewport.zoom;
+        const viewportContainerBox = PlaitBoard.getBoardNativeElement(board).getBoundingClientRect();
+        const viewBox = getViewBox(board, zoom);
+        const centerX = viewBox[0] + viewBox[2] / 2;
+        const centerY = viewBox[1] + viewBox[3] / 2;
+        const origination = [centerX - viewportContainerBox.width / 2 / zoom, centerY - viewportContainerBox.height / 2 / zoom];
+        updateViewportContainerOffset(board, origination);
+        return;
+    }
+    updateViewportContainerOffset(board);
+}
+function setViewport(board, origination, zoom) {
+    zoom = zoom ?? board.viewport.zoom;
+    Transforms.setViewport(board, {
+        ...board.viewport,
+        zoom,
+        origination
+    });
+}
+function changeZoom(board, newZoom, isCenter = true) {
+    newZoom = clampZoomLevel(newZoom);
+    const mousePoint = BOARD_TO_MOVING_POINT.get(board);
+    const nativeElement = PlaitBoard.getBoardNativeElement(board);
+    const rect = nativeElement.getBoundingClientRect();
+    const viewportContainerRect = getViewportContainerRect(board);
+    let focusPoint = [viewportContainerRect.width / 2, viewportContainerRect.height / 2];
+    if (!isCenter && mousePoint && distanceBetweenPointAndRectangle(mousePoint[0], mousePoint[1], rect) === 0) {
+        focusPoint = toPoint(mousePoint[0], mousePoint[1], nativeElement);
+    }
+    const { origination, zoom } = board.viewport;
+    const centerX = origination[0] + focusPoint[0] / zoom;
+    const centerY = origination[1] + focusPoint[1] / zoom;
+    const viewBox = getViewBox(board, newZoom);
+    const newOrigination = [centerX - focusPoint[0] / newZoom, centerY - focusPoint[1] / newZoom];
+    setSVGViewBox(board, viewBox);
+    setViewport(board, newOrigination, newZoom);
+}
+function fitViewport(board) {
+    const viewportContainerRect = getViewportContainerRect(board);
+    const rootGroupBox = getRectangleByElements(board, board.children, true);
+    const zoom = board.viewport.zoom;
+    const autoFitPadding = 8;
+    const viewportWidth = viewportContainerRect.width - 2 * autoFitPadding;
+    const viewportHeight = viewportContainerRect.height - 2 * autoFitPadding;
+    let newZoom = zoom;
+    if (viewportWidth < rootGroupBox.width || viewportHeight < rootGroupBox.height) {
+        newZoom = Math.min(viewportWidth / rootGroupBox.width, viewportHeight / rootGroupBox.height);
+    }
+    else {
+        newZoom = 1;
+    }
+    const viewBox = getViewBox(board, newZoom);
+    const centerX = viewBox[0] + viewBox[2] / 2;
+    const centerY = viewBox[1] + viewBox[3] / 2;
+    const newOrigination = [centerX - viewportContainerRect.width / 2 / newZoom, centerY - viewportContainerRect.height / 2 / newZoom];
+    setViewport(board, newOrigination, newZoom);
+}
+function scrollToRectangle(board, client) { }
+
+let timerId = null;
+const throttleRAF = (fn) => {
+    const scheduleFunc = () => {
+        timerId = requestAnimationFrame(() => {
+            timerId = null;
+            fn();
+        });
+    };
+    if (timerId !== null) {
+        cancelAnimationFrame(timerId);
+        timerId = null;
+    }
+    scheduleFunc();
+};
+
+const getMovingElements = (board) => {
+    return BOARD_TO_MOVING_ELEMENT.get(board) || [];
+};
+const addMovingElements = (board, elements) => {
+    const movingElements = getMovingElements(board);
+    cacheMovingElements(board, [...movingElements, ...elements]);
+};
+const removeMovingElements = (board) => {
+    BOARD_TO_MOVING_ELEMENT.delete(board);
+};
+const cacheMovingElements = (board, elements) => {
+    BOARD_TO_MOVING_ELEMENT.set(board, elements);
+};
+
 const updatePointerType = (board, pointer) => {
     board.pointer = pointer;
     const boardComponent = BOARD_TO_COMPONENT.get(board);
@@ -1169,6 +1242,7 @@ function createBoard(children, options) {
         destroyElement: (context) => { },
         isWithinSelection: element => false,
         isIntersectionSelection: element => false,
+        isMovable: element => false,
         getRectangle: element => null
     };
     return board;
@@ -1294,11 +1368,13 @@ function withHandPointer(board) {
     };
     board.mousemove = (event) => {
         if (board.pointer === PlaitPointerType.hand && board.selection && isMoving) {
-            const boardComponent = PlaitBoard.getComponent(board);
-            const left = event.x - plaitBoardMove.x;
-            const top = event.y - plaitBoardMove.y;
-            const { scrollLeft, scrollTop } = boardComponent.viewportState;
-            boardComponent.setScroll(scrollLeft - left, scrollTop - top);
+            const viewportContainer = PlaitBoard.getViewportContainer(board);
+            const left = viewportContainer.scrollLeft + (event.x - plaitBoardMove.x);
+            const top = viewportContainer.scrollTop + (event.y - plaitBoardMove.y);
+            const zoom = board.viewport.zoom;
+            const viewBox = getViewBox(board, zoom);
+            const origination = [left / zoom + viewBox[0], top / zoom + viewBox[1]];
+            setViewport(board, origination);
             plaitBoardMove.x = event.x;
             plaitBoardMove.y = event.y;
         }
@@ -1331,6 +1407,8 @@ function withHandPointer(board) {
     return board;
 }
 
+const ATTACHED_ELEMENT_CLASS_NAME = 'plait-board-attached';
+
 function withSelection(board) {
     const { mousedown, globalMousemove, globalMouseup, onChange } = board;
     let start = null;
@@ -1338,12 +1416,22 @@ function withSelection(board) {
     let selectionMovingG;
     let selectionOuterG;
     board.mousedown = (event) => {
-        selectionOuterG?.remove();
         if (event.button === 0) {
             start = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
         }
         if (start) {
-            Transforms.setSelection(board, { ranges: [{ anchor: start, focus: start }] });
+            const ranges = [{ anchor: start, focus: start }];
+            const selectedElements = getSelectedElements(board);
+            const intersectionSelectedElement = isIntersectionElements(board, selectedElements, ranges);
+            if (intersectionSelectedElement) {
+                start = null;
+            }
+            else {
+                Transforms.setSelection(board, { ranges: ranges });
+                if (calcElementIntersectionSelection(board).length) {
+                    start = null;
+                }
+            }
         }
         mousedown(event);
     };
@@ -1351,13 +1439,11 @@ function withSelection(board) {
         if (start) {
             const movedTarget = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
             const { x, y, width, height } = RectangleClient.toRectangleClient([start, movedTarget]);
+            selectionMovingG?.remove();
             if (Math.hypot(width, height) > 5) {
                 end = movedTarget;
-                if (movedTarget) {
-                    Transforms.setSelection(board, { ranges: [{ anchor: start, focus: start }] });
-                }
-                PlaitBoard.getBoardNativeElement(board).classList.add('selection-moving');
-                selectionMovingG?.remove();
+                Transforms.setSelection(board, { ranges: [{ anchor: start, focus: end }] });
+                setSelectionMoving(board);
                 const rough = PlaitBoard.getRoughSVG(board);
                 selectionMovingG = rough.rectangle(x, y, width, height, {
                     stroke: SELECTION_BORDER_COLOR,
@@ -1372,8 +1458,18 @@ function withSelection(board) {
     };
     board.globalMouseup = (event) => {
         if (start && end) {
-            PlaitBoard.getBoardNativeElement(board).classList.remove('selection-moving');
             selectionMovingG?.remove();
+            clearSelectionMoving(board);
+            Transforms.setSelection(board, { ranges: [{ anchor: start, focus: end }] });
+        }
+        if (PlaitBoard.isFocus(board)) {
+            const isInBoard = event.target instanceof Node && PlaitBoard.getBoardNativeElement(board).contains(event.target);
+            const isAttachedElement = event.target instanceof HTMLElement && event.target.closest(`.${ATTACHED_ELEMENT_CLASS_NAME}`);
+            // Clear selection when mouse board outside area
+            // The framework needs to determine whether the board is focused through selection
+            if (!isInBoard && !start && !isAttachedElement) {
+                Transforms.setSelection(board, null);
+            }
         }
         start = null;
         end = null;
@@ -1382,10 +1478,12 @@ function withSelection(board) {
     board.onChange = () => {
         // calc selected elements entry
         try {
+            selectionOuterG?.remove();
             if (board.operations.find(value => value.type === 'set_selection')) {
-                const elementIds = calcElementIntersectionSelection(board);
-                cacheSelectedElements(board, elementIds);
-                const { x, y, width, height } = getRectangleByElements(board, elementIds, false);
+                const temporaryElements = getTemporaryElements(board);
+                const elements = temporaryElements ? temporaryElements : calcElementIntersectionSelection(board);
+                cacheSelectedElements(board, elements);
+                const { x, y, width, height } = getRectangleByElements(board, elements, false);
                 if (width > 0 && height > 0) {
                     const rough = PlaitBoard.getRoughSVG(board);
                     selectionOuterG = rough.rectangle(x - 2, y - 2, width + 4, height + 4, {
@@ -1393,9 +1491,11 @@ function withSelection(board) {
                         strokeWidth: 1,
                         fillStyle: 'solid'
                     });
+                    selectionOuterG.classList.add('selection-outer');
                     PlaitBoard.getHost(board).append(selectionOuterG);
                 }
             }
+            deleteTemporaryElements(board);
         }
         catch (error) {
             console.error(error);
@@ -1404,6 +1504,33 @@ function withSelection(board) {
     };
     return board;
 }
+function getTemporaryElements(board) {
+    return BOARD_TO_TEMPORARY_ELEMENTS.get(board);
+}
+function deleteTemporaryElements(board) {
+    BOARD_TO_TEMPORARY_ELEMENTS.delete(board);
+}
+function isSelectionMoving(board) {
+    return !!BOARD_TO_IS_SELECTION_MOVING.get(board);
+}
+function setSelectionMoving(board) {
+    PlaitBoard.getBoardNativeElement(board).classList.add('selection-moving');
+    BOARD_TO_IS_SELECTION_MOVING.set(board, true);
+}
+function clearSelectionMoving(board) {
+    PlaitBoard.getBoardNativeElement(board).classList.remove('selection-moving');
+    BOARD_TO_IS_SELECTION_MOVING.delete(board);
+}
+
+function withViewport(board) {
+    const { onChange } = board;
+    board.onChange = () => {
+        initializeViewport(board);
+        updateViewportContainerOffset(board);
+        onChange();
+    };
+    return board;
+}
 
 class PlaitElementComponent {
     constructor(renderer2, viewContainerRef) {
@@ -1457,7 +1584,7 @@ class PlaitElementComponent {
         const current = {
             element: this.element,
             selection: this.selection,
-            board: this.board,
+            board: this.board
         };
         if (this.context) {
             const previous = { ...this.context };
@@ -1557,10 +1684,6 @@ class PlaitBoardComponent {
         this.elementRef = elementRef;
         this.hasInitialized = false;
         this.destroy$ = new Subject();
-        this.viewportState = {
-            zoom: 1,
-            autoFitPadding: 8
-        };
         this.plaitValue = [];
         this.plaitPlugins = [];
         this.plaitChange = new EventEmitter();
@@ -1569,9 +1692,6 @@ class PlaitBoardComponent {
             return index;
         };
     }
-    get isFocused() {
-        return this.board?.selection;
-    }
     get host() {
         return this.svg.nativeElement;
     }
@@ -1581,8 +1701,8 @@ class PlaitBoardComponent {
     get readonly() {
         return this.board.options.readonly;
     }
-    get focused() {
-        return this.isFocused;
+    get isFocused() {
+        return PlaitBoard.isFocus(this.board);
     }
     get nativeElement() {
         return this.elementRef.nativeElement;
@@ -1592,10 +1712,12 @@ class PlaitBoardComponent {
         const roughSVG = rough.svg(this.host, {
             options: { roughness: 0, strokeWidth: 1 }
         });
+        this.roughSVG = roughSVG;
         this.initializePlugins();
         this.initializeEvents();
         this.viewportScrollListener();
         this.elementResizeListener();
+        this.mouseLeaveListener();
         BOARD_TO_COMPONENT.set(this.board, this);
         BOARD_TO_ROUGH_SVG.set(this.board, roughSVG);
         BOARD_TO_HOST.set(this.board, this.host);
@@ -1612,13 +1734,19 @@ class PlaitBoardComponent {
         });
         this.hasInitialized = true;
     }
+    mouseLeaveListener() {
+        fromEvent(this.host, 'mouseleave')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((event) => {
+            BOARD_TO_MOVING_POINT.delete(this.board);
+        });
+    }
     ngOnChanges(changes) {
         if (this.hasInitialized) {
             const valueChange = changes['plaitValue'];
             const options = changes['plaitOptions'];
-            if (valueChange) {
+            if (valueChange)
                 this.board.children = valueChange.currentValue;
-            }
             if (options)
                 this.board.options = options.currentValue;
             this.cdr.markForCheck();
@@ -1627,20 +1755,17 @@ class PlaitBoardComponent {
     ngAfterViewInit() {
         this.plaitBoardInitialized.emit(this.board);
         this.initViewportContainer();
-        this.calcViewBox(this.viewportState.zoom);
-        this.initViewport();
+        initializeViewport(this.board);
+        initializeViewportContainerOffset(this.board);
     }
     initializePlugins() {
-        let board = withHandPointer(withHistory(withSelection(withBoard(createBoard(this.plaitValue, this.plaitOptions)))));
+        let board = withHandPointer(withHistory(withSelection(withBoard(withViewport(createBoard(this.plaitValue, this.plaitOptions))))));
         this.plaitPlugins.forEach(plugin => {
             board = plugin(board);
         });
         this.board = board;
         if (this.plaitViewport) {
             this.board.viewport = this.plaitViewport;
-            this.updateViewportState({
-                zoom: this.plaitViewport?.zoom ?? 1
-            });
         }
     }
     initializeEvents() {
@@ -1676,31 +1801,31 @@ class PlaitBoardComponent {
             this.board.dblclick(event);
         });
         fromEvent(document, 'keydown')
-            .pipe(takeUntil(this.destroy$), filter(() => {
-            return !IS_TEXT_EDITABLE.get(this.board) && !!this.board.selection;
-        }))
+            .pipe(takeUntil(this.destroy$), filter(() => this.isFocused && !PlaitBoard.hasBeenTextEditing(this.board)))
             .subscribe((event) => {
+            if (isHotkey$1(['mod+=', 'mod++'], { byKey: true })(event)) {
+                event.preventDefault();
+                this.zoomInHandle(false);
+            }
+            if (isHotkey$1('mod+-', { byKey: true })(event)) {
+                this.zoomOutHandle();
+                event.preventDefault();
+            }
             this.board?.keydown(event);
         });
         fromEvent(document, 'keyup')
-            .pipe(takeUntil(this.destroy$), filter(() => {
-            return !IS_TEXT_EDITABLE.get(this.board) && !!this.board.selection;
-        }))
+            .pipe(takeUntil(this.destroy$), filter(() => this.isFocused && !PlaitBoard.hasBeenTextEditing(this.board)))
             .subscribe((event) => {
             this.board?.keyup(event);
         });
         fromEvent(document, 'copy')
-            .pipe(takeUntil(this.destroy$), filter(() => {
-            return !IS_TEXT_EDITABLE.get(this.board) && !!this.board.selection;
-        }))
+            .pipe(takeUntil(this.destroy$), filter(() => this.isFocused && !PlaitBoard.hasBeenTextEditing(this.board)))
             .subscribe((event) => {
             event.preventDefault();
             this.board?.setFragment(event.clipboardData);
         });
         fromEvent(document, 'paste')
-            .pipe(takeUntil(this.destroy$), filter(() => {
-            return !IS_TEXT_EDITABLE.get(this.board) && !!this.board.selection && !this.readonly;
-        }))
+            .pipe(takeUntil(this.destroy$), filter(() => this.isFocused && !PlaitBoard.isReadonly(this.board) && !PlaitBoard.hasBeenTextEditing(this.board)))
             .subscribe((clipboardEvent) => {
             const mousePoint = BOARD_TO_MOVING_POINT.get(this.board);
             const rect = this.nativeElement.getBoundingClientRect();
@@ -1710,9 +1835,7 @@ class PlaitBoardComponent {
             }
         });
         fromEvent(document, 'cut')
-            .pipe(takeUntil(this.destroy$), filter(() => {
-            return !IS_TEXT_EDITABLE.get(this.board) && !!this.board.selection;
-        }))
+            .pipe(takeUntil(this.destroy$), filter(() => this.isFocused && !PlaitBoard.isReadonly(this.board) && !PlaitBoard.hasBeenTextEditing(this.board)))
             .subscribe((event) => {
             event.preventDefault();
             this.board?.setFragment(event.clipboardData);
@@ -1721,208 +1844,42 @@ class PlaitBoardComponent {
     }
     viewportScrollListener() {
         fromEvent(this.viewportContainer.nativeElement, 'scroll')
-            .pipe(takeUntil(this.destroy$), filter(() => {
-            return !!this.isFocused;
-        }))
+            .pipe(takeUntil(this.destroy$), filter(() => this.isFocused))
             .subscribe((event) => {
             const { scrollLeft, scrollTop } = event.target;
-            const left = this.viewportState.scrollLeft;
-            const top = this.viewportState.scrollTop;
-            if (Math.abs(left - scrollLeft) >= 1 || Math.abs(top - scrollTop) >= 1) {
-                this.setScrollLeft(scrollLeft);
-                this.setScrollTop(scrollTop);
-                this.setViewport();
-            }
+            const zoom = this.board.viewport.zoom;
+            const viewBox = getViewBox(this.board, zoom);
+            const origination = [scrollLeft / zoom + viewBox[0], scrollTop / zoom + viewBox[1]];
+            setViewport(this.board, origination);
         });
     }
     elementResizeListener() {
         this.resizeObserver = new ResizeObserver(() => {
             this.initViewportContainer();
-            this.calcViewBox(this.board.viewport.zoom);
-            this.updateViewBoxStyles();
-            this.updateViewportScrolling();
-            this.setViewport();
         });
         this.resizeObserver.observe(this.nativeElement);
     }
-    updateViewportState(state) {
-        this.viewportState = {
-            ...this.viewportState,
-            ...state
-        };
-    }
     initViewportContainer() {
-        const { width, height } = getBoardClientBox(this.board);
+        const { width, height } = getViewportContainerRect(this.board);
         this.renderer2.setStyle(this.viewportContainer.nativeElement, 'width', `${width}px`);
         this.renderer2.setStyle(this.viewportContainer.nativeElement, 'height', `${height}px`);
     }
-    initViewport(viewport = this.board.viewport) {
-        const originationCoord = viewport?.originationCoord;
-        const zoom = viewport?.zoom ?? this.viewportState.zoom;
-        if (originationCoord) {
-            const matrix = this.getMatrix();
-            const [pointX, pointY] = invertViewportCoordinates([0, 0], matrix);
-            const scrollLeft = this.viewportState.scrollLeft;
-            const scrollTop = this.viewportState.scrollTop;
-            const left = scrollLeft + (originationCoord[0] - pointX) * zoom;
-            const top = scrollTop + (originationCoord[1] - pointY) * zoom;
-            this.setScroll(left, top);
-        }
-        else {
-            this.adaptHandle();
-        }
-    }
-    calcViewBox(zoom = this.viewportState.zoom) {
-        zoom = clampZoomLevel(zoom);
-        const scrollBarWidth = this.plaitOptions?.hideScrollbar ? SCROLL_BAR_WIDTH : 0;
-        const viewportContainerBox = getViewportContainerBox(this.board);
-        const groupBBox = getRootGroupBBox(this.board, zoom);
-        const horizontalPadding = viewportContainerBox.width / 2;
-        const verticalPadding = viewportContainerBox.height / 2;
-        const viewportWidth = (groupBBox.right - groupBBox.left) * zoom + 2 * horizontalPadding + scrollBarWidth;
-        const viewportHeight = (groupBBox.bottom - groupBBox.top) * zoom + 2 * verticalPadding + scrollBarWidth;
-        const viewBox = [
-            groupBBox.left - horizontalPadding / zoom,
-            groupBBox.top - verticalPadding / zoom,
-            viewportWidth / zoom,
-            viewportHeight / zoom
-        ];
-        const matrix = this.getMatrix();
-        let scrollLeft;
-        let scrollTop;
-        if (matrix.length > 0) {
-            // focusPoint
-            const focusX = viewportContainerBox.x + viewportContainerBox.width / 2;
-            const focusY = viewportContainerBox.y + viewportContainerBox.height / 2;
-            const viewportContainerPoint = [focusX - viewportContainerBox.x, focusY - viewportContainerBox.y, 1];
-            const point = invertViewportCoordinates([viewportContainerPoint[0], viewportContainerPoint[1]], matrix);
-            const newMatrix = [zoom, 0, 0, 0, zoom, 0, -zoom * viewBox[0], -zoom * viewBox[1], 1];
-            const newPoint = transformMat3([], point, newMatrix);
-            scrollLeft = newPoint[0] - viewportContainerPoint[0];
-            scrollTop = newPoint[1] - viewportContainerPoint[1];
-        }
-        else {
-            scrollLeft = horizontalPadding;
-            scrollTop = verticalPadding;
-        }
-        this.updateViewportState({
-            viewportWidth,
-            viewportHeight,
-            zoom,
-            viewBox
-        });
-        this.setScrollLeft(scrollLeft);
-        this.setScrollTop(scrollTop);
-    }
-    getMatrix() {
-        const { viewBox, zoom, scrollLeft, scrollTop } = this.viewportState;
-        if (scrollLeft >= 0 && scrollTop >= 0) {
-            return [zoom, 0, 0, 0, zoom, 0, -scrollLeft - zoom * viewBox[0], -scrollTop - zoom * viewBox[1], 1];
-        }
-        return [];
-    }
-    setScrollLeft(left) {
-        const viewportContainerBox = getViewportContainerBox(this.board);
-        const scrollBarWidth = this.plaitOptions?.hideScrollbar ? SCROLL_BAR_WIDTH : 0;
-        const { viewportWidth } = this.viewportState;
-        const width = viewportWidth - viewportContainerBox.width + scrollBarWidth;
-        this.viewportState.scrollLeft = left < 0 ? 0 : left > width ? width : left;
-    }
-    setScrollTop(top) {
-        const viewportContainerBox = getViewportContainerBox(this.board);
-        const scrollBarWidth = this.plaitOptions?.hideScrollbar ? SCROLL_BAR_WIDTH : 0;
-        const { viewportHeight } = this.viewportState;
-        const height = viewportHeight - viewportContainerBox.height + scrollBarWidth;
-        this.viewportState.scrollTop = top < 0 ? 0 : top > height ? height : top;
-    }
-    setScroll(left, top) {
-        this.setScrollLeft(left);
-        this.setScrollTop(top);
-        this.updateViewBoxStyles();
-        this.updateViewportScrolling();
-        this.setViewport();
-    }
-    updateViewBoxStyles() {
-        const { host, viewportState } = this;
-        const { viewportWidth, viewportHeight, viewBox } = viewportState;
-        this.renderer2.setStyle(host, 'display', 'block');
-        this.renderer2.setStyle(host, 'width', `${viewportWidth}px`);
-        this.renderer2.setStyle(host, 'height', `${viewportHeight}px`);
-        if (viewBox && viewBox[2] > 0 && viewBox[3] > 0) {
-            this.renderer2.setAttribute(host, 'viewBox', viewBox.join(' '));
-        }
-    }
-    updateViewportScrolling() {
-        const { viewportContainer, viewportState } = this;
-        const { scrollLeft, scrollTop } = viewportState;
-        viewportContainer.nativeElement.scrollLeft = scrollLeft;
-        viewportContainer.nativeElement.scrollTop = scrollTop;
-    }
-    setViewport() {
-        const viewport = this.board?.viewport;
-        const oldOriginationCoord = viewport?.originationCoord ?? [];
-        const matrix = this.getMatrix();
-        const originationCoord = invertViewportCoordinates([0, 0], matrix);
-        if (!originationCoord.every((item, index) => item === oldOriginationCoord[index])) {
-            Transforms.setViewport(this.board, {
-                ...viewport,
-                zoom: this.viewportState.zoom,
-                originationCoord
-            });
-        }
-    }
     adaptHandle() {
-        const containerBox = getViewportContainerBox(this.board);
-        const rootGroup = this.host.firstChild;
-        const matrix = this.getMatrix();
-        const rootGroupBox = rootGroup.getBBox();
-        const centerPoint = [containerBox.width / 2, containerBox.height / 2];
-        const rootGroupCenterX = rootGroupBox.x + rootGroupBox.width / 2;
-        const rootGroupCenterY = rootGroupBox.y + rootGroupBox.height / 2;
-        const transformedPoint = transformMat3([], [rootGroupCenterX, rootGroupCenterY, 1], matrix);
-        const offsetLeft = centerPoint[0] - transformedPoint[0];
-        const offsetTop = centerPoint[1] - transformedPoint[1];
-        const { autoFitPadding, zoom, scrollLeft, scrollTop } = this.viewportState;
-        const viewportWidth = containerBox.width - 2 * autoFitPadding;
-        const viewportHeight = containerBox.height - 2 * autoFitPadding;
-        let newZoom = zoom;
-        if (viewportWidth < rootGroupBox.width || viewportHeight < rootGroupBox.height) {
-            newZoom = Math.min(viewportWidth / rootGroupBox.width, viewportHeight / rootGroupBox.height);
-        }
-        else {
-            newZoom = 1;
-        }
-        this.setScrollLeft(scrollLeft - offsetLeft);
-        this.setScrollTop(scrollTop - offsetTop);
-        this.calcViewBox(newZoom);
-        this.updateViewBoxStyles();
-        this.updateViewportScrolling();
-        this.setViewport();
+        fitViewport(this.board);
     }
-    zoomInHandle() {
-        this.calcViewBox(this.viewportState.zoom + 0.1);
-        this.updateViewBoxStyles();
-        this.updateViewportScrolling();
-        this.setViewport();
+    zoomInHandle(isCenter = true) {
+        changeZoom(this.board, this.board.viewport.zoom + 0.1, isCenter);
     }
     zoomOutHandle() {
-        this.calcViewBox(this.viewportState.zoom - 0.1);
-        this.updateViewBoxStyles();
-        this.updateViewportScrolling();
-        this.setViewport();
+        changeZoom(this.board, this.board.viewport.zoom - 0.1);
     }
     resetZoomHandel() {
-        this.calcViewBox(1);
-        this.updateViewBoxStyles();
-        this.updateViewportScrolling();
-        this.setViewport();
+        changeZoom(this.board, 1);
     }
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
+        this.resizeObserver && this.resizeObserver?.disconnect();
         BOARD_TO_ROUGH_SVG.delete(this.board);
         BOARD_TO_COMPONENT.delete(this.board);
         BOARD_TO_ROUGH_SVG.delete(this.board);
@@ -1933,40 +1890,9 @@ class PlaitBoardComponent {
     markForCheck() {
         this.cdr.markForCheck();
     }
-    scrollToRectangle(client) {
-        this.calcViewBox();
-        this.updateViewBoxStyles();
-        this.updateViewportScrolling();
-        this.setViewport();
-        const svgRect = this.host.getBoundingClientRect();
-        const viewportContainerBox = getViewportContainerBox(this.board);
-        if (svgRect.width > viewportContainerBox.width || svgRect.height > viewportContainerBox.height) {
-            const scrollBarWidth = this.plaitOptions?.hideScrollbar ? SCROLL_BAR_WIDTH : 0;
-            const matrix = this.getMatrix();
-            const [nodePointX, nodePointY] = convertToViewportCoordinates([client.x, client.y], matrix);
-            const [fullNodePointX, fullNodePointY] = convertToViewportCoordinates([client.x + client.width, client.y + client.height], matrix);
-            let newLeft = this.viewportState.scrollLeft;
-            let newTop = this.viewportState.scrollTop;
-            if (nodePointX < 0) {
-                newLeft -= Math.abs(nodePointX);
-            }
-            if (nodePointX > 0 && fullNodePointX > viewportContainerBox.width) {
-                newLeft += fullNodePointX - viewportContainerBox.width + scrollBarWidth;
-            }
-            if (nodePointY < 0) {
-                newTop -= Math.abs(nodePointY);
-            }
-            if (nodePointY > 0 && fullNodePointY > viewportContainerBox.height) {
-                newTop += fullNodePointY - viewportContainerBox.height + scrollBarWidth;
-            }
-            if (newLeft !== this.viewportState.scrollLeft || newTop !== this.viewportState.scrollTop) {
-                this.setScroll(newLeft, newTop);
-            }
-        }
-    }
 }
 PlaitBoardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlaitBoardComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PlaitBoardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PlaitBoardComponent, selector: "plait-board", inputs: { plaitValue: "plaitValue", plaitViewport: "plaitViewport", plaitPlugins: "plaitPlugins", plaitOptions: "plaitOptions" }, outputs: { plaitChange: "plaitChange", plaitBoardInitialized: "plaitBoardInitialized" }, host: { properties: { "class": "this.hostClass", "class.readonly": "this.readonly", "class.focused": "this.focused" } }, queries: [{ propertyName: "toolbarTemplateRef", first: true, predicate: ["plaitToolbar"], descendants: true }], viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, static: true }, { propertyName: "viewportContainer", first: true, predicate: ["viewportContainer"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
+PlaitBoardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PlaitBoardComponent, selector: "plait-board", inputs: { plaitValue: "plaitValue", plaitViewport: "plaitViewport", plaitPlugins: "plaitPlugins", plaitOptions: "plaitOptions" }, outputs: { plaitChange: "plaitChange", plaitBoardInitialized: "plaitBoardInitialized" }, host: { properties: { "class": "this.hostClass", "class.readonly": "this.readonly", "class.focused": "this.isFocused" } }, queries: [{ propertyName: "toolbarTemplateRef", first: true, predicate: ["plaitToolbar"], descendants: true }], viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, static: true }, { propertyName: "viewportContainer", first: true, predicate: ["viewportContainer"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <div class="viewport-container" #viewportContainer>
             <svg #svg width="100%" height="100%" style="position: relative;"><g class="element-host"></g></svg>
             <plait-element
@@ -2032,7 +1958,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], readonly: [{
                 type: HostBinding,
                 args: ['class.readonly']
-            }], focused: [{
+            }], isFocused: [{
                 type: HostBinding,
                 args: ['class.focused']
             }], svg: [{
@@ -2129,6 +2055,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }] });
 
+function withMoving(board) {
+    const { mousedown, mousemove, globalMouseup, globalMousemove } = board;
+    let offsetX = 0;
+    let offsetY = 0;
+    let isPreventDefault = false;
+    let startPoint;
+    let activeElements = [];
+    board.mousedown = event => {
+        const host = BOARD_TO_HOST.get(board);
+        const point = transformPoint(board, toPoint(event.x, event.y, host));
+        const ranges = [{ anchor: point, focus: point }];
+        let movableElements = board.children.filter(item => PlaitElement.isElement(item) && board.isMovable(item));
+        if (movableElements.length) {
+            startPoint = point;
+            const selectedRootElements = getSelectedElements(board).filter(item => movableElements.includes(item));
+            const intersectionSelectedElement = isIntersectionElements(board, selectedRootElements, ranges);
+            if (intersectionSelectedElement) {
+                activeElements = selectedRootElements;
+            }
+            else {
+                activeElements = movableElements.filter(item => ranges.some(range => {
+                    return board.isIntersectionSelection(item, range);
+                }));
+            }
+        }
+        mousedown(event);
+    };
+    board.mousemove = event => {
+        if (startPoint && activeElements?.length) {
+            if (!isPreventDefault) {
+                isPreventDefault = true;
+            }
+            const host = BOARD_TO_HOST.get(board);
+            const endPoint = transformPoint(board, toPoint(event.x, event.y, host));
+            offsetX = endPoint[0] - startPoint[0];
+            offsetY = endPoint[1] - startPoint[1];
+            throttleRAF(() => {
+                const currentElements = activeElements.map(activeElement => {
+                    const [x, y] = activeElement?.points[0];
+                    const index = board.children.findIndex(item => item.id === activeElement.id);
+                    Transforms.setNode(board, {
+                        points: [[x + offsetX, y + offsetY]]
+                    }, [index]);
+                    MERGING.set(board, true);
+                    return PlaitNode.get(board, [index]);
+                });
+                addMovingElements(board, currentElements);
+            });
+        }
+        if (isPreventDefault) {
+            // 阻止 move 过程中触发画布滚动行为
+            event.preventDefault();
+        }
+        mousemove(event);
+    };
+    board.globalMousemove = event => {
+        if (startPoint) {
+            const inPliatBordElement = isInPlaitBoard(board, event.x, event.y);
+            if (!inPliatBordElement) {
+                cancelMove(board);
+            }
+        }
+        globalMousemove(event);
+    };
+    board.globalMouseup = event => {
+        isPreventDefault = false;
+        if (startPoint) {
+            cancelMove(board);
+        }
+        globalMouseup(event);
+    };
+    function cancelMove(board) {
+        startPoint = null;
+        offsetX = 0;
+        offsetY = 0;
+        activeElements = [];
+        removeMovingElements(board);
+        MERGING.set(board, false);
+    }
+    return board;
+}
+
 /*
  * Public API Surface of plait
  */
@@ -2137,5 +2145,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BOARD_TO_COMPONENT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_MOVING_POINT, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BoardTransforms, CLIP_BOARD_FORMAT_KEY, ELEMENT_TO_PLUGIN_COMPONENT, FLUSHING, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_SAFARI, IS_TEXT_EDITABLE, MAX_RADIUS, MERGING, NS, Path, PlaitBoard, PlaitBoardComponent, PlaitElement, PlaitElementComponent, PlaitHistoryBoard, PlaitModule, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPointerType, PlaitToolbarComponent, RectangleClient, SAVING, SCROLL_BAR_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, Selection, Transforms, Viewport, addSelectedElement, arrowPoints, cacheSelectedElements, calcElementIntersectionSelection, clampZoomLevel, convertToViewportCoordinates, createG, createSVG, createText, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, drawArrow, drawRoundRectangle, getBoardClientBox, getBoardRectangle, getRectangleByElements, getRootGroupBBox, getSelectedElements, getViewportContainerBox, hasBeforeContextChange, hotkeys, idCreator, inverse, invertMatrix, invertViewportCoordinates, isNoSelectionElement, isNullOrUndefined, isSelectedElement, isSetViewportOperation, normalizePoint, removeSelectedElement, rotate, shouldClear, shouldMerge, shouldSave, toPoint, transformMat3, transformPoint, transformPoints };
+export { 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_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BoardTransforms, CLIP_BOARD_FORMAT_KEY, ELEMENT_TO_PLUGIN_COMPONENT, FLUSHING, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_SAFARI, IS_TEXT_EDITABLE, MAX_RADIUS, MERGING, NS, Path, PlaitBoard, PlaitBoardComponent, PlaitElement, PlaitElementComponent, PlaitHistoryBoard, PlaitModule, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPointerType, PlaitToolbarComponent, RectangleClient, SAVING, SCROLL_BAR_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, Selection, Transforms, Viewport, addMovingElements, addSelectedElement, arrowPoints, cacheMovingElements, cacheSelectedElements, calcElementIntersectionSelection, changeZoom, clampZoomLevel, clearSelectionMoving, createG, createSVG, createText, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, drawArrow, drawRoundRectangle, fitViewport, getBoardRectangle, getElementHostBBox, getMovingElements, getRectangleByElements, getSelectedElements, getTemporaryElements, getViewBox, getViewportContainerRect, hasBeforeContextChange, hotkeys, idCreator, initializeViewport, initializeViewportContainerOffset, inverse, isInPlaitBoard, isIntersectionElements, isNullOrUndefined, isSelectedElement, isSelectionMoving, isSetViewportOperation, normalizePoint, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setSVGViewBox, setSelectionMoving, setViewport, setViewportContainerScroll, shouldClear, shouldMerge, shouldSave, throttleRAF, toPoint, transformPoint, transformPoints, updateViewportContainerOffset, withMoving, withSelection };
 //# sourceMappingURL=plait-core.mjs.map