@plait/core 0.0.43 → 0.0.45

package/fesm2020/plait-core.mjs

@@ -486,8 +486,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) => {
@@ -732,9 +735,10 @@ function transformPoints(board, points) {
     return newPoints;
 }
 function transformPoint(board, point) {
-    const viewBox = getViewBox(board);
-    const x = (point[0] / viewBox.viewportWidth) * viewBox.width + viewBox.minX;
-    const y = (point[1] / viewBox.viewportHeight) * viewBox.height + viewBox.minY;
+    const { width, height } = board.host.getBoundingClientRect();
+    const viewBox = board.host.viewBox.baseVal;
+    const x = (point[0] / width) * viewBox.width + viewBox.x;
+    const y = (point[1] / height) * viewBox.height + viewBox.y;
     const newPoint = [x, y];
     return newPoint;
 }
@@ -752,10 +756,12 @@ function getViewBox(board) {
     return { minX, minY, width, height, viewportWidth, viewportHeight };
 }
 function getViewportClientBox(board) {
+    const hideScrollbar = board.options.hideScrollbar;
+    const scrollBarWidth = hideScrollbar ? SCROLL_BAR_WIDTH : 0;
     const container = board.host?.parentElement;
     const containerRect = container?.getBoundingClientRect();
-    const width = containerRect.width - SCROLL_BAR_WIDTH;
-    const height = containerRect.height - SCROLL_BAR_WIDTH;
+    const width = containerRect.width - scrollBarWidth;
+    const height = containerRect.height - scrollBarWidth;
     return {
         width,
         height
@@ -969,7 +975,7 @@ function withMove(board) {
         y: 0
     };
     board.mousedown = (event) => {
-        if (board.readonly) {
+        if (board.options.readonly) {
             updateCursorStatus(board, BaseCursorStatus.move);
         }
         else if (!board.selection) {
@@ -1013,7 +1019,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();
@@ -1191,12 +1197,10 @@ class PlaitBoardComponent {
         this.elementRef = elementRef;
         this.hasInitialized = false;
         this.destroy$ = new Subject();
-        this.isMoving = false;
         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) => {
@@ -1216,7 +1220,7 @@ class PlaitBoardComponent {
         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;
@@ -1238,15 +1242,21 @@ class PlaitBoardComponent {
                 viewport: this.board.viewport,
                 selection: this.board.selection
             };
-            this.updateViewport();
+            if (this.board.operations.some(op => PlaitOperation.isSetViewportOperation(op))) {
+                this.updateViewport();
+            }
             this.plaitChange.emit(changeEvent);
         });
         this.hasInitialized = true;
     }
     ngOnChanges(changes) {
-        const valueChange = changes['plaitValue'];
-        if (valueChange && this.hasInitialized) {
-            this.board.children = valueChange.currentValue;
+        if (this.hasInitialized) {
+            const valueChange = changes['plaitValue'];
+            const options = changes['plaitOptions'];
+            if (valueChange)
+                this.board.children = valueChange.currentValue;
+            if (options)
+                this.board.options = options.currentValue;
             this.cdr.markForCheck();
         }
     }
@@ -1256,8 +1266,7 @@ class PlaitBoardComponent {
         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);
         });
@@ -1325,15 +1334,27 @@ class PlaitBoardComponent {
             this.board?.setFragment(event.clipboardData);
             this.board?.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(() => {
+            .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);
-            this.setScroll(scrollLeft, scrollTop);
         });
         window.onresize = () => {
             this.updateViewport();
@@ -1346,8 +1367,10 @@ class PlaitBoardComponent {
     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`;
+        const hideScrollbar = this.board.options.hideScrollbar;
+        const scrollBarWidth = hideScrollbar ? SCROLL_BAR_WIDTH : 0;
+        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);
@@ -1370,7 +1393,8 @@ class PlaitBoardComponent {
             offsetYRatio: scrollTopRatio
         });
     }
-    viewportChange(viewBox) {
+    viewportChange() {
+        const viewBox = getViewBox(this.board);
         const offsetXRatio = this.board.viewport.offsetXRatio;
         const offsetYRatio = this.board.viewport.offsetYRatio;
         const viewportBox = getViewportClientBox(this.board);
@@ -1378,17 +1402,18 @@ class PlaitBoardComponent {
         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.renderer2.setStyle(this.host, 'cursor', this.isMoveMode ? 'grab' : 'default');
+        if (width > 0 && height > 0) {
+            this.renderer2.setAttribute(this.host, 'viewBox', box.join());
+        }
         this.setScroll(scrollLeft, scrollTop);
     }
     updateViewport() {
-        const viewBox = getViewBox(this.board);
-        this.viewportChange(viewBox);
+        this.resizeViewport();
+        this.viewportChange();
     }
     // 拖拽模式
     changeMoveMode(cursorStatus) {
@@ -1448,7 +1473,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", 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: `
+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
@@ -1510,9 +1535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], plaitPlugins: [{
                 type: Input
-            }], plaitReadonly: [{
-                type: Input
-            }], plaitAllowClearBoard: [{
+            }], plaitOptions: [{
                 type: Input
             }], plaitChange: [{
                 type: Output