@unovis/ts 1.5.0-alpha.8 → 1.5.0-nikita.1

package/components/graph/index.js

@@ -1,23 +1,24 @@
 import { __awaiter } from 'tslib';
 import { min, max } from 'd3-array';
 import { select, pointer } from 'd3-selection';
-import { zoom, zoomTransform, zoomIdentity } from 'd3-zoom';
+import { brush as brush$1 } from 'd3-brush';
+import { zoom, zoomIdentity, zoomTransform } 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, isFunction, clamp, getBoolean, shallowDiff, isPlainObject, isEqual } from '../../utils/data.js';
+import { isEqual, isNumber, isFunction, clamp, getBoolean, shallowDiff, isPlainObject } from '../../utils/data.js';
 import { smartTransition } from '../../utils/d3.js';
-import { GraphLayoutType, GraphLinkArrowStyle } from './types.js';
+import { GraphLayoutType, GraphNodeSelectionHighlightMode, GraphLinkArrowStyle } from './types.js';
 import { GraphDefaultConfig } from './config.js';
-import { background, graphGroup, root } from './style.js';
+import { background, graphGroup, brush, root } from './style.js';
 import * as style from './modules/node/style.js';
-import { nodes, gNode, gNodeExit, node, nodeGauge, sideLabelGroup, label, greyedOutNode } from './modules/node/style.js';
+import { nodes, gNode, gNodeExit, brushed, brushable, 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, updateNodeSelectedGreyout, zoomNodesThrottled, zoomNodes } from './modules/node/index.js';
+import { createNodes, updateNodes, removeNodes, updateNodesPartial, 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 { createLinks, updateLinks, removeLinks, updateLinksPartial, animateLinkFlow, zoomLinksThrottled, zoomLinks } from './modules/link/index.js';
 import { getArrowPath, getDoubleArrowPath } from './modules/link/helper.js';
 import { removePanels, createPanels, updatePanels } from './modules/panel/index.js';
 import { updatePanelNumNodes, updatePanelBBoxSize, initPanels, setPanelForNodes } from './modules/panel/helper.js';
@@ -53,9 +54,14 @@ class Graph extends ComponentCore {
             this.setConfig(config);
         this._backgroundRect = this.g.append('rect').attr('class', background);
         this._graphGroup = this.g.append('g').attr('class', graphGroup);
+        this._brush = this.g.append('g').attr('class', brush);
         this._zoomBehavior = zoom()
             .scaleExtent(this.config.zoomScaleExtent)
             .on('zoom', (e) => this._onZoom(e.transform, e));
+        this._brushBehavior = brush$1()
+            .on('start brush end', this._onBrush.bind(this))
+            .filter(event => event.shiftKey)
+            .keyModifiers(false);
         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);
@@ -63,13 +69,19 @@ class Graph extends ComponentCore {
         this._getLinkArrowDefId = this._getLinkArrowDefId.bind(this);
     }
     get selectedNode() {
-        return this._selectedNode;
+        var _a;
+        return (_a = this._selectedNodes) === null || _a === void 0 ? void 0 : _a[0];
+    }
+    get selectedNodes() {
+        return this._selectedNodes;
     }
     get selectedLink() {
         return this._selectedLink;
     }
     setData(data) {
         const { config } = this;
+        if (isEqual(this.datamodel.data, data))
+            return;
         this.datamodel.nodeSort = config.nodeSort;
         this.datamodel.data = data;
         this._shouldRecalculateLayout = true;
@@ -95,7 +107,7 @@ class Graph extends ComponentCore {
         return { top: extraPadding, bottom: extraPadding, left: extraPadding, right: extraPadding };
     }
     _render(customDuration) {
-        const { config: { disableZoom, duration, layoutAutofit, zoomEventFilter }, datamodel } = this;
+        const { config: { disableBrush, disableZoom, duration, layoutAutofit, zoomEventFilter }, datamodel } = this;
         if (!datamodel.nodes && !datamodel.links)
             return;
         const animDuration = isNumber(customDuration) ? customDuration : duration;
@@ -109,6 +121,25 @@ class Graph extends ComponentCore {
             this._prevWidth = this._width;
             this._prevHeight = this._height;
         }
+        // Handle brush behavior
+        if (!disableBrush) {
+            this._brushBehavior.extent([[0, 0], [this._width, this._height]]);
+            this._brush.call(this._brushBehavior);
+            // Activate the brush when the shift key is pressed
+            select(window)
+                .on('keydown.unovis-graph', e => e.key === 'Shift' && this._activateBrush())
+                .on('keyup.unovis-graph', e => e.key === 'Shift' && this._clearBrush());
+            this._zoomBehavior.filter(event => !event.shiftKey);
+        }
+        else {
+            this._brush.on('.brush', null);
+            select(window)
+                .on('keydown.unovis-graph', null)
+                .on('keyup.unovis-graph', null);
+            // Clear brush in case it was disabled in an active state
+            if (this._brush.classed('active'))
+                this._clearBrush();
+        }
         // Apply layout and render
         if (this._shouldRecalculateLayout || !this._layoutCalculationPromise) {
             this._layoutCalculationPromise = this._calculateLayout();
@@ -119,20 +150,21 @@ class Graph extends ComponentCore {
                 (_b = (_a = this.config).onLayoutCalculated) === null || _b === void 0 ? void 0 : _b.call(_a, datamodel.nodes, datamodel.links);
             });
         }
-        // Redefine Zoom Behavior filter is specified in the config
-        // https://d3js.org/d3-zoom#zoom_filter
+        // Redefining Zoom Behavior filter to the one specified in the config,
+        // or to the default one supporting `shiftKey` for node brushing
+        // See more: https://d3js.org/d3-zoom#zoom_filter
         this._zoomBehavior.filter(isFunction(zoomEventFilter)
             ? zoomEventFilter
-            : (e) => !e.shiftKey); // Default filter
-        this._layoutCalculationPromise.then((isFirstRender) => {
-            var _a, _b;
+            : (e) => (!e.ctrlKey || e.type === 'wheel') && !e.button && !e.shiftKey); // Default filter
+        this._layoutCalculationPromise.then(() => {
+            var _a, _b, _c;
             // If the component has been destroyed while the layout calculation
             // was in progress, we cancel the render
             if (this.isDestroyed())
                 return;
             this._initPanelsData();
             // Fit the view
-            if (isFirstRender) {
+            if (this._isFirstRender) {
                 this._fit();
                 this._shouldFitLayout = false;
             }
@@ -140,19 +172,20 @@ class Graph extends ComponentCore {
                 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);
+            // Update Nodes and Links Selection State
+            this._resetSelectionGreyoutState();
+            if (this.config.selectedNodeId || this.config.selectedNodeIds) {
+                const selectedIds = (_a = this.config.selectedNodeIds) !== null && _a !== void 0 ? _a : [this.config.selectedNodeId];
+                const selectedNodes = selectedIds.map(id => datamodel.getNodeFromId(id));
+                this._setNodeSelectionState(selectedNodes);
             }
             if (this.config.selectedLinkId) {
                 const selectedLink = datamodel.links.find(link => link.id === this.config.selectedLinkId);
-                this._selectLink(selectedLink);
+                this._setLinkSelectionState(selectedLink);
             }
+            // Draw
+            this._drawNodes(animDuration);
+            this._drawLinks(animDuration);
             // Link flow animation timer
             if (!this._timer) {
                 const refreshRateMs = 35;
@@ -163,10 +196,6 @@ class Graph extends ComponentCore {
                 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');
@@ -180,9 +209,9 @@ class Graph extends ComponentCore {
             this._setUpComponentEventsThrottled();
             this._setCustomAttributesThrottled();
             // On render complete callback
-            (_b = (_a = this.config).onRenderComplete) === null || _b === void 0 ? void 0 : _b.call(_a, this.g, datamodel.nodes, datamodel.links, this.config, animDuration, this._scale, this._width, this._height);
+            (_c = (_b = this.config).onRenderComplete) === null || _c === void 0 ? void 0 : _c.call(_b, this.g, datamodel.nodes, datamodel.links, this.config, animDuration, this._scale, this._containerWidth, this._containerHeight);
+            this._isFirstRender = false;
         });
-        this._isFirstRender = false;
     }
     _drawNodes(duration) {
         const { config, datamodel } = this;
@@ -204,9 +233,9 @@ class Graph extends ComponentCore {
         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)); });
+                .on('start drag end', function (event, d) {
+                thisRef._handleDrag(d, event, select(this));
+            });
             nodeGroupsMerged.call(dragBehaviour);
         }
         else {
@@ -261,7 +290,6 @@ class Graph extends ComponentCore {
     _calculateLayout() {
         return __awaiter(this, void 0, void 0, function* () {
             const { config, datamodel } = this;
-            const firstRender = this._isFirstRender;
             // If the layout type has changed, we need to reset the node positions if they were fixed before
             if (this._currentLayoutType !== config.layoutType) {
                 for (const node of datamodel.nodes) {
@@ -300,7 +328,6 @@ class Graph extends ComponentCore {
             this._initPanelsData();
             this._shouldRecalculateLayout = false;
             this._currentLayoutType = config.layoutType;
-            return firstRender;
         });
     }
     _initPanelsData() {
@@ -348,38 +375,45 @@ class Graph extends ComponentCore {
             .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 => {
+    _setNodeSelectionState(nodesToSelect) {
+        const { config, datamodel } = this;
+        // Grey out all nodes and set us unselected
+        for (const n of datamodel.nodes) {
             n._state.selected = false;
-            n._state.greyout = true;
-        });
-        // Grey out all links
-        links.forEach(l => {
-            l._state.greyout = true;
+            if (config.nodeSelectionHighlightMode !== GraphNodeSelectionHighlightMode.None) {
+                n._state.greyout = true;
+            }
+        }
+        // Grey out all links and set us unselected
+        for (const l of datamodel.links) {
             l._state.selected = false;
+            if (config.nodeSelectionHighlightMode !== GraphNodeSelectionHighlightMode.None) {
+                l._state.greyout = true;
+            }
+        }
+        // Filter out non-existing nodes
+        this._selectedNodes = nodesToSelect.filter(n => {
+            const doesNodeExist = Boolean(n);
+            if (!doesNodeExist)
+                console.warn('Unovis | Graph: Select Node: Not found');
+            return doesNodeExist;
         });
-        // Highlight selected
-        if (node) {
-            node._state.selected = true;
-            node._state.greyout = false;
-            const connectedLinks = links.filter(l => (l.source === node) || (l.target === node));
+        //  Set provided nodes as selected and ungreyout
+        for (const n of this._selectedNodes) {
+            n._state.selected = true;
+            n._state.greyout = false;
+        }
+        // Highlight connected links and nodes
+        if (config.nodeSelectionHighlightMode === GraphNodeSelectionHighlightMode.GreyoutNonConnected) {
+            const connectedLinks = datamodel.links.filter(l => this._selectedNodes.includes(l.source) || this._selectedNodes.includes(l.target));
             connectedLinks.forEach(l => {
-                const source = l.source;
-                const target = l.target;
-                source._state.greyout = false;
-                target._state.greyout = false;
+                l.source._state.greyout = false;
+                l.target._state.greyout = false;
                 l._state.greyout = false;
             });
         }
-        this._updateSelectedElements();
     }
-    _selectLink(link) {
+    _setLinkSelectionState(link) {
         const { datamodel: { nodes, links } } = this;
         if (!link)
             console.warn('Unovis: Graph: Select Link: Not found');
@@ -409,13 +443,12 @@ class Graph extends ComponentCore {
         });
         if (link)
             link._state.selected = true;
-        this._updateSelectedElements();
     }
-    _resetSelection() {
+    _resetSelectionGreyoutState() {
         const { datamodel: { nodes, links } } = this;
-        this._selectedNode = undefined;
+        this._selectedNodes = [];
         this._selectedLink = undefined;
-        // Disable Grayout
+        // Disable Greyout
         nodes.forEach(n => {
             delete n._state.selected;
             delete n._state.greyout;
@@ -424,27 +457,28 @@ class Graph extends ComponentCore {
             delete l._state.greyout;
             delete l._state.selected;
         });
-        this._updateSelectedElements();
     }
-    _updateSelectedElements() {
+    _updateNodesLinksPartial() {
         const { config } = this;
         const linkElements = this._linksGroup.selectAll(`.${gLink}`);
-        linkElements.call(updateSelectedLinks, config, this._scale);
+        linkElements.call(updateLinksPartial, config, this._scale);
         const nodeElements = this._nodesGroup.selectAll(`.${gNode}`);
-        nodeElements.call(updateNodeSelectedGreyout, config);
-        // this._drawPanels(nodeElements, 0)
+        nodeElements.call(updateNodesPartial, config, config.duration, this._scale);
     }
     _onBackgroundClick() {
-        this._resetSelection();
+        this._resetSelectionGreyoutState();
+        this._updateNodesLinksPartial();
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     _onNodeClick(d) {
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     _onNodeMouseOut(d) {
+        this._updateNodesLinksPartial();
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     _onNodeMouseOver(d) {
+        this._updateNodesLinksPartial();
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     _onLinkClick(d) {
@@ -453,13 +487,13 @@ class Graph extends ComponentCore {
         if (this._isDragging)
             return;
         d._state.hovered = true;
-        this._updateSelectedElements();
+        this._updateNodesLinksPartial();
     }
     _onLinkMouseOut(d) {
         if (this._isDragging)
             return;
         delete d._state.hovered;
-        this._updateSelectedElements();
+        this._updateNodesLinksPartial();
     }
     _onLinkFlowTimerFrame(elapsed = 0) {
         const { config: { linkFlow, linkFlowAnimDuration }, datamodel: { links } } = this;
@@ -478,7 +512,7 @@ class Graph extends ComponentCore {
         this._scale = transform.k;
         this._graphGroup.attr('transform', transform.toString());
         if (isFunction(config.onZoom))
-            config.onZoom(this._scale, config.zoomScaleExtent, event);
+            config.onZoom(this._scale, config.zoomScaleExtent, event, transform);
         // console.warn('Unovis | Graph: Zoom: ', transform)
         if (!this._initialTransform)
             this._initialTransform = transform;
@@ -503,27 +537,17 @@ class Graph extends ComponentCore {
         this._linksGroup.selectAll(`.${gLink}`)
             .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, _c;
-        const { config } = this;
+    _updateNodePosition(d, x, y) {
+        var _a, _b;
         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 nodeSizeValue = getNodeSize(d, this.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)
@@ -544,6 +568,62 @@ class Graph extends ComponentCore {
             delete d._state.fx;
         if (d._state.fy === d.y)
             delete d._state.fy;
+    }
+    _onBrush(event) {
+        var _a;
+        if (!event.selection || !event.sourceEvent)
+            return;
+        const { config } = this;
+        const transform = zoomTransform(this._graphGroup.node());
+        const [xMin, yMin] = transform.invert(event.selection[0]);
+        const [xMax, yMax] = transform.invert(event.selection[1]);
+        // Update brushed nodes
+        this._nodesGroup.selectAll(`.${gNode}`)
+            .each(n => {
+            const x = getX(n);
+            const y = getY(n);
+            n._state.brushed = x >= xMin && x <= xMax && y >= yMin && y <= yMax;
+        })
+            .classed(brushed, n => n._state.brushed);
+        const brushedNodes = this._nodesGroup.selectAll(`.${brushed}`)
+            .call(updateNodesPartial, config, 0, this._scale);
+        this._brush.classed('active', event.type !== 'end');
+        (_a = config.onNodeSelectionBrush) === null || _a === void 0 ? void 0 : _a.call(config, brushedNodes.data(), event);
+    }
+    _handleDrag(d, event, nodeSelection) {
+        if (event.sourceEvent.shiftKey && d._state.brushed) {
+            this._dragSelectedNodes(event);
+        }
+        else if (!event.sourceEvent.shiftKey) {
+            switch (event.type) {
+                case 'start':
+                    this._onDragStarted(d, event, nodeSelection);
+                    break;
+                case 'drag':
+                    this._onDragged(d, event);
+                    break;
+                case 'end':
+                    this._onDragEnded(d, event, nodeSelection);
+                    break;
+            }
+        }
+    }
+    _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) {
+        var _a;
+        const { config } = this;
+        const transform = zoomTransform(this.g.node());
+        const scale = transform.k;
+        // Update node position
+        const [x, y] = pointer(event, this._graphGroup.node());
+        this._updateNodePosition(d, x, y);
         // Update affected DOM elements
         const nodeSelection = this._nodesGroup.selectAll(`.${gNode}`);
         const nodeToUpdate = nodeSelection.filter((n) => n._id === d._id);
@@ -558,7 +638,7 @@ class Graph extends ComponentCore {
         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);
+        (_a = config.onNodeDrag) === null || _a === void 0 ? void 0 : _a.call(config, d, event);
     }
     _onDragEnded(d, event, nodeSelection) {
         var _a;
@@ -568,6 +648,49 @@ class Graph extends ComponentCore {
         nodeSelection.call(updateNodes, config, 0, this._scale);
         (_a = config.onNodeDragEnd) === null || _a === void 0 ? void 0 : _a.call(config, d, event);
     }
+    _dragSelectedNodes(event) {
+        var _a, _b;
+        const { config } = this;
+        const curr = pointer(event, this._graphGroup.node());
+        const selectedNodes = smartTransition(this._nodesGroup.selectAll(`.${brushed}`));
+        if (event.type === 'start') {
+            this._groupDragInit = curr;
+            this._isDragging = true;
+            selectedNodes.each(n => {
+                n.x = getX(n);
+                n.y = getY(n);
+                n._state.isDragged = true;
+            });
+        }
+        else if (event.type === 'drag') {
+            const dx = curr[0] - this._groupDragInit[0];
+            const dy = curr[1] - this._groupDragInit[1];
+            selectedNodes.each(n => this._updateNodePosition(n, n.x + dx, n.y + dy));
+            const connectedLinks = smartTransition(this._linksGroup.selectAll(`.${gLink}`)
+                .filter(l => { var _a, _b, _c, _d; return ((_b = (_a = l.source) === null || _a === void 0 ? void 0 : _a._state) === null || _b === void 0 ? void 0 : _b.isDragged) || ((_d = (_c = l.target) === null || _c === void 0 ? void 0 : _c._state) === null || _d === void 0 ? void 0 : _d.isDragged); }));
+            connectedLinks.call(updateLinks, this.config, 0, this._scale, this._getLinkArrowDefId);
+        }
+        else {
+            this._isDragging = false;
+            selectedNodes.each(n => { n._state.isDragged = false; });
+        }
+        selectedNodes.call(updateNodes, config, 0, this._scale);
+        (_b = (_a = this.config).onNodeSelectionDrag) === null || _b === void 0 ? void 0 : _b.call(_a, selectedNodes.data(), event);
+    }
+    _activateBrush() {
+        this._brush.classed('active', true);
+        this._nodesGroup.selectAll(`.${gNode}`)
+            .classed(brushable, true);
+    }
+    _clearBrush() {
+        var _a;
+        this._brush.classed('active', false).call((_a = this._brushBehavior) === null || _a === void 0 ? void 0 : _a.clear);
+        this._nodesGroup.selectAll(`.${gNode}`)
+            .classed(brushable, false)
+            .classed(brushed, false)
+            .each(n => { n._state.brushed = false; })
+            .call(updateNodesPartial, this.config, 0, this._scale);
+    }
     _shouldLayoutRecalculate() {
         const { prevConfig, config } = this;
         if (prevConfig.layoutType !== config.layoutType)