@deck.gl-community/graph-layers 9.0.0

package/dist/layers/node-layers/rounded-rectangle-layer-fragment.d.ts

@@ -0,0 +1 @@
+export declare const fs = "#define SHADER_NAME rounded-rectangle-layer-fragment-shader\n\nprecision highp float;\n\nuniform float cornerRadius;\n\nvarying vec4 vFillColor;\nvarying vec2 unitPosition;\n\nvoid main(void) {\n\n  float distToCenter = length(unitPosition);\n\n  /* Calculate the cutoff radius for the rounded corners */\n  float threshold = sqrt(2.0) * (1.0 - cornerRadius) + 1.0 * cornerRadius;\n  if (distToCenter <= threshold) {\n    gl_FragColor = vFillColor;\n  } else {\n    discard;\n  }\n\n  gl_FragColor = picking_filterHighlightColor(gl_FragColor);\n\n  gl_FragColor = picking_filterPickingColor(gl_FragColor);\n}\n";

package/dist/layers/node-layers/rounded-rectangle-layer-fragment.js

@@ -0,0 +1,30 @@
+// 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/dist/layers/node-layers/rounded-rectangle-layer.d.ts

@@ -0,0 +1,8 @@
+import { RectangleLayer } from './rectangle-layer';
+export declare class RoundedRectangleLayer extends RectangleLayer {
+    static layerName: string;
+    draw({ uniforms }: {
+        uniforms: any;
+    }): void;
+    getShaders(): any;
+}

package/dist/layers/node-layers/rounded-rectangle-layer.js

@@ -0,0 +1,28 @@
+// 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.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/dist/layers/node-layers/zoomable-marker-layer.d.ts

@@ -0,0 +1,10 @@
+import { CompositeLayer } from '@deck.gl/core';
+import { MarkerLayer } from '../common-layers/marker-layer/marker-layer';
+export declare class ZoomableMarkerLayer extends CompositeLayer {
+    static layerName: string;
+    shouldUpdateState({ props, changeFlags }: {
+        props: any;
+        changeFlags: any;
+    }): any;
+    renderLayers(): MarkerLayer[];
+}

package/dist/layers/node-layers/zoomable-marker-layer.js

@@ -0,0 +1,40 @@
+// 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;
+        const scaleWithZoom = stylesheet.getDeckGLAccessor('scaleWithZoom');
+        if (!scaleWithZoom) {
+            return changeFlags.somethingChanged;
+        }
+        return changeFlags.somethingChanged || changeFlags.viewportChanged;
+    }
+    renderLayers() {
+        const { data, getPosition, stylesheet, positionUpdateTrigger = 0 } = this.props;
+        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/dist/layouts/d3-force/d3-force-layout.d.ts

@@ -0,0 +1,24 @@
+import { BaseLayout } from '../../core/base-layout';
+export declare class D3ForceLayout extends BaseLayout {
+    protected readonly _name = "D3";
+    private _positionsByNodeId;
+    private _graph;
+    private _worker;
+    constructor(options: any);
+    initializeGraph(graph: any): void;
+    updateGraph(graph: any): void;
+    start(): void;
+    update(): void;
+    _engageWorker(): void;
+    resume(): void;
+    stop(): void;
+    getEdgePosition: (edge: any) => {
+        type: string;
+        sourcePosition: any;
+        targetPosition: any;
+        controlPoints: any[];
+    };
+    getNodePosition: (node: any) => any;
+    lockNodePosition: (node: any, x: any, y: any) => void;
+    unlockNodePosition: (node: any) => void;
+}

package/dist/layouts/d3-force/d3-force-layout.js

@@ -0,0 +1,116 @@
+// 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 {
+    _name = 'D3';
+    _positionsByNodeId = new Map();
+    _graph;
+    _worker;
+    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/dist/layouts/d3-force/worker.js

@@ -0,0 +1,46 @@
+// 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();
+};

package/dist/layouts/gpu-force/gpu-force-layout.d.ts

@@ -0,0 +1,30 @@
+import { BaseLayout } from '../../core/base-layout';
+export declare class GPUForceLayout extends BaseLayout {
+    protected readonly _name: string;
+    private _d3Graph;
+    private _nodeMap;
+    private _edgeMap;
+    private _graph;
+    private _worker;
+    private _callbacks;
+    constructor(options: any);
+    initializeGraph(graph: any): void;
+    start(): void;
+    update(): void;
+    _engageWorker(): void;
+    ticked(data: any): void;
+    ended(data: any): void;
+    resume(): void;
+    stop(): void;
+    updateGraph(graph: any): void;
+    updateD3Graph(graph: any): void;
+    getNodePosition: (node: any) => [number, number];
+    getEdgePosition: (edge: any) => {
+        type: string;
+        sourcePosition: any[];
+        targetPosition: any[];
+        controlPoints: any[];
+    };
+    lockNodePosition: (node: any, x: any, y: any) => void;
+    unlockNodePosition: (node: any) => void;
+}

package/dist/layouts/gpu-force/gpu-force-layout.js

@@ -0,0 +1,232 @@
+// 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
+};
+// TODO: this layout should be updated with the organizational and logic improvements made in d3-force
+export class GPUForceLayout extends BaseLayout {
+    _name = 'GPU';
+    _d3Graph;
+    _nodeMap;
+    _edgeMap;
+    _graph;
+    _worker;
+    _callbacks;
+    constructor(options) {
+        super(options);
+        this._name = 'GPU';
+        this._options = {
+            ...defaultOptions,
+            ...options
+        };
+        // store graph and prepare internal data
+        this._d3Graph = { nodes: [], edges: [] };
+        this._nodeMap = {};
+        this._edgeMap = {};
+    }
+    initializeGraph(graph) {
+        this._graph = graph;
+        this._nodeMap = {};
+        this._edgeMap = {};
+        // nodes
+        const d3Nodes = graph.getNodes().map((node) => {
+            const id = node.id;
+            const locked = node.getPropertyValue('locked') || false;
+            const x = node.getPropertyValue('x') || 0;
+            const y = node.getPropertyValue('y') || 0;
+            const collisionRadius = node.getPropertyValue('collisionRadius') || 0;
+            const d3Node = {
+                id,
+                x,
+                y,
+                fx: locked ? x : null,
+                fy: locked ? y : null,
+                collisionRadius,
+                locked
+            };
+            this._nodeMap[node.id] = d3Node;
+            return d3Node;
+        });
+        // edges
+        const d3Edges = graph.getEdges().map((edge) => {
+            const d3Edge = {
+                id: edge.id,
+                source: this._nodeMap[edge.getSourceNodeId()],
+                target: this._nodeMap[edge.getTargetNodeId()]
+            };
+            this._edgeMap[edge.id] = d3Edge;
+            return d3Edge;
+        });
+        this._d3Graph = {
+            nodes: d3Nodes,
+            edges: d3Edges
+        };
+    }
+    start() {
+        this._engageWorker();
+    }
+    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);
+        const { alpha, nBodyStrength, nBodyDistanceMin, nBodyDistanceMax, getCollisionRadius } = this
+            ._options;
+        this._worker.postMessage({
+            nodes: this._d3Graph.nodes,
+            edges: this._d3Graph.edges,
+            options: {
+                alpha,
+                nBodyStrength,
+                nBodyDistanceMin,
+                nBodyDistanceMax,
+                getCollisionRadius
+            }
+        });
+        this._worker.onmessage = (event) => {
+            switch (event.data.type) {
+                case 'tick':
+                    this.ticked(event.data);
+                    break;
+                case 'end':
+                    this.ended(event.data);
+                    break;
+                default:
+                    break;
+            }
+        };
+    }
+    ticked(data) { }
+    ended(data) {
+        const { nodes, edges } = data;
+        this.updateD3Graph({ nodes, edges });
+        this._onLayoutChange();
+        this._onLayoutDone();
+    }
+    resume() {
+        throw new Error('Resume unavailable');
+    }
+    stop() {
+        this._worker.terminate();
+    }
+    // for steaming new data on the same graph
+    updateGraph(graph) {
+        if (this._graph.getGraphName() !== graph.getGraphName()) {
+            // reset the maps
+            this._nodeMap = {};
+            this._edgeMap = {};
+        }
+        this._graph = graph;
+        // update internal layout data
+        // nodes
+        const newNodeMap = {};
+        const newD3Nodes = graph.getNodes().map((node) => {
+            const id = node.id;
+            const locked = node.getPropertyValue('locked') || false;
+            const x = node.getPropertyValue('x') || 0;
+            const y = node.getPropertyValue('y') || 0;
+            const fx = locked ? x : null;
+            const fy = locked ? y : null;
+            const collisionRadius = node.getPropertyValue('collisionRadius') || 0;
+            const oldD3Node = this._nodeMap[node.id];
+            const newD3Node = oldD3Node ? oldD3Node : { id, x, y, fx, fy, collisionRadius };
+            newNodeMap[node.id] = newD3Node;
+            return newD3Node;
+        });
+        this._nodeMap = newNodeMap;
+        this._d3Graph.nodes = newD3Nodes;
+        // edges
+        const newEdgeMap = {};
+        const newD3Edges = graph.getEdges().map((edge) => {
+            const oldD3Edge = this._edgeMap[edge.id];
+            const newD3Edge = oldD3Edge || {
+                id: edge.id,
+                source: newNodeMap[edge.getSourceNodeId()],
+                target: newNodeMap[edge.getTargetNodeId()]
+            };
+            newEdgeMap[edge.id] = newD3Edge;
+            return newD3Edge;
+        });
+        this._edgeMap = newEdgeMap;
+        this._d3Graph.edges = newD3Edges;
+    }
+    updateD3Graph(graph) {
+        const existingNodes = this._graph.getNodes();
+        // update internal layout data
+        // nodes
+        const newNodeMap = {};
+        const newD3Nodes = graph.nodes.map((node) => {
+            // Update existing _graph with the new values
+            const existingNode = existingNodes.find((n) => n.getId() === node.id);
+            existingNode.setDataProperty('locked', node.locked);
+            existingNode.setDataProperty('x', node.x);
+            existingNode.setDataProperty('y', node.y);
+            existingNode.setDataProperty('collisionRadius', node.collisionRadius);
+            newNodeMap[node.id] = node;
+            return node;
+        });
+        this._nodeMap = newNodeMap;
+        this._d3Graph.nodes = newD3Nodes;
+        // edges
+        const newEdgeMap = {};
+        const newD3Edges = graph.edges.map((edge) => {
+            newEdgeMap[edge.id] = edge;
+            return edge;
+        });
+        this._graph.triggerUpdate();
+        this._edgeMap = newEdgeMap;
+        this._d3Graph.edges = newD3Edges;
+    }
+    getNodePosition = (node) => {
+        const d3Node = this._nodeMap[node.id];
+        if (d3Node) {
+            return [d3Node.x, d3Node.y];
+        }
+        return [0, 0];
+    };
+    getEdgePosition = (edge) => {
+        const d3Edge = this._edgeMap[edge.id];
+        const sourcePosition = d3Edge && d3Edge.source;
+        const targetPosition = d3Edge && d3Edge.target;
+        if (d3Edge && sourcePosition && targetPosition) {
+            return {
+                type: EDGE_TYPE.LINE,
+                sourcePosition: [sourcePosition.x, sourcePosition.y],
+                targetPosition: [targetPosition.x, targetPosition.y],
+                controlPoints: []
+            };
+        }
+        return {
+            type: EDGE_TYPE.LINE,
+            sourcePosition: [0, 0],
+            targetPosition: [0, 0],
+            controlPoints: []
+        };
+    };
+    lockNodePosition = (node, x, y) => {
+        const d3Node = this._nodeMap[node.id];
+        d3Node.x = x;
+        d3Node.y = y;
+        d3Node.fx = x;
+        d3Node.fy = y;
+        this._callbacks.onLayoutChange();
+        this._callbacks.onLayoutDone();
+    };
+    unlockNodePosition = (node) => {
+        const d3Node = this._nodeMap[node.id];
+        d3Node.fx = null;
+        d3Node.fy = null;
+    };
+}