@loxia/imx-viewer 7.1.2 → 7.2.0

package/esm2015/services/puic-helper.service.js

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import * as i0 from "@angular/core";
+export class PuicHelperService {
+    constructor() {
+        this.setRootSvg = (svgParent) => this.rootSvg = svgParent;
+        this.getAllElementsForPuic = (puic) => this.rootSvg.querySelectorAll(`.p${puic}, #p${puic}`);
+    }
+}
+PuicHelperService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PuicHelperService_Factory() { return new PuicHelperService(); }, token: PuicHelperService, providedIn: "root" });
+PuicHelperService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVpYy1oZWxwZXIuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIvbG9jYWwvaG9tZS9sb3hpYS9qZW5raW5zX2JzXzEuMi93b3Jrc3BhY2Uvdmlld2VyX3N2Zy1pbXgtdmlld2VyLWNpX2RldmVsb3Avc3JjLyIsInNvdXJjZXMiOlsic2VydmljZXMvcHVpYy1oZWxwZXIuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQUszQyxNQUFNLE9BQU8saUJBQWlCO0lBSDlCO1FBTVcsZUFBVSxHQUFHLENBQUMsU0FBd0IsRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLE9BQU8sR0FBRyxTQUFTLENBQUM7UUFDcEUsMEJBQXFCLEdBQUcsQ0FBQyxJQUFZLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsZ0JBQWdCLENBQUMsS0FBTSxJQUFLLE9BQVEsSUFBSyxFQUFFLENBQTRCLENBQUM7S0FDekk7Ozs7WUFSQSxVQUFVLFNBQUM7Z0JBQ1IsVUFBVSxFQUFFLE1BQU07YUFDckIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBJbmplY3RhYmxlKHtcbiAgICBwcm92aWRlZEluOiAncm9vdCdcbn0pXG5leHBvcnQgY2xhc3MgUHVpY0hlbHBlclNlcnZpY2Uge1xuICAgIHByaXZhdGUgcm9vdFN2ZzogYW55O1xuXG4gICAgcHVibGljIHNldFJvb3RTdmcgPSAoc3ZnUGFyZW50OiBTVkdTVkdFbGVtZW50KSA9PiB0aGlzLnJvb3RTdmcgPSBzdmdQYXJlbnQ7XG4gICAgcHVibGljIGdldEFsbEVsZW1lbnRzRm9yUHVpYyA9IChwdWljOiBzdHJpbmcpID0+IHRoaXMucm9vdFN2Zy5xdWVyeVNlbGVjdG9yQWxsKGAucCR7IHB1aWMgfSwgI3AkeyBwdWljIH1gKSBhcyBOb2RlTGlzdE9mPEhUTUxFbGVtZW50Pjtcbn1cbiJdfQ==

package/esm2015/utils/classes-util.js

@@ -0,0 +1,35 @@
+export class ClassesUtil {
+    static addClass(elem, cls) {
+        if ('' === cls) {
+            return;
+        }
+        const classAttr = elem.getAttribute('class');
+        const classes = classAttr ? classAttr.split(' ') : [];
+        for (let j = 0; j < classes.length; j++) {
+            if (classes[j] === cls) {
+                return;
+            }
+        }
+        elem.setAttribute('class', classAttr ? classAttr + ' ' + cls : cls);
+    }
+    static removeClassesStartingWith(elem, cls) {
+        const classAttr = elem.getAttribute('class');
+        if (!classAttr) {
+            return;
+        }
+        const classes = classAttr.split(' ');
+        let j = classes.length;
+        while (j--) {
+            if (classes[j].indexOf(cls) === 0) {
+                classes.splice(j, 1);
+            }
+        }
+        if (classes.length === 0) {
+            elem.removeAttribute('class');
+        }
+        else {
+            elem.setAttribute('class', classes.join(' '));
+        }
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2xhc3Nlcy11dGlsLmpzIiwic291cmNlUm9vdCI6Ii9sb2NhbC9ob21lL2xveGlhL2plbmtpbnNfYnNfMS4yL3dvcmtzcGFjZS92aWV3ZXJfc3ZnLWlteC12aWV3ZXItY2lfZGV2ZWxvcC9zcmMvIiwic291cmNlcyI6WyJ1dGlscy9jbGFzc2VzLXV0aWwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFBTSxPQUFPLFdBQVc7SUFDcEIsTUFBTSxDQUFDLFFBQVEsQ0FBQyxJQUFhLEVBQUUsR0FBVztRQUN0QyxJQUFJLEVBQUUsS0FBSyxHQUFHLEVBQUU7WUFDWixPQUFPO1NBQ1Y7UUFDRCxNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQzdDLE1BQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO1FBQ3RELEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxPQUFPLENBQUMsTUFBTSxFQUFFLENBQUMsRUFBRSxFQUFFO1lBQ3JDLElBQUksT0FBTyxDQUFDLENBQUMsQ0FBQyxLQUFLLEdBQUcsRUFBRTtnQkFDcEIsT0FBTzthQUNWO1NBQ0o7UUFDRCxJQUFJLENBQUMsWUFBWSxDQUFDLE9BQU8sRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFDLFNBQVMsR0FBRyxHQUFHLEdBQUcsR0FBRyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUN4RSxDQUFDO0lBRUQsTUFBTSxDQUFDLHlCQUF5QixDQUFDLElBQWEsRUFBRSxHQUFXO1FBQ3ZELE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDN0MsSUFBSSxDQUFDLFNBQVMsRUFBRTtZQUNaLE9BQU87U0FDVjtRQUNELE1BQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDckMsSUFBSSxDQUFDLEdBQUcsT0FBTyxDQUFDLE1BQU0sQ0FBQztRQUN2QixPQUFPLENBQUMsRUFBRSxFQUFFO1lBQ1IsSUFBSSxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsRUFBRTtnQkFDL0IsT0FBTyxDQUFDLE1BQU0sQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUM7YUFDeEI7U0FDSjtRQUVELElBQUksT0FBTyxDQUFDLE1BQU0sS0FBSyxDQUFDLEVBQUU7WUFDdEIsSUFBSSxDQUFDLGVBQWUsQ0FBQyxPQUFPLENBQUMsQ0FBQztTQUNqQzthQUNJO1lBQ0QsSUFBSSxDQUFDLFlBQVksQ0FBQyxPQUFPLEVBQUUsT0FBTyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDO1NBQ2pEO0lBQ0wsQ0FBQztDQUNKIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGNsYXNzIENsYXNzZXNVdGlsIHtcbiAgICBzdGF0aWMgYWRkQ2xhc3MoZWxlbTogRWxlbWVudCwgY2xzOiBzdHJpbmcpIHtcbiAgICAgICAgaWYgKCcnID09PSBjbHMpIHtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuICAgICAgICBjb25zdCBjbGFzc0F0dHIgPSBlbGVtLmdldEF0dHJpYnV0ZSgnY2xhc3MnKTtcbiAgICAgICAgY29uc3QgY2xhc3NlcyA9IGNsYXNzQXR0ciA/IGNsYXNzQXR0ci5zcGxpdCgnICcpIDogW107XG4gICAgICAgIGZvciAobGV0IGogPSAwOyBqIDwgY2xhc3Nlcy5sZW5ndGg7IGorKykge1xuICAgICAgICAgICAgaWYgKGNsYXNzZXNbal0gPT09IGNscykge1xuICAgICAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgICAgICBlbGVtLnNldEF0dHJpYnV0ZSgnY2xhc3MnLCBjbGFzc0F0dHIgPyBjbGFzc0F0dHIgKyAnICcgKyBjbHMgOiBjbHMpO1xuICAgIH1cblxuICAgIHN0YXRpYyByZW1vdmVDbGFzc2VzU3RhcnRpbmdXaXRoKGVsZW06IEVsZW1lbnQsIGNsczogc3RyaW5nKSB7XG4gICAgICAgIGNvbnN0IGNsYXNzQXR0ciA9IGVsZW0uZ2V0QXR0cmlidXRlKCdjbGFzcycpO1xuICAgICAgICBpZiAoIWNsYXNzQXR0cikge1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG4gICAgICAgIGNvbnN0IGNsYXNzZXMgPSBjbGFzc0F0dHIuc3BsaXQoJyAnKTtcbiAgICAgICAgbGV0IGogPSBjbGFzc2VzLmxlbmd0aDtcbiAgICAgICAgd2hpbGUgKGotLSkge1xuICAgICAgICAgICAgaWYgKGNsYXNzZXNbal0uaW5kZXhPZihjbHMpID09PSAwKSB7XG4gICAgICAgICAgICAgICAgY2xhc3Nlcy5zcGxpY2UoaiwgMSk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cblxuICAgICAgICBpZiAoY2xhc3Nlcy5sZW5ndGggPT09IDApIHtcbiAgICAgICAgICAgIGVsZW0ucmVtb3ZlQXR0cmlidXRlKCdjbGFzcycpO1xuICAgICAgICB9XG4gICAgICAgIGVsc2Uge1xuICAgICAgICAgICAgZWxlbS5zZXRBdHRyaWJ1dGUoJ2NsYXNzJywgY2xhc3Nlcy5qb2luKCcgJykpO1xuICAgICAgICB9XG4gICAgfVxufVxuIl19

package/esm2015/utils/document-token.js

@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+export const DocumentToken = new InjectionToken('Document');
+export function documentProvider() { return document; }
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG9jdW1lbnQtdG9rZW4uanMiLCJzb3VyY2VSb290IjoiL2xvY2FsL2hvbWUvbG94aWEvamVua2luc19ic18xLjIvd29ya3NwYWNlL3ZpZXdlcl9zdmctaW14LXZpZXdlci1jaV9kZXZlbG9wL3NyYy8iLCJzb3VyY2VzIjpbInV0aWxzL2RvY3VtZW50LXRva2VuLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFL0MsTUFBTSxDQUFDLE1BQU0sYUFBYSxHQUFHLElBQUksY0FBYyxDQUFDLFVBQVUsQ0FBQyxDQUFDO0FBQzVELE1BQU0sVUFBVSxnQkFBZ0IsS0FBSyxPQUFPLFFBQVEsQ0FBQyxDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3Rpb25Ub2tlbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5leHBvcnQgY29uc3QgRG9jdW1lbnRUb2tlbiA9IG5ldyBJbmplY3Rpb25Ub2tlbignRG9jdW1lbnQnKTtcbmV4cG9ydCBmdW5jdGlvbiBkb2N1bWVudFByb3ZpZGVyKCkgeyByZXR1cm4gZG9jdW1lbnQ7IH1cbiJdfQ==

package/esm2015/utils/focus-util.js

@@ -0,0 +1,63 @@
+import { SvgRectUtil } from './svg-rect-util';
+export class FocusUtil {
+    static focusOnIds(focusIds, svgPanZoomRef, puicHelper) {
+        if (focusIds && focusIds.length > 0) {
+            // calculate the union rectangle of elements with ids
+            const svgContainer = document.getElementById('svgContainer');
+            const rootSvgDoc = svgContainer.firstChild;
+            let resultRect;
+            if (rootSvgDoc && rootSvgDoc.nodeName === 'svg') {
+                focusIds.forEach(puic => {
+                    const elems = puicHelper.getAllElementsForPuic(puic);
+                    for (let i = 0; i < elems.length; i++) {
+                        const elementRect = FocusUtil.getElementRectangleWithNestedSvgOffset(elems[i]);
+                        resultRect = SvgRectUtil.rectUnion(resultRect, elementRect);
+                    }
+                });
+            }
+            FocusUtil.focusOnRect(resultRect, svgContainer.getBoundingClientRect(), rootSvgDoc, svgPanZoomRef);
+        }
+    }
+    static focusOnRect(rect, elementRect, rootSvgDoc, svgPanZoomRef) {
+        if (rect) {
+            // make sure we are in the svgpanzoom transformed area
+            const matrix = rootSvgDoc.getElementsByClassName('svg-pan-zoom_viewport')[0].getScreenCTM();
+            // get from svg coordinate system to webpage coordinate system
+            const location = rootSvgDoc.createSVGPoint();
+            location.x = rect.x + (rect.width / 2);
+            location.y = rect.y + (rect.height / 2);
+            const transformedLocation = location.matrixTransform(matrix);
+            // transform the rectangle dimension (we have to use a SVGPoint since there is no SVGDimension)
+            const size = rootSvgDoc.createSVGPoint();
+            size.x = rect.width;
+            size.y = rect.height;
+            const transformedSize = size.matrixTransform(matrix.inverse());
+            // tel the svgPanZoom to zoom on the rectangle in relation to the total view size
+            const zoomFactor = Math.min(5, elementRect.height / Math.abs(transformedSize.y));
+            svgPanZoomRef.zoomAtPoint(zoomFactor, { x: transformedLocation.x - elementRect.left, y: transformedLocation.y - elementRect.top });
+            // tel the svgPanZoom to pan to the middel of the rectangle
+            svgPanZoomRef.panBy({
+                x: (elementRect.width / 2) - transformedLocation.x,
+                y: ((elementRect.height + elementRect.top) / 2) - transformedLocation.y
+            });
+        }
+    }
+    static getElementRectangleWithNestedSvgOffset(elem) {
+        const svgElem = elem;
+        const rect = svgElem.getBBox();
+        while (elem.parentElement.nodeName !== 'svg') {
+            elem = elem.parentElement;
+        }
+        elem = elem.parentElement;
+        rect.x = rect.x + parseInt(elem.getAttribute('x'), 10);
+        rect.y = rect.y + parseInt(elem.getAttribute('y'), 10);
+        const viewBox = elem.getAttribute('viewBox');
+        if (viewBox) {
+            const viewBoxCoordinates = viewBox.split(' ');
+            rect.x = rect.x - parseInt(viewBoxCoordinates[0], 10);
+            rect.y = rect.y - parseInt(viewBoxCoordinates[1], 10);
+        }
+        return rect;
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9jdXMtdXRpbC5qcyIsInNvdXJjZVJvb3QiOiIvbG9jYWwvaG9tZS9sb3hpYS9qZW5raW5zX2JzXzEuMi93b3Jrc3BhY2Uvdmlld2VyX3N2Zy1pbXgtdmlld2VyLWNpX2RldmVsb3Avc3JjLyIsInNvdXJjZXMiOlsidXRpbHMvZm9jdXMtdXRpbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFOUMsTUFBTSxPQUFPLFNBQVM7SUFFWCxNQUFNLENBQUMsVUFBVSxDQUFDLFFBQWtCLEVBQUUsYUFBa0MsRUFBRSxVQUE2QjtRQUMxRyxJQUFJLFFBQVEsSUFBSSxRQUFRLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTtZQUVqQyxxREFBcUQ7WUFDckQsTUFBTSxZQUFZLEdBQUcsUUFBUSxDQUFDLGNBQWMsQ0FBQyxjQUFjLENBQUMsQ0FBQztZQUM3RCxNQUFNLFVBQVUsR0FBRyxZQUFZLENBQUMsVUFBMkIsQ0FBQztZQUM1RCxJQUFJLFVBQW1CLENBQUM7WUFDeEIsSUFBSSxVQUFVLElBQUksVUFBVSxDQUFDLFFBQVEsS0FBSyxLQUFLLEVBQUU7Z0JBQzdDLFFBQVEsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEVBQUU7b0JBQ3BCLE1BQU0sS0FBSyxHQUE0QixVQUFVLENBQUMscUJBQXFCLENBQUMsSUFBSSxDQUFDLENBQUM7b0JBQzlFLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxLQUFLLENBQUMsTUFBTSxFQUFFLENBQUMsRUFBRSxFQUFFO3dCQUNuQyxNQUFNLFdBQVcsR0FBRyxTQUFTLENBQUMsc0NBQXNDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7d0JBQy9FLFVBQVUsR0FBRyxXQUFXLENBQUMsU0FBUyxDQUFDLFVBQVUsRUFBRSxXQUFXLENBQUMsQ0FBQztxQkFDL0Q7Z0JBQ0wsQ0FBQyxDQUFDLENBQUM7YUFDTjtZQUNELFNB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QUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUM3QyxJQUFJLE9BQU8sRUFBRTtZQUNULE1BQU0sa0JBQWtCLEdBQUcsT0FBTyxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUM5QyxJQUFJLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxDQUFDLEdBQUcsUUFBUSxDQUFDLGtCQUFrQixDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO1lBQ3RELElBQUksQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLENBQUMsR0FBRyxRQUFRLENBQUMsa0JBQWtCLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7U0FDekQ7UUFDRCxPQUFPLElBQUksQ0FBQztJQUNoQixDQUFDO0NBQ0oiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgU3ZnUGFuWm9vbSBmcm9tICdzdmctcGFuLXpvb20nO1xuaW1wb3J0IHsgUHVpY0hlbHBlclNlcnZpY2UgfSBmcm9tICcuLi9zZXJ2aWNlcy9wdWljLWhlbHBlci5zZXJ2aWNlJztcbmltcG9ydCB7IFN2Z1JlY3RVdGlsIH0gZnJvbSAnLi9zdmctcmVjdC11dGlsJztcblxuZXhwb3J0IGNsYXNzIEZvY3VzVXRpbCB7XG5cbiAgICBwdWJsaWMgc3RhdGljIGZvY3VzT25JZHMoZm9jdXNJZHM6IHN0cmluZ1tdLCBzdmdQYW5ab29tUmVmOiBTdmdQYW5ab29tLkluc3RhbmNlLCBwdWljSGVscGVyOiBQdWljSGVscGVyU2VydmljZSkge1xuICAgICAgICBpZiAoZm9jdXNJZHMgJiYgZm9jdXNJZHMubGVuZ3RoID4gMCkge1xuXG4gICAgICAgICAgICAvLyBjYWxjdWxhdGUgdGhlIHVuaW9uIHJlY3RhbmdsZSBvZiBlbGVtZW50cyB3aXRoIGlkc1xuICAgICAgICAgICAgY29uc3Qgc3ZnQ29udGFpbmVyID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3N2Z0NvbnRhaW5lcicpO1xuICAgICAgICAgICAgY29uc3Qgcm9vdFN2Z0RvYyA9IHN2Z0NvbnRhaW5lci5maXJzdENoaWxkIGFzIFNWR1NWR0VsZW1lbnQ7XG4gICAgICAgICAgICBsZXQgcmVzdWx0UmVjdDogU1ZHUmVjdDtcbiAgICAgICAgICAgIGlmIChyb290U3ZnRG9jICYmIHJvb3RTdmdEb2Mubm9kZU5hbWUgPT09ICdzdmcnKSB7XG4gICAgICAgICAgICAgICAgZm9jdXNJZHMuZm9yRWFjaChwdWljID0+IHtcbiAgICAgICAgICAgICAgICAgICAgY29uc3QgZWxlbXM6IE5vZGVMaXN0T2Y8SFRNTEVsZW1lbnQ+ID0gcHVpY0hlbHBlci5nZXRBbGxFbGVtZW50c0ZvclB1aWMocHVpYyk7XG4gICAgICAgICAgICAgICAgICAgIGZvciAobGV0IGkgPSAwOyBpIDwgZWxlbXMubGVuZ3RoOyBpKyspIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIGNvbnN0IGVsZW1lbnRSZWN0ID0gRm9jdXNVdGlsLmdldEVsZW1lbnRSZWN0YW5nbGVXaXRoTmVzdGVkU3ZnT2Zmc2V0KGVsZW1zW2ldKTtcbiAgICAgICAgICAgICAgICAgICAgICAgIHJlc3VsdFJlY3QgPSBTdmdSZWN0VXRpbC5yZWN0VW5pb24ocmVzdWx0UmVjdCwgZWxlbWVudFJlY3QpO1xuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgfSk7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgICBGb2N1c1V0aWwuZm9jdXNPblJlY3QocmVzdWx0UmVjdCwgc3ZnQ29udGFpbmVyLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLCByb290U3ZnRG9jLCBzdmdQYW5ab29tUmVmKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIHN0YXRpYyBmb2N1c09uUmVjdChyZWN0OiBTVkdSZWN0LCBlbGVtZW50UmVjdDogQ2xpZW50UmVjdCwgcm9vdFN2Z0RvYzogU1ZHU1ZHRWxlbWVudCwgc3ZnUGFuWm9vbVJlZjogYW55KSB7XG4gICAgICAgIGlmIChyZWN0KSB7XG4gICAgICAgICAgICAvLyBtYWtlIHN1cmUgd2UgYXJlIGluIHRoZSBzdmdwYW56b29tIHRyYW5zZm9ybWVkIGFyZWFcbiAgICAgICAgICAgIGNvbnN0IG1hdHJpeCA9IChyb290U3ZnRG9jLmdldEVsZW1lbnRzQnlDbGFzc05hbWUoJ3N2Zy1wYW4tem9vbV92aWV3cG9ydCcpWzBdIGFzIFNWR0dFbGVtZW50KS5nZXRTY3JlZW5DVE0oKTtcblxuICAgICAgICAgICAgLy8gZ2V0IGZyb20gc3ZnIGNvb3JkaW5hdGUgc3lzdGVtIHRvIHdlYnBhZ2UgY29vcmRpbmF0ZSBzeXN0ZW1cbiAgICAgICAgICAgIGNvbnN0IGxvY2F0aW9uID0gcm9vdFN2Z0RvYy5jcmVhdGVTVkdQb2ludCgpO1xuICAgICAgICAgICAgbG9jYXRpb24ueCA9IHJlY3QueCArIChyZWN0LndpZHRoIC8gMik7XG4gICAgICAgICAgICBsb2NhdGlvbi55ID0gcmVjdC55ICsgKHJlY3QuaGVpZ2h0IC8gMik7XG4gICAgICAgICAgICBjb25zdCB0cmFuc2Zvcm1lZExvY2F0aW9uID0gbG9jYXRpb24ubWF0cml4VHJhbnNmb3JtKG1hdHJpeCk7XG5cbiAgICAgICAgICAgIC8vIHRyYW5zZm9ybSB0aGUgcmVjdGFuZ2xlIGRpbWVuc2lvbiAod2UgaGF2ZSB0byB1c2UgYSBTVkdQb2ludCBzaW5jZSB0aGVyZSBpcyBubyBTVkdEaW1lbnNpb24pXG4gICAgICAgICAgICBjb25zdCBzaXplID0gcm9vdFN2Z0RvYy5jcmVhdGVTVkdQb2ludCgpO1xuICAgICAgICAgICAgc2l6ZS54ID0gcmVjdC53aWR0aDtcbiAgICAgICAgICAgIHNpemUueSA9IHJlY3QuaGVpZ2h0O1xuICAgICAgICAgICAgY29uc3QgdHJhbnNmb3JtZWRTaXplID0gc2l6ZS5tYXRyaXhUcmFuc2Zvcm0obWF0cml4LmludmVyc2UoKSk7XG5cbiAgICAgICAgICAgIC8vIHRlbCB0aGUgc3ZnUGFuWm9vbSB0byB6b29tIG9uIHRoZSByZWN0YW5nbGUgaW4gcmVsYXRpb24gdG8gdGhlIHRvdGFsIHZpZXcgc2l6ZVxuICAgICAgICAgICAgY29uc3Qgem9vbUZhY3RvciA9IE1hdGgubWluKDUsIGVsZW1lbnRSZWN0LmhlaWdodCAvIE1hdGguYWJzKHRyYW5zZm9ybWVkU2l6ZS55KSk7XG4gICAgICAgICAgICBzdmdQYW5ab29tUmVmLnpvb21BdFBvaW50KHpvb21GYWN0b3IsXG4gICAgICAgICAgICAgICAgeyB4OiB0cmFuc2Zvcm1lZExvY2F0aW9uLnggLSBlbGVtZW50UmVjdC5sZWZ0LCB5OiB0cmFuc2Zvcm1lZExvY2F0aW9uLnkgLSBlbGVtZW50UmVjdC50b3AgfSk7XG4gICAgICAgICAgICAvLyB0ZWwgdGhlIHN2Z1Bhblpvb20gdG8gcGFuIHRvIHRoZSBtaWRkZWwgb2YgdGhlIHJlY3RhbmdsZVxuICAgICAgICAgICAgc3ZnUGFuWm9vbVJlZi5wYW5CeSh7XG4gICAgICAgICAgICAgICAgeDogKGVsZW1lbnRSZWN0LndpZHRoIC8gMikgLSB0cmFuc2Zvcm1lZExvY2F0aW9uLngsXG4gICAgICAgICAgICAgICAgeTogKChlbGVtZW50UmVjdC5oZWlnaHQgKyBlbGVtZW50UmVjdC50b3ApIC8gMikgLSB0cmFuc2Zvcm1lZExvY2F0aW9uLnlcbiAgICAgICAgICAgIH0pO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBzdGF0aWMgZ2V0RWxlbWVudFJlY3RhbmdsZVdpdGhOZXN0ZWRTdmdPZmZzZXQoZWxlbTogRWxlbWVudCk6IFNWR1JlY3Qge1xuICAgICAgICBjb25zdCBzdmdFbGVtID0gKDxTVkdHcmFwaGljc0VsZW1lbnQ+IGVsZW0pO1xuICAgICAgICBjb25zdCByZWN0ID0gc3ZnRWxlbS5nZXRCQm94KCk7XG5cbiAgICAgICAgd2hpbGUgKGVsZW0ucGFyZW50RWxlbWVudC5ub2RlTmFtZSAhPT0gJ3N2ZycpIHtcbiAgICAgICAgICAgIGVsZW0gPSBlbGVtLnBhcmVudEVsZW1lbnQ7XG4gICAgICAgIH1cbiAgICAgICAgZWxlbSA9IGVsZW0ucGFyZW50RWxlbWVudDtcbiAgICAgICAgcmVjdC54ID0gcmVjdC54ICsgcGFyc2VJbnQoZWxlbS5nZXRBdHRyaWJ1dGUoJ3gnKSwgMTApO1xuICAgICAgICByZWN0LnkgPSByZWN0LnkgKyBwYXJzZUludChlbGVtLmdldEF0dHJpYnV0ZSgneScpLCAxMCk7XG4gICAgICAgIGNvbnN0IHZpZXdCb3ggPSBlbGVtLmdldEF0dHJpYnV0ZSgndmlld0JveCcpO1xuICAgICAgICBpZiAodmlld0JveCkge1xuICAgICAgICAgICAgY29uc3Qgdmlld0JveENvb3JkaW5hdGVzID0gdmlld0JveC5zcGxpdCgnICcpO1xuICAgICAgICAgICAgcmVjdC54ID0gcmVjdC54IC0gcGFyc2VJbnQodmlld0JveENvb3JkaW5hdGVzWzBdLCAxMCk7XG4gICAgICAgICAgICByZWN0LnkgPSByZWN0LnkgLSBwYXJzZUludCh2aWV3Qm94Q29vcmRpbmF0ZXNbMV0sIDEwKTtcbiAgICAgICAgfVxuICAgICAgICByZXR1cm4gcmVjdDtcbiAgICB9XG59XG4iXX0=

package/esm2015/utils/svg-rect-util.js

@@ -0,0 +1,48 @@
+export class SvgRectUtil {
+    // copied from java.awt.Rectangle
+    static rectUnion(r1, r2) {
+        if (!r1) {
+            return r2;
+        }
+        let tx2 = r1.width;
+        let ty2 = r1.height;
+        if ((tx2 | ty2) < 0) { // tslint:disable-line
+            // This rectangle has negative dimensions...
+            // If r has non-negative dimensions then it is the answer.
+            // If r is non-existant (has a negative dimension), then both
+            // are non-existant and we can return any non-existant rectangle
+            // as an answer.  Thus, returning r meets that criterion.
+            // Either way, r is our answer.
+            return r2;
+        }
+        let rx2 = r2.width;
+        let ry2 = r2.height;
+        if ((rx2 | ry2) < 0) { // tslint:disable-line
+            return r1;
+        }
+        let tx1 = r1.x;
+        let ty1 = r1.y;
+        tx2 += tx1;
+        ty2 += ty1;
+        const rx1 = r2.x;
+        const ry1 = r2.y;
+        rx2 += rx1;
+        ry2 += ry1;
+        if (tx1 > rx1) {
+            tx1 = rx1;
+        }
+        if (ty1 > ry1) {
+            ty1 = ry1;
+        }
+        if (tx2 < rx2) {
+            tx2 = rx2;
+        }
+        if (ty2 < ry2) {
+            ty2 = ry2;
+        }
+        tx2 -= tx1;
+        ty2 -= ty1;
+        return new DOMRect(tx1, ty1, tx2, ty2);
+    }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3ZnLXJlY3QtdXRpbC5qcyIsInNvdXJjZVJvb3QiOiIvbG9jYWwvaG9tZS9sb3hpYS9qZW5raW5zX2JzXzEuMi93b3Jrc3BhY2Uvdmlld2VyX3N2Zy1pbXgtdmlld2VyLWNpX2RldmVsb3Avc3JjLyIsInNvdXJjZXMiOlsidXRpbHMvc3ZnLXJlY3QtdXRpbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8sV0FBVztJQUVwQixpQ0FBaUM7SUFDMUIsTUFBTSxDQUFDLFNBQVMsQ0FBQyxFQUFXLEVBQUUsRUFBVztRQUM1QyxJQUFJLENBQUMsRUFBRSxFQUFFO1lBQ0wsT0FBTyxFQUFFLENBQUM7U0FDYjtRQUVELElBQUksR0FBRyxHQUFHLEVBQUUsQ0FBQyxLQUFLLENBQUM7UUFDbkIsSUFBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLE1BQU0sQ0FBQztRQUNwQixJQUFJLENBQUMsR0FBRyxHQUFHLEdBQUcsQ0FBQyxHQUFHLENBQUMsRUFBRSxFQUFFLHNCQUFzQjtZQUN6Qyw0Q0FBNEM7WUFDNUMsMERBQTBEO1lBQzFELDZEQUE2RDtZQUM3RCxnRUFBZ0U7WUFDaEUseURBQXlEO1lBQ3pELCtCQUErQjtZQUMvQixPQUFPLEVBQUUsQ0FBQztTQUNiO1FBQ0QsSUFBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLEtBQUssQ0FBQztRQUNuQixJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsTUFBTSxDQUFDO1FBQ3BCLElBQUksQ0FBQyxHQUFHLEdBQUcsR0FBRyxDQUFDLEdBQUcsQ0FBQyxFQUFFLEVBQUUsc0JBQXNCO1lBQ3pDLE9BQU8sRUFBRSxDQUFDO1NBQ2I7UUFDRCxJQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQ2YsSUFBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUNmLEdBQUcsSUFBSSxHQUFHLENBQUM7UUFDWCxHQUFHLElBQUksR0FBRyxDQUFDO1FBQ1gsTUFBTSxHQUFHLEdBQUcsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUNqQixNQUFNLEdBQUcsR0FBRyxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQ2pCLEdBQUcsSUFBSSxHQUFHLENBQUM7UUFDWCxHQUFHLElBQUksR0FBRyxDQUFDO1FBQ1gsSUFBSSxHQUFHLEdBQUcsR0FBRyxFQUFFO1lBQ1gsR0FBRyxHQUFHLEdBQUcsQ0FBQztTQUNiO1FBQ0QsSUFBSSxHQUFHLEdBQUcsR0FBRyxFQUFFO1lBQ1gsR0FBRyxHQUFHLEdBQUcsQ0FBQztTQUNiO1FBQ0QsSUFBSSxHQUFHLEdBQUcsR0FBRyxFQUFFO1lBQ1gsR0FBRyxHQUFHLEdBQUcsQ0FBQztTQUNiO1FBQ0QsSUFBSSxHQUFHLEdBQUcsR0FBRyxFQUFFO1lBQ1gsR0FBRyxHQUFHLEdBQUcsQ0FBQztTQUNiO1FBQ0QsR0FBRyxJQUFJLEdBQUcsQ0FBQztRQUNYLEdBQUcsSUFBSSxHQUFHLENBQUM7UUFFWCxPQUFPLElBQUksT0FBTyxDQUFDLEdBQUcsRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsQ0FBQyxDQUFDO0lBQzNDLENBQUM7Q0FDSiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBjbGFzcyBTdmdSZWN0VXRpbCB7XG5cbiAgICAvLyBjb3BpZWQgZnJvbSBqYXZhLmF3dC5SZWN0YW5nbGVcbiAgICBwdWJsaWMgc3RhdGljIHJlY3RVbmlvbihyMTogU1ZHUmVjdCwgcjI6IFNWR1JlY3QpOiBTVkdSZWN0IHtcbiAgICAgICAgaWYgKCFyMSkge1xuICAgICAgICAgICAgcmV0dXJuIHIyO1xuICAgICAgICB9XG5cbiAgICAgICAgbGV0IHR4MiA9IHIxLndpZHRoO1xuICAgICAgICBsZXQgdHkyID0gcjEuaGVpZ2h0O1xuICAgICAgICBpZiAoKHR4MiB8IHR5MikgPCAwKSB7IC8vIHRzbGludDpkaXNhYmxlLWxpbmVcbiAgICAgICAgICAgIC8vIFRoaXMgcmVjdGFuZ2xlIGhhcyBuZWdhdGl2ZSBkaW1lbnNpb25zLi4uXG4gICAgICAgICAgICAvLyBJZiByIGhhcyBub24tbmVnYXRpdmUgZGltZW5zaW9ucyB0aGVuIGl0IGlzIHRoZSBhbnN3ZXIuXG4gICAgICAgICAgICAvLyBJZiByIGlzIG5vbi1leGlzdGFudCAoaGFzIGEgbmVnYXRpdmUgZGltZW5zaW9uKSwgdGhlbiBib3RoXG4gICAgICAgICAgICAvLyBhcmUgbm9uLWV4aXN0YW50IGFuZCB3ZSBjYW4gcmV0dXJuIGFueSBub24tZXhpc3RhbnQgcmVjdGFuZ2xlXG4gICAgICAgICAgICAvLyBhcyBhbiBhbnN3ZXIuICBUaHVzLCByZXR1cm5pbmcgciBtZWV0cyB0aGF0IGNyaXRlcmlvbi5cbiAgICAgICAgICAgIC8vIEVpdGhlciB3YXksIHIgaXMgb3VyIGFuc3dlci5cbiAgICAgICAgICAgIHJldHVybiByMjtcbiAgICAgICAgfVxuICAgICAgICBsZXQgcngyID0gcjIud2lkdGg7XG4gICAgICAgIGxldCByeTIgPSByMi5oZWlnaHQ7XG4gICAgICAgIGlmICgocngyIHwgcnkyKSA8IDApIHsgLy8gdHNsaW50OmRpc2FibGUtbGluZVxuICAgICAgICAgICAgcmV0dXJuIHIxO1xuICAgICAgICB9XG4gICAgICAgIGxldCB0eDEgPSByMS54O1xuICAgICAgICBsZXQgdHkxID0gcjEueTtcbiAgICAgICAgdHgyICs9IHR4MTtcbiAgICAgICAgdHkyICs9IHR5MTtcbiAgICAgICAgY29uc3QgcngxID0gcjIueDtcbiAgICAgICAgY29uc3QgcnkxID0gcjIueTtcbiAgICAgICAgcngyICs9IHJ4MTtcbiAgICAgICAgcnkyICs9IHJ5MTtcbiAgICAgICAgaWYgKHR4MSA+IHJ4MSkge1xuICAgICAgICAgICAgdHgxID0gcngxO1xuICAgICAgICB9XG4gICAgICAgIGlmICh0eTEgPiByeTEpIHtcbiAgICAgICAgICAgIHR5MSA9IHJ5MTtcbiAgICAgICAgfVxuICAgICAgICBpZiAodHgyIDwgcngyKSB7XG4gICAgICAgICAgICB0eDIgPSByeDI7XG4gICAgICAgIH1cbiAgICAgICAgaWYgKHR5MiA8IHJ5Mikge1xuICAgICAgICAgICAgdHkyID0gcnkyO1xuICAgICAgICB9XG4gICAgICAgIHR4MiAtPSB0eDE7XG4gICAgICAgIHR5MiAtPSB0eTE7XG5cbiAgICAgICAgcmV0dXJuIG5ldyBET01SZWN0KHR4MSwgdHkxLCB0eDIsIHR5Mik7XG4gICAgfVxufVxuIl19

package/fesm2015/loxia-imx-viewer.js

@@ -1,11 +1,66 @@
 import { CommonModule } from '@angular/common';
-import { InjectionToken, EventEmitter, Component, Inject, Input, ViewChild, Output, NgModule } from '@angular/core';
+import { ɵɵdefineInjectable, Injectable, ɵɵinject, InjectionToken, EventEmitter, Component, Inject, Input, ViewChild, Output, NgModule } from '@angular/core';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { parse } from 'dataurl';
-import { of, throwError, combineLatest } from 'rxjs';
+import { combineLatest, of, throwError } from 'rxjs';
 import { take } from 'rxjs/operators';
 import * as SvgPanZoom from 'svg-pan-zoom';
 
+class PuicHelperService {
+    constructor() {
+        this.setRootSvg = (svgParent) => this.rootSvg = svgParent;
+        this.getAllElementsForPuic = (puic) => this.rootSvg.querySelectorAll(`.p${puic}, #p${puic}`);
+    }
+}
+PuicHelperService.ɵprov = ɵɵdefineInjectable({ factory: function PuicHelperService_Factory() { return new PuicHelperService(); }, token: PuicHelperService, providedIn: "root" });
+PuicHelperService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+
+class ClickareaService {
+    constructor(puicHelper) {
+        this.puicHelper = puicHelper;
+        this.timeout = 250;
+    }
+    delayedClickAreaCreation(ids) {
+        if (ids.size === 0) {
+            return;
+        }
+        window.clearTimeout(this.timer);
+        this.timer = window.setTimeout(() => this.createClickareas(ids), this.timeout);
+    }
+    /**
+     * Mogelijke optimalisatie is om de delta te bepalen van de te verwerken ids
+     */
+    createClickareas(ids) {
+        Array.from(document.getElementsByClassName('imxview-clickarea')).forEach(x => x.remove());
+        ids.forEach(id => {
+            this.puicHelper.getAllElementsForPuic(id).forEach(element => {
+                if (element) {
+                    const polylines = Array.from(element.getElementsByTagName('polyline'));
+                    polylines.forEach(p => {
+                        const clone = p.cloneNode(true);
+                        clone.setAttribute('class', 'imxview-clickarea');
+                        clone.removeAttribute('id');
+                        element.insertBefore(clone, p);
+                    });
+                }
+            });
+        });
+    }
+}
+ClickareaService.ɵprov = ɵɵdefineInjectable({ factory: function ClickareaService_Factory() { return new ClickareaService(ɵɵinject(PuicHelperService)); }, token: ClickareaService, providedIn: "root" });
+ClickareaService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+ClickareaService.ctorParameters = () => [
+    { type: PuicHelperService }
+];
+
 class ClassesUtil {
     static addClass(elem, cls) {
         if ('' === cls) {
@@ -93,7 +148,7 @@ class SvgRectUtil {
 }
 
 class FocusUtil {
-    static focusOnIds(focusIds, svgPanZoomRef) {
+    static focusOnIds(focusIds, svgPanZoomRef, puicHelper) {
         if (focusIds && focusIds.length > 0) {
             // calculate the union rectangle of elements with ids
             const svgContainer = document.getElementById('svgContainer');
@@ -101,7 +156,7 @@ class FocusUtil {
             let resultRect;
             if (rootSvgDoc && rootSvgDoc.nodeName === 'svg') {
                 focusIds.forEach(puic => {
-                    const elems = rootSvgDoc.querySelectorAll(`.p${puic}, #p${puic}`);
+                    const elems = puicHelper.getAllElementsForPuic(puic);
                     for (let i = 0; i < elems.length; i++) {
                         const elementRect = FocusUtil.getElementRectangleWithNestedSvgOffset(elems[i]);
                         resultRect = SvgRectUtil.rectUnion(resultRect, elementRect);
@@ -114,7 +169,7 @@ class FocusUtil {
     static focusOnRect(rect, elementRect, rootSvgDoc, svgPanZoomRef) {
         if (rect) {
             // make sure we are in the svgpanzoom transformed area
-            const matrix = rootSvgDoc.firstChild.getScreenCTM();
+            const matrix = rootSvgDoc.getElementsByClassName('svg-pan-zoom_viewport')[0].getScreenCTM();
             // get from svg coordinate system to webpage coordinate system
             const location = rootSvgDoc.createSVGPoint();
             location.x = rect.x + (rect.width / 2);
@@ -170,12 +225,18 @@ class SelectieEvent {
 
 const _svgPanZoom = SvgPanZoom; // via andere variabele zodat ng-packgr/rollup geen error geeft bij de aannroep
 class ImxViewerComponent {
-    constructor(document, http) {
+    constructor(document, http, clickAreaService, puicHelper) {
         this.document = document;
         this.http = http;
+        this.clickAreaService = clickAreaService;
+        this.puicHelper = puicHelper;
+        this.useClickArea = false;
+        this.inlineDgnCssImport = true;
+        this.selectieInfos = [];
+        // Onderstaande inputs worden meegenomen voor clickarea:
         this.clickableIds = [];
         this.rightClickableIds = [];
-        this.selectieInfos = [];
+        this.popoverInfos = [];
         this.errors = false;
         this.popoverStyle = { display: 'inline' };
         this.popoverHtmlContent = '';
@@ -184,35 +245,40 @@ class ImxViewerComponent {
         this.svgLoaded = new EventEmitter();
         this.svgGeladen = false;
         this.eventListeners = new Map();
+        this.getSvgPanZoomInstance = () => this.svgPanZoomRef;
+        this.hidePopOver = () => this.popoverStyle.visibility = 'hidden';
+        this.getSvgParent = () => this.svgParentRef.nativeElement;
     }
     ngOnInit() {
         this.createSvgPanZoomRefIfNotExists();
+        this.puicHelper.setRootSvg(this.getSvgParent());
     }
     ngOnChanges(changes) {
         // If Imx-viewer is initialized with svgInfo, ngOnChanges is called before ngOnInit.
         // In that case we need to create svgPanZoomRef here.
         this.createSvgPanZoomRefIfNotExists();
-        if (this.svgInfo && changes.svgInfo) {
+        const { useClickArea, clickableIds, rightClickableIds, popoverInfos, selectieInfos, svgInfo } = changes;
+        if (useClickArea || clickableIds || rightClickableIds || popoverInfos) {
+            this.delayedClickAreaCreation();
+        }
+        if (this.svgInfo && svgInfo) {
             this.loadSvgs();
         }
-        if (this.clickableIds && changes.clickableIds && this.svgGeladen) {
+        if (this.clickableIds && clickableIds && this.svgGeladen) {
             this.addClickEventHandlersToElements(this.clickableIds, 'click');
         }
-        if (this.rightClickableIds && changes.rightClickableIds && this.svgGeladen) {
+        if (this.rightClickableIds && rightClickableIds && this.svgGeladen) {
             this.addClickEventHandlersToElements(this.rightClickableIds, 'contextmenu');
         }
-        if (this.selectieInfos && changes.selectieInfos && this.svgGeladen) {
+        if (this.selectieInfos && selectieInfos && this.svgGeladen) {
             this.selectElements();
         }
-        if (this.popoverInfos && changes.popoverInfos && this.svgGeladen) {
+        if (this.popoverInfos && popoverInfos && this.svgGeladen) {
             this.addMouseoverEventHandlerToElements();
         }
     }
     focusOnIds(focusIds) {
-        FocusUtil.focusOnIds(focusIds, this.svgPanZoomRef);
-    }
-    getSvgPanZoomInstance() {
-        return this.svgPanZoomRef;
+        FocusUtil.focusOnIds(focusIds, this.svgPanZoomRef, this.puicHelper);
     }
     // Here only used in test, but also used by applications. Do not remove.
     static getXCoordinate(decodedSvgDataUrl) {
@@ -224,6 +290,65 @@ class ImxViewerComponent {
         div = null;
         return result;
     }
+    createSvgPanZoomRefIfNotExists() {
+        if (!this.svgPanZoomRef) {
+            this.svgPanZoomRef = _svgPanZoom(this.getSvgParent(), {
+                fit: false,
+                center: true,
+                dblClickZoomEnabled: false,
+                onZoom: () => this.hidePopOver(),
+                onPan: () => this.hidePopOver()
+            });
+            this.addStyleToRootSvg();
+        }
+    }
+    /**
+     * Style wordt vanuit javascript toegevoegd na de create van SvgZoomPanRef deze maakt een viewport aan.
+     * - Clickarea CSS wordt dynamisch aan de SVG toegevoegd, dit voorkomt dat dat er ngcontent property op geplaatst wordt.
+     *   De SVG's worden niet voorzien van ngcontent attribuut.
+     * - DGN.css import wordt (optioneel) in de root SVG opgenomen, deze is eerst verwijderd uit de SVG's. Om meerdere imports te voorkomen.
+     * */
+    addStyleToRootSvg() {
+        const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+        let style = this.inlineDgnCssImport ? '@import url("dgn.css");\n' : '';
+        style +=
+            `.imxview-selected > polyline.imxview-clickarea, polyline.imxview-clickarea {
+                stroke: var(--imxview-clickarea-stroke, transparent);
+                stroke-width: var(--imxview-clickarea-stroke-width, 10px);
+                stroke-dasharray: none;
+            }`;
+        defs.innerHTML =
+            `<style type="text/css">
+                ${style}
+            </style>`;
+        const firstElementChild = this.getSvgParent().firstElementChild;
+        this.getSvgParent().insertBefore(defs, firstElementChild);
+    }
+    loadSvgs() {
+        combineLatest(this.svgInfo.map(svgInfo => this.loadSvg(svgInfo.svg)))
+            .pipe(take(1))
+            .subscribe(svgs => {
+            const svg = this.concatenateSvgs(svgs);
+            this.updateDom(svg);
+            this.svgGeladen = true;
+            this.svgLoaded.emit();
+            this.delayedClickAreaCreation();
+            this.addClickEventHandlersToElements(this.clickableIds, 'click');
+            this.addClickEventHandlersToElements(this.rightClickableIds, 'contextmenu');
+            this.selectElements();
+            this.addMouseoverEventHandlerToElements();
+        }, error => this.flagErrors(error));
+    }
+    loadSvg(svgSrc) {
+        if (svgSrc.startsWith('data:')) {
+            const parsed = parse(svgSrc);
+            if (parsed) {
+                return of(parsed.data.toString());
+            }
+            return throwError('Data-url parse error');
+        }
+        return this.http.get(svgSrc, { responseType: 'text' });
+    }
     addClickEventHandlersToElement(listeners, elem, eventType, puic) {
         const elemAlreadyHasListener = listeners.get(elem);
         if (!elemAlreadyHasListener) {
@@ -245,10 +370,8 @@ class ImxViewerComponent {
         const listeners = this.removeOldState(eventtype);
         if (clickableIds) {
             clickableIds.forEach(puic => {
-                const elements = Array.from(this.document.querySelectorAll('#p' + puic));
-                elements.forEach((element) => {
-                    this.addClickEventHandlersToElement(listeners, element, eventtype, puic);
-                });
+                const elements = this.puicHelper.getAllElementsForPuic(puic);
+                elements.forEach((element) => this.addClickEventHandlersToElement(listeners, element, eventtype, puic));
             });
         }
     }
@@ -257,7 +380,7 @@ class ImxViewerComponent {
         if (this.popoverInfos) {
             this.popoverInfos.forEach(popoverInfo => {
                 popoverInfo.puicArray.forEach(puic => {
-                    const elems = this.getSvgParent().querySelectorAll(`.p${puic}, #p${puic}`);
+                    const elems = this.puicHelper.getAllElementsForPuic(puic);
                     for (let i = 0; i < elems.length; i++) {
                         const fn = (e) => {
                             this.popoverHtmlContent = popoverInfo.popoverHtmlContent;
@@ -278,57 +401,21 @@ class ImxViewerComponent {
         for (let i = 0, len = this.svgInfo.length; i < len; i++) {
             const sourceCoordinates = this.svgInfo[i].coordinates || new Point(0, 0);
             const div = document.createElement('div');
-            div.innerHTML = svgs[i];
+            /** Verwijder dgn.css import uit geleverde SVG's.
+             *  De import wordt optioneel (standaard aan) in de root SVG geplaats om te voorkomen dat de import meermaals gebeurd.
+             *  zie addStyleToRootSvg()
+             */
+            div.innerHTML = svgs[i].replace('@import url("dgn.css");', '');
             div.firstElementChild.setAttribute('x', sourceCoordinates.x.toString());
             div.firstElementChild.setAttribute('y', sourceCoordinates.y.toString());
             svgContent += div.innerHTML;
         }
         return svgContent;
     }
-    createSvgPanZoomRefIfNotExists() {
-        if (!this.svgPanZoomRef) {
-            this.svgPanZoomRef = _svgPanZoom(this.getSvgParent(), {
-                fit: false,
-                center: true,
-                dblClickZoomEnabled: false,
-                onZoom: () => {
-                    this.hidePopOver();
-                },
-                onPan: () => this.hidePopOver()
-            });
-        }
-    }
     flagErrors(error) {
         console.log(error);
         this.errors = true;
     }
-    hidePopOver() {
-        this.popoverStyle.visibility = 'hidden';
-    }
-    loadSvg(svgSrc) {
-        if (svgSrc.startsWith('data:')) {
-            const parsed = parse(svgSrc);
-            if (parsed) {
-                return of(parsed.data.toString());
-            }
-            return throwError('Data-url parse error');
-        }
-        return this.http.get(svgSrc, { responseType: 'text' });
-    }
-    loadSvgs() {
-        combineLatest(this.svgInfo.map(svgInfo => this.loadSvg(svgInfo.svg)))
-            .pipe(take(1))
-            .subscribe(svgs => {
-            const svg = this.concatenateSvgs(svgs);
-            this.updateDom(svg);
-            this.svgGeladen = true;
-            this.svgLoaded.emit();
-            this.addClickEventHandlersToElements(this.clickableIds, 'click');
-            this.addClickEventHandlersToElements(this.rightClickableIds, 'contextmenu');
-            this.selectElements();
-            this.addMouseoverEventHandlerToElements();
-        }, error => this.flagErrors(error));
-    }
     removeOldState(eventType) {
         let listeners = this.eventListeners.get(eventType);
         if (listeners) {
@@ -349,16 +436,12 @@ class ImxViewerComponent {
         if (this.selectieInfos) {
             this.selectieInfos.forEach(selectieInfo => {
                 selectieInfo.ids.forEach(id => {
-                    let elems = this.getSvgParent().querySelectorAll('.p' + id);
-                    if (elems.length === 0) {
-                        elems = this.getSvgParent().querySelectorAll('#p' + id);
-                    }
-                    for (let i = 0; i < elems.length; i++) {
-                        ClassesUtil.addClass(elems.item(i), 'imxview-selected');
+                    this.puicHelper.getAllElementsForPuic(id).forEach(elem => {
+                        ClassesUtil.addClass(elem, 'imxview-selected');
                         if ('' !== selectieInfo.clazz) {
-                            ClassesUtil.addClass(elems.item(i), 'imxview-selected-' + selectieInfo.clazz);
+                            ClassesUtil.addClass(elem, 'imxview-selected-' + selectieInfo.clazz);
                         }
-                    }
+                    });
                 });
             });
         }
@@ -377,31 +460,39 @@ class ImxViewerComponent {
         };
     }
     updateDom(svg) {
-        const svgGroup = this.getSvgParent().firstElementChild;
+        const svgGroup = this.getSvgParent().getElementsByClassName('svg-pan-zoom_viewport')[0];
         svgGroup.innerHTML = svg.substring(svg.indexOf('<svg'));
         this.svgPanZoomRef.updateBBox();
         this.svgPanZoomRef.center();
     }
-    getSvgParent() {
-        return this.svgParentRef.nativeElement;
+    delayedClickAreaCreation() {
+        if (this.svgGeladen && this.useClickArea) {
+            const clickareaIds = new Set([...this.clickableIds, ...this.rightClickableIds,
+                ...this.popoverInfos.flatMap(pi => pi.puicArray)]);
+            this.clickAreaService.delayedClickAreaCreation(clickareaIds);
+        }
     }
 }
 ImxViewerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'imx-viewer',
-                template: "<div id=\"imxviewer\">\n    <div id=\"svgContainer\" class=\"col-md-12 top10\" [hidden]=\"errors\" (click)=\"hidePopOver()\">\n        <svg #svgParent xmlns=\"http://www.w3.org/2000/svg\">\n        </svg>\n    </div>\n    <div id=\"popover\" class=\"popover top bs-popover-top\" [ngStyle]=\"popoverStyle\" (mouseleave)=\"hidePopOver()\">\n        <div class=\"arrow\"></div>\n        <h3 class=\"popover-header\" *ngIf=\"popoverTitleContent !== undefined\">{{popoverTitleContent}}</h3>\n        <div class=\"popover-body\" [innerHTML]=\"popoverHtmlContent\"></div>\n    </div>\n</div>\n",
-                styles: [".popover{background-clip:padding-box;background-color:#fff;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;left:0;letter-spacing:normal;line-break:auto;line-height:1.5;max-width:100%;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;top:0;visibility:hidden;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:break-word;z-index:1060}.popover,.popover .arrow{display:block;position:absolute}.popover .arrow{height:.5rem;left:40%;margin:0 .3rem;width:1rem}.popover .arrow:after,.popover .arrow:before{border-color:transparent;border-style:solid;content:\"\";display:block;position:absolute}.bs-popover-auto[x-placement^=top],.bs-popover-top{margin-bottom:.5rem}.bs-popover-auto[x-placement^=top]>.arrow,.bs-popover-top>.arrow{bottom:calc(-.5rem - 1px)}.bs-popover-auto[x-placement^=top]>.arrow:before,.bs-popover-top>.arrow:before{border-top-color:rgba(0,0,0,.25);border-width:.5rem .5rem 0;bottom:0}.bs-popover-auto[x-placement^=top]>.arrow:after,.bs-popover-top>.arrow:after{border-top-color:#fff;border-width:.5rem .5rem 0;bottom:1px}.bs-popover-auto[x-placement^=right],.bs-popover-right{margin-left:.5rem}.bs-popover-auto[x-placement^=right]>.arrow,.bs-popover-right>.arrow{height:1rem;left:calc(-.5rem - 1px);margin:.3rem 0;width:.5rem}.bs-popover-auto[x-placement^=right]>.arrow:before,.bs-popover-right>.arrow:before{border-right-color:rgba(0,0,0,.25);border-width:.5rem .5rem .5rem 0;left:0}.bs-popover-auto[x-placement^=right]>.arrow:after,.bs-popover-right>.arrow:after{border-right-color:#fff;border-width:.5rem .5rem .5rem 0;left:1px}.bs-popover-auto[x-placement^=bottom],.bs-popover-bottom{margin-top:.5rem}.bs-popover-auto[x-placement^=bottom]>.arrow,.bs-popover-bottom>.arrow{top:calc(-.5rem - 1px)}.bs-popover-auto[x-placement^=bottom]>.arrow:before,.bs-popover-bottom>.arrow:before{border-bottom-color:rgba(0,0,0,.25);border-width:0 .5rem .5rem;top:0}.bs-popover-auto[x-placement^=bottom]>.arrow:after,.bs-popover-bottom>.arrow:after{border-bottom-color:#fff;border-width:0 .5rem .5rem;top:1px}.bs-popover-auto[x-placement^=bottom] .popover-header:before,.bs-popover-bottom .popover-header:before{border-bottom:1px solid #f7f7f7;content:\"\";display:block;left:50%;margin-left:-.5rem;position:absolute;top:0;width:1rem}.bs-popover-auto[x-placement^=left],.bs-popover-left{margin-right:.5rem}.bs-popover-auto[x-placement^=left]>.arrow,.bs-popover-left>.arrow{height:1rem;margin:.3rem 0;right:calc(-.5rem - 1px);width:.5rem}.bs-popover-auto[x-placement^=left]>.arrow:before,.bs-popover-left>.arrow:before{border-left-color:rgba(0,0,0,.25);border-width:.5rem 0 .5rem .5rem;right:0}.bs-popover-auto[x-placement^=left]>.arrow:after,.bs-popover-left>.arrow:after{border-left-color:#fff;border-width:.5rem 0 .5rem .5rem;right:1px}.popover-header{background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px);font-size:1rem;margin-bottom:0;padding:.5rem .75rem}.popover-header:empty{display:none}.popover-body{color:#212529;padding:.5rem .75rem}"]
+                template: "<div id=\"imxviewer\">\n    <div id=\"svgContainer\" class=\"col-md-12 top10\" [hidden]=\"errors\" (click)=\"hidePopOver()\">\n        <svg #svgParent xmlns=\"http://www.w3.org/2000/svg\"></svg>\n    </div>\n    <div id=\"popover\" class=\"popover top bs-popover-top\" [ngStyle]=\"popoverStyle\" (mouseleave)=\"hidePopOver()\">\n        <div class=\"arrow\"></div>\n        <h3 class=\"popover-header\" *ngIf=\"popoverTitleContent !== undefined\">{{popoverTitleContent}}</h3>\n        <div class=\"popover-body\" [innerHTML]=\"popoverHtmlContent\"></div>\n    </div>\n</div>\n",
+                styles: [".popover{background-clip:padding-box;background-color:#fff;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif;font-size:.875rem;font-style:normal;font-weight:400;left:0;letter-spacing:normal;line-break:auto;line-height:1.5;max-width:100%;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;top:0;visibility:hidden;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:break-word;z-index:1060}.popover,.popover .arrow{display:block;position:absolute}.popover .arrow{height:.5rem;left:40%;margin:0 .3rem;width:1rem}.popover .arrow:after,.popover .arrow:before{border-color:transparent;border-style:solid;content:\"\";display:block;position:absolute}.bs-popover-auto[x-placement^=top],.bs-popover-top{margin-bottom:.5rem}.bs-popover-auto[x-placement^=top]>.arrow,.bs-popover-top>.arrow{bottom:calc(-.5rem - 1px)}.bs-popover-auto[x-placement^=top]>.arrow:before,.bs-popover-top>.arrow:before{border-top-color:rgba(0,0,0,.25);border-width:.5rem .5rem 0;bottom:0}.bs-popover-auto[x-placement^=top]>.arrow:after,.bs-popover-top>.arrow:after{border-top-color:#fff;border-width:.5rem .5rem 0;bottom:1px}.bs-popover-auto[x-placement^=right],.bs-popover-right{margin-left:.5rem}.bs-popover-auto[x-placement^=right]>.arrow,.bs-popover-right>.arrow{height:1rem;left:calc(-.5rem - 1px);margin:.3rem 0;width:.5rem}.bs-popover-auto[x-placement^=right]>.arrow:before,.bs-popover-right>.arrow:before{border-right-color:rgba(0,0,0,.25);border-width:.5rem .5rem .5rem 0;left:0}.bs-popover-auto[x-placement^=right]>.arrow:after,.bs-popover-right>.arrow:after{border-right-color:#fff;border-width:.5rem .5rem .5rem 0;left:1px}.bs-popover-auto[x-placement^=bottom],.bs-popover-bottom{margin-top:.5rem}.bs-popover-auto[x-placement^=bottom]>.arrow,.bs-popover-bottom>.arrow{top:calc(-.5rem - 1px)}.bs-popover-auto[x-placement^=bottom]>.arrow:before,.bs-popover-bottom>.arrow:before{border-bottom-color:rgba(0,0,0,.25);border-width:0 .5rem .5rem;top:0}.bs-popover-auto[x-placement^=bottom]>.arrow:after,.bs-popover-bottom>.arrow:after{border-bottom-color:#fff;border-width:0 .5rem .5rem;top:1px}.bs-popover-auto[x-placement^=bottom] .popover-header:before,.bs-popover-bottom .popover-header:before{border-bottom:1px solid #f7f7f7;content:\"\";display:block;left:50%;margin-left:-.5rem;position:absolute;top:0;width:1rem}.bs-popover-auto[x-placement^=left],.bs-popover-left{margin-right:.5rem}.bs-popover-auto[x-placement^=left]>.arrow,.bs-popover-left>.arrow{height:1rem;margin:.3rem 0;right:calc(-.5rem - 1px);width:.5rem}.bs-popover-auto[x-placement^=left]>.arrow:before,.bs-popover-left>.arrow:before{border-left-color:rgba(0,0,0,.25);border-width:.5rem 0 .5rem .5rem;right:0}.bs-popover-auto[x-placement^=left]>.arrow:after,.bs-popover-left>.arrow:after{border-left-color:#fff;border-width:.5rem 0 .5rem .5rem;right:1px}.popover-header{background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px);font-size:1rem;margin-bottom:0;padding:.5rem .75rem}.popover-header:empty{display:none}.popover-body{color:#212529;padding:.5rem .75rem}"]
             },] }
 ];
 ImxViewerComponent.ctorParameters = () => [
     { type: undefined, decorators: [{ type: Inject, args: [DocumentToken,] }] },
-    { type: HttpClient }
+    { type: HttpClient },
+    { type: ClickareaService },
+    { type: PuicHelperService }
 ];
 ImxViewerComponent.propDecorators = {
+    useClickArea: [{ type: Input }],
+    inlineDgnCssImport: [{ type: Input }],
     svgInfo: [{ type: Input }],
+    selectieInfos: [{ type: Input }],
     clickableIds: [{ type: Input }],
     rightClickableIds: [{ type: Input }],
-    selectieInfos: [{ type: Input }],
     popoverInfos: [{ type: Input }],
     svgParentRef: [{ type: ViewChild, args: ['svgParent', { static: true },] }],
     clickHandler: [{ type: Output }],
@@ -455,5 +546,5 @@ class SelectieInfo {
  * Generated bundle index. Do not edit.
  */
 
-export { ImxViewerComponent, ImxViewerModule, Point, PopoverInfo, SelectieEvent, SelectieInfo, SvgInfo, ɵ0, DocumentToken as ɵa, documentProvider as ɵb };
+export { ImxViewerComponent, ImxViewerModule, Point, PopoverInfo, SelectieEvent, SelectieInfo, SvgInfo, ɵ0, DocumentToken as ɵa, documentProvider as ɵb, ClickareaService as ɵc, PuicHelperService as ɵd };
 //# sourceMappingURL=loxia-imx-viewer.js.map