@unovis/ts 1.0.0-beta.0

package/components/graph/index.js

@@ -0,0 +1,653 @@
+import { extent, min } from 'd3-array';
+import { select, pointer } from 'd3-selection';
+import { zoom, zoomTransform, zoomIdentity } from 'd3-zoom';
+import { drag } from 'd3-drag';
+import { interval } from 'd3-timer';
+import { ComponentCore } from '../../core/component/index.js';
+import { GraphDataModel } from '../../data-models/graph.js';
+import { isNumber, cloneDeep, find, clamp, getBoolean, isFunction, flatten, findIndex, shallowDiff, unique, clean } from '../../utils/data.js';
+import { stringToHtmlId } from '../../utils/misc.js';
+import { smartTransition } from '../../utils/d3.js';
+import { GraphLayoutType, GraphLinkArrowStyle } from './types.js';
+import { GraphConfig } from './config.js';
+import { background, graphGroup, root } from './style.js';
+import * as style from './modules/node/style.js';
+import { nodes, gNode, gNodeExit, node, nodeGauge, sideLabelGroup, label } from './modules/node/style.js';
+import { links, gLink, gLinkExit, link } from './modules/link/style.js';
+import { panels, gPanel, panel, panelSelection, label as label$1, labelText, sideIconGroup, sideIconShape, sideIconSymbol } from './modules/panel/style.js';
+import { createNodes, updateNodes, removeNodes, updateSelectedNodes, zoomNodesThrottled, zoomNodes } from './modules/node/index.js';
+import { getMaxNodeSize, getX, getY } from './modules/node/helper.js';
+import { createLinks, updateLinks, removeLinks, updateSelectedLinks, animateLinkFlow, zoomLinksThrottled, zoomLinks } from './modules/link/index.js';
+import { getLinkColor, LINK_MARKER_WIDTH, LINK_MARKER_HEIGHT, getDoubleArrowPath, getArrowPath } from './modules/link/helper.js';
+import { removePanels, createPanels, updatePanels } from './modules/panel/index.js';
+import { getMaxPanelPadding, setPanelForNodes, updatePanelNumNodes, updatePanelBBoxSize } from './modules/panel/helper.js';
+import { applyLayoutCircular, applyLayoutConcentric, applyLayoutForce, applyLayoutDagre, applyLayoutParallel } from './modules/layout.js';
+
+class Graph extends ComponentCore {
+    constructor(config) {
+        super();
+        this.config = new GraphConfig();
+        this.datamodel = new GraphDataModel();
+        this._firstRender = true;
+        this._recalculateLayout = false;
+        this._setPanels = false;
+        this._disableAutoFit = false;
+        this._isDragging = false;
+        this.events = {
+            [Graph.selectors.background]: {
+                click: this._onBackgroundClick.bind(this),
+            },
+            [Graph.selectors.node]: {
+                click: this._onNodeClick.bind(this),
+                mouseover: this._onNodeMouseOver.bind(this),
+                mouseout: this._onNodeMouseOut.bind(this),
+            },
+            [Graph.selectors.link]: {
+                click: this._onLinkClick.bind(this),
+                mouseover: this._onLinkMouseOver.bind(this),
+                mouseout: this._onLinkMouseOut.bind(this),
+            },
+        };
+        if (config)
+            this.config.init(config);
+        this._backgroundRect = this.g.append('rect').attr('class', background);
+        this._graphGroup = this.g.append('g').attr('class', graphGroup);
+        this._zoomBehavior = zoom()
+            .scaleExtent(this.config.zoomScaleExtent)
+            .on('zoom', (e) => this._onZoom(e.transform, e));
+        this._panelsGroup = this._graphGroup.append('g').attr('class', panels);
+        this._linksGroup = this._graphGroup.append('g').attr('class', links);
+        this._nodesGroup = this._graphGroup.append('g').attr('class', nodes);
+        this._defs = this._graphGroup.append('defs');
+    }
+    get selectedNode() {
+        return this._selectedNode;
+    }
+    get selectedLink() {
+        return this._selectedLink;
+    }
+    setData(data) {
+        const { config } = this;
+        this.datamodel.nodeSort = config.nodeSort;
+        this.datamodel.data = data;
+        this._recalculateLayout = true;
+        if (config.layoutAutofit)
+            this._fitLayout = true;
+        this._setPanels = true;
+        this._addSVGDefs();
+    }
+    setConfig(config) {
+        this._fitLayout = this._fitLayout || this.config.layoutType !== config.layoutType;
+        this._recalculateLayout = this._recalculateLayout || this._shouldLayoutRecalculate(config);
+        super.setConfig(config);
+        this._setPanels = true;
+    }
+    get bleed() {
+        var _a;
+        const { datamodel: { nodes }, config: { nodeSize } } = this;
+        const maxPanelPadding = getMaxPanelPadding(this._panels);
+        const maxNodeSize = getMaxNodeSize(nodes, nodeSize);
+        const extra = 20; // Extra padding to take into account labels
+        const padding = maxNodeSize * 0.5 + maxPanelPadding + extra;
+        const panelLabelHeight = ((_a = this._panels) === null || _a === void 0 ? void 0 : _a.length) ? 50 : 0;
+        return { top: padding + panelLabelHeight, bottom: padding, left: padding, right: padding };
+    }
+    _render(customDuration) {
+        const { config: { disableZoom, duration, layoutAutofit, panels }, datamodel } = this;
+        if (!datamodel.nodes && !datamodel.links)
+            return;
+        const animDuration = isNumber(customDuration) ? customDuration : duration;
+        this._backgroundRect
+            .attr('width', this._width)
+            .attr('height', this._height)
+            .attr('opacity', 0);
+        if ((this._prevWidth !== this._width || this._prevHeight !== this._height) && layoutAutofit) {
+            // Fit layout on resize
+            this._fitLayout = true;
+            this._prevWidth = this._width;
+            this._prevHeight = this._height;
+        }
+        // Apply layout
+        if (this._recalculateLayout) {
+            this._calculateLayout();
+            this._recalculateLayout = false;
+        }
+        if (this._setPanels) {
+            smartTransition(this._panelsGroup, duration / 2)
+                .style('opacity', (panels === null || panels === void 0 ? void 0 : panels.length) ? 1 : 0);
+            this._panels = cloneDeep(panels);
+            setPanelForNodes(this._panels, datamodel.nodes, this.config);
+            this._setPanels = false;
+        }
+        if (this._firstRender) {
+            this._fit();
+            this._fitLayout = false;
+        }
+        else if (this._fitLayout && !this._disableAutoFit) {
+            this._fit(duration);
+            this._fitLayout = false;
+        }
+        // Draw
+        this._drawNodes(animDuration);
+        this._drawLinks(animDuration);
+        // Select Links / Nodes
+        this._resetSelection();
+        if (this.config.selectedNodeId) {
+            const selectedNode = find(datamodel.nodes, node => node.id === this.config.selectedNodeId);
+            this._selectNode(selectedNode);
+        }
+        if (this.config.selectedLinkId) {
+            const selectedLink = find(datamodel.links, link => link.id === this.config.selectedLinkId);
+            this._selectLink(selectedLink);
+        }
+        // Link flow animation timer
+        if (!this._timer) {
+            const refreshRateMs = 35;
+            this._timer = interval(this._onLinkFlowTimerFrame.bind(this), refreshRateMs);
+        }
+        // Zoom
+        if (disableZoom)
+            this.g.on('.zoom', null);
+        else
+            this.g.call(this._zoomBehavior).on('dblclick.zoom', null);
+        if (!this._firstRender && !disableZoom) {
+            const transform = zoomTransform(this.g.node());
+            this._onZoom(transform);
+        }
+        // While the graph is animating we disable pointer events on the graph group
+        if (animDuration) {
+            this._graphGroup.attr('pointer-events', 'none');
+        }
+        smartTransition(this._graphGroup, animDuration)
+            .on('end interrupt', () => {
+            this._graphGroup.attr('pointer-events', null);
+        });
+        this._firstRender = false;
+    }
+    _drawNodes(duration) {
+        const { config, datamodel } = this;
+        const nodes = datamodel.nodes;
+        const nodeGroups = this._nodesGroup
+            .selectAll(`.${gNode}:not(.${gNodeExit})`)
+            .data(nodes, d => String(d._id));
+        const nodeGroupsEnter = nodeGroups.enter().append('g')
+            .attr('class', gNode)
+            .call(createNodes, config, duration);
+        const nodeGroupsMerged = nodeGroups.merge(nodeGroupsEnter);
+        const nodeUpdateSelection = updateNodes(nodeGroupsMerged, config, duration, this._scale);
+        this._drawPanels(nodeUpdateSelection, duration);
+        const nodesGroupExit = nodeGroups.exit();
+        nodesGroupExit
+            .classed(gNodeExit, true)
+            .call(removeNodes, config, duration);
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const thisRef = this;
+        if (!config.disableDrag) {
+            const dragBehaviour = drag()
+                .on('start', function (event, d) { thisRef._onDragStarted(d, event, select(this)); })
+                .on('drag', function (event, d) { thisRef._onDragged(d, event, nodeGroupsMerged); })
+                .on('end', function (event, d) { thisRef._onDragEnded(d, event, select(this)); });
+            nodeGroupsMerged.call(dragBehaviour);
+        }
+        else {
+            nodeGroupsMerged.on('.drag', null);
+        }
+    }
+    _drawLinks(duration) {
+        const { config, datamodel: { links } } = this;
+        const linkGroups = this._linksGroup
+            .selectAll(`.${gLink}`)
+            .data(links, (d) => String(d._id));
+        const linkGroupsEnter = linkGroups.enter().append('g')
+            .attr('class', gLink)
+            .call(createLinks, config, duration);
+        const linkGroupsMerged = linkGroups.merge(linkGroupsEnter);
+        linkGroupsMerged.call(updateLinks, config, duration, this._scale);
+        const linkGroupsExit = linkGroups.exit();
+        linkGroupsExit
+            .attr('class', gLinkExit)
+            .call(removeLinks, config, duration);
+    }
+    _drawPanels(nodeUpdateSelection, duration) {
+        const { config } = this;
+        if (!this._panels)
+            return;
+        const selection = (nodeUpdateSelection.duration)
+            ? nodeUpdateSelection.selection()
+            : nodeUpdateSelection;
+        updatePanelNumNodes(selection, this._panels, config);
+        updatePanelBBoxSize(selection, this._panels, config);
+        const panelData = this._panels.filter(p => p._numNodes);
+        const panelGroup = this._panelsGroup
+            .selectAll(`.${gPanel}`)
+            .data(panelData, p => p.label);
+        const panelGroupExit = panelGroup.exit();
+        panelGroupExit.call(removePanels, config, duration);
+        const panelGroupEnter = panelGroup.enter().append('g')
+            .attr('class', gPanel)
+            .call(createPanels, selection);
+        const panelGroupMerged = panelGroup.merge(panelGroupEnter);
+        this._updatePanels(panelGroupMerged, duration);
+    }
+    _updatePanels(panelToUpdate, duration) {
+        const { config } = this;
+        if (!this._panels)
+            return;
+        panelToUpdate.call(updatePanels, config, duration);
+    }
+    _calculateLayout() {
+        const { config, datamodel } = this;
+        switch (config.layoutType) {
+            case GraphLayoutType.Parallel:
+                applyLayoutParallel(datamodel, config, this._width, this._height);
+                break;
+            case GraphLayoutType.ParallelHorizontal:
+                applyLayoutParallel(datamodel, config, this._width, this._height, 'horizontal');
+                break;
+            case GraphLayoutType.Dagre:
+                applyLayoutDagre(datamodel, config, this._width);
+                break;
+            case GraphLayoutType.Force:
+                applyLayoutForce(datamodel, config, this._width);
+                break;
+            case GraphLayoutType.Concentric:
+                applyLayoutConcentric(datamodel, config, this._width, this._height);
+                break;
+            case GraphLayoutType.Circular:
+            default:
+                applyLayoutCircular(datamodel, config, this._width, this._height);
+                break;
+        }
+    }
+    _fit(duration = 0) {
+        var _a;
+        const { datamodel: { nodes } } = this;
+        if ((nodes === null || nodes === void 0 ? void 0 : nodes.length) && ((_a = this.g) === null || _a === void 0 ? void 0 : _a.size())) {
+            const transform = this._getTransform(nodes);
+            smartTransition(this.g, duration)
+                .call(this._zoomBehavior.transform, transform);
+            this._onZoom(transform);
+        }
+        else {
+            console.warn('Graph | Node data is not defined. Check if the component has been initialized.');
+        }
+    }
+    _getTransform(nodes) {
+        const { nodeSize, zoomScaleExtent } = this.config;
+        const { left, top, right, bottom } = this.bleed;
+        const maxNodeSize = getMaxNodeSize(nodes, nodeSize);
+        const w = this._width;
+        const h = this._height;
+        const xExtent = extent(nodes, d => getX(d));
+        const yExtent = extent(nodes, d => getY(d));
+        const xScale = w / (xExtent[1] - xExtent[0] + left + right);
+        const yScale = h / (yExtent[1] - yExtent[0] + maxNodeSize + top + bottom);
+        const clampedScale = clamp(min([xScale, yScale]), zoomScaleExtent[0], zoomScaleExtent[1]);
+        const xCenter = (xExtent[1] + xExtent[0]) / 2;
+        const yCenter = (yExtent[1] + yExtent[0] + maxNodeSize) / 2;
+        const translateX = this._width / 2 - xCenter * clampedScale;
+        const translateY = this._height / 2 - yCenter * clampedScale;
+        const transform = zoomIdentity
+            .translate(translateX, translateY)
+            .scale(clampedScale);
+        return transform;
+    }
+    _selectNode(node) {
+        const { datamodel: { nodes, links } } = this;
+        if (!node)
+            console.warn('Graph | Select Node: Not found');
+        this._selectedNode = node;
+        // Apply grey out
+        // Grey out all nodes
+        nodes.forEach(n => {
+            n._state.selected = false;
+            n._state.greyout = true;
+        });
+        // Grey out all links
+        links.forEach(l => {
+            l._state.greyout = true;
+            l._state.selected = false;
+        });
+        // Highlight selected
+        if (node) {
+            node._state.selected = true;
+            node._state.greyout = false;
+            const connectedLinks = links.filter(l => (l.source === node) || (l.target === node));
+            connectedLinks.forEach(l => {
+                const source = l.source;
+                const target = l.target;
+                source._state.greyout = false;
+                target._state.greyout = false;
+                l._state.greyout = false;
+            });
+        }
+        this._updateSelectedElements();
+    }
+    _selectLink(link) {
+        const { datamodel: { nodes, links } } = this;
+        if (!link)
+            console.warn('Graph | Select Link: Not found');
+        this._selectedLink = link;
+        const selectedLinkSource = link === null || link === void 0 ? void 0 : link.source;
+        const selectedLinkTarget = link === null || link === void 0 ? void 0 : link.target;
+        // Apply grey out
+        nodes.forEach(n => {
+            n._state.selected = false;
+            n._state.greyout = true;
+            if ((selectedLinkTarget === null || selectedLinkTarget === void 0 ? void 0 : selectedLinkTarget._id) === n._id || (selectedLinkSource === null || selectedLinkSource === void 0 ? void 0 : selectedLinkSource._id) === n._id) {
+                link._state.greyout = false;
+            }
+        });
+        links.forEach(l => {
+            l._state.greyout = true;
+            const source = l.source;
+            const target = l.target;
+            if ((source._id === (selectedLinkSource === null || selectedLinkSource === void 0 ? void 0 : selectedLinkSource._id)) && (target._id === (selectedLinkTarget === null || selectedLinkTarget === void 0 ? void 0 : selectedLinkTarget._id))) {
+                source._state.greyout = false;
+                target._state.greyout = false;
+                l._state.greyout = false;
+            }
+        });
+        links.forEach(l => {
+            delete l._state.selected;
+        });
+        if (link)
+            link._state.selected = true;
+        this._updateSelectedElements();
+    }
+    _resetSelection() {
+        const { datamodel: { nodes, links } } = this;
+        this._selectedNode = undefined;
+        this._selectedLink = undefined;
+        // Disable Grayout
+        nodes.forEach(n => {
+            delete n._state.selected;
+            delete n._state.greyout;
+        });
+        links.forEach(l => {
+            delete l._state.greyout;
+            delete l._state.selected;
+        });
+        this._updateSelectedElements();
+    }
+    _updateSelectedElements() {
+        const { config } = this;
+        const linkElements = this._linksGroup.selectAll(`.${gLink}`);
+        linkElements.call(updateSelectedLinks, config, this._scale);
+        const nodeElements = this._nodesGroup.selectAll(`.${gNode}`);
+        nodeElements.call(updateSelectedNodes, config);
+        // this._drawPanels(nodeElements, 0)
+    }
+    _onBackgroundClick() {
+        this._resetSelection();
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    _onNodeClick(d) {
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    _onNodeMouseOut(d) {
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    _onNodeMouseOver(d) {
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    _onLinkClick(d) {
+    }
+    _onLinkMouseOver(d) {
+        if (this._isDragging)
+            return;
+        d._state.hovered = true;
+        this._updateSelectedElements();
+    }
+    _onLinkMouseOut(d) {
+        if (this._isDragging)
+            return;
+        delete d._state.hovered;
+        this._updateSelectedElements();
+    }
+    _onLinkFlowTimerFrame(elapsed = 0) {
+        const { config: { linkFlow, linkFlowAnimDuration }, datamodel: { links } } = this;
+        const hasLinksWithFlow = links.some((d, i) => getBoolean(d, linkFlow, i));
+        if (!hasLinksWithFlow)
+            return;
+        const t = (elapsed % linkFlowAnimDuration) / linkFlowAnimDuration;
+        const linkElements = this._linksGroup.selectAll(`.${gLink}`);
+        const linksToAnimate = linkElements.filter(d => !d._state.greyout);
+        linksToAnimate.each(d => { d._state.flowAnimTime = t; });
+        animateLinkFlow(linksToAnimate, this.config, this._scale);
+    }
+    _onZoom(t, event) {
+        const { config, datamodel: { nodes } } = this;
+        const transform = t || event.transform;
+        this._scale = transform.k;
+        this._graphGroup.attr('transform', transform.toString());
+        if (isFunction(config.onZoom))
+            config.onZoom(this._scale, config.zoomScaleExtent);
+        if (!this._initialTransform)
+            this._initialTransform = transform;
+        // If the event was triggered by a mouse interaction (pan or zoom) we don't
+        //   refit the layout after recalculation (eg. on container resize)
+        if (event === null || event === void 0 ? void 0 : event.sourceEvent) {
+            const diff = Object.keys(transform).reduce((acc, prop) => {
+                const val = transform[prop];
+                const dVal = Math.abs(val - this._initialTransform[prop]);
+                return prop === 'k' ? 2 * dVal : dVal / 50;
+            }, 0);
+            if (diff > config.layoutAutofitTolerance)
+                this._disableAutoFit = true;
+            else
+                this._disableAutoFit = false;
+        }
+        this._nodesGroup.selectAll(`.${gNode}`)
+            .call(nodes.length > config.zoomThrottledUpdateNodeThreshold ? zoomNodesThrottled : zoomNodes, config, this._scale);
+        this._linksGroup.selectAll(`.${gLink}`)
+            .call(nodes.length > config.zoomThrottledUpdateNodeThreshold ? zoomLinksThrottled : zoomLinks, config, this._scale);
+    }
+    _onDragStarted(d, event, nodeSelection) {
+        const { config } = this;
+        this._isDragging = true;
+        d._state.isDragged = true;
+        nodeSelection.call(updateNodes, config, 0, this._scale);
+    }
+    _onDragged(d, event, allNodesSelection) {
+        const { config } = this;
+        const transform = zoomTransform(this.g.node());
+        const scale = transform.k;
+        // Prevent from dragging outside
+        const maxY = (this._height - transform.y) / scale;
+        const maxX = (this._width - transform.x) / scale;
+        const minY = -transform.y / scale;
+        const minX = -transform.x / scale;
+        let [x, y] = pointer(event, this._graphGroup.node());
+        if (y < minY)
+            y = minY;
+        else if (y > maxY)
+            y = maxY;
+        if (x < minX)
+            x = minX;
+        else if (x > maxX)
+            x = maxX;
+        // Snap to Layout
+        if (Math.sqrt(Math.pow(x - d.x, 2) + Math.pow(y - d.y, 2)) < 15) {
+            x = d.x;
+            y = d.y;
+        }
+        const panelNeighbourNodes = flatten(d._panels);
+        if (panelNeighbourNodes.length > 0) {
+            const prevX = getX(d);
+            const prevY = getY(d);
+            panelNeighbourNodes.forEach(node => {
+                const dx = getX(node) - prevX;
+                const dy = getY(node) - prevY;
+                node._state.fx = x + dx;
+                node._state.fy = y + dy;
+                if (node._state.fx === node.x)
+                    delete node._state.fx;
+                if (node._state.fy === node.y)
+                    delete node._state.fy;
+            });
+        }
+        else {
+            d._state.fx = x;
+            d._state.fy = y;
+            if (d._state.fx === d.x)
+                delete d._state.fx;
+            if (d._state.fy === d.y)
+                delete d._state.fy;
+        }
+        const panelNodesToUpdate = allNodesSelection.filter((node) => {
+            return node._id === d._id || findIndex(panelNeighbourNodes, (n) => node._id === n._id) !== -1;
+        });
+        panelNodesToUpdate
+            .call(updateNodes, config, 0, scale)
+            .call(zoomNodes, config, scale);
+        const panelToUpdate = this._panelsGroup.selectAll(`.${gPanel}`);
+        updatePanelBBoxSize(panelNodesToUpdate, this._panels, config);
+        this._updatePanels(panelToUpdate, 0);
+        const nodeElements = this._nodesGroup.selectAll(`.${gNode}`);
+        const nodesToUpdate = nodeElements.filter((n) => n._id === d._id);
+        nodesToUpdate.call(updateNodes, config, 0, scale);
+        const linkElements = this._linksGroup.selectAll(`.${gLink}`);
+        const linksToUpdate = linkElements.filter((l) => {
+            const source = l.source;
+            const target = l.target;
+            return source._id === d._id || target._id === d._id || findIndex(panelNeighbourNodes, (n) => source._id === n._id) !== -1 || findIndex(panelNeighbourNodes, (n) => target._id === n._id) !== -1;
+        });
+        linksToUpdate.call(updateLinks, config, 0, scale);
+        const linksToAnimate = linksToUpdate.filter(d => d._state.greyout);
+        if (linksToAnimate.size())
+            animateLinkFlow(linksToAnimate, config, this._scale);
+    }
+    _onDragEnded(d, event, nodeSelection) {
+        const { config } = this;
+        this._isDragging = false;
+        d._state.isDragged = false;
+        nodeSelection.call(updateNodes, config, 0, this._scale);
+    }
+    _shouldLayoutRecalculate(nextConfig) {
+        const { config } = this;
+        if (config.layoutType !== nextConfig.layoutType)
+            return true;
+        if (config.layoutNonConnectedAside !== nextConfig.layoutNonConnectedAside)
+            return true;
+        if (config.layoutType === GraphLayoutType.Force) {
+            const forceSettingsDiff = shallowDiff(config.forceLayoutSettings, nextConfig.forceLayoutSettings);
+            if (Object.keys(forceSettingsDiff).length)
+                return true;
+        }
+        if (config.layoutType === GraphLayoutType.Dagre) {
+            const dagreSettingsDiff = shallowDiff(config.dagreLayoutSettings, nextConfig.dagreLayoutSettings);
+            if (Object.keys(dagreSettingsDiff).length)
+                return true;
+        }
+        if (config.layoutType === GraphLayoutType.Parallel ||
+            config.layoutType === GraphLayoutType.ParallelHorizontal ||
+            config.layoutType === GraphLayoutType.Concentric) {
+            if (config.layoutGroupOrder !== nextConfig.layoutGroupOrder)
+                return true;
+            if (config.layoutParallelNodesPerColumn !== nextConfig.layoutParallelNodesPerColumn)
+                return true;
+            if (config.layoutParallelSortConnectionsByGroup !== nextConfig.layoutParallelSortConnectionsByGroup)
+                return true;
+        }
+        return false;
+    }
+    _addSVGDefs() {
+        const { datamodel: { links } } = this;
+        // Clean up old defs
+        this._defs.selectAll('*').remove();
+        // Get all variations of link colors to create markers
+        const linkColors = unique(clean(links.map(d => getLinkColor(d, this.config))));
+        this._defs.selectAll('marker')
+            .data([
+            ...linkColors.map(d => ({ color: d, arrow: GraphLinkArrowStyle.Single })),
+            ...linkColors.map(d => ({ color: d, arrow: GraphLinkArrowStyle.Double })), // Double-sided arrows
+        ]).enter()
+            .append('marker')
+            .attr('id', d => `${stringToHtmlId(d.color)}-${d.arrow}`)
+            .attr('orient', 'auto')
+            .attr('markerWidth', d => d.arrow === GraphLinkArrowStyle.Double ? LINK_MARKER_WIDTH * 2 : LINK_MARKER_WIDTH)
+            .attr('markerHeight', d => d.arrow === GraphLinkArrowStyle.Double ? LINK_MARKER_HEIGHT * 2 : LINK_MARKER_HEIGHT)
+            .attr('markerUnits', 'userSpaceOnUse')
+            .attr('refX', LINK_MARKER_WIDTH - LINK_MARKER_HEIGHT / 2)
+            .attr('refY', LINK_MARKER_HEIGHT - LINK_MARKER_HEIGHT / 2)
+            .html(d => {
+            var _a;
+            return `
+          <path
+            d="${d.arrow === GraphLinkArrowStyle.Double ? getDoubleArrowPath() : getArrowPath()}"
+            fill="${(_a = d.color) !== null && _a !== void 0 ? _a : null}"
+          />
+        `;
+        });
+    }
+    zoomIn(increment = 0.3) {
+        const scaleBy = 1 + increment;
+        smartTransition(this.g, this.config.duration / 2)
+            .call(this._zoomBehavior.scaleBy, scaleBy);
+    }
+    zoomOut(increment = 0.3) {
+        const scaleBy = 1 - increment;
+        smartTransition(this.g, this.config.duration / 2)
+            .call(this._zoomBehavior.scaleBy, scaleBy);
+    }
+    setZoom(zoomLevel) {
+        smartTransition(this.g, this.config.duration / 2)
+            .call(this._zoomBehavior.scaleTo, zoomLevel);
+    }
+    fitView() {
+        this._fit(this.config.duration / 2);
+    }
+    /** Enable automatic fitting to container if it was disabled due to previous zoom / pan interactions */
+    resetAutofitState() {
+        this._disableAutoFit = false;
+    }
+    /** Get current coordinates of the nodes as an array of { id: string; x: number; y: number } objects */
+    getNodesCoordinates() {
+        const { datamodel: { nodes } } = this;
+        return nodes.map(n => ({
+            id: n._id,
+            x: n.x,
+            y: n.y,
+        }));
+    }
+    /** Get node coordinates by id as { id: string; x: number; y: number } */
+    getNodeCoordinatesById(id) {
+        const { datamodel: { nodes } } = this;
+        const node = nodes.find(n => n._id === id);
+        if (!node) {
+            console.warn(`Graph | Node ${id} not found`);
+            return undefined;
+        }
+        else {
+            return {
+                id: node._id,
+                x: node.x,
+                y: node.y,
+            };
+        }
+    }
+}
+Graph.selectors = {
+    root: root,
+    background: background,
+    node: gNode,
+    nodeShape: node,
+    nodeGauge: nodeGauge,
+    nodeSideLabel: sideLabelGroup,
+    nodeLabel: label,
+    link: gLink,
+    linkLine: link,
+    panel: gPanel,
+    panelRect: panel,
+    panelSelection: panelSelection,
+    panelLabel: label$1,
+    panelLabelText: labelText,
+    panelSideIcon: sideIconGroup,
+    panelSideIconShape: sideIconShape,
+    panelSideIconSymbol: sideIconSymbol,
+};
+Graph.nodeSelectors = style;
+
+export { Graph };
+//# sourceMappingURL=index.js.map