@unovis/ts 1.4.0-beta.4 → 1.4.0-version.12

package/components/graph/index.js

@@ -6,22 +6,21 @@ 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 { isNumber, clamp, getBoolean, isFunction, shallowDiff } from '../../utils/data.js';
 import { smartTransition } from '../../utils/d3.js';
 import { GraphLayoutType, GraphLinkArrowStyle } from './types.js';
 import { GraphDefaultConfig } 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 { nodes, gNode, gNodeExit, node, nodeGauge, sideLabelGroup, label, greyedOutNode } from './modules/node/style.js';
+import { links, gLink, gLinkExit, link, greyedOutLink } 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 { getArrowPath, getDoubleArrowPath } 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 { updatePanelNumNodes, updatePanelBBoxSize, initPanels, setPanelForNodes } from './modules/panel/helper.js';
 import { applyLayoutCircular, applyELKLayout, applyLayoutConcentric, applyLayoutForce, applyLayoutDagre, applyLayoutParallel } from './modules/layout.js';
 
 class Graph extends ComponentCore {
@@ -61,7 +60,7 @@ class Graph extends ComponentCore {
         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);
+        this._getLinkArrowDefId = this._getLinkArrowDefId.bind(this);
     }
     get selectedNode() {
         return this._selectedNode;
@@ -80,9 +79,9 @@ class Graph extends ComponentCore {
         this._addSVGDefs();
     }
     setConfig(config) {
-        this._shouldRecalculateLayout = this._shouldRecalculateLayout || this._shouldLayoutRecalculate(config);
-        this._shouldFitLayout = this._shouldFitLayout || this._shouldRecalculateLayout;
         super.setConfig(config);
+        this._shouldRecalculateLayout = this._shouldRecalculateLayout || this._shouldLayoutRecalculate();
+        this._shouldFitLayout = this._shouldFitLayout || this._shouldRecalculateLayout;
         this._shouldSetPanels = true;
     }
     get bleed() {
@@ -90,7 +89,7 @@ class Graph extends ComponentCore {
         return { top: extraPadding, bottom: extraPadding, left: extraPadding, right: extraPadding };
     }
     _render(customDuration) {
-        const { config: { disableZoom, duration, layoutAutofit, panels }, datamodel } = this;
+        const { config: { disableZoom, duration, layoutAutofit }, datamodel } = this;
         if (!datamodel.nodes && !datamodel.links)
             return;
         const animDuration = isNumber(customDuration) ? customDuration : duration;
@@ -105,18 +104,16 @@ class Graph extends ComponentCore {
             this._prevHeight = this._height;
         }
         // Apply layout and render
-        this._calculateLayout().then((isFirstRender) => {
+        if (this._shouldRecalculateLayout || !this._layoutCalculationPromise) {
+            this._layoutCalculationPromise = this._calculateLayout();
+        }
+        this._layoutCalculationPromise.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;
-            }
+            this._initPanelsData();
+            // Fit the view
             if (isFirstRender) {
                 this._fit();
                 this._shouldFitLayout = false;
@@ -205,14 +202,17 @@ class Graph extends ComponentCore {
             .attr('class', gLink)
             .call(createLinks, config, duration);
         const linkGroupsMerged = linkGroups.merge(linkGroupsEnter);
-        linkGroupsMerged.call(updateLinks, config, duration, this._scale, this._getMarkerId);
+        linkGroupsMerged.call(updateLinks, config, duration, this._scale, this._getLinkArrowDefId);
         const linkGroupsExit = linkGroups.exit();
         linkGroupsExit
             .attr('class', gLinkExit)
             .call(removeLinks, config, duration);
     }
     _drawPanels(nodeUpdateSelection, duration) {
+        var _a;
         const { config } = this;
+        smartTransition(this._panelsGroup, duration / 2)
+            .style('opacity', ((_a = config.panels) === null || _a === void 0 ? void 0 : _a.length) ? 1 : 0);
         if (!this._panels)
             return;
         const selection = (nodeUpdateSelection.duration)
@@ -239,51 +239,58 @@ class Graph extends ComponentCore {
         panelToUpdate.call(updatePanels, config, duration);
     }
     _calculateLayout() {
+        var _a, _b;
         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;
+            switch (config.layoutType) {
+                case GraphLayoutType.Precalculated:
+                    break;
+                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;
             }
+            // We need to update the panels data right after the layout calculation
+            // because we want to have the latest coordinates before calling `onLayoutCalculated`
+            this._initPanelsData();
+            (_b = (_a = this.config).onLayoutCalculated) === null || _b === void 0 ? void 0 : _b.call(_a, datamodel.nodes, datamodel.links);
+            this._shouldRecalculateLayout = false;
             return firstRender;
         });
     }
+    _initPanelsData() {
+        const { config, datamodel } = this;
+        if (this._shouldSetPanels) {
+            this._panels = initPanels(config.panels);
+            setPanelForNodes(this._panels, datamodel.nodes, this.config);
+            this._shouldSetPanels = false;
+        }
+    }
     _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.');
-        }
+        const transform = this._getTransform(nodes);
+        smartTransition(this.g, duration)
+            .call(this._zoomBehavior.transform, transform);
+        this._onZoom(transform);
     }
     _getTransform(nodes) {
         const { nodeSize, zoomScaleExtent } = this.config;
@@ -292,13 +299,17 @@ class Graph extends ComponentCore {
         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); }),
+            min(nodes, d => getX(d) - maxNodeSize / 2 - (max((d._panels || []).map(p => p._padding.left)) || 0)),
+            max(nodes, d => getX(d) + maxNodeSize / 2 + (max((d._panels || []).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); }),
+            min(nodes, d => getY(d) - maxNodeSize / 2 - (max((d._panels || []).map(p => p._padding.top)) || 0)),
+            max(nodes, d => getY(d) + maxNodeSize / 2 + (max((d._panels || []).map(p => p._padding.bottom)) || 0)),
         ];
+        if (xExtent.some(item => item === undefined) || yExtent.some(item => item === undefined)) {
+            console.warn('Unovis | Graph: Some of the node coordinates are undefined. This can happen if you try to fit the graph before the layout has been calculated.');
+            return zoomIdentity;
+        }
         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]);
@@ -441,7 +452,8 @@ class Graph extends ComponentCore {
         this._scale = transform.k;
         this._graphGroup.attr('transform', transform.toString());
         if (isFunction(config.onZoom))
-            config.onZoom(this._scale, config.zoomScaleExtent);
+            config.onZoom(this._scale, config.zoomScaleExtent, event);
+        // console.warn('Unovis | Graph: Zoom: ', transform)
         if (!this._initialTransform)
             this._initialTransform = transform;
         // If the event was triggered by a mouse interaction (pan or zoom) we don't
@@ -451,7 +463,9 @@ class Graph extends ComponentCore {
                 const propVal = transform[prop];
                 const initialPropVal = this._initialTransform[prop];
                 const dVal = Math.abs(propVal - initialPropVal);
-                return prop === 'k' ? 2 * dVal : dVal / 50;
+                const scaledDVal = prop === 'k' ? 20 * dVal : dVal / 15;
+                acc += scaledDVal;
+                return acc;
             }, 0);
             if (diff > config.layoutAutofitTolerance)
                 this._isAutoFitDisabled = true;
@@ -461,16 +475,18 @@ class Graph extends ComponentCore {
         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);
+            .call((nodes.length > config.zoomThrottledUpdateNodeThreshold ? zoomLinksThrottled : zoomLinks), config, this._scale, this._getLinkArrowDefId);
     }
     _onDragStarted(d, event, nodeSelection) {
+        var _a;
         const { config } = this;
         this._isDragging = true;
         d._state.isDragged = true;
         nodeSelection.call(updateNodes, config, 0, this._scale);
+        (_a = config.onNodeDragStart) === null || _a === void 0 ? void 0 : _a.call(config, d, event);
     }
     _onDragged(d, event, allNodesSelection) {
-        var _a, _b;
+        var _a, _b, _c;
         const { config } = this;
         const transform = zoomTransform(this.g.node());
         const scale = transform.k;
@@ -512,79 +528,60 @@ class Graph extends ComponentCore {
             const target = l.target;
             return source._id === d._id || target._id === d._id;
         });
-        linksToUpdate.call(updateLinks, config, 0, scale, this._getMarkerId);
+        linksToUpdate.call(updateLinks, config, 0, scale, this._getLinkArrowDefId);
         const linksToAnimate = linksToUpdate.filter(d => d._state.greyout);
         if (linksToAnimate.size())
             animateLinkFlow(linksToAnimate, config, this._scale);
+        (_c = config.onNodeDrag) === null || _c === void 0 ? void 0 : _c.call(config, d, event);
     }
     _onDragEnded(d, event, nodeSelection) {
+        var _a;
         const { config } = this;
         this._isDragging = false;
         d._state.isDragged = false;
         nodeSelection.call(updateNodes, config, 0, this._scale);
+        (_a = config.onNodeDragEnd) === null || _a === void 0 ? void 0 : _a.call(config, d, event);
     }
-    _shouldLayoutRecalculate(nextConfig) {
-        const { config } = this;
-        if (config.layoutType !== nextConfig.layoutType)
+    _shouldLayoutRecalculate() {
+        const { prevConfig, config } = this;
+        if (prevConfig.layoutType !== config.layoutType)
             return true;
-        if (config.layoutNonConnectedAside !== nextConfig.layoutNonConnectedAside)
+        if (prevConfig.layoutNonConnectedAside !== config.layoutNonConnectedAside)
             return true;
-        if (config.layoutType === GraphLayoutType.Force) {
-            const forceSettingsDiff = shallowDiff(config.forceLayoutSettings, nextConfig.forceLayoutSettings);
+        if (prevConfig.layoutType === GraphLayoutType.Force) {
+            const forceSettingsDiff = shallowDiff(prevConfig.forceLayoutSettings, config.forceLayoutSettings);
             if (Object.keys(forceSettingsDiff).length)
                 return true;
         }
-        if (config.layoutType === GraphLayoutType.Dagre) {
-            const dagreSettingsDiff = shallowDiff(config.dagreLayoutSettings, nextConfig.dagreLayoutSettings);
+        if (prevConfig.layoutType === GraphLayoutType.Dagre) {
+            const dagreSettingsDiff = shallowDiff(prevConfig.dagreLayoutSettings, config.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)
+        if (prevConfig.layoutType === GraphLayoutType.Parallel ||
+            prevConfig.layoutType === GraphLayoutType.ParallelHorizontal ||
+            prevConfig.layoutType === GraphLayoutType.Concentric) {
+            if (prevConfig.layoutGroupOrder !== config.layoutGroupOrder)
                 return true;
-            if (config.layoutParallelNodesPerColumn !== nextConfig.layoutParallelNodesPerColumn)
+            if (prevConfig.layoutParallelNodesPerColumn !== config.layoutParallelNodesPerColumn)
                 return true;
-            if (config.layoutParallelSortConnectionsByGroup !== nextConfig.layoutParallelSortConnectionsByGroup)
+            if (prevConfig.layoutParallelSortConnectionsByGroup !== config.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;
+    _getLinkArrowDefId(arrow) {
+        return arrow ? `${this.uid}-${arrow}` : 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}"
-          />
-        `;
-        });
+        // Single Arrow
+        this._defs.append('path').attr('d', getArrowPath())
+            .attr('id', this._getLinkArrowDefId(GraphLinkArrowStyle.Single));
+        // Double Arrow
+        this._defs.append('path').attr('d', getDoubleArrowPath())
+            .attr('id', this._getLinkArrowDefId(GraphLinkArrowStyle.Double));
     }
     zoomIn(increment = 0.3) {
         const scaleBy = 1 + increment;
@@ -600,8 +597,13 @@ class Graph extends ComponentCore {
         smartTransition(this.g, this.config.duration / 2)
             .call(this._zoomBehavior.scaleTo, zoomLevel);
     }
-    fitView() {
-        this._fit(this.config.duration / 2);
+    getZoom() {
+        return zoomTransform(this.g.node()).k;
+    }
+    fitView(duration = this.config.duration) {
+        this._layoutCalculationPromise.then(() => {
+            this._fit(duration);
+        });
     }
     /** Enable automatic fitting to container if it was disabled due to previous zoom / pan interactions */
     resetAutofitState() {
@@ -641,8 +643,10 @@ Graph.selectors = {
     nodeGauge: nodeGauge,
     nodeSideLabel: sideLabelGroup,
     nodeLabel: label,
+    dimmedNode: greyedOutNode,
     link: gLink,
     linkLine: link,
+    dimmedLink: greyedOutLink,
     panel: gPanel,
     panelRect: panel,
     panelSelection: panelSelection,