raain-app 3.2.2 → 3.2.5

package/fesm2020/raain-app.mjs

@@ -242,6 +242,9 @@ class RaainMapComponent {
             }
             possibleNewDefaultDate = this.defaultDate;
         }
+        if (changes.coordinates && this.mapElement?.mapLeaflet && this.coordinates) {
+            this.mapElement.mapLeaflet.setView([this.coordinates.lat, this.coordinates.lng], 10);
+        }
         if (changes.markers && this.mapElement?.markersLayer) {
             const { allMarkers } = this.buildMarkersConfig();
             const markersProduced = this.mapElement.updateMarkers(allMarkers);
@@ -787,8 +790,13 @@ class RaainConfigurationComponent {
         this.minPoint = { x: 0, y: 0 };
         this.maxPoint = { x: 300, y: 100 };
         this.logStyle = false;
+        this.readonly = false;
+        this.createTimer = null;
         this.onSizeChanged = () => { };
         this.onDrag = (e) => {
+            if (this.readonly) {
+                return false;
+            }
             this.changedPoints.emit(this.points);
         };
     }
@@ -818,7 +826,7 @@ class RaainConfigurationComponent {
             return;
         }
         this.created = true;
-        let inputs = new ConfigurationElementInput(this.points, this.minPoint, this.maxPoint, false, [], this.onDrag);
+        let inputs = new ConfigurationElementInput(this.points, this.minPoint, this.maxPoint, false, [], this.onDrag, this.readonly);
         if (this.logStyle) {
             const confTransparency = 0.3;
             inputs = new ConfigurationElementInput(this.points, this.minPoint, this.maxPoint, true, [
@@ -887,21 +895,36 @@ class RaainConfigurationComponent {
                     yStart: Math.log10(300),
                     yEnd: Math.log10(500),
                 },
-            ], this.onDrag);
+            ], this.onDrag, this.readonly);
         }
         this.ngZone.runOutsideAngular(() => {
-            setTimeout(() => {
+            this.createTimer = setTimeout(() => {
+                this.createTimer = null;
                 const factory = new ElementsFactory();
                 this.configurationElement = factory.createConfiguration(this.canvasElement.nativeElement, inputs);
             }, 10);
         });
     }
     async delete() {
+        if (this.createTimer) {
+            clearTimeout(this.createTimer);
+            this.createTimer = null;
+        }
         this.configurationElement?.chart?.destroy();
         this.created = false;
     }
     async change(changes) {
-        // console.log('changed', changes);
+        // Fast path: update chart data in-place when only points changed
+        if (this.configurationElement?.chart &&
+            changes.points &&
+            Object.keys(changes).length === 1) {
+            const chart = this.configurationElement.chart;
+            chart.data.datasets.forEach((ds) => {
+                ds.data = this.points;
+            });
+            chart.update('none');
+            return;
+        }
         await this.delete();
         this.create();
     }
@@ -925,7 +948,7 @@ class RaainConfigurationComponent {
     }
 }
 RaainConfigurationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RaainConfigurationComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-RaainConfigurationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RaainConfigurationComponent, selector: "raain-configuration", inputs: { points: "points", currentHeight: "currentHeight", currentWidth: "currentWidth", minPoint: "minPoint", maxPoint: "maxPoint", logStyle: "logStyle" }, outputs: { changedPoints: "changedPoints" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["canvasElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-grid>\n  <ion-row>\n    <ion-col id=\"col-container\" size-xs=\"10\">\n      <div [style.height.px]=\"currentHeight\" id=\"canvas-container\">\n        <canvas #canvasElement></canvas>\n      </div>\n    </ion-col>\n    <ion-col size-xs=\"2\">\n      <ion-button (click)=\"reset(2)\" color=\"light\" shape=\"round\" size=\"small\">2</ion-button>\n      <br>\n      <ion-button (click)=\"reset(4)\" color=\"light\" shape=\"round\" size=\"small\">4</ion-button>\n      <br>\n      <ion-button (click)=\"reset(6)\" color=\"light\" shape=\"round\" size=\"small\">6</ion-button>\n      <br>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n", styles: ["#canvas-container{position:relative;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: i4.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i4.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i4.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i4.IonRow, selector: "ion-row" }] });
+RaainConfigurationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RaainConfigurationComponent, selector: "raain-configuration", inputs: { points: "points", currentHeight: "currentHeight", currentWidth: "currentWidth", minPoint: "minPoint", maxPoint: "maxPoint", logStyle: "logStyle", readonly: "readonly" }, outputs: { changedPoints: "changedPoints" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["canvasElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-grid>\n  <ion-row>\n    <ion-col id=\"col-container\" size-xs=\"10\">\n      <div [style.height.px]=\"currentHeight\" id=\"canvas-container\">\n        <canvas #canvasElement></canvas>\n      </div>\n    </ion-col>\n    <ion-col size-xs=\"2\">\n      <ion-button (click)=\"reset(2)\" color=\"light\" shape=\"round\" size=\"small\">2</ion-button>\n      <br>\n      <ion-button (click)=\"reset(4)\" color=\"light\" shape=\"round\" size=\"small\">4</ion-button>\n      <br>\n      <ion-button (click)=\"reset(6)\" color=\"light\" shape=\"round\" size=\"small\">6</ion-button>\n      <br>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n", styles: ["#canvas-container{position:relative;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: i4.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i4.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i4.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i4.IonRow, selector: "ion-row" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RaainConfigurationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'raain-configuration', template: "<ion-grid>\n  <ion-row>\n    <ion-col id=\"col-container\" size-xs=\"10\">\n      <div [style.height.px]=\"currentHeight\" id=\"canvas-container\">\n        <canvas #canvasElement></canvas>\n      </div>\n    </ion-col>\n    <ion-col size-xs=\"2\">\n      <ion-button (click)=\"reset(2)\" color=\"light\" shape=\"round\" size=\"small\">2</ion-button>\n      <br>\n      <ion-button (click)=\"reset(4)\" color=\"light\" shape=\"round\" size=\"small\">4</ion-button>\n      <br>\n      <ion-button (click)=\"reset(6)\" color=\"light\" shape=\"round\" size=\"small\">6</ion-button>\n      <br>\n    </ion-col>\n  </ion-row>\n</ion-grid>\n", styles: ["#canvas-container{position:relative;width:100%;height:100%}\n"] }]
@@ -943,6 +966,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], logStyle: [{
                 type: Input
+            }], readonly: [{
+                type: Input
             }], canvasElement: [{
                 type: ViewChild,
                 args: ['canvasElement']