@plait/core 0.0.40 → 0.0.42

package/fesm2015/plait-core.mjs

@@ -250,6 +250,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) => {
     var _a, _b;
@@ -730,7 +731,7 @@ function isNoSelectionElement(e) {
  * @param viewZoom 视图上显示的 zoom 缩放级别 %
  * @returns zoom 真实的 zoom
  */
-const transformViewZoom = (viewZoom) => (2 * viewZoom - 100) / viewZoom;
+const transformViewZoom = (viewZoom) => 2 - 100 / viewZoom;
 /**
  * zoom 转 viewZoom
  * @param zoom this.board.viewport.zoom
@@ -805,7 +806,7 @@ const PlaitHistoryBoard = {
     }
 };
 
-function withHistroy(board) {
+function withHistory(board) {
     const { apply, keydown } = board;
     board.history = { undos: [], redos: [] };
     board.redo = () => {
@@ -889,6 +890,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.markForCheck();
+        }
+        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 === 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;
+        }
+        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') {
+            if (board.cursor !== BaseCursorStatus.move) {
+                updateCursorStatus(board, BaseCursorStatus.move);
+                const boardComponent = PLAIT_BOARD_TO_COMPONENT.get(board);
+                boardComponent.cdr.markForCheck();
+            }
+            event.preventDefault();
+        }
+        keydown(event);
+    };
+    board.keyup = (event) => {
+        if (board.selection && !board.readonly && event.code === 'Space') {
+            updateCursorStatus(board, BaseCursorStatus.select);
+            const boardComponent = PLAIT_BOARD_TO_COMPONENT.get(board);
+            boardComponent.cdr.markForCheck();
+        }
+        keyup(event);
+    };
+    return board;
+}
+
 function withSelection(board) {
     const { mousedown, mousemove, globalMouseup } = board;
     let start = null;
@@ -1055,18 +1119,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }] } });
 
 class PlaitBoardComponent {
-    constructor(cdr, elementRef, renderer2) {
+    constructor(cdr, renderer2) {
         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;
@@ -1100,6 +1159,9 @@ class PlaitBoardComponent {
     get readonly() {
         return this.plaitReadonly;
     }
+    get moving() {
+        return this.board.cursor === BaseCursorStatus.move && this.isMoving;
+    }
     get focused() {
         return this.isFocused;
     }
@@ -1109,6 +1171,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 = {
@@ -1137,7 +1200,7 @@ class PlaitBoardComponent {
     }
     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);
         });
@@ -1151,20 +1214,16 @@ class PlaitBoardComponent {
             .pipe(takeUntil(this.destroy$))
             .subscribe((event) => {
             this.board.mousedown(event);
-            this.setCursorStatus();
-            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$))
@@ -1187,10 +1246,6 @@ class PlaitBoardComponent {
             .subscribe((event) => {
             var _a;
             (_a = this.board) === null || _a === void 0 ? void 0 : _a.keydown(event);
-            if (this.isFocused && event.code === 'Space') {
-                this.changeMoveMode(BaseCursorStatus.move);
-                event.preventDefault();
-            }
         });
         fromEvent(document, 'keyup')
             .pipe(takeUntil(this.destroy$), filter(() => {
@@ -1199,7 +1254,6 @@ class PlaitBoardComponent {
             .subscribe((event) => {
             var _a;
             (_a = this.board) === null || _a === void 0 ? void 0 : _a.keyup(event);
-            this.isFocused && !this.plaitReadonly && event.code === 'Space' && this.changeMoveMode(BaseCursorStatus.select);
         });
         fromEvent(document, 'copy')
             .pipe(takeUntil(this.destroy$), filter(() => {
@@ -1242,32 +1296,6 @@ class PlaitBoardComponent {
         const viewBox = getViewBox(this.board);
         this.renderer2.setAttribute(this.host, 'viewBox', `${viewBox.minX}, ${viewBox.minY}, ${viewBox.width}, ${viewBox.height}`);
     }
-    setCursorStatus() {
-        if (this.plaitReadonly) {
-            this.changeMoveMode(BaseCursorStatus.move);
-        }
-        else if (!this.isFocused) {
-            this.changeMoveMode(BaseCursorStatus.select);
-        }
-    }
-    initMove(e) {
-        this.plaitBoardMove.isMoving = true;
-        this.plaitBoardMove.x = e.x;
-        this.plaitBoardMove.y = e.y;
-        this.cdr.detectChanges();
-    }
-    moving(e) {
-        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: 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);
@@ -1310,16 +1338,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.readonly": "this.readonly", "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"
-            [style.cursor]="isMoveMode ? (plaitBoardMove.isMoving ? 'grabbing' : 'grab') : 'auto'"
-        ></svg>
+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>
         <plait-toolbar
             *ngIf="isFocused && !toolbarTemplateRef"
             [cursorStatus]="board.cursor"
@@ -1346,13 +1371,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"
@@ -1376,7 +1395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }], svg: [{
@@ -1402,6 +1421,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], readonly: [{
                 type: HostBinding,
                 args: ['class.readonly']
+            }], moving: [{
+                type: HostBinding,
+                args: ['class.moving']
             }], focused: [{
                 type: HostBinding,
                 args: ['class.focused']
@@ -1432,5 +1454,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