@unovis/ts 1.1.1-beta.5 → 1.1.1-beta.7

package/components/graph/index.js

@@ -1,656 +0,0 @@
-import { __awaiter } from 'tslib';
-import { min, max } 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, clamp, getBoolean, isFunction, 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, getNodeSize } from './modules/node/helper.js';
-import { createLinks, updateLinks, removeLinks, updateSelectedLinks, animateLinkFlow, zoomLinksThrottled, zoomLinks } from './modules/link/index.js';
-import { getLinkColor, getLinkArrow, LINK_MARKER_WIDTH, LINK_MARKER_HEIGHT, getDoubleArrowPath, getArrowPath } from './modules/link/helper.js';
-import { removePanels, createPanels, updatePanels } from './modules/panel/index.js';
-import { initPanels, setPanelForNodes, updatePanelNumNodes, updatePanelBBoxSize } from './modules/panel/helper.js';
-import { applyLayoutCircular, applyELKLayout, applyLayoutConcentric, applyLayoutForce, applyLayoutDagre, applyLayoutParallel } from './modules/layout.js';
-
-class Graph extends ComponentCore {
-    constructor(config) {
-        super();
-        this.config = new GraphConfig();
-        this.datamodel = new GraphDataModel();
-        this._isFirstRender = true;
-        this._shouldRecalculateLayout = false;
-        this._shouldSetPanels = false;
-        this._isAutoFitDisabled = 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');
-        this._getMarkerId = this._getMarkerId.bind(this);
-    }
-    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._shouldRecalculateLayout = true;
-        if (config.layoutAutofit)
-            this._shouldFitLayout = true;
-        this._shouldSetPanels = true;
-        this._addSVGDefs();
-    }
-    setConfig(config) {
-        this._shouldFitLayout = this._shouldFitLayout || this.config.layoutType !== config.layoutType;
-        this._shouldRecalculateLayout = this._shouldRecalculateLayout || this._shouldLayoutRecalculate(config);
-        super.setConfig(config);
-        this._shouldSetPanels = true;
-    }
-    get bleed() {
-        const extraPadding = 50; // Extra padding to take into account labels and selection outlines
-        return { top: extraPadding, bottom: extraPadding, left: extraPadding, right: extraPadding };
-    }
-    _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._shouldFitLayout = true;
-            this._prevWidth = this._width;
-            this._prevHeight = this._height;
-        }
-        // Apply layout and render
-        this._calculateLayout().then((isFirstRender) => {
-            // If the component has been destroyed while the layout calculation
-            // was in progress, we cancel the render
-            if (this.isDestroyed())
-                return;
-            if (this._shouldSetPanels) {
-                smartTransition(this._panelsGroup, duration / 2)
-                    .style('opacity', (panels === null || panels === void 0 ? void 0 : panels.length) ? 1 : 0);
-                this._panels = initPanels(panels);
-                setPanelForNodes(this._panels, datamodel.nodes, this.config);
-                this._shouldSetPanels = false;
-            }
-            if (isFirstRender) {
-                this._fit();
-                this._shouldFitLayout = false;
-            }
-            else if (this._shouldFitLayout && !this._isAutoFitDisabled) {
-                this._fit(duration);
-                this._shouldFitLayout = false;
-            }
-            // Draw
-            this._drawNodes(animDuration);
-            this._drawLinks(animDuration);
-            // Select Links / Nodes
-            this._resetSelection();
-            if (this.config.selectedNodeId) {
-                const selectedNode = datamodel.nodes.find(node => node.id === this.config.selectedNodeId);
-                this._selectNode(selectedNode);
-            }
-            if (this.config.selectedLinkId) {
-                const selectedLink = datamodel.links.find(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._isFirstRender && !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);
-            });
-            // We need to set up events and attributes again because the rendering might have been delayed by the layout
-            // calculation and they were not set up properly (see the render function of `ComponentCore`)
-            this._setUpComponentEventsThrottled();
-            this._setCustomAttributesThrottled();
-        });
-        this._isFirstRender = 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, this._getMarkerId);
-        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() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { config, datamodel } = this;
-            const firstRender = this._isFirstRender;
-            if (this._shouldRecalculateLayout) {
-                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:
-                        yield applyLayoutDagre(datamodel, config, this._width);
-                        break;
-                    case GraphLayoutType.Force:
-                        yield applyLayoutForce(datamodel, config, this._width);
-                        break;
-                    case GraphLayoutType.Concentric:
-                        applyLayoutConcentric(datamodel, config, this._width, this._height);
-                        break;
-                    case GraphLayoutType.Elk:
-                        yield applyELKLayout(datamodel, config, this._width);
-                        break;
-                    case GraphLayoutType.Circular:
-                    default:
-                        applyLayoutCircular(datamodel, config, this._width, this._height);
-                        break;
-                }
-                this._shouldRecalculateLayout = false;
-            }
-            return firstRender;
-        });
-    }
-    _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('Unovis | 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 = [
-            min(nodes, d => { var _a; return getX(d) - maxNodeSize / 2 - (max((_a = d._panels) === null || _a === void 0 ? void 0 : _a.map(p => p._padding.left)) || 0); }),
-            max(nodes, d => { var _a; return getX(d) + maxNodeSize / 2 + (max((_a = d._panels) === null || _a === void 0 ? void 0 : _a.map(p => p._padding.right)) || 0); }),
-        ];
-        const yExtent = [
-            min(nodes, d => { var _a; return getY(d) - maxNodeSize / 2 - (max((_a = d._panels) === null || _a === void 0 ? void 0 : _a.map(p => p._padding.top)) || 0); }),
-            max(nodes, d => { var _a; return getY(d) + maxNodeSize / 2 + (max((_a = d._panels) === null || _a === void 0 ? void 0 : _a.map(p => p._padding.bottom)) || 0); }),
-        ];
-        const xScale = w / (xExtent[1] - xExtent[0] + left + right);
-        const yScale = h / (yExtent[1] - yExtent[0] + 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]) / 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('Unovis | 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('Unovis: 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 (e.g. 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._isAutoFitDisabled = true;
-            else
-                this._isAutoFitDisabled = 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, this._getMarkerId);
-    }
-    _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) {
-        var _a, _b;
-        const { config } = this;
-        const transform = zoomTransform(this.g.node());
-        const scale = transform.k;
-        // Prevent the node from being dragged offscreen or outside its panel
-        const panels = (_b = (_a = this._panels) === null || _a === void 0 ? void 0 : _a.filter(p => p.nodes.includes(d._id))) !== null && _b !== void 0 ? _b : [];
-        const nodeSizeValue = getNodeSize(d, config.nodeSize, d._index);
-        const maxY = min([(this._height - transform.y) / scale, ...panels.map(p => p._y + p._height)]) - nodeSizeValue / 2;
-        const maxX = min([(this._width - transform.x) / scale, ...panels.map(p => p._x + p._width)]) - nodeSizeValue / 2;
-        const minY = max([-transform.y / scale, ...panels.map(p => p._y)]) + nodeSizeValue / 2;
-        const minX = max([-transform.x / scale, ...panels.map(p => p._x)]) + nodeSizeValue / 2;
-        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;
-        }
-        // Assign coordinates
-        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;
-        // Update affected DOM elements
-        const nodeSelection = this._nodesGroup.selectAll(`.${gNode}`);
-        const nodeToUpdate = nodeSelection.filter((n) => n._id === d._id);
-        nodeToUpdate.call(updateNodes, config, 0, scale);
-        const linkSelection = this._linksGroup.selectAll(`.${gLink}`);
-        const linksToUpdate = linkSelection.filter((l) => {
-            const source = l.source;
-            const target = l.target;
-            return source._id === d._id || target._id === d._id;
-        });
-        linksToUpdate.call(updateLinks, config, 0, scale, this._getMarkerId);
-        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;
-    }
-    _getMarkerId(d, color, arrow) {
-        const { config } = this;
-        const c = color !== null && color !== void 0 ? color : getLinkColor(d, config);
-        const a = arrow !== null && arrow !== void 0 ? arrow : getLinkArrow(d, this._scale, config);
-        return a && c ? `${this.uid}-${stringToHtmlId(c)}-${a}` : null;
-    }
-    _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 => this._getMarkerId(null, 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._isAutoFitDisabled = 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(`Unovis | 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