@deck.gl-community/graph-layers 9.0.0

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

@@ -0,0 +1,116 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+/* global importScripts GPU*/
+importScripts('https://cdn.jsdelivr.net/npm/gpu.js@latest/dist/gpu-browser.js');
+onmessage = function (event) {
+    const { nodes: sourceNodes, edges: sourceEdges } = event.data;
+    const { nBodyStrength, nBodyDistanceMin, nBodyDistanceMax, getCollisionRadius } = event.data.options;
+    // FIXME remove cpu mode
+    // @ts-expect-error TODO
+    const gpu = new GPU.GPU({
+        mode: 'cpu'
+    });
+    function getDistance(node1, node2) {
+        const dx = node1[1] - node2[1];
+        const dy = node1[2] - node2[2];
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+    function isCollision(node1, node2, radius) {
+        return getDistance(node1, node2) < radius;
+    }
+    function forceCollide(nodes, currentNode, nodesSize, radius) {
+        let collisons = true;
+        while (collisons) {
+            collisons = false;
+            for (let i = 0; i < nodesSize; i++) {
+                while (nodes[i][0] !== currentNode[0] && isCollision(currentNode, nodes[i], radius)) {
+                    collisons = true;
+                    const xMove = currentNode[1] + Math.random() - 0.5;
+                    currentNode[1] = currentNode[1] + xMove;
+                    const yMove = currentNode[2] + Math.random() - 0.5;
+                    currentNode[2] = currentNode[2] + yMove;
+                }
+            }
+        }
+        return [currentNode[1], currentNode[2]];
+    }
+    // FIXME correct lint errors
+    // eslint-disable-next-line max-params
+    function forceLink(nodes, edges, currentNode, nodesSize, edgesSize, radius) {
+        let x1 = currentNode[1];
+        let y1 = currentNode[2];
+        for (let i = 0; i < edgesSize; i++) {
+            const edge = edges[i];
+            if (edge[0] === currentNode[0] || edge[1] === currentNode[0]) {
+                const otherNodeId = edge[0] === currentNode[0] ? edge[1] : edge[0];
+                // FIXME: deal with the fact that GPUjs doesn't like array.find or undefined
+                for (let j = 0; j < nodesSize; j++) {
+                    // eslint-disable-next-line max-depth
+                    if (nodes[i][0] === otherNodeId) {
+                        const otherNode = nodes[j];
+                        const x2 = otherNode[1];
+                        const y2 = otherNode[2];
+                        const dx = x1 - x2;
+                        const dy = y1 - y2;
+                        const distance = Math.sqrt(dx * dx + dy * dy);
+                        const force = 1;
+                        // eslint-disable-next-line max-depth
+                        if (distance > radius + force) {
+                            x1 = dx > 0 ? x1 - force / 2 : x1 + force / 2;
+                            y1 = dy > 0 ? y1 - force / 2 : y1 + force / 2;
+                        }
+                    }
+                }
+            }
+        }
+        return [x1, y1];
+    }
+    gpu.addFunction(forceCollide);
+    gpu.addFunction(forceLink);
+    gpu.addFunction(isCollision);
+    gpu.addFunction(getDistance);
+    const kernel = gpu.createKernel(function (kernelNodes, kernelEdges) {
+        const currentNode = kernelNodes[this.thread.x];
+        forceCollide(kernelNodes, currentNode, this.constants.nodesSize, this.constants.collisionRadius);
+        const forceLinkResult = forceLink(kernelNodes, kernelEdges, currentNode, this.constants.nodesSize, this.constants.edgesSize, this.constants.collisionRadius);
+        currentNode[1] = forceLinkResult[0];
+        currentNode[2] = forceLinkResult[1];
+        return [currentNode[1], currentNode[2]];
+    }, {
+        constants: {
+            nodesSize: sourceNodes.length,
+            edgesSize: sourceEdges.length,
+            collisionRadius: getCollisionRadius,
+            nBodyStrength,
+            nBodyDistanceMin,
+            nBodyDistanceMax
+        },
+        output: [sourceNodes.length]
+    });
+    const tempNodes = sourceNodes.map((node) => [node.id, node.x, node.y, node.locked ? 1 : 0]);
+    const tempEdges = sourceEdges.map((edge) => [edge.source.id, edge.target.id]);
+    kernel(tempNodes, tempEdges);
+    const newNodes = sourceNodes.map((node, index) => {
+        const updatedNode = tempNodes.find((n) => n[0] === node.id);
+        return {
+            ...node,
+            x: updatedNode[1],
+            y: updatedNode[2]
+        };
+    });
+    const newEdges = sourceEdges.map((edge) => {
+        return {
+            ...edge,
+            source: newNodes.find((node) => node.id === edge.source.id),
+            target: newNodes.find((node) => node.id === edge.target.id)
+        };
+    });
+    postMessage({
+        type: 'end',
+        nodes: newNodes,
+        edges: newEdges
+    });
+    // FIXME cleanup per gpu documentation
+    this.self.close();
+};

package/dist/layouts/simple-layout/simple-layout.d.ts

@@ -0,0 +1,22 @@
+import { BaseLayout } from '../../core/base-layout';
+import { Node } from '../../core/node';
+import { Graph } from '../../core/graph';
+type AccessorVec2 = (node: Node) => [number, number];
+export declare class SimpleLayout extends BaseLayout {
+    protected readonly _name = "SimpleLayout";
+    protected _graph: Graph | null;
+    protected _nodeMap: Record<string, Node>;
+    protected _nodePositionMap: Record<string, AccessorVec2>;
+    constructor(options?: {});
+    initializeGraph(graph: Graph): void;
+    _notifyLayoutComplete(): void;
+    start(): void;
+    update(): void;
+    resume(): void;
+    updateGraph(graph: Graph): void;
+    setNodePositionAccessor: (accessor: any) => void;
+    getNodePosition: (node: any) => any;
+    getEdgePosition: (edge: any) => any;
+    lockNodePosition: (node: any, x: any, y: any) => void;
+}
+export {};

package/dist/layouts/simple-layout/simple-layout.js

@@ -0,0 +1,64 @@
+// 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 = {
+    nodePositionAccessor: (node) => [node.getPropertyValue('x'), node.getPropertyValue('y')]
+};
+export class SimpleLayout extends BaseLayout {
+    _name = 'SimpleLayout';
+    _graph = null;
+    _nodeMap = {};
+    _nodePositionMap = {};
+    constructor(options = {}) {
+        super({ ...defaultOptions, ...options });
+    }
+    initializeGraph(graph) {
+        this.updateGraph(graph);
+    }
+    _notifyLayoutComplete() {
+        this._onLayoutStart();
+        this._onLayoutChange();
+        this._onLayoutDone();
+    }
+    start() {
+        this._notifyLayoutComplete();
+    }
+    update() {
+        this._notifyLayoutComplete();
+    }
+    resume() {
+        this._notifyLayoutComplete();
+    }
+    updateGraph(graph) {
+        this._graph = graph;
+        this._nodeMap = graph.getNodes().reduce((res, node) => {
+            res[node.getId()] = node;
+            return res;
+        }, {});
+        this._nodePositionMap = graph.getNodes().reduce((res, node) => {
+            res[node.getId()] = this._options.nodePositionAccessor(node);
+            return res;
+        }, {});
+    }
+    setNodePositionAccessor = (accessor) => {
+        this._options.nodePositionAccessor = accessor;
+    };
+    getNodePosition = (node) => this._nodePositionMap[node.getId()];
+    getEdgePosition = (edge) => {
+        const sourcePos = this._nodePositionMap[edge.getSourceNodeId()];
+        const targetPos = this._nodePositionMap[edge.getTargetNodeId()];
+        return {
+            type: EDGE_TYPE.LINE,
+            sourcePosition: sourcePos,
+            targetPosition: targetPos,
+            controlPoints: []
+        };
+    };
+    lockNodePosition = (node, x, y) => {
+        this._nodePositionMap[node.getId()] = [x, y];
+        this._onLayoutChange();
+        this._onLayoutDone();
+    };
+}

package/dist/loaders/edge-parsers.d.ts

@@ -0,0 +1,6 @@
+export declare function basicEdgeParser(edge: any): {
+    id: any;
+    directed: any;
+    sourceId: any;
+    targetId: any;
+};

package/dist/loaders/edge-parsers.js

@@ -0,0 +1,17 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { log } from '../utils/log';
+export function basicEdgeParser(edge) {
+    const { id, directed, sourceId, targetId } = edge;
+    if (sourceId === undefined || targetId === undefined) {
+        log.error('Invalid edge: sourceId or targetId is missing.')();
+        return null;
+    }
+    return {
+        id,
+        directed: directed || false,
+        sourceId,
+        targetId
+    };
+}

package/dist/loaders/json-loader.d.ts

@@ -0,0 +1,7 @@
+import { basicNodeParser } from './node-parsers';
+import { basicEdgeParser } from './edge-parsers';
+export declare const JSONLoader: ({ json, nodeParser, edgeParser }: {
+    json: any;
+    nodeParser?: typeof basicNodeParser;
+    edgeParser?: typeof basicEdgeParser;
+}) => import("..").Graph;

package/dist/loaders/json-loader.js

@@ -0,0 +1,16 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { createGraph } from '../utils/create-graph';
+import { basicNodeParser } from './node-parsers';
+import { basicEdgeParser } from './edge-parsers';
+import { log } from '../utils/log';
+export const JSONLoader = ({ json, nodeParser = basicNodeParser, edgeParser = basicEdgeParser }) => {
+    const { name = 'default', nodes, edges } = json;
+    if (!nodes) {
+        log.error('Invalid graph: nodes is missing.')();
+        return null;
+    }
+    const graph = createGraph({ name, nodes, edges, nodeParser, edgeParser });
+    return graph;
+};

package/dist/loaders/node-parsers.d.ts

@@ -0,0 +1,3 @@
+export declare function basicNodeParser(node: any): {
+    id: any;
+};

package/dist/loaders/node-parsers.js

@@ -0,0 +1,11 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { log } from '../utils/log';
+export function basicNodeParser(node) {
+    if (node.id === undefined) {
+        log.error('Invalid node: id is missing.')();
+        return null;
+    }
+    return { id: node.id };
+}

package/dist/style/style-property.d.ts

@@ -0,0 +1,14 @@
+export declare class StyleProperty {
+    key: any;
+    _updateTrigger: boolean;
+    _value: any;
+    _valueType: any;
+    static getDefault(key: any): any;
+    constructor({ key, value, updateTrigger }: {
+        key: any;
+        value: any;
+        updateTrigger: any;
+    });
+    getValue(): any;
+    getUpdateTrigger(): boolean;
+}

package/dist/style/style-property.js

@@ -0,0 +1,195 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import Color from 'color';
+import { log } from '../utils/log';
+/* Utils for type check */
+function getColor(value) {
+    if (typeof value === 'string') {
+        try {
+            const color = Color.rgb(value).array();
+            if (Number.isFinite(color[3])) {
+                color[3] *= 255;
+            }
+            return color;
+        }
+        catch (error) {
+            return [0, 0, 0];
+        }
+    }
+    if (Array.isArray(value) && Number.isFinite(value[0])) {
+        return value;
+    }
+    return [0, 0, 0];
+}
+function getNumber(value) {
+    switch (typeof value) {
+        case 'string':
+            value = Number(value);
+            return isNaN(value) ? null : value;
+        case 'number':
+            return value;
+        default:
+            return null;
+    }
+}
+function getBool(value) {
+    switch (typeof value) {
+        case 'boolean':
+            return value;
+        case 'string':
+            return value.toLowerCase() !== 'false';
+        case 'number':
+            return Boolean(value);
+        default:
+            return null;
+    }
+}
+function getOffset(value) {
+    if (typeof value === 'function') {
+        return value;
+    }
+    if (!Array.isArray(value) || value.length !== 2) {
+        return null;
+    }
+    return value.map(getNumber);
+}
+const IDENTITY = (x) => x;
+const PROPERTY_FORMATTERS = {
+    opacity: getNumber,
+    zIndex: getNumber,
+    width: getNumber,
+    height: getNumber,
+    radius: getNumber,
+    fill: getColor,
+    stroke: getColor,
+    strokeWidth: getNumber,
+    // for marker
+    marker: String,
+    size: getNumber,
+    // text
+    color: getColor,
+    text: String,
+    fontSize: getNumber,
+    textAnchor: String,
+    alignmentBaseline: String,
+    angle: getNumber,
+    textMaxWidth: getNumber,
+    textWordBreak: String,
+    textSizeMinPixels: getNumber,
+    // edges
+    speed: getNumber,
+    tailLength: getNumber,
+    offset: getOffset,
+    scaleWithZoom: getBool
+};
+const DEFAULT_STYLES = {
+    opacity: 1,
+    zIndex: 0,
+    width: 0,
+    height: 0,
+    radius: 1,
+    fill: [0, 0, 0],
+    stroke: [0, 0, 0],
+    strokeWidth: 0,
+    marker: 'circle',
+    size: 12,
+    color: [0, 0, 0],
+    text: '',
+    fontSize: 12,
+    textAnchor: 'middle',
+    alignmentBaseline: 'center',
+    angle: 0,
+    textMaxWidth: -1,
+    textWordBreak: 'break-all',
+    textSizeMinPixels: 9,
+    speed: 0,
+    tailLength: 1,
+    offset: null,
+    scaleWithZoom: true
+};
+// code generation: generate a function as a layer accessor
+function generateAccessor(key, value) {
+    const formatter = PROPERTY_FORMATTERS[key] || IDENTITY;
+    // ex: key = 'fill', value = {defaut: 'red', hover: 'blue'}
+    // valueMap => {defaut: [255, 0, 0], hover: [0, 0, 255]}
+    const valueMap = Object.keys(value).reduce((res, key0) => {
+        res[key0] = value[key0];
+        return res;
+    }, {});
+    return (node) => {
+        const statefulValue = valueMap[node.state];
+        if (!node.state || typeof statefulValue === 'undefined') {
+            return valueMap.default || DEFAULT_STYLES[key];
+        }
+        // else has stateful value
+        // check if the value is a function
+        if (typeof statefulValue === 'function') {
+            return formatter(statefulValue(node));
+        }
+        // or just a plain value
+        return formatter(statefulValue);
+    };
+}
+const VALUE_TYPE = {
+    ACCESSOR: 'ACCESSOR',
+    PLAIN_VALUE: 'PLAIN_VALUE'
+};
+export class StyleProperty {
+    key;
+    _updateTrigger;
+    _value;
+    _valueType;
+    // for getting default style
+    static getDefault(key) {
+        return DEFAULT_STYLES[key];
+    }
+    // pass the key and value of the property
+    // and format the value properly.
+    constructor({ key, value, updateTrigger }) {
+        this.key = key;
+        this._updateTrigger = false;
+        // statefule property, ex:
+        // fill: {default: 'red', hover: 'blue'}
+        // note that offset: [0, 1], the type of array is object, too.
+        if (typeof value === 'object' && !Array.isArray(value)) {
+            // generate accessor function
+            this._value = generateAccessor(key, value);
+            this._valueType = VALUE_TYPE.ACCESSOR;
+            this._updateTrigger = updateTrigger;
+        }
+        // default state property, but value = accessor
+        // fill: () => 'red'
+        else if (typeof value === 'function') {
+            const formatter = PROPERTY_FORMATTERS[key] || IDENTITY;
+            // the output of the function should be formated by
+            // the corresponding formatter again.
+            // Ex: colorAccessor might return '#f00', which needs to
+            // be formated as [255, 0, 0];
+            this._value = (d) => formatter(value(d));
+            this._valueType = VALUE_TYPE.ACCESSOR;
+            this._updateTrigger = value;
+        }
+        // default state property with plain value:
+        // fill: 'red'
+        else {
+            // format the value properly
+            const formatter = PROPERTY_FORMATTERS[key] || IDENTITY;
+            this._value = formatter(value);
+            this._valueType = VALUE_TYPE.PLAIN_VALUE;
+            this._updateTrigger = false;
+        }
+        // sanity check
+        if (this._value === null) {
+            log.warn(`Invalid ${key} value: ${value}`)();
+            throw new Error(`Invalid ${key} value: ${value}`);
+        }
+    }
+    // get the formatted value
+    getValue() {
+        return this._value;
+    }
+    getUpdateTrigger() {
+        return this._updateTrigger;
+    }
+}

package/dist/style/style-sheet.d.ts

@@ -0,0 +1,10 @@
+export declare class Stylesheet {
+    type: any;
+    properties: any;
+    constructor(style: any, updateTriggers: any);
+    _getProperty(deckglAccessor: any): any;
+    getDeckGLAccessor(deckglAccessor: any): any;
+    getDeckGLAccessorUpdateTrigger(deckglAccessor: any): any;
+    getDeckGLAccessors(): {};
+    getDeckGLUpdateTriggers(): {};
+}