@regionerne/gis-komponent 0.0.101 → 0.0.102
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.
|
@@ -407,8 +407,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
407
407
|
class LayoutService {
|
|
408
408
|
_map;
|
|
409
409
|
mapResizedSubject = new Subject();
|
|
410
|
+
mapSetSubject = new BehaviorSubject(false);
|
|
410
411
|
set map(value) {
|
|
411
412
|
this._map = value;
|
|
413
|
+
this.mapSetSubject.next(true);
|
|
412
414
|
}
|
|
413
415
|
async keepWidgetInViewPort(dragPosition, widgetName, widgetHeight, widgetWidth, resizedContainerHeight = null, resizedContainerWidth = null) {
|
|
414
416
|
//Expanding or changing map size, make sure the widget stays in viewport
|
|
@@ -1174,43 +1176,47 @@ class LayerSelectorComponent {
|
|
|
1174
1176
|
}
|
|
1175
1177
|
}
|
|
1176
1178
|
async _loadPosition(collapsed) {
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1179
|
+
this._layoutService.mapSetSubject
|
|
1180
|
+
.pipe(filter(mapSet => mapSet === true), take(1))
|
|
1181
|
+
.subscribe(async (mapSet) => {
|
|
1182
|
+
try {
|
|
1183
|
+
// Default height and width when collapsed
|
|
1184
|
+
let widgetHeight = WidgetConstants.collapsedHeight;
|
|
1185
|
+
let widgetWidth = WidgetConstants.collapsedWidth;
|
|
1186
|
+
if (!collapsed) {
|
|
1187
|
+
// Custom height and width when expanded
|
|
1188
|
+
widgetHeight = WidgetConstants.layerSelectorHeight;
|
|
1189
|
+
widgetWidth = WidgetConstants.layerSelectorWidth;
|
|
1190
|
+
}
|
|
1191
|
+
const widgetPositionOptions = {
|
|
1192
|
+
initialPosition: this.profile.layerSelectorInitialPosition,
|
|
1193
|
+
widgetName: this.POSITION_STORAGE_KEY,
|
|
1194
|
+
widgetHeight: widgetHeight,
|
|
1195
|
+
widgetWidth: widgetWidth
|
|
1196
|
+
};
|
|
1197
|
+
const savedPosition = localStorage.getItem(this.POSITION_STORAGE_KEY);
|
|
1198
|
+
if (this._profileService.getProfileVersionChanged() &&
|
|
1199
|
+
this.profile?.layerSelectorInitialPosition) {
|
|
1200
|
+
//Profile version changed in backend, use that
|
|
1201
|
+
this.layerSelectorDragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
|
|
1202
|
+
}
|
|
1203
|
+
else if (savedPosition) {
|
|
1204
|
+
this.layerSelectorDragPosition = JSON.parse(savedPosition);
|
|
1205
|
+
}
|
|
1206
|
+
else if (this.profile?.layerSelectorInitialPosition) {
|
|
1207
|
+
this.layerSelectorDragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
|
|
1208
|
+
}
|
|
1209
|
+
else {
|
|
1210
|
+
// Default position for layer selector
|
|
1211
|
+
this.layerSelectorDragPosition = { x: WidgetConstants.layerSelectorDefaultX, y: WidgetConstants.layerSelectorDefaultY };
|
|
1212
|
+
this._savePosition(this.layerSelectorDragPosition);
|
|
1213
|
+
}
|
|
1203
1214
|
}
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
this.layerSelectorDragPosition = { x:
|
|
1207
|
-
this._savePosition(this.layerSelectorDragPosition);
|
|
1215
|
+
catch (error) {
|
|
1216
|
+
console.error('Error loading position from localStorage:', error);
|
|
1217
|
+
this.layerSelectorDragPosition = { x: 0, y: 0 };
|
|
1208
1218
|
}
|
|
1209
|
-
}
|
|
1210
|
-
catch (error) {
|
|
1211
|
-
console.error('Error loading position from localStorage:', error);
|
|
1212
|
-
this.layerSelectorDragPosition = { x: 0, y: 0 };
|
|
1213
|
-
}
|
|
1219
|
+
});
|
|
1214
1220
|
}
|
|
1215
1221
|
_cacheProfileInfo() {
|
|
1216
1222
|
const cacheItem = { profile: this.profile, cachedLayerGroups: this.filteredLayerGroups.concat(this.filteredBackgroundLayerGroups) };
|
|
@@ -4349,44 +4355,48 @@ class ToolboxComponent {
|
|
|
4349
4355
|
}
|
|
4350
4356
|
}
|
|
4351
4357
|
async _loadPosition(collapsed) {
|
|
4352
|
-
|
|
4353
|
-
|
|
4354
|
-
|
|
4355
|
-
|
|
4356
|
-
|
|
4357
|
-
|
|
4358
|
-
|
|
4359
|
-
|
|
4360
|
-
|
|
4361
|
-
|
|
4362
|
-
|
|
4363
|
-
|
|
4364
|
-
|
|
4365
|
-
|
|
4366
|
-
|
|
4367
|
-
|
|
4368
|
-
|
|
4369
|
-
|
|
4370
|
-
|
|
4371
|
-
|
|
4372
|
-
|
|
4373
|
-
|
|
4374
|
-
|
|
4375
|
-
|
|
4376
|
-
|
|
4377
|
-
|
|
4378
|
-
|
|
4358
|
+
this._layoutService.mapSetSubject
|
|
4359
|
+
.pipe(filter(mapSet => mapSet === true), take(1))
|
|
4360
|
+
.subscribe(async (mapSet) => {
|
|
4361
|
+
try {
|
|
4362
|
+
// Default height and width when collapsed
|
|
4363
|
+
let widgetHeight = WidgetConstants.collapsedHeight;
|
|
4364
|
+
let widgetWidth = WidgetConstants.collapsedWidth;
|
|
4365
|
+
if (!collapsed) {
|
|
4366
|
+
// Custom height and width when expanded
|
|
4367
|
+
widgetHeight = WidgetConstants.toolboxHeight;
|
|
4368
|
+
widgetWidth = WidgetConstants.toolboxWidth;
|
|
4369
|
+
}
|
|
4370
|
+
const container = this.map.getViewport();
|
|
4371
|
+
const widgetPositionOptions = {
|
|
4372
|
+
initialPosition: this.profile.toolboxInitialPosition,
|
|
4373
|
+
widgetName: this._POSITION_STORAGE_KEY,
|
|
4374
|
+
widgetHeight: widgetHeight,
|
|
4375
|
+
widgetWidth: widgetWidth,
|
|
4376
|
+
};
|
|
4377
|
+
const savedPosition = localStorage.getItem(this._POSITION_STORAGE_KEY);
|
|
4378
|
+
if (this._profileService.getProfileVersionChanged() &&
|
|
4379
|
+
this.profile?.toolboxInitialPosition) {
|
|
4380
|
+
//Profile version changed in backend, use that
|
|
4381
|
+
this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
|
|
4382
|
+
}
|
|
4383
|
+
else if (savedPosition) {
|
|
4384
|
+
this.dragPosition = JSON.parse(savedPosition);
|
|
4385
|
+
}
|
|
4386
|
+
else if (this.profile?.toolboxInitialPosition) {
|
|
4387
|
+
this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
|
|
4388
|
+
}
|
|
4389
|
+
else {
|
|
4390
|
+
// Default position for toolbox
|
|
4391
|
+
this.dragPosition = { x: WidgetConstants.toolboxDefaultX, y: WidgetConstants.toolboxDefaultY };
|
|
4392
|
+
this._savePosition();
|
|
4393
|
+
}
|
|
4379
4394
|
}
|
|
4380
|
-
|
|
4381
|
-
|
|
4382
|
-
this.dragPosition = { x:
|
|
4383
|
-
this._savePosition();
|
|
4395
|
+
catch (error) {
|
|
4396
|
+
console.error('Error loading position from localStorage:', error);
|
|
4397
|
+
this.dragPosition = { x: 0, y: 0 };
|
|
4384
4398
|
}
|
|
4385
|
-
}
|
|
4386
|
-
catch (error) {
|
|
4387
|
-
console.error('Error loading position from localStorage:', error);
|
|
4388
|
-
this.dragPosition = { x: 0, y: 0 };
|
|
4389
|
-
}
|
|
4399
|
+
});
|
|
4390
4400
|
}
|
|
4391
4401
|
_savePosition() {
|
|
4392
4402
|
try {
|
|
@@ -4935,43 +4945,47 @@ class ActiveObjectsComponent {
|
|
|
4935
4945
|
this._dialogService.open({ primaryText: 'OK', message: wktString, title: 'WKT for objekt' }).subscribe();
|
|
4936
4946
|
}
|
|
4937
4947
|
async _loadPosition(collapsed) {
|
|
4938
|
-
|
|
4939
|
-
|
|
4940
|
-
|
|
4941
|
-
|
|
4942
|
-
|
|
4943
|
-
|
|
4944
|
-
|
|
4945
|
-
|
|
4946
|
-
|
|
4947
|
-
|
|
4948
|
-
|
|
4949
|
-
|
|
4950
|
-
|
|
4951
|
-
|
|
4952
|
-
|
|
4953
|
-
|
|
4954
|
-
|
|
4955
|
-
|
|
4956
|
-
|
|
4957
|
-
|
|
4958
|
-
|
|
4959
|
-
|
|
4960
|
-
|
|
4961
|
-
|
|
4962
|
-
|
|
4963
|
-
|
|
4948
|
+
this._layoutService.mapSetSubject
|
|
4949
|
+
.pipe(filter(mapSet => mapSet === true), take(1))
|
|
4950
|
+
.subscribe(async (mapSet) => {
|
|
4951
|
+
try {
|
|
4952
|
+
// Default height and width when collapsed
|
|
4953
|
+
let widgetHeight = WidgetConstants.collapsedHeight;
|
|
4954
|
+
let widgetWidth = WidgetConstants.collapsedWidth;
|
|
4955
|
+
if (!collapsed) {
|
|
4956
|
+
// Custom height and width when expanded
|
|
4957
|
+
widgetHeight = WidgetConstants.activeObjectsHeight;
|
|
4958
|
+
widgetWidth = WidgetConstants.activeObjectsWidth;
|
|
4959
|
+
}
|
|
4960
|
+
const widgetPositionOptions = {
|
|
4961
|
+
initialPosition: this.profile.activeObjectsInitialPosition,
|
|
4962
|
+
widgetName: this.POSITION_STORAGE_KEY,
|
|
4963
|
+
widgetHeight: widgetHeight,
|
|
4964
|
+
widgetWidth: widgetWidth
|
|
4965
|
+
};
|
|
4966
|
+
const savedPosition = localStorage.getItem(this.POSITION_STORAGE_KEY);
|
|
4967
|
+
if (this._profileService.getProfileVersionChanged() &&
|
|
4968
|
+
this.profile?.activeObjectsInitialPosition) {
|
|
4969
|
+
//Profile version changed in backend, use that
|
|
4970
|
+
this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
|
|
4971
|
+
}
|
|
4972
|
+
else if (savedPosition) {
|
|
4973
|
+
this.dragPosition = JSON.parse(savedPosition);
|
|
4974
|
+
}
|
|
4975
|
+
else if (this.profile?.activeObjectsInitialPosition) {
|
|
4976
|
+
this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
|
|
4977
|
+
}
|
|
4978
|
+
else {
|
|
4979
|
+
// Default position for active objects
|
|
4980
|
+
this.dragPosition = { x: WidgetConstants.activeObjectsDefaultX, y: WidgetConstants.activeObjectsDefaultY };
|
|
4981
|
+
this._savePosition(this.dragPosition);
|
|
4982
|
+
}
|
|
4964
4983
|
}
|
|
4965
|
-
|
|
4966
|
-
|
|
4967
|
-
this.dragPosition = { x:
|
|
4968
|
-
this._savePosition(this.dragPosition);
|
|
4984
|
+
catch (error) {
|
|
4985
|
+
console.error('Error loading position from localStorage:', error);
|
|
4986
|
+
this.dragPosition = { x: 0, y: 0 };
|
|
4969
4987
|
}
|
|
4970
|
-
}
|
|
4971
|
-
catch (error) {
|
|
4972
|
-
console.error('Error loading position from localStorage:', error);
|
|
4973
|
-
this.dragPosition = { x: 0, y: 0 };
|
|
4974
|
-
}
|
|
4988
|
+
});
|
|
4975
4989
|
}
|
|
4976
4990
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ActiveObjectsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4977
4991
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ActiveObjectsComponent, isStandalone: true, selector: "activeObjects", inputs: { settings: "settings", profile: "profile" }, outputs: { sessionDone: "sessionDone" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"active-objects-wrapper global-wrapper-container\" cdkDrag cdkDragBoundary=\".map-container\"\n [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"onDragEnded($event)\" [class.collapsed]=\"collapsed\">\n <div class=\"drag-handle-active-objects\" cdkDragHandle>\n <mat-icon class=\"active-object-icon\" (click)=\"zoomToAll()\" matTooltip=\"Aktive objekter\"\n [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n format_list_bulleted_add\n </mat-icon>\n\n <div class=\"right-icons\">\n <mat-icon class=\"toggle-icon\" (click)=\"togglePanel()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n\n <div class=\"active-objects-container\">\n @if(!collapsed) {\n <input type=\"range\" min=\"0\" max=\"1\" step=\"0.05\" [(ngModel)]=\"opacity\" (input)=\"updateOpacity()\"\n (mousedown)=\"stopDrag($event)\" (touchstart)=\"stopDrag($event)\" (pointerdown)=\"stopDrag($event)\">\n <div class=\"header-icons\">\n <div class=\"header-left-controls\">\n <span class=\"active-count\">Objekter ({{ activeFeatures.length}})</span>\n <mat-icon class=\"zoom-icon\" [class.zoom-active]=\"isZoomedToAll\" (click)=\"zoomToAll()\"\n matTooltip=\"Zoom til alle\" matTooltipPosition=\"above\">\n fit_screen\n </mat-icon>\n <mat-icon class=\"reset-icon\" (click)=\"reset()\" matTooltip=\"Nulstil\" matTooltipPosition=\"above\">\n replay\n </mat-icon>\n </div>\n\n <div class=\"header-right-controls\">\n @if(!centerPointOk) {\n <mat-icon class=\"warning-icon\" matTooltip=\"Der er ikke noget centerpunkt og det skal der v\u00E6re\"\n [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n warning\n </mat-icon>\n } @else if (allFeaturesOk && endSessionEnabled) { \n @if (endSessionButtonLabel) {\n <button (click)=\"endSession()\" matTooltip=\"Afslut\" [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n {{endSessionButtonLabel}}\n </button>\n } @else {\n <mat-icon class=\"end-session-icon\" (click)=\"endSession()\" matTooltip=\"Afslut\"\n [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n done_all\n </mat-icon>\n }\n }\n </div>\n </div>\n }\n\n @if(!collapsed) {\n <div class=\"active-objects-content\">\n <div class=\"item-list\">\n @for(item of activeFeatures; track item.id) {\n <div class=\"item\" [class.listhighlight]=\"listHighlightedIds.has(item.id)\" [attr.data-id]=\"item.id\">\n <div class=\"item-text\">\n <span (click)=\"highlight(item.id)\" class=\"item-id\">{{item.display}} {{item.area}}</span>\n @if(item.containedMissingIn && item.containedMissingIn.length > 0) {\n <div class=\"item-warning\">\n <mat-icon>error</mat-icon>\n <span>Udenfor {{item.containedMissingIn.join(', ')}}</span>\n </div>\n }\n </div>\n <img \n [src]=\"wktIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"showItemWKT(item.feature)\" \n matTooltip=\"Vis WKT\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Vis WKT\">\n \n\n @if(!item.locked) {\n <mat-icon (click)=\"delete(item.id)\" matTooltip=\"Slet\" [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n delete\n </mat-icon>\n }\n </div>\n }\n </div>\n\n </div>\n }\n </div>\n</div>", styles: [".active-objects-wrapper{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:2;box-shadow:0 2px 10px #0000001a;width:350px;transition:width .3s ease,max-width .3s ease;border-radius:5px!important}.active-objects-wrapper.collapsed .drag-handle-active-objects .active-object-icon{cursor:default!important}.active-objects-wrapper.collapsed .drag-handle-active-objects .right-icons .toggle-icon{cursor:pointer!important}.active-objects-wrapper :not(.collapsed){max-width:350px}.active-objects-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.active-count{color:#fff;margin-bottom:10px}.listhighlight{color:#0af!important;font-weight:700}.item{display:flex;justify-content:space-between;align-items:center;padding:0 14px;border-radius:5px;background:transparent!important;transition:all .2s ease;color:#fff;min-height:40px;cursor:default}.item .item-text{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;gap:4px}.item .item-text .item-warning{display:inline-flex;align-items:center;gap:6px;font-size:11px;width:fit-content;max-width:100%;color:#dfca0e;margin-top:2px;margin-bottom:2px}.item .item-text .item-warning mat-icon{font-size:14px;width:14px;height:14px;color:#dfca0e;margin:0;cursor:default;flex-shrink:0}.item .item-text .item-warning mat-icon:hover{color:#ccb913}.item .item-text .item-warning span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.item .item-id{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item .item-area{color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item mat-icon{cursor:pointer;color:#bdc1c3cc;font-size:18px;width:18px;height:18px;flex-shrink:0;margin-left:8px;transition:color .2s ease,background .2s ease}.item mat-icon:hover{color:#d3d3d3}.highlight-active{color:#6ccb78!important;transition:all .2s ease}.drag-handle-active-objects .active-object-icon{cursor:default!important;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-active-objects .right-icons{display:flex;align-items:center;gap:7px}.drag-handle-active-objects .right-icons .toggle-icon{cursor:pointer!important;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-active-objects .right-icons .toggle-icon:hover{color:#d3d3d3}.active-objects-container{display:flex;flex-direction:column;width:100%;transition:all .3s ease;cursor:default;box-sizing:border-box;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.active-objects-container .panel-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;cursor:default;background:color-mix(in srgb,#000 70%,transparent);border-bottom:1px solid rgba(255,255,255,.1)}.active-objects-container .collapsed-title{color:#fff;font-weight:600;font-size:12px;padding:8px 4px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;white-space:nowrap;text-align:center}.active-objects-container .collapsed-title:hover{color:#1976d2}.active-objects-container input[type=range]{width:95%;height:4px;margin:8px auto;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}.active-objects-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}.active-objects-container input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}.active-objects-container input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}.active-objects-container input[type=range]::-moz-range-thumb:hover{background:#6ccb78}.header-icons{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:5px 10px!important}.header-icons .header-left-controls,.header-icons .header-right-controls{display:flex;align-items:center;gap:8px}.header-icons .header-right-controls button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 12px;height:26px;min-width:56px;max-width:150px;background:linear-gradient(135deg,#6ccb781f,#6ccb780f);border:1px solid rgba(108,203,120,.55);border-radius:5px;color:#6ccb78;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;outline:none;box-shadow:0 0 #6ccb7800,inset 0 1px #ffffff0f;transition:background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,transform .12s ease}.header-icons .header-right-controls button mat-icon{font-size:14px;width:14px;height:14px;flex-shrink:0;transition:transform .3s ease;margin:0}.header-icons .header-right-controls button:hover{background:linear-gradient(135deg,#6ccb7838,#6ccb781a);border-color:#6ccb78e6;color:#88d994}.header-icons .header-right-controls button:hover mat-icon{transform:scale(1.15)}.header-icons .header-right-controls button:active{background:#6ccb782e;border-color:#6ccb78;color:#fff;box-shadow:0 0 6px #6ccb7833,inset 0 2px 4px #0000004d;transform:translateY(0)}.header-icons .header-right-controls button:focus-visible{outline:2px solid rgba(108,203,120,.6);outline-offset:2px}.header-icons .header-right-controls .end-session-icon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:5px;color:#fff;cursor:pointer;transition:color .2s ease,background .2s ease,box-shadow .2s ease,transform .12s ease}.header-icons .header-right-controls .end-session-icon:hover{color:#d3d3d3!important}.header-icons .zoom-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .zoom-icon:hover{color:#d3d3d3}.header-icons .zoom-icon.zoom-active{color:#d3d3d3!important}.header-icons .reset-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .reset-icon:hover{color:#d3d3d3}.header-icons .warning-icon{color:#6ccb78;font-size:18px;cursor:help}.header-icons .end-session-icon{cursor:pointer;color:#6ccb78;font-size:18px;transition:all .2s ease}.header-icons .end-session-icon:hover{color:#d3d3d3}.active-objects-content{display:block;width:100%;max-height:278px;overflow:auto;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.active-objects-content::-webkit-scrollbar{width:12px}.active-objects-content::-webkit-scrollbar-track{background:#757474;border-radius:8px}.active-objects-content::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.active-objects-content::-webkit-scrollbar-thumb:hover{background:#0f1012}.active-objects-content::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.active-objects-content::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.active-objects-content::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.active-objects-content .zoom-icon{color:#fff;font-size:18px;transition:all .2s ease}.active-objects-content .zoom-icon:hover{color:#6ccb78}.active-objects-content .zoom-icon.zoom-active{color:#6ccb78!important}mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%}mat-expansion-panel:last-child{border-bottom:none}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-content{display:flex;justify-content:space-between;align-items:center;color:#fff}mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0}.item-list{display:flex;flex-direction:column}@media (max-width: 768px){.active-objects-wrapper{right:.5em;top:8em;width:280px}.item{padding:6px 10px}}@media (max-width: 480px){.active-objects-wrapper{right:.5em;left:.5em;width:auto}.item-list{max-height:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
|
|
@@ -5180,43 +5194,47 @@ class MapSearchComponent {
|
|
|
5180
5194
|
}
|
|
5181
5195
|
}
|
|
5182
5196
|
async _loadPosition(collapsed) {
|
|
5183
|
-
|
|
5184
|
-
|
|
5185
|
-
|
|
5186
|
-
|
|
5187
|
-
|
|
5188
|
-
|
|
5189
|
-
|
|
5190
|
-
|
|
5191
|
-
|
|
5192
|
-
|
|
5193
|
-
|
|
5194
|
-
|
|
5195
|
-
|
|
5196
|
-
|
|
5197
|
-
|
|
5198
|
-
|
|
5199
|
-
|
|
5200
|
-
|
|
5201
|
-
|
|
5202
|
-
|
|
5203
|
-
|
|
5204
|
-
|
|
5205
|
-
|
|
5206
|
-
|
|
5207
|
-
|
|
5208
|
-
|
|
5197
|
+
this._layoutService.mapSetSubject
|
|
5198
|
+
.pipe(filter(mapSet => mapSet === true), take(1))
|
|
5199
|
+
.subscribe(async (mapSet) => {
|
|
5200
|
+
try {
|
|
5201
|
+
// Default height and width when collapsed
|
|
5202
|
+
let widgetHeight = WidgetConstants.collapsedHeight;
|
|
5203
|
+
let widgetWidth = WidgetConstants.collapsedWidth;
|
|
5204
|
+
if (!collapsed) {
|
|
5205
|
+
// Custom height and width when expanded
|
|
5206
|
+
widgetHeight = WidgetConstants.searchHeight;
|
|
5207
|
+
widgetWidth = WidgetConstants.searchWidth;
|
|
5208
|
+
}
|
|
5209
|
+
const widgetPositionOptions = {
|
|
5210
|
+
initialPosition: this.profile.searchInitialPosition,
|
|
5211
|
+
widgetName: this.POSITION_STORAGE_KEY,
|
|
5212
|
+
widgetHeight: widgetHeight,
|
|
5213
|
+
widgetWidth: widgetWidth
|
|
5214
|
+
};
|
|
5215
|
+
const savedPosition = localStorage.getItem(this.POSITION_STORAGE_KEY);
|
|
5216
|
+
if (this._profileService.getProfileVersionChanged() &&
|
|
5217
|
+
this.profile?.searchInitialPosition) {
|
|
5218
|
+
//Profile version changed in backend, use that
|
|
5219
|
+
this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
|
|
5220
|
+
}
|
|
5221
|
+
else if (savedPosition) {
|
|
5222
|
+
this.dragPosition = JSON.parse(savedPosition);
|
|
5223
|
+
}
|
|
5224
|
+
else if (this.profile && this.profile.searchInitialPosition) {
|
|
5225
|
+
this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
|
|
5226
|
+
}
|
|
5227
|
+
else {
|
|
5228
|
+
// Default position for search
|
|
5229
|
+
this.dragPosition = { x: WidgetConstants.searchDefaultX, y: WidgetConstants.searchDefaultY };
|
|
5230
|
+
this._savePosition(this.dragPosition);
|
|
5231
|
+
}
|
|
5209
5232
|
}
|
|
5210
|
-
|
|
5211
|
-
|
|
5212
|
-
this.dragPosition = { x:
|
|
5213
|
-
this._savePosition(this.dragPosition);
|
|
5233
|
+
catch (error) {
|
|
5234
|
+
console.error('Error loading position from localStorage:', error);
|
|
5235
|
+
this.dragPosition = { x: 0, y: 0 };
|
|
5214
5236
|
}
|
|
5215
|
-
}
|
|
5216
|
-
catch (error) {
|
|
5217
|
-
console.error('Error loading position from localStorage:', error);
|
|
5218
|
-
this.dragPosition = { x: 0, y: 0 };
|
|
5219
|
-
}
|
|
5237
|
+
});
|
|
5220
5238
|
}
|
|
5221
5239
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MapSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5222
5240
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MapSearchComponent, isStandalone: true, selector: "lib-map-search", inputs: { profile: "profile" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"search-container global-wrapper-container\" \n cdkDrag \n cdkDragBoundary=\".map-container\" \n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"onDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n <div class=\"drag-handle\" cdkDragHandle>\n <mat-icon \n class=\"icon-left\" \n matTooltip=\"S\u00F8g\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n manage_search\n </mat-icon>\n <div class=\"right-icons\"> \n <mat-icon class=\"toggle-icon\" (click)=\"toggleSearch()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n\n <div class=\"search-content\" *ngIf=\"!collapsed\">\n <label class=\"search-label\">S\u00F8g</label>\n <mat-form-field appearance=\"outline\" class=\"search-field\">\n <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\n <input\n type=\"text\"\n matInput\n [(ngModel)]=\"searchAddress\"\n [matAutocomplete]=\"auto\"\n (input)=\"filterResults()\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displaySearchFn\">\n <ng-container *ngFor=\"let result of filteredResults\" >\n <mat-option disabled class=\"result-title\">\n {{ result.title }} ({{result.items.length}}\n <span *ngIf=\"result.total\"> af {{result.total }}</span>)\n </mat-option>\n <mat-option *ngFor=\"let item of result.items\" [value]=\"item\" class=\"custom-option\"\n (mouseenter)=\"highlight(item.wkt, $event)\">\n <div class=\"item-container\">\n <span class=\"item-header\">{{item.header}}</span>\n </div>\n </mat-option>\n </ng-container>\n </mat-autocomplete>\n </mat-form-field>\n </div>\n</div>", styles: [".search-container{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:2;max-width:550px;min-width:48px;border-radius:5px;transition:width .3s ease,max-width .3s ease}.search-container.collapsed .drag-handle{box-sizing:border-box}.search-container.collapsed .drag-handle .icon-left{margin-left:3px}.search-container.cdk-drag-dragging{opacity:.8;cursor:grab}@media (max-width: 768px){.search-container{left:2em;top:1.5em;max-width:450px}.search-container.collapsed{width:90px!important;min-width:90px!important;max-width:90px!important}}@media (max-width: 480px){.search-container{left:1.5em;right:1.5em;max-width:calc(100vw - 3em)}.search-container.collapsed{width:90px!important;min-width:90px!important;max-width:90px!important}}.compact-icon.custom-image-icon{padding:4px;background:none;border:1px solid rgba(255,255,255,.2)}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}.compact-icon.custom-image-icon.active{background:linear-gradient(147.38deg,#0ea5e9,#075985);border-color:transparent;box-shadow:0 4px 12px #0ea5e966}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}.compact-icon.custom-image-icon:hover:not(.active){background:color-mix(in srgb,#000 70%,transparent);border-color:#0ea5e9;box-shadow:0 2px 8px #0ea5e94d}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.drag-handle .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.search-content{display:flex;flex-direction:column;transition:all .3s ease;box-sizing:border-box;border-radius:0 0 5px 5px;padding:8px 12px 4px;gap:4px}.search-label{color:#fff}.compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.compact-icon.custom-image-icon{background:none;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer}.toggle-icon{cursor:pointer!important;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toggle-icon:hover{color:#d3d3d3}.search-field{width:100%;min-width:350px;flex:1}.search-field .search-icon{color:#fff}.search-field ::ng-deep .mat-mdc-form-field-label{color:#fff!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{color:#fff!important}::ng-deep .mat-mdc-autocomplete-panel{border-radius:5px!important;background:#4c4d51!important;box-shadow:0 8px 24px #00000026!important;overflow-y:auto!important;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar{width:12px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;overflow-x:hidden}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover{background-color:#ffffff1a!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected{background-color:#ffffff1a!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;width:100%;opacity:1!important}.search-result-option{display:flex;flex-direction:column;gap:8px}.result-title{font-weight:600;color:#bdc1c3cc!important}.item-container{display:flex;align-items:center;justify-content:space-between;width:100%}.item-container .item-header{color:#fff!important;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.search-result-item{display:flex;align-items:center;justify-content:space-between;padding:6px 4px;border-radius:5px;margin-left:4px;transition:all .6s ease}.search-result-item:hover{color:#f4f4f5;background:#ffffff1a}.search-result-item .item-header{font-size:14px;color:#fff!important;flex:1;font-weight:500}::ng-deep .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{color:#fff!important}@media (max-width: 768px){.search-container{left:2em;top:1.5em;max-width:450px}.search-container.collapsed{width:88px;min-width:88px;max-width:88px}}@media (max-width: 480px){.search-container{left:1.5em;right:1.5em;max-width:calc(100vw - 3em)}.search-container.collapsed{width:40px;min-width:40px;max-width:40px;right:auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
|
|
@@ -5319,43 +5337,47 @@ class LegendsListComponent {
|
|
|
5319
5337
|
}
|
|
5320
5338
|
}
|
|
5321
5339
|
async _loadPosition(collapsed) {
|
|
5322
|
-
|
|
5323
|
-
|
|
5324
|
-
|
|
5325
|
-
|
|
5326
|
-
|
|
5327
|
-
|
|
5328
|
-
|
|
5329
|
-
|
|
5330
|
-
|
|
5331
|
-
|
|
5332
|
-
|
|
5333
|
-
|
|
5334
|
-
|
|
5335
|
-
|
|
5336
|
-
|
|
5337
|
-
|
|
5338
|
-
|
|
5339
|
-
|
|
5340
|
-
|
|
5341
|
-
|
|
5342
|
-
|
|
5343
|
-
|
|
5344
|
-
|
|
5345
|
-
|
|
5346
|
-
|
|
5347
|
-
|
|
5340
|
+
this._layoutService.mapSetSubject
|
|
5341
|
+
.pipe(filter(mapSet => mapSet === true), take(1))
|
|
5342
|
+
.subscribe(async (mapSet) => {
|
|
5343
|
+
try {
|
|
5344
|
+
// Default height and width when collapsed
|
|
5345
|
+
let widgetHeight = WidgetConstants.collapsedHeight;
|
|
5346
|
+
let widgetWidth = WidgetConstants.collapsedWidth;
|
|
5347
|
+
if (!collapsed) {
|
|
5348
|
+
// Custom height and width when expanded
|
|
5349
|
+
widgetHeight = WidgetConstants.legendsHeight;
|
|
5350
|
+
widgetWidth = WidgetConstants.legendsWidth;
|
|
5351
|
+
}
|
|
5352
|
+
const widgetPositionOptions = {
|
|
5353
|
+
initialPosition: this.profile.legendsListInitialPosition,
|
|
5354
|
+
widgetName: this.POSITION_STORAGE_KEY,
|
|
5355
|
+
widgetHeight: widgetHeight,
|
|
5356
|
+
widgetWidth: widgetWidth
|
|
5357
|
+
};
|
|
5358
|
+
const savedPosition = localStorage.getItem(this.POSITION_STORAGE_KEY);
|
|
5359
|
+
if (this._profileService.getProfileVersionChanged() &&
|
|
5360
|
+
this.profile?.legendsListInitialPosition) {
|
|
5361
|
+
//Profile version changed in backend, use that
|
|
5362
|
+
this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
|
|
5363
|
+
}
|
|
5364
|
+
else if (savedPosition) {
|
|
5365
|
+
this.dragPosition = JSON.parse(savedPosition);
|
|
5366
|
+
}
|
|
5367
|
+
else if (this.profile?.legendsListInitialPosition) {
|
|
5368
|
+
this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
|
|
5369
|
+
}
|
|
5370
|
+
else {
|
|
5371
|
+
// Default position for legends list
|
|
5372
|
+
this.dragPosition = { x: WidgetConstants.legendsDefaultX, y: WidgetConstants.legendsDefaultY };
|
|
5373
|
+
this._savePosition(this.dragPosition);
|
|
5374
|
+
}
|
|
5348
5375
|
}
|
|
5349
|
-
|
|
5350
|
-
|
|
5351
|
-
this.dragPosition = { x:
|
|
5352
|
-
this._savePosition(this.dragPosition);
|
|
5376
|
+
catch (error) {
|
|
5377
|
+
console.error('Error loading legends list position from localStorage:', error);
|
|
5378
|
+
this.dragPosition = { x: 0, y: 0 };
|
|
5353
5379
|
}
|
|
5354
|
-
}
|
|
5355
|
-
catch (error) {
|
|
5356
|
-
console.error('Error loading legends list position from localStorage:', error);
|
|
5357
|
-
this.dragPosition = { x: 0, y: 0 };
|
|
5358
|
-
}
|
|
5380
|
+
});
|
|
5359
5381
|
}
|
|
5360
5382
|
_setFilteredLegends() {
|
|
5361
5383
|
if (!this.profile?.id) {
|
|
@@ -5647,8 +5669,11 @@ class FastSwitchSelectorComponent {
|
|
|
5647
5669
|
config = inject(GISKOMPONENT_CONFIG);
|
|
5648
5670
|
map;
|
|
5649
5671
|
profile;
|
|
5650
|
-
collapsed = true;
|
|
5651
5672
|
selectedLayer;
|
|
5673
|
+
nextLayer;
|
|
5674
|
+
selectedLayerIndex = 0;
|
|
5675
|
+
nextLayerIndex = 0;
|
|
5676
|
+
nextLayerTooltip = '';
|
|
5652
5677
|
layerGroup = [];
|
|
5653
5678
|
fastSwitchLayers = [];
|
|
5654
5679
|
_baseUrl = this.config.apiBaseUrl;
|
|
@@ -5664,24 +5689,30 @@ class FastSwitchSelectorComponent {
|
|
|
5664
5689
|
}
|
|
5665
5690
|
else {
|
|
5666
5691
|
this._layerHelper.toggleLayerInMap(this.map, layer.id, true);
|
|
5692
|
+
this.nextLayerTooltip = `Vis "${this.layerGroup[1]?.name}" som baggrundskort`;
|
|
5667
5693
|
}
|
|
5668
5694
|
});
|
|
5669
5695
|
if (this.layerGroup.length > 0)
|
|
5670
5696
|
this.selectedLayer = this.layerGroup[0];
|
|
5697
|
+
if (this.layerGroup.length > 1)
|
|
5698
|
+
this.nextLayer = this.layerGroup[1];
|
|
5671
5699
|
});
|
|
5672
5700
|
}
|
|
5673
5701
|
}
|
|
5674
|
-
|
|
5675
|
-
this.
|
|
5676
|
-
|
|
5677
|
-
layerChanged(layer) {
|
|
5678
|
-
// Turn off current layer
|
|
5679
|
-
if (this.selectedLayer?.id)
|
|
5702
|
+
toggleNextLayer() {
|
|
5703
|
+
if (this.selectedLayer?.id) {
|
|
5704
|
+
// Turn off current layer
|
|
5680
5705
|
this._layerHelper.toggleLayerInMap(this.map, this.selectedLayer?.id, false);
|
|
5681
|
-
|
|
5682
|
-
|
|
5683
|
-
|
|
5684
|
-
|
|
5706
|
+
this.selectedLayerIndex = this.selectedLayerIndex < (this.layerGroup.length - 1) ?
|
|
5707
|
+
this.selectedLayerIndex + 1 : 0; // Go back to first element when array is traversed
|
|
5708
|
+
this.selectedLayer = this.layerGroup[this.selectedLayerIndex];
|
|
5709
|
+
this.nextLayerIndex = this.selectedLayerIndex < (this.layerGroup.length - 1) ?
|
|
5710
|
+
this.selectedLayerIndex + 1 : 0; // Go back to first element when array is traversed
|
|
5711
|
+
this.nextLayerTooltip = `Vis "${this.layerGroup[this.nextLayerIndex]?.name}" som baggrundskort`;
|
|
5712
|
+
this.nextLayer = this.layerGroup[this.nextLayerIndex];
|
|
5713
|
+
// Turn on new layer
|
|
5714
|
+
this._layerHelper.toggleLayerInMap(this.map, this.selectedLayer.id, true);
|
|
5715
|
+
}
|
|
5685
5716
|
}
|
|
5686
5717
|
_getImageUrl(fileName) {
|
|
5687
5718
|
return `${this._baseUrl}/api/image/${fileName}`;
|
|
@@ -5727,12 +5758,12 @@ class FastSwitchSelectorComponent {
|
|
|
5727
5758
|
}));
|
|
5728
5759
|
}
|
|
5729
5760
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FastSwitchSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5730
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FastSwitchSelectorComponent, isStandalone: true, selector: "lib-fast-switch-selector", inputs: { map: "map", profile: "profile" }, usesOnChanges: true, ngImport: i0, template: "@if (layerGroup && layerGroup.length > 0) {\n <div class=\"fast-switch-body-wrapper\"
|
|
5761
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FastSwitchSelectorComponent, isStandalone: true, selector: "lib-fast-switch-selector", inputs: { map: "map", profile: "profile" }, usesOnChanges: true, ngImport: i0, template: "@if (layerGroup && layerGroup.length > 0) {\n <div class=\"fast-switch-body-wrapper\" >\n @if (selectedLayer?.imageUrl) {\n <div class=\"fast-switch-collapsed\">\n <div class=\"legend\">\n <img [src]=\"nextLayer?.imageUrl\" \n class=\"legend-thumbnail\" \n (click)=\"toggleNextLayer()\"\n [matTooltip]=\"nextLayerTooltip\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"after\"\n [alt]=\"nextLayerTooltip\"/>\n </div>\n </div>\n }\n </div>\n}", styles: [".fast-switch-body-wrapper{position:absolute;bottom:100px;left:20px}.fast-switch-body-wrapper .fast-switch-collapsed{width:100px;max-height:100px}.fast-switch-body-wrapper .fast-switch-expanded{width:145px;max-height:610px;position:absolute;bottom:0}.fast-switch-body-wrapper .legends-list-body{bottom:0}.fast-switch-body-wrapper .legend-thumbnail{width:100px;height:100px;border:5px solid white;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
|
|
5731
5762
|
}
|
|
5732
5763
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FastSwitchSelectorComponent, decorators: [{
|
|
5733
5764
|
type: Component,
|
|
5734
5765
|
args: [{ selector: 'lib-fast-switch-selector', imports: [MatFormFieldModule, CommonModule, MatIconModule, FormsModule, DragDropModule,
|
|
5735
|
-
MatExpansionModule, MatInputModule, MatTooltipModule], template: "@if (layerGroup && layerGroup.length > 0) {\n <div class=\"fast-switch-body-wrapper\"
|
|
5766
|
+
MatExpansionModule, MatInputModule, MatTooltipModule], template: "@if (layerGroup && layerGroup.length > 0) {\n <div class=\"fast-switch-body-wrapper\" >\n @if (selectedLayer?.imageUrl) {\n <div class=\"fast-switch-collapsed\">\n <div class=\"legend\">\n <img [src]=\"nextLayer?.imageUrl\" \n class=\"legend-thumbnail\" \n (click)=\"toggleNextLayer()\"\n [matTooltip]=\"nextLayerTooltip\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"after\"\n [alt]=\"nextLayerTooltip\"/>\n </div>\n </div>\n }\n </div>\n}", styles: [".fast-switch-body-wrapper{position:absolute;bottom:100px;left:20px}.fast-switch-body-wrapper .fast-switch-collapsed{width:100px;max-height:100px}.fast-switch-body-wrapper .fast-switch-expanded{width:145px;max-height:610px;position:absolute;bottom:0}.fast-switch-body-wrapper .legends-list-body{bottom:0}.fast-switch-body-wrapper .legend-thumbnail{width:100px;height:100px;border:5px solid white;border-radius:6px}\n"] }]
|
|
5736
5767
|
}], propDecorators: { map: [{
|
|
5737
5768
|
type: Input
|
|
5738
5769
|
}], profile: [{
|
|
@@ -5824,7 +5855,7 @@ class GisKomponentComponent {
|
|
|
5824
5855
|
}
|
|
5825
5856
|
const layers = allLayergroups.map((lg) => new OLLayerGroup({
|
|
5826
5857
|
layers: lg.layers
|
|
5827
|
-
.filter(layer => layer.activeInSelector)
|
|
5858
|
+
.filter(layer => layer.activeInSelector || layer.visible) // # bug 286
|
|
5828
5859
|
.sort((a, b) => a.sortOrder - b.sortOrder)
|
|
5829
5860
|
.map((l, index) => this._mapLayer(l, capabilityObject, 'EPSG:25832', lg.id, lg.fastSwitchLayerGroup === true ? -1 : index)), // for now, we default to EPSG:25832.
|
|
5830
5861
|
properties: { id: lg.id }
|