@deck.gl-community/graph-layers 9.0.0

package/src/layers/node-layers/image-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 {IconLayer} from '@deck.gl/layers';
+
+export class ImageLayer extends CompositeLayer {
+  static layerName = 'ImageLayer';
+
+  renderLayers() {
+    const {data, getPosition, stylesheet, positionUpdateTrigger = 0} = this.props as any;
+
+    return [
+      new IconLayer(
+        this.getSubLayerProps({
+          id: '__icon-layer',
+          data,
+          getPosition,
+          ...stylesheet.getDeckGLAccessors(),
+          updateTriggers: {
+            getPosition: positionUpdateTrigger,
+            ...stylesheet.getDeckGLUpdateTriggers()
+          }
+        })
+      )
+    ];
+  }
+}

package/src/layers/node-layers/label-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 {ZoomableTextLayer} from '../common-layers/zoomable-text-layer/zoomable-text-layer';
+
+export class LabelLayer extends CompositeLayer {
+  static layerName = 'LabelLayer';
+
+  renderLayers() {
+    const {data, getPosition, stylesheet, positionUpdateTrigger = 0} = this.props as any;
+
+    return [
+      new ZoomableTextLayer(
+        this.getSubLayerProps({
+          id: '__text-layer',
+          data,
+          getPosition,
+          ...stylesheet.getDeckGLAccessors(),
+          updateTriggers: {
+            ...stylesheet.getDeckGLUpdateTriggers(),
+            getPosition: positionUpdateTrigger
+          }
+        })
+      )
+    ];
+  }
+}

package/src/layers/node-layers/path-rounded-rectange-layer.ts

@@ -0,0 +1,56 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {CompositeLayer} from '@deck.gl/core';
+import {PolygonLayer} from '@deck.gl/layers';
+import {generateRoundedCorners} from '../../utils/polygon-calculations';
+
+const generateRoundedRectangle = (node, {getWidth, getHeight, getPosition, getCornerRadius}) => {
+  const pos = getPosition(node);
+  const width = typeof getWidth === 'function' ? getWidth(node) : getWidth;
+  const height = typeof getWidth === 'function' ? getHeight(node) : getHeight;
+  const cornerRadius =
+    typeof getCornerRadius === 'function' ? getCornerRadius(node) : getCornerRadius;
+  const factor = 20;
+  return generateRoundedCorners(pos, width, height, cornerRadius, factor);
+};
+
+export class PathBasedRoundedRectangleLayer extends CompositeLayer {
+  static layerName = 'PathBasedRoundedRectangleLayer';
+
+  renderLayers() {
+    const {data, getPosition, stylesheet, positionUpdateTrigger = 0} = this.props as any;
+
+    const getFillColor = stylesheet.getDeckGLAccessor('getFillColor');
+    const getLineWidth = stylesheet.getDeckGLAccessor('getLineWidth');
+
+    return [
+      new PolygonLayer(
+        this.getSubLayerProps({
+          id: '__polygon-layer',
+          data,
+          getPolygon: (node) =>
+            generateRoundedRectangle(node, {
+              getPosition,
+              getWidth: stylesheet.getDeckGLAccessor('getWidth'),
+              getHeight: stylesheet.getDeckGLAccessor('getHeight'),
+              getCornerRadius: stylesheet.getDeckGLAccessor('getCornerRadius')
+            }),
+          filled: Boolean(getFillColor),
+          stroked: Boolean(getLineWidth),
+          ...stylesheet.getDeckGLAccessors(),
+          updateTriggers: {
+            getPolygon: [
+              positionUpdateTrigger,
+              stylesheet.getDeckGLAccessorUpdateTrigger('getWidth'),
+              stylesheet.getDeckGLAccessorUpdateTrigger('getHeight'),
+              stylesheet.getDeckGLAccessorUpdateTrigger('getCornerRadius')
+            ],
+            ...stylesheet.getDeckGLUpdateTriggers()
+          }
+        })
+      )
+    ];
+  }
+}

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

@@ -0,0 +1,58 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {CompositeLayer} from '@deck.gl/core';
+import {PolygonLayer} from '@deck.gl/layers';
+
+const generateRectangle = (node, {getWidth, getHeight, getPosition}) => {
+  const pos = getPosition(node);
+  const width = typeof getWidth === 'function' ? getWidth(node._data.label.length * 12) : getWidth;
+  const height = typeof getWidth === 'function' ? getHeight(node) : getHeight;
+  const halfWidth = width / 2;
+  const halfHeight = height / 2;
+  return [
+    [pos[0] - halfWidth, pos[1] - halfHeight],
+    [pos[0] - halfWidth, pos[1] + halfHeight],
+    [pos[0] + halfWidth, pos[1] + halfHeight],
+    [pos[0] + halfWidth, pos[1] - halfHeight]
+  ];
+};
+
+export class RectangleLayer extends CompositeLayer {
+  static layerName = 'RectangleLayer';
+
+  renderLayers() {
+    const {data, getPosition, stylesheet, positionUpdateTrigger = 0} = this.props as any;
+
+    const getFillColor = stylesheet.getDeckGLAccessor('getFillColor');
+    const getLineWidth = stylesheet.getDeckGLAccessor('getLineWidth');
+
+    return [
+      new PolygonLayer(
+        this.getSubLayerProps({
+          id: '__polygon-layer',
+          data,
+          getPolygon: (node) =>
+            generateRectangle(node, {
+              getPosition,
+              getWidth: stylesheet.getDeckGLAccessor('getWidth'),
+              getHeight: stylesheet.getDeckGLAccessor('getHeight')
+            }),
+          filled: Boolean(getFillColor),
+          jointRounded: true,
+          stroked: Boolean(getLineWidth),
+          ...stylesheet.getDeckGLAccessors(),
+          updateTriggers: {
+            getPolygon: [
+              positionUpdateTrigger,
+              stylesheet.getDeckGLAccessorUpdateTrigger('getWidth'),
+              stylesheet.getDeckGLAccessorUpdateTrigger('getHeight')
+            ],
+            ...stylesheet.getDeckGLUpdateTriggers()
+          }
+        })
+      )
+    ];
+  }
+}

package/src/layers/node-layers/rounded-rectangle-layer-fragment.ts

@@ -0,0 +1,31 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export const fs = /* glsl */ `\
+#define SHADER_NAME rounded-rectangle-layer-fragment-shader
+
+precision highp float;
+
+uniform float cornerRadius;
+
+varying vec4 vFillColor;
+varying vec2 unitPosition;
+
+void main(void) {
+
+  float distToCenter = length(unitPosition);
+
+  /* Calculate the cutoff radius for the rounded corners */
+  float threshold = sqrt(2.0) * (1.0 - cornerRadius) + 1.0 * cornerRadius;
+  if (distToCenter <= threshold) {
+    gl_FragColor = vFillColor;
+  } else {
+    discard;
+  }
+
+  gl_FragColor = picking_filterHighlightColor(gl_FragColor);
+
+  gl_FragColor = picking_filterPickingColor(gl_FragColor);
+}
+`;

package/src/layers/node-layers/rounded-rectangle-layer.ts

@@ -0,0 +1,32 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+// import {ScatterplotLayer} from '@deck.gl/layers';
+import {fs} from './rounded-rectangle-layer-fragment';
+import {RectangleLayer} from './rectangle-layer';
+
+export class RoundedRectangleLayer extends RectangleLayer {
+  static layerName = 'RoundedRectangleLayer';
+  draw({uniforms}) {
+    super.draw({
+      uniforms: {
+        ...uniforms,
+        cornerRadius: (this.props as any).cornerRadius
+      }
+    });
+  }
+
+  getShaders() {
+    // use object.assign to make sure we don't overwrite existing fields like `vs`, `modules`...
+    return Object.assign({}, super.getShaders(undefined!), {
+      fs
+    });
+  }
+}
+
+RoundedRectangleLayer.defaultProps = {
+  // cornerRadius: the amount of rounding at the rectangle corners
+  // 0 - rectangle. 1 - circle.
+  cornerRadius: 0.1
+};

package/src/layers/node-layers/zoomable-marker-layer.ts

@@ -0,0 +1,49 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {CompositeLayer} from '@deck.gl/core';
+import {MarkerLayer} from '../common-layers/marker-layer/marker-layer';
+
+export class ZoomableMarkerLayer extends CompositeLayer {
+  static layerName = 'ZoomableMarkerLayer';
+
+  shouldUpdateState({props, changeFlags}) {
+    const {stylesheet} = this.props as any;
+    const scaleWithZoom = stylesheet.getDeckGLAccessor('scaleWithZoom');
+    if (!scaleWithZoom) {
+      return changeFlags.somethingChanged;
+    }
+    return changeFlags.somethingChanged || changeFlags.viewportChanged;
+  }
+
+  renderLayers() {
+    const {data, getPosition, stylesheet, positionUpdateTrigger = 0} = this.props as any;
+
+    const getSize = stylesheet.getDeckGLAccessor('getSize');
+    const scaleWithZoom = stylesheet.getDeckGLAccessor('scaleWithZoom');
+    const sizeUpdateTrigger = scaleWithZoom ? [getSize, this.context.viewport.zoom] : false;
+    const oiginalGetMarker = stylesheet.getDeckGLAccessor('getMarker');
+    // getMarker only expects function not plain value (string)
+    const getMarker =
+      typeof oiginalGetMarker === 'function' ? oiginalGetMarker : () => oiginalGetMarker;
+
+    return [
+      new MarkerLayer(
+        this.getSubLayerProps({
+          id: 'zoomable-marker-layer',
+          data,
+          getPosition,
+          sizeScale: scaleWithZoom ? Math.max(0, this.context.viewport.zoom) : 1,
+          ...stylesheet.getDeckGLAccessors(),
+          getMarker,
+          updateTriggers: {
+            ...stylesheet.getDeckGLUpdateTriggers(),
+            getPosition: positionUpdateTrigger,
+            getSize: sizeUpdateTrigger
+          }
+        })
+      )
+    ];
+  }
+}

package/src/layouts/d3-force/d3-force-layout.ts

@@ -0,0 +1,145 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {BaseLayout} from '../../core/base-layout';
+
+import {EDGE_TYPE} from '../../core/constants';
+
+const defaultOptions = {
+  alpha: 0.3,
+  resumeAlpha: 0.1,
+  nBodyStrength: -900,
+  nBodyDistanceMin: 100,
+  nBodyDistanceMax: 400,
+  getCollisionRadius: 0
+};
+
+export class D3ForceLayout extends BaseLayout {
+  protected readonly _name = 'D3';
+  private _positionsByNodeId = new Map();
+  private _graph: any;
+  private _worker: any;
+  constructor(options) {
+    super(options);
+
+    this._options = {
+      ...defaultOptions,
+      ...options
+    };
+  }
+
+  initializeGraph(graph) {
+    this._graph = graph;
+  }
+
+  // for streaming new data on the same graph
+  updateGraph(graph) {
+    this._graph = graph;
+
+    this._positionsByNodeId = new Map(
+      this._graph.getNodes().map((node) => [node.id, this._positionsByNodeId.get(node.id)])
+    );
+  }
+
+  start() {
+    this._engageWorker();
+
+    this._onLayoutStart();
+  }
+
+  update() {
+    this._engageWorker();
+  }
+
+  _engageWorker() {
+    // prevent multiple start
+    if (this._worker) {
+      this._worker.terminate();
+    }
+
+    this._worker = new Worker(new URL('./worker.js', import.meta.url).href);
+
+    this._worker.postMessage({
+      nodes: this._graph.getNodes().map((node) => ({
+        id: node.id,
+        ...this._positionsByNodeId.get(node.id)
+      })),
+      edges: this._graph.getEdges().map((edge) => ({
+        id: edge.id,
+        source: edge.getSourceNodeId(),
+        target: edge.getTargetNodeId()
+      })),
+      options: this._options
+    });
+
+    this._worker.onmessage = (event) => {
+      if (event.data.type !== 'end') {
+        return;
+      }
+
+      event.data.nodes.forEach(({id, ...d3}) =>
+        this._positionsByNodeId.set(id, {
+          ...d3,
+          // precompute so that when we return the node position we do not need to do the conversion
+          coordinates: [d3.x, d3.y]
+        })
+      );
+
+      this._onLayoutChange();
+      this._onLayoutDone();
+    };
+  }
+
+  resume() {
+    throw new Error('Resume unavailable');
+  }
+
+  stop() {
+    this._worker.terminate();
+  }
+
+  getEdgePosition = (edge) => {
+    const sourceNode = this._graph.findNode(edge.getSourceNodeId());
+    const targetNode = this._graph.findNode(edge.getTargetNodeId());
+    if (!this.getNodePosition(sourceNode) || !this.getNodePosition(targetNode)) {
+      return null;
+    }
+
+    return {
+      type: EDGE_TYPE.LINE,
+      sourcePosition: this.getNodePosition(sourceNode),
+      targetPosition: this.getNodePosition(targetNode),
+      controlPoints: []
+    };
+  };
+
+  getNodePosition = (node) => {
+    const d3Node = this._positionsByNodeId.get(node.id);
+    if (d3Node) {
+      return d3Node.coordinates;
+    }
+
+    return null;
+  };
+
+  lockNodePosition = (node, x, y) => {
+    const d3Node = this._positionsByNodeId.get(node.id);
+    this._positionsByNodeId.set(node.id, {
+      ...d3Node,
+      x,
+      y,
+      fx: x,
+      fy: y,
+      coordinates: [x, y]
+    });
+    this._onLayoutChange();
+    this._onLayoutDone();
+  };
+
+  unlockNodePosition = (node) => {
+    const d3Node = this._positionsByNodeId.get(node.id);
+    d3Node.fx = null;
+    d3Node.fy = null;
+  };
+}

package/src/layouts/d3-force/worker.ts

@@ -0,0 +1,61 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+/* global importScripts, d3 */
+
+importScripts('https://d3js.org/d3-collection.v1.min.js');
+importScripts('https://d3js.org/d3-dispatch.v1.min.js');
+importScripts('https://d3js.org/d3-quadtree.v1.min.js');
+importScripts('https://d3js.org/d3-timer.v1.min.js');
+importScripts('https://d3js.org/d3-force.v1.min.js');
+
+onmessage = function (event) {
+  const {nodes, edges} = event.data;
+
+  const {nBodyStrength, nBodyDistanceMin, nBodyDistanceMax, getCollisionRadius} =
+    event.data.options;
+  // @ts-expect-error TODO
+  const simulation = d3
+    .forceSimulation(nodes)
+    .force(
+      'edge',
+      // @ts-expect-error TODO
+      d3.forceLink(edges).id((n) => n.id)
+    )
+    .force(
+      'charge',
+      // @ts-expect-error TODO
+      d3
+        .forceManyBody()
+        .strength(nBodyStrength)
+        .distanceMin(nBodyDistanceMin)
+        .distanceMax(nBodyDistanceMax)
+    )
+    // @ts-expect-error TODO
+    .force('center', d3.forceCenter())
+    // @ts-expect-error TODO
+    .force('collision', d3.forceCollide().radius(getCollisionRadius))
+    .stop();
+  for (
+    let i = 0,
+      n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay()));
+    i < n;
+    ++i
+  ) {
+    postMessage({
+      type: 'tick',
+      progress: i / n,
+      options: event.data.options
+    });
+    simulation.tick();
+  }
+  postMessage({
+    type: 'end',
+    nodes,
+    edges,
+    options: event.data.options
+  });
+
+  this.self.close();
+};