@deck.gl-community/graph-layers 9.0.0

package/src/layers/common-layers/zoomable-text-layer/zoomable-text-layer.ts

@@ -0,0 +1,90 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {CompositeLayer} from '@deck.gl/core';
+import {TextLayer} from '@deck.gl/layers';
+
+export class ZoomableTextLayer extends CompositeLayer {
+  static layerName = 'ZoomableTextLayer';
+
+  initializeState() {
+    this.state = {characterSet: []};
+  }
+
+  shouldUpdateState({props, changeFlags}) {
+    const {scaleWithZoom} = this.props as any;
+    if (!scaleWithZoom) {
+      return changeFlags.dataChanged || changeFlags.propsChanged;
+    }
+    return changeFlags.dataChanged || changeFlags.propsChanged || changeFlags.viewportChanged;
+  }
+
+  updateState({props, oldProps, changeFlags}) {
+    super.updateState({props, oldProps, changeFlags} as any);
+    if (changeFlags.propsOrDataChanged) {
+      const {getText} = props;
+      let textLabels = [];
+      if (typeof getText === 'function') {
+        textLabels = props.data.map(getText);
+      } else {
+        textLabels = [getText];
+      }
+      const characterSet = new Set(textLabels.join(''));
+      const uniqueCharacters = Array.from(characterSet);
+      this.setState({characterSet: uniqueCharacters});
+    }
+  }
+
+  renderLayers() {
+    const {
+      data,
+      getPosition,
+      getColor,
+      getText,
+      getSize,
+      getTextAnchor,
+      getAlignmentBaseline,
+      getAngle,
+      scaleWithZoom,
+      updateTriggers,
+      fontFamily,
+      textWordUnits,
+      textWordBreak,
+      textMaxWidth,
+      textSizeMinPixels
+    } = this.props as any;
+
+    const sizeUpdateTrigger = scaleWithZoom ? [getSize, this.context.viewport.zoom] : false;
+    // getText only expects function not plain value (string)
+    const newGetText = typeof getText === 'function' ? getText : () => getText;
+
+    return [
+      new TextLayer(
+        this.getSubLayerProps({
+          id: '__text-layer',
+          data,
+          sizeScale: scaleWithZoom ? Math.pow(2, this.context.viewport.zoom - 1) : 1,
+          characterSet: this.state.characterSet,
+          getPosition,
+          getColor,
+          getSize,
+          getTextAnchor,
+          getAlignmentBaseline,
+          getAngle,
+          getText: newGetText,
+          maxWidth: textMaxWidth ?? 12,
+          wordBreak: textWordBreak ?? 'break-all',
+          fontFamily: fontFamily ?? 'Red Hat Text',
+          wordUnits: textWordUnits ?? 'pixels',
+          sizeMinPixels: textSizeMinPixels ?? 9,
+          updateTriggers: {
+            getSize: sizeUpdateTrigger,
+            getAngle: [sizeUpdateTrigger, updateTriggers.getPosition],
+            ...updateTriggers
+          }
+        })
+      )
+    ];
+  }
+}

package/src/layers/edge-layer.ts

@@ -0,0 +1,88 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {COORDINATE_SYSTEM, CompositeLayer} from '@deck.gl/core';
+
+import {EDGE_TYPE} from '../core/constants';
+import {StraightLineEdgeLayer} from '../layers/edge-layers/straight-line-edge-layer';
+import {PathEdgeLayer} from './edge-layers/path-edge-layer';
+import {CurvedEdgeLayer} from './edge-layers/curved-edge-layer';
+
+const EDGE_LAYER_MAP = {
+  [EDGE_TYPE.LINE]: StraightLineEdgeLayer,
+  [EDGE_TYPE.PATH]: PathEdgeLayer,
+  [EDGE_TYPE.SPLINE_CURVE]: CurvedEdgeLayer
+};
+
+export class EdgeLayer extends CompositeLayer {
+  static layerName = 'EdgeLayer';
+
+  static defaultProps = {
+    data: [],
+    pickable: true,
+    getLayoutInfo: (d) => ({
+      type: d.type,
+      sourcePosition: d.sourcePosition,
+      targetPosition: d.targetPosition,
+      controlPoints: []
+    }),
+    positionUpdateTrigger: 0
+  };
+
+  updateState({props, oldProps, changeFlags}) {
+    super.updateState({props, oldProps, changeFlags} as any);
+    if (changeFlags.dataChanged) {
+      this.updateStateData();
+    }
+  }
+
+  updateStateData() {
+    const {data, getLayoutInfo} = this.props as any;
+    // bucket edges by types
+    const typedEdgeData = data.reduce(
+      (res, d) => {
+        const {type} = getLayoutInfo(d);
+        res[type].push(d);
+        return res;
+      },
+      {
+        [EDGE_TYPE.LINE]: [],
+        [EDGE_TYPE.PATH]: [],
+        [EDGE_TYPE.SPLINE_CURVE]: []
+      }
+    );
+    this.setState({typedEdgeData});
+  }
+
+  renderLayers() {
+    const {getLayoutInfo, pickable, positionUpdateTrigger, stylesheet, id} = this.props as any;
+
+    const {typedEdgeData} = this.state;
+
+    // render lines by types (straight line, path, curves)
+    return Object.entries(typedEdgeData).map((e, idx) => {
+      const [type, edgeData] = e;
+      const Layer = EDGE_LAYER_MAP[type];
+      // invalid edge layer type
+      if (!Layer) {
+        return null;
+      }
+      return new Layer({
+        id: `${id}-${idx}`,
+        data: edgeData,
+        getLayoutInfo,
+        getColor: stylesheet.getDeckGLAccessor('getColor'),
+        getWidth: stylesheet.getDeckGLAccessor('getWidth'),
+        colorUpdateTrigger: stylesheet.getDeckGLAccessorUpdateTrigger('getColor'),
+        widthUpdateTrigger: stylesheet.getDeckGLAccessorUpdateTrigger('getWidth'),
+        positionUpdateTrigger,
+        pickable,
+        coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+        parameters: {
+          depthCompare: 'always'
+        }
+      } as any);
+    });
+  }
+}

package/src/layers/edge-layers/curved-edge-layer.ts

@@ -0,0 +1,88 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {CompositeLayer} from '@deck.gl/core';
+import {ScatterplotLayer, LineLayer} from '@deck.gl/layers';
+import {SplineLayer} from '../common-layers/spline-layer/spline-layer';
+
+const DEBUG = false;
+
+export class CurvedEdgeLayer extends CompositeLayer {
+  static layerName = 'CurvedEdgeLayer';
+
+  // @ts-expect-error TODO
+  renderLayers() {
+    const {
+      data,
+      getLayoutInfo,
+      positionUpdateTrigger = 0,
+      colorUpdateTrigger = 0,
+      widthUpdateTrigger = 0,
+      ...otherProps
+    } = this.props as any;
+    return [
+      DEBUG &&
+        new ScatterplotLayer(
+          this.getSubLayerProps({
+            id: '__control-points',
+            data,
+            getPosition: (e) => getLayoutInfo(e).controlPoints[0],
+            getColor: (d) => [190, 190, 190, 150],
+            getRadius: (d) => 5,
+            updateTriggers: {
+              getPosition: positionUpdateTrigger
+            },
+            ...otherProps
+          })
+        ),
+      DEBUG &&
+        new LineLayer(
+          this.getSubLayerProps({
+            id: '__first_segment',
+            data,
+            getSourcePosition: (e) => getLayoutInfo(e).sourcePosition,
+            getTargetPosition: (e) => getLayoutInfo(e).controlPoints[0],
+            getColor: (e) => [210, 210, 210, 150],
+            updateTriggers: {
+              getSourcePosition: positionUpdateTrigger,
+              getTargetPosition: positionUpdateTrigger
+            },
+            ...otherProps
+          })
+        ),
+      DEBUG &&
+        new LineLayer(
+          this.getSubLayerProps({
+            id: '__last_segment',
+            data,
+            getSourcePosition: (e) => getLayoutInfo(e).controlPoints[0],
+            getTargetPosition: (e) => getLayoutInfo(e).targetPosition,
+            getColor: (e) => [210, 210, 210, 150],
+            updateTriggers: {
+              getSourcePosition: positionUpdateTrigger,
+              getTargetPosition: positionUpdateTrigger
+            },
+            ...otherProps
+          })
+        ),
+      new SplineLayer(
+        this.getSubLayerProps({
+          id: '__spline_layer',
+          data,
+          getSourcePosition: (e) => getLayoutInfo(e).sourcePosition,
+          getTargetPosition: (e) => getLayoutInfo(e).targetPosition,
+          getControlPoints: (e) => getLayoutInfo(e).controlPoints,
+          updateTriggers: {
+            getSourcePosition: positionUpdateTrigger,
+            getTargetPosition: positionUpdateTrigger,
+            getControlPoints: positionUpdateTrigger,
+            getColor: colorUpdateTrigger,
+            getWidth: widthUpdateTrigger
+          },
+          ...otherProps
+        })
+      )
+    ];
+  }
+}

package/src/layers/edge-layers/edge-label-layer.ts

@@ -0,0 +1,48 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {CompositeLayer} from '@deck.gl/core';
+import {ZoomableTextLayer} from '../common-layers/zoomable-text-layer/zoomable-text-layer';
+
+export class EdgeLabelLayer extends CompositeLayer {
+  static layerName = 'EdgeLabelLayer';
+
+  renderLayers() {
+    const {data, getLayoutInfo, positionUpdateTrigger = 0, stylesheet} = this.props as any;
+    return [
+      new ZoomableTextLayer(
+        this.getSubLayerProps({
+          id: 'edge-label-layer',
+          data,
+          getPosition: (e) => {
+            const {sourcePosition, targetPosition, controlPoints = []} = getLayoutInfo(e);
+            // consider all the points on this edge
+            const allPoints = [sourcePosition, targetPosition, ...controlPoints];
+            const sumX = allPoints.reduce((res, p) => res + p[0], 0);
+            const sumY = allPoints.reduce((res, p) => res + p[1], 0);
+            // find the centroid of those points
+            return [sumX / allPoints.length, sumY / allPoints.length];
+          },
+          getAngle: (e) => {
+            const {sourcePosition, targetPosition} = getLayoutInfo(e);
+            // sort the nodes from left to right
+            const [newSourcePosition, newTargetPosition] =
+              sourcePosition[0] < targetPosition[0]
+                ? [sourcePosition, targetPosition]
+                : [targetPosition, sourcePosition];
+            // angle in degrees
+            const deltaX = newTargetPosition[0] - newSourcePosition[0];
+            const deltaY = newTargetPosition[1] - newSourcePosition[1];
+            return (Math.atan2(deltaY, deltaX) * -180) / Math.PI;
+          },
+          ...stylesheet.getDeckGLAccessors(),
+          updateTriggers: {
+            ...stylesheet.getDeckGLUpdateTriggers(),
+            getPosition: positionUpdateTrigger
+          }
+        })
+      )
+    ];
+  }
+}

package/src/layers/edge-layers/flow-layer.ts

@@ -0,0 +1,34 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {CompositeLayer} from '@deck.gl/core';
+
+import {FlowPathLayer} from '../common-layers/flow-path-layer/flow-path-layer';
+
+export class FlowLayer extends CompositeLayer {
+  static layerName = 'FlowLayer';
+
+  renderLayers() {
+    const {data, getLayoutInfo, positionUpdateTrigger = 0, stylesheet} = this.props as any;
+    return [
+      new FlowPathLayer(
+        this.getSubLayerProps({
+          id: '__flow-layer',
+          data,
+          ...stylesheet.getDeckGLAccessors(),
+          getSourcePosition: (e) => getLayoutInfo(e).sourcePosition,
+          getTargetPosition: (e) => getLayoutInfo(e).targetPosition,
+          parameters: {
+            depthTest: false
+          },
+          updateTriggers: {
+            ...stylesheet.getDeckGLUpdateTriggers(),
+            getSourcePosition: positionUpdateTrigger,
+            getTargetPosition: positionUpdateTrigger
+          }
+        })
+      )
+    ];
+  }
+}

package/src/layers/edge-layers/path-edge-layer.ts

@@ -0,0 +1,39 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {CompositeLayer} from '@deck.gl/core';
+import {PathLayer} from '@deck.gl/layers';
+
+export class PathEdgeLayer extends CompositeLayer {
+  static layerName = 'PathEdgeLayer';
+
+  renderLayers() {
+    const {
+      data,
+      getLayoutInfo,
+      positionUpdateTrigger = 0,
+      colorUpdateTrigger = 0,
+      widthUpdateTrigger = 0,
+      ...otherProps
+    } = this.props as any;
+    return [
+      new PathLayer(
+        this.getSubLayerProps({
+          id: '__line-layer',
+          data,
+          getPath: (e) => {
+            const {sourcePosition, targetPosition, controlPoints} = getLayoutInfo(e);
+            return [sourcePosition, ...controlPoints, targetPosition];
+          },
+          updateTriggers: {
+            getColor: colorUpdateTrigger,
+            getPath: positionUpdateTrigger,
+            getWidth: widthUpdateTrigger
+          },
+          ...otherProps
+        })
+      )
+    ];
+  }
+}

package/src/layers/edge-layers/straight-line-edge-layer.ts

@@ -0,0 +1,38 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {CompositeLayer} from '@deck.gl/core';
+import {LineLayer} from '@deck.gl/layers';
+
+export class StraightLineEdgeLayer extends CompositeLayer {
+  static layerName = 'StraightLineEdgeLayer';
+
+  renderLayers() {
+    const {
+      data,
+      getLayoutInfo,
+      positionUpdateTrigger = 0,
+      colorUpdateTrigger = 0,
+      widthUpdateTrigger = 0,
+      ...otherProps
+    } = this.props as any;
+    return [
+      new LineLayer(
+        this.getSubLayerProps({
+          id: '__line-layer',
+          data,
+          getSourcePosition: (e) => getLayoutInfo(e).sourcePosition,
+          getTargetPosition: (e) => getLayoutInfo(e).targetPosition,
+          updateTriggers: {
+            getColor: colorUpdateTrigger,
+            getSourcePosition: positionUpdateTrigger,
+            getTargetPosition: positionUpdateTrigger,
+            getWidth: widthUpdateTrigger
+          },
+          ...otherProps
+        })
+      )
+    ];
+  }
+}

package/src/layers/graph-layer.ts

@@ -0,0 +1,225 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {COORDINATE_SYSTEM, CompositeLayer} from '@deck.gl/core';
+
+import {Stylesheet} from '../style/style-sheet';
+import {NODE_TYPE, EDGE_DECORATOR_TYPE} from '../core/constants';
+import {mixedGetPosition} from '../utils/layer-utils';
+import {InteractionManager} from '../core/interaction-manager';
+
+import {log} from '../utils/log';
+
+// node layers
+import {CircleLayer} from './node-layers/circle-layer';
+import {ImageLayer} from './node-layers/image-layer';
+import {LabelLayer} from './node-layers/label-layer';
+import {RectangleLayer} from './node-layers/rectangle-layer';
+import {RoundedRectangleLayer} from './node-layers/rounded-rectangle-layer';
+import {PathBasedRoundedRectangleLayer} from './node-layers/path-rounded-rectange-layer';
+import {ZoomableMarkerLayer} from './node-layers/zoomable-marker-layer';
+
+// edge layers
+import {EdgeLayer} from './edge-layer';
+import {EdgeLabelLayer} from './edge-layers/edge-label-layer';
+import {FlowLayer} from './edge-layers/flow-layer';
+
+const NODE_LAYER_MAP = {
+  [NODE_TYPE.RECTANGLE]: RectangleLayer,
+  [NODE_TYPE.ROUNDED_RECTANGLE]: RoundedRectangleLayer,
+  [NODE_TYPE.PATH_ROUNDED_RECTANGLE]: PathBasedRoundedRectangleLayer,
+  [NODE_TYPE.ICON]: ImageLayer,
+  [NODE_TYPE.CIRCLE]: CircleLayer,
+  [NODE_TYPE.LABEL]: LabelLayer,
+  [NODE_TYPE.MARKER]: ZoomableMarkerLayer
+};
+
+const EDGE_DECORATOR_LAYER_MAP = {
+  [EDGE_DECORATOR_TYPE.LABEL]: EdgeLabelLayer,
+  [EDGE_DECORATOR_TYPE.FLOW]: FlowLayer
+};
+
+const SHARED_LAYER_PROPS = {
+  coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+  parameters: {
+    depthTest: false
+  }
+};
+const defaultProps = {
+  // an array of styles for layers
+  nodeStyle: [],
+  nodeEvents: {
+    onMouseLeave: () => {},
+    onHover: () => {},
+    onMouseEnter: () => {},
+    onClick: () => {},
+    onDrag: () => {}
+  },
+  edgeStyle: {
+    color: 'black',
+    strokeWidth: 1,
+    // an array of styles for layers
+    decorators: []
+  },
+  edgeEvents: {
+    onClick: () => {},
+    onHover: () => {}
+  },
+  enableDragging: false
+};
+
+export class GraphLayer extends CompositeLayer {
+  static defaultProps = {
+    pickable: true
+  };
+
+  forceUpdate = () => {
+    if (this.context && this.context.layerManager) {
+      this.setNeedsUpdate();
+      this.setChangeFlags({dataChanged: true} as any); // TODO
+    }
+  };
+
+  constructor(props) {
+    super(props);
+
+    // added or removed a node, or in general something layout related changed
+    props.engine.addEventListener('onLayoutChange', this.forceUpdate);
+  }
+
+  initializeState() {
+    const interactionManager = new InteractionManager(this.props as any, () => this.forceUpdate());
+    this.state = {interactionManager};
+  }
+
+  shouldUpdateState({changeFlags}) {
+    return changeFlags.dataChanged || changeFlags.propsChanged;
+  }
+
+  updateState({props}) {
+    (this.state.interactionManager as any).updateProps(props);
+  }
+
+  finalize() {
+    (this.props as any).engine.removeEventListener('onLayoutChange', this.forceUpdate);
+  }
+
+  createNodeLayers() {
+    const {engine, nodeStyle} = this.props as any;
+    if (!nodeStyle || !Array.isArray(nodeStyle) || nodeStyle.length === 0) {
+      return [];
+    }
+    return nodeStyle.filter(Boolean).map((style, idx) => {
+      const {pickable = true, visible = true, data = (nodes) => nodes, ...restStyle} = style;
+      const LayerType = NODE_LAYER_MAP[style.type];
+      if (!LayerType) {
+        log.error(`Invalid node type: ${style.type}`)();
+        throw new Error(`Invalid node type: ${style.type}`);
+      }
+      const stylesheet = new Stylesheet(restStyle, {
+        stateUpdateTrigger: (this.state.interactionManager as any).getLastInteraction()
+      });
+      const getOffset = stylesheet.getDeckGLAccessor('getOffset');
+      return new LayerType({
+        ...SHARED_LAYER_PROPS,
+        id: `node-rule-${idx}`,
+        data: data(engine.getNodes()),
+        getPosition: mixedGetPosition(engine.getNodePosition, getOffset),
+        pickable,
+        positionUpdateTrigger: [
+          engine.getLayoutLastUpdate(),
+          engine.getLayoutState(),
+          stylesheet.getDeckGLAccessorUpdateTrigger('getOffset')
+        ].join(),
+        stylesheet,
+        visible
+      } as any);
+    });
+  }
+
+  createEdgeLayers() {
+    const {edgeStyle, engine} = this.props as any;
+
+    if (!edgeStyle) {
+      return [];
+    }
+
+    return (Array.isArray(edgeStyle) ? edgeStyle : [edgeStyle])
+      .filter(Boolean)
+      .flatMap((style, idx) => {
+        const {decorators, data = (edges) => edges, visible = true, ...restEdgeStyle} = style;
+        const stylesheet = new Stylesheet(
+          {
+            type: 'Edge',
+            ...restEdgeStyle
+          },
+          {
+            stateUpdateTrigger: (this.state.interactionManager as any).getLastInteraction()
+          }
+        );
+
+        const edgeLayer = new EdgeLayer({
+          ...SHARED_LAYER_PROPS,
+          id: `edge-layer-${idx}`,
+          data: data(engine.getEdges()),
+          getLayoutInfo: engine.getEdgePosition,
+          pickable: true,
+          positionUpdateTrigger: [engine.getLayoutLastUpdate(), engine.getLayoutState()].join(),
+          stylesheet,
+          visible
+        } as any);
+
+        if (!decorators || !Array.isArray(decorators) || decorators.length === 0) {
+          return edgeLayer;
+        }
+        const decoratorLayers = decorators.filter(Boolean).flatMap((decoratorStyle, idx2) => {
+          const DecoratorLayer = EDGE_DECORATOR_LAYER_MAP[decoratorStyle.type];
+          if (!DecoratorLayer) {
+            log.error(`Invalid edge decorator type: ${decoratorStyle.type}`)();
+            throw new Error(`Invalid edge decorator type: ${decoratorStyle.type}`);
+          }
+          const decoratorStylesheet = new Stylesheet(decoratorStyle, {
+            stateUpdateTrigger: (this.state.interactionManager as any).getLastInteraction()
+          });
+          return new DecoratorLayer({
+            ...SHARED_LAYER_PROPS,
+            id: `edge-decorator-${idx2}`,
+            data: data(engine.getEdges()),
+            getLayoutInfo: engine.getEdgePosition,
+            pickable: true,
+            positionUpdateTrigger: [engine.getLayoutLastUpdate(), engine.getLayoutState()].join(),
+            stylesheet: decoratorStylesheet
+          } as any);
+        });
+        return [edgeLayer, decoratorLayers];
+      });
+  }
+
+  onClick(info, event): boolean {
+    return (this.state.interactionManager as any).onClick(info, event) || false;
+  }
+
+  onHover(info, event): boolean {
+    return (this.state.interactionManager as any).onHover(info, event) || false;
+  }
+
+  onDragStart(info, event) {
+    (this.state.interactionManager as any).onDragStart(info, event);
+  }
+
+  onDrag(info, event) {
+    (this.state.interactionManager as any).onDrag(info, event);
+  }
+
+  onDragEnd(info, event) {
+    (this.state.interactionManager as any).onDragEnd(info, event);
+  }
+
+  renderLayers() {
+    return [this.createEdgeLayers(), this.createNodeLayers()];
+  }
+}
+
+GraphLayer.layerName = 'GraphLayer';
+(GraphLayer as any).defaultProps = defaultProps;

package/src/layers/node-layers/circle-layer.ts

@@ -0,0 +1,29 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {CompositeLayer} from '@deck.gl/core';
+import {ScatterplotLayer} from '@deck.gl/layers';
+
+export class CircleLayer extends CompositeLayer {
+  static layerName = 'CircleLayer';
+
+  renderLayers() {
+    const {data, getPosition, stylesheet, positionUpdateTrigger = 0} = this.props as any;
+
+    return [
+      new ScatterplotLayer(
+        this.getSubLayerProps({
+          id: '__scatterplot-layer',
+          data,
+          getPosition,
+          ...stylesheet.getDeckGLAccessors(),
+          updateTriggers: {
+            getPosition: positionUpdateTrigger,
+            ...stylesheet.getDeckGLUpdateTriggers()
+          }
+        })
+      )
+    ];
+  }
+}