@plait/core 0.0.42 → 0.0.44

package/fesm2015/plait-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, HostBinding, Input, Output, ViewChild, ContentChild, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, EventEmitter, HostBinding, Output, ElementRef, ViewChild, ContentChild, NgModule } from '@angular/core';
 import rough from 'roughjs/bin/rough';
 import { Subject, fromEvent } from 'rxjs';
 import { takeUntil, filter } from 'rxjs/operators';
@@ -8,6 +8,9 @@ import { isKeyHotkey, isHotkey } from 'is-hotkey';
 import * as i1 from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
 
+const CLIP_BOARD_FORMAT_KEY = 'x-plait-fragment';
+const SCROLL_BAR_WIDTH = 20;
+
 var BaseCursorStatus;
 (function (BaseCursorStatus) {
     BaseCursorStatus["move"] = "move";
@@ -235,8 +238,8 @@ function isNullOrUndefined(value) {
 
 const Viewport = {
     isViewport: (value) => {
-        return (!isNullOrUndefined(value.offsetX) &&
-            !isNullOrUndefined(value.offsetY) &&
+        return (!isNullOrUndefined(value.offsetXRatio) &&
+            !isNullOrUndefined(value.offsetYRatio) &&
             !isNullOrUndefined(value.zoom) &&
             !isNullOrUndefined(value.viewBackgroundColor));
     }
@@ -245,13 +248,6 @@ const Viewport = {
 const SAVING = new WeakMap();
 const MERGING = new WeakMap();
 
-// record richtext type status
-const FLUSHING = new WeakMap();
-const IS_TEXT_EDITABLE = new WeakMap();
-const BOARD_TO_ON_CHANGE = new WeakMap();
-const HOST_TO_ROUGH_SVG = new WeakMap();
-const PLAIT_BOARD_TO_COMPONENT = new WeakMap();
-
 const applyToDraft = (board, selection, viewport, op) => {
     var _a, _b;
     switch (op.type) {
@@ -442,12 +438,19 @@ const ViewportTransforms = {
 
 const Transforms = Object.assign(Object.assign(Object.assign(Object.assign({}, GeneralTransforms), ViewportTransforms), SelectionTransforms), NodeTransforms);
 
+// record richtext type status
+const FLUSHING = new WeakMap();
+const IS_TEXT_EDITABLE = new WeakMap();
+const BOARD_TO_ON_CHANGE = new WeakMap();
+const HOST_TO_ROUGH_SVG = new WeakMap();
+const PLAIT_BOARD_TO_COMPONENT = new WeakMap();
+
 function createBoard(host, children, options) {
     const board = {
         host,
         viewport: {
-            offsetX: 0,
-            offsetY: 0,
+            offsetXRatio: 0.5,
+            offsetYRatio: 0.5,
             zoom: 1,
             viewBackgroundColor: '#000'
         },
@@ -459,8 +462,11 @@ function createBoard(host, children, options) {
         },
         selection: null,
         cursor: BaseCursorStatus.select,
-        readonly: options.readonly,
-        allowClearBoard: options.allowClearBoard,
+        options: options || {
+            readonly: false,
+            allowClearBoard: false,
+            hideScrollbar: false
+        },
         undo: () => { },
         redo: () => { },
         apply: (operation) => {
@@ -706,21 +712,71 @@ function transformPoints(board, points) {
 }
 function transformPoint(board, point) {
     const { width, height } = board.host.getBoundingClientRect();
-    const viewBox = getViewBox(board);
-    let x = (point[0] / width) * viewBox.width + viewBox.minX;
-    let y = (point[1] / height) * viewBox.height + viewBox.minY;
-    const newPoint = [x - board.viewport.offsetX, y - board.viewport.offsetY];
+    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 { width, height } = board.host.getBoundingClientRect();
-    const scaleWidth = (board.viewport.zoom - 1) * width;
-    const scaleHeight = (board.viewport.zoom - 1) * height;
-    const viewBoxWidth = width - scaleWidth;
-    const viewBoxHeight = height - scaleHeight;
-    const minX = scaleWidth / 2;
-    const minY = scaleHeight / 2;
-    return { minX, minY: minY, width: viewBoxWidth, height: viewBoxHeight };
+    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 getViewportClientBox(board) {
+    var _a;
+    const hideScrollbar = board.options.hideScrollbar;
+    const scrollBarWidth = hideScrollbar ? 0 : SCROLL_BAR_WIDTH;
+    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;
+    return {
+        width,
+        height
+    };
+}
+function calculateBBox(board) {
+    const viewportBox = 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;
+    if (rootGroupBox.width < containerWidth) {
+        const offsetX = rootGroupBox.x + rootGroupBox.width / 2;
+        const containerX = containerWidth / 2;
+        box.left = offsetX - containerX;
+        box.right = offsetX + containerX;
+    }
+    else {
+        box.left = rootGroupBox.x;
+        box.right = rootGroupBox.x + rootGroupBox.width;
+    }
+    if (rootGroupBox.height < containerHeight) {
+        const offsetY = rootGroupBox.y + rootGroupBox.height / 2;
+        const containerY = containerHeight / 2;
+        box.top = offsetY - containerY;
+        box.bottom = offsetY + containerY;
+    }
+    else {
+        box.top = rootGroupBox.y;
+        box.bottom = rootGroupBox.y + rootGroupBox.height;
+    }
+    // 在新的缩放比容器宽高下的内容盒子位置
+    return box;
+}
+function calculateZoom(zoom, minZoom = 0.2, maxZoom = 4) {
+    return zoom < minZoom ? minZoom : zoom > maxZoom ? maxZoom : zoom;
 }
 function isNoSelectionElement(e) {
     var _a;
@@ -897,7 +953,7 @@ function withMove(board) {
         y: 0
     };
     board.mousedown = (event) => {
-        if (board.readonly) {
+        if (board.options.readonly) {
             updateCursorStatus(board, BaseCursorStatus.move);
         }
         else if (!board.selection) {
@@ -915,8 +971,6 @@ function withMove(board) {
     board.mousemove = (event) => {
         const boardComponent = PLAIT_BOARD_TO_COMPONENT.get(board);
         if (board.cursor === BaseCursorStatus.move && board.selection && boardComponent.isMoving) {
-            const viewport = board === null || board === void 0 ? void 0 : board.viewport;
-            Transforms.setViewport(board, Object.assign(Object.assign({}, viewport), { offsetX: viewport.offsetX + ((event.x - plaitBoardMove.x) * 100) / transformZoom(board.viewport.zoom), offsetY: viewport.offsetY + ((event.y - plaitBoardMove.y) * 100) / transformZoom(board.viewport.zoom) }));
             plaitBoardMove.x = event.x;
             plaitBoardMove.y = event.y;
         }
@@ -943,7 +997,7 @@ function withMove(board) {
         keydown(event);
     };
     board.keyup = (event) => {
-        if (board.selection && !board.readonly && event.code === 'Space') {
+        if (board.selection && !board.options.readonly && event.code === 'Space') {
             updateCursorStatus(board, BaseCursorStatus.select);
             const boardComponent = PLAIT_BOARD_TO_COMPONENT.get(board);
             boardComponent.cdr.markForCheck();
@@ -994,8 +1048,65 @@ function withSelection(board) {
     return board;
 }
 
+class PlaitElementComponent {
+    constructor(renderer2, viewContainerRef) {
+        this.renderer2 = renderer2;
+        this.viewContainerRef = viewContainerRef;
+        this.initialized = false;
+        this.selection = null;
+    }
+    ngOnInit() {
+        this.initialize();
+        this.drawElement();
+    }
+    initialize() {
+        this.initialized = true;
+        this.groupG = createG();
+        this.renderer2.setAttribute(this.groupG, 'plait-element-group', this.index.toString());
+        this.host.append(this.groupG);
+    }
+    drawElement() {
+        const gArray = this.board.drawElement({ elementInstance: this });
+        gArray.forEach(g => {
+            this.groupG.appendChild(g);
+        });
+    }
+    ngOnChanges(changes) {
+        if (this.initialized) {
+            this.board.redrawElement({ elementInstance: this }, changes);
+        }
+    }
+    ngOnDestroy() {
+        this.board.destroyElement();
+        this.groupG.remove();
+    }
+}
+PlaitElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlaitElementComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+PlaitElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PlaitElementComponent, selector: "plait-element", inputs: { index: "index", element: "element", board: "board", viewport: "viewport", selection: "selection", host: "host" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlaitElementComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'plait-element',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ViewContainerRef }]; }, propDecorators: { index: [{
+                type: Input
+            }], element: [{
+                type: Input
+            }], board: [{
+                type: Input
+            }], viewport: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], host: [{
+                type: Input
+            }] } });
+
 class PlaitToolbarComponent {
     constructor() {
+        this._viewZoom = 100;
         this.hostClass = `plait-board-toolbar`;
         this.moveHandle = new EventEmitter();
         this.adaptHandle = new EventEmitter();
@@ -1003,6 +1114,12 @@ class PlaitToolbarComponent {
         this.zoomOutHandle = new EventEmitter();
         this.resetZoomHandel = new EventEmitter();
     }
+    set viewZoom(zoom) {
+        this._viewZoom = Math.floor(zoom * 100);
+    }
+    get viewZoom() {
+        return this._viewZoom;
+    }
     dragMove() {
         if (this.cursorStatus !== BaseCursorStatus.move) {
             this.moveHandle.emit(BaseCursorStatus.move);
@@ -1051,101 +1168,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Output
             }] } });
 
-class PlaitElementComponent {
-    constructor(renderer2, viewContainerRef) {
-        this.renderer2 = renderer2;
-        this.viewContainerRef = viewContainerRef;
-        this.initialized = false;
-        this.selection = null;
-    }
-    ngOnInit() {
-        this.initialize();
-        this.transform(true);
-        this.drawElement();
-    }
-    initialize() {
-        this.initialized = true;
-        this.groupG = createG();
-        this.renderer2.setAttribute(this.groupG, 'plait-element-group', this.index.toString());
-        this.host.append(this.groupG);
-    }
-    transform(first = false) {
-        if (first && this.viewport.offsetX === 0 && this.viewport.offsetY === 0) {
-            return;
-        }
-        this.renderer2.setAttribute(this.groupG, 'transform', `translate(${this.viewport.offsetX} ${this.viewport.offsetY})`);
-    }
-    drawElement() {
-        const gArray = this.board.drawElement({ elementInstance: this });
-        gArray.forEach(g => {
-            this.groupG.appendChild(g);
-        });
-    }
-    ngOnChanges(changes) {
-        const viewport = changes['viewport'];
-        if (this.initialized && viewport) {
-            this.transform();
-        }
-        if (this.initialized) {
-            this.board.redrawElement({ elementInstance: this }, changes);
-        }
-    }
-    ngOnDestroy() {
-        this.board.destroyElement();
-        this.groupG.remove();
-    }
-}
-PlaitElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlaitElementComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-PlaitElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PlaitElementComponent, selector: "plait-element", inputs: { index: "index", element: "element", board: "board", viewport: "viewport", selection: "selection", host: "host" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlaitElementComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'plait-element',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ViewContainerRef }]; }, propDecorators: { index: [{
-                type: Input
-            }], element: [{
-                type: Input
-            }], board: [{
-                type: Input
-            }], viewport: [{
-                type: Input
-            }], selection: [{
-                type: Input
-            }], host: [{
-                type: Input
-            }] } });
-
 class PlaitBoardComponent {
-    constructor(cdr, renderer2) {
+    constructor(cdr, renderer2, elementRef) {
         this.cdr = cdr;
         this.renderer2 = renderer2;
+        this.elementRef = elementRef;
         this.hasInitialized = false;
         this.destroy$ = new Subject();
-        this._viewZoom = 100;
+        this.autoFitPadding = 8;
         this.isMoving = false;
         this.plaitValue = [];
         this.plaitPlugins = [];
-        this.plaitReadonly = false;
-        this.plaitAllowClearBoard = false;
         this.plaitChange = new EventEmitter();
         this.plaitBoardInitialized = new EventEmitter();
         this.trackBy = (index, element) => {
             return index;
         };
     }
-    get hostClass() {
-        return `plait-board-container ${this.board.cursor}`;
-    }
-    get viewZoom() {
-        const vZoom = transformZoom(this.board.viewport.zoom);
-        if (this._viewZoom !== vZoom) {
-            this._viewZoom = vZoom;
-        }
-        return vZoom;
-    }
     get isMoveMode() {
         return this.board.cursor === BaseCursorStatus.move;
     }
@@ -1156,8 +1195,11 @@ class PlaitBoardComponent {
         var _a;
         return (_a = this.board) === null || _a === void 0 ? void 0 : _a.selection;
     }
+    get hostClass() {
+        return `plait-board-container ${this.board.cursor}`;
+    }
     get readonly() {
-        return this.plaitReadonly;
+        return this.board.options.readonly;
     }
     get moving() {
         return this.board.cursor === BaseCursorStatus.move && this.isMoving;
@@ -1170,7 +1212,6 @@ class PlaitBoardComponent {
         HOST_TO_ROUGH_SVG.set(this.host, roughSVG);
         this.initializePlugins();
         this.initializeEvents();
-        this.updateViewport();
         PLAIT_BOARD_TO_COMPONENT.set(this.board, this);
         BOARD_TO_ON_CHANGE.set(this.board, () => {
             this.cdr.detectChanges();
@@ -1180,7 +1221,6 @@ class PlaitBoardComponent {
                 viewport: this.board.viewport,
                 selection: this.board.selection
             };
-            // update viewBox
             if (this.board.operations.some(op => PlaitOperation.isSetViewportOperation(op))) {
                 this.updateViewport();
             }
@@ -1197,10 +1237,11 @@ class PlaitBoardComponent {
     }
     ngAfterViewInit() {
         this.plaitBoardInitialized.emit(this.board);
+        this.initContainerSize();
+        this.updateViewport();
     }
     initializePlugins() {
-        const options = { readonly: this.plaitReadonly, allowClearBoard: this.plaitAllowClearBoard };
-        let board = withMove(withHistory(withSelection(withBoard(createBoard(this.host, this.plaitValue, options)))));
+        let board = withMove(withHistory(withSelection(withBoard(createBoard(this.host, this.plaitValue, this.plaitOptions)))));
         this.plaitPlugins.forEach(plugin => {
             board = plugin(board);
         });
@@ -1230,15 +1271,6 @@ class PlaitBoardComponent {
             .subscribe((event) => {
             this.board.dblclick(event);
         });
-        fromEvent(this.host, 'wheel')
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((event) => {
-            if (this.isFocused) {
-                event.preventDefault();
-                const viewport = this.board.viewport;
-                Transforms.setViewport(this.board, Object.assign(Object.assign({}, viewport), { offsetX: (viewport === null || viewport === void 0 ? void 0 : viewport.offsetX) - event.deltaX, offsetY: (viewport === null || viewport === void 0 ? void 0 : viewport.offsetY) - event.deltaY }));
-            }
-        });
         fromEvent(document, 'keydown')
             .pipe(takeUntil(this.destroy$), filter(() => {
             return !IS_TEXT_EDITABLE.get(this.board) && !!this.board.selection;
@@ -1282,19 +1314,85 @@ 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();
+            }
+            return !!this.isFocused;
+        }))
+            .subscribe();
+        fromEvent(this.contentContainer.nativeElement, 'scroll')
+            .pipe(takeUntil(this.destroy$), filter((e) => {
+            if (!this.isFocused) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            return !!this.isFocused;
+        }))
+            .subscribe((event) => {
+            const scrollLeft = event.target.scrollLeft;
+            const scrollTop = event.target.scrollTop;
+            this.getScrollOffset(scrollLeft, scrollTop);
+        });
         window.onresize = () => {
-            this.refreshViewport();
+            this.updateViewport();
         };
     }
-    refreshViewport() {
+    initContainerSize() {
+        this.renderer2.setStyle(this.contentContainer.nativeElement, 'overflow', 'auto');
+        this.resizeViewport();
+    }
+    resizeViewport() {
         var _a;
-        const viewBoxModel = getViewBox(this.board);
-        const viewBoxValues = (_a = this.host.getAttribute('viewBox')) === null || _a === void 0 ? void 0 : _a.split(',');
-        this.renderer2.setAttribute(this.host, 'viewBox', `${viewBoxValues[0].trim()}, ${viewBoxValues[1].trim()}, ${viewBoxModel.width}, ${viewBoxModel.height}`);
+        const container = (_a = this.elementRef.nativeElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+        const containerRect = container === null || container === void 0 ? void 0 : container.getBoundingClientRect();
+        const hideScrollbar = this.board.options.hideScrollbar;
+        const scrollBarWidth = hideScrollbar ? 0 : SCROLL_BAR_WIDTH;
+        const width = `${containerRect.width + scrollBarWidth}px`;
+        const height = `${containerRect.height + scrollBarWidth}px`;
+        this.renderer2.setStyle(this.contentContainer.nativeElement, 'width', width);
+        this.renderer2.setStyle(this.contentContainer.nativeElement, 'height', height);
+        this.renderer2.setStyle(this.contentContainer.nativeElement, 'maxWidth', width);
+        this.renderer2.setStyle(this.contentContainer.nativeElement, 'maxHeight', height);
     }
-    updateViewport() {
+    setScroll(left, top) {
+        const container = this.contentContainer.nativeElement;
+        container.scrollTo({
+            top,
+            left
+        });
+    }
+    getScrollOffset(left, top) {
+        const viewportBox = getViewportClientBox(this.board);
         const viewBox = getViewBox(this.board);
-        this.renderer2.setAttribute(this.host, 'viewBox', `${viewBox.minX}, ${viewBox.minY}, ${viewBox.width}, ${viewBox.height}`);
+        const scrollLeftRatio = left / (viewBox.viewportWidth - viewportBox.width);
+        const scrollTopRatio = top / (viewBox.viewportHeight - viewportBox.height);
+        this.setViewport({
+            offsetXRatio: scrollLeftRatio,
+            offsetYRatio: scrollTopRatio
+        });
+    }
+    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];
+        const scrollLeft = (viewportWidth - viewportBox.width) * offsetXRatio;
+        const scrollTop = (viewportHeight - viewportBox.height) * offsetYRatio;
+        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`);
+        this.renderer2.setStyle(this.host, 'cursor', this.isMoveMode ? 'grab' : 'default');
+        this.renderer2.setAttribute(this.host, 'viewBox', box.join());
+        this.setScroll(scrollLeft, scrollTop);
+    }
+    updateViewport() {
+        this.viewportChange();
     }
     // 拖拽模式
     changeMoveMode(cursorStatus) {
@@ -1303,35 +1401,44 @@ class PlaitBoardComponent {
     }
     // 适应画布
     adaptHandle() {
-        var _a;
-        const viewport = (_a = this.board) === null || _a === void 0 ? void 0 : _a.viewport;
-        Transforms.setViewport(this.board, Object.assign(Object.assign({}, viewport), { offsetX: 0, offsetY: 0 }));
-        this.resetZoomHandel();
+        const viewportBox = 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;
+        if (viewportWidth < rootGroupBox.width || viewportHeight < rootGroupBox.height) {
+            zoom = Math.min(viewportWidth / rootGroupBox.width, viewportHeight / rootGroupBox.height);
+        }
+        this.setViewport({
+            zoom: calculateZoom(zoom),
+            offsetXRatio: 0.5,
+            offsetYRatio: 0.5
+        });
     }
     // 放大
     zoomInHandle() {
-        if (this._viewZoom >= 400) {
-            return;
-        }
-        this._viewZoom += 10;
-        this.zoomChange();
+        const zoom = this.board.viewport.zoom;
+        this.setViewport({
+            zoom: calculateZoom(zoom + 0.1)
+        });
     }
     // 缩小
     zoomOutHandle() {
-        if (this._viewZoom <= 20) {
-            return;
-        }
-        this._viewZoom -= 10;
-        this.zoomChange();
+        const zoom = this.board.viewport.zoom;
+        this.setViewport({
+            zoom: calculateZoom(zoom - 0.1)
+        });
     }
     resetZoomHandel() {
-        this._viewZoom = 100;
-        this.zoomChange();
+        this.setViewport({
+            zoom: 1
+        });
     }
-    zoomChange() {
+    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), { zoom: transformViewZoom(this._viewZoom) }));
+        Transforms.setViewport(this.board, Object.assign(Object.assign({}, viewport), options));
     }
     ngOnDestroy() {
         this.destroy$.next();
@@ -1342,82 +1449,78 @@ class PlaitBoardComponent {
         this.isMoving = isMoving;
     }
 }
-PlaitBoardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlaitBoardComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], 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", plaitReadonly: "plaitReadonly", plaitAllowClearBoard: "plaitAllowClearBoard" }, 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 }], usesOnChanges: true, ngImport: i0, template: `
-        <svg #svg width="100%" height="100%" style="position: relative"></svg>
+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>
+            <plait-element
+                *ngFor="let item of board.children; let index = index; trackBy: trackBy"
+                [index]="index"
+                [element]="item"
+                [board]="board"
+                [viewport]="board.viewport"
+                [selection]="board.selection"
+                [host]="host"
+            ></plait-element>
+        </div>
         <plait-toolbar
             *ngIf="isFocused && !toolbarTemplateRef"
             [cursorStatus]="board.cursor"
-            [viewZoom]="viewZoom"
+            [viewZoom]="board.viewport!.zoom"
             (moveHandle)="changeMoveMode($event)"
             (adaptHandle)="adaptHandle()"
             (zoomInHandle)="zoomInHandle()"
             (zoomOutHandle)="zoomOutHandle()"
             (resetZoomHandel)="resetZoomHandel()"
         ></plait-toolbar>
-        <plait-element
-            *ngFor="let item of board.children; let index = index; trackBy: trackBy"
-            [index]="index"
-            [element]="item"
-            [board]="board"
-            [viewport]="board.viewport"
-            [selection]="board.selection"
-            [host]="host"
-        ></plait-element>
         <ng-content></ng-content>
-    `, isInline: true, components: [{ type: PlaitToolbarComponent, selector: "plait-toolbar", inputs: ["cursorStatus", "viewZoom"], outputs: ["moveHandle", "adaptHandle", "zoomInHandle", "zoomOutHandle", "resetZoomHandel"] }, { type: PlaitElementComponent, selector: "plait-element", inputs: ["index", "element", "board", "viewport", "selection", "host"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: PlaitElementComponent, selector: "plait-element", inputs: ["index", "element", "board", "viewport", "selection", "host"] }, { type: PlaitToolbarComponent, selector: "plait-toolbar", inputs: ["cursorStatus", "viewZoom"], outputs: ["moveHandle", "adaptHandle", "zoomInHandle", "zoomOutHandle", "resetZoomHandel"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlaitBoardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'plait-board',
                     template: `
-        <svg #svg width="100%" height="100%" style="position: relative"></svg>
+        <div class="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"
+                [index]="index"
+                [element]="item"
+                [board]="board"
+                [viewport]="board.viewport"
+                [selection]="board.selection"
+                [host]="host"
+            ></plait-element>
+        </div>
         <plait-toolbar
             *ngIf="isFocused && !toolbarTemplateRef"
             [cursorStatus]="board.cursor"
-            [viewZoom]="viewZoom"
+            [viewZoom]="board.viewport!.zoom"
             (moveHandle)="changeMoveMode($event)"
             (adaptHandle)="adaptHandle()"
             (zoomInHandle)="zoomInHandle()"
             (zoomOutHandle)="zoomOutHandle()"
             (resetZoomHandel)="resetZoomHandel()"
         ></plait-toolbar>
-        <plait-element
-            *ngFor="let item of board.children; let index = index; trackBy: trackBy"
-            [index]="index"
-            [element]="item"
-            [board]="board"
-            [viewport]="board.viewport"
-            [selection]="board.selection"
-            [host]="host"
-        ></plait-element>
         <ng-content></ng-content>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], svg: [{
-                type: ViewChild,
-                args: ['svg', { static: true }]
-            }], toolbarTemplateRef: [{
-                type: ContentChild,
-                args: ['plaitToolbar']
-            }], plaitValue: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { plaitValue: [{
                 type: Input
             }], plaitViewport: [{
                 type: Input
             }], plaitPlugins: [{
                 type: Input
-            }], plaitReadonly: [{
-                type: Input
-            }], plaitAllowClearBoard: [{
+            }], plaitOptions: [{
                 type: Input
             }], plaitChange: [{
                 type: Output
             }], plaitBoardInitialized: [{
                 type: Output
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
             }], readonly: [{
                 type: HostBinding,
                 args: ['class.readonly']
@@ -1427,6 +1530,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], focused: [{
                 type: HostBinding,
                 args: ['class.focused']
+            }], svg: [{
+                type: ViewChild,
+                args: ['svg', { static: true }]
+            }], toolbarTemplateRef: [{
+                type: ContentChild,
+                args: ['plaitToolbar']
+            }], contentContainer: [{
+                type: ViewChild,
+                args: ['container', { read: ElementRef, static: true }]
             }] } });
 
 const COMPONENTS = [PlaitBoardComponent, PlaitElementComponent, PlaitToolbarComponent];
@@ -1444,8 +1556,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }] });
 
-const CLIP_BOARD_FORMAT_KEY = 'x-plait-fragment';
-
 /*
  * Public API Surface of plait
  */
@@ -1454,5 +1564,5 @@ const CLIP_BOARD_FORMAT_KEY = 'x-plait-fragment';
  * 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, Transforms, Viewport, createG, createSVG, createText, distanceBetweenPointAndPoint, distanceBetweenPointAndSegment, getViewBox, hotkeys, idCreator, inverse, isNoSelectionElement, isNullOrUndefined, isSetViewportOperation, rotate, shouldClear, shouldMerge, shouldSave, toPoint, toRectangleClient, transformPoint, transformPoints, transformViewZoom, transformZoom, 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, isNoSelectionElement, isNullOrUndefined, isSetViewportOperation, rotate, shouldClear, shouldMerge, shouldSave, toPoint, toRectangleClient, transformPoint, transformPoints, transformViewZoom, transformZoom, updateCursorStatus };
 //# sourceMappingURL=plait-core.mjs.map