@plait/core 0.1.7 → 0.1.9

package/fesm2020/plait-core.mjs

@@ -928,8 +928,8 @@ const addSelectedElement = (board, element) => {
 };
 const removeSelectedElement = (board, element) => {
     const selectedElements = getSelectedElements(board);
-    const newselectedElements = selectedElements.filter(value => value !== element);
-    cacheSelectedElements(board, newselectedElements);
+    const newSelectedElements = selectedElements.filter(value => value !== element);
+    cacheSelectedElements(board, newSelectedElements);
 };
 const isSelectedElement = (board, element) => {
     const selectedElements = getSelectedElements(board);
@@ -997,7 +997,7 @@ function getViewportContainerRect(board) {
 }
 function getElementHostBBox(board, zoom) {
     const childrenRect = getRectangleByElements(board, board.children, true);
-    const viewportContainerRect = getViewportContainerRect(board);
+    const viewportContainerRect = PlaitBoard.getBoardNativeElement(board).getBoundingClientRect();
     const containerWidth = viewportContainerRect.width / zoom;
     const containerHeight = viewportContainerRect.height / zoom;
     let left;
@@ -1044,7 +1044,7 @@ function clampZoomLevel(zoom, minZoom = 0.2, maxZoom = 4) {
 function getViewBox(board, zoom) {
     const { hideScrollbar } = board.options;
     const scrollBarWidth = hideScrollbar ? SCROLL_BAR_WIDTH : 0;
-    const viewportContainerRect = getViewportContainerRect(board);
+    const viewportContainerRect = PlaitBoard.getBoardNativeElement(board).getBoundingClientRect();
     const elementHostBBox = getElementHostBBox(board, zoom);
     const horizontalPadding = viewportContainerRect.width / 2;
     const verticalPadding = viewportContainerRect.height / 2;
@@ -1078,12 +1078,12 @@ function updateViewportOffset(board) {
     const scrollTop = (origination[1] - viewBox[1]) * zoom;
     updateViewportContainerScroll(board, scrollLeft, scrollTop);
 }
-function updateViewportContainerScroll(board, left, top) {
+function updateViewportContainerScroll(board, left, top, isFromViewportChange = true) {
     const viewportContainer = PlaitBoard.getViewportContainer(board);
     if (viewportContainer.scrollLeft !== left || viewportContainer.scrollTop !== top) {
         viewportContainer.scrollLeft = left;
         viewportContainer.scrollTop = top;
-        setIsFromViewportChange(board, true);
+        isFromViewportChange && setIsFromViewportChange(board, true);
     }
 }
 function initializeViewportContainer(board) {
@@ -1142,7 +1142,7 @@ function fitViewport(board) {
     const viewportContainerRect = getViewportContainerRect(board);
     const elementHostBox = getRectangleByElements(board, board.children, true);
     const zoom = board.viewport.zoom;
-    const autoFitPadding = 8;
+    const autoFitPadding = 16;
     const viewportWidth = nativeElementRect.width - 2 * autoFitPadding;
     const viewportHeight = nativeElementRect.height - 2 * autoFitPadding;
     let newZoom = zoom;
@@ -1204,14 +1204,31 @@ const throttleRAF = (fn) => {
     }
     scheduleFunc();
 };
+const debounce = (func, wait, options) => {
+    let timerSubscription = null;
+    return () => {
+        if (timerSubscription && !timerSubscription.closed) {
+            timerSubscription.unsubscribe();
+            timerSubscription = timer(wait).subscribe(() => {
+                func();
+            });
+        }
+        else {
+            if (options?.leading) {
+                func();
+            }
+            timerSubscription = timer(wait).subscribe();
+        }
+    };
+};
 
 const getMovingElements = (board) => {
     return BOARD_TO_MOVING_ELEMENT.get(board) || [];
 };
 const addMovingElements = (board, elements) => {
     const movingElements = getMovingElements(board);
-    const neweElements = elements.filter(item => !movingElements.find(movingElement => movingElement.key === item.key));
-    cacheMovingElements(board, [...movingElements, ...neweElements]);
+    const newElements = elements.filter(item => !movingElements.find(movingElement => movingElement.key === item.key));
+    cacheMovingElements(board, [...movingElements, ...newElements]);
 };
 const removeMovingElements = (board) => {
     BOARD_TO_MOVING_ELEMENT.delete(board);
@@ -1414,7 +1431,7 @@ function withHandPointer(board) {
             const viewportContainer = PlaitBoard.getViewportContainer(board);
             const left = viewportContainer.scrollLeft - (event.x - plaitBoardMove.x);
             const top = viewportContainer.scrollTop - (event.y - plaitBoardMove.y);
-            updateViewportContainerScroll(board, left, top);
+            updateViewportContainerScroll(board, left, top, false);
             plaitBoardMove.x = event.x;
             plaitBoardMove.y = event.y;
         }
@@ -1457,25 +1474,20 @@ function withSelection(board) {
     let selectionOuterG;
     let previousSelectedElements;
     board.mousedown = (event) => {
-        if (board.pointer === PlaitPointerType.hand && board.selection) {
-            mousedown(event);
-            return;
-        }
         if (event.button === 0) {
             start = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
         }
         if (start) {
             const ranges = [{ anchor: start, focus: start }];
             const selectedElements = getSelectedElements(board);
-            const intersectionSelectedElement = isIntersectionElements(board, selectedElements, ranges);
-            if (intersectionSelectedElement) {
+            if (isIntersectionElements(board, selectedElements, ranges)) {
                 start = null;
+                mousedown(event);
+                return;
             }
-            else {
-                Transforms.setSelection(board, { ranges: ranges });
-                if (calcElementIntersectionSelection(board).length) {
-                    start = null;
-                }
+            Transforms.setSelection(board, { ranges: ranges });
+            if (calcElementIntersectionSelection(board).length || board.pointer === PlaitPointerType.hand) {
+                start = null;
             }
         }
         mousedown(event);
@@ -1523,36 +1535,44 @@ function withSelection(board) {
     };
     board.onChange = () => {
         // calc selected elements entry
-        try {
-            if (board.operations.find(value => value.type === 'set_selection')) {
-                selectionOuterG?.remove();
-                const temporaryElements = getTemporaryElements(board);
-                const elements = temporaryElements ? temporaryElements : calcElementIntersectionSelection(board);
-                cacheSelectedElements(board, elements);
-                previousSelectedElements = elements;
-                const { width, height } = getRectangleByElements(board, elements, false);
-                if (width > 0 && height > 0 && elements.length > 1) {
-                    selectionOuterG = createSelectionOuterG(board, elements);
-                    selectionOuterG.classList.add('selection-outer');
-                    PlaitBoard.getHost(board).append(selectionOuterG);
-                }
-                deleteTemporaryElements(board);
-            }
-            else {
-                const currentSelectedElements = getSelectedElements(board);
-                if (currentSelectedElements.length && currentSelectedElements.length > 1) {
-                    const selectedElementChange = currentSelectedElements.some(item => !previousSelectedElements.includes(item));
-                    if (selectedElementChange) {
-                        selectionOuterG?.remove();
-                        selectionOuterG = createSelectionOuterG(board, currentSelectedElements);
+        if (board.pointer !== PlaitPointerType.hand) {
+            try {
+                if (board.operations.find(value => value.type === 'set_selection')) {
+                    selectionOuterG?.remove();
+                    const temporaryElements = getTemporaryElements(board);
+                    const elements = temporaryElements ? temporaryElements : calcElementIntersectionSelection(board);
+                    cacheSelectedElements(board, elements);
+                    previousSelectedElements = elements;
+                    const { width, height } = getRectangleByElements(board, elements, false);
+                    if (width > 0 && height > 0 && elements.length > 1) {
+                        selectionOuterG = createSelectionOuterG(board, elements);
                         selectionOuterG.classList.add('selection-outer');
                         PlaitBoard.getHost(board).append(selectionOuterG);
                     }
+                    deleteTemporaryElements(board);
+                }
+                else {
+                    // wait node destroy and remove selected element state
+                    setTimeout(() => {
+                        const currentSelectedElements = getSelectedElements(board);
+                        if (currentSelectedElements.length && currentSelectedElements.length > 1) {
+                            const selectedElementChange = currentSelectedElements.some(item => !previousSelectedElements.includes(item));
+                            if (selectedElementChange) {
+                                selectionOuterG?.remove();
+                                selectionOuterG = createSelectionOuterG(board, currentSelectedElements);
+                                selectionOuterG.classList.add('selection-outer');
+                                PlaitBoard.getHost(board).append(selectionOuterG);
+                            }
+                        }
+                        else {
+                            selectionOuterG?.remove();
+                        }
+                    });
                 }
             }
-        }
-        catch (error) {
-            console.error(error);
+            catch (error) {
+                console.error(error);
+            }
         }
         onChange();
     };
@@ -1587,7 +1607,10 @@ function createSelectionOuterG(board, selectElements) {
 
 function withViewport(board) {
     const { onChange } = board;
-    let timerSubscription;
+    const throttleUpdate = debounce(() => {
+        initializeViewBox(board);
+        updateViewportOffset(board);
+    }, 500, { leading: true });
     board.onChange = () => {
         const isSetViewport = board.operations.some(op => op.type === 'set_viewport');
         const isOnlySetSelection = board.operations.some(op => op.type === 'set_selection');
@@ -1603,13 +1626,7 @@ function withViewport(board) {
             updateViewportOffset(board);
         }
         else {
-            if (timerSubscription) {
-                timerSubscription.unsubscribe();
-            }
-            timerSubscription = timer(500).subscribe(() => {
-                initializeViewBox(board);
-                updateViewportOffset(board);
-            });
+            throttleUpdate();
         }
         onChange();
     };
@@ -1873,7 +1890,7 @@ class PlaitBoardComponent {
         this.plaitChange = new EventEmitter();
         this.plaitBoardInitialized = new EventEmitter();
         this.trackBy = (index, element) => {
-            return index;
+            return element.id;
         };
     }
     ngOnInit() {
@@ -2241,5 +2258,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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, BOARD_TO_VIEWPORT_ORIGINATION, 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, Point, RectangleClient, SAVING, SCROLL_BAR_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, Selection, Transforms, Viewport, addMovingElements, addSelectedElement, arrowPoints, cacheMovingElements, cacheSelectedElements, calcElementIntersectionSelection, changeZoom, clampZoomLevel, clearSelectionMoving, clearViewportOrigination, createG, createSVG, createSelectionOuterG, createText, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, drawArrow, drawRoundRectangle, fitViewport, getBoardRectangle, getElementHostBBox, getMovingElements, getRectangleByElements, getSelectedElements, getTemporaryElements, getViewBox, getViewportContainerRect, getViewportOrigination, hasBeforeContextChange, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isFromScrolling, isFromViewportChange, isInPlaitBoard, isIntersectionElements, isNullOrUndefined, isSelectedElement, isSelectionMoving, isSetViewportOperation, normalizePoint, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setIsFromScrolling, setIsFromViewportChange, setSVGViewBox, setSelectionMoving, setViewport, shouldClear, shouldMerge, shouldSave, throttleRAF, toPoint, transformPoint, transformPoints, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withMoving, withSelection };
+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, BOARD_TO_VIEWPORT_ORIGINATION, 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, Point, RectangleClient, SAVING, SCROLL_BAR_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, Selection, Transforms, Viewport, addMovingElements, addSelectedElement, arrowPoints, cacheMovingElements, cacheSelectedElements, calcElementIntersectionSelection, changeZoom, clampZoomLevel, clearSelectionMoving, clearViewportOrigination, createG, createSVG, createSelectionOuterG, createText, debounce, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, drawArrow, drawRoundRectangle, fitViewport, getBoardRectangle, getElementHostBBox, getMovingElements, getRectangleByElements, getSelectedElements, getTemporaryElements, getViewBox, getViewportContainerRect, getViewportOrigination, hasBeforeContextChange, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isFromScrolling, isFromViewportChange, isInPlaitBoard, isIntersectionElements, isNullOrUndefined, isSelectedElement, isSelectionMoving, isSetViewportOperation, normalizePoint, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setIsFromScrolling, setIsFromViewportChange, setSVGViewBox, setSelectionMoving, setViewport, shouldClear, shouldMerge, shouldSave, throttleRAF, toPoint, transformPoint, transformPoints, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withMoving, withSelection };
 //# sourceMappingURL=plait-core.mjs.map