@plait/core 0.0.39 → 0.0.41

package/fesm2020/plait-core.mjs

@@ -270,6 +270,7 @@ 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) {
@@ -828,7 +829,7 @@ const PlaitHistoryBoard = {
     }
 };
 
-function withHistroy(board) {
+function withHistory(board) {
     const { apply, keydown } = board;
     board.history = { undos: [], redos: [] };
     board.redo = () => {
@@ -912,6 +913,69 @@ function withHistroy(board) {
     return board;
 }
 
+function withMove(board) {
+    const { mousedown, mousemove, globalMouseup, keydown, keyup } = board;
+    const plaitBoardMove = {
+        x: 0,
+        y: 0
+    };
+    board.mousedown = (event) => {
+        if (board.readonly) {
+            updateCursorStatus(board, BaseCursorStatus.move);
+        }
+        else if (!board.selection) {
+            updateCursorStatus(board, BaseCursorStatus.select);
+        }
+        if (board.cursor === BaseCursorStatus.move && board.selection) {
+            const boardComponent = PLAIT_BOARD_TO_COMPONENT.get(board);
+            boardComponent.movingChange(true);
+            plaitBoardMove.x = event.x;
+            plaitBoardMove.y = event.y;
+            boardComponent.cdr.detectChanges();
+        }
+        mousedown(event);
+    };
+    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;
+        }
+        mousemove(event);
+    };
+    board.globalMouseup = (event) => {
+        if (board.selection) {
+            const boardComponent = PLAIT_BOARD_TO_COMPONENT.get(board);
+            boardComponent.movingChange(false);
+            plaitBoardMove.x = 0;
+            plaitBoardMove.y = 0;
+        }
+        globalMouseup(event);
+    };
+    board.keydown = (event) => {
+        if (board.selection && event.code === 'Space') {
+            updateCursorStatus(board, BaseCursorStatus.move);
+            const boardComponent = PLAIT_BOARD_TO_COMPONENT.get(board);
+            boardComponent.cdr.detectChanges();
+            event.preventDefault();
+        }
+        keydown(event);
+    };
+    board.keyup = (event) => {
+        board.selection && !board.readonly && event.code === 'Space' && updateCursorStatus(board, BaseCursorStatus.select);
+        const boardComponent = PLAIT_BOARD_TO_COMPONENT.get(board);
+        boardComponent.cdr.detectChanges();
+        keyup(event);
+    };
+    return board;
+}
+
 function withSelection(board) {
     const { mousedown, mousemove, globalMouseup } = board;
     let start = null;
@@ -1082,13 +1146,10 @@ class PlaitBoardComponent {
         this.cdr = cdr;
         this.elementRef = elementRef;
         this.renderer2 = renderer2;
+        this.hasInitialized = false;
         this.destroy$ = new Subject();
         this._viewZoom = 100;
-        this.plaitBoardMove = {
-            isMoving: false,
-            x: 0,
-            y: 0
-        };
+        this.isMoving = false;
         this.plaitValue = [];
         this.plaitPlugins = [];
         this.plaitReadonly = false;
@@ -1116,11 +1177,14 @@ class PlaitBoardComponent {
         return this.svg.nativeElement;
     }
     get isFocused() {
-        if (!this.board?.selection && this.board.cursor === BaseCursorStatus.move) {
-            this.changeMoveMode(BaseCursorStatus.select);
-        }
         return this.board?.selection;
     }
+    get readonly() {
+        return this.plaitReadonly;
+    }
+    get moving() {
+        return this.isMoving;
+    }
     get focused() {
         return this.isFocused;
     }
@@ -1130,6 +1194,7 @@ class PlaitBoardComponent {
         this.initializePlugins();
         this.initializeEvents();
         this.updateViewport();
+        PLAIT_BOARD_TO_COMPONENT.set(this.board, this);
         BOARD_TO_ON_CHANGE.set(this.board, () => {
             this.cdr.detectChanges();
             const changeEvent = {
@@ -1144,13 +1209,21 @@ class PlaitBoardComponent {
             }
             this.plaitChange.emit(changeEvent);
         });
+        this.hasInitialized = true;
+    }
+    ngOnChanges(changes) {
+        const valueChange = changes['plaitValue'];
+        if (valueChange && this.hasInitialized) {
+            this.board.children = valueChange.currentValue;
+            this.cdr.markForCheck();
+        }
     }
     ngAfterViewInit() {
         this.plaitBoardInitialized.emit(this.board);
     }
     initializePlugins() {
         const options = { readonly: this.plaitReadonly, allowClearBoard: this.plaitAllowClearBoard };
-        let board = withHistroy(withSelection(withBoard(createBoard(this.host, this.plaitValue, options))));
+        let board = withMove(withHistory(withSelection(withBoard(createBoard(this.host, this.plaitValue, options)))));
         this.plaitPlugins.forEach(plugin => {
             board = plugin(board);
         });
@@ -1164,19 +1237,16 @@ class PlaitBoardComponent {
             .pipe(takeUntil(this.destroy$))
             .subscribe((event) => {
             this.board.mousedown(event);
-            this.isFocused && this.isMoveMode && this.initMove(event);
         });
         fromEvent(this.host, 'mousemove')
             .pipe(takeUntil(this.destroy$))
             .subscribe((event) => {
             this.board.mousemove(event);
-            this.isFocused && this.isMoveMode && this.plaitBoardMove.isMoving && this.moving(event);
         });
         fromEvent(document, 'mouseup')
             .pipe(takeUntil(this.destroy$))
             .subscribe((event) => {
             this.board.globalMouseup(event);
-            this.isFocused && this.moveEnd();
         });
         fromEvent(this.host, 'dblclick')
             .pipe(takeUntil(this.destroy$))
@@ -1202,10 +1272,6 @@ class PlaitBoardComponent {
         }))
             .subscribe((event) => {
             this.board?.keydown(event);
-            if (this.isFocused && event.code === 'Space') {
-                this.changeMoveMode(BaseCursorStatus.move);
-                event.preventDefault();
-            }
         });
         fromEvent(document, 'keyup')
             .pipe(takeUntil(this.destroy$), filter(() => {
@@ -1213,7 +1279,6 @@ class PlaitBoardComponent {
         }))
             .subscribe((event) => {
             this.board?.keyup(event);
-            this.isFocused && event.code === 'Space' && this.changeMoveMode(BaseCursorStatus.select);
         });
         fromEvent(document, 'copy')
             .pipe(takeUntil(this.destroy$), filter(() => {
@@ -1252,27 +1317,6 @@ class PlaitBoardComponent {
         const viewBox = getViewBox(this.board);
         this.renderer2.setAttribute(this.host, 'viewBox', `${viewBox.minX}, ${viewBox.minY}, ${viewBox.width}, ${viewBox.height}`);
     }
-    initMove(e) {
-        this.plaitBoardMove.isMoving = true;
-        this.plaitBoardMove.x = e.x;
-        this.plaitBoardMove.y = e.y;
-        this.cdr.detectChanges();
-    }
-    moving(e) {
-        const viewport = this.board?.viewport;
-        Transforms.setViewport(this.board, {
-            ...viewport,
-            offsetX: viewport.offsetX + ((e.x - this.plaitBoardMove.x) * 100) / this._viewZoom,
-            offsetY: viewport.offsetY + ((e.y - this.plaitBoardMove.y) * 100) / this._viewZoom
-        });
-        this.plaitBoardMove.x = e.x;
-        this.plaitBoardMove.y = e.y;
-    }
-    moveEnd() {
-        this.plaitBoardMove.isMoving = false;
-        this.plaitBoardMove.x = 0;
-        this.plaitBoardMove.y = 0;
-    }
     // 拖拽模式
     changeMoveMode(cursorStatus) {
         updateCursorStatus(this.board, cursorStatus);
@@ -1320,16 +1364,13 @@ class PlaitBoardComponent {
         this.destroy$.complete();
         HOST_TO_ROUGH_SVG.delete(this.host);
     }
+    movingChange(isMoving) {
+        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.ElementRef }, { 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.focused": "this.focused" } }, queries: [{ propertyName: "toolbarTemplateRef", first: true, predicate: ["plaitToolbar"], descendants: true }], viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, static: true }], ngImport: i0, template: `
-        <svg
-            #svg
-            width="100%"
-            height="100%"
-            style="position: relative"
-            [style.cursor]="isMoveMode ? (plaitBoardMove.isMoving ? 'grabbing' : 'grab') : 'auto'"
-        ></svg>
+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>
         <plait-toolbar
             *ngIf="isFocused && !toolbarTemplateRef"
             [cursorStatus]="board.cursor"
@@ -1356,13 +1397,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             args: [{
                     selector: 'plait-board',
                     template: `
-        <svg
-            #svg
-            width="100%"
-            height="100%"
-            style="position: relative"
-            [style.cursor]="isMoveMode ? (plaitBoardMove.isMoving ? 'grabbing' : 'grab') : 'auto'"
-        ></svg>
+        <svg #svg width="100%" height="100%" style="position: relative"></svg>
         <plait-toolbar
             *ngIf="isFocused && !toolbarTemplateRef"
             [cursorStatus]="board.cursor"
@@ -1409,6 +1444,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Output
             }], plaitBoardInitialized: [{
                 type: Output
+            }], readonly: [{
+                type: HostBinding,
+                args: ['class.readonly']
+            }], moving: [{
+                type: HostBinding,
+                args: ['class.moving']
             }], focused: [{
                 type: HostBinding,
                 args: ['class.focused']
@@ -1439,5 +1480,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, 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, 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 };
 //# sourceMappingURL=plait-core.mjs.map