@smartbit4all/ng-client 4.2.29 → 4.2.31

package/fesm2022/smartbit4all-ng-client.mjs

@@ -15064,6 +15064,7 @@ var GeoMapDataSourceType;
     GeoMapDataSourceType["STORED_COLLECTION"] = "STORED_COLLECTION";
     GeoMapDataSourceType["SEARCH_INDEX"] = "SEARCH_INDEX";
     GeoMapDataSourceType["INVOCATION_REQUEST"] = "INVOCATION_REQUEST";
+    GeoMapDataSourceType["INLINE"] = "INLINE";
 })(GeoMapDataSourceType || (GeoMapDataSourceType = {}));
 
 /**
@@ -15099,7 +15100,6 @@ var GeoMapOperationMode;
 (function (GeoMapOperationMode) {
     GeoMapOperationMode["ACTION"] = "ACTION";
     GeoMapOperationMode["SELECTION"] = "SELECTION";
-    GeoMapOperationMode["PLACEMENT"] = "PLACEMENT";
 })(GeoMapOperationMode || (GeoMapOperationMode = {}));
 
 /**
@@ -15181,24 +15181,31 @@ class AbstractMap {
         this.itemFactory = itemFactory;
         this.model = input.required();
         this.items = input.required();
+        this.editingSession = input();
         this.onMapClick = new EventEmitter();
         this.onOverlayClick = new EventEmitter();
         this.onMapDragEnd = new EventEmitter();
         this.onZoomChanged = new EventEmitter();
+        this.onEditingOverlayClick = new EventEmitter();
+        this.onEditingOverlayDrag = new EventEmitter();
         this.selection = computed(() => this.items()
             .filter((it) => !!it.selected)
             .map((it) => it.id));
-        this.pending = computed(() => this.model().pendingItems);
         this.operationMode = computed(() => this.model().viewState?.operationMode ?? GeoMapOperationMode.ACTION);
         this.overlays = new Map();
+        this.editingOverlays = new Map();
         this.onItemsChanged = this.initChangeEffect();
     }
     initChangeEffect() {
         return effect((onCleanup) => {
             const items = this.items();
+            const editingSession = this.editingSession();
             const present = new Set(this.overlays.keys());
+            const editingPresent = new Set(this.editingOverlays.keys());
             const toAdd = [];
             const toRemove = [];
+            const editingToAdd = [];
+            const editingtoRemove = [];
             for (const item of items) {
                 if (!item.id) {
                     continue;
@@ -15209,7 +15216,7 @@ class AbstractMap {
                 else {
                     toAdd.push({
                         id: item.id,
-                        record: this.itemFactory(item),
+                        record: this.itemFactory(item, { color: '#3388ff', draggable: false }),
                     });
                 }
             }
@@ -15221,16 +15228,43 @@ class AbstractMap {
                 toRemove.push({ id, record });
             });
             this.handleItemChanges(toRemove, toAdd);
+            if (editingSession) {
+                editingSession.pendingItems;
+                const pendingValues = this.model()?.viewState?.editingSession?.pendingItems;
+                const firstKey = Object.keys(pendingValues)[0];
+                const pendingItems = pendingValues[firstKey];
+                if ((pendingItems[0].route != null &&
+                    pendingItems[0].route.points != null &&
+                    pendingItems[0].route.points.length > 0) ||
+                    (pendingItems[0].position != null && pendingItems[0].position.latitude != null)) {
+                    editingToAdd.push({
+                        id: pendingItems[0].id,
+                        record: this.itemFactory(pendingItems[0], { color: '#ff0000', draggable: true }),
+                    });
+                }
+                editingPresent.forEach((id) => {
+                    const record = this.editingOverlays.get(id);
+                    if (!record) {
+                        return;
+                    }
+                    editingtoRemove.push({ id, record });
+                });
+                this.handleEditingItemChanges(editingtoRemove, editingToAdd);
+            }
             onCleanup(() => {
                 const remove = [...this.overlays.entries()].map(([id, record]) => {
                     return { id, record };
                 });
                 this.handleItemChanges(remove, []);
+                const editingRemove = [...this.editingOverlays.entries()].map(([id, record]) => {
+                    return { id, record };
+                });
+                this.handleEditingItemChanges(editingRemove, []);
             });
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AbstractMap, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.11", type: AbstractMap, inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onMapClick: "onMapClick", onOverlayClick: "onOverlayClick", onMapDragEnd: "onMapDragEnd", onZoomChanged: "onZoomChanged" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.11", type: AbstractMap, inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, editingSession: { classPropertyName: "editingSession", publicName: "editingSession", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onMapClick: "onMapClick", onOverlayClick: "onOverlayClick", onMapDragEnd: "onMapDragEnd", onZoomChanged: "onZoomChanged", onEditingOverlayClick: "onEditingOverlayClick", onEditingOverlayDrag: "onEditingOverlayDrag" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AbstractMap, decorators: [{
             type: Directive
@@ -15242,9 +15276,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 type: Output
             }], onZoomChanged: [{
                 type: Output
+            }], onEditingOverlayClick: [{
+                type: Output
+            }], onEditingOverlayDrag: [{
+                type: Output
             }] } });
 
-function createGoogleMapsItem(item) {
+function createGoogleMapsItem(item, config) {
     switch (item.kind) {
         case GeoMapItemKind.MARKER:
             return new google.maps.Marker({
@@ -15256,7 +15294,7 @@ function createGoogleMapsItem(item) {
             });
         case GeoMapItemKind.LINE:
             return new google.maps.Polyline({
-                path: item.bounds.map((it) => {
+                path: item.route.points.map((it) => {
                     return { lat: it.latitude, lng: it.longitude };
                 }),
                 geodesic: true,
@@ -15266,7 +15304,7 @@ function createGoogleMapsItem(item) {
             });
         case GeoMapItemKind.POLYGON:
             return new google.maps.Polygon({
-                path: item.bounds.map((it) => {
+                path: item.route.points.map((it) => {
                     return { lat: it.latitude, lng: it.longitude };
                 }),
                 strokeOpacity: 0.5,
@@ -15296,7 +15334,7 @@ class GoogleMap extends AbstractMap {
         const items = this.items();
         const toAdd = items.map((it) => ({
             id: it.id,
-            record: createGoogleMapsItem(it),
+            record: createGoogleMapsItem(it, { color: '#3388ff', draggable: false }),
         }));
         this.handleItemChanges([], toAdd);
         this.onMapReady.emit({
@@ -15397,6 +15435,7 @@ class GoogleMap extends AbstractMap {
             this.overlays.set(it.id, it.record);
         });
     }
+    handleEditingItemChanges(toRemove, toAdd) { }
     bindDragEvents(overlay) {
         overlay.addListener('dragstart', (event) => {
             this.zone.run(() => {
@@ -15459,14 +15498,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 type: Output
             }] } });
 
-function createLeafletMapItem(item) {
+function createLeafletMapItem(item, config) {
     switch (item.kind) {
         case GeoMapItemKind.MARKER:
             return L.marker(L.latLng(item.position.latitude, item.position.longitude), {
                 title: item.label,
+                interactive: config.draggable,
             });
         case GeoMapItemKind.POLYGON:
-            return L.polygon(item.bounds.map((p) => [p.latitude, p.longitude]), { title: item.label });
+            const polygonRoutePoints = item.route.points;
+            return L.layerGroup([
+                L.polygon(polygonRoutePoints.map((p) => [p.latitude, p.longitude]), { title: item.label, color: config.color }),
+                ...polygonRoutePoints.map((p) => L.marker([p.latitude, p.longitude], {
+                    title: item.label,
+                    markerColor: config.color,
+                    interactive: config.draggable,
+                })),
+            ]);
+        case GeoMapItemKind.LINE:
+            const lineRoutePoints = item.route.points;
+            return L.layerGroup([
+                L.polyline(lineRoutePoints.map((p) => [p.latitude, p.longitude]), { title: item.label, color: config.color }),
+                ...lineRoutePoints.map((p) => L.marker([p.latitude, p.longitude], {
+                    title: item.label,
+                    color: config.color,
+                    interactive: config.draggable,
+                })),
+            ]);
     }
     throw new Error('Foo!');
 }
@@ -15489,7 +15547,7 @@ class LeafletMap extends AbstractMap {
         const items = this.items();
         const toAdd = items.map((it) => ({
             id: it.id,
-            record: createLeafletMapItem(it),
+            record: createLeafletMapItem(it, { color: '#ff0000', draggable: false }),
         }));
         this.handleItemChanges([], toAdd);
         const model = this.model();
@@ -15573,22 +15631,102 @@ class LeafletMap extends AbstractMap {
             this.overlays.delete(it.id);
         });
         toAdd.forEach((it) => {
-            it.record.on('click', (event) => {
-                this.zone.run(() => {
-                    this.onOverlayClick.emit({
-                        itemId: it.id,
-                        originalEvent: {
-                            originalEvent: event,
-                            overlay: it.record,
-                            map: this.map,
-                        },
+            let record = it.record;
+            if (record instanceof L.LayerGroup) {
+                Object.values(record._layers).forEach((at) => {
+                    at.on('click', (event) => {
+                        this.zone.run(() => {
+                            this.onOverlayClick.emit({
+                                itemId: it.id,
+                                originalEvent: {
+                                    originalEvent: event,
+                                    overlay: it.record,
+                                    map: this.map,
+                                },
+                            });
+                        });
                     });
                 });
-            });
+            }
+            else {
+                it.record.on('click', (event) => {
+                    this.zone.run(() => {
+                        this.onOverlayClick.emit({
+                            itemId: it.id,
+                            originalEvent: {
+                                originalEvent: event,
+                                overlay: it.record,
+                                map: this.map,
+                            },
+                        });
+                    });
+                });
+            }
             it.record.addTo(this.map);
             this.overlays.set(it.id, it.record);
         });
     }
+    handleEditingItemChanges(toRemove, toAdd) {
+        if (!this.map) {
+            return;
+        }
+        toRemove.forEach((it) => {
+            it.record.remove();
+            this.editingOverlays.delete(it.id);
+        });
+        toAdd.forEach((it) => {
+            let record = it.record;
+            if (record instanceof L.LayerGroup) {
+                Object.values(record._layers).forEach((at) => {
+                    at.on('click', (event) => {
+                        this.zone.run(() => {
+                            this.onEditingOverlayClick.emit({
+                                itemId: it.id,
+                                coord: {
+                                    x: event.latlng.lng,
+                                    y: event.latlng.lat,
+                                },
+                            });
+                        });
+                    });
+                    at.on('dragstart', (event) => {
+                        this.originalLatLng = event.target.getLatLng();
+                    });
+                    at.on('dragend', (event) => {
+                        this.zone.run(() => {
+                            this.onEditingOverlayDrag.emit({
+                                itemId: it.id,
+                                startPosition: {
+                                    x: this.originalLatLng.lng,
+                                    y: this.originalLatLng.lat,
+                                },
+                                dragTo: {
+                                    x: event.target.getLatLng().lng,
+                                    y: event.target.getLatLng().lat,
+                                },
+                            });
+                        });
+                        this.originalLatLng = null;
+                    });
+                });
+            }
+            else {
+                it.record.on('click', (event) => {
+                    this.zone.run(() => {
+                        this.onEditingOverlayClick.emit({
+                            itemId: it.id,
+                            coord: {
+                                x: event.latlng.lng,
+                                y: event.latlng.lat,
+                            },
+                        });
+                    });
+                });
+            }
+            it.record.addTo(this.map);
+            this.editingOverlays.set(it.id, it.record);
+        });
+    }
     findDatasetBounds() {
         const items = this.items()
             .flatMap((it) => (it.position ? [it.position] : []))
@@ -15641,6 +15779,7 @@ class SmartMapComponent {
             const model = this.model();
             return model?.layers.flatMap((l) => l.items ?? []) ?? [];
         });
+        this.editingSession = computed(() => this.model()?.viewState?.editingSession);
         this.selection = computed(() => new Set(this.items()
             .filter((it) => !!it.selected)
             .map((it) => it.id)
@@ -15698,13 +15837,16 @@ class SmartMapComponent {
                     items: toAdd,
                 });
             }
+            it.viewState.editingSession = change.editingSession;
             return {
                 ...it,
                 layers: [...layersById.values()],
+                viewState: it.viewState,
             };
         });
     }
     handleMapClick(position) {
+        let viewState = this.model()?.viewState;
         const operationMode = this.model()?.viewState?.operationMode ?? GeoMapOperationMode.ACTION;
         switch (operationMode) {
             case GeoMapOperationMode.ACTION:
@@ -15713,34 +15855,27 @@ class SmartMapComponent {
             case GeoMapOperationMode.SELECTION:
                 // no-op, can't select empty space.
                 break;
-            case GeoMapOperationMode.PLACEMENT:
-                lastValueFrom(this.api.interact(this.uuid, this.identifier, {
-                    operationMode,
-                    targetItem: {
-                        kind: GeoMapItemKind.MARKER, // FIXME: We shall support more item kinds!
-                        position,
-                        icons: {},
-                        bounds: [],
-                        actions: [],
-                    },
-                    targetLayer: '',
-                    inverse: false,
-                })).then((change) => {
-                    if (!this.viewContextService) {
-                        console.warn('Smart Map has no ViewContext Service set up!');
-                        return null;
-                    }
-                    else {
-                        return this.viewContextService.handlePerformActionResponse(change);
-                    }
-                }, (err) => {
-                    console.warn('Could not submit selection change! ', err);
-                });
+        }
+        if (viewState.editingSession &&
+            Object.keys(viewState.editingSession?.pendingItems).length > 0) {
+            const pendingItems = viewState.editingSession.pendingItems;
+            const firstKey = Object.keys(pendingItems)[0];
+            const pendingItem = pendingItems[firstKey];
+            if (pendingItem && pendingItem.length > 0) {
+                const editingItem = pendingItem[0];
+                if (editingItem.kind === GeoMapItemKind.MARKER) {
+                    editingItem.position = position;
+                }
+                else {
+                    editingItem.route.points.push(position);
+                }
+            }
+            this.update(viewState);
         }
     }
     handleItemClick(id) {
         const operationMode = this.model()?.viewState?.operationMode ?? GeoMapOperationMode.ACTION;
-        const targetItem = this.items().find((it) => id === it.id);
+        let targetItem = this.items().find((it) => id === it.id);
         if (!targetItem) {
             console.warn('Selection item is seemingly missing from known items: ', id);
             return;
@@ -15767,34 +15902,62 @@ class SmartMapComponent {
                     console.warn('Could not submit selection change! ', err);
                 });
                 break;
-            case GeoMapOperationMode.PLACEMENT:
-                // clicking an item may remove it, if it's only a pending item. To reposition existing
-                // items, we shall react to dragEnd events only.
-                lastValueFrom(this.api.interact(this.uuid, this.identifier, {
-                    operationMode,
-                    targetItem,
-                    targetLayer: '',
-                    inverse: true,
-                })).then((change) => {
-                    if (!this.viewContextService) {
-                        console.warn('Smart Map has no ViewContext Service set up!');
-                        return null;
-                    }
-                    else {
-                        return this.viewContextService.handlePerformActionResponse(change);
-                    }
-                }, (err) => {
-                    console.warn('Could not submit placement change! ', err);
-                });
-                break;
         }
     }
+    handleEditingItemClick(id, event) {
+        let viewState = this.model()?.viewState;
+        const pendingValues = viewState?.editingSession?.pendingItems;
+        const firstKey = Object.keys(pendingValues)[0];
+        const pendingItems = pendingValues[firstKey];
+        let targetItem = pendingItems[0];
+        if (!targetItem) {
+            console.warn('Selection item is seemingly missing from known items: ', id);
+            return;
+        }
+        if (targetItem.kind === GeoMapItemKind.MARKER) {
+            targetItem.position = undefined;
+            this.update(viewState);
+        }
+        else {
+            const points = targetItem.route.points;
+            const index = points.findIndex((point) => point.latitude === event.coord.y && point.longitude === event.coord.x);
+            if (index !== -1) {
+                points.splice(index, 1);
+            }
+        }
+        this.update(viewState);
+    }
+    handleEditingItemDrag(id, event) {
+        let viewState = this.model()?.viewState;
+        const pendingValues = viewState?.editingSession?.pendingItems;
+        const firstKey = Object.keys(pendingValues)[0];
+        const pendingItems = pendingValues[firstKey];
+        let targetItem = pendingItems[0];
+        if (!targetItem) {
+            console.warn('Selection item is seemingly missing from known items: ', id);
+            return;
+        }
+        if (targetItem.kind === GeoMapItemKind.MARKER) {
+            targetItem.position.latitude = event.dragTo.y;
+            targetItem.position.longitude = event.dragTo.x;
+        }
+        else {
+            const points = targetItem.route.points;
+            const index = points.findIndex((point) => point.latitude === event.startPosition.y && point.longitude === event.startPosition.x);
+            if (index !== -1) {
+                points[index].latitude = event.dragTo.y;
+                points[index].longitude = event.dragTo.x;
+            }
+            targetItem.route.points = points;
+        }
+        this.update(viewState);
+    }
     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>\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  (onMapDragEnd)=\"move($event.viewport)\"\r\n  (onZoomChanged)=\"move($event.viewport)\"\r\n  (onMapClick)=\"handleMapClick($event.coordinates)\"\r\n  (onOverlayClick)=\"handleItemClick($event.itemId)\"\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" }, 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" }] }); }
 }
 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>\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  (onMapDragEnd)=\"move($event.viewport)\"\r\n  (onZoomChanged)=\"move($event.viewport)\"\r\n  (onMapClick)=\"handleMapClick($event.coordinates)\"\r\n  (onOverlayClick)=\"handleItemClick($event.itemId)\"\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  [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" }]
         }], ctorParameters: () => [{ type: MapEngine, decorators: [{
                     type: Inject,
                     args: [MAP_ENGINE]