@unovis/ts 1.4.2-alpha.1 → 1.4.2-beta.0

package/components/graph/index.js

@@ -1,18 +1,19 @@
 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';
 import { ComponentCore } from '../../core/component/index.js';
 import { GraphDataModel } from '../../data-models/graph.js';
-import { isNumber, clamp, getBoolean, isFunction, shallowDiff, isPlainObject } from '../../utils/data.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 { 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, updateSelectedNodes, zoomNodesThrottled, zoomNodes } from './modules/node/index.js';
@@ -53,17 +54,28 @@ 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));
+            .on('zoom', (e) => this._onZoom(e.transform, e))
+            .filter(event => !event.shiftKey);
+        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);
         this._defs = this._graphGroup.append('defs');
         this._getLinkArrowDefId = this._getLinkArrowDefId.bind(this);
     }
+    /** @deprecated Use selectedNodes instead */
     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;
@@ -89,7 +101,7 @@ class Graph extends ComponentCore {
         return { top: extraPadding, bottom: extraPadding, left: extraPadding, right: extraPadding };
     }
     _render(customDuration) {
-        const { config: { disableZoom, duration, layoutAutofit }, datamodel } = this;
+        const { config: { disableBrush, disableZoom, duration, layoutAutofit }, datamodel } = this;
         if (!datamodel.nodes && !datamodel.links)
             return;
         const animDuration = isNumber(customDuration) ? customDuration : duration;
@@ -103,11 +115,31 @@ 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();
         }
         this._layoutCalculationPromise.then((isFirstRender) => {
+            var _a;
             // If the component has been destroyed while the layout calculation
             // was in progress, we cancel the render
             if (this.isDestroyed())
@@ -127,9 +159,10 @@ class Graph extends ComponentCore {
             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.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._selectNodes(selectedNodes);
             }
             if (this.config.selectedLinkId) {
                 const selectedLink = datamodel.links.find(link => link.id === this.config.selectedLinkId);
@@ -184,9 +217,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 {
@@ -241,15 +274,8 @@ class Graph extends ComponentCore {
     _calculateLayout() {
         var _a, _b;
         return __awaiter(this, void 0, void 0, function* () {
-            const { prevConfig, config, datamodel } = this;
+            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 (prevConfig.layoutType !== config.layoutType) {
-                for (const node of datamodel.nodes) {
-                    delete node._state.fx;
-                    delete node._state.fy;
-                }
-            }
             switch (config.layoutType) {
                 case GraphLayoutType.Precalculated:
                     break;
@@ -330,21 +356,9 @@ class Graph extends ComponentCore {
         return transform;
     }
     _selectNode(node) {
-        const { datamodel: { nodes, links } } = this;
+        const { datamodel: { 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;
@@ -360,6 +374,24 @@ class Graph extends ComponentCore {
         }
         this._updateSelectedElements();
     }
+    _selectNodes(nodes) {
+        // Apply grey out
+        // Grey out all nodes
+        this.datamodel.nodes.forEach(n => {
+            n._state.selected = false;
+            n._state.greyout = true;
+        });
+        // Grey out all links
+        this.datamodel.links.forEach(l => {
+            l._state.greyout = true;
+            l._state.selected = false;
+        });
+        nodes.forEach(n => {
+            this._selectedNodes.push(n);
+            this._selectNode(n);
+        });
+        this._updateSelectedElements();
+    }
     _selectLink(link) {
         const { datamodel: { nodes, links } } = this;
         if (!link)
@@ -394,7 +426,7 @@ class Graph extends ComponentCore {
     }
     _resetSelection() {
         const { datamodel: { nodes, links } } = this;
-        this._selectedNode = undefined;
+        this._selectedNodes = [];
         this._selectedLink = undefined;
         // Disable Grayout
         nodes.forEach(n => {
@@ -484,27 +516,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)
@@ -525,6 +547,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(updateSelectedNodes, 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);
@@ -539,7 +617,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;
@@ -549,6 +627,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(updateSelectedNodes, this.config, 0, this._scale);
+    }
     _shouldLayoutRecalculate() {
         const { prevConfig, config } = this;
         if (prevConfig.layoutType !== config.layoutType)
@@ -565,17 +686,6 @@ class Graph extends ComponentCore {
             if (Object.keys(dagreSettingsDiff).length)
                 return true;
         }
-        if (prevConfig.layoutType === GraphLayoutType.Elk) {
-            if (isPlainObject(prevConfig.layoutElkSettings) && isPlainObject(config.layoutElkSettings)) {
-                // Do a deeper comparison if `config.layoutElkSettings` is an object
-                const elkSettingsDiff = shallowDiff(prevConfig.layoutElkSettings, config.layoutElkSettings);
-                return Boolean(Object.keys(elkSettingsDiff).length);
-            }
-            else {
-                // Otherwise, do a simple `===` comparison
-                return prevConfig.layoutElkSettings !== config.layoutElkSettings;
-            }
-        }
         if (prevConfig.layoutType === GraphLayoutType.Parallel ||
             prevConfig.layoutType === GraphLayoutType.ParallelHorizontal ||
             prevConfig.layoutType === GraphLayoutType.Concentric) {