@plait/core 0.0.4 → 0.0.7

package/fesm2015/plait-core.mjs

@@ -379,7 +379,7 @@ var BaseCursorStatus;
     BaseCursorStatus["select"] = "select";
 })(BaseCursorStatus || (BaseCursorStatus = {}));
 
-function createBoard(host, children) {
+function createBoard(host, children, options) {
     const board = {
         host,
         viewport: {
@@ -390,8 +390,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);
@@ -463,16 +464,45 @@ 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) {
+    var _a;
+    return e.target instanceof HTMLElement && ((_a = e.target) === null || _a === void 0 ? void 0 : _a.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);
@@ -488,9 +518,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);
@@ -505,31 +541,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;
@@ -606,6 +617,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) => {
@@ -615,6 +627,10 @@ class PlaitBoardComponent {
     get host() {
         return this.svg.nativeElement;
     }
+    get isFocused() {
+        var _a;
+        return (_a = this.board) === null || _a === void 0 ? void 0 : _a.selection;
+    }
     ngOnInit() {
         const roughSVG = rough.svg(this.host, { options: { roughness: 0, strokeWidth: 1 } });
         HOST_TO_ROUGH_SVG.set(this.host, roughSVG);
@@ -640,7 +656,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);
         });
@@ -653,7 +670,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$))
@@ -663,7 +682,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$))
@@ -673,20 +694,24 @@ class PlaitBoardComponent {
         fromEvent(this.host, 'wheel')
             .pipe(takeUntil(this.destroy$))
             .subscribe((event) => {
-            event.preventDefault();
-            const viewport = this.board.viewport;
-            Transforms.setViewport(this.board, Object.assign(Object.assign({}, viewport), { offsetX: (viewport === null || viewport === void 0 ? void 0 : viewport.offsetX) - event.deltaX, offsetY: (viewport === null || viewport === void 0 ? void 0 : viewport.offsetY) - event.deltaY }));
+            if (this.isFocused) {
+                event.preventDefault();
+                const viewport = this.board.viewport;
+                Transforms.setViewport(this.board, Object.assign(Object.assign({}, viewport), { offsetX: (viewport === null || viewport === void 0 ? void 0 : viewport.offsetX) - event.deltaX, offsetY: (viewport === null || viewport === void 0 ? void 0 : 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) => {
             var _a;
             (_a = this.board) === null || _a === void 0 ? void 0 : _a.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) => {
             var _a;
             (_a = this.board) === null || _a === void 0 ? void 0 : _a.keyup(event);
@@ -727,9 +752,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>
@@ -744,14 +769,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>
@@ -781,6 +806,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], plaitPlugins: [{
                 type: Input
+            }], plaitReadonly: [{
+                type: Input
             }], plaitChange: [{
                 type: Output
             }], plaitBoardInitialized: [{
@@ -965,5 +992,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