@plait/core 0.0.49 → 0.0.52

package/fesm2020/plait-core.mjs

@@ -15,6 +15,7 @@ var BaseCursorStatus;
 (function (BaseCursorStatus) {
     BaseCursorStatus["move"] = "move";
     BaseCursorStatus["select"] = "select";
+    BaseCursorStatus["drag"] = "drag";
 })(BaseCursorStatus || (BaseCursorStatus = {}));
 
 /**
@@ -534,6 +535,32 @@ 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) {
+    return e.target?.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();
@@ -580,6 +607,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?.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.
  */
@@ -728,32 +817,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) {
     const hideScrollbar = board.options.hideScrollbar;
@@ -762,9 +846,13 @@ function getViewportClientBox(board) {
     const containerRect = 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) {
@@ -798,79 +886,40 @@ function calculateBBox(board) {
     // 在新的缩放比容器宽高下的内容盒子位置
     return box;
 }
-function calculateZoom(zoom, minZoom = 0.2, maxZoom = 4) {
-    return zoom < minZoom ? minZoom : zoom > maxZoom ? maxZoom : zoom;
-}
-function isNoSelectionElement(e) {
-    return e.target?.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?.type) {
-        return true;
+function isOutExtent(board, node, gap) {
+    const result = { x: 0, y: 0 };
+    if (!node)
+        return result;
+    const boardComponent = PLAIT_BOARD_TO_COMPONENT.get(board);
+    const scrollBarWidth = board.options.hideScrollbar ? SCROLL_BAR_WIDTH : 0;
+    const canvasRect = boardComponent.contentContainer.nativeElement.getBoundingClientRect();
+    if (node.left < canvasRect.left + gap) {
+        result.x = canvasRect.left - node.left - gap;
     }
-    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;
+    else if (node.right > canvasRect.right - scrollBarWidth - gap) {
+        result.x = canvasRect.right - scrollBarWidth - gap - node.right - node.width;
     }
-    return true;
-};
-/**
- * Check whether an operation should clear the redos stack.
- */
-const shouldClear = (op) => {
-    if (op.type === 'set_selection') {
-        return false;
+    if (node.top < canvasRect.top + gap) {
+        result.y = canvasRect.top - node.top - gap;
     }
-    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);
+    else if (node.bottom > canvasRect.bottom - scrollBarWidth - gap) {
+        result.y = canvasRect.bottom - scrollBarWidth - gap - node.bottom - node.height;
     }
-};
+    return result;
+}
 
 function withHistory(board) {
     const { apply, keydown } = board;
@@ -1190,6 +1239,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();
@@ -1236,10 +1287,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'];
@@ -1379,6 +1438,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;
@@ -1394,15 +1486,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) {
@@ -1424,7 +1514,7 @@ class PlaitBoardComponent {
             zoom = 1;
         }
         this.setViewport({
-            zoom,
+            zoom: calculateZoom(zoom),
             offsetXRatio: 0.5,
             offsetYRatio: 0.5
         });
@@ -1467,7 +1557,7 @@ class PlaitBoardComponent {
 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.moving": "this.moving", "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: "contentContainer", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <div class="container" #container>
-            <svg #svg width="100%" height="100%" style="position: relative"></svg>
+            <svg #svg width="100%" height="100%" style="position: relative;"></svg>
             <plait-element
                 *ngFor="let item of board.children; let index = index; trackBy: trackBy"
                 [index]="index"
@@ -1496,7 +1586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     selector: 'plait-board',
                     template: `
         <div class="container" #container>
-            <svg #svg width="100%" height="100%" style="position: relative"></svg>
+            <svg #svg width="100%" height="100%" style="position: relative;"></svg>
             <plait-element
                 *ngFor="let item of board.children; let index = index; trackBy: trackBy"
                 [index]="index"
@@ -1579,5 +1669,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, isOutExtent, isSetViewportOperation, rotate, shouldClear, shouldMerge, shouldSave, toPoint, toRectangleClient, transformMat3, transformPoint, transformPoints, updateCursorStatus };
 //# sourceMappingURL=plait-core.mjs.map