@plait/core 0.0.4 → 0.0.7

package/fesm2020/plait-core.mjs

@@ -383,7 +383,7 @@ var BaseCursorStatus;
     BaseCursorStatus["select"] = "select";
 })(BaseCursorStatus || (BaseCursorStatus = {}));
 
-function createBoard(host, children) {
+function createBoard(host, children, options) {
     const board = {
         host,
         viewport: {
@@ -394,8 +394,9 @@ function createBoard(host, children) {
         },
         children,
         operations: [],
-        selection: { anchor: [0, -1], focus: [-1, -1] },
+        selection: null,
         cursor: BaseCursorStatus.select,
+        readonly: options.readonly,
         apply: (operation) => {
             board.operations.push(operation);
             Transforms.transform(board, operation);
@@ -467,16 +468,44 @@ function toRectangleClient(points) {
     return rect;
 }
 
+function transformPoints(board, points) {
+    const newPoints = points.map(point => {
+        return transformPoint(board, point);
+    });
+    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];
+    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 };
+}
+function isNoSelectionElement(e) {
+    return e.target instanceof HTMLElement && e.target?.closest('.plait-board-attached');
+}
+
 function withSelection(board) {
     const { mousedown, mousemove, mouseup } = board;
     let start = null;
     let end = null;
     board.mousedown = (event) => {
         // avoid select text when double click svg
-        if (!(event.target instanceof HTMLElement && event.target.closest('.richtext'))) {
+        if (!(event.target instanceof HTMLElement && event.target.closest('.richtext')) || isNoSelectionElement(event)) {
             event.preventDefault();
         }
-        if (board.cursor === BaseCursorStatus.select) {
+        if (!isNoSelectionElement(event) && board.cursor === BaseCursorStatus.select) {
             start = toPoint(event.x, event.y, board.host);
         }
         mousedown(event);
@@ -492,9 +521,15 @@ function withSelection(board) {
         mousemove(event);
     };
     board.mouseup = (event) => {
+        if (isNoSelectionElement(event)) {
+            return mouseup(event);
+        }
         if (start) {
             Transforms.setSelection(board, { anchor: start, focus: start });
         }
+        else {
+            Transforms.setSelection(board, null);
+        }
         start = null;
         end = null;
         mouseup(event);
@@ -509,31 +544,6 @@ const PlaitOperation = {
     isSetViewportOperation
 };
 
-function transformPoints(board, points) {
-    const newPoints = points.map(point => {
-        return transformPoint(board, point);
-    });
-    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];
-    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 };
-}
-
 class PlaitElementComponent {
     constructor(renderer2, viewContainerRef) {
         this.renderer2 = renderer2;
@@ -610,6 +620,7 @@ class PlaitBoardComponent {
         this.destroy$ = new Subject();
         this.plaitValue = [];
         this.plaitPlugins = [];
+        this.plaitReadonly = false;
         this.plaitChange = new EventEmitter();
         this.plaitBoardInitialized = new EventEmitter();
         this.trackBy = (index, element) => {
@@ -619,6 +630,9 @@ class PlaitBoardComponent {
     get host() {
         return this.svg.nativeElement;
     }
+    get isFocused() {
+        return this.board?.selection;
+    }
     ngOnInit() {
         const roughSVG = rough.svg(this.host, { options: { roughness: 0, strokeWidth: 1 } });
         HOST_TO_ROUGH_SVG.set(this.host, roughSVG);
@@ -644,7 +658,8 @@ class PlaitBoardComponent {
         this.plaitBoardInitialized.emit(this.board);
     }
     initializePlugins() {
-        let board = withSelection(withBoard(createBoard(this.host, this.plaitValue)));
+        const options = { readonly: this.plaitReadonly };
+        let board = withSelection(withBoard(createBoard(this.host, this.plaitValue, options)));
         this.plaitPlugins.forEach(plugin => {
             board = plugin(board);
         });
@@ -657,7 +672,9 @@ class PlaitBoardComponent {
         fromEvent(this.host, 'mousedown')
             .pipe(takeUntil(this.destroy$))
             .subscribe((event) => {
-            this.board.mousedown(event);
+            if (!isNoSelectionElement(event)) {
+                this.board.mousedown(event);
+            }
         });
         fromEvent(this.host, 'mousemove')
             .pipe(takeUntil(this.destroy$))
@@ -667,7 +684,9 @@ class PlaitBoardComponent {
         fromEvent(document, 'mouseup')
             .pipe(takeUntil(this.destroy$))
             .subscribe((event) => {
-            this.board.mouseup(event);
+            if (!isNoSelectionElement(event)) {
+                this.board.mouseup(event);
+            }
         });
         fromEvent(this.host, 'dblclick')
             .pipe(takeUntil(this.destroy$))
@@ -677,23 +696,27 @@ class PlaitBoardComponent {
         fromEvent(this.host, 'wheel')
             .pipe(takeUntil(this.destroy$))
             .subscribe((event) => {
-            event.preventDefault();
-            const viewport = this.board.viewport;
-            Transforms.setViewport(this.board, {
-                ...viewport,
-                offsetX: viewport?.offsetX - event.deltaX,
-                offsetY: viewport?.offsetY - event.deltaY
-            });
+            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);
+            return !IS_TEXT_EDITABLE.get(this.board) && !!this.board.selection;
         }))
             .subscribe((event) => {
             this.board?.keydown(event);
         });
         fromEvent(document, 'keyup')
-            .pipe(takeUntil(this.destroy$))
+            .pipe(takeUntil(this.destroy$), filter(() => {
+            return !IS_TEXT_EDITABLE.get(this.board) && !!this.board.selection;
+        }))
             .subscribe((event) => {
             this.board?.keyup(event);
         });
@@ -738,9 +761,9 @@ 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 }], 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" }, outputs: { plaitChange: "plaitChange", plaitBoardInitialized: "plaitBoardInitialized" }, host: { properties: { "class": "this.hostClass" } }, viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, static: true }], ngImport: i0, template: `
-        <svg #svg width="100%" height="100%"></svg>
-        <div class="plait-toolbar island zoom-toolbar">
+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" }, outputs: { plaitChange: "plaitChange", plaitBoardInitialized: "plaitBoardInitialized" }, host: { properties: { "class": "this.hostClass" } }, viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, static: true }], ngImport: i0, template: `
+        <svg #svg width="100%" height="100%" style="position: relative"></svg>
+        <div *ngIf="isFocused" class="plait-toolbar island zoom-toolbar plait-board-attached">
             <button class="item" (mousedown)="zoomOut($event)">-</button>
             <button class="item zoom-value" (mousedown)="resetZoom($event)">{{ zoom }}%</button>
             <button class="item" (mousedown)="zoomIn($event)">+</button>
@@ -755,14 +778,14 @@ PlaitBoardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [host]="host"
         ></plait-element>
         <ng-content></ng-content>
-    `, isInline: true, components: [{ type: PlaitElementComponent, selector: "plait-element", inputs: ["index", "element", "board", "viewport", "selection", "host"] }], directives: [{ type: i2.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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], 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%"></svg>
-        <div class="plait-toolbar island zoom-toolbar">
+        <svg #svg width="100%" height="100%" style="position: relative"></svg>
+        <div *ngIf="isFocused" class="plait-toolbar island zoom-toolbar plait-board-attached">
             <button class="item" (mousedown)="zoomOut($event)">-</button>
             <button class="item zoom-value" (mousedown)="resetZoom($event)">{{ zoom }}%</button>
             <button class="item" (mousedown)="zoomIn($event)">+</button>
@@ -792,6 +815,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], plaitPlugins: [{
                 type: Input
+            }], plaitReadonly: [{
+                type: Input
             }], plaitChange: [{
                 type: Output
             }], plaitBoardInitialized: [{
@@ -980,5 +1005,5 @@ function rotate(x1, y1, x2, y2, angle) {
  * Generated bundle index. Do not edit.
  */
 
-export { BOARD_TO_ON_CHANGE, BaseCursorStatus, FLUSHING, HOST_TO_ROUGH_SVG, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_SAFARI, IS_TEXT_EDITABLE, NS, Path, PlaitBoardComponent, PlaitElementComponent, PlaitModule, PlaitNode, PlaitOperation, Transforms, Viewport, createG, createSVG, createText, distanceBetweenPointAndSegment, getViewBox, hotkeys, idCreator, isNullOrUndefined, isSetViewportOperation, rotate, toPoint, toRectangleClient, transformPoint, transformPoints };
+export { BOARD_TO_ON_CHANGE, BaseCursorStatus, FLUSHING, HOST_TO_ROUGH_SVG, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_SAFARI, IS_TEXT_EDITABLE, NS, Path, PlaitBoardComponent, PlaitElementComponent, PlaitModule, PlaitNode, PlaitOperation, Transforms, Viewport, createG, createSVG, createText, distanceBetweenPointAndSegment, getViewBox, hotkeys, idCreator, isNoSelectionElement, isNullOrUndefined, isSetViewportOperation, rotate, toPoint, toRectangleClient, transformPoint, transformPoints };
 //# sourceMappingURL=plait-core.mjs.map