@deck.gl-community/graph-layers 9.0.0

package/dist/core/interaction-manager.js

@@ -0,0 +1,169 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { EDGE_STATE, NODE_STATE } from './constants';
+const NODE_TO_EDGE_STATE_MAP = {
+    [NODE_STATE.DEFAULT]: EDGE_STATE.DEFAULT,
+    [NODE_STATE.HOVER]: EDGE_STATE.HOVER,
+    [NODE_STATE.DRAGGING]: EDGE_STATE.DRAGGING,
+    [NODE_STATE.SELECTED]: EDGE_STATE.SELECTED
+};
+function shouldEdgeBeSelected(edge) {
+    return edge
+        .getConnectedNodes()
+        .some((node) => node.getState() === NODE_STATE.SELECTED && node.shouldHighlightConnectedEdges());
+}
+function setNodeState(node, state) {
+    node.setState(state);
+    if (node.shouldHighlightConnectedEdges()) {
+        node.getConnectedEdges().forEach((edge) => {
+            let newEdgeState = NODE_TO_EDGE_STATE_MAP[state];
+            if (shouldEdgeBeSelected(edge)) {
+                newEdgeState = EDGE_STATE.SELECTED;
+            }
+            edge.setState(newEdgeState);
+        });
+    }
+}
+export class InteractionManager {
+    notifyCallback;
+    _lastInteraction = 0;
+    _lastHoveredNode = null;
+    _lastSelectedNode = null;
+    nodeEvents = undefined;
+    edgeEvents = undefined;
+    engine = undefined;
+    enableDragging = undefined;
+    resumeLayoutAfterDragging = undefined;
+    constructor(props, notifyCallback) {
+        this.updateProps(props);
+        this.notifyCallback = notifyCallback;
+        // internal state
+        this._lastInteraction = 0;
+        this._lastHoveredNode = null;
+        this._lastSelectedNode = null;
+    }
+    updateProps({ nodeEvents = {}, edgeEvents = {}, engine, enableDragging, resumeLayoutAfterDragging }) {
+        this.nodeEvents = nodeEvents;
+        this.edgeEvents = edgeEvents;
+        this.engine = engine;
+        this.enableDragging = enableDragging;
+        this.resumeLayoutAfterDragging = resumeLayoutAfterDragging;
+    }
+    getLastInteraction() {
+        return this._lastInteraction;
+    }
+    onClick(info, event) {
+        const { object } = info;
+        if (!object) {
+            return;
+        }
+        if (object.isNode) {
+            if (object.isSelectable()) {
+                if (this._lastSelectedNode) {
+                    setNodeState(this._lastSelectedNode, NODE_STATE.DEFAULT);
+                }
+                setNodeState(object, NODE_STATE.SELECTED);
+                this._lastSelectedNode = object;
+                this._lastInteraction = Date.now();
+                this.notifyCallback();
+            }
+            if (this.nodeEvents.onClick) {
+                this.nodeEvents.onClick(info, event);
+            }
+        }
+        if (object.isEdge && this.edgeEvents.onClick) {
+            this.edgeEvents.onClick(info, event);
+        }
+    }
+    _mouseLeaveNode() {
+        const lastHoveredNode = this._lastHoveredNode;
+        if (!(lastHoveredNode.isSelectable() && lastHoveredNode.getState() === NODE_STATE.SELECTED)) {
+            // reset the last hovered node's state
+            const newState = this._lastSelectedNode !== null && this._lastSelectedNode.id === this._lastHoveredNode?.id
+                ? NODE_STATE.SELECTED
+                : NODE_STATE.DEFAULT;
+            setNodeState(lastHoveredNode, newState);
+        }
+        // trigger the callback if exists
+        if (this.nodeEvents.onMouseLeave) {
+            this.nodeEvents.onMouseLeave(lastHoveredNode);
+        }
+    }
+    _mouseEnterNode(info) {
+        // set the node's state to hover
+        setNodeState(info.object, NODE_STATE.HOVER);
+        // trigger the callback if exists
+        if (this.nodeEvents.onMouseEnter) {
+            this.nodeEvents.onMouseEnter(info);
+        }
+        if (this.nodeEvents.onHover) {
+            this.nodeEvents.onHover(info);
+        }
+    }
+    onHover(info, event) {
+        if (!info.object) {
+            if (this._lastHoveredNode) {
+                this._mouseLeaveNode();
+                this._lastInteraction = Date.now();
+                this._lastHoveredNode = null;
+                this.notifyCallback();
+            }
+            return;
+        }
+        // hover over on a node
+        if (info.object.isNode) {
+            const isSameNode = this._lastHoveredNode && this._lastHoveredNode.id === info.object.id;
+            // stay in the same node
+            if (isSameNode) {
+                return;
+            }
+            if (this._lastHoveredNode) {
+                // reset the previous hovered node's state if not the same node
+                this._mouseLeaveNode();
+            }
+            // enter new node
+            this._mouseEnterNode(info);
+            this._lastInteraction = Date.now();
+            this._lastHoveredNode = info.object;
+            this.notifyCallback();
+        }
+        if (info.object.isEdge && this.edgeEvents.onHover) {
+            this.edgeEvents.onHover(info);
+        }
+    }
+    onDragStart(info, event) {
+        if (this.nodeEvents.onDragStart) {
+            this.nodeEvents.onDragStart(info);
+        }
+    }
+    onDrag(info, event) {
+        if (!info.object.isNode || !this.enableDragging) {
+            return;
+        }
+        event.stopImmediatePropagation();
+        // info.viewport is undefined when the object is offscreen, so we use viewport from onDragStart
+        const coordinates = info.layer.context.viewport.unproject([info.x, info.y]);
+        // limit the node position to be within bounds of the viewport
+        const bounds = info.layer.context.viewport.getBounds(); // [minX, minY, maxX, maxY]
+        const x = Math.min(Math.max(coordinates[0], bounds[0]), bounds[2]);
+        const y = Math.min(Math.max(coordinates[1], bounds[1]), bounds[3]);
+        this.engine.lockNodePosition(info.object, x, y);
+        setNodeState(info.object, NODE_STATE.DRAGGING);
+        this._lastInteraction = Date.now();
+        this.notifyCallback();
+        if (this.nodeEvents.onDrag) {
+            this.nodeEvents.onDrag(info);
+        }
+    }
+    onDragEnd(info, event) {
+        if (!info.object.isNode || !this.enableDragging) {
+            return;
+        }
+        if (this.resumeLayoutAfterDragging) {
+            this.engine.resume();
+        }
+        setNodeState(info.object, NODE_STATE.DEFAULT);
+        this.engine.unlockNodePosition(info.object);
+    }
+}

package/dist/core/node.d.ts

@@ -0,0 +1,103 @@
+import { NODE_STATE, ValueOf } from './constants';
+import { Edge } from './edge';
+interface NodeOptions {
+    id: number | string;
+    selectable?: boolean;
+    highlightConnectedEdges?: boolean;
+    data: Record<string, unknown>;
+}
+export declare class Node {
+    id: string | number;
+    /** Keep a reference to origin data. */
+    private _data;
+    /** List edges. */
+    private _connectedEdges;
+    /** Interaction state of the node. */
+    state: ValueOf<typeof NODE_STATE>;
+    /** Can the node be selected? */
+    private _selectable;
+    /** Should the state of this node affect the state of the connected edges? */
+    private _highlightConnectedEdges;
+    /** Check the type of the object when picking engine gets it. */
+    readonly isNode = true;
+    /**
+     * The constructor of a node
+     * @param  {String|Number} options.id   - the unique ID of the node
+     * @param  {Record<string, unknown>} options.data - origin data reference
+     */
+    constructor({ id, selectable, highlightConnectedEdges, data }: NodeOptions);
+    /**
+     * Return the ID of the node
+     * @return {String|Number} - the ID of the node.
+     */
+    getId(): string | number;
+    /**
+     * Return the degree of the node -- includes in-degree and out-degree
+     * @return {Number} - the degree of the node.
+     */
+    getDegree(): number;
+    /**
+     * Return the in-degree of the node.
+     * @return {Number} - the in-degree of the node.
+     */
+    getInDegree(): number;
+    /**
+     * Return the out-degree of the node.
+     * @return {Number} - the out-degree of the node.
+     */
+    getOutDegree(): number;
+    /**
+     * Return all the IDs of the sibling nodes.
+     * @return {String[]} [description]
+     */
+    getSiblingIds(): (string | number)[];
+    /**
+     * Return all the connected edges.
+     * @return {Object[]} - an array of the connected edges.
+     */
+    getConnectedEdges(): Edge[];
+    /**
+     * Return of the value of the selected property key.
+     * @param  {String} key - property key.
+     * @return {Any} - the value of the property or undefined (not found).
+     */
+    getPropertyValue(key: string): unknown;
+    /**
+     * Set the new node data.
+     * @param {Record<string, unknown>} data - the new data of the node
+     */
+    setData(data: Record<string, unknown>): void;
+    /**
+     * Update a data property.
+     * @param {String} key - the key of the property
+     * @param {Any} value - the value of the property.
+     */
+    setDataProperty(key: string, value: unknown): void;
+    /**
+     * Set node state
+     * @param {String} state - one of NODE_STATE
+     */
+    setState(state: ValueOf<typeof NODE_STATE>): void;
+    /**
+     * Get node state
+     * @returns {string} state - one of NODE_STATE
+     */
+    getState(): ValueOf<typeof NODE_STATE>;
+    /**
+     * Add connected edges to the node
+     * @param {Edge || Edge[]} edge an edge or an array of edges to be added to this._connectedEdges
+     */
+    addConnectedEdges(edge: Edge | Edge[]): void;
+    /**
+     * Remove edges from this._connectedEdges
+     * @param {Edge | Edge[]} edge an edge or an array of edges to be removed from this._connectedEdges
+     */
+    removeConnectedEdges(edge: Edge | Edge[]): void;
+    /**
+     * Clear this._connectedEdges
+     */
+    clearConnectedEdges(): void;
+    isSelectable(): boolean;
+    shouldHighlightConnectedEdges(): boolean;
+}
+export {};

package/dist/core/node.js

@@ -0,0 +1,177 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { NODE_STATE } from './constants';
+// Basic data structure of a node
+export class Node {
+    id;
+    /** Keep a reference to origin data. */
+    _data;
+    /** List edges. */
+    _connectedEdges = {};
+    /** Interaction state of the node. */
+    state = NODE_STATE.DEFAULT;
+    /** Can the node be selected? */
+    _selectable;
+    /** Should the state of this node affect the state of the connected edges? */
+    _highlightConnectedEdges;
+    /** Check the type of the object when picking engine gets it. */
+    isNode = true;
+    /**
+     * The constructor of a node
+     * @param  {String|Number} options.id   - the unique ID of the node
+     * @param  {Record<string, unknown>} options.data - origin data reference
+     */
+    constructor({ id, selectable = false, highlightConnectedEdges = false, data = {} }) {
+        this.id = id;
+        this._data = data;
+        this._selectable = selectable;
+        this._highlightConnectedEdges = highlightConnectedEdges;
+    }
+    /**
+     * Return the ID of the node
+     * @return {String|Number} - the ID of the node.
+     */
+    getId() {
+        return this.id;
+    }
+    /**
+     * Return the degree of the node -- includes in-degree and out-degree
+     * @return {Number} - the degree of the node.
+     */
+    getDegree() {
+        return Object.keys(this._connectedEdges).length;
+    }
+    /**
+     * Return the in-degree of the node.
+     * @return {Number} - the in-degree of the node.
+     */
+    getInDegree() {
+        const nodeId = this.getId();
+        return this.getConnectedEdges().reduce((count, e) => {
+            const isDirected = e.isDirected();
+            if (isDirected && e.getTargetNodeId() === nodeId) {
+                count += 1;
+            }
+            return count;
+        }, 0);
+    }
+    /**
+     * Return the out-degree of the node.
+     * @return {Number} - the out-degree of the node.
+     */
+    getOutDegree() {
+        const nodeId = this.getId();
+        return this.getConnectedEdges().reduce((count, e) => {
+            const isDirected = e.isDirected();
+            if (isDirected && e.getSourceNodeId() === nodeId) {
+                count += 1;
+            }
+            return count;
+        }, 0);
+    }
+    /**
+     * Return all the IDs of the sibling nodes.
+     * @return {String[]} [description]
+     */
+    getSiblingIds() {
+        const nodeId = this.getId();
+        return this.getConnectedEdges().reduce((siblings, e) => {
+            if (e.getTargetNodeId() === nodeId) {
+                siblings.push(e.getSourceNodeId());
+            }
+            else {
+                siblings.push(e.getTargetNodeId());
+            }
+            return siblings;
+        }, []);
+    }
+    /**
+     * Return all the connected edges.
+     * @return {Object[]} - an array of the connected edges.
+     */
+    getConnectedEdges() {
+        return Object.values(this._connectedEdges);
+    }
+    /**
+     * Return of the value of the selected property key.
+     * @param  {String} key - property key.
+     * @return {Any} - the value of the property or undefined (not found).
+     */
+    getPropertyValue(key) {
+        // try to search the key within this object
+        if (this.hasOwnProperty(key)) {
+            return this[key];
+        }
+        // try to search the key in the original data reference
+        else if (this._data.hasOwnProperty(key)) {
+            return this._data[key];
+        }
+        // otherwise, not found
+        return undefined;
+    }
+    /**
+     * Set the new node data.
+     * @param {Record<string, unknown>} data - the new data of the node
+     */
+    setData(data) {
+        this._data = data;
+    }
+    /**
+     * Update a data property.
+     * @param {String} key - the key of the property
+     * @param {Any} value - the value of the property.
+     */
+    setDataProperty(key, value) {
+        this._data[key] = value;
+    }
+    /**
+     * Set node state
+     * @param {String} state - one of NODE_STATE
+     */
+    setState(state) {
+        this.state = state;
+    }
+    /**
+     * Get node state
+     * @returns {string} state - one of NODE_STATE
+     */
+    getState() {
+        return this.state;
+    }
+    /**
+     * Add connected edges to the node
+     * @param {Edge || Edge[]} edge an edge or an array of edges to be added to this._connectedEdges
+     */
+    addConnectedEdges(edge) {
+        const iterableEdges = Array.isArray(edge) ? edge : [edge];
+        iterableEdges.forEach((e) => {
+            this._connectedEdges[e.id] = e;
+            e.addNode(this);
+        });
+    }
+    /**
+     * Remove edges from this._connectedEdges
+     * @param {Edge | Edge[]} edge an edge or an array of edges to be removed from this._connectedEdges
+     */
+    removeConnectedEdges(edge) {
+        const iterableEdges = Array.isArray(edge) ? edge : [edge];
+        iterableEdges.forEach((e) => {
+            e.removeNode(this);
+            delete this._connectedEdges[e.id];
+        });
+    }
+    /**
+     * Clear this._connectedEdges
+     */
+    clearConnectedEdges() {
+        Object.values(this._connectedEdges).forEach((e) => e.removeNode(this));
+        this._connectedEdges = {};
+    }
+    isSelectable() {
+        return this._selectable;
+    }
+    shouldHighlightConnectedEdges() {
+        return this._highlightConnectedEdges;
+    }
+}