@smartbit4all/ng-client 4.2.28 → 4.2.30
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/esm2022/lib/smart-map/abstract-map.mjs +43 -5
- package/esm2022/lib/smart-map/api/model/gPSRoute.mjs +2 -0
- package/esm2022/lib/smart-map/api/model/geoMapChange.mjs +1 -1
- package/esm2022/lib/smart-map/api/model/geoMapDataSourceDescriptor.mjs +1 -1
- package/esm2022/lib/smart-map/api/model/geoMapDataSourceType.mjs +2 -1
- package/esm2022/lib/smart-map/api/model/geoMapEditingSession.mjs +2 -0
- package/esm2022/lib/smart-map/api/model/geoMapInteraction.mjs +1 -1
- package/esm2022/lib/smart-map/api/model/geoMapItem.mjs +1 -1
- package/esm2022/lib/smart-map/api/model/geoMapModel.mjs +1 -1
- package/esm2022/lib/smart-map/api/model/geoMapOperationMode.mjs +1 -2
- package/esm2022/lib/smart-map/api/model/geoMapServerModel.mjs +1 -1
- package/esm2022/lib/smart-map/api/model/geoMapViewState.mjs +1 -1
- package/esm2022/lib/smart-map/api/model/models.mjs +3 -1
- package/esm2022/lib/smart-map/impl/google-map.mjs +6 -5
- package/esm2022/lib/smart-map/impl/leaflet-map.mjs +83 -4
- package/esm2022/lib/smart-map/smart-map.component.mjs +72 -47
- package/esm2022/lib/smart-map/smart-map.types.mjs +1 -1
- package/esm2022/lib/view-context/smart-view-context-dialog.service.mjs +2 -1
- package/fesm2022/smartbit4all-ng-client.mjs +201 -57
- package/fesm2022/smartbit4all-ng-client.mjs.map +1 -1
- package/lib/smart-map/abstract-map.d.ts +9 -5
- package/lib/smart-map/api/model/gPSRoute.d.ts +21 -0
- package/lib/smart-map/api/model/geoMapChange.d.ts +2 -0
- package/lib/smart-map/api/model/geoMapDataSourceDescriptor.d.ts +2 -0
- package/lib/smart-map/api/model/geoMapDataSourceType.d.ts +2 -1
- package/lib/smart-map/api/model/geoMapEditingSession.d.ts +17 -0
- package/lib/smart-map/api/model/geoMapInteraction.d.ts +2 -0
- package/lib/smart-map/api/model/geoMapItem.d.ts +2 -1
- package/lib/smart-map/api/model/geoMapModel.d.ts +0 -1
- package/lib/smart-map/api/model/geoMapOperationMode.d.ts +1 -2
- package/lib/smart-map/api/model/geoMapServerModel.d.ts +0 -3
- package/lib/smart-map/api/model/geoMapViewState.d.ts +2 -0
- package/lib/smart-map/api/model/models.d.ts +2 -0
- package/lib/smart-map/impl/google-map.d.ts +1 -0
- package/lib/smart-map/impl/leaflet-map.d.ts +2 -0
- package/lib/smart-map/smart-map.component.d.ts +5 -1
- package/lib/smart-map/smart-map.types.d.ts +9 -0
- package/package.json +1 -1
- package/smartbit4all-ng-client-4.2.30.tgz +0 -0
- package/smartbit4all-ng-client-4.2.28.tgz +0 -0
|
@@ -2755,6 +2755,7 @@ class SmartViewContextDialogService {
|
|
|
2755
2755
|
else {
|
|
2756
2756
|
let dialogRef = this.dialogService.open(component, {
|
|
2757
2757
|
data: dialogData,
|
|
2758
|
+
focusOnShow: false,
|
|
2758
2759
|
closable: !this.inject.get(DIALOG_DISABLE_CLOSE),
|
|
2759
2760
|
});
|
|
2760
2761
|
dialogRef.onClose.pipe(take(1)).subscribe((result) => {
|
|
@@ -15063,6 +15064,7 @@ var GeoMapDataSourceType;
|
|
|
15063
15064
|
GeoMapDataSourceType["STORED_COLLECTION"] = "STORED_COLLECTION";
|
|
15064
15065
|
GeoMapDataSourceType["SEARCH_INDEX"] = "SEARCH_INDEX";
|
|
15065
15066
|
GeoMapDataSourceType["INVOCATION_REQUEST"] = "INVOCATION_REQUEST";
|
|
15067
|
+
GeoMapDataSourceType["INLINE"] = "INLINE";
|
|
15066
15068
|
})(GeoMapDataSourceType || (GeoMapDataSourceType = {}));
|
|
15067
15069
|
|
|
15068
15070
|
/**
|
|
@@ -15098,7 +15100,6 @@ var GeoMapOperationMode;
|
|
|
15098
15100
|
(function (GeoMapOperationMode) {
|
|
15099
15101
|
GeoMapOperationMode["ACTION"] = "ACTION";
|
|
15100
15102
|
GeoMapOperationMode["SELECTION"] = "SELECTION";
|
|
15101
|
-
GeoMapOperationMode["PLACEMENT"] = "PLACEMENT";
|
|
15102
15103
|
})(GeoMapOperationMode || (GeoMapOperationMode = {}));
|
|
15103
15104
|
|
|
15104
15105
|
/**
|
|
@@ -15180,24 +15181,31 @@ class AbstractMap {
|
|
|
15180
15181
|
this.itemFactory = itemFactory;
|
|
15181
15182
|
this.model = input.required();
|
|
15182
15183
|
this.items = input.required();
|
|
15184
|
+
this.editingSession = input();
|
|
15183
15185
|
this.onMapClick = new EventEmitter();
|
|
15184
15186
|
this.onOverlayClick = new EventEmitter();
|
|
15185
15187
|
this.onMapDragEnd = new EventEmitter();
|
|
15186
15188
|
this.onZoomChanged = new EventEmitter();
|
|
15189
|
+
this.onEditingOverlayClick = new EventEmitter();
|
|
15190
|
+
this.onEditingOverlayDrag = new EventEmitter();
|
|
15187
15191
|
this.selection = computed(() => this.items()
|
|
15188
15192
|
.filter((it) => !!it.selected)
|
|
15189
15193
|
.map((it) => it.id));
|
|
15190
|
-
this.pending = computed(() => this.model().pendingItems);
|
|
15191
15194
|
this.operationMode = computed(() => this.model().viewState?.operationMode ?? GeoMapOperationMode.ACTION);
|
|
15192
15195
|
this.overlays = new Map();
|
|
15196
|
+
this.editingOverlays = new Map();
|
|
15193
15197
|
this.onItemsChanged = this.initChangeEffect();
|
|
15194
15198
|
}
|
|
15195
15199
|
initChangeEffect() {
|
|
15196
15200
|
return effect((onCleanup) => {
|
|
15197
15201
|
const items = this.items();
|
|
15202
|
+
const editingSession = this.editingSession();
|
|
15198
15203
|
const present = new Set(this.overlays.keys());
|
|
15204
|
+
const editingPresent = new Set(this.editingOverlays.keys());
|
|
15199
15205
|
const toAdd = [];
|
|
15200
15206
|
const toRemove = [];
|
|
15207
|
+
const editingToAdd = [];
|
|
15208
|
+
const editingtoRemove = [];
|
|
15201
15209
|
for (const item of items) {
|
|
15202
15210
|
if (!item.id) {
|
|
15203
15211
|
continue;
|
|
@@ -15208,7 +15216,7 @@ class AbstractMap {
|
|
|
15208
15216
|
else {
|
|
15209
15217
|
toAdd.push({
|
|
15210
15218
|
id: item.id,
|
|
15211
|
-
record: this.itemFactory(item),
|
|
15219
|
+
record: this.itemFactory(item, '#3388ff'),
|
|
15212
15220
|
});
|
|
15213
15221
|
}
|
|
15214
15222
|
}
|
|
@@ -15220,16 +15228,43 @@ class AbstractMap {
|
|
|
15220
15228
|
toRemove.push({ id, record });
|
|
15221
15229
|
});
|
|
15222
15230
|
this.handleItemChanges(toRemove, toAdd);
|
|
15231
|
+
if (editingSession) {
|
|
15232
|
+
editingSession.pendingItems;
|
|
15233
|
+
const pendingValues = this.model()?.viewState?.editingSession?.pendingItems;
|
|
15234
|
+
const firstKey = Object.keys(pendingValues)[0];
|
|
15235
|
+
const pendingItems = pendingValues[firstKey];
|
|
15236
|
+
if ((pendingItems[0].route != null &&
|
|
15237
|
+
pendingItems[0].route.points != null &&
|
|
15238
|
+
pendingItems[0].route.points.length > 0) ||
|
|
15239
|
+
(pendingItems[0].position != null && pendingItems[0].position.latitude != null)) {
|
|
15240
|
+
editingToAdd.push({
|
|
15241
|
+
id: pendingItems[0].id,
|
|
15242
|
+
record: this.itemFactory(pendingItems[0], '#ff0000'),
|
|
15243
|
+
});
|
|
15244
|
+
}
|
|
15245
|
+
editingPresent.forEach((id) => {
|
|
15246
|
+
const record = this.editingOverlays.get(id);
|
|
15247
|
+
if (!record) {
|
|
15248
|
+
return;
|
|
15249
|
+
}
|
|
15250
|
+
editingtoRemove.push({ id, record });
|
|
15251
|
+
});
|
|
15252
|
+
this.handleEditingItemChanges(editingtoRemove, editingToAdd);
|
|
15253
|
+
}
|
|
15223
15254
|
onCleanup(() => {
|
|
15224
15255
|
const remove = [...this.overlays.entries()].map(([id, record]) => {
|
|
15225
15256
|
return { id, record };
|
|
15226
15257
|
});
|
|
15227
15258
|
this.handleItemChanges(remove, []);
|
|
15259
|
+
const editingRemove = [...this.editingOverlays.entries()].map(([id, record]) => {
|
|
15260
|
+
return { id, record };
|
|
15261
|
+
});
|
|
15262
|
+
this.handleEditingItemChanges(editingRemove, []);
|
|
15228
15263
|
});
|
|
15229
15264
|
});
|
|
15230
15265
|
}
|
|
15231
15266
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AbstractMap, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
|
|
15232
|
-
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 }); }
|
|
15267
|
+
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 }); }
|
|
15233
15268
|
}
|
|
15234
15269
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AbstractMap, decorators: [{
|
|
15235
15270
|
type: Directive
|
|
@@ -15241,9 +15276,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
|
|
|
15241
15276
|
type: Output
|
|
15242
15277
|
}], onZoomChanged: [{
|
|
15243
15278
|
type: Output
|
|
15279
|
+
}], onEditingOverlayClick: [{
|
|
15280
|
+
type: Output
|
|
15281
|
+
}], onEditingOverlayDrag: [{
|
|
15282
|
+
type: Output
|
|
15244
15283
|
}] } });
|
|
15245
15284
|
|
|
15246
|
-
function createGoogleMapsItem(item) {
|
|
15285
|
+
function createGoogleMapsItem(item, color) {
|
|
15247
15286
|
switch (item.kind) {
|
|
15248
15287
|
case GeoMapItemKind.MARKER:
|
|
15249
15288
|
return new google.maps.Marker({
|
|
@@ -15255,7 +15294,7 @@ function createGoogleMapsItem(item) {
|
|
|
15255
15294
|
});
|
|
15256
15295
|
case GeoMapItemKind.LINE:
|
|
15257
15296
|
return new google.maps.Polyline({
|
|
15258
|
-
path: item.
|
|
15297
|
+
path: item.route.points.map((it) => {
|
|
15259
15298
|
return { lat: it.latitude, lng: it.longitude };
|
|
15260
15299
|
}),
|
|
15261
15300
|
geodesic: true,
|
|
@@ -15265,7 +15304,7 @@ function createGoogleMapsItem(item) {
|
|
|
15265
15304
|
});
|
|
15266
15305
|
case GeoMapItemKind.POLYGON:
|
|
15267
15306
|
return new google.maps.Polygon({
|
|
15268
|
-
path: item.
|
|
15307
|
+
path: item.route.points.map((it) => {
|
|
15269
15308
|
return { lat: it.latitude, lng: it.longitude };
|
|
15270
15309
|
}),
|
|
15271
15310
|
strokeOpacity: 0.5,
|
|
@@ -15295,7 +15334,7 @@ class GoogleMap extends AbstractMap {
|
|
|
15295
15334
|
const items = this.items();
|
|
15296
15335
|
const toAdd = items.map((it) => ({
|
|
15297
15336
|
id: it.id,
|
|
15298
|
-
record: createGoogleMapsItem(it),
|
|
15337
|
+
record: createGoogleMapsItem(it, '#3388ff'),
|
|
15299
15338
|
}));
|
|
15300
15339
|
this.handleItemChanges([], toAdd);
|
|
15301
15340
|
this.onMapReady.emit({
|
|
@@ -15396,6 +15435,7 @@ class GoogleMap extends AbstractMap {
|
|
|
15396
15435
|
this.overlays.set(it.id, it.record);
|
|
15397
15436
|
});
|
|
15398
15437
|
}
|
|
15438
|
+
handleEditingItemChanges(toRemove, toAdd) { }
|
|
15399
15439
|
bindDragEvents(overlay) {
|
|
15400
15440
|
overlay.addListener('dragstart', (event) => {
|
|
15401
15441
|
this.zone.run(() => {
|
|
@@ -15458,14 +15498,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
|
|
|
15458
15498
|
type: Output
|
|
15459
15499
|
}] } });
|
|
15460
15500
|
|
|
15461
|
-
function createLeafletMapItem(item) {
|
|
15501
|
+
function createLeafletMapItem(item, color) {
|
|
15462
15502
|
switch (item.kind) {
|
|
15463
15503
|
case GeoMapItemKind.MARKER:
|
|
15464
15504
|
return L.marker(L.latLng(item.position.latitude, item.position.longitude), {
|
|
15465
15505
|
title: item.label,
|
|
15466
15506
|
});
|
|
15467
15507
|
case GeoMapItemKind.POLYGON:
|
|
15468
|
-
|
|
15508
|
+
const polygonRoutePoints = item.route.points;
|
|
15509
|
+
return L.layerGroup([
|
|
15510
|
+
L.polygon(polygonRoutePoints.map((p) => [p.latitude, p.longitude]), { title: item.label, color: color, interactive: true }),
|
|
15511
|
+
...polygonRoutePoints.map((p) => L.marker([p.latitude, p.longitude], {
|
|
15512
|
+
title: item.label,
|
|
15513
|
+
markerColor: color,
|
|
15514
|
+
draggable: true,
|
|
15515
|
+
})),
|
|
15516
|
+
]);
|
|
15517
|
+
case GeoMapItemKind.LINE:
|
|
15518
|
+
const lineRoutePoints = item.route.points;
|
|
15519
|
+
return L.layerGroup([
|
|
15520
|
+
L.polyline(lineRoutePoints.map((p) => [p.latitude, p.longitude]), { title: item.label, color: color }),
|
|
15521
|
+
...lineRoutePoints.map((p) => L.marker([p.latitude, p.longitude], {
|
|
15522
|
+
title: item.label,
|
|
15523
|
+
color: color,
|
|
15524
|
+
draggable: true,
|
|
15525
|
+
})),
|
|
15526
|
+
]);
|
|
15469
15527
|
}
|
|
15470
15528
|
throw new Error('Foo!');
|
|
15471
15529
|
}
|
|
@@ -15488,7 +15546,7 @@ class LeafletMap extends AbstractMap {
|
|
|
15488
15546
|
const items = this.items();
|
|
15489
15547
|
const toAdd = items.map((it) => ({
|
|
15490
15548
|
id: it.id,
|
|
15491
|
-
record: createLeafletMapItem(it),
|
|
15549
|
+
record: createLeafletMapItem(it, '#ff0000'),
|
|
15492
15550
|
}));
|
|
15493
15551
|
this.handleItemChanges([], toAdd);
|
|
15494
15552
|
const model = this.model();
|
|
@@ -15588,6 +15646,67 @@ class LeafletMap extends AbstractMap {
|
|
|
15588
15646
|
this.overlays.set(it.id, it.record);
|
|
15589
15647
|
});
|
|
15590
15648
|
}
|
|
15649
|
+
handleEditingItemChanges(toRemove, toAdd) {
|
|
15650
|
+
if (!this.map) {
|
|
15651
|
+
return;
|
|
15652
|
+
}
|
|
15653
|
+
toRemove.forEach((it) => {
|
|
15654
|
+
it.record.remove();
|
|
15655
|
+
this.editingOverlays.delete(it.id);
|
|
15656
|
+
});
|
|
15657
|
+
toAdd.forEach((it) => {
|
|
15658
|
+
let record = it.record;
|
|
15659
|
+
if (record instanceof L.LayerGroup) {
|
|
15660
|
+
Object.values(record._layers).forEach((at) => {
|
|
15661
|
+
at.on('click', (event) => {
|
|
15662
|
+
this.zone.run(() => {
|
|
15663
|
+
this.onEditingOverlayClick.emit({
|
|
15664
|
+
itemId: it.id,
|
|
15665
|
+
coord: {
|
|
15666
|
+
x: event.latlng.lng,
|
|
15667
|
+
y: event.latlng.lat,
|
|
15668
|
+
},
|
|
15669
|
+
});
|
|
15670
|
+
});
|
|
15671
|
+
});
|
|
15672
|
+
at.on('dragstart', (event) => {
|
|
15673
|
+
this.originalLatLng = event.target.getLatLng();
|
|
15674
|
+
});
|
|
15675
|
+
at.on('dragend', (event) => {
|
|
15676
|
+
this.zone.run(() => {
|
|
15677
|
+
this.onEditingOverlayDrag.emit({
|
|
15678
|
+
itemId: it.id,
|
|
15679
|
+
startPosition: {
|
|
15680
|
+
x: this.originalLatLng.lng,
|
|
15681
|
+
y: this.originalLatLng.lat,
|
|
15682
|
+
},
|
|
15683
|
+
dragTo: {
|
|
15684
|
+
x: event.target.getLatLng().lng,
|
|
15685
|
+
y: event.target.getLatLng().lat,
|
|
15686
|
+
},
|
|
15687
|
+
});
|
|
15688
|
+
});
|
|
15689
|
+
this.originalLatLng = null;
|
|
15690
|
+
});
|
|
15691
|
+
});
|
|
15692
|
+
}
|
|
15693
|
+
else {
|
|
15694
|
+
it.record.on('click', (event) => {
|
|
15695
|
+
this.zone.run(() => {
|
|
15696
|
+
this.onEditingOverlayClick.emit({
|
|
15697
|
+
itemId: it.id,
|
|
15698
|
+
coord: {
|
|
15699
|
+
x: event.latlng.lng,
|
|
15700
|
+
y: event.latlng.lat,
|
|
15701
|
+
},
|
|
15702
|
+
});
|
|
15703
|
+
});
|
|
15704
|
+
});
|
|
15705
|
+
}
|
|
15706
|
+
it.record.addTo(this.map);
|
|
15707
|
+
this.editingOverlays.set(it.id, it.record);
|
|
15708
|
+
});
|
|
15709
|
+
}
|
|
15591
15710
|
findDatasetBounds() {
|
|
15592
15711
|
const items = this.items()
|
|
15593
15712
|
.flatMap((it) => (it.position ? [it.position] : []))
|
|
@@ -15640,6 +15759,7 @@ class SmartMapComponent {
|
|
|
15640
15759
|
const model = this.model();
|
|
15641
15760
|
return model?.layers.flatMap((l) => l.items ?? []) ?? [];
|
|
15642
15761
|
});
|
|
15762
|
+
this.editingSession = computed(() => this.model()?.viewState?.editingSession);
|
|
15643
15763
|
this.selection = computed(() => new Set(this.items()
|
|
15644
15764
|
.filter((it) => !!it.selected)
|
|
15645
15765
|
.map((it) => it.id)
|
|
@@ -15697,13 +15817,16 @@ class SmartMapComponent {
|
|
|
15697
15817
|
items: toAdd,
|
|
15698
15818
|
});
|
|
15699
15819
|
}
|
|
15820
|
+
it.viewState.editingSession = change.editingSession;
|
|
15700
15821
|
return {
|
|
15701
15822
|
...it,
|
|
15702
15823
|
layers: [...layersById.values()],
|
|
15824
|
+
viewState: it.viewState,
|
|
15703
15825
|
};
|
|
15704
15826
|
});
|
|
15705
15827
|
}
|
|
15706
15828
|
handleMapClick(position) {
|
|
15829
|
+
let viewState = this.model()?.viewState;
|
|
15707
15830
|
const operationMode = this.model()?.viewState?.operationMode ?? GeoMapOperationMode.ACTION;
|
|
15708
15831
|
switch (operationMode) {
|
|
15709
15832
|
case GeoMapOperationMode.ACTION:
|
|
@@ -15712,34 +15835,27 @@ class SmartMapComponent {
|
|
|
15712
15835
|
case GeoMapOperationMode.SELECTION:
|
|
15713
15836
|
// no-op, can't select empty space.
|
|
15714
15837
|
break;
|
|
15715
|
-
|
|
15716
|
-
|
|
15717
|
-
|
|
15718
|
-
|
|
15719
|
-
|
|
15720
|
-
|
|
15721
|
-
|
|
15722
|
-
|
|
15723
|
-
|
|
15724
|
-
|
|
15725
|
-
|
|
15726
|
-
|
|
15727
|
-
|
|
15728
|
-
|
|
15729
|
-
|
|
15730
|
-
|
|
15731
|
-
}
|
|
15732
|
-
else {
|
|
15733
|
-
return this.viewContextService.handlePerformActionResponse(change);
|
|
15734
|
-
}
|
|
15735
|
-
}, (err) => {
|
|
15736
|
-
console.warn('Could not submit selection change! ', err);
|
|
15737
|
-
});
|
|
15838
|
+
}
|
|
15839
|
+
if (viewState.editingSession &&
|
|
15840
|
+
Object.keys(viewState.editingSession?.pendingItems).length > 0) {
|
|
15841
|
+
const pendingItems = viewState.editingSession.pendingItems;
|
|
15842
|
+
const firstKey = Object.keys(pendingItems)[0];
|
|
15843
|
+
const pendingItem = pendingItems[firstKey];
|
|
15844
|
+
if (pendingItem && pendingItem.length > 0) {
|
|
15845
|
+
const editingItem = pendingItem[0];
|
|
15846
|
+
if (editingItem.kind === GeoMapItemKind.MARKER) {
|
|
15847
|
+
editingItem.position = position;
|
|
15848
|
+
}
|
|
15849
|
+
else {
|
|
15850
|
+
editingItem.route.points.push(position);
|
|
15851
|
+
}
|
|
15852
|
+
}
|
|
15853
|
+
this.update(viewState);
|
|
15738
15854
|
}
|
|
15739
15855
|
}
|
|
15740
15856
|
handleItemClick(id) {
|
|
15741
15857
|
const operationMode = this.model()?.viewState?.operationMode ?? GeoMapOperationMode.ACTION;
|
|
15742
|
-
|
|
15858
|
+
let targetItem = this.items().find((it) => id === it.id);
|
|
15743
15859
|
if (!targetItem) {
|
|
15744
15860
|
console.warn('Selection item is seemingly missing from known items: ', id);
|
|
15745
15861
|
return;
|
|
@@ -15766,34 +15882,62 @@ class SmartMapComponent {
|
|
|
15766
15882
|
console.warn('Could not submit selection change! ', err);
|
|
15767
15883
|
});
|
|
15768
15884
|
break;
|
|
15769
|
-
case GeoMapOperationMode.PLACEMENT:
|
|
15770
|
-
// clicking an item may remove it, if it's only a pending item. To reposition existing
|
|
15771
|
-
// items, we shall react to dragEnd events only.
|
|
15772
|
-
lastValueFrom(this.api.interact(this.uuid, this.identifier, {
|
|
15773
|
-
operationMode,
|
|
15774
|
-
targetItem,
|
|
15775
|
-
targetLayer: '',
|
|
15776
|
-
inverse: true,
|
|
15777
|
-
})).then((change) => {
|
|
15778
|
-
if (!this.viewContextService) {
|
|
15779
|
-
console.warn('Smart Map has no ViewContext Service set up!');
|
|
15780
|
-
return null;
|
|
15781
|
-
}
|
|
15782
|
-
else {
|
|
15783
|
-
return this.viewContextService.handlePerformActionResponse(change);
|
|
15784
|
-
}
|
|
15785
|
-
}, (err) => {
|
|
15786
|
-
console.warn('Could not submit placement change! ', err);
|
|
15787
|
-
});
|
|
15788
|
-
break;
|
|
15789
15885
|
}
|
|
15790
15886
|
}
|
|
15887
|
+
handleEditingItemClick(id, event) {
|
|
15888
|
+
let viewState = this.model()?.viewState;
|
|
15889
|
+
const pendingValues = viewState?.editingSession?.pendingItems;
|
|
15890
|
+
const firstKey = Object.keys(pendingValues)[0];
|
|
15891
|
+
const pendingItems = pendingValues[firstKey];
|
|
15892
|
+
let targetItem = pendingItems[0];
|
|
15893
|
+
if (!targetItem) {
|
|
15894
|
+
console.warn('Selection item is seemingly missing from known items: ', id);
|
|
15895
|
+
return;
|
|
15896
|
+
}
|
|
15897
|
+
if (targetItem.kind === GeoMapItemKind.MARKER) {
|
|
15898
|
+
targetItem.position = undefined;
|
|
15899
|
+
this.update(viewState);
|
|
15900
|
+
}
|
|
15901
|
+
else {
|
|
15902
|
+
const points = targetItem.route.points;
|
|
15903
|
+
const index = points.findIndex((point) => point.latitude === event.coord.y && point.longitude === event.coord.x);
|
|
15904
|
+
if (index !== -1) {
|
|
15905
|
+
points.splice(index, 1);
|
|
15906
|
+
}
|
|
15907
|
+
}
|
|
15908
|
+
this.update(viewState);
|
|
15909
|
+
}
|
|
15910
|
+
handleEditingItemDrag(id, event) {
|
|
15911
|
+
let viewState = this.model()?.viewState;
|
|
15912
|
+
const pendingValues = viewState?.editingSession?.pendingItems;
|
|
15913
|
+
const firstKey = Object.keys(pendingValues)[0];
|
|
15914
|
+
const pendingItems = pendingValues[firstKey];
|
|
15915
|
+
let targetItem = pendingItems[0];
|
|
15916
|
+
if (!targetItem) {
|
|
15917
|
+
console.warn('Selection item is seemingly missing from known items: ', id);
|
|
15918
|
+
return;
|
|
15919
|
+
}
|
|
15920
|
+
if (targetItem.kind === GeoMapItemKind.MARKER) {
|
|
15921
|
+
targetItem.position.latitude = event.dragTo.y;
|
|
15922
|
+
targetItem.position.longitude = event.dragTo.x;
|
|
15923
|
+
}
|
|
15924
|
+
else {
|
|
15925
|
+
const points = targetItem.route.points;
|
|
15926
|
+
const index = points.findIndex((point) => point.latitude === event.startPosition.y && point.longitude === event.startPosition.x);
|
|
15927
|
+
if (index !== -1) {
|
|
15928
|
+
points[index].latitude = event.dragTo.y;
|
|
15929
|
+
points[index].longitude = event.dragTo.x;
|
|
15930
|
+
}
|
|
15931
|
+
targetItem.route.points = points;
|
|
15932
|
+
}
|
|
15933
|
+
this.update(viewState);
|
|
15934
|
+
}
|
|
15791
15935
|
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 }); }
|
|
15792
|
-
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" }] }); }
|
|
15936
|
+
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" }] }); }
|
|
15793
15937
|
}
|
|
15794
15938
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SmartMapComponent, decorators: [{
|
|
15795
15939
|
type: Component,
|
|
15796
|
-
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" }]
|
|
15940
|
+
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" }]
|
|
15797
15941
|
}], ctorParameters: () => [{ type: MapEngine, decorators: [{
|
|
15798
15942
|
type: Inject,
|
|
15799
15943
|
args: [MAP_ENGINE]
|