@artstesh/maps 9.0.5 → 9.1.0-alpha.1

package/dist/fesm2022/maps-components.mjs

@@ -7,7 +7,7 @@ import { getCenter, createEmpty, extend } from 'ol/extent';
 import Polygon, { circular, fromExtent } from 'ol/geom/Polygon';
 import { Control, Zoom } from 'ol/control';
 import * as i0 from '@angular/core';
-import { Component, Injectable, Input, ChangeDetectionStrategy, input, ViewEncapsulation, ViewChild } from '@angular/core';
+import { Component, Injectable, Input, ChangeDetectionStrategy, input, signal, ViewEncapsulation, ViewChild } from '@angular/core';
 import { get, useGeographic, transform } from 'ol/proj';
 import { PostboyGenericMessage, PostboyCallbackMessage, PostboyExecutor, PostboyService, LockMessage, UnlockMessage, PostboyAbstractRegistrator } from '@artstesh/postboy';
 import * as Sphere from 'ol/sphere';
@@ -27,7 +27,7 @@ import Static from 'ol/source/ImageStatic';
 import ImageLayer from 'ol/layer/Image';
 import RasterSource from 'ol/source/Raster';
 import TileLayer$1 from 'ol/layer/WebGLTile';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet, NgIf } from '@angular/common';
 import Map from 'ol/Map';
 import View from 'ol/View';
 import Style from 'ol/style/Style';
@@ -3076,18 +3076,20 @@ class MapPlateComponent extends DestructibleComponent {
     mapFactory;
     registrator;
     detector;
+    ngZone;
     contentRef = input.required(...(ngDevMode ? [{ debugName: "contentRef" }] : []));
     renderTryCount = 0;
-    map;
-    osmUrl = '';
+    map = signal(null, ...(ngDevMode ? [{ debugName: "map" }] : []));
+    osmUrl = signal('', ...(ngDevMode ? [{ debugName: "osmUrl" }] : []));
     drawingLayerSettings = new FeatureLayerSettings().setName(MapConstants.DrawingLayerId);
-    constructor(elementRef, postboy, mapFactory, registrator, detector) {
+    constructor(elementRef, postboy, mapFactory, registrator, detector, ngZone) {
         super();
         this.elementRef = elementRef;
         this.postboy = postboy;
         this.mapFactory = mapFactory;
         this.registrator = registrator;
         this.detector = detector;
+        this.ngZone = ngZone;
         registrator.up();
     }
     _settings = new MapSettings();
@@ -3098,18 +3100,20 @@ class MapPlateComponent extends DestructibleComponent {
         this.setOsm();
     }
     initializeMap() {
-        useGeographic();
-        this.map = this.mapFactory.build(this._settings);
-        this.map.setTarget(this.elementRef.nativeElement);
-        this.detector.detectChanges();
-        this.map.once('postrender', () => {
-            this.map.updateSize();
-            this.postboy.fire(new MapRenderedEvent(this.map));
-        });
-        this.map.on('pointermove', (ev) => {
-            this.postboy.fire(new MapPointerMoveEvent(ev.pixel));
+        this.ngZone.runOutsideAngular(() => {
+            useGeographic();
+            this.map.set(this.mapFactory.build(this._settings));
+            this.map()?.setTarget(this.elementRef.nativeElement);
+            this.detector.detectChanges();
+            this.map()?.once('postrender', () => {
+                this.map()?.updateSize();
+                this.postboy.fire(new MapRenderedEvent(this.map()));
+            });
+            this.map()?.on('pointermove', (ev) => {
+                this.postboy.fire(new MapPointerMoveEvent(ev.pixel));
+            });
+            this.setOsm();
         });
-        this.setOsm();
     }
     ngAfterViewInit() {
         const mapContainer = this.elementRef.nativeElement;
@@ -3129,14 +3133,14 @@ class MapPlateComponent extends DestructibleComponent {
         this.registrator.down();
     };
     setOsm() {
-        if (!this.map)
+        if (!this.map())
             return;
-        this.osmUrl = `https://mt{0-3}.google.com/vt/lyrs=${MapLyrsLabel.get(this._settings.lyrs)}&hl=${this._settings.language}&x={x}&y={y}&z={z}`;
+        this.osmUrl.set(`https://mt{0-3}.google.com/vt/lyrs=${MapLyrsLabel.get(this._settings.lyrs)}&hl=${this._settings.language}&x={x}&y={y}&z={z}`);
         this.detector.detectChanges();
-        this.map.updateSize();
+        this.map()?.updateSize();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapPlateComponent, deps: [{ token: i0.ElementRef }, { token: MapPostboyService }, { token: MapPlateFactory }, { token: MessageRegistratorService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.18", type: MapPlateComponent, isStandalone: true, selector: "art-map-plate", inputs: { contentRef: { classPropertyName: "contentRef", publicName: "contentRef", isSignal: true, isRequired: true, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: false, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapPlateComponent, deps: [{ token: i0.ElementRef }, { token: MapPostboyService }, { token: MapPlateFactory }, { token: MessageRegistratorService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: MapPlateComponent, isStandalone: true, selector: "art-map-plate", inputs: { contentRef: { classPropertyName: "contentRef", publicName: "contentRef", isSignal: true, isRequired: true, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: false, isRequired: false, transformFunction: null } }, providers: [
             MessageRegistratorService,
             MapStateService,
             MapManagementService,
@@ -3147,7 +3151,7 @@ class MapPlateComponent extends DestructibleComponent {
             FeatureService,
             FeatureModificationService,
             ControlsService,
-        ], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"contentRef()\"> </ng-container>\r\n<art-osm-tile-layer *ngIf=\"osmUrl && map\" [map]=\"map\" [url]=\"osmUrl\" [opacity]=\"_settings.osmOpacity\"></art-osm-tile-layer>\r\n<art-feature-layer *ngIf=\"map\" [settings]=\"drawingLayerSettings\"></art-feature-layer>\r\n", styles: ["art-map-plate{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: OsmTileLayerComponent, selector: "art-osm-tile-layer", inputs: ["url", "opacity", "map"] }, { kind: "component", type: FeatureLayerComponent, selector: "art-feature-layer", inputs: ["settings"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], usesInheritance: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"contentRef()\"> </ng-container>\r\n@if (osmUrl() && map()) {\r\n  <art-osm-tile-layer [map]=\"map()!\" [url]=\"osmUrl()\" [opacity]=\"_settings.osmOpacity\"></art-osm-tile-layer>\r\n}\r\n@if (map()) {\r\n  <art-feature-layer [settings]=\"drawingLayerSettings\"></art-feature-layer>\r\n}\r\n", styles: ["art-map-plate{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: OsmTileLayerComponent, selector: "art-osm-tile-layer", inputs: ["url", "opacity", "map"] }, { kind: "component", type: FeatureLayerComponent, selector: "art-feature-layer", inputs: ["settings"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MapPlateComponent, decorators: [{
             type: Component,
@@ -3162,8 +3166,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         FeatureService,
                         FeatureModificationService,
                         ControlsService,
-                    ], encapsulation: ViewEncapsulation.None, imports: [OsmTileLayerComponent, FeatureLayerComponent, NgIf, NgTemplateOutlet], template: "<ng-container *ngTemplateOutlet=\"contentRef()\"> </ng-container>\r\n<art-osm-tile-layer *ngIf=\"osmUrl && map\" [map]=\"map\" [url]=\"osmUrl\" [opacity]=\"_settings.osmOpacity\"></art-osm-tile-layer>\r\n<art-feature-layer *ngIf=\"map\" [settings]=\"drawingLayerSettings\"></art-feature-layer>\r\n", styles: ["art-map-plate{display:block;width:100%;height:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: MapPostboyService }, { type: MapPlateFactory }, { type: MessageRegistratorService }, { type: i0.ChangeDetectorRef }], propDecorators: { contentRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentRef", required: true }] }], settings: [{
+                    ], encapsulation: ViewEncapsulation.None, imports: [OsmTileLayerComponent, FeatureLayerComponent, NgIf, NgTemplateOutlet], template: "<ng-container *ngTemplateOutlet=\"contentRef()\"> </ng-container>\r\n@if (osmUrl() && map()) {\r\n  <art-osm-tile-layer [map]=\"map()!\" [url]=\"osmUrl()\" [opacity]=\"_settings.osmOpacity\"></art-osm-tile-layer>\r\n}\r\n@if (map()) {\r\n  <art-feature-layer [settings]=\"drawingLayerSettings\"></art-feature-layer>\r\n}\r\n", styles: ["art-map-plate{display:block;width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: MapPostboyService }, { type: MapPlateFactory }, { type: MessageRegistratorService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { contentRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentRef", required: true }] }], settings: [{
                 type: Input
             }] } });