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

package/components/graph/index.js

@@ -1,6 +1,7 @@
 import { __awaiter } from 'tslib';
 import { min, max } from 'd3-array';
 import { select, pointer } from 'd3-selection';
+import { brush as brush$1 } from 'd3-brush';
 import { zoom, zoomTransform, zoomIdentity } from 'd3-zoom';
 import { drag } from 'd3-drag';
 import { interval } from 'd3-timer';
@@ -8,16 +9,16 @@ 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 { 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,7 +69,11 @@ 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;
@@ -95,7 +105,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 +119,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,13 +148,14 @@ 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
+            : (e) => (!e.ctrlKey || e.type === 'wheel') && !e.button && !e.shiftKey); // Default filter
         this._layoutCalculationPromise.then((isFirstRender) => {
-            var _a, _b;
+            var _a, _b, _c;
             // If the component has been destroyed while the layout calculation
             // was in progress, we cancel the render
             if (this.isDestroyed())
@@ -140,19 +170,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;
@@ -180,7 +211,7 @@ 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;
     }
@@ -204,9 +235,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 {
@@ -348,38 +379,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 +447,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,18 +461,17 @@ 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);
     }
     _onBackgroundClick() {
-        this._resetSelection();
+        this._resetSelectionGreyoutState();
+        this._updateNodesLinksPartial();
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     _onNodeClick(d) {
@@ -453,13 +489,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;
@@ -503,27 +539,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 +570,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 +640,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 +650,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)