@plait/core 0.0.49 → 0.0.50

package/fesm2015/plait-core.mjs

@@ -15,6 +15,7 @@ var BaseCursorStatus;
 (function (BaseCursorStatus) {
     BaseCursorStatus["move"] = "move";
     BaseCursorStatus["select"] = "select";
+    BaseCursorStatus["drag"] = "drag";
 })(BaseCursorStatus || (BaseCursorStatus = {}));
 
 const Path = {
@@ -510,6 +511,33 @@ function withBoard(board) {
     return board;
 }
 
+function transformPoints(board, points) {
+    const newPoints = points.map(point => {
+        return transformPoint(board, point);
+    });
+    return newPoints;
+}
+function transformPoint(board, point) {
+    const { width, height } = board.host.getBoundingClientRect();
+    const viewBox = board.host.viewBox.baseVal;
+    const x = (point[0] / width) * viewBox.width + viewBox.x;
+    const y = (point[1] / height) * viewBox.height + viewBox.y;
+    const newPoint = [x, y];
+    return newPoint;
+}
+function calculateZoom(zoom, minZoom = 0.2, maxZoom = 4) {
+    return zoom < minZoom ? minZoom : zoom > maxZoom ? maxZoom : zoom;
+}
+function isNoSelectionElement(e) {
+    var _a;
+    return (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest('.plait-board-attached');
+}
+const updateCursorStatus = (board, cursor) => {
+    if (cursor) {
+        board.cursor = cursor;
+    }
+};
+
 const NS = 'http://www.w3.org/2000/svg';
 function toPoint(x, y, container) {
     const rect = container.getBoundingClientRect();
@@ -556,6 +584,68 @@ function toRectangleClient(points) {
     return rect;
 }
 
+/**
+ * Check whether to merge an operation into the previous operation.
+ */
+const shouldMerge = (op, prev) => {
+    if (op.type === 'set_viewport' && op.type === (prev === null || prev === void 0 ? void 0 : prev.type)) {
+        return true;
+    }
+    return false;
+};
+/**
+ * Check whether an operation needs to be saved to the history.
+ */
+const shouldSave = (op, prev) => {
+    if (op.type === 'set_selection' || op.type === 'set_viewport') {
+        return false;
+    }
+    return true;
+};
+/**
+ * Check whether an operation should clear the redos stack.
+ */
+const shouldClear = (op) => {
+    if (op.type === 'set_selection') {
+        return false;
+    }
+    return true;
+};
+const PlaitHistoryBoard = {
+    /**
+     * Get the saving flag's current value.
+     */
+    isSaving(board) {
+        return SAVING.get(board);
+    },
+    /**
+     * Get the merge flag's current value.
+     */
+    isMerging(board) {
+        return MERGING.get(board);
+    },
+    /**
+     * Apply a series of changes inside a synchronous `fn`, without merging any of
+     * the new operations into previous save point in the history.
+     */
+    withoutMerging(board, fn) {
+        const prev = PlaitHistoryBoard.isMerging(board);
+        MERGING.set(board, false);
+        fn();
+        MERGING.set(board, prev);
+    },
+    /**
+     * Apply a series of changes inside a synchronous `fn`, without saving any of
+     * their operations into the history.
+     */
+    withoutSaving(board, fn) {
+        const prev = PlaitHistoryBoard.isSaving(board);
+        SAVING.set(board, false);
+        fn();
+        SAVING.set(board, prev);
+    }
+};
+
 /**
  * Hotkey mappings for each platform.
  */
@@ -704,32 +794,27 @@ function distanceBetweenPointAndPoint(x1, y1, x2, y2) {
     return Math.hypot(dx, dy);
 }
 
-function transformPoints(board, points) {
-    const newPoints = points.map(point => {
-        return transformPoint(board, point);
-    });
-    return newPoints;
+function invert(oldMatrix, newMatrix) {
+    let n = newMatrix[0], r = newMatrix[1], a = newMatrix[2], i = newMatrix[3], o = newMatrix[4], c = newMatrix[5], l = newMatrix[6], s = newMatrix[7], u = newMatrix[8], d = u * o - c * s, h = -u * i + c * l, f = s * i - o * l, p = n * d + r * h + a * f;
+    return p
+        ? ((p = 1 / p),
+            (oldMatrix[0] = d * p),
+            (oldMatrix[1] = (-u * r + a * s) * p),
+            (oldMatrix[2] = (c * r - a * o) * p),
+            (oldMatrix[3] = h * p),
+            (oldMatrix[4] = (u * n - a * l) * p),
+            (oldMatrix[5] = (-c * n + a * i) * p),
+            (oldMatrix[6] = f * p),
+            (oldMatrix[7] = (-s * n + r * l) * p),
+            (oldMatrix[8] = (o * n - r * i) * p),
+            oldMatrix)
+        : null;
 }
-function transformPoint(board, point) {
-    const { width, height } = board.host.getBoundingClientRect();
-    const viewBox = board.host.viewBox.baseVal;
-    const x = (point[0] / width) * viewBox.width + viewBox.x;
-    const y = (point[1] / height) * viewBox.height + viewBox.y;
-    const newPoint = [x, y];
-    return newPoint;
-}
-function getViewBox(board) {
-    const viewportBox = getViewportClientBox(board);
-    const rootGroupBBox = calculateBBox(board);
-    const padding = [viewportBox.height / 2, viewportBox.width / 2];
-    const zoom = board.viewport.zoom;
-    const minX = rootGroupBBox.left - padding[1] / zoom;
-    const minY = rootGroupBBox.top - padding[0] / zoom;
-    const viewportWidth = (rootGroupBBox.right - rootGroupBBox.left) * zoom + 2 * padding[1];
-    const viewportHeight = (rootGroupBBox.bottom - rootGroupBBox.top) * zoom + 2 * padding[0];
-    const width = viewportWidth / zoom;
-    const height = viewportHeight / zoom;
-    return { minX, minY, width, height, viewportWidth, viewportHeight };
+function transformMat3(e, t, n) {
+    const r = t[0];
+    const a = t[1];
+    const i = t[2];
+    return (e[0] = r * n[0] + a * n[3] + i * n[6]), (e[1] = r * n[1] + a * n[4] + i * n[7]), (e[2] = r * n[2] + a * n[5] + i * n[8]), e;
 }
 function getViewportClientBox(board) {
     var _a;
@@ -739,9 +824,13 @@ function getViewportClientBox(board) {
     const containerRect = container === null || container === void 0 ? void 0 : container.getBoundingClientRect();
     const width = containerRect.width - scrollBarWidth;
     const height = containerRect.height - scrollBarWidth;
+    const x = containerRect.x || containerRect.left;
+    const y = containerRect.y || containerRect.top;
     return {
         width,
-        height
+        height,
+        x,
+        y
     };
 }
 function calculateBBox(board) {
@@ -775,80 +864,19 @@ function calculateBBox(board) {
     // 在新的缩放比容器宽高下的内容盒子位置
     return box;
 }
-function calculateZoom(zoom, minZoom = 0.2, maxZoom = 4) {
-    return zoom < minZoom ? minZoom : zoom > maxZoom ? maxZoom : zoom;
-}
-function isNoSelectionElement(e) {
-    var _a;
-    return (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest('.plait-board-attached');
+function getViewBox(board) {
+    const viewportBox = getViewportClientBox(board);
+    const rootGroupBBox = calculateBBox(board);
+    const padding = [viewportBox.height / 2, viewportBox.width / 2];
+    const zoom = board.viewport.zoom;
+    const minX = rootGroupBBox.left - padding[1] / zoom;
+    const minY = rootGroupBBox.top - padding[0] / zoom;
+    const viewportWidth = (rootGroupBBox.right - rootGroupBBox.left) * zoom + 2 * padding[1];
+    const viewportHeight = (rootGroupBBox.bottom - rootGroupBBox.top) * zoom + 2 * padding[0];
+    const width = viewportWidth / zoom;
+    const height = viewportHeight / zoom;
+    return { minX, minY, width, height, viewportWidth, viewportHeight };
 }
-const updateCursorStatus = (board, cursor) => {
-    if (cursor) {
-        board.cursor = cursor;
-    }
-};
-
-/**
- * Check whether to merge an operation into the previous operation.
- */
-const shouldMerge = (op, prev) => {
-    if (op.type === 'set_viewport' && op.type === (prev === null || prev === void 0 ? void 0 : prev.type)) {
-        return true;
-    }
-    return false;
-};
-/**
- * Check whether an operation needs to be saved to the history.
- */
-const shouldSave = (op, prev) => {
-    if (op.type === 'set_selection' || op.type === 'set_viewport') {
-        return false;
-    }
-    return true;
-};
-/**
- * Check whether an operation should clear the redos stack.
- */
-const shouldClear = (op) => {
-    if (op.type === 'set_selection') {
-        return false;
-    }
-    return true;
-};
-const PlaitHistoryBoard = {
-    /**
-     * Get the saving flag's current value.
-     */
-    isSaving(board) {
-        return SAVING.get(board);
-    },
-    /**
-     * Get the merge flag's current value.
-     */
-    isMerging(board) {
-        return MERGING.get(board);
-    },
-    /**
-     * Apply a series of changes inside a synchronous `fn`, without merging any of
-     * the new operations into previous save point in the history.
-     */
-    withoutMerging(board, fn) {
-        const prev = PlaitHistoryBoard.isMerging(board);
-        MERGING.set(board, false);
-        fn();
-        MERGING.set(board, prev);
-    },
-    /**
-     * Apply a series of changes inside a synchronous `fn`, without saving any of
-     * their operations into the history.
-     */
-    withoutSaving(board, fn) {
-        const prev = PlaitHistoryBoard.isSaving(board);
-        SAVING.set(board, false);
-        fn();
-        SAVING.set(board, prev);
-    }
-};
 
 function withHistory(board) {
     const { apply, keydown } = board;
@@ -1168,6 +1196,8 @@ class PlaitBoardComponent {
         this.destroy$ = new Subject();
         this.autoFitPadding = 8;
         this.isMoving = false;
+        this.focusPoint = [];
+        this.matrix = [];
         this.plaitValue = [];
         this.plaitPlugins = [];
         this.plaitChange = new EventEmitter();
@@ -1215,10 +1245,18 @@ class PlaitBoardComponent {
             if (this.board.operations.some(op => PlaitOperation.isSetViewportOperation(op))) {
                 this.updateViewport();
             }
+            if (this.board.operations.some(op => ['set_node', 'remove_node'].includes(op.type))) {
+                this.calculateViewport();
+            }
             this.plaitChange.emit(changeEvent);
         });
         this.hasInitialized = true;
     }
+    setMatrix() {
+        const viewBox = getViewBox(this.board);
+        const zoom = this.board.viewport.zoom;
+        this.matrix = [zoom, 0, 0, 0, zoom, 0, -this.scrollLeft - zoom * viewBox.minX, -this.scrollTop - zoom * viewBox.minY, 1];
+    }
     ngOnChanges(changes) {
         if (this.hasInitialized) {
             const valueChange = changes['plaitValue'];
@@ -1364,6 +1402,39 @@ class PlaitBoardComponent {
             offsetYRatio: scrollTopRatio
         });
     }
+    updateScroll() {
+        const container = this.contentContainer.nativeElement;
+        container.scrollTo({
+            top: this.scrollTop,
+            left: this.scrollLeft
+        });
+    }
+    calculateViewport() {
+        const viewBox = getViewBox(this.board);
+        const { minX, minY, viewportWidth } = viewBox;
+        const viewportBox = getViewportClientBox(this.board);
+        const nweHhBox = calculateBBox(this.board);
+        let scrollLeft = this.scrollLeft;
+        let scrollTop = this.scrollTop;
+        const zoom = this.board.viewport.zoom;
+        const matrix = this.matrix;
+        const focusPoint = this.focusPoint;
+        if (matrix) {
+            const g = [focusPoint[0] - viewportBox.x, focusPoint[1] - viewportBox.y, 1];
+            const b = invert([], matrix);
+            const x = transformMat3([], [g[0], g[1], 1], b);
+            const k = [zoom, 0, 0, 0, zoom, 0, -zoom * minX, -zoom * minY, 1];
+            const c = transformMat3([], x, k);
+            scrollLeft = c[0] - g[0];
+            scrollTop = c[1] - g[1];
+        }
+        else {
+            scrollLeft = (viewportWidth - viewportBox.width) / 2;
+            scrollTop = viewportBox.height / 2 - nweHhBox.top;
+        }
+        this.setScroll(scrollLeft, scrollTop);
+        this.updateViewport();
+    }
     viewportChange() {
         const viewBox = getViewBox(this.board);
         const offsetXRatio = this.board.viewport.offsetXRatio;
@@ -1379,15 +1450,13 @@ class PlaitBoardComponent {
         if (width > 0 && height > 0) {
             this.renderer2.setAttribute(this.host, 'viewBox', box.join());
         }
-        const container = this.contentContainer.nativeElement;
-        container.scrollTo({
-            top: this.scrollTop,
-            left: this.scrollLeft
-        });
+        this.focusPoint = [viewportBox.x, viewportBox.y];
+        this.setMatrix();
     }
     updateViewport() {
         this.resizeViewport();
         this.viewportChange();
+        this.updateScroll();
     }
     // 拖拽模式
     changeMoveMode(cursorStatus) {
@@ -1562,5 +1631,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BOARD_TO_ON_CHANGE, BaseCursorStatus, CLIP_BOARD_FORMAT_KEY, FLUSHING, HOST_TO_ROUGH_SVG, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_SAFARI, IS_TEXT_EDITABLE, MERGING, NS, PLAIT_BOARD_TO_COMPONENT, Path, PlaitBoardComponent, PlaitElementComponent, PlaitHistoryBoard, PlaitModule, PlaitNode, PlaitOperation, PlaitToolbarComponent, SAVING, SCROLL_BAR_WIDTH, Transforms, Viewport, calculateBBox, calculateZoom, createG, createSVG, createText, distanceBetweenPointAndPoint, distanceBetweenPointAndSegment, getViewBox, getViewportClientBox, hotkeys, idCreator, inverse, isNoSelectionElement, isNullOrUndefined, isSetViewportOperation, rotate, shouldClear, shouldMerge, shouldSave, toPoint, toRectangleClient, transformPoint, transformPoints, updateCursorStatus };
+export { BOARD_TO_ON_CHANGE, BaseCursorStatus, CLIP_BOARD_FORMAT_KEY, FLUSHING, HOST_TO_ROUGH_SVG, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_SAFARI, IS_TEXT_EDITABLE, MERGING, NS, PLAIT_BOARD_TO_COMPONENT, Path, PlaitBoardComponent, PlaitElementComponent, PlaitHistoryBoard, PlaitModule, PlaitNode, PlaitOperation, PlaitToolbarComponent, SAVING, SCROLL_BAR_WIDTH, Transforms, Viewport, calculateBBox, calculateZoom, createG, createSVG, createText, distanceBetweenPointAndPoint, distanceBetweenPointAndSegment, getViewBox, getViewportClientBox, hotkeys, idCreator, inverse, invert, isNoSelectionElement, isNullOrUndefined, isSetViewportOperation, rotate, shouldClear, shouldMerge, shouldSave, toPoint, toRectangleClient, transformMat3, transformPoint, transformPoints, updateCursorStatus };
 //# sourceMappingURL=plait-core.mjs.map