@deck.gl-community/graph-layers 9.0.0

package/src/core/interaction-manager.ts

@@ -0,0 +1,225 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {EDGE_STATE, NODE_STATE, ValueOf} from './constants';
+import {Edge} from './edge';
+import {GraphEngine} from './graph-engine';
+import {Node} from './node';
+
+const NODE_TO_EDGE_STATE_MAP: Record<ValueOf<typeof NODE_STATE>, ValueOf<typeof EDGE_STATE>> = {
+  [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: Edge): boolean {
+  return edge
+    .getConnectedNodes()
+    .some(
+      (node) => node.getState() === NODE_STATE.SELECTED && node.shouldHighlightConnectedEdges()
+    );
+}
+
+function setNodeState(node: Node, state: ValueOf<typeof 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);
+    });
+  }
+}
+
+interface EventMap {
+  onClick?: (info: unknown, event: Event) => void;
+  onHover?: (info: unknown) => void;
+  onMouseEnter?: (info: unknown) => void;
+  onMouseLeave?: (node: Node) => void;
+  onDragStart?: (info: unknown) => void;
+  onDrag?: (info: unknown) => void;
+  onDragEnd?: (info: unknown) => void;
+}
+
+export interface InteractionManagerProps {
+  nodeEvents?: EventMap;
+  edgeEvents?: EventMap;
+  engine: GraphEngine;
+  enableDragging: boolean;
+  resumeLayoutAfterDragging: boolean;
+}
+
+export class InteractionManager {
+  public notifyCallback: Function;
+  private _lastInteraction = 0;
+  private _lastHoveredNode: Node | null = null;
+  private _lastSelectedNode: Node | null = null;
+
+  public nodeEvents: EventMap = undefined!;
+  public edgeEvents: EventMap = undefined!;
+  public engine: GraphEngine = undefined!;
+  public enableDragging: boolean = undefined!;
+  public resumeLayoutAfterDragging: boolean = undefined!;
+
+  constructor(props: InteractionManagerProps, notifyCallback: Function) {
+    this.updateProps(props);
+    this.notifyCallback = notifyCallback;
+
+    // internal state
+    this._lastInteraction = 0;
+    this._lastHoveredNode = null;
+    this._lastSelectedNode = null;
+  }
+
+  updateProps({
+    nodeEvents = {},
+    edgeEvents = {},
+    engine,
+    enableDragging,
+    resumeLayoutAfterDragging
+  }: InteractionManagerProps): void {
+    this.nodeEvents = nodeEvents;
+    this.edgeEvents = edgeEvents;
+    this.engine = engine;
+    this.enableDragging = enableDragging;
+    this.resumeLayoutAfterDragging = resumeLayoutAfterDragging;
+  }
+
+  getLastInteraction(): number {
+    return this._lastInteraction;
+  }
+
+  onClick(info, event): void {
+    const {object} = info;
+
+    if (!object) {
+      return;
+    }
+
+    if (object.isNode) {
+      if ((object as Node).isSelectable()) {
+        if (this._lastSelectedNode) {
+          setNodeState(this._lastSelectedNode, NODE_STATE.DEFAULT);
+        }
+        setNodeState(object, NODE_STATE.SELECTED);
+        this._lastSelectedNode = object as Node;
+        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(): void {
+    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): void {
+    // set the node's state to hover
+    setNodeState(info.object as Node, 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/src/core/node.ts

@@ -0,0 +1,205 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {NODE_STATE, ValueOf} from './constants';
+import {Edge} from './edge';
+
+interface NodeOptions {
+  id: number | string;
+  selectable?: boolean;
+  highlightConnectedEdges?: boolean;
+  data: Record<string, unknown>;
+}
+
+// Basic data structure of a node
+export class Node {
+  public id: string | number;
+  /** Keep a reference to origin data. */
+  private _data: Record<string, unknown>;
+  /** List edges. */
+  private _connectedEdges: Record<string, Edge> = {};
+  /** Interaction state of the node. */
+  public state: ValueOf<typeof NODE_STATE> = NODE_STATE.DEFAULT;
+  /** Can the node be selected? */
+  private _selectable: boolean;
+  /** Should the state of this node affect the state of the connected edges? */
+  private _highlightConnectedEdges: boolean;
+  /** Check the type of the object when picking engine gets it. */
+  public 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 = false, highlightConnectedEdges = false, data = {}}: NodeOptions) {
+    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(): string | number {
+    return this.id;
+  }
+
+  /**
+   * Return the degree of the node -- includes in-degree and out-degree
+   * @return {Number} - the degree of the node.
+   */
+  getDegree(): number {
+    return Object.keys(this._connectedEdges).length;
+  }
+
+  /**
+   * Return the in-degree of the node.
+   * @return {Number} - the in-degree of the node.
+   */
+  getInDegree(): number {
+    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(): number {
+    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(): (string | number)[] {
+    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;
+      },
+      [] as (string | number)[]
+    );
+  }
+
+  /**
+   * Return all the connected edges.
+   * @return {Object[]} - an array of the connected edges.
+   */
+  getConnectedEdges(): Edge[] {
+    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: string): unknown {
+    // 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: Record<string, unknown>): void {
+    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: string, value: unknown): void {
+    this._data[key] = value;
+  }
+
+  /**
+   * Set node state
+   * @param {String} state - one of NODE_STATE
+   */
+  setState(state: ValueOf<typeof NODE_STATE>): void {
+    this.state = state;
+  }
+
+  /**
+   * Get node state
+   * @returns {string} state - one of NODE_STATE
+   */
+  getState(): ValueOf<typeof NODE_STATE> {
+    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: Edge | Edge[]): void {
+    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: Edge | Edge[]): void {
+    const iterableEdges = Array.isArray(edge) ? edge : [edge];
+    iterableEdges.forEach((e) => {
+      e.removeNode(this);
+      delete this._connectedEdges[e.id];
+    });
+  }
+
+  /**
+   * Clear this._connectedEdges
+   */
+  clearConnectedEdges(): void {
+    Object.values(this._connectedEdges).forEach((e) => e.removeNode(this));
+    this._connectedEdges = {};
+  }
+
+  isSelectable(): boolean {
+    return this._selectable;
+  }
+
+  shouldHighlightConnectedEdges(): boolean {
+    return this._highlightConnectedEdges;
+  }
+}

package/src/index.ts

@@ -0,0 +1,42 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+// react-graph-layers core
+export {GraphEngine} from './core/graph-engine';
+export {Graph} from './core/graph';
+export {Node} from './core/node';
+export {Edge} from './core/edge';
+export {
+  NODE_STATE,
+  NODE_TYPE,
+  EDGE_TYPE,
+  EDGE_DECORATOR_TYPE,
+  LAYOUT_STATE,
+  MARKER_TYPE
+} from './core/constants';
+
+// react-graph-layers layouts
+export {BaseLayout} from './core/base-layout';
+export {D3ForceLayout} from './layouts/d3-force/d3-force-layout';
+export {GPUForceLayout} from './layouts/gpu-force/gpu-force-layout';
+export {SimpleLayout} from './layouts/simple-layout/simple-layout';
+
+// react-graph-layers loaders
+export {JSONLoader} from './loaders/json-loader';
+export {basicNodeParser} from './loaders/node-parsers';
+export {basicEdgeParser} from './loaders/edge-parsers';
+
+// react-graph-layers utils
+export {createGraph} from './utils/create-graph';
+export * from './utils/layer-utils';
+export * from './utils/log';
+
+// deck.gl components
+export {GraphLayer} from './layers/graph-layer';
+export {EdgeLayer} from './layers/edge-layer';
+
+// DEPRECATED
+
+/** @deprecated Use EdgeLayer */
+export {EdgeLayer as CompositeEdgeLayer} from './layers/edge-layer';

package/src/layers/common-layers/flow-path-layer/flow-path-layer-fragment.glsl.ts

@@ -0,0 +1,50 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export const fs = /* glsl */ `\
+#define SHADER_NAME flow-path-layer-fragment-shader
+
+precision highp float;
+
+varying vec4 vColor;
+varying float segmentIndex;
+varying float speed;
+varying float offset;
+varying float pathLength;
+varying float tailLength;
+
+void main(void) {
+  gl_FragColor = vColor;
+
+  // use highlight color if this fragment belongs to the selected object.
+  gl_FragColor = picking_filterHighlightColor(gl_FragColor);
+
+  // use picking color if rendering to picking FBO.
+  gl_FragColor = picking_filterPickingColor(gl_FragColor);
+
+  if (speed == 0.0) {
+    gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
+  } else {
+    // the portion of the visible segment (0 to 1) , ex: 0.3
+    // edge cases: pathLength = 0 or tailLength > pathLength
+    float segFragment = 0.0;
+    if (pathLength != 0.0) {
+      segFragment = tailLength / pathLength;
+    }
+    if (tailLength > pathLength) {
+      segFragment = 1.0;
+    }
+    float startSegmentIndex = mod(offset, 60.0) / 60.0;
+    // the end offset, cap to 1.0 (end of the line)
+    float endSegmentIndex = min(startSegmentIndex + segFragment, 1.0);
+    if (segmentIndex < startSegmentIndex || segmentIndex > endSegmentIndex) {
+      gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
+    } else {
+      // fading tail
+      float portion = (segmentIndex - startSegmentIndex) / segFragment;
+      gl_FragColor[3] = portion;
+    }
+  }
+}
+`;

package/src/layers/common-layers/flow-path-layer/flow-path-layer-vertex-tf.glsl.ts

@@ -0,0 +1,15 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export const tfvs = /* glsl */ `\
+#define SHADER_NAME flow-path-layer-vertex-tf-shader
+
+attribute float a_offset;
+attribute float a_speed;
+varying float v_offset;
+
+void main(void) {
+  v_offset = a_offset + a_speed;
+}
+`;

package/src/layers/common-layers/flow-path-layer/flow-path-layer-vertex.glsl.ts

@@ -0,0 +1,74 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export const vs = /* glsl */ `\
+#define SHADER_NAME flow-path-layer-vertex-shader
+
+attribute vec3 positions;
+attribute vec3 instanceSourcePositions;
+attribute vec3 instanceTargetPositions;
+attribute vec4 instanceSourceTargetPositions64xyLow;
+attribute vec4 instanceColors;
+attribute vec3 instancePickingColors;
+attribute float instanceWidths;
+attribute float instanceSpeeds;
+attribute float instanceOffsets;
+attribute float instanceTailLengths;
+
+uniform float opacity;
+uniform float widthScale;
+uniform float widthMinPixels;
+uniform float widthMaxPixels;
+
+varying vec4 vColor;
+varying float segmentIndex;
+varying float speed;
+varying float pathLength;
+varying float tailLength;
+varying float offset;
+
+// offset vector by strokeWidth pixels
+// offset_direction is -1 (left) or 1 (right)
+vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction, float width) {
+  // normalized direction of the line
+  vec2 dir_screenspace = normalize(line_clipspace * project_uViewportSize);
+  // rotate by 90 degrees
+  dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x);
+
+  vec2 offset_screenspace = dir_screenspace * offset_direction * width / 2.0;
+  vec2 offset_clipspace = project_pixel_size_to_clipspace(offset_screenspace);
+
+  return offset_clipspace;
+}
+
+void main(void) {
+  // Position
+  vec4 source = project_position_to_clipspace(instanceSourcePositions, instanceSourceTargetPositions64xyLow.xy, vec3(0.));
+  vec4 target = project_position_to_clipspace(instanceTargetPositions, instanceSourceTargetPositions64xyLow.zw, vec3(0.));
+
+  // Multiply out width and clamp to limits
+  float widthPixels = clamp(
+    project_size_to_pixel(instanceWidths * widthScale),
+    widthMinPixels, widthMaxPixels
+  );
+
+  // linear interpolation of source & target to pick right coord
+  segmentIndex = positions.x;
+  speed = instanceSpeeds;
+  tailLength = project_size_to_pixel(instanceTailLengths * widthScale);
+  offset = instanceOffsets;
+  pathLength = distance(instanceSourcePositions, instanceTargetPositions);
+  vec4 p = mix(source, target, segmentIndex);
+
+  // extrude
+  vec2 offset = getExtrusionOffset(target.xy - source.xy, positions.y, widthPixels);
+  gl_Position = p + vec4(offset, 0.0, 0.0);
+
+  // Color
+  vColor = vec4(instanceColors.rgb, instanceColors.a * opacity) / 255.;
+
+  // Set color to be rendered to picking fbo (also used to check for selection highlight).
+  picking_setPickingColor(instancePickingColors);
+}
+`;