@loxia/mst-viewer 8.1.3-202511241327 → 8.1.3-202511261647

package/fesm2022/loxia-mst-viewer.mjs

@@ -3,8 +3,8 @@ import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, Output, Input, Component, Injectable, ChangeDetectionStrategy, ViewChild, InjectionToken, Optional, Inject, SkipSelf, NgModule, HostListener } from '@angular/core';
 import * as i7 from '@loxia/imx-viewer';
-import { SelectieInfo, PopoverInfo, Point, SvgInfo, ImxViewerComponent, ImxViewerModule } from '@loxia/imx-viewer';
-import * as i4 from '@loxia/rijwegen';
+import { PopoverInfo, Point, SvgInfo, ImxViewerComponent, SelectieInfo, ImxViewerModule } from '@loxia/imx-viewer';
+import * as i3 from '@loxia/rijwegen';
 import { JsJavaUtil, RijwegenModule } from '@loxia/rijwegen';
 import * as i1$2 from '@ngrx/effects';
 import { createEffect, ofType, EffectsModule } from '@ngrx/effects';
@@ -17,7 +17,7 @@ import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpContext, HttpParams } from '@angular/common/http';
 import { __decorate } from 'tslib';
 import * as i1$1 from '@ngx-resource/core';
-import { Resource, ResourceAction, ResourceParams } from '@ngx-resource/core';
+import { Resource, ResourceAction, ResourceParams, ResourceModel } from '@ngx-resource/core';
 
 class Message {
     constructor(severity, text, timeout = 0) {
@@ -246,6 +246,8 @@ const LAAD_EN_VERWERK_SIGNALERINGSBEELD_INFO = '[mst] laadEnVerwerkSignaleringsb
 const FOCUS_OP_RITDEEL = '[mst] focusOpRitdeel';
 const FOCUS_OP_IDS = '[mst] focusOpIds';
 const BEPAAL_SB_INFOS = '[mst] bepaalSbInfos';
+const TRIGGER_SELECTIE_UPDATE = '[mst] TriggerSelectieUpdate';
+const SET_SELECTIE_INFOS = '[mst] SetSelectieInfos';
 const setEditable = createAction(SET_EDITABLE, (editable) => ({ editable }));
 const SetRitSelectieIds = createAction(SET_RIT_SELECTIE_IDS, (ids) => ({ ids }));
 const SetGeplandeActies = createAction(SET_GEPLANDE_ACTIES, (geplandeActiesMap) => ({ geplandeActiesMap }));
@@ -289,6 +291,8 @@ const navigeerBuitenRit = createAction(NAVIGEER_BUITEN_RIT, (randPuic) => ({ ran
 const focusOpRitdeel = createAction(FOCUS_OP_RITDEEL, (ritdeel, paginationSize, iaVersieInfo) => ({ ritdeel, paginationSize, iaVersieInfo }));
 const focusOpIds = createAction(FOCUS_OP_IDS, (puics) => ({ puics }));
 const bepaalSbInfos = createAction(BEPAAL_SB_INFOS, (rit, ongeplandeActies, iaVersie, ritGewijzigdToegestaan, paginationSize) => ({ rit, ongeplandeActies, iaVersie, ritGewijzigdToegestaan, paginationSize }));
+const svgUpdateFinished = createAction(TRIGGER_SELECTIE_UPDATE);
+const setSelectieInfos = createAction(SET_SELECTIE_INFOS, (selectieInfos) => ({ selectieInfos }));
 // do not export return value
 const mstActions = union({
     setEditable,
@@ -326,7 +330,9 @@ const mstActions = union({
     ClearProgress,
     BewegingInvoegen,
     KeurAlleActiesGoed,
-    UpdateRit
+    UpdateRit,
+    svgUpdateFinished,
+    setSelectieInfos
 });
 
 /**
@@ -678,32 +684,11 @@ class ViewerControlService {
     constructor(store, bewegingUtils) {
         this.store = store;
         this.bewegingUtils = bewegingUtils;
-        this.subscriptions = new Subscription();
         this.valideRit$ = new BehaviorSubject(false);
         this.printing$ = new BehaviorSubject(false);
         this.sideNavOpen = false;
         this.sideNavOpen$ = new BehaviorSubject(this.sideNavOpen);
-        this.selectieInfos = [];
         this.origineelTreinPad = {};
-        this.subscriptions.add(combineLatest([
-            store.select('ritSelectieIds'),
-            store.select('actieOpRitSelectieIds'),
-            store.select('ongeplandeActieSelectieIds'),
-            store.select('gebrokenRitSelectieIds'),
-            store.select('alternatievenSelectieIds'),
-            store.select('beginSeinSelectieIds'),
-            store.select('eindSeinSelectieIds')
-        ]).subscribe(([rit, actieOpRitSelectieIds, ongeplandeActieSelectieIds, gebrokenrit, alternatieven, begin, eind]) => {
-            const selectie = [];
-            selectie.push(new SelectieInfo(rit, 'rit'));
-            selectie.push(new SelectieInfo(actieOpRitSelectieIds, 'actieoprit'));
-            selectie.push(new SelectieInfo(ongeplandeActieSelectieIds, 'ongeplandeActie'));
-            selectie.push(new SelectieInfo(gebrokenrit, 'gebrokenrit'));
-            selectie.push(new SelectieInfo(alternatieven, 'alternatieveRoute'));
-            selectie.push(new SelectieInfo(begin, 'zigzagVan'));
-            selectie.push(new SelectieInfo(eind, 'zigzagNaar'));
-            this.selectieInfos = selectie;
-        }));
     }
     toggleSideNavVisible() {
         this.sideNavOpen = !this.sideNavOpen;
@@ -2289,7 +2274,189 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     type: Optional
                 }] }] });
 
-const APIS = [AppConfigControllerService, BewegingControllerService, Class0BuildPropertiesService, ConnectorControllerService, LogControllerService, P21ControllerService, SbControllerService];
+/**
+ * MST
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/* tslint:disable:no-unused-variable member-ordering */
+class SvgControllerService {
+    constructor(httpClient, basePath, configuration) {
+        this.httpClient = httpClient;
+        this.basePath = 'http://localhost:8080/mst';
+        this.defaultHeaders = new HttpHeaders();
+        this.configuration = new Configuration();
+        if (configuration) {
+            this.configuration = configuration;
+        }
+        if (typeof this.configuration.basePath !== 'string') {
+            if (Array.isArray(basePath) && basePath.length > 0) {
+                basePath = basePath[0];
+            }
+            if (typeof basePath !== 'string') {
+                basePath = this.basePath;
+            }
+            this.configuration.basePath = basePath;
+        }
+        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
+    }
+    // @ts-ignore
+    addToHttpParams(httpParams, value, key) {
+        if (typeof value === "object" && value instanceof Date === false) {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value);
+        }
+        else {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
+        }
+        return httpParams;
+    }
+    addToHttpParamsRecursive(httpParams, value, key) {
+        if (value == null) {
+            return httpParams;
+        }
+        if (typeof value === "object") {
+            if (Array.isArray(value)) {
+                value.forEach(elem => httpParams = this.addToHttpParamsRecursive(httpParams, elem, key));
+            }
+            else if (value instanceof Date) {
+                if (key != null) {
+                    httpParams = httpParams.append(key, value.toISOString().substring(0, 10));
+                }
+                else {
+                    throw Error("key may not be null if value is Date");
+                }
+            }
+            else {
+                Object.keys(value).forEach(k => httpParams = this.addToHttpParamsRecursive(httpParams, value[k], key != null ? `${key}.${k}` : k));
+            }
+        }
+        else if (key != null) {
+            httpParams = httpParams.append(key, value);
+        }
+        else {
+            throw Error("key may not be null if value is not object or array");
+        }
+        return httpParams;
+    }
+    getSvgInfo(iaVersie, signaleringsbeeldDto, observe = 'body', reportProgress = false, options) {
+        if (iaVersie === null || iaVersie === undefined) {
+            throw new Error('Required parameter iaVersie was null or undefined when calling getSvgInfo.');
+        }
+        if (signaleringsbeeldDto === null || signaleringsbeeldDto === undefined) {
+            throw new Error('Required parameter signaleringsbeeldDto was null or undefined when calling getSvgInfo.');
+        }
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+        let localVarTransferCache = options && options.transferCache;
+        if (localVarTransferCache === undefined) {
+            localVarTransferCache = true;
+        }
+        // to determine the Content-Type header
+        const consumes = [
+            'application/json'
+        ];
+        const httpContentTypeSelected = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Content-Type', httpContentTypeSelected);
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/rest/${this.configuration.encodeParam({ name: "iaVersie", value: iaVersie, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined })}/svgs`;
+        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            body: signaleringsbeeldDto,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            transferCache: localVarTransferCache,
+            reportProgress: reportProgress
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SvgControllerService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH, optional: true }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SvgControllerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SvgControllerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [BASE_PATH]
+                }] }, { type: Configuration, decorators: [{
+                    type: Optional
+                }] }] });
+
+const APIS = [AppConfigControllerService, BewegingControllerService, Class0BuildPropertiesService, ConnectorControllerService, LogControllerService, P21ControllerService, SbControllerService, SvgControllerService];
+
+/**
+ * MST
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+/**
+ * MST
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+/**
+ * MST
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
 
 /**
  * MST
@@ -2303,6 +2470,16 @@ const APIS = [AppConfigControllerService, BewegingControllerService, Class0Build
  * Do not edit the class manually.
  */
 
+var Sein;
+(function (Sein) {
+    Sein.DirectionEnum = {
+        LeftToRight: 'LEFT_TO_RIGHT',
+        RightToLeft: 'RIGHT_TO_LEFT',
+        TopToBottom: 'TOP_TO_BOTTOM',
+        BottomToTop: 'BOTTOM_TO_TOP'
+    };
+})(Sein || (Sein = {}));
+
 /**
  * MST
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
@@ -2402,9 +2579,8 @@ class LoggingHelper {
     maakLogDTO(melding, actie) {
         return combineLatest([
             this.store.select('algemeneRitInfoDto'),
-            this.store.select('iaVersie'),
-            this.store.select('visibleSbInfoDtos')
-        ]).pipe(take(1), map(([algemeneRitInfoDto, iaVersie, visibleSbInfoDtos]) => {
+            this.store.select('iaVersie')
+        ]).pipe(take(1), map(([algemeneRitInfoDto, iaVersie]) => {
             let actieDto = null;
             if (actie) {
                 actieDto = {
@@ -2427,10 +2603,19 @@ class LoggingHelper {
                 meldingMessage: melding.meldingMessage,
                 actieDto,
                 algemeneRitInfoDto,
-                sbinfoDtos: visibleSbInfoDtos
+                sbinfoDtos: this.getSbInfoDtos()
             };
         }));
     }
+    getSbInfoDtos() {
+        const sbInfoDtos = [];
+        this.store.select('visibleSbInfoDtos').pipe(take(1)).subscribe(dtos => {
+            dtos.forEach(d => {
+                sbInfoDtos.push(d);
+            });
+        });
+        return sbInfoDtos;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: LoggingHelper, deps: [{ token: i2$1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: LoggingHelper }); }
 }
@@ -3244,7 +3429,7 @@ class ViewerControlsComponent {
         }
     }
     showGoedkeuren() {
-        return this.editable && this.viewerControlsService.selectieInfos.length !== 0;
+        return this.editable;
     }
     goedkeurenClick() {
         this.store.select('ritDelen').pipe(filter(ritdelen => !!ritdelen), tap(ritDelen => {
@@ -3383,6 +3568,7 @@ class SvgVisualisatieComponent {
         this.svgInfos$ = this.store.select('svgInfos');
         this.popoverInfos = [];
         this.clickableIds = [];
+        this.selectieInfos$ = this.store.select('selectieInfos');
         this.rightClickableIds = [];
         this.contextMenuActions = [];
         this.contextMenuStyle = { display: 'none' };
@@ -3614,11 +3800,11 @@ class SvgVisualisatieComponent {
         return topoElementen.map(e => e.getPuic());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SvgVisualisatieComponent, deps: [{ token: i2$1.Store }, { token: ViewerControlService }, { token: ActieHelper }, { token: SignaleringsBeeldManagerService }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: SvgVisualisatieComponent, selector: "svg-visualisatie", inputs: { nietGeplandeActies: "nietGeplandeActies", useClickArea: "useClickArea" }, viewQueries: [{ propertyName: "imxviewer", first: true, predicate: ["imxviewercontainer"], descendants: true }], ngImport: i0, template: "<imx-viewer #imxviewercontainer\n            [svgInfo]=\"svgInfos$ | async\"\n            [selectieInfos]=\"viewerControlsService.selectieInfos\"\n            [clickableIds]=\"clickableIds\"\n            [rightClickableIds]=\"rightClickableIds\"\n            [popoverInfos]=\"popoverInfos\"\n            [inlineDgnCssImport]=\"false\"\n            [useClickArea]=\"useClickArea\"\n            [zoomScaleSensitivity]=\"0.25\"\n            (clickHandler)=\"handleImxviewClick($event)\"\n            (rightClickHandler)=\"handleImxviewRightClick($event)\"\n          ></imx-viewer>\n\n<ul id=\"contextMenu\" class=\"dropdown-menu\" role=\"menu\" [ngStyle]=\"contextMenuStyle\">\n    <li *ngFor=\"let action of contextMenuActions\"><a class=\"dropdown-item\" tabindex=\"-1\"\n                                                     (click)=\"action.click()\">{{action.label}}</a></li>\n</ul>\n", styles: [".dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-item{display:block;width:100%;padding:.25rem 1.5rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i7.ImxViewerComponent, selector: "imx-viewer", inputs: ["useClickArea", "inlineDgnCssImport", "svgInfo", "selectieInfos", "clickableIds", "rightClickableIds", "popoverInfos", "zoomScaleSensitivity", "autoAlignSvgsHorizontally", "initialPanAndZoom"], outputs: ["clickHandler", "rightClickHandler", "svgLoaded", "panned"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: SvgVisualisatieComponent, selector: "svg-visualisatie", inputs: { nietGeplandeActies: "nietGeplandeActies", useClickArea: "useClickArea" }, viewQueries: [{ propertyName: "imxviewer", first: true, predicate: ["imxviewercontainer"], descendants: true }], ngImport: i0, template: "<imx-viewer #imxviewercontainer\n            [svgInfo]=\"svgInfos$ | async\"\n            [selectieInfos]=\"selectieInfos$ | async\"\n            [clickableIds]=\"clickableIds\"\n            [rightClickableIds]=\"rightClickableIds\"\n            [popoverInfos]=\"popoverInfos\"\n            [inlineDgnCssImport]=\"false\"\n            [useClickArea]=\"useClickArea\"\n            [zoomScaleSensitivity]=\"0.25\"\n            (clickHandler)=\"handleImxviewClick($event)\"\n            (rightClickHandler)=\"handleImxviewRightClick($event)\"\n          ></imx-viewer>\n\n<ul id=\"contextMenu\" class=\"dropdown-menu\" role=\"menu\" [ngStyle]=\"contextMenuStyle\">\n    <li *ngFor=\"let action of contextMenuActions\"><a class=\"dropdown-item\" tabindex=\"-1\"\n                                                     (click)=\"action.click()\">{{action.label}}</a></li>\n</ul>\n", styles: [".dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-item{display:block;width:100%;padding:.25rem 1.5rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i7.ImxViewerComponent, selector: "imx-viewer", inputs: ["useClickArea", "inlineDgnCssImport", "svgInfo", "selectieInfos", "clickableIds", "rightClickableIds", "popoverInfos", "zoomScaleSensitivity", "autoAlignSvgsHorizontally", "initialPanAndZoom"], outputs: ["clickHandler", "rightClickHandler", "svgLoaded", "panned"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SvgVisualisatieComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg-visualisatie', template: "<imx-viewer #imxviewercontainer\n            [svgInfo]=\"svgInfos$ | async\"\n            [selectieInfos]=\"viewerControlsService.selectieInfos\"\n            [clickableIds]=\"clickableIds\"\n            [rightClickableIds]=\"rightClickableIds\"\n            [popoverInfos]=\"popoverInfos\"\n            [inlineDgnCssImport]=\"false\"\n            [useClickArea]=\"useClickArea\"\n            [zoomScaleSensitivity]=\"0.25\"\n            (clickHandler)=\"handleImxviewClick($event)\"\n            (rightClickHandler)=\"handleImxviewRightClick($event)\"\n          ></imx-viewer>\n\n<ul id=\"contextMenu\" class=\"dropdown-menu\" role=\"menu\" [ngStyle]=\"contextMenuStyle\">\n    <li *ngFor=\"let action of contextMenuActions\"><a class=\"dropdown-item\" tabindex=\"-1\"\n                                                     (click)=\"action.click()\">{{action.label}}</a></li>\n</ul>\n", styles: [".dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-item{display:block;width:100%;padding:.25rem 1.5rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}\n"] }]
+            args: [{ selector: 'svg-visualisatie', template: "<imx-viewer #imxviewercontainer\n            [svgInfo]=\"svgInfos$ | async\"\n            [selectieInfos]=\"selectieInfos$ | async\"\n            [clickableIds]=\"clickableIds\"\n            [rightClickableIds]=\"rightClickableIds\"\n            [popoverInfos]=\"popoverInfos\"\n            [inlineDgnCssImport]=\"false\"\n            [useClickArea]=\"useClickArea\"\n            [zoomScaleSensitivity]=\"0.25\"\n            (clickHandler)=\"handleImxviewClick($event)\"\n            (rightClickHandler)=\"handleImxviewRightClick($event)\"\n          ></imx-viewer>\n\n<ul id=\"contextMenu\" class=\"dropdown-menu\" role=\"menu\" [ngStyle]=\"contextMenuStyle\">\n    <li *ngFor=\"let action of contextMenuActions\"><a class=\"dropdown-item\" tabindex=\"-1\"\n                                                     (click)=\"action.click()\">{{action.label}}</a></li>\n</ul>\n", styles: [".dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-item{display:block;width:100%;padding:.25rem 1.5rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}\n"] }]
         }], ctorParameters: () => [{ type: i2$1.Store }, { type: ViewerControlService }, { type: ActieHelper }, { type: SignaleringsBeeldManagerService }, { type: EditorService }], propDecorators: { nietGeplandeActies: [{
                 type: Input
             }], useClickArea: [{
@@ -3757,6 +3943,27 @@ SignaleringsbeeldInfoResource = __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SignaleringsbeeldInfoResource, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$1.ResourceHandler }, { type: i2$1.Store }, { type: SbControllerService }], propDecorators: { getBestaatIALevering: [] } });
+class SignaleringsbeeldInfoDto extends ResourceModel {
+    constructor(data) {
+        super();
+        this.$resource = SignaleringsbeeldInfoResource;
+        this.$setData(data);
+    }
+    toJSON() {
+        return { bladnaam: this.bladNaam, pplgs: this.pplgs, metVisualisatie: this.metVisualisatie };
+    }
+    toString() {
+        return `${this.bladNaam}, ${this.pplgs}, ${this.metVisualisatie}`;
+    }
+    $setData(data) {
+        if (data) {
+            this.bladNaam = data.bladNaam;
+            this.pplgs = data.pplgs;
+            this.metVisualisatie = data.metVisualisatie;
+        }
+        return this;
+    }
+}
 
 class BaseRestService {
     constructor(httpClient, store) {
@@ -4910,29 +5117,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.Store }, { type: SignaleringsBeeldManagerService }, { type: EditorService }] });
 
 class SvgViewEffect {
-    constructor(actions$, store, signaleringsBeeldManagerService, sbSvgUtilService) {
+    constructor(actions$, store, sbSvgUtilService, svgService) {
         this.actions$ = actions$;
         this.store = store;
-        this.signaleringsBeeldManagerService = signaleringsBeeldManagerService;
         this.sbSvgUtilService = sbSvgUtilService;
-        this.updateSvgView$ = createEffect(() => this.actions$.pipe(ofType(SetSvgInfos), map((_actie) => {
+        this.svgService = svgService;
+        this.updateSvgView$ = createEffect(() => this.actions$.pipe(ofType(SetSvgInfos), withLatestFrom(this.store), switchMap(([_actie, storeState]) => this.svgService.getSvgInfo(storeState.iaVersie.versie, storeState.signaleringsbeeldInfoDtos)), map((svgInfo) => {
             setTimeout(() => {
+                console.log('SVG INFO RECEIVED, updating SVG view');
+                const svgTopology = svgInfo.topology;
+                if (!svgTopology) {
+                    return;
+                }
                 this.sbSvgUtilService.addSvgDefs();
                 const wisselEnStoringskaderPuicMap = new Map();
-                this.signaleringsBeeldManagerService.getAlleSoortenWissels()
-                    .forEach(wissel => wisselEnStoringskaderPuicMap.set(wissel.getPuic(), wissel.getStoringSymboolPuic()));
+                svgTopology.alleSoortenWissels
+                    ?.forEach(wissel => wisselEnStoringskaderPuicMap.set(wissel.puic, wissel.storingSymboolPuic));
                 this.sbSvgUtilService.zetClassOpStoringSymbolenMetMap(wisselEnStoringskaderPuicMap);
-                this.sbSvgUtilService.zetClassOpSpoornummers(this.signaleringsBeeldManagerService.getPuicsVoorSpoornummers());
+                this.sbSvgUtilService.zetClassOpSpoornummers(svgTopology.puicVoorSpoorNummers ?? []);
                 this.sbSvgUtilService.maakOngewensteElementenOnzichtbaar();
                 this.sbSvgUtilService.zetClassOpLangeText();
-                this.sbSvgUtilService.maakOngewensteSeindelenOnzichtbaar(this.signaleringsBeeldManagerService.getSeinen());
-                this.sbSvgUtilService.maakSignaleringsElementenOnzichtbaar(this.signaleringsBeeldManagerService.getSignaleringsElementen());
-                const puicsVoorRanden = this.signaleringsBeeldManagerService.getPuicsVoorRanden();
+                const seinen = svgTopology.seinen?.map(this.toSbSein) ?? [];
+                this.sbSvgUtilService.maakOngewensteSeindelenOnzichtbaar(seinen);
+                this.sbSvgUtilService.maakSignaleringsElementenOnzichtbaar(svgTopology.signaleringsElementen
+                    ?.map(signaleringsElement => this.toSbSignaleringsElement(signaleringsElement)) ?? []);
+                const puicsVoorRanden = svgTopology.puicVoorRanden ?? [];
                 this.zetClassOpRanden(puicsVoorRanden);
-                this.sbSvgUtilService.zetClassOpRijrichtingen(this.signaleringsBeeldManagerService.getSeinen());
+                this.sbSvgUtilService.zetClassOpRijrichtingen(seinen);
                 this.store.dispatch(SetConnectorenClickableIds(puicsVoorRanden));
+                this.store.dispatch(svgUpdateFinished());
             }, 0);
         })), { dispatch: false });
+        this.updateSelectieInfos$ = createEffect(() => this.actions$.pipe(ofType(svgUpdateFinished), switchMap(() => combineLatest([
+            this.store.select('ritSelectieIds'),
+            this.store.select('actieOpRitSelectieIds'),
+            this.store.select('ongeplandeActieSelectieIds'),
+            this.store.select('gebrokenRitSelectieIds'),
+            this.store.select('alternatievenSelectieIds'),
+            this.store.select('beginSeinSelectieIds'),
+            this.store.select('eindSeinSelectieIds')
+        ]).pipe(map(([rit, actieOpRitSelectieIds, ongeplandeActieSelectieIds, gebrokenRit, alternatieven, begin, eind]) => {
+            return setSelectieInfos([
+                new SelectieInfo(rit, 'rit'),
+                new SelectieInfo(actieOpRitSelectieIds, 'actieoprit'),
+                new SelectieInfo(ongeplandeActieSelectieIds, 'ongeplandeActie'),
+                new SelectieInfo(gebrokenRit, 'gebrokenrit'),
+                new SelectieInfo(alternatieven, 'alternatieveRoute'),
+                new SelectieInfo(begin, 'zigzagVan'),
+                new SelectieInfo(eind, 'zigzagNaar')
+            ]);
+        })))));
+        this.store.select('baseUrl').pipe(filter(baseUrl => !!baseUrl), take(1), tap(baseUrl => svgService.configuration.basePath = baseUrl + '/mst')).subscribe();
     }
     zetClassOpRanden(puics) {
         puics.forEach(element => {
@@ -4940,12 +5175,24 @@ class SvgViewEffect {
             rand?.classList.add('connector');
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SvgViewEffect, deps: [{ token: i1$2.Actions }, { token: i2$1.Store }, { token: SignaleringsBeeldManagerService }, { token: i4.SignaleringsbeeldSvgUtilityService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    toSbSein(sein) {
+        return {
+            getPuic: () => sein.puic,
+            isBediend: () => sein.bediend,
+            getType: () => sein.type
+        };
+    }
+    toSbSignaleringsElement(signaleringsElement) {
+        return {
+            getPuic: () => signaleringsElement.puic
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SvgViewEffect, deps: [{ token: i1$2.Actions }, { token: i2$1.Store }, { token: i3.SignaleringsbeeldSvgUtilityService }, { token: SvgControllerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SvgViewEffect }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SvgViewEffect, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.Store }, { type: SignaleringsBeeldManagerService }, { type: i4.SignaleringsbeeldSvgUtilityService }] });
+        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.Store }, { type: i3.SignaleringsbeeldSvgUtilityService }, { type: SvgControllerService }] });
 
 class ProgressIndicator {
     constructor(lowerText, upperText, iconClass) {
@@ -5034,6 +5281,7 @@ const progressIndicatorReducer = createReducer({}, on(ShowProgress, () => ({ pro
 const svgInfoReducer = createReducer([], on(SetSvgInfos, (_, { svgInfos }) => svgInfos));
 const debugReducer = createReducer(false, on(SetDebug, (_, { debug }) => debug));
 const ritSelectieIdsReducer = createIdsReducer(SetRitSelectieIds);
+const selectieInfosReducer = createReducer([], on(setSelectieInfos, (_, { selectieInfos }) => selectieInfos));
 const actieOpRitReducer = createReducer(new ArrayMultimap(), on(SetGeplandeActies, (_, { geplandeActiesMap }) => geplandeActiesMap), on(AddGeplandeActie, (geplandeActies, { actie, puics }) => {
     geplandeActies.putAll(actie, puics);
     return new ArrayMultimap(geplandeActies);
@@ -5105,6 +5353,7 @@ const storeReducers = {
     nieuweBewegingen: nieuweBewegingReducer,
     baseUrl: baseUrlReducer,
     focusIds: focusIdsReducer,
+    selectieInfos: selectieInfosReducer
 };
 
 // @ts-nocheck
@@ -5253,5 +5502,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MeldingEvent, MstViewerModule, MstviewerComponent, STORE_CONFIG, SignaleringsbeeldInfoResource };
+export { MeldingEvent, MstViewerModule, MstviewerComponent, STORE_CONFIG, SignaleringsbeeldInfoDto, SignaleringsbeeldInfoResource };
 //# sourceMappingURL=loxia-mst-viewer.mjs.map