@plait/core 0.0.52 → 0.0.55

package/fesm2015/plait-core.mjs

@@ -239,10 +239,7 @@ function isNullOrUndefined(value) {
 
 const Viewport = {
     isViewport: (value) => {
-        return (!isNullOrUndefined(value.offsetXRatio) &&
-            !isNullOrUndefined(value.offsetYRatio) &&
-            !isNullOrUndefined(value.zoom) &&
-            !isNullOrUndefined(value.viewBackgroundColor));
+        return !isNullOrUndefined(value.zoom) && !isNullOrUndefined(value.viewBackgroundColor) && !isNullOrUndefined(value.canvasPoint);
     }
 };
 
@@ -450,10 +447,9 @@ function createBoard(host, children, options) {
     const board = {
         host,
         viewport: {
-            offsetXRatio: 0.5,
-            offsetYRatio: 0.5,
             zoom: 1,
-            viewBackgroundColor: '#000'
+            viewBackgroundColor: '#000',
+            canvasPoint: []
         },
         children,
         operations: [],
@@ -811,36 +807,81 @@ function invert(oldMatrix, newMatrix) {
         : null;
 }
 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;
+    e = [t[0] * n[0] + t[1] * n[3] + t[2] * n[6], t[0] * n[1] + t[1] * n[4] + t[2] * n[7], t[0] * n[2] + t[1] * n[5] + t[2] * n[8]];
+    return e;
+}
+function convertPoint(arr) {
+    return Array.isArray(arr)
+        ? {
+            x: arr[0],
+            y: arr[1]
+        }
+        : arr;
+}
+function invertClient(board, point, matrix) {
+    const convert = convertPoint(point);
+    const clientBox = getViewportClientBox(board);
+    const newPoint = [convert.x - clientBox.x, convert.y - clientBox.y, 1];
+    const invertMatrix = invert([], matrix);
+    const newMatrix = transformMat3([], [newPoint[0], newPoint[1], 1], invertMatrix);
+    return [newMatrix[0], newMatrix[1]];
+}
+function invertViewport(point, matrix) {
+    const newPoint = convertPoint(point);
+    const invertMatrix = invert([], matrix);
+    return transformMat3([], [newPoint.x, newPoint.y, 1], invertMatrix);
+}
+function convertViewport(point, matrix) {
+    const newPoint = convertPoint(point);
+    return transformMat3([], [newPoint.x, newPoint.y, 1], matrix);
+}
+function getViewportCanvasBox(board, matrix) {
+    const clientBox = getViewportClientBox(board);
+    const client = invertClient(board, [clientBox.minX, clientBox.minY], matrix);
+    const newClient = invertClient(board, [clientBox.maxX, clientBox.maxY], matrix);
+    return {
+        minX: client[0],
+        minY: client[1],
+        maxX: newClient[0],
+        maxY: newClient[1],
+        x: client[0],
+        y: client[1],
+        width: newClient[0] - client[0],
+        height: newClient[1] - client[1]
+    };
 }
 function getViewportClientBox(board) {
     var _a;
-    const hideScrollbar = board.options.hideScrollbar;
-    const scrollBarWidth = hideScrollbar ? SCROLL_BAR_WIDTH : 0;
     const container = (_a = board.host) === null || _a === void 0 ? void 0 : _a.parentElement;
     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;
+    const width = containerRect.width - SCROLL_BAR_WIDTH;
+    const height = containerRect.height - SCROLL_BAR_WIDTH;
     return {
-        width,
-        height,
+        minX: x,
+        minY: y,
+        maxX: x + width,
+        maxY: y + height,
         x,
-        y
+        y,
+        width,
+        height
     };
 }
-function calculateBBox(board) {
-    const viewportBox = getViewportClientBox(board);
+function getGraphicsBBox(board) {
+    const rootGroup = board.host.firstChild;
+    const rootGroupBox = rootGroup.getBBox();
+    return rootGroupBox;
+}
+function calculateBBox(board, zoom) {
+    const boardComponent = PLAIT_BOARD_TO_COMPONENT.get(board);
+    // const clientBox = getViewportClientBox(board);
     const rootGroup = board.host.firstChild;
-    const zoom = board.viewport.zoom;
     const rootGroupBox = rootGroup.getBBox();
     let box = {};
-    const containerWidth = viewportBox.width / zoom;
-    const containerHeight = viewportBox.height / zoom;
+    const containerWidth = boardComponent.width / zoom;
+    const containerHeight = boardComponent.height / zoom;
     if (rootGroupBox.width < containerWidth) {
         const offsetX = rootGroupBox.x + rootGroupBox.width / 2;
         const containerX = containerWidth / 2;
@@ -864,40 +905,6 @@ function calculateBBox(board) {
     // 在新的缩放比容器宽高下的内容盒子位置
     return box;
 }
-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 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;
-    }
-    else if (node.right > canvasRect.right - scrollBarWidth - gap) {
-        result.x = canvasRect.right - scrollBarWidth - gap - node.right - node.width;
-    }
-    if (node.top < canvasRect.top + gap) {
-        result.y = canvasRect.top - node.top - gap;
-    }
-    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;
@@ -1217,8 +1224,11 @@ class PlaitBoardComponent {
         this.destroy$ = new Subject();
         this.autoFitPadding = 8;
         this.isMoving = false;
-        this.focusPoint = [];
-        this.matrix = [];
+        this.zoom = 1;
+        this.viewportCanvasBox = {};
+        this.focusPoint = [0, 0];
+        this.width = 0;
+        this.height = 0;
         this.plaitValue = [];
         this.plaitPlugins = [];
         this.plaitChange = new EventEmitter();
@@ -1263,27 +1273,20 @@ class PlaitBoardComponent {
                 viewport: this.board.viewport,
                 selection: this.board.selection
             };
-            if (this.board.operations.some(op => PlaitOperation.isSetViewportOperation(op))) {
+            if (this.board.operations.length > 0) {
                 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'];
             const options = changes['plaitOptions'];
-            if (valueChange)
+            if (valueChange) {
                 this.board.children = valueChange.currentValue;
+            }
             if (options)
                 this.board.options = options.currentValue;
             this.cdr.markForCheck();
@@ -1292,7 +1295,8 @@ class PlaitBoardComponent {
     ngAfterViewInit() {
         this.plaitBoardInitialized.emit(this.board);
         this.initContainerSize();
-        this.updateViewport();
+        this.setViewport(1);
+        this.plaitViewport ? this.initCanvas(this.plaitViewport) : this.focusGraphicCenter();
     }
     initializePlugins() {
         let board = withMove(withHistory(withSelection(withBoard(createBoard(this.host, this.plaitValue, this.plaitOptions)))));
@@ -1368,34 +1372,49 @@ class PlaitBoardComponent {
             (_a = this.board) === null || _a === void 0 ? void 0 : _a.setFragment(event.clipboardData);
             (_b = this.board) === null || _b === void 0 ? void 0 : _b.deleteFragment(event.clipboardData);
         });
-        fromEvent(this.contentContainer.nativeElement, 'wheel')
-            .pipe(takeUntil(this.destroy$), filter((e) => {
-            if (!this.isFocused) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
+        fromEvent(this.contentContainer.nativeElement, 'mousemove')
+            .pipe(takeUntil(this.destroy$), filter(() => {
             return !!this.isFocused;
         }))
-            .subscribe();
+            .subscribe((e) => {
+            this.focusPoint = [e.clientX, e.clientY];
+        });
+        fromEvent(this.contentContainer.nativeElement, 'mouseleave')
+            .pipe(takeUntil(this.destroy$), filter(() => {
+            return !!this.isFocused;
+        }))
+            .subscribe((e) => {
+            this.resetFocusPoint();
+        });
         fromEvent(this.contentContainer.nativeElement, 'scroll')
-            .pipe(takeUntil(this.destroy$), filter((e) => {
-            if (!this.isFocused) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
+            .pipe(takeUntil(this.destroy$), filter(() => {
             return !!this.isFocused;
         }))
             .subscribe((event) => {
             const scrollLeft = event.target.scrollLeft;
             const scrollTop = event.target.scrollTop;
-            this.setScroll(scrollLeft, scrollTop);
+            (Math.abs(this.scrollLeft - scrollLeft) <= 1 && Math.abs(this.scrollTop - scrollTop) <= 1) ||
+                this.setScroll(scrollLeft, scrollTop);
         });
-        window.onresize = () => {
-            this.updateViewport();
-        };
+        this.resizeElement();
+    }
+    resizeElement() {
+        this.resizeObserver = new ResizeObserver(entries => {
+            for (let entry of entries) {
+                const { width, height } = entry.contentRect;
+                const hideScrollbar = this.board.options.hideScrollbar;
+                const scrollBarWidth = hideScrollbar ? SCROLL_BAR_WIDTH : 0;
+                this.width = width + scrollBarWidth;
+                this.height = height + scrollBarWidth;
+                this.changeSize();
+            }
+        });
+        this.resizeObserver.observe(this.elementRef.nativeElement);
     }
     initContainerSize() {
-        this.renderer2.setStyle(this.contentContainer.nativeElement, 'overflow', 'auto');
+        const clientBox = getViewportClientBox(this.board);
+        this.width = clientBox.width;
+        this.height = clientBox.height;
         this.resizeViewport();
     }
     resizeViewport() {
@@ -1411,73 +1430,151 @@ class PlaitBoardComponent {
         this.renderer2.setStyle(this.contentContainer.nativeElement, 'maxWidth', width);
         this.renderer2.setStyle(this.contentContainer.nativeElement, 'maxHeight', height);
     }
-    setScroll(left, top) {
-        this.scrollLeft = left;
-        this.scrollTop = top;
-        const viewportBox = getViewportClientBox(this.board);
-        const viewBox = getViewBox(this.board);
-        const scrollLeftRatio = left / (viewBox.viewportWidth - viewportBox.width);
-        const scrollTopRatio = top / (viewBox.viewportHeight - viewportBox.height);
-        this.setViewport({
-            offsetXRatio: scrollLeftRatio,
-            offsetYRatio: scrollTopRatio
-        });
-    }
-    updateScroll() {
-        const container = this.contentContainer.nativeElement;
-        container.scrollTo({
-            top: this.scrollTop,
-            left: this.scrollLeft
-        });
+    setMatrix() {
+        const viewBox = this.viewBox;
+        const zoom = this.zoom;
+        this.matrix = [zoom, 0, 0, 0, zoom, 0, -this.scrollLeft - zoom * viewBox[0], -this.scrollTop - zoom * viewBox[1], 1];
     }
-    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;
+    updateViewport() {
+        const clientBox = getViewportClientBox(this.board);
+        this.setViewport(this.board.viewport.zoom, [clientBox.x, clientBox.y]);
+    }
+    setViewport(zoom, focusPoint) {
+        zoom = zoom !== null && zoom !== void 0 ? zoom : this.zoom;
+        zoom = calculateZoom(zoom);
+        if (zoom !== this.zoom) {
+            this.zoom = zoom;
+        }
+        focusPoint = focusPoint !== null && focusPoint !== void 0 ? focusPoint : this.focusPoint;
+        let scrollLeft;
+        let scrollTop;
+        const clientBox = getViewportClientBox(this.board);
         const matrix = this.matrix;
-        const focusPoint = this.focusPoint;
+        const box = calculateBBox(this.board, zoom);
+        const padding = [this.height / 2, this.width / 2];
+        const rootGroupWidth = box.right - box.left;
+        const rootGroupHeight = box.bottom - box.top;
+        const canvasWidth = rootGroupWidth * zoom + 2 * padding[1];
+        const canvasHeight = rootGroupHeight * zoom + 2 * padding[0];
+        const viewBox = [box.left - padding[1] / zoom, box.top - padding[0] / zoom, canvasWidth / zoom, canvasHeight / zoom];
         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];
+            const canvasPoint = [focusPoint[0] - clientBox.x, focusPoint[1] - clientBox.y, 1];
+            const invertMatrix = invert([], matrix);
+            const matrix1 = transformMat3([], [canvasPoint[0], canvasPoint[1], 1], invertMatrix);
+            const matrix2 = [zoom, 0, 0, 0, zoom, 0, -zoom * viewBox[0], -zoom * viewBox[1], 1];
+            const newMatrix = transformMat3([], matrix1, matrix2);
+            scrollLeft = newMatrix[0] - canvasPoint[0];
+            scrollTop = newMatrix[1] - canvasPoint[1];
         }
         else {
-            scrollLeft = (viewportWidth - viewportBox.width) / 2;
-            scrollTop = viewportBox.height / 2 - nweHhBox.top;
+            scrollLeft = (canvasWidth - clientBox.width) / 2;
+            scrollTop = padding[0] / 2 - box.top;
+        }
+        this.canvasWidth = canvasWidth;
+        this.canvasHeight = canvasHeight;
+        this.zoom = zoom;
+        this.viewBox = viewBox;
+        this.setScrollLeft(scrollLeft);
+        this.setScrollTop(scrollTop);
+        this.change();
+    }
+    setScrollLeft(left) {
+        const hideScrollbar = this.board.options.hideScrollbar;
+        const scrollBarWidth = hideScrollbar ? SCROLL_BAR_WIDTH : 0;
+        const width = this.canvasWidth - this.width + scrollBarWidth;
+        this.scrollLeft = left < 0 ? 0 : left > width ? width : left;
+    }
+    setScrollTop(top) {
+        const hideScrollbar = this.board.options.hideScrollbar;
+        const scrollBarWidth = hideScrollbar ? SCROLL_BAR_WIDTH : 0;
+        const height = this.canvasHeight - this.height + scrollBarWidth;
+        this.scrollTop = top < 0 ? 0 : top > height ? height : top;
+    }
+    setScroll(left, top) {
+        this.setScrollLeft(left);
+        this.setScrollTop(top);
+        this.change();
+    }
+    moveTo(point, zoom) {
+        zoom = zoom !== null && zoom !== void 0 ? zoom : this.zoom;
+        const r = invertViewport([0, 0], this.matrix);
+        this.setScroll(this.scrollLeft + (point[0] - r[0]) * zoom, this.scrollTop + (point[1] - r[1]) * zoom);
+    }
+    scrollIntoView(node) {
+        const canvasRect = this.host.getBoundingClientRect();
+        if (!(canvasRect.width <= this.width && canvasRect.height <= this.height)) {
+            const point = convertViewport([node.x, node.y], this.matrix);
+            const fullPoint = convertViewport([node.x + node.width, node.y + node.height], this.matrix);
+            const width = this.width;
+            const height = this.height;
+            let left = this.scrollLeft;
+            let top = this.scrollTop;
+            if (fullPoint[0] > width - SCROLL_BAR_WIDTH) {
+                left += fullPoint[0] - width + SCROLL_BAR_WIDTH;
+            }
+            if (fullPoint[1] > height - SCROLL_BAR_WIDTH) {
+                top += fullPoint[1] - height + SCROLL_BAR_WIDTH;
+            }
+            (left === this.scrollLeft && top === this.scrollTop) || this.setScroll(left, top);
         }
-        this.setScroll(scrollLeft, scrollTop);
-        this.updateViewport();
     }
-    viewportChange() {
-        const viewBox = getViewBox(this.board);
-        const offsetXRatio = this.board.viewport.offsetXRatio;
-        const offsetYRatio = this.board.viewport.offsetYRatio;
-        const viewportBox = getViewportClientBox(this.board);
-        const { minX, minY, width, height, viewportWidth, viewportHeight } = viewBox;
-        const box = [minX, minY, width, height];
-        this.scrollLeft = (viewportWidth - viewportBox.width) * offsetXRatio;
-        this.scrollTop = (viewportHeight - viewportBox.height) * offsetYRatio;
+    change() {
+        this.resizeViewport();
         this.renderer2.setStyle(this.host, 'display', 'block');
-        this.renderer2.setStyle(this.host, 'width', `${viewportWidth}px`);
-        this.renderer2.setStyle(this.host, 'height', `${viewportHeight}px`);
-        if (width > 0 && height > 0) {
-            this.renderer2.setAttribute(this.host, 'viewBox', box.join());
+        this.renderer2.setStyle(this.host, 'width', `${this.canvasWidth}px`);
+        this.renderer2.setStyle(this.host, 'height', `${this.canvasHeight}px`);
+        if (this.viewBox && this.viewBox[2] > 0 && this.viewBox[3] > 0) {
+            this.renderer2.setAttribute(this.host, 'viewBox', this.viewBox.join(','));
         }
-        this.focusPoint = [viewportBox.x, viewportBox.y];
+        this.contentContainer.nativeElement.scrollLeft = this.scrollLeft;
+        this.contentContainer.nativeElement.scrollTop = this.scrollTop;
         this.setMatrix();
+        this.setViewportSetting();
+        this.viewportCanvasBox = getViewportCanvasBox(this.board, this.matrix);
+    }
+    restoreCanvasPoint(point, zoom) {
+        zoom = zoom !== null && zoom !== void 0 ? zoom : this.zoom;
+        this.setViewport(zoom);
+        this.moveTo(point, zoom);
+    }
+    initCanvas(viewport) {
+        const canvasPoint = viewport === null || viewport === void 0 ? void 0 : viewport.canvasPoint;
+        if (canvasPoint) {
+            this.restoreCanvasPoint(canvasPoint, viewport.zoom);
+        }
+        else {
+            this.setViewport(viewport.zoom);
+            this.setScroll(this.scrollLeft, this.scrollTop);
+        }
     }
-    updateViewport() {
-        this.resizeViewport();
-        this.viewportChange();
-        this.updateScroll();
+    focusGraphicCenter() {
+        const rootGroup = this.board.host.firstChild;
+        const rootGroupBox = rootGroup.getBBox();
+        this.focus([rootGroupBox.x + rootGroupBox.width / 2, rootGroupBox.y + rootGroupBox.height / 2]);
+        this.change();
+        this.setViewport(1);
+    }
+    focus(point) {
+        const clientBox = getViewportClientBox(this.board);
+        const matrix = transformMat3([], [point[0], point[1], 1], this.matrix);
+        const newPoint = [clientBox.width / 2, clientBox.height / 2];
+        const scrollLeft = newPoint[0] - matrix[0];
+        const scrollTop = newPoint[1] - matrix[1];
+        this.setScrollLeft(this.scrollLeft - scrollLeft);
+        this.setScrollTop(this.scrollTop - scrollTop);
+        this.setMatrix();
+    }
+    resetFocusPoint() {
+        const clientBox = getViewportClientBox(this.board);
+        this.focusPoint = [clientBox.x + clientBox.width / 2, clientBox.y + clientBox.height / 2];
+    }
+    setViewportSetting() {
+        var _a;
+        const viewport = (_a = this.board) === null || _a === void 0 ? void 0 : _a.viewport;
+        Transforms.setViewport(this.board, Object.assign(Object.assign({}, viewport), { zoom: this.zoom, canvasPoint: invertViewport([0, 0], this.matrix) }));
+    }
+    changeSize() {
+        this.updateViewport();
     }
     // 拖拽模式
     changeMoveMode(cursorStatus) {
@@ -1486,52 +1583,40 @@ class PlaitBoardComponent {
     }
     // 适应画布
     adaptHandle() {
-        const viewportBox = getViewportClientBox(this.board);
+        const clientBox = getViewportClientBox(this.board);
         const rootGroup = this.host.firstChild;
         const rootGroupBox = rootGroup.getBBox();
-        const viewportWidth = viewportBox.width - 2 * this.autoFitPadding;
-        const viewportHeight = viewportBox.height - 2 * this.autoFitPadding;
-        let zoom = this.board.viewport.zoom;
+        const viewportWidth = clientBox.width - 2 * this.autoFitPadding;
+        const viewportHeight = clientBox.height - 2 * this.autoFitPadding;
+        let zoom = this.zoom;
         if (viewportWidth < rootGroupBox.width || viewportHeight < rootGroupBox.height) {
             zoom = Math.min(viewportWidth / rootGroupBox.width, viewportHeight / rootGroupBox.height);
         }
         else {
             zoom = 1;
         }
-        this.setViewport({
-            zoom: calculateZoom(zoom),
-            offsetXRatio: 0.5,
-            offsetYRatio: 0.5
-        });
+        this.focus([rootGroupBox.x + rootGroupBox.width / 2, rootGroupBox.y + rootGroupBox.height / 2]);
+        this.resetFocusPoint();
+        this.setViewport(zoom);
     }
     // 放大
     zoomInHandle() {
-        const zoom = this.board.viewport.zoom;
-        this.setViewport({
-            zoom: calculateZoom(zoom + 0.1)
-        });
+        this.setViewport(this.zoom + 0.1);
     }
     // 缩小
     zoomOutHandle() {
-        const zoom = this.board.viewport.zoom;
-        this.setViewport({
-            zoom: calculateZoom(zoom - 0.1)
-        });
+        this.setViewport(this.zoom - 0.1);
     }
     resetZoomHandel() {
-        this.setViewport({
-            zoom: 1
-        });
-    }
-    setViewport(options) {
-        var _a;
-        const viewport = (_a = this.board) === null || _a === void 0 ? void 0 : _a.viewport;
-        Transforms.setViewport(this.board, Object.assign(Object.assign({}, viewport), options));
+        this.setViewport(1);
     }
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
         HOST_TO_ROUGH_SVG.delete(this.host);
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
     }
     movingChange(isMoving) {
         this.isMoving = isMoving;
@@ -1539,7 +1624,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>
+        <div class="viewport-container" #container>
             <svg #svg width="100%" height="100%" style="position: relative;"></svg>
             <plait-element
                 *ngFor="let item of board.children; let index = index; trackBy: trackBy"
@@ -1568,7 +1653,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             args: [{
                     selector: 'plait-board',
                     template: `
-        <div class="container" #container>
+        <div class="viewport-container" #container>
             <svg #svg width="100%" height="100%" style="position: relative;"></svg>
             <plait-element
                 *ngFor="let item of board.children; let index = index; trackBy: trackBy"
@@ -1652,5 +1737,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, invert, isNoSelectionElement, isNullOrUndefined, isOutExtent, isSetViewportOperation, rotate, shouldClear, shouldMerge, shouldSave, toPoint, toRectangleClient, transformMat3, 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, convertPoint, convertViewport, createG, createSVG, createText, distanceBetweenPointAndPoint, distanceBetweenPointAndSegment, getGraphicsBBox, getViewportCanvasBox, getViewportClientBox, hotkeys, idCreator, inverse, invert, invertClient, invertViewport, isNoSelectionElement, isNullOrUndefined, isSetViewportOperation, rotate, shouldClear, shouldMerge, shouldSave, toPoint, toRectangleClient, transformMat3, transformPoint, transformPoints, updateCursorStatus };
 //# sourceMappingURL=plait-core.mjs.map