@plait/core 0.8.0 → 0.10.0

package/fesm2020/plait-core.mjs

@@ -1513,17 +1513,15 @@ 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 ? 0 : SCROLL_BAR_WIDTH;
-    const viewportContainerRect = PlaitBoard.getBoardNativeElement(board).getBoundingClientRect();
+    const boardContainerRectangle = PlaitBoard.getBoardNativeElement(board).getBoundingClientRect();
     const elementHostBBox = getElementHostBBox(board, zoom);
-    const horizontalPadding = viewportContainerRect.width / 2;
-    const verticalPadding = viewportContainerRect.height / 2;
+    const horizontalPadding = boardContainerRectangle.width / 2;
+    const verticalPadding = boardContainerRectangle.height / 2;
     const viewBox = [
         elementHostBBox.left - horizontalPadding / zoom,
         elementHostBBox.top - verticalPadding / zoom,
-        elementHostBBox.right - elementHostBBox.left + (horizontalPadding * 2 - scrollBarWidth) / zoom,
-        elementHostBBox.bottom - elementHostBBox.top + (verticalPadding * 2 - scrollBarWidth) / zoom
+        elementHostBBox.right - elementHostBBox.left + (horizontalPadding * 2) / zoom,
+        elementHostBBox.bottom - elementHostBBox.top + (verticalPadding * 2) / zoom
     ];
     return viewBox;
 }
@@ -1636,8 +1634,8 @@ function updateZoom(board, newZoom, isCenter = true) {
     const mousePoint = PlaitBoard.getMovingPoint(board);
     const nativeElement = PlaitBoard.getBoardNativeElement(board);
     const nativeElementRect = nativeElement.getBoundingClientRect();
-    const viewportContainerRect = getViewportContainerRect(board);
-    let focusPoint = [viewportContainerRect.width / 2, viewportContainerRect.height / 2];
+    const boardContainerRect = PlaitBoard.getBoardNativeElement(board).getBoundingClientRect();
+    let focusPoint = [boardContainerRect.width / 2, boardContainerRect.height / 2];
     if (!isCenter && mousePoint && distanceBetweenPointAndRectangle(mousePoint[0], mousePoint[1], nativeElementRect) === 0) {
         focusPoint = toPoint(mousePoint[0], mousePoint[1], nativeElement);
     }
@@ -1649,13 +1647,18 @@ function updateZoom(board, newZoom, isCenter = true) {
     updateViewport(board, newOrigination, newZoom);
 }
 function fitViewport(board) {
-    const nativeElementRect = PlaitBoard.getBoardNativeElement(board).getBoundingClientRect();
-    const viewportContainerRect = getViewportContainerRect(board);
+    const { hideScrollbar } = board.options;
+    let scrollBarWidth = 0;
+    if (!hideScrollbar) {
+        const viewportContainer = PlaitBoard.getViewportContainer(board);
+        scrollBarWidth = viewportContainer.offsetWidth - viewportContainer.clientWidth;
+    }
+    const boardContainerRect = PlaitBoard.getBoardNativeElement(board).getBoundingClientRect();
     const elementHostBox = getRectangleByElements(board, board.children, true);
     const zoom = board.viewport.zoom;
     const autoFitPadding = 16;
-    const viewportWidth = nativeElementRect.width - 2 * autoFitPadding;
-    const viewportHeight = nativeElementRect.height - 2 * autoFitPadding;
+    const viewportWidth = boardContainerRect.width - 2 * autoFitPadding;
+    const viewportHeight = boardContainerRect.height - 2 * autoFitPadding;
     let newZoom = zoom;
     if (viewportWidth < elementHostBox.width || viewportHeight < elementHostBox.height) {
         newZoom = Math.min(viewportWidth / elementHostBox.width, viewportHeight / elementHostBox.height);
@@ -1667,8 +1670,8 @@ function fitViewport(board) {
     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
+        centerX - boardContainerRect.width / 2 / newZoom + scrollBarWidth / 2 / zoom,
+        centerY - boardContainerRect.height / 2 / newZoom + scrollBarWidth / 2 / zoom
     ];
     updateViewport(board, newOrigination, newZoom);
 }
@@ -1776,6 +1779,7 @@ function createBoard(children, options) {
         onChange: () => { },
         mousedown: (event) => { },
         mousemove: (event) => { },
+        mouseleave: (event) => { },
         globalMousemove: (event) => { },
         mouseup: (event) => { },
         globalMouseup: (event) => { },
@@ -1973,7 +1977,6 @@ function withSelection(board) {
         const range = { anchor: point, focus: point };
         const hitElements = getHitElements(board, { ranges: [range] });
         if (PlaitBoard.isPointer(board, PlaitPointerType.selection) &&
-            getHitElements(board, { ranges: [range] }).length === 0 &&
             hitElements.length === 0 &&
             options.isMultiple &&
             !options.isDisabledSelect) {
@@ -2175,19 +2178,22 @@ function withMoving(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]);
+            const offsetBuffer = 5;
+            if (Math.abs(offsetX) > offsetBuffer || Math.abs(offsetY) > offsetBuffer) {
+                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]);
+                    });
+                    PlaitBoard.getBoardNativeElement(board).classList.add('element-moving');
+                    addMovingElements(board, currentElements);
                 });
-                PlaitBoard.getBoardNativeElement(board).classList.add('element-moving');
-                addMovingElements(board, currentElements);
-            });
+            }
         }
         if (isPreventDefault) {
             // 阻止 move 过程中触发画布滚动行为
@@ -2464,7 +2470,6 @@ class PlaitBoardComponent {
             this.initializeHookListener();
             this.viewportScrollListener();
             this.elementResizeListener();
-            this.mouseLeaveListener();
         });
         BOARD_TO_COMPONENT.set(this.board, this);
         BOARD_TO_ROUGH_SVG.set(this.board, roughSVG);
@@ -2535,6 +2540,12 @@ class PlaitBoardComponent {
             BOARD_TO_MOVING_POINT.set(this.board, [event.x, event.y]);
             this.board.mousemove(event);
         });
+        fromEvent(this.host, 'mouseleave')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((event) => {
+            BOARD_TO_MOVING_POINT.delete(this.board);
+            this.board.mouseleave(event);
+        });
         fromEvent(document, 'mousemove')
             .pipe(takeUntil(this.destroy$))
             .subscribe((event) => {
@@ -2640,13 +2651,6 @@ class PlaitBoardComponent {
         });
         this.resizeObserver.observe(this.nativeElement);
     }
-    mouseLeaveListener() {
-        fromEvent(this.host, 'mouseleave')
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((event) => {
-            BOARD_TO_MOVING_POINT.delete(this.board);
-        });
-    }
     initializeIslands() {
         this.islands?.forEach(island => {
             island.initialize(this.board);