@plait/core 0.75.0 → 0.76.0

package/fesm2022/plait-core.mjs

@@ -1398,6 +1398,9 @@ const isSecondaryPointer = (event) => {
 const isMainPointer = (event) => {
     return event.button === POINTER_BUTTON.MAIN;
 };
+const isWheelPointer = (event) => {
+    return event.button === POINTER_BUTTON.WHEEL;
+};
 
 function createForeignObject(x, y, width, height) {
     var newForeignObject = document.createElementNS(NS, 'foreignObject');
@@ -1437,6 +1440,7 @@ const IS_EDGE_LEGACY = typeof navigator !== 'undefined' && /Edge?\/(?:[0-6][0-9]
 const IS_CHROME = typeof navigator !== 'undefined' && /Chrome/i.test(navigator.userAgent);
 // Native beforeInput events don't work well with react on Chrome 75 and older, Chrome 76+ can use beforeInput
 const IS_CHROME_LEGACY = typeof navigator !== 'undefined' && /Chrome?\/(?:[0-7][0-5]|[0-6][0-9])/i.test(navigator.userAgent);
+const IS_WINDOWS = typeof navigator !== 'undefined' && /Windows/.test(navigator.userAgent);
 
 // Credits to slate - https://github.com/ianstormtaylor/slate
 /**
@@ -1752,7 +1756,7 @@ class DebugGenerator {
         }
         const gArray = getTemporaryGArray(this.debugKey);
         setTemporaryGArray(this.debugKey, []);
-        gArray.forEach(g => g.remove());
+        gArray.forEach((g) => g.remove());
     }
     drawPolygon(board, points, options) {
         if (!isDebug(this.debugKey)) {
@@ -1760,7 +1764,7 @@ class DebugGenerator {
         }
         const polygonG = PlaitBoard.getRoughSVG(board).polygon(points, options || { stroke: 'red' });
         polygonG.classList.add(this.debugKey);
-        PlaitBoard.getElementActiveHost(board).append(polygonG);
+        PlaitBoard.getElementTopHost(board).append(polygonG);
         const gArray = getTemporaryGArray(this.debugKey);
         gArray.push(polygonG);
         setTemporaryGArray(this.debugKey, gArray);
@@ -1772,7 +1776,7 @@ class DebugGenerator {
         }
         const lineG = PlaitBoard.getRoughSVG(board).linearPath(points, options || { stroke: 'red' });
         lineG.classList.add(this.debugKey);
-        PlaitBoard.getElementActiveHost(board).append(lineG);
+        PlaitBoard.getElementTopHost(board).append(lineG);
         const gArray = getTemporaryGArray(this.debugKey);
         gArray.push(lineG);
         setTemporaryGArray(this.debugKey, gArray);
@@ -1791,7 +1795,7 @@ class DebugGenerator {
         }
         const rectangleG = PlaitBoard.getRoughSVG(board).rectangle(rectangle.x, rectangle.y, rectangle.width, rectangle.height, options || { stroke: 'red' });
         rectangleG.classList.add(this.debugKey);
-        PlaitBoard.getElementActiveHost(board).append(rectangleG);
+        PlaitBoard.getElementTopHost(board).append(rectangleG);
         const gArray = getTemporaryGArray(this.debugKey);
         gArray.push(rectangleG);
         setTemporaryGArray(this.debugKey, gArray);
@@ -1805,7 +1809,7 @@ class DebugGenerator {
         points.forEach((p, i) => {
             const circle = PlaitBoard.getRoughSVG(board).circle(p[0], p[1], isCumulativeDiameter ? diameter * (i + 1) : diameter, Object.assign({}, { stroke: 'red', fill: 'red', fillStyle: 'solid' }, options || {}));
             circle.classList.add(this.debugKey);
-            PlaitBoard.getElementActiveHost(board).append(circle);
+            PlaitBoard.getElementTopHost(board).append(circle);
             const gArray = getTemporaryGArray(this.debugKey);
             gArray.push(circle);
             result.push(circle);
@@ -2225,6 +2229,30 @@ function toHostPoint(board, x, y) {
     const rect = host.getBoundingClientRect();
     return [x - rect.x, y - rect.y];
 }
+function toActiveRectangleFromViewBoxRectangle(board, rectangle) {
+    const leftTop = [rectangle.x, rectangle.y];
+    const rightBottom = [rectangle.x + rectangle.width, rectangle.y + rectangle.height];
+    const leftTopOfActive = toActivePointFromViewBoxPoint(board, leftTop);
+    const rightBottomOfActive = toActivePointFromViewBoxPoint(board, rightBottom);
+    return RectangleClient.getRectangleByPoints([leftTopOfActive, rightBottomOfActive]);
+}
+function toActivePointFromViewBoxPoint(board, point) {
+    const screenPoint = toScreenPointFromHostPoint(board, toHostPointFromViewBoxPoint(board, point));
+    return toActivePoint(board, screenPoint[0], screenPoint[1]);
+}
+/**
+ * Get the screen point starting from the upper left corner of the svg element (based on the svg screen coordinate system)
+ */
+function toActivePoint(board, x, y) {
+    const boardContainer = PlaitBoard.getBoardContainer(board);
+    const rect = boardContainer.getBoundingClientRect();
+    return [x - rect.x, y - rect.y];
+}
+function toScreenPointFromActivePoint(board, activePoint) {
+    const boardContainer = PlaitBoard.getBoardContainer(board);
+    const rect = boardContainer.getBoundingClientRect();
+    return [rect.x + activePoint[0], rect.y + activePoint[1]];
+}
 /**
  * Get the point in the coordinate system of the svg viewBox
  */
@@ -2237,7 +2265,7 @@ function toViewBoxPoint(board, hostPoint) {
     return newPoint;
 }
 function toViewBoxPoints(board, hostPoints) {
-    const newPoints = hostPoints.map(point => {
+    const newPoints = hostPoints.map((point) => {
         return toViewBoxPoint(board, point);
     });
     return newPoints;
@@ -3026,7 +3054,7 @@ function isHandleSelection(board) {
     return board.pointer !== PlaitPointerType.hand && !options.isDisabledSelection && !PlaitBoard.isReadonly(board);
 }
 function hasSetSelectionOperation(board) {
-    return !!board.operations.find(op => PlaitOperation.isSetSelectionOperation(op));
+    return !!board.operations.find((op) => PlaitOperation.isSetSelectionOperation(op));
 }
 function getTemporaryElements(board) {
     const ref = BOARD_TO_TEMPORARY_ELEMENTS.get(board);
@@ -3046,8 +3074,9 @@ function deleteTemporaryElements(board) {
 function drawSelectionRectangleG(board) {
     const elements = getSelectedElements(board);
     const rectangle = getRectangleByElements(board, elements, false);
-    if (rectangle.width > 0 && rectangle.height > 0 && elements.length > 1) {
-        const selectionRectangleG = drawRectangle(board, RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH), {
+    const activeRectangle = toActiveRectangleFromViewBoxRectangle(board, rectangle);
+    if (activeRectangle.width > 0 && activeRectangle.height > 0 && elements.length > 1) {
+        const selectionRectangleG = drawRectangle(board, RectangleClient.inflate(activeRectangle, ACTIVE_STROKE_WIDTH), {
             stroke: SELECTION_BORDER_COLOR,
             strokeWidth: ACTIVE_STROKE_WIDTH,
             fillStyle: 'solid'
@@ -3055,7 +3084,7 @@ function drawSelectionRectangleG(board) {
         selectionRectangleG.classList.add(SELECTION_RECTANGLE_CLASS_NAME, SELECTION_RECTANGLE_BOUNDING_CLASS_NAME);
         const angle = getSelectionAngle(elements);
         if (angle) {
-            setAngleForG(selectionRectangleG, RectangleClient.getCenterPoint(rectangle), angle);
+            setAngleForG(selectionRectangleG, RectangleClient.getCenterPoint(activeRectangle), angle);
         }
         return selectionRectangleG;
     }
@@ -3068,7 +3097,7 @@ function setSelectedElementsWithGroup(board, elements, isShift) {
     const selectedElements = getSelectedElements(board);
     if (!Selection.isCollapsed(board.selection)) {
         let newElements = [...selectedElements];
-        elements.forEach(item => {
+        elements.forEach((item) => {
             if (!item.groupId) {
                 newElements.push(item);
             }
@@ -3084,7 +3113,7 @@ function setSelectedElementsWithGroup(board, elements, isShift) {
         const hitElementGroups = getGroupByElement(board, hitElement, true);
         if (hitElementGroups.length) {
             const elementsInHighestGroup = getElementsInGroup(board, hitElementGroups[hitElementGroups.length - 1], true) || [];
-            const isSelectGroupElement = selectedElements.some(element => elementsInHighestGroup.map(item => item.id).includes(element.id));
+            const isSelectGroupElement = selectedElements.some((element) => elementsInHighestGroup.map((item) => item.id).includes(element.id));
             if (isShift) {
                 cacheSelectedElementsWithGroupOnShift(board, elements, isSelectGroupElement, elementsInHighestGroup);
             }
@@ -3103,16 +3132,16 @@ function cacheSelectedElementsWithGroupOnShift(board, elements, isSelectGroupEle
         pendingElements = elementsInHighestGroup;
     }
     else {
-        const isHitSelectedElement = selectedElements.some(item => item.id === hitElement.id);
-        const selectedElementsInGroup = elementsInHighestGroup.filter(item => selectedElements.includes(item));
+        const isHitSelectedElement = selectedElements.some((item) => item.id === hitElement.id);
+        const selectedElementsInGroup = elementsInHighestGroup.filter((item) => selectedElements.includes(item));
         if (isHitSelectedElement) {
-            pendingElements = selectedElementsInGroup.filter(item => item.id !== hitElement.id);
+            pendingElements = selectedElementsInGroup.filter((item) => item.id !== hitElement.id);
         }
         else {
             pendingElements.push(...selectedElementsInGroup, ...elements);
         }
     }
-    elementsInHighestGroup.forEach(element => {
+    elementsInHighestGroup.forEach((element) => {
         if (newElements.includes(element)) {
             newElements.splice(newElements.indexOf(element), 1);
         }
@@ -3915,14 +3944,14 @@ const rotatePoints = (points, centerPoint, angle) => {
         return rotate(points[0], points[1], centerPoint[0], centerPoint[1], angle);
     }
     else {
-        return points.map(point => {
+        return points.map((point) => {
             return rotate(point[0], point[1], centerPoint[0], centerPoint[1], angle || 0);
         });
     }
 };
 const getSelectionAngle = (elements) => {
     let angle = elements[0]?.angle || 0;
-    elements.forEach(item => {
+    elements.forEach((item) => {
         if (item.angle !== angle && !approximately(((item.angle || 0) % (Math.PI / 2)) - (angle % (Math.PI / 2)), 0)) {
             angle = 0;
         }
@@ -3937,7 +3966,7 @@ const hasSameAngle = (elements) => {
     if (angle === undefined) {
         return false;
     }
-    return !elements.some(item => item.angle !== angle);
+    return !elements.some((item) => item.angle !== angle);
 };
 const getRotatedBoundingRectangle = (rectanglesCornerPoints, angle) => {
     let rectanglesFromOrigin = [];
@@ -3961,7 +3990,7 @@ const getOffsetAfterRotate = (rectangle, rotateCenterPoint, angle) => {
 };
 const rotatedDataPoints = (points, rotateCenterPoint, angle) => {
     const { offsetX, offsetY } = getOffsetAfterRotate(RectangleClient.getRectangleByPoints(points), rotateCenterPoint, angle);
-    return points.map(p => [p[0] + offsetX, p[1] + offsetY]);
+    return points.map((p) => [p[0] + offsetX, p[1] + offsetY]);
 };
 const hasValidAngle = (node) => {
     return isValidAngle(node.angle);
@@ -3989,10 +4018,11 @@ const rotatePointsByAngle = (points, angle) => {
         return null;
     }
 };
-const rotateAntiPointsByElement = (points, element) => {
+const rotateAntiPointsByElement = (board, points, element, isToActive = false) => {
     if (hasValidAngle(element)) {
         let rectangle = RectangleClient.getRectangleByPoints(element.points);
-        const centerPoint = RectangleClient.getCenterPoint(rectangle);
+        const activeRectangle = isToActive ? toActiveRectangleFromViewBoxRectangle(board, rectangle) : rectangle;
+        const centerPoint = RectangleClient.getCenterPoint(activeRectangle);
         return rotatePoints(points, centerPoint, element.angle ? -element.angle : 0);
     }
     else {
@@ -4020,7 +4050,7 @@ function radiansToDegrees(r) {
 function rotateElements(board, elements, angle) {
     const selectionRectangle = getRectangleByElements(board, elements, false);
     const selectionCenterPoint = RectangleClient.getCenterPoint(selectionRectangle);
-    elements.forEach(item => {
+    elements.forEach((item) => {
         const originAngle = item.angle;
         const points = rotatedDataPoints(item.points, selectionCenterPoint, normalizeAngle(angle));
         const path = PlaitBoard.findPath(board, item);
@@ -4248,7 +4278,10 @@ const PlaitBoard = {
     getElementUpperHost(board) {
         return BOARD_TO_ELEMENT_HOST.get(board)?.upperHost;
     },
-    getElementActiveHost(board) {
+    getElementTopHost(board) {
+        return BOARD_TO_ELEMENT_HOST.get(board)?.topHost;
+    },
+    getActiveHost(board) {
         return BOARD_TO_ELEMENT_HOST.get(board)?.activeHost;
     },
     getRoughSVG(board) {
@@ -5613,24 +5646,44 @@ function withBoard(board) {
 }
 
 const isSmartHand = (board, event) => {
-    return (PlaitBoard.isPointer(board, PlaitPointerType.hand) ||
-        (PlaitBoard.isPointer(board, PlaitPointerType.selection) && isMobileDeviceEvent(event)));
+    return PlaitBoard.isPointer(board, PlaitPointerType.selection) && isMobileDeviceEvent(event);
 };
 
+const ShortcutKey = 'Space';
 function withHandPointer(board) {
     const { pointerDown, pointerMove, globalPointerUp, keyDown, keyUp, pointerUp } = board;
-    let isMoving = false;
+    let isHandMoving = false;
     let movingPoint = null;
     let pointerDownEvent = null;
+    let hasWheelPressed = false;
+    let beingPressedShortcutKey = false;
     board.pointerDown = (event) => {
         const options = board.getPluginOptions(PlaitPluginKey.withHand);
         const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         const isHitTarget = isHitElement(board, point);
-        if ((options?.isHandMode(board, event) || (isSmartHand(board, event) && !isHitTarget)) && isMainPointer(event)) {
+        const canEnterHandMode = options?.isHandMode(board, event) ||
+            PlaitBoard.isPointer(board, PlaitPointerType.hand) ||
+            (isSmartHand(board, event) && !isHitTarget) ||
+            beingPressedShortcutKey;
+        if (canEnterHandMode && isMainPointer(event)) {
             movingPoint = {
                 x: event.x,
                 y: event.y
             };
+            if (!PlaitBoard.isPointer(board, PlaitPointerType.hand)) {
+                PlaitBoard.getBoardContainer(board).classList.add('viewport-moving');
+            }
+        }
+        else if (isWheelPointer(event)) {
+            hasWheelPressed = true;
+            // Prevent the browser's default behavior of scrolling the page when the mouse wheel is pressed.
+            event.preventDefault();
+            movingPoint = {
+                x: event.x,
+                y: event.y
+            };
+            isHandMoving = true;
+            PlaitBoard.getBoardContainer(board).classList.add('viewport-moving');
         }
         pointerDownEvent = event;
         pointerDown(event);
@@ -5645,19 +5698,20 @@ function withHandPointer(board) {
         // withHand behavior is only triggered if drag selection state is not initiated.
         const triggerDistance = DRAG_SELECTION_PRESS_AND_MOVE_BUFFER + 4;
         if (movingPoint &&
-            !isMoving &&
+            !isHandMoving &&
             !isSelectionMoving(board) &&
             pointerDownEvent &&
             distanceBetweenPointAndPoint(pointerDownEvent.x, pointerDownEvent.y, event.x, event.y) > triggerDistance &&
             !isMovingElements(board)) {
-            isMoving = true;
+            isHandMoving = true;
             PlaitBoard.getBoardContainer(board).classList.add('viewport-moving');
         }
-        if ((options?.isHandMode(board, event) || isSmartHand(board, event)) &&
-            isMoving &&
-            movingPoint &&
-            !isSelectionMoving(board) &&
-            !isMovingElements(board)) {
+        const canEnterHandMode = options?.isHandMode(board, event) ||
+            PlaitBoard.isPointer(board, PlaitPointerType.hand) ||
+            isSmartHand(board, event) ||
+            hasWheelPressed ||
+            beingPressedShortcutKey;
+        if (canEnterHandMode && isHandMoving && movingPoint && !isSelectionMoving(board) && !isMovingElements(board)) {
             const viewportContainer = PlaitBoard.getViewportContainer(board);
             const left = viewportContainer.scrollLeft - (event.x - movingPoint.x);
             const top = viewportContainer.scrollTop - (event.y - movingPoint.y);
@@ -5668,7 +5722,7 @@ function withHandPointer(board) {
         pointerMove(event);
     };
     board.pointerUp = (event) => {
-        if (isMoving) {
+        if (isHandMoving) {
             return;
         }
         pointerUp(event);
@@ -5677,24 +5731,25 @@ function withHandPointer(board) {
         if (movingPoint) {
             movingPoint = null;
         }
-        if (isMoving) {
-            isMoving = false;
-            PlaitBoard.getBoardContainer(board).classList.remove('viewport-moving');
-        }
+        isHandMoving = false;
+        PlaitBoard.getBoardContainer(board).classList.remove('viewport-moving');
+        hasWheelPressed = false;
         globalPointerUp(event);
     };
     board.keyDown = (event) => {
-        if (event.code === 'Space') {
+        if (event.code === ShortcutKey) {
             if (!PlaitBoard.isPointer(board, PlaitPointerType.hand)) {
-                BoardTransforms.updatePointerType(board, PlaitPointerType.hand);
+                beingPressedShortcutKey = true;
+                PlaitBoard.getBoardContainer(board).classList.add('viewport-moving');
             }
             event.preventDefault();
         }
         keyDown(event);
     };
     board.keyUp = (event) => {
-        if (!board.options.readonly && event.code === 'Space') {
-            BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
+        if (!board.options.readonly && event.code === ShortcutKey) {
+            beingPressedShortcutKey = true;
+            PlaitBoard.getBoardContainer(board).classList.remove('viewport-moving');
         }
         keyUp(event);
     };
@@ -6096,7 +6151,7 @@ function withMoving(board) {
                 event.preventDefault();
                 if (startPoint && activeElements.length && !PlaitBoard.hasBeenTextEditing(board)) {
                     pendingNodesG = drawPendingNodesG(board, activeElements, offsetX, offsetY);
-                    pendingNodesG && PlaitBoard.getElementActiveHost(board).append(pendingNodesG);
+                    pendingNodesG && PlaitBoard.getElementTopHost(board).append(pendingNodesG);
                 }
             }
         }
@@ -6180,10 +6235,10 @@ function withMoving(board) {
                     offsetY += ref.deltaY;
                     snapG = ref.snapG;
                     snapG.classList.add(ACTIVE_MOVING_CLASS_NAME);
-                    PlaitBoard.getElementActiveHost(board).append(snapG);
+                    PlaitBoard.getElementTopHost(board).append(snapG);
                     if (event.altKey) {
                         pendingNodesG = drawPendingNodesG(board, activeElements, offsetX, offsetY);
-                        pendingNodesG && PlaitBoard.getElementActiveHost(board).append(pendingNodesG);
+                        pendingNodesG && PlaitBoard.getElementTopHost(board).append(pendingNodesG);
                     }
                     else {
                         const currentElements = updatePoints(board, activeElements, offsetX, offsetY);
@@ -6380,11 +6435,10 @@ function withRelatedFragment(board) {
 
 function withSelection(board) {
     const { pointerDown, pointerUp, pointerMove, globalPointerUp, onChange, afterChange, drawSelectionRectangle } = board;
-    let start = null;
-    let end = null;
+    let screenStart = null;
+    let screenEnd = null;
     let selectionMovingG;
     let selectionRectangleG;
-    let previousSelectedElements;
     let isShift = false;
     let timerId = null;
     let pointerDownEvent = null;
@@ -6399,18 +6453,18 @@ function withSelection(board) {
         const isHitTarget = isHitElement(board, point);
         const options = getSelectionOptions(board);
         if (PlaitBoard.isPointer(board, PlaitPointerType.selection) &&
+            isMainPointer(event) &&
             !isHitTarget &&
             options.isMultipleSelection &&
             !options.isDisabledSelection) {
-            // start drag selection
             if (isMobileDeviceEvent(event)) {
                 timerId = setTimeout(() => {
-                    start = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+                    screenStart = [event.x, event.y];
                     timerId = null;
                 }, 120);
             }
             else {
-                start = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+                screenStart = [event.x, event.y];
             }
         }
         pointerDownEvent = event;
@@ -6423,14 +6477,20 @@ function withSelection(board) {
             clearTimeout(timerId);
             timerId = null;
         }
-        if (PlaitBoard.isPointer(board, PlaitPointerType.selection) && start) {
-            const movedTarget = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-            const rectangle = RectangleClient.getRectangleByPoints([start, movedTarget]);
+        if (PlaitBoard.isPointer(board, PlaitPointerType.selection) && screenStart) {
+            event.preventDefault();
+            screenEnd = [event.x, event.y];
+            const rectangle = RectangleClient.getRectangleByPoints([
+                toActivePoint(board, ...screenStart),
+                toActivePoint(board, ...screenEnd)
+            ]);
             selectionMovingG?.remove();
-            end = movedTarget;
             throttleRAF(board, 'with-selection', () => {
-                if (start && end) {
-                    Transforms.setSelection(board, { anchor: start, focus: end });
+                if (screenStart && screenEnd) {
+                    Transforms.setSelection(board, {
+                        anchor: toViewBoxPoint(board, toHostPoint(board, screenStart[0], screenStart[1])),
+                        focus: toViewBoxPoint(board, toHostPoint(board, screenEnd[0], screenEnd[1]))
+                    });
                 }
             });
             setSelectionMoving(board);
@@ -6440,7 +6500,7 @@ function withSelection(board) {
                 fill: SELECTION_FILL_COLOR,
                 fillStyle: 'solid'
             });
-            PlaitBoard.getElementActiveHost(board).append(selectionMovingG);
+            PlaitBoard.getActiveHost(board).append(selectionMovingG);
         }
         pointerMove(event);
     };
@@ -6458,10 +6518,13 @@ function withSelection(board) {
         pointerUp(event);
     };
     board.globalPointerUp = (event) => {
-        if (start && end) {
+        if (screenStart && screenEnd) {
             selectionMovingG?.remove();
             clearSelectionMoving(board);
-            Transforms.setSelection(board, { anchor: start, focus: end });
+            Transforms.setSelection(board, {
+                anchor: toViewBoxPoint(board, toHostPoint(board, screenStart[0], screenStart[1])),
+                focus: toViewBoxPoint(board, toHostPoint(board, screenEnd[0], screenEnd[1]))
+            });
         }
         const options = getSelectionOptions(board);
         if (PlaitBoard.isFocus(board) && !options.isPreventClearSelection) {
@@ -6470,12 +6533,12 @@ function withSelection(board) {
             const isAttachedElement = event.target instanceof Element && 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 && isInDocument) {
+            if (!isInBoard && !screenStart && !isAttachedElement && isInDocument) {
                 Transforms.setSelection(board, null);
             }
         }
-        start = null;
-        end = null;
+        screenStart = null;
+        screenEnd = null;
         if (timerId) {
             clearTimeout(timerId);
             timerId = null;
@@ -6548,13 +6611,12 @@ function withSelection(board) {
                     }
                 }
                 const newElements = getSelectedElements(board);
-                previousSelectedElements = [...newElements];
                 deleteTemporaryElements(board);
                 if (!isSelectionMoving(board)) {
                     selectionRectangleG?.remove();
                     if (newElements.length > 1) {
                         selectionRectangleG = board.drawSelectionRectangle();
-                        PlaitBoard.getElementActiveHost(board).append(selectionRectangleG);
+                        PlaitBoard.getActiveHost(board).append(selectionRectangleG);
                     }
                 }
             }
@@ -6569,14 +6631,9 @@ function withSelection(board) {
             try {
                 const currentSelectedElements = getSelectedElements(board);
                 if (currentSelectedElements.length && currentSelectedElements.length > 1) {
-                    if (previousSelectedElements &&
-                        (currentSelectedElements.length !== previousSelectedElements.length ||
-                            currentSelectedElements.some((c, index) => c !== previousSelectedElements[index]))) {
-                        selectionRectangleG?.remove();
-                        selectionRectangleG = board.drawSelectionRectangle();
-                        PlaitBoard.getElementActiveHost(board).append(selectionRectangleG);
-                        previousSelectedElements = [...currentSelectedElements];
-                    }
+                    selectionRectangleG?.remove();
+                    selectionRectangleG = board.drawSelectionRectangle();
+                    PlaitBoard.getActiveHost(board).append(selectionRectangleG);
                 }
                 else {
                     selectionRectangleG?.remove();
@@ -6596,34 +6653,6 @@ function withSelection(board) {
     return board;
 }
 
-function withViewport(board) {
-    const { onChange } = board;
-    const throttleUpdate = debounce(() => {
-        initializeViewBox(board);
-        updateViewportOffset(board);
-    }, 500, { leading: true });
-    board.onChange = () => {
-        const isSetViewport = board.operations.length && board.operations.some(op => op.type === 'set_viewport');
-        const isOnlySetSelection = board.operations.length && board.operations.every(op => op.type === 'set_selection');
-        if (isOnlySetSelection) {
-            return onChange();
-        }
-        if (isSetViewport && isFromScrolling(board)) {
-            setIsFromScrolling(board, false);
-            return onChange();
-        }
-        if (isSetViewport) {
-            initializeViewBox(board);
-            updateViewportOffset(board);
-        }
-        else {
-            throttleUpdate();
-        }
-        onChange();
-    };
-    return board;
-}
-
 /**
  * 1.create board instance
  * 2.build fake node weak map
@@ -6792,5 +6821,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_CONTEXT, 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_VIEWPORT_ORIGINATION, BoardTransforms, C, CAPS_LOCK, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, ColorfulThemeColor, CoreTransforms, CursorClass, D, DASH, DEFAULT_COLOR, DELETE, DOWN_ARROW, DRAG_SELECTION_PRESS_AND_MOVE_BUFFER, DarkThemeColor, DebugGenerator, DefaultThemeColor, Direction, E, EIGHT, ELEMENT_TO_REF, END, ENTER, EQUALS, ESCAPE, ElementFlavour, 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, HISTORY, HIT_DISTANCE_BUFFER, HOME, HOST_CLASS_NAME, I, INSERT, IS_APPLE, IS_BOARD_ALIVE, 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, KEY_TO_ELEMENT_MAP, L, LAST_MEDIA, LEFT_ARROW, ListRender, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, MAX_RADIUS, MAX_ZOOM, MERGING, META, MIN_ZOOM, MUTE, N, NINE, NODE_TO_CONTAINER_G, NODE_TO_G, 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, PlaitBoardContext, PlaitElement, PlaitGroupElement, PlaitHistoryBoard, PlaitNode, PlaitOperation, PlaitPluginKey, PlaitPointerType, Point, Q, QUESTION_MARK, R, RESIZE_CURSORS, RESIZE_HANDLE_CLASS_NAME, RIGHT_ARROW, ROTATE_HANDLE_CLASS_NAME, RectangleClient, ResizeCursorClass, RetroThemeColor, RgbaToHEX, S, SAVING, SCROLL_BAR_WIDTH, SCROLL_LOCK, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, SELECTION_RECTANGLE_BOUNDING_CLASS_NAME, SELECTION_RECTANGLE_CLASS_NAME, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SNAPPING_STROKE_WIDTH, SNAP_TOLERANCE, SPACE, SPLITTING_ONCE, Selection, SoftThemeColor, StarryThemeColor, T, TAB, THREE, TILDE, TWO, ThemeColorMode, ThemeColors, Transforms, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, Viewport, W, WritableClipboardOperationType, WritableClipboardType, X, Y, Z, ZERO, ZOOM_STEP, addClipboardContext, addOrCreateClipboardContext, addSelectedElement, approximately, arrowPoints, buildPlaitHtml, cacheMovingElements, cacheSelectedElements, cacheSelectedElementsWithGroup, cacheSelectedElementsWithGroupOnShift, calcNewViewBox, canAddGroup, canRemoveGroup, canSetZIndex, catmullRomFitting, ceilToDecimal, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createBoard, createClipboardContext, createDebugGenerator, createFakeEvent, createForeignObject, createG, createGroup, createGroupRectangleG, createKeyboardEvent, createMask, createModModifierKeys, createMouseEvent, createPath, createPointerEvent, createRect, createSVG, createTestingBoard, createText, createTouchEvent, debounce, degreesToRadians, deleteFragment, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, distanceBetweenPointAndSegments, downloadImage, drawArrow, drawBezierPath, drawCircle, drawDashedLines, drawLine, drawLinearPath, drawPendingNodesG, drawPointSnapLines, drawRectangle, drawRoundRectangle, drawSelectionRectangleG, drawSolidLines, duplicateElements, fakeNodeWeakMap, filterSelectedGroups, findElements, findIndex, findLastIndex, getAllElementsInGroup, getAllMoveOptions, getAngleBetweenPoints, getAngleByElement, getBarPoint, getBoardRectangle, getBoundingRectangleByElements, getClipboardData, getClipboardFromHtml, getCrossingPointsBetweenEllipseAndSegment, getDataTransferClipboard, getDataTransferClipboardText, getEditingGroup, getElementById, getElementHostBBox, getElementMap, getElementsInGroup, getElementsInGroupByElement, getElementsIndices, getEllipseArcCenter, getEllipseTangentSlope, getGroupByElement, getHighestGroup, getHighestIndexOfElement, getHighestSelectedElements, getHighestSelectedGroup, getHighestSelectedGroups, getHitElementByPoint, getHitElementsByPoint, getHitElementsBySelection, getHitSelectedElements, getIsRecursionFunc, getMinPointDelta, getMovingElements, getNearestDelta, getNearestPointBetweenPointAndArc, getNearestPointBetweenPointAndDiscreteSegments, getNearestPointBetweenPointAndEllipse, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getNearestPointRectangle, getOffsetAfterRotate, getOneMoveOptions, getPointBetween, getProbablySupportsClipboardRead, getProbablySupportsClipboardWrite, getProbablySupportsClipboardWriteText, getRealScrollBarWidth, getRectangleByAngle, getRectangleByElements, getRectangleByGroup, getRotatedBoundingRectangle, getSelectedElements, getSelectedGroups, getSelectedIsolatedElements, getSelectedIsolatedElementsCanAddToGroup, getSelectedTargetElements, getSelectionAngle, getSelectionOptions, getSnapRectangles, getTemporaryElements, getTemporaryRef, getTripleAxis, getValidElements, getVectorFromPointAndSlope, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnContextChanged, hasSameAngle, hasSelectedElementsInSameGroup, hasSetSelectionOperation, hasValidAngle, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isAxisChangedByAngle, isContextmenu, isDOMElement, isDOMNode, isDebug, isDragging, isFromScrolling, isFromViewportChange, isHandleSelection, isHitElement, isHitSelectedRectangle, isInPlaitBoard, isIndicesContinuous, isLineHitLine, isLineHitRectangle, isLineHitRectangleEdge, isMainPointer, isMobileDeviceEvent, isMouseEvent, isMovingElements, isNullOrUndefined, isPencilEvent, isPointInEllipse, isPointInPolygon, isPointInRoundRectangle, isSecondaryPointer, isSelectedAllElementsInGroup, isSelectedElement, isSelectedElementOrGroup, isSelectionMoving, isSetSelectionOperation, isSetThemeOperation, isSetViewportOperation, isSingleLineHitRectangleEdge, isSnapPoint, isTouchEvent, isValidAngle, mountElementG, moveElementsToNewPath, moveElementsToNewPathAfterAddGroup, nonGroupInHighestSelectedElements, normalizeAngle, normalizePoint, radiansToDegrees, removeMovingElements, removeSelectedElement, replaceAngleBrackets, replaceSelectedElement, reverseReplaceAngleBrackets, rotate, rotateAntiPointsByElement, rotateElements, rotatePoints, rotatePointsByAngle, rotatePointsByElement, rotatedDataPoints, scrollToRectangle, setAngleForG, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setDragging, setFragment, setIsFromScrolling, setIsFromViewportChange, setPathStrokeLinecap, setSVGViewBox, setSelectedElementsWithGroup, setSelectionMoving, setSelectionOptions, setStrokeLinecap, shouldClear, shouldMerge, shouldSave, sortElements, stripHtml, temporaryDisableSelection, throttleRAF, toDomPrecision, toFixed, toHostPoint, toHostPointFromViewBoxPoint, toImage, toScreenPointFromHostPoint, toViewBoxPoint, toViewBoxPoints, uniqueById, updateForeignObject, updateForeignObjectWidth, updatePoints, updateViewportByScrolling, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withArrowMoving, withBoard, withHandPointer, withHistory, withHotkey, withMoving, withOptions, withRelatedFragment, withSelection, withViewport };
+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_CONTEXT, 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_VIEWPORT_ORIGINATION, BoardTransforms, C, CAPS_LOCK, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, ColorfulThemeColor, CoreTransforms, CursorClass, D, DASH, DEFAULT_COLOR, DELETE, DOWN_ARROW, DRAG_SELECTION_PRESS_AND_MOVE_BUFFER, DarkThemeColor, DebugGenerator, DefaultThemeColor, Direction, E, EIGHT, ELEMENT_TO_REF, END, ENTER, EQUALS, ESCAPE, ElementFlavour, 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, HISTORY, HIT_DISTANCE_BUFFER, HOME, HOST_CLASS_NAME, I, INSERT, IS_APPLE, IS_BOARD_ALIVE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_DRAGGING, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_MAC, IS_SAFARI, IS_TEXT_EDITABLE, IS_WINDOWS, J, K, KEY_TO_ELEMENT_MAP, L, LAST_MEDIA, LEFT_ARROW, ListRender, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, MAX_RADIUS, MAX_ZOOM, MERGING, META, MIN_ZOOM, MUTE, N, NINE, NODE_TO_CONTAINER_G, NODE_TO_G, 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, PlaitBoardContext, PlaitElement, PlaitGroupElement, PlaitHistoryBoard, PlaitNode, PlaitOperation, PlaitPluginKey, PlaitPointerType, Point, Q, QUESTION_MARK, R, RESIZE_CURSORS, RESIZE_HANDLE_CLASS_NAME, RIGHT_ARROW, ROTATE_HANDLE_CLASS_NAME, RectangleClient, ResizeCursorClass, RetroThemeColor, RgbaToHEX, S, SAVING, SCROLL_BAR_WIDTH, SCROLL_LOCK, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, SELECTION_RECTANGLE_BOUNDING_CLASS_NAME, SELECTION_RECTANGLE_CLASS_NAME, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SNAPPING_STROKE_WIDTH, SNAP_TOLERANCE, SPACE, SPLITTING_ONCE, Selection, SoftThemeColor, StarryThemeColor, T, TAB, THREE, TILDE, TWO, ThemeColorMode, ThemeColors, Transforms, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, Viewport, W, WritableClipboardOperationType, WritableClipboardType, X, Y, Z, ZERO, ZOOM_STEP, addClipboardContext, addOrCreateClipboardContext, addSelectedElement, approximately, arrowPoints, buildPlaitHtml, cacheMovingElements, cacheSelectedElements, cacheSelectedElementsWithGroup, cacheSelectedElementsWithGroupOnShift, calcNewViewBox, canAddGroup, canRemoveGroup, canSetZIndex, catmullRomFitting, ceilToDecimal, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createBoard, createClipboardContext, createDebugGenerator, createFakeEvent, createForeignObject, createG, createGroup, createGroupRectangleG, createKeyboardEvent, createMask, createModModifierKeys, createMouseEvent, createPath, createPointerEvent, createRect, createSVG, createTestingBoard, createText, createTouchEvent, debounce, degreesToRadians, deleteFragment, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, distanceBetweenPointAndSegments, downloadImage, drawArrow, drawBezierPath, drawCircle, drawDashedLines, drawLine, drawLinearPath, drawPendingNodesG, drawPointSnapLines, drawRectangle, drawRoundRectangle, drawSelectionRectangleG, drawSolidLines, duplicateElements, fakeNodeWeakMap, filterSelectedGroups, findElements, findIndex, findLastIndex, getAllElementsInGroup, getAllMoveOptions, getAngleBetweenPoints, getAngleByElement, getBarPoint, getBoardRectangle, getBoundingRectangleByElements, getClipboardData, getClipboardFromHtml, getCrossingPointsBetweenEllipseAndSegment, getDataTransferClipboard, getDataTransferClipboardText, getEditingGroup, getElementById, getElementHostBBox, getElementMap, getElementsInGroup, getElementsInGroupByElement, getElementsIndices, getEllipseArcCenter, getEllipseTangentSlope, getGroupByElement, getHighestGroup, getHighestIndexOfElement, getHighestSelectedElements, getHighestSelectedGroup, getHighestSelectedGroups, getHitElementByPoint, getHitElementsByPoint, getHitElementsBySelection, getHitSelectedElements, getIsRecursionFunc, getMinPointDelta, getMovingElements, getNearestDelta, getNearestPointBetweenPointAndArc, getNearestPointBetweenPointAndDiscreteSegments, getNearestPointBetweenPointAndEllipse, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getNearestPointRectangle, getOffsetAfterRotate, getOneMoveOptions, getPointBetween, getProbablySupportsClipboardRead, getProbablySupportsClipboardWrite, getProbablySupportsClipboardWriteText, getRealScrollBarWidth, getRectangleByAngle, getRectangleByElements, getRectangleByGroup, getRotatedBoundingRectangle, getSelectedElements, getSelectedGroups, getSelectedIsolatedElements, getSelectedIsolatedElementsCanAddToGroup, getSelectedTargetElements, getSelectionAngle, getSelectionOptions, getSnapRectangles, getTemporaryElements, getTemporaryRef, getTripleAxis, getValidElements, getVectorFromPointAndSlope, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnContextChanged, hasSameAngle, hasSelectedElementsInSameGroup, hasSetSelectionOperation, hasValidAngle, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isAxisChangedByAngle, isContextmenu, isDOMElement, isDOMNode, isDebug, isDragging, isFromScrolling, isFromViewportChange, isHandleSelection, isHitElement, isHitSelectedRectangle, isInPlaitBoard, isIndicesContinuous, isLineHitLine, isLineHitRectangle, isLineHitRectangleEdge, isMainPointer, isMobileDeviceEvent, isMouseEvent, isMovingElements, isNullOrUndefined, isPencilEvent, isPointInEllipse, isPointInPolygon, isPointInRoundRectangle, isSecondaryPointer, isSelectedAllElementsInGroup, isSelectedElement, isSelectedElementOrGroup, isSelectionMoving, isSetSelectionOperation, isSetThemeOperation, isSetViewportOperation, isSingleLineHitRectangleEdge, isSnapPoint, isTouchEvent, isValidAngle, isWheelPointer, mountElementG, moveElementsToNewPath, moveElementsToNewPathAfterAddGroup, nonGroupInHighestSelectedElements, normalizeAngle, normalizePoint, radiansToDegrees, removeMovingElements, removeSelectedElement, replaceAngleBrackets, replaceSelectedElement, reverseReplaceAngleBrackets, rotate, rotateAntiPointsByElement, rotateElements, rotatePoints, rotatePointsByAngle, rotatePointsByElement, rotatedDataPoints, scrollToRectangle, setAngleForG, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setDragging, setFragment, setIsFromScrolling, setIsFromViewportChange, setPathStrokeLinecap, setSVGViewBox, setSelectedElementsWithGroup, setSelectionMoving, setSelectionOptions, setStrokeLinecap, shouldClear, shouldMerge, shouldSave, sortElements, stripHtml, temporaryDisableSelection, throttleRAF, toActivePoint, toActivePointFromViewBoxPoint, toActiveRectangleFromViewBoxRectangle, toDomPrecision, toFixed, toHostPoint, toHostPointFromViewBoxPoint, toImage, toScreenPointFromActivePoint, toScreenPointFromHostPoint, toViewBoxPoint, toViewBoxPoints, uniqueById, updateForeignObject, updateForeignObjectWidth, updatePoints, updateViewportByScrolling, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withArrowMoving, withBoard, withHandPointer, withHistory, withHotkey, withMoving, withOptions, withRelatedFragment, withSelection };
 //# sourceMappingURL=plait-core.mjs.map