raain-app 1.2.2 → 1.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/raain-configuration/raain-configuration.component.mjs +44 -4
- package/esm2020/raain-map/raain-map.component.mjs +3 -3
- package/fesm2015/raain-app.mjs +45 -5
- package/fesm2015/raain-app.mjs.map +1 -1
- package/fesm2020/raain-app.mjs +45 -5
- package/fesm2020/raain-app.mjs.map +1 -1
- package/package.json +2 -2
- package/raain-configuration/raain-configuration.component.d.ts +2 -1
package/fesm2020/raain-app.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { EventEmitter, Component, Input, Output, ViewChild, HostListener, Injectable, Pipe, NgModule, Optional, SkipSelf } from '@angular/core';
|
|
3
|
-
import { ElementsFactory, MapLatLng, CompareElementInput, ConfigurationElementInput, DateRange, DateStatusElementInput, SpeedMatrixElementInput, TimeframeContainers, CartesianMapValue, PolarMapValue } from 'raain-ui';
|
|
3
|
+
import { ElementsFactory, MapLatLng, CompareElementInput, ConfigurationElementInput, Tools, ChartScaleColors, DateRange, DateStatusElementInput, SpeedMatrixElementInput, TimeframeContainers, CartesianMapValue, PolarMapValue } from 'raain-ui';
|
|
4
4
|
import * as i1 from '@angular/common';
|
|
5
5
|
import { CommonModule, NgOptimizedImage, NgStyle } from '@angular/common';
|
|
6
6
|
import * as i2 from '@angular/forms';
|
|
@@ -278,10 +278,10 @@ class RaainMapComponent {
|
|
|
278
278
|
}
|
|
279
279
|
}
|
|
280
280
|
RaainMapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RaainMapComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
281
|
-
RaainMapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RaainMapComponent, selector: "raain-map", inputs: { coordinates: "coordinates", markers: "markers", timeframeContainers: "timeframeContainers", autoplay: "autoplay", showMarkers: "showMarkers", currentHeight: "currentHeight", timeframeDates: "timeframeDates", defaultDate: "defaultDate", sumValues: "sumValues", sumFn: "sumFn" }, outputs: { selectedMarker: "selectedMarker", changedDate: "changedDate" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "mapDivRef", first: true, predicate: ["primaryMap"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-grid>\n\n <ion-row class=\"ion-align-items-end\">\n <ion-col id=\"map-buttons\" size-
|
|
281
|
+
RaainMapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RaainMapComponent, selector: "raain-map", inputs: { coordinates: "coordinates", markers: "markers", timeframeContainers: "timeframeContainers", autoplay: "autoplay", showMarkers: "showMarkers", currentHeight: "currentHeight", timeframeDates: "timeframeDates", defaultDate: "defaultDate", sumValues: "sumValues", sumFn: "sumFn" }, outputs: { selectedMarker: "selectedMarker", changedDate: "changedDate" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "mapDivRef", first: true, predicate: ["primaryMap"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-grid>\n\n <ion-row class=\"ion-align-items-end\">\n <ion-col id=\"map-buttons\" size-xs=\"2\">\n <ion-button (click)=\"previous()\" color=\"medium\" fill=\"outline\" shape=\"round\">\n <ion-icon name=\"play-back\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n <!--\n <ion-button (click)=\"play()\" [hidden]=\"autoplay\" color=\"medium\" fill=\"outline\"\n shape=\"round\">\n <ion-icon name=\"play\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n -->\n <ion-button (click)=\"stop()\" [hidden]=\"!autoplay\" color=\"medium\" fill=\"outline\"\n shape=\"round\">\n <ion-icon name=\"stop\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n\n <ion-button (click)=\"next()\" color=\"medium\" fill=\"outline\" shape=\"round\">\n <ion-icon name=\"play-forward\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n </ion-col>\n\n <!--\n <ion-col id=\"map-timeframe\" size-sm=\"4\">\n <ion-select (ionChange)=\"showTimeframe()\" [(ngModel)]=\"timeframeNameToShow\" [value]=\"timeframeNameToShow\"\n interface=\"popover\" placeholder=\"Name\">\n <ion-select-option *ngFor=\"let name of possibleNames\" [value]=\"name\">{{ name }}</ion-select-option>\n </ion-select>\n </ion-col> -->\n\n <ion-col class=\"ion-text-start\" id=\"map-date\" size-xs=\"5\">\n <ion-select (ionDismiss)=\"showTimeframe()\" [(ngModel)]=\"dateToShowAsString\" interface=\"popover\"\n placeholder=\"Period\" value=\"{{dateToShowAsString}}\">\n <ion-select-option *ngFor=\"let dateToSelect of possibleDates\" value=\"{{dateToSelect.toISOString()}}\">\n {{ dateToSelect | date:'yyyy-MM-dd HH:mm' }}\n </ion-select-option>\n </ion-select>\n </ion-col>\n <ion-col class=\"ion-hide-md-down\">\n <ion-toggle (ionChange)=\"changeShowMarkers()\" [(ngModel)]=\"showMarkers\" [checked]=\"showMarkers\"></ion-toggle>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col>\n <div id=\"map-container\">\n <div #primaryMap id=\"map-div\"></div>\n </div>\n </ion-col>\n <ion-col class=\"ion-hide-xl-down\">\n <ion-img id=\"map-range\" src=\"assets/r2r_range.svg\"/>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size-sm=\"8\">\n <span [innerHTML]=\"mcText\"></span>\n </ion-col>\n <ion-col size-sm=\"1\">\n <ion-button disabled=\"true\" fill=\"clear\">{{ sumResult }}</ion-button>\n </ion-col>\n <ion-col size-sm=\"3\">\n <ion-button disabled=\"true\" fill=\"clear\">{{ dateToShow?.toISOString() }}</ion-button>\n </ion-col>\n </ion-row>\n\n</ion-grid>\n", styles: ["#map-container{position:relative;width:800px;height:400px}#map-div{position:absolute;inset:0}#map-range{height:400px}#map-buttons{min-width:100px}ion-select{width:100%;max-width:-moz-fit-content;max-width:fit-content;font-size:16px;color:var(--ion-color-dark)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.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: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSelect, selector: "ion-select", inputs: ["cancelText", "compareWith", "disabled", "interface", "interfaceOptions", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "value"] }, { kind: "component", type: i2$1.IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: i2$1.IonToggle, selector: "ion-toggle", inputs: ["checked", "color", "disabled", "enableOnOffLabels", "mode", "name", "value"] }, { kind: "directive", type: i2$1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "directive", type: i2$1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
282
282
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RaainMapComponent, decorators: [{
|
|
283
283
|
type: Component,
|
|
284
|
-
args: [{ selector: 'raain-map', template: "<ion-grid>\n\n <ion-row class=\"ion-align-items-end\">\n <ion-col id=\"map-buttons\" size-
|
|
284
|
+
args: [{ selector: 'raain-map', template: "<ion-grid>\n\n <ion-row class=\"ion-align-items-end\">\n <ion-col id=\"map-buttons\" size-xs=\"2\">\n <ion-button (click)=\"previous()\" color=\"medium\" fill=\"outline\" shape=\"round\">\n <ion-icon name=\"play-back\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n <!--\n <ion-button (click)=\"play()\" [hidden]=\"autoplay\" color=\"medium\" fill=\"outline\"\n shape=\"round\">\n <ion-icon name=\"play\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n -->\n <ion-button (click)=\"stop()\" [hidden]=\"!autoplay\" color=\"medium\" fill=\"outline\"\n shape=\"round\">\n <ion-icon name=\"stop\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n\n <ion-button (click)=\"next()\" color=\"medium\" fill=\"outline\" shape=\"round\">\n <ion-icon name=\"play-forward\" slot=\"icon-only\"></ion-icon>\n </ion-button>\n </ion-col>\n\n <!--\n <ion-col id=\"map-timeframe\" size-sm=\"4\">\n <ion-select (ionChange)=\"showTimeframe()\" [(ngModel)]=\"timeframeNameToShow\" [value]=\"timeframeNameToShow\"\n interface=\"popover\" placeholder=\"Name\">\n <ion-select-option *ngFor=\"let name of possibleNames\" [value]=\"name\">{{ name }}</ion-select-option>\n </ion-select>\n </ion-col> -->\n\n <ion-col class=\"ion-text-start\" id=\"map-date\" size-xs=\"5\">\n <ion-select (ionDismiss)=\"showTimeframe()\" [(ngModel)]=\"dateToShowAsString\" interface=\"popover\"\n placeholder=\"Period\" value=\"{{dateToShowAsString}}\">\n <ion-select-option *ngFor=\"let dateToSelect of possibleDates\" value=\"{{dateToSelect.toISOString()}}\">\n {{ dateToSelect | date:'yyyy-MM-dd HH:mm' }}\n </ion-select-option>\n </ion-select>\n </ion-col>\n <ion-col class=\"ion-hide-md-down\">\n <ion-toggle (ionChange)=\"changeShowMarkers()\" [(ngModel)]=\"showMarkers\" [checked]=\"showMarkers\"></ion-toggle>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col>\n <div id=\"map-container\">\n <div #primaryMap id=\"map-div\"></div>\n </div>\n </ion-col>\n <ion-col class=\"ion-hide-xl-down\">\n <ion-img id=\"map-range\" src=\"assets/r2r_range.svg\"/>\n </ion-col>\n </ion-row>\n\n <ion-row>\n <ion-col size-sm=\"8\">\n <span [innerHTML]=\"mcText\"></span>\n </ion-col>\n <ion-col size-sm=\"1\">\n <ion-button disabled=\"true\" fill=\"clear\">{{ sumResult }}</ion-button>\n </ion-col>\n <ion-col size-sm=\"3\">\n <ion-button disabled=\"true\" fill=\"clear\">{{ dateToShow?.toISOString() }}</ion-button>\n </ion-col>\n </ion-row>\n\n</ion-grid>\n", styles: ["#map-container{position:relative;width:800px;height:400px}#map-div{position:absolute;inset:0}#map-range{height:400px}#map-buttons{min-width:100px}ion-select{width:100%;max-width:-moz-fit-content;max-width:fit-content;font-size:16px;color:var(--ion-color-dark)}\n"] }]
|
|
285
285
|
}], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { coordinates: [{
|
|
286
286
|
type: Input
|
|
287
287
|
}], markers: [{
|
|
@@ -431,6 +431,7 @@ class RaainConfigurationComponent {
|
|
|
431
431
|
this.changedPoints = new EventEmitter();
|
|
432
432
|
this.minPoint = { x: 0, y: 0 };
|
|
433
433
|
this.maxPoint = { x: 300, y: 100 };
|
|
434
|
+
this.logStyle = false;
|
|
434
435
|
this.onSizeChanged = () => {
|
|
435
436
|
};
|
|
436
437
|
this.onDrag = (e) => {
|
|
@@ -463,10 +464,47 @@ class RaainConfigurationComponent {
|
|
|
463
464
|
return;
|
|
464
465
|
}
|
|
465
466
|
this.created = true;
|
|
467
|
+
let inputs = new ConfigurationElementInput(this.points, this.minPoint, this.maxPoint, false, [], this.onDrag);
|
|
468
|
+
if (this.logStyle) {
|
|
469
|
+
inputs = new ConfigurationElementInput(this.points, this.minPoint, this.maxPoint, true, [
|
|
470
|
+
{
|
|
471
|
+
color: Tools.getTransparency(ChartScaleColors['0.4'], 0.8),
|
|
472
|
+
yStart: Math.log10(0.1),
|
|
473
|
+
yEnd: Math.log10(0.4)
|
|
474
|
+
},
|
|
475
|
+
{ color: Tools.getTransparency(ChartScaleColors['1'], 0.8), yStart: Math.log10(0.4), yEnd: Math.log10(1) },
|
|
476
|
+
{ color: Tools.getTransparency(ChartScaleColors['3'], 0.8), yStart: Math.log10(1), yEnd: Math.log10(3) },
|
|
477
|
+
{ color: Tools.getTransparency(ChartScaleColors['10'], 0.8), yStart: Math.log10(3), yEnd: Math.log10(10) },
|
|
478
|
+
{ color: Tools.getTransparency(ChartScaleColors['20'], 0.8), yStart: Math.log10(10), yEnd: Math.log10(20) },
|
|
479
|
+
{ color: Tools.getTransparency(ChartScaleColors['30'], 0.8), yStart: Math.log10(20), yEnd: Math.log10(30) },
|
|
480
|
+
{ color: Tools.getTransparency(ChartScaleColors['50'], 0.8), yStart: Math.log10(30), yEnd: Math.log10(50) },
|
|
481
|
+
{ color: Tools.getTransparency(ChartScaleColors['100'], 0.8), yStart: Math.log10(50), yEnd: Math.log10(100) },
|
|
482
|
+
{
|
|
483
|
+
color: Tools.getTransparency(ChartScaleColors['150'], 0.8),
|
|
484
|
+
yStart: Math.log10(100),
|
|
485
|
+
yEnd: Math.log10(150)
|
|
486
|
+
},
|
|
487
|
+
{
|
|
488
|
+
color: Tools.getTransparency(ChartScaleColors['200'], 0.8),
|
|
489
|
+
yStart: Math.log10(150),
|
|
490
|
+
yEnd: Math.log10(200)
|
|
491
|
+
},
|
|
492
|
+
{
|
|
493
|
+
color: Tools.getTransparency(ChartScaleColors['250'], 0.8),
|
|
494
|
+
yStart: Math.log10(200),
|
|
495
|
+
yEnd: Math.log10(250)
|
|
496
|
+
},
|
|
497
|
+
{
|
|
498
|
+
color: Tools.getTransparency(ChartScaleColors['300'], 0.8),
|
|
499
|
+
yStart: Math.log10(250),
|
|
500
|
+
yEnd: Math.log10(300)
|
|
501
|
+
},
|
|
502
|
+
], this.onDrag);
|
|
503
|
+
}
|
|
466
504
|
this.ngZone.runOutsideAngular(() => {
|
|
467
505
|
setTimeout(() => {
|
|
468
506
|
const factory = new ElementsFactory();
|
|
469
|
-
this.configurationElement = factory.createConfiguration(this.canvasElement.nativeElement,
|
|
507
|
+
this.configurationElement = factory.createConfiguration(this.canvasElement.nativeElement, inputs);
|
|
470
508
|
}, 10);
|
|
471
509
|
});
|
|
472
510
|
}
|
|
@@ -495,7 +533,7 @@ class RaainConfigurationComponent {
|
|
|
495
533
|
}
|
|
496
534
|
}
|
|
497
535
|
RaainConfigurationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RaainConfigurationComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
498
|
-
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" }, 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\">\n <div [style.height.px]=\"currentHeight\" [style.width.px]=\"currentWidth\" id=\"canvas-container\">\n <canvas #canvasElement></canvas>\n </div>\n <ion-button (click)=\"reset(2)\" size=\"small\">reset 2</ion-button>\n <ion-button (click)=\"reset(4)\" size=\"small\">reset 4</ion-button>\n <ion-button (click)=\"reset(6)\" size=\"small\">reset 6</ion-button>\n </ion-col>\n </ion-row>\n</ion-grid>\n", styles: ["#canvas-container{position:relative;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.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: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }] });
|
|
536
|
+
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\">\n <div [style.height.px]=\"currentHeight\" [style.width.px]=\"currentWidth\" id=\"canvas-container\">\n <canvas #canvasElement></canvas>\n </div>\n <ion-button (click)=\"reset(2)\" size=\"small\">reset 2</ion-button>\n <ion-button (click)=\"reset(4)\" size=\"small\">reset 4</ion-button>\n <ion-button (click)=\"reset(6)\" size=\"small\">reset 6</ion-button>\n </ion-col>\n </ion-row>\n</ion-grid>\n", styles: ["#canvas-container{position:relative;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.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: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }] });
|
|
499
537
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RaainConfigurationComponent, decorators: [{
|
|
500
538
|
type: Component,
|
|
501
539
|
args: [{ selector: 'raain-configuration', template: "<ion-grid>\n <ion-row>\n <ion-col id=\"col-container\">\n <div [style.height.px]=\"currentHeight\" [style.width.px]=\"currentWidth\" id=\"canvas-container\">\n <canvas #canvasElement></canvas>\n </div>\n <ion-button (click)=\"reset(2)\" size=\"small\">reset 2</ion-button>\n <ion-button (click)=\"reset(4)\" size=\"small\">reset 4</ion-button>\n <ion-button (click)=\"reset(6)\" size=\"small\">reset 6</ion-button>\n </ion-col>\n </ion-row>\n</ion-grid>\n", styles: ["#canvas-container{position:relative;width:100%;height:100%}\n"] }]
|
|
@@ -511,6 +549,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
511
549
|
type: Input
|
|
512
550
|
}], maxPoint: [{
|
|
513
551
|
type: Input
|
|
552
|
+
}], logStyle: [{
|
|
553
|
+
type: Input
|
|
514
554
|
}], canvasElement: [{
|
|
515
555
|
type: ViewChild,
|
|
516
556
|
args: ['canvasElement']
|