@provoly/dashboard 0.11.0

package/fesm2022/provoly-dashboard-widgets-widget-graph.mjs

@@ -0,0 +1,656 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, ViewEncapsulation, ViewContainerRef, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
+import * as i5 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i2 from '@provoly/dashboard';
+import { DataWidgetComponent, ClassSelectors, DashboardSelectors, RelationTypesActions, WIDGET_HEADER_HEIGHT, RelationTypesSelectors, DashboardActions, ContextMenuActions, BaseWidgetModule, tooltipLoader, PryCoreModule, PryDashboardModule, PrySelectModule, PryIconModule, PryToggleModule, PryOverlayModule, PryI18nModule, PryRangeModule } from '@provoly/dashboard';
+import { forceSimulation, forceManyBody, forceLink, forceX, forceY, forceCollide, forceCenter } from 'd3-force';
+import { BehaviorSubject, Subject, map, filter, combineLatest, delay, mergeMap, from, auditTime } from 'rxjs';
+import { tap } from 'rxjs/operators';
+import * as i1 from '@ngrx/store';
+import * as i3 from '@angular/platform-browser';
+
+const simpleSimulation = (_nodes, links, options, size) => {
+    let tickFn = () => { };
+    const nodes = topologicalSort(_nodes, links);
+    const nodesByLevel = [];
+    nodesByLevel[0] = [nodes[0]];
+    let remainingNodes = getRemainingNodes(nodesByLevel, nodes);
+    let currentLevel = 1;
+    let previousRemainingNodes = 0;
+    while (remainingNodes.length > 0) {
+        if (previousRemainingNodes == remainingNodes.length) {
+            // No new node reached, add one of the remaining node to the set, and restart looping
+            currentLevel = 1;
+            previousRemainingNodes = 0;
+            nodesByLevel[0].push(remainingNodes[0]);
+            remainingNodes = getRemainingNodes(nodesByLevel, nodes);
+        }
+        let nextNodes = nodesByLevel[currentLevel - 1]
+            .map((rootNode) => links
+            .filter((link) => rootNode.index === link.source)
+            .map((link) => nodes.find((node) => link.target === node.index))
+            .filter((node) => !!node))
+            .reduce((p, c) => [...p, ...c], []);
+        nextNodes = nextNodes.filter((node) => remainingNodes.map((remainingNode) => remainingNode.id).includes(node.id));
+        nodesByLevel[currentLevel] = (nodesByLevel[currentLevel] ?? []).concat(...nextNodes);
+        previousRemainingNodes = remainingNodes.length;
+        remainingNodes = getRemainingNodes(nodesByLevel, nodes);
+        currentLevel++;
+    }
+    let interval;
+    const that = {
+        on: (type, fn) => {
+            if (type === 'tick') {
+                tickFn = fn;
+            }
+            return that;
+        },
+        stop: () => {
+            clearInterval(interval);
+            return that;
+        },
+        start: () => {
+            interval = setInterval(() => {
+                calculateLayout(nodesByLevel, options, size);
+                tickFn();
+            }, 100);
+            return that;
+        },
+        restart: () => {
+            that.stop().start();
+            return that;
+        },
+        alphaTarget: () => {
+            return that;
+        }
+    };
+    return that.start();
+};
+const getUsedNodes = (nodesByLevel) => {
+    return nodesByLevel.map((nodes) => (nodes ?? []).map((node) => node?.id)).reduce((p, c) => [...p, ...c], []);
+};
+const getRemainingNodes = (nodesByLevel, allNodes) => {
+    const usedNodes = getUsedNodes(nodesByLevel);
+    return allNodes.filter((node) => !usedNodes.includes(node.id));
+};
+const calculateLayout = (nodesByLevel, options, size) => {
+    const margin = options.nodeRadius * 2;
+    const hSpacing = options.nodeRadius * 8;
+    const vSpacing = options.nodeRadius * 2;
+    nodesByLevel.forEach((nodesOfLevel, lvl) => {
+        nodesOfLevel
+            .filter((node) => !!node)
+            .forEach((node, idxInLevel) => {
+            node.x = node.fx ?? margin + 10 + hSpacing * lvl;
+            node.y = node.fy ?? margin + idxInLevel * vSpacing;
+        });
+    });
+};
+const topologicalSort = (nodes, links) => {
+    const result = [];
+    nodes.forEach((node) => (node.topologicalColor = 'WHITE'));
+    nodes.forEach((node) => {
+        if (node.topologicalColor === 'WHITE') {
+            recursiveTopologicalSort(nodes, result, node, links);
+        }
+    });
+    return result.reverse();
+};
+const recursiveTopologicalSort = (nodes, result, node, links) => {
+    node.topologicalColor = 'GREY';
+    const neighbors = nodes.filter((potentialNeighbor) => links.filter((link) => link.target === potentialNeighbor.index && link.source === node.index).length > 0);
+    neighbors.forEach((neighbor) => {
+        if (neighbor.topologicalColor === 'WHITE') {
+            recursiveTopologicalSort(nodes, result, neighbor, links);
+        }
+    });
+    node.topologicalColor = 'BLACK';
+    result.push(node);
+};
+
+class PryWidgetForceGraphCssComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryWidgetForceGraphCssComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: PryWidgetForceGraphCssComponent, selector: "pry-widget-force-graph-css", ngImport: i0, template: '', isInline: true, styles: [""], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryWidgetForceGraphCssComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-widget-force-graph-css', template: '', encapsulation: ViewEncapsulation.None }]
+        }] });
+
+class WidgetGraphComponent extends DataWidgetComponent {
+    constructor(store, tooltipFactoryService, translateService, symbolService, sanitizer, el, _injector) {
+        super(store, el);
+        this.tooltipFactoryService = tooltipFactoryService;
+        this.translateService = translateService;
+        this.symbolService = symbolService;
+        this.sanitizer = sanitizer;
+        this._injector = _injector;
+        this.context = null;
+        this.itemsAsNodes = [];
+        this.relationsAsLinks = [];
+        this.tooltip$ = new BehaviorSubject({
+            x: 0,
+            y: 0,
+            item: null,
+            display: false
+        });
+        this.dragging = false;
+        this.relationTypes = [];
+        this.move$ = new Subject();
+        this.mode = 'move';
+        this.offset = [0, 0];
+        this.additionnalOffset = [0, 0];
+        this.layouts = [{ key: 'simple' }, { key: 'force' }];
+        this.mouseDown = false;
+        this.classes$ = this.store.select(ClassSelectors.classes);
+        this.selectedIds$ = this.store.select(DashboardSelectors.selectedItemIds);
+        this.store.dispatch(RelationTypesActions.load());
+        this.options$ = this.manifest$.pipe(map((manifest) => ({
+            linkStrokeColor: '#999',
+            linkStrokeOpacity: 0.6,
+            linkStrokeWidth: 1.5,
+            linkStrokeLinecap: 'round',
+            nodeStrokeColor: '#fff',
+            nodeStrokeWidth: 1.5,
+            nodeStrokeOpacity: 1,
+            nodeRadius: 25,
+            layout: 'simple',
+            ...manifest.options
+        })));
+        this.subscriptions.add(this.options$.pipe(filter((opt) => !!opt)).subscribe((options) => {
+            this.options = options;
+            this.optionsCopy = { ...JSON.parse(JSON.stringify(options)) };
+        }));
+        this.viewSize$ = combineLatest([this.widgetSize$, this.displayHeader$]).pipe(delay(10), map(([size, header]) => [size.width, size.height - (header ? WIDGET_HEADER_HEIGHT : 0)]), tap((size) => {
+            if (this.canvas) {
+                this.canvas.nativeElement.width = size[0];
+                this.canvas.nativeElement.height = size[1];
+            }
+        }));
+        this.allItemsWithImages$ = this.allItems$.pipe(mergeMap((items) => from(new Promise((resolve, reject) => {
+            Promise.all(items.map((item) => this.symbolService.getSymbol(item))).then((canvases) => resolve(items.map((item, idx) => ({
+                item,
+                image: canvases[idx]
+            }))));
+        }))));
+        combineLatest([
+            this.allItemsWithImages$,
+            this.resultSet$.pipe(map((rs) => rs.relations)),
+            this.viewSize$,
+            this.options$,
+            this.store.select(RelationTypesSelectors.relationsTypes).pipe(tap((rt) => (this.relationTypes = rt))),
+            this.selectedIds$
+        ]).subscribe(([items, relations, size, options, relationTypes, selectedIds]) => {
+            this.itemsAsNodes = items.map((itemWithImage, idx) => ({
+                index: idx,
+                item: itemWithImage.item,
+                id: itemWithImage.item.id,
+                image: itemWithImage.image,
+                selected: selectedIds.indexOf(itemWithImage.item.id) > -1
+            }));
+            const unknownImage = new Image();
+            unknownImage.src = '/assets/svgs/question-line.svg';
+            // Complete missing nodes
+            relations.forEach((relation) => {
+                if (!this.itemsAsNodes.find((item) => item.id === relation.source)) {
+                    this.itemsAsNodes.push({
+                        index: this.itemsAsNodes.length,
+                        item: { id: relation.source, oClass: 'unknown', attributes: {} },
+                        id: relation.source,
+                        image: unknownImage,
+                        selected: selectedIds.indexOf(relation.source) > -1
+                    });
+                }
+                if (!this.itemsAsNodes.find((item) => item.id === relation.destination)) {
+                    this.itemsAsNodes.push({
+                        index: this.itemsAsNodes.length,
+                        item: { id: relation.destination, oClass: 'unknown', attributes: {} },
+                        id: relation.destination,
+                        image: unknownImage,
+                        selected: selectedIds.indexOf(relation.destination) > -1
+                    });
+                }
+            });
+            this.relationsAsLinks = relations.map((relation) => ({
+                source: this.itemsAsNodes.find((item) => item.id === relation.source)?.index ?? -1,
+                target: this.itemsAsNodes.find((item) => item.id === relation.destination)?.index ?? -1,
+                relation
+            }));
+            if (this.simulation) {
+                this.simulation.stop();
+            }
+            this.simulation = this.initSimulation(options, size).on('tick', this.draw(size, options, relationTypes));
+        });
+        this.subscriptions.add(this.tooltip$.pipe(filter((tooltip) => !!tooltip && !!tooltip.item)).subscribe((tooltip) => {
+            let type = tooltip.item.item.oClass;
+            this.tooltip.clear();
+            const component$ = this.tooltipFactoryService.generateTooltip(type, this._injector, this.tooltip);
+            component$.subscribe((component) => {
+                if (component) {
+                    component.instance.data.item = tooltip.item.item;
+                }
+            });
+        }));
+        this.move$.pipe(auditTime(30)).subscribe(($event) => this.moveCallback($event));
+        this.bottomLeft$ = combineLatest([this.widgetSize$, this.displayHeader$]).pipe(map(([size, displayHeader]) => `translate(10px ,calc(13px - ${displayHeader ? WIDGET_HEADER_HEIGHT + 'px' : '0px'}))`), delay(10));
+    }
+    initSimulation(options, size) {
+        switch (options.layout) {
+            case 'simple':
+                return simpleSimulation(this.itemsAsNodes, this.relationsAsLinks, options, size);
+            case 'force':
+            default:
+                return forceSimulation(this.itemsAsNodes)
+                    .force('charge', forceManyBody())
+                    .force('link', forceLink(this.relationsAsLinks).distance(50).strength(0.1))
+                    .force('x', forceX())
+                    .force('y', forceY())
+                    .force('collide', forceCollide(options.nodeRadius * 3))
+                    .force('center', forceCenter(size[0] / 2, size[1] / 2));
+        }
+    }
+    emitManifest() {
+        this.manifestModified.emit({
+            widgetIndex: this.widgetIndex,
+            manifest: { ...this.manifest, options: this.optionsCopy }
+        });
+    }
+    refresh() {
+        this.draw([this.canvas.nativeElement.width, this.canvas.nativeElement.height], this.options, this.relationTypes)();
+    }
+    ngAfterViewInit() {
+        this.context = this.canvas.nativeElement.getContext('2d');
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        if (this.simulation) {
+            this.simulation.stop();
+        }
+    }
+    changeMode(mode) {
+        this.mode = mode;
+    }
+    changeLayout($event) {
+        this.optionsCopy.layout = $event;
+    }
+    changeNodeRadius($event) {
+        this.optionsCopy.nodeRadius = $event;
+    }
+    /**
+     * Drawing things
+     */
+    draw(size, options, relationTypes) {
+        return () => {
+            if (this.context) {
+                // Clear canvas
+                this.context.clearRect(0, 0, size[0], size[1]);
+                // Drawing links
+                this.context.save();
+                this.drawLinks(options, relationTypes);
+                this.context.restore();
+                // Drawing nodes
+                this.context.save();
+                this.drawNodes(options);
+                this.context.restore();
+                // Drawing selection rectangle if needed
+                if (this.selectRect) {
+                    this.context.save();
+                    this.drawSelectionRect();
+                    this.context.restore();
+                }
+            }
+        };
+    }
+    drawSelectionRect() {
+        if (this.context && this.selectRect && this.mode === 'rectangle') {
+            this.context.globalAlpha = 0.3;
+            this.context.fillStyle = '#bcdcda';
+            const minX = Math.min(this.selectRect.start.x, this.selectRect.end.x);
+            const minY = Math.min(this.selectRect.start.y, this.selectRect.end.y);
+            const dX = Math.abs(this.selectRect.start.x - this.selectRect.end.x);
+            const dY = Math.abs(this.selectRect.start.y - this.selectRect.end.y);
+            this.context.rect(minX, minY, dX, dY);
+            this.context.fill();
+        }
+    }
+    drawNodes(options) {
+        if (this.context) {
+            this.context.globalAlpha = options.nodeStrokeOpacity;
+            for (const [i, node] of this.itemsAsNodes.entries()) {
+                this.context.beginPath();
+                this.context.moveTo((node.x ?? 0) + this.globalOffset[0], (node.y ?? 0) + this.globalOffset[1]);
+                this.context.arc((node.x ?? 0) + this.globalOffset[0], (node.y ?? 0) + this.globalOffset[1], options.nodeRadius / 2 + 8, 0, 2 * Math.PI, false);
+                this.context.fillStyle = node.selected ? '#569a9c' : node.item.oClass === 'unknown' ? '#e2a7a7' : '#ecedf4';
+                this.context.strokeStyle = node.selected ? '#569a9c' : node.item.oClass === 'unknown' ? '#e2a7a7' : '#ecedf4';
+                this.context.fill();
+                this.context.stroke();
+                this.context.drawImage(node.image, (node.x ?? 0) + this.globalOffset[0] - options.nodeRadius / 2, (node.y ?? 0) + this.globalOffset[1] - options.nodeRadius / 2, options.nodeRadius, options.nodeRadius);
+            }
+        }
+    }
+    drawLinks(options, relationTypes) {
+        if (this.context) {
+            this.context.globalAlpha = options.linkStrokeOpacity;
+            for (const [i, link] of this.relationsAsLinks.entries()) {
+                this.context.beginPath();
+                const sourceNode = this.itemsAsNodes.find((item) => item.id === link.relation.source);
+                let targetNode = this.itemsAsNodes.find((item) => item.id === link.relation.destination);
+                if (link.source === link.target && targetNode) {
+                    this.context.moveTo((sourceNode?.x ?? 0) + this.globalOffset[0], (sourceNode?.y ?? 0) + this.globalOffset[1]);
+                    this.context.bezierCurveTo((sourceNode?.x ?? 0) - 10 + this.globalOffset[0], (sourceNode?.y ?? 0) - 60 + this.globalOffset[1], (sourceNode?.x ?? 0) + 120 + this.globalOffset[0], (sourceNode?.y ?? 0) + this.globalOffset[1], (sourceNode?.x ?? 0) - 10 + this.globalOffset[0], (sourceNode?.y ?? 0) + 20 + this.globalOffset[1]);
+                    const { middleX, middleY, angle } = this.drawSelfRelationTextLink(link, sourceNode, relationTypes, options);
+                    // arrow
+                    this.drawArrow((targetNode?.x ?? 0) + 120 + this.globalOffset[0], (targetNode?.y ?? 0) + this.globalOffset[1], middleX, middleY + 3, angle - 100);
+                }
+                else {
+                    this.context.moveTo((sourceNode?.x ?? 0) + this.globalOffset[0], (sourceNode?.y ?? 0) + this.globalOffset[1]);
+                    this.context.lineTo((targetNode?.x ?? 0) + this.globalOffset[0], (targetNode?.y ?? 0) + this.globalOffset[1]);
+                    const { middleX, middleY, angle } = this.drawTextLink(link, sourceNode, targetNode, relationTypes, options);
+                    // arrow
+                    this.drawArrow((targetNode?.x ?? 0) + this.globalOffset[0], (targetNode?.y ?? 0) + this.globalOffset[1], middleX, middleY, angle);
+                }
+            }
+        }
+    }
+    drawSelfRelationTextLink(link, sourceNode, relationTypes, options) {
+        const middleX = (sourceNode?.x ?? 0) + this.globalOffset[0] + 45;
+        const middleY = (sourceNode?.y ?? 0) + this.globalOffset[1] - 20;
+        let angle = Math.atan2(sourceNode?.y ?? 0, sourceNode?.x ?? 0);
+        let drawAngle = angle;
+        return this.drawText(middleX, middleY, angle, relationTypes, options, link, drawAngle);
+    }
+    drawTextLink(link, sourceNode, targetNode, relationTypes, options) {
+        const middleX = ((sourceNode?.x ?? 0) + (targetNode?.x ?? 0)) / 2 + this.globalOffset[0];
+        const middleY = ((sourceNode?.y ?? 0) + (targetNode?.y ?? 0)) / 2 + this.globalOffset[1];
+        let angle = Math.atan2((targetNode?.y ?? 0) - (sourceNode?.y ?? 0), (targetNode?.x ?? 0) - (sourceNode?.x ?? 0));
+        let drawAngle = angle;
+        if (this.context) {
+            if ((sourceNode?.x ?? 0) > (targetNode?.x ?? 0)) {
+                drawAngle += Math.PI;
+            }
+        }
+        return this.drawText(middleX, middleY, angle, relationTypes, options, link, drawAngle);
+    }
+    drawText(middleX, middleY, angle, relationTypes, options, link, drawAngle) {
+        if (this.context) {
+            this.context.font = '10px Ubuntu';
+            const relationType = link.relation.relationType;
+            this.context.save();
+            this.context.translate(middleX, middleY);
+            this.context.rotate(drawAngle);
+            this.context.textAlign = 'center';
+            this.context.fillText(relationTypes.find((relT) => relT.id === relationType)?.name ?? relationType, 0, -7);
+            this.context.strokeStyle = options.linkStrokeColor;
+            this.context.lineWidth = options.linkStrokeWidth;
+            this.context.stroke();
+            this.context.restore();
+        }
+        return { middleX, middleY, angle };
+    }
+    drawArrow(targetX, targetY, middleX, middleY, angle) {
+        if (this.context) {
+            const width = 1;
+            const headlen = 10;
+            // This makes it so the end of the arrow head is located at tox, toy, don't ask where 1.15 comes from
+            targetX -= Math.cos(angle) * (width * 1.15);
+            targetY -= Math.sin(angle) * (width * 1.15);
+            //starting a new path from the head of the arrow to one of the sides of the point
+            this.context.beginPath();
+            this.context.moveTo(middleX, middleY);
+            this.context.lineTo(middleX - headlen * Math.cos(angle - Math.PI / 7), middleY - headlen * Math.sin(angle - Math.PI / 7));
+            //path from the side point of the arrow, to the other side point
+            this.context.lineTo(middleX - headlen * Math.cos(angle + Math.PI / 7), middleY - headlen * Math.sin(angle + Math.PI / 7));
+            //path from the side point back to the tip of the arrow, and then again to the opposite side point
+            this.context.lineTo(middleX, middleY);
+            this.context.lineTo(middleX - headlen * Math.cos(angle - Math.PI / 7), middleY - headlen * Math.sin(angle - Math.PI / 7));
+            //draws the paths created above
+            this.context.lineWidth = width;
+            this.context.stroke();
+            this.context.fill();
+        }
+    }
+    /**
+     * Mouse Management
+     */
+    onMouseDown($event) {
+        const nodes = this.findNodes($event);
+        this.draggedNode = nodes[0];
+        if (this.draggedNode) {
+            this.simulation.alphaTarget(0.3).restart();
+            this.draggedNode.fx = this.draggedNode.x;
+            this.draggedNode.fy = this.draggedNode.y;
+        }
+        else {
+            this.selectRect = {
+                start: { x: $event.offsetX, y: $event.offsetY },
+                end: { x: $event.offsetX, y: $event.offsetY }
+            };
+            this.refresh();
+        }
+        this.mouseDown = true;
+    }
+    onMouseMove($event) {
+        this.move$.next($event);
+        if (this.mouseDown) {
+            this.dragging = true;
+        }
+    }
+    moveCallback($event) {
+        if (this.draggedNode) {
+            this.draggedNode.fx = $event.offsetX - this.globalOffset[0];
+            this.draggedNode.fy = $event.offsetY - this.globalOffset[1];
+        }
+        else {
+            if (this.selectRect) {
+                this.selectRect.end = { x: $event.offsetX, y: $event.offsetY };
+                if (this.mode === 'move') {
+                    this.additionnalOffset = [
+                        this.selectRect.end.x - this.selectRect.start.x,
+                        this.selectRect.end.y - this.selectRect.start.y
+                    ];
+                }
+            }
+            this.refresh();
+        }
+        // display tooltip for nodes
+        const nodes = this.findNodes($event);
+        this.tooltip$.next({ item: nodes[0], display: nodes.length > 0, x: $event.offsetX, y: $event.offsetY });
+    }
+    onMouseUp($event, leave = false) {
+        if ($event.button !== 2) {
+            if (this.dragging) {
+                if (this.draggedNode) {
+                    this.simulation.alphaTarget(0);
+                    if (this.optionsCopy?.layout === 'force') {
+                        this.draggedNode.fx = null;
+                        this.draggedNode.fy = null;
+                    }
+                }
+                else {
+                    if (this.mode === 'rectangle') {
+                        const nodes = this.findNodesInShaped(this.selectRect);
+                        this.store.dispatch(DashboardActions.selectMany({ ids: nodes.map((node) => node.item.id) }));
+                        this.refresh();
+                    }
+                    else {
+                        this.offset = [...this.globalOffset];
+                        this.additionnalOffset = [0, 0];
+                    }
+                }
+            }
+            else {
+                if (!leave) {
+                    const nodes = this.findNodes($event);
+                    if (nodes[0]?.item?.id) {
+                        this.store.dispatch(DashboardActions.select({ id: nodes[0]?.item?.id, cumulative: $event.shiftKey }));
+                    }
+                    else {
+                        this.store.dispatch(DashboardActions.select({ id: '', cumulative: $event.shiftKey }));
+                    }
+                }
+            }
+        }
+        this.mode = 'move';
+        this.selectRect = undefined;
+        this.draggedNode = undefined;
+        this.dragging = false;
+        this.mouseDown = false;
+    }
+    get globalOffset() {
+        return [this.offset[0] + this.additionnalOffset[0], this.offset[1] + this.additionnalOffset[1]];
+    }
+    contextMenu($event) {
+        if (this.manifest.contextMenu !== false) {
+            $event.preventDefault();
+            const nodes = this.findNodes($event);
+            if (nodes[0] && nodes[0].item) {
+                this.store.dispatch(ContextMenuActions.open({
+                    itemId: nodes[0].item.id,
+                    clientX: $event.clientX,
+                    clientY: $event.clientY,
+                    resultSet: Array.isArray(this.manifest.datasource) ? this.manifest.datasource[0] : this.manifest.datasource,
+                    from: 'graph'
+                }));
+            }
+        }
+        this.onMouseUp($event, true);
+    }
+    /**
+     * Finding Nodes
+     */
+    findNodes($event) {
+        return this.itemsAsNodes.filter((item) => Math.pow((item.x ?? 0) - $event.offsetX + this.globalOffset[0], 2) +
+            Math.pow((item.y ?? 0) + this.globalOffset[1] - $event.offsetY, 2) <
+            Math.pow(this.options.nodeRadius / 2 + 8, 2));
+    }
+    findNodesInShaped(shape) {
+        const minX = Math.min(shape.start.x, shape.end.x);
+        const maxX = Math.max(shape.start.x, shape.end.x);
+        const minY = Math.min(shape.start.y, shape.end.y);
+        const maxY = Math.max(shape.start.y, shape.end.y);
+        return this.itemsAsNodes.filter((item) => (item.x ?? 0) + this.globalOffset[0] > minX &&
+            (item.x ?? 0) + this.globalOffset[0] < maxX &&
+            (item.y ?? 0) + this.globalOffset[1] > minY &&
+            (item.y ?? 0) + this.globalOffset[1] < maxY);
+    }
+    toImage() {
+        return new Promise((resolve, reject) => {
+            resolve(this.canvas.nativeElement.toDataURL('image/png'));
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetGraphComponent, deps: [{ token: i1.Store }, { token: i2.TooltipFactoryService }, { token: i2.PryI18nService }, { token: i2.SymbolService }, { token: i3.DomSanitizer }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: WidgetGraphComponent, selector: "pry-widget-graph", viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<pry-widget-force-graph-css></pry-widget-force-graph-css>\n<div class=\"o-widget o-widget--graph\">\n  <pry-widget-header\n    [datasourceIds$]=\"datasourceIds$\"\n    *ngIf=\"displayHeader$ | async\"\n    [widgetIndex]=\"widgetIndex\"\n    [manifest]=\"manifest\"\n    (manifestModified)=\"manifestModified.emit($event)\"\n    [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n    #header\n  >\n    <pry-settings\n      (saveTriggered)=\"emitManifest()\"\n      [headerPresent]=\"displayHeader$ | async\"\n      [widgetIndex]=\"widgetIndex\"\n      [header]=\"header\"\n      [open$]=\"open$\"\n      class=\"o-settings\"\n    >\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label\" for=\"graph_layout\">{{ '@pry.widget.graph.layout' | i18n }}</label>\n        <pry-select\n          (ngModelChange)=\"changeLayout($event)\"\n          [itemsAsOption]=\"true\"\n          [items]=\"layouts\"\n          [ngModel]=\"optionsCopy!.layout\"\n          bindLabel=\"key\"\n          bindValue=\"key\"\n          id=\"graph_layout\"\n          class=\"a-pry-select\"\n        ></pry-select>\n      </div>\n\n      <div class=\"m-form-label-field\">\n        <pry-range\n          [ngModel]=\"optionsCopy!.nodeRadius\"\n          (ngModelChange)=\"changeNodeRadius($event)\"\n          labelTranslate=\"@pry.widget.graph.nodeRadius\"\n          min=\"10\"\n          max=\"200\"\n        ></pry-range>\n      </div>\n    </pry-settings>\n  </pry-widget-header>\n  <div class=\"no-result\" *ngIf=\"(allItemsWithImages$ | async)?.length === 0\">\n    <img\n      class=\"no-result__search\"\n      src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n      alt=\"{{ '@pry.widget.table.empty' | i18n }}\"\n      aria-hidden=\"true\"\n    />\n    <span class=\"no-result__text\">{{ '@pry.widget.graph.empty' | i18n }}</span>\n  </div>\n  <div class=\"m-btn-group -selection-choice\" [style.transform]=\"bottomLeft$ | async\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only\"\n      (click)=\"changeMode('move')\"\n      [class.-selected]=\"mode === 'move'\"\n      [pryTooltip]=\"infoTooltipMove\"\n      pryTooltipPosition=\"bottom\"\n      aria-describedby=\"infoTooltipMove_widgetMap\"\n    >\n      <pry-icon iconSvg=\"move\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.graph.move' | i18n }}</span>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only\"\n      (click)=\"changeMode('rectangle')\"\n      [class.-selected]=\"mode === 'rectangle'\"\n      [pryTooltip]=\"infoTooltipRect\"\n      pryTooltipPosition=\"bottom\"\n      aria-describedby=\"infoTooltipRect_widgetMap\"\n    >\n      <pry-icon iconSvg=\"rectangle\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.graph.rectangle' | i18n }}</span>\n    </button>\n  </div>\n\n  <canvas\n    #canvas\n    class=\"o-widget--graph__canvas\"\n    (mousemove)=\"onMouseMove($event)\"\n    (mousedown)=\"onMouseDown($event)\"\n    (mouseup)=\"onMouseUp($event)\"\n    (mouseleave)=\"onMouseUp($event, true)\"\n    (contextmenu)=\"contextMenu($event)\"\n  ></canvas>\n\n  <div class=\"selection-rectangle\" #selectionRectangle></div>\n\n  <div\n    class=\"m-tooltip m-tooltip--popup noevent\"\n    [style.display]=\"(tooltip$ | async)?.display ? 'block' : 'none'\"\n    [style.left.px]=\"((tooltip$ | async)?.x ?? 0) + 50\"\n    [style.top.px]=\"((tooltip$ | async)?.y ?? 0) + 50\"\n  >\n    <div #tooltip></div>\n  </div>\n</div>\n\n<ng-template #infoTooltipMove>\n  <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipMove_widgetMap\" aria-hidden=\"true\">\n    <span class=\"m-tooltip__text\">{{ '@pry.widget.graph.move' | i18n }}</span>\n  </div>\n</ng-template>\n\n<ng-template #infoTooltipRect>\n  <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipRect_widgetMap\" aria-hidden=\"true\">\n    <span class=\"m-tooltip__text\">{{ '@pry.widget.graph.rectangle' | i18n }}</span>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.SettingsComponent, selector: "pry-settings", inputs: ["widgetIndex", "isDisable", "headerPresent", "open$", "header"], outputs: ["saveTriggered"] }, { kind: "component", type: i2.PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: ["manifest", "additionalOptions", "headerOptions", "displayCount", "datasourceIds$", "widgetIndex"], outputs: ["manifestModified"] }, { kind: "component", type: i2.PrySelectComponent, selector: "pry-select", inputs: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "component", type: i2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "directive", type: i2.PryTooltipDirective, selector: "[pryTooltip]", inputs: ["pryTooltip", "styleReversed", "pryTooltipContext", "pryTooltipPosition", "pryTooltipShowDelay"] }, { kind: "component", type: i2.PryRangeComponent, selector: "pry-range", inputs: ["min", "max", "step", "disabled", "labelTranslate"] }, { kind: "component", type: PryWidgetForceGraphCssComponent, selector: "pry-widget-force-graph-css" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetGraphComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-widget-graph', changeDetection: ChangeDetectionStrategy.OnPush, template: "<pry-widget-force-graph-css></pry-widget-force-graph-css>\n<div class=\"o-widget o-widget--graph\">\n  <pry-widget-header\n    [datasourceIds$]=\"datasourceIds$\"\n    *ngIf=\"displayHeader$ | async\"\n    [widgetIndex]=\"widgetIndex\"\n    [manifest]=\"manifest\"\n    (manifestModified)=\"manifestModified.emit($event)\"\n    [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n    #header\n  >\n    <pry-settings\n      (saveTriggered)=\"emitManifest()\"\n      [headerPresent]=\"displayHeader$ | async\"\n      [widgetIndex]=\"widgetIndex\"\n      [header]=\"header\"\n      [open$]=\"open$\"\n      class=\"o-settings\"\n    >\n      <div class=\"m-form-label-field\">\n        <label class=\"a-label\" for=\"graph_layout\">{{ '@pry.widget.graph.layout' | i18n }}</label>\n        <pry-select\n          (ngModelChange)=\"changeLayout($event)\"\n          [itemsAsOption]=\"true\"\n          [items]=\"layouts\"\n          [ngModel]=\"optionsCopy!.layout\"\n          bindLabel=\"key\"\n          bindValue=\"key\"\n          id=\"graph_layout\"\n          class=\"a-pry-select\"\n        ></pry-select>\n      </div>\n\n      <div class=\"m-form-label-field\">\n        <pry-range\n          [ngModel]=\"optionsCopy!.nodeRadius\"\n          (ngModelChange)=\"changeNodeRadius($event)\"\n          labelTranslate=\"@pry.widget.graph.nodeRadius\"\n          min=\"10\"\n          max=\"200\"\n        ></pry-range>\n      </div>\n    </pry-settings>\n  </pry-widget-header>\n  <div class=\"no-result\" *ngIf=\"(allItemsWithImages$ | async)?.length === 0\">\n    <img\n      class=\"no-result__search\"\n      src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n      alt=\"{{ '@pry.widget.table.empty' | i18n }}\"\n      aria-hidden=\"true\"\n    />\n    <span class=\"no-result__text\">{{ '@pry.widget.graph.empty' | i18n }}</span>\n  </div>\n  <div class=\"m-btn-group -selection-choice\" [style.transform]=\"bottomLeft$ | async\">\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only\"\n      (click)=\"changeMode('move')\"\n      [class.-selected]=\"mode === 'move'\"\n      [pryTooltip]=\"infoTooltipMove\"\n      pryTooltipPosition=\"bottom\"\n      aria-describedby=\"infoTooltipMove_widgetMap\"\n    >\n      <pry-icon iconSvg=\"move\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.graph.move' | i18n }}</span>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"a-btn a-btn--icon-only\"\n      (click)=\"changeMode('rectangle')\"\n      [class.-selected]=\"mode === 'rectangle'\"\n      [pryTooltip]=\"infoTooltipRect\"\n      pryTooltipPosition=\"bottom\"\n      aria-describedby=\"infoTooltipRect_widgetMap\"\n    >\n      <pry-icon iconSvg=\"rectangle\"></pry-icon>\n      <span class=\"u-visually-hidden\">{{ '@pry.widget.graph.rectangle' | i18n }}</span>\n    </button>\n  </div>\n\n  <canvas\n    #canvas\n    class=\"o-widget--graph__canvas\"\n    (mousemove)=\"onMouseMove($event)\"\n    (mousedown)=\"onMouseDown($event)\"\n    (mouseup)=\"onMouseUp($event)\"\n    (mouseleave)=\"onMouseUp($event, true)\"\n    (contextmenu)=\"contextMenu($event)\"\n  ></canvas>\n\n  <div class=\"selection-rectangle\" #selectionRectangle></div>\n\n  <div\n    class=\"m-tooltip m-tooltip--popup noevent\"\n    [style.display]=\"(tooltip$ | async)?.display ? 'block' : 'none'\"\n    [style.left.px]=\"((tooltip$ | async)?.x ?? 0) + 50\"\n    [style.top.px]=\"((tooltip$ | async)?.y ?? 0) + 50\"\n  >\n    <div #tooltip></div>\n  </div>\n</div>\n\n<ng-template #infoTooltipMove>\n  <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipMove_widgetMap\" aria-hidden=\"true\">\n    <span class=\"m-tooltip__text\">{{ '@pry.widget.graph.move' | i18n }}</span>\n  </div>\n</ng-template>\n\n<ng-template #infoTooltipRect>\n  <div class=\"m-tooltip\" role=\"tooltip\" id=\"infoTooltipRect_widgetMap\" aria-hidden=\"true\">\n    <span class=\"m-tooltip__text\">{{ '@pry.widget.graph.rectangle' | i18n }}</span>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.TooltipFactoryService }, { type: i2.PryI18nService }, { type: i2.SymbolService }, { type: i3.DomSanitizer }, { type: i0.ElementRef }, { type: i0.Injector }]; }, propDecorators: { canvas: [{
+                type: ViewChild,
+                args: ['canvas']
+            }], tooltip: [{
+                type: ViewChild,
+                args: ['tooltip', { read: ViewContainerRef }]
+            }] } });
+
+const enTranslations = {
+    '@pry': {
+        widget: {
+            graph: {
+                unknown: 'Invisible object',
+                move: 'Move mode',
+                rectangle: 'Rectangle selection mode',
+                layout: 'Layout',
+                nodeRadius: 'Node radius',
+                empty: 'No data to display'
+            }
+        }
+    }
+};
+
+const frTranslations = {
+    '@pry': {
+        widget: {
+            graph: {
+                unknown: 'Objet non visible',
+                move: 'Mode déplacement',
+                rectangle: 'Sélection par rectangle',
+                layout: 'Disposition',
+                nodeRadius: 'Taille de noeud',
+                empty: 'Aucune donnée à afficher'
+            }
+        }
+    }
+};
+
+class WidgetGraphModule extends BaseWidgetModule {
+    constructor(tooltipFactoryService, pryTranslateService) {
+        super();
+        this.tooltipFactoryService = tooltipFactoryService;
+        this.pryTranslateService = pryTranslateService;
+        this.pryTranslateService.addLangObject('fr', 'widget-graph', frTranslations);
+        this.pryTranslateService.addLangObject('en', 'widget-graph', enTranslations);
+        this.tooltipFactoryService.addTooltipDefinitions({
+            link: {
+                name: 'link',
+                load: () => import('@provoly/dashboard/tooltips/cluster').then((module) => tooltipLoader(module, 'PryClusterTooltipModule'))
+            }
+        });
+    }
+    getComponent() {
+        return WidgetGraphComponent;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetGraphModule, deps: [{ token: i2.TooltipFactoryService }, { token: i2.PryI18nService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: WidgetGraphModule, declarations: [WidgetGraphComponent, PryWidgetForceGraphCssComponent], imports: [CommonModule,
+            FormsModule,
+            OverlayModule,
+            PryCoreModule,
+            PryDashboardModule,
+            PrySelectModule,
+            PryIconModule,
+            PryToggleModule,
+            PryOverlayModule,
+            PryI18nModule,
+            PryRangeModule], exports: [WidgetGraphComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetGraphModule, imports: [CommonModule,
+            FormsModule,
+            OverlayModule,
+            PryCoreModule,
+            PryDashboardModule,
+            PrySelectModule,
+            PryIconModule,
+            PryToggleModule,
+            PryOverlayModule,
+            PryI18nModule,
+            PryRangeModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetGraphModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [WidgetGraphComponent, PryWidgetForceGraphCssComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        OverlayModule,
+                        PryCoreModule,
+                        PryDashboardModule,
+                        PrySelectModule,
+                        PryIconModule,
+                        PryToggleModule,
+                        PryOverlayModule,
+                        PryI18nModule,
+                        PryRangeModule
+                    ],
+                    exports: [WidgetGraphComponent]
+                }]
+        }], ctorParameters: function () { return [{ type: i2.TooltipFactoryService }, { type: i2.PryI18nService }]; } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WidgetGraphComponent, WidgetGraphModule, simpleSimulation };
+//# sourceMappingURL=provoly-dashboard-widgets-widget-graph.mjs.map