@plait/core 0.0.39 → 0.0.40

package/fesm2020/plait-core.mjs

@@ -1082,6 +1082,7 @@ class PlaitBoardComponent {
         this.cdr = cdr;
         this.elementRef = elementRef;
         this.renderer2 = renderer2;
+        this.hasInitialized = false;
         this.destroy$ = new Subject();
         this._viewZoom = 100;
         this.plaitBoardMove = {
@@ -1116,11 +1117,11 @@ 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 focused() {
         return this.isFocused;
     }
@@ -1144,6 +1145,14 @@ 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);
@@ -1164,6 +1173,7 @@ 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')
@@ -1213,7 +1223,7 @@ class PlaitBoardComponent {
         }))
             .subscribe((event) => {
             this.board?.keyup(event);
-            this.isFocused && event.code === 'Space' && this.changeMoveMode(BaseCursorStatus.select);
+            this.isFocused && !this.plaitReadonly && event.code === 'Space' && this.changeMoveMode(BaseCursorStatus.select);
         });
         fromEvent(document, 'copy')
             .pipe(takeUntil(this.destroy$), filter(() => {
@@ -1252,6 +1262,14 @@ 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;
@@ -1322,7 +1340,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.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: `
+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%"
@@ -1409,6 +1427,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Output
             }], plaitBoardInitialized: [{
                 type: Output
+            }], readonly: [{
+                type: HostBinding,
+                args: ['class.readonly']
             }], focused: [{
                 type: HostBinding,
                 args: ['class.focused']