@plait/core 0.0.42 → 0.0.43

package/fesm2020/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";
@@ -255,8 +258,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));
     }
@@ -265,13 +268,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) => {
     switch (op.type) {
         case 'insert_node': {
@@ -466,12 +462,19 @@ const Transforms = {
     ...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'
         },
@@ -729,22 +732,68 @@ function transformPoints(board, points) {
     return newPoints;
 }
 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 x = (point[0] / viewBox.viewportWidth) * viewBox.width + viewBox.minX;
+    const y = (point[1] / viewBox.viewportHeight) * viewBox.height + viewBox.minY;
+    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) {
+    const container = board.host?.parentElement;
+    const containerRect = container?.getBoundingClientRect();
+    const width = containerRect.width - SCROLL_BAR_WIDTH;
+    const height = containerRect.height - SCROLL_BAR_WIDTH;
+    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) {
     return e.target?.closest('.plait-board-attached');
@@ -938,12 +987,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?.viewport;
-            Transforms.setViewport(board, {
-                ...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;
         }
@@ -1021,8 +1064,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();
@@ -1030,6 +1130,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);
@@ -1078,81 +1184,15 @@ 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.isMoving = false;
+        this.autoFitPadding = 8;
         this.plaitValue = [];
         this.plaitPlugins = [];
         this.plaitReadonly = false;
@@ -1163,16 +1203,6 @@ class PlaitBoardComponent {
             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;
     }
@@ -1182,6 +1212,9 @@ class PlaitBoardComponent {
     get isFocused() {
         return this.board?.selection;
     }
+    get hostClass() {
+        return `plait-board-container ${this.board.cursor}`;
+    }
     get readonly() {
         return this.plaitReadonly;
     }
@@ -1196,7 +1229,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();
@@ -1206,10 +1238,7 @@ class PlaitBoardComponent {
                 viewport: this.board.viewport,
                 selection: this.board.selection
             };
-            // update viewBox
-            if (this.board.operations.some(op => PlaitOperation.isSetViewportOperation(op))) {
-                this.updateViewport();
-            }
+            this.updateViewport();
             this.plaitChange.emit(changeEvent);
         });
         this.hasInitialized = true;
@@ -1223,6 +1252,8 @@ class PlaitBoardComponent {
     }
     ngAfterViewInit() {
         this.plaitBoardInitialized.emit(this.board);
+        this.initContainerSize();
+        this.updateViewport();
     }
     initializePlugins() {
         const options = { readonly: this.plaitReadonly, allowClearBoard: this.plaitAllowClearBoard };
@@ -1256,19 +1287,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, {
-                    ...viewport,
-                    offsetX: viewport?.offsetX - event.deltaX,
-                    offsetY: viewport?.offsetY - event.deltaY
-                });
-            }
-        });
         fromEvent(document, 'keydown')
             .pipe(takeUntil(this.destroy$), filter(() => {
             return !IS_TEXT_EDITABLE.get(this.board) && !!this.board.selection;
@@ -1307,18 +1325,70 @@ class PlaitBoardComponent {
             this.board?.setFragment(event.clipboardData);
             this.board?.deleteFragment(event.clipboardData);
         });
+        fromEvent(this.contentContainer.nativeElement, 'scroll')
+            .pipe(takeUntil(this.destroy$), filter(() => {
+            return !!this.isFocused;
+        }))
+            .subscribe((event) => {
+            const scrollLeft = event.target.scrollLeft;
+            const scrollTop = event.target.scrollTop;
+            this.getScrollOffset(scrollLeft, scrollTop);
+            this.setScroll(scrollLeft, scrollTop);
+        });
         window.onresize = () => {
-            this.refreshViewport();
+            this.updateViewport();
         };
     }
-    refreshViewport() {
-        const viewBoxModel = getViewBox(this.board);
-        const viewBoxValues = this.host.getAttribute('viewBox')?.split(',');
-        this.renderer2.setAttribute(this.host, 'viewBox', `${viewBoxValues[0].trim()}, ${viewBoxValues[1].trim()}, ${viewBoxModel.width}, ${viewBoxModel.height}`);
+    initContainerSize() {
+        this.renderer2.setStyle(this.contentContainer.nativeElement, 'overflow', 'auto');
+        this.resizeViewport();
+    }
+    resizeViewport() {
+        const container = this.elementRef.nativeElement?.parentElement;
+        const containerRect = container?.getBoundingClientRect();
+        const width = `${containerRect.width + SCROLL_BAR_WIDTH}px`;
+        const height = `${containerRect.height + SCROLL_BAR_WIDTH}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);
+    }
+    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);
+        const scrollLeftRatio = left / (viewBox.viewportWidth - viewportBox.width);
+        const scrollTopRatio = top / (viewBox.viewportHeight - viewportBox.height);
+        this.setViewport({
+            offsetXRatio: scrollLeftRatio,
+            offsetYRatio: scrollTopRatio
+        });
+    }
+    viewportChange(viewBox) {
+        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.plaitReadonly ? 'grab' : 'default');
+        this.renderer2.setAttribute(this.host, 'viewBox', box.join());
+        this.setScroll(scrollLeft, scrollTop);
     }
     updateViewport() {
         const viewBox = getViewBox(this.board);
-        this.renderer2.setAttribute(this.host, 'viewBox', `${viewBox.minX}, ${viewBox.minY}, ${viewBox.width}, ${viewBox.height}`);
+        this.viewportChange(viewBox);
     }
     // 拖拽模式
     changeMoveMode(cursorStatus) {
@@ -1327,39 +1397,45 @@ class PlaitBoardComponent {
     }
     // 适应画布
     adaptHandle() {
-        const viewport = this.board?.viewport;
-        Transforms.setViewport(this.board, {
-            ...viewport,
-            offsetX: 0,
-            offsetY: 0
+        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
         });
-        this.resetZoomHandel();
     }
     // 放大
     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) {
         const viewport = this.board?.viewport;
         Transforms.setViewport(this.board, {
             ...viewport,
-            zoom: transformViewZoom(this._viewZoom)
+            ...options
         });
     }
     ngOnDestroy() {
@@ -1371,69 +1447,64 @@ 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", 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 }, { 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
@@ -1447,6 +1518,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Output
             }], plaitBoardInitialized: [{
                 type: Output
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
             }], readonly: [{
                 type: HostBinding,
                 args: ['class.readonly']
@@ -1456,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];
@@ -1473,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
  */
@@ -1483,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