@smartbit4all/ng-client 4.2.36 → 4.2.37

package/fesm2022/smartbit4all-ng-client.mjs

@@ -15473,6 +15473,9 @@ class GoogleMap extends AbstractMap {
     getMap() {
         return this.map;
     }
+    toBase64() {
+        throw new Error('Method not implemented.');
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: GoogleMap, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: GoogleMap, selector: "google-map", inputs: { style: "style", styleClass: "styleClass" }, outputs: { onOverlayDblClick: "onOverlayDblClick", onOverlayDragStart: "onOverlayDragStart", onOverlayDrag: "onOverlayDrag", onOverlayDragEnd: "onOverlayDragEnd", onMapReady: "onMapReady" }, host: { classAttribute: "p-element" }, usesInheritance: true, ngImport: i0, template: ` <div [ngStyle]="style" [class]="styleClass"></div>`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -15549,7 +15552,7 @@ class LeafletMap extends AbstractMap {
     }
     initialize() {
         const options = this.createLeafletMapOptions();
-        this.map = L.map('leaflet').setView(options.centre, options.zoom);
+        this.map = L.map('leaflet', { preferCanvas: true }).setView(options.centre, options.zoom);
         L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
             maxZoom: 19,
             attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
@@ -15683,11 +15686,7 @@ class LeafletMap extends AbstractMap {
                 });
                 let group = markerGroups.get(it.record.getLatLng().lat.toFixed(6) + ',' + it.record.getLatLng().lng.toFixed(6));
                 if (group && group.length > 1) {
-                    const icon = L.divIcon({
-                        className: 'custom-cluster-icon',
-                        html: `<div class="marker-count">${group.length}</div>`,
-                        iconSize: [30, 30],
-                    });
+                    const icon = this.createNumberedIcon(group.length);
                     const clusterMarker = L.marker(group[0].originalLatLng, { icon }).addTo(this.map);
                     it.record.on('mouseover', (_event) => {
                         toAdd.forEach((item, index) => {
@@ -15806,6 +15805,46 @@ class LeafletMap extends AbstractMap {
         });
         return { a: southwest, b: northeast };
     }
+    toBase64() {
+        return new Promise((resolve, reject) => {
+            leafletImage(this.map, (err, canvas) => {
+                if (err) {
+                    console.error('Leaflet image capture error', err);
+                    reject(err);
+                }
+                resolve(canvas.toDataURL('image/png'));
+            });
+        });
+    }
+    createNumberedIcon(number) {
+        const size = 35;
+        const scaleFactor = 15;
+        const scaledSize = size * scaleFactor;
+        const canvas = document.createElement('canvas');
+        canvas.width = scaledSize;
+        canvas.height = scaledSize;
+        canvas.style.width = canvas.style.height = '35px';
+        const ctx = canvas.getContext('2d');
+        ctx.scale(scaleFactor, scaleFactor);
+        ctx.beginPath();
+        ctx.arc(size / 2, size / 2, size / 2 - 2, 0, 2 * Math.PI, false);
+        ctx.fillStyle = '#0078d4';
+        ctx.fill();
+        ctx.lineWidth = 2;
+        ctx.strokeStyle = '#ffffff';
+        ctx.stroke();
+        ctx.fillStyle = '#ffffff';
+        ctx.font = 'bold 16px sans-serif';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(number.toString(), size / 2, size / 2);
+        return L.icon({
+            iconUrl: canvas.toDataURL(),
+            iconSize: [size, size],
+            iconAnchor: [size / 2, size / 2],
+            popupAnchor: [0, -size / 2],
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: LeafletMap, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: LeafletMap, selector: "leaflet-map", usesInheritance: true, ngImport: i0, template: ` <div id="leaflet"></div>`, isInline: true, styles: ["#leaflet{height:720px}::ng-deep .marker-count{background-color:#0078d4;color:#fff;font-weight:700;border-radius:50%;width:30px;height:30px;line-height:30px;text-align:center;border:2px solid white;box-shadow:0 0 4px #0006}::ng-deep .custom-cluster-icon{pointer-events:auto!important}\n"] }); }
 }
@@ -15841,9 +15880,7 @@ class SmartMapComponent {
             .map((it) => it.id)
             .values()));
     }
-    ngOnInit() {
-        // this.load();
-    }
+    ngOnInit() { }
     ngAfterViewInit() {
         this.load();
     }
@@ -16008,12 +16045,15 @@ class SmartMapComponent {
         }
         this.update(viewState);
     }
+    toBase64() {
+        return this.mapComponent.toBase64();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartMapComponent, deps: [{ token: MAP_ENGINE }, { token: GeoMapService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartMapComponent, selector: "smart-map", inputs: { uuid: "uuid", identifier: "identifier", parent: "parent" }, ngImport: i0, template: "@if (model()) { @if (mapEngine === MapEngine.GOOGLE) {\r\n<google-map\r\n  [model]=\"model()!\"\r\n  [items]=\"items()\"\r\n  [style]=\"{ width: '100%', height: '320px' }\"\r\n  (onMapDragEnd)=\"move($event.viewport)\"\r\n  (onZoomChanged)=\"move($event.viewport)\"\r\n  (onMapClick)=\"handleMapClick($event.coordinates)\"\r\n  (onOverlayClick)=\"handleItemClick($event.itemId)\"\r\n  (onEditingOverlayClick)=\"handleEditingItemClick($event.itemId, $event)\"\r\n>\r\n</google-map>\r\n} @else if (mapEngine === MapEngine.LEAFLET) {\r\n<leaflet-map\r\n  [model]=\"model()!\"\r\n  [items]=\"items()\"\r\n  [editingSession]=\"editingSession()\"\r\n  (onMapDragEnd)=\"move($event.viewport)\"\r\n  (onZoomChanged)=\"move($event.viewport)\"\r\n  (onMapClick)=\"handleMapClick($event.coordinates)\"\r\n  (onOverlayClick)=\"handleItemClick($event.itemId)\"\r\n  (onEditingOverlayClick)=\"handleEditingItemClick($event.itemId, $event)\"\r\n  (onEditingOverlayDrag)=\"handleEditingItemDrag($event.itemId, $event)\"\r\n>\r\n</leaflet-map>\r\n} @else {\r\n<p>\r\n  <strong>Not recognised map engine: [ {{ mapEngine }} ]</strong>\r\n</p>\r\n<p>Please provide a valid choice of map engine!</p>\r\n} }\r\n", styles: [""], dependencies: [{ kind: "component", type: GoogleMap, selector: "google-map", inputs: ["style", "styleClass"], outputs: ["onOverlayDblClick", "onOverlayDragStart", "onOverlayDrag", "onOverlayDragEnd", "onMapReady"] }, { kind: "component", type: LeafletMap, selector: "leaflet-map" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: SmartMapComponent, selector: "smart-map", inputs: { uuid: "uuid", identifier: "identifier", parent: "parent" }, viewQueries: [{ propertyName: "mapComponent", first: true, predicate: ["mapComponent"], descendants: true }], ngImport: i0, template: "@if (model()) { @if (mapEngine === MapEngine.GOOGLE) {\r\n<google-map\r\n  #mapComponent\r\n  [model]=\"model()!\"\r\n  [items]=\"items()\"\r\n  [style]=\"{ width: '100%', height: '320px' }\"\r\n  (onMapDragEnd)=\"move($event.viewport)\"\r\n  (onZoomChanged)=\"move($event.viewport)\"\r\n  (onMapClick)=\"handleMapClick($event.coordinates)\"\r\n  (onOverlayClick)=\"handleItemClick($event.itemId)\"\r\n  (onEditingOverlayClick)=\"handleEditingItemClick($event.itemId, $event)\"\r\n>\r\n</google-map>\r\n} @else if (mapEngine === MapEngine.LEAFLET) {\r\n<leaflet-map\r\n  #mapComponent\r\n  [model]=\"model()!\"\r\n  [items]=\"items()\"\r\n  [editingSession]=\"editingSession()\"\r\n  (onMapDragEnd)=\"move($event.viewport)\"\r\n  (onZoomChanged)=\"move($event.viewport)\"\r\n  (onMapClick)=\"handleMapClick($event.coordinates)\"\r\n  (onOverlayClick)=\"handleItemClick($event.itemId)\"\r\n  (onEditingOverlayClick)=\"handleEditingItemClick($event.itemId, $event)\"\r\n  (onEditingOverlayDrag)=\"handleEditingItemDrag($event.itemId, $event)\"\r\n>\r\n</leaflet-map>\r\n} @else {\r\n<p>\r\n  <strong>Not recognised map engine: [ {{ mapEngine }} ]</strong>\r\n</p>\r\n<p>Please provide a valid choice of map engine!</p>\r\n} }\r\n", styles: [""], dependencies: [{ kind: "component", type: GoogleMap, selector: "google-map", inputs: ["style", "styleClass"], outputs: ["onOverlayDblClick", "onOverlayDragStart", "onOverlayDrag", "onOverlayDragEnd", "onMapReady"] }, { kind: "component", type: LeafletMap, selector: "leaflet-map" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartMapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-map', template: "@if (model()) { @if (mapEngine === MapEngine.GOOGLE) {\r\n<google-map\r\n  [model]=\"model()!\"\r\n  [items]=\"items()\"\r\n  [style]=\"{ width: '100%', height: '320px' }\"\r\n  (onMapDragEnd)=\"move($event.viewport)\"\r\n  (onZoomChanged)=\"move($event.viewport)\"\r\n  (onMapClick)=\"handleMapClick($event.coordinates)\"\r\n  (onOverlayClick)=\"handleItemClick($event.itemId)\"\r\n  (onEditingOverlayClick)=\"handleEditingItemClick($event.itemId, $event)\"\r\n>\r\n</google-map>\r\n} @else if (mapEngine === MapEngine.LEAFLET) {\r\n<leaflet-map\r\n  [model]=\"model()!\"\r\n  [items]=\"items()\"\r\n  [editingSession]=\"editingSession()\"\r\n  (onMapDragEnd)=\"move($event.viewport)\"\r\n  (onZoomChanged)=\"move($event.viewport)\"\r\n  (onMapClick)=\"handleMapClick($event.coordinates)\"\r\n  (onOverlayClick)=\"handleItemClick($event.itemId)\"\r\n  (onEditingOverlayClick)=\"handleEditingItemClick($event.itemId, $event)\"\r\n  (onEditingOverlayDrag)=\"handleEditingItemDrag($event.itemId, $event)\"\r\n>\r\n</leaflet-map>\r\n} @else {\r\n<p>\r\n  <strong>Not recognised map engine: [ {{ mapEngine }} ]</strong>\r\n</p>\r\n<p>Please provide a valid choice of map engine!</p>\r\n} }\r\n" }]
+            args: [{ selector: 'smart-map', template: "@if (model()) { @if (mapEngine === MapEngine.GOOGLE) {\r\n<google-map\r\n  #mapComponent\r\n  [model]=\"model()!\"\r\n  [items]=\"items()\"\r\n  [style]=\"{ width: '100%', height: '320px' }\"\r\n  (onMapDragEnd)=\"move($event.viewport)\"\r\n  (onZoomChanged)=\"move($event.viewport)\"\r\n  (onMapClick)=\"handleMapClick($event.coordinates)\"\r\n  (onOverlayClick)=\"handleItemClick($event.itemId)\"\r\n  (onEditingOverlayClick)=\"handleEditingItemClick($event.itemId, $event)\"\r\n>\r\n</google-map>\r\n} @else if (mapEngine === MapEngine.LEAFLET) {\r\n<leaflet-map\r\n  #mapComponent\r\n  [model]=\"model()!\"\r\n  [items]=\"items()\"\r\n  [editingSession]=\"editingSession()\"\r\n  (onMapDragEnd)=\"move($event.viewport)\"\r\n  (onZoomChanged)=\"move($event.viewport)\"\r\n  (onMapClick)=\"handleMapClick($event.coordinates)\"\r\n  (onOverlayClick)=\"handleItemClick($event.itemId)\"\r\n  (onEditingOverlayClick)=\"handleEditingItemClick($event.itemId, $event)\"\r\n  (onEditingOverlayDrag)=\"handleEditingItemDrag($event.itemId, $event)\"\r\n>\r\n</leaflet-map>\r\n} @else {\r\n<p>\r\n  <strong>Not recognised map engine: [ {{ mapEngine }} ]</strong>\r\n</p>\r\n<p>Please provide a valid choice of map engine!</p>\r\n} }\r\n" }]
         }], ctorParameters: () => [{ type: MapEngine, decorators: [{
                     type: Inject,
                     args: [MAP_ENGINE]
@@ -16023,6 +16063,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 type: Input
             }], parent: [{
                 type: Input
+            }], mapComponent: [{
+                type: ViewChild,
+                args: ['mapComponent']
             }] } });
 
 class SmartMapModule {