@deck.gl-community/graph-layers 9.0.0

package/dist/style/style-sheet.js

@@ -0,0 +1,252 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { StyleProperty } from './style-property';
+import { NODE_TYPE, EDGE_DECORATOR_TYPE } from '../core/constants';
+import { log } from '../utils/log';
+const COMMON_DECKGL_PROPS = {
+    getOffset: 'offset',
+    opacity: 'opacity'
+};
+const DECKGL_ACCESSOR_MAP = {
+    [NODE_TYPE.CIRCLE]: {
+        ...COMMON_DECKGL_PROPS,
+        getFillColor: 'fill',
+        getLineColor: 'stroke',
+        getLineWidth: 'strokeWidth',
+        getRadius: 'radius'
+    },
+    [NODE_TYPE.RECTANGLE]: {
+        ...COMMON_DECKGL_PROPS,
+        getWidth: 'width',
+        getHeight: 'height',
+        getFillColor: 'fill',
+        getLineColor: 'stroke',
+        getLineWidth: 'strokeWidth'
+    },
+    [NODE_TYPE.ROUNDED_RECTANGLE]: {
+        ...COMMON_DECKGL_PROPS,
+        getCornerRadius: 'cornerRadius',
+        getRadius: 'radius',
+        getWidth: 'width',
+        getHeight: 'height',
+        getFillColor: 'fill',
+        getLineColor: 'stroke',
+        getLineWidth: 'strokeWidth'
+    },
+    [NODE_TYPE.PATH_ROUNDED_RECTANGLE]: {
+        ...COMMON_DECKGL_PROPS,
+        getWidth: 'width',
+        getHeight: 'height',
+        getFillColor: 'fill',
+        getLineColor: 'stroke',
+        getLineWidth: 'strokeWidth',
+        getCornerRadius: 'cornerRadius'
+    },
+    [NODE_TYPE.LABEL]: {
+        ...COMMON_DECKGL_PROPS,
+        getColor: 'color',
+        getText: 'text',
+        getSize: 'fontSize',
+        getTextAnchor: 'textAnchor',
+        getAlignmentBaseline: 'alignmentBaseline',
+        getAngle: 'angle',
+        scaleWithZoom: 'scaleWithZoom',
+        textMaxWidth: 'textMaxWidth',
+        textWordBreak: 'textWordBreak',
+        textSizeMinPixels: 'textSizeMinPixels'
+    },
+    [NODE_TYPE.MARKER]: {
+        ...COMMON_DECKGL_PROPS,
+        getColor: 'fill',
+        getSize: 'size',
+        getMarker: 'marker',
+        scaleWithZoom: 'scaleWithZoom'
+    },
+    // --------- Edge related ---------
+    Edge: {
+        getColor: 'stroke',
+        getWidth: 'strokeWidth'
+    },
+    [EDGE_DECORATOR_TYPE.LABEL]: {
+        getColor: 'color',
+        getText: 'text',
+        getSize: 'fontSize',
+        getTextAnchor: 'textAnchor',
+        getAlignmentBaseline: 'alignmentBaseline',
+        scaleWithZoom: 'scaleWithZoom',
+        textMaxWidth: 'textMaxWidth',
+        textWordBreak: 'textWordBreak',
+        textSizeMinPixels: 'textSizeMinPixels'
+    },
+    [EDGE_DECORATOR_TYPE.FLOW]: {
+        getColor: 'color',
+        getWidth: 'width',
+        getSpeed: 'speed',
+        getTailLength: 'tailLength'
+    }
+};
+const DECKGL_UPDATE_TRIGGERS = {
+    [NODE_TYPE.CIRCLE]: ['getFillColor', 'getRadius', 'getLineColor', 'getLineWidth'],
+    [NODE_TYPE.RECTANGLE]: ['getFillColor', 'getLineColor', 'getLineWidth'],
+    [NODE_TYPE.ROUNDED_RECTANGLE]: [
+        'getFillColor',
+        'getLineColor',
+        'getLineWidth',
+        'getCornerRadius'
+    ],
+    [NODE_TYPE.PATH_ROUNDED_RECTANGLE]: [
+        'getFillColor',
+        'getLineColor',
+        'getLineWidth',
+        'getCornerRadius'
+    ],
+    [NODE_TYPE.LABEL]: [
+        'getColor',
+        'getText',
+        'getSize',
+        'getTextAnchor',
+        'getAlignmentBaseline',
+        'getAngle'
+    ],
+    [NODE_TYPE.MARKER]: ['getColor', 'getSize', 'getMarker'],
+    Edge: ['getColor', 'getWidth'],
+    [EDGE_DECORATOR_TYPE.LABEL]: [
+        'getColor',
+        'getText',
+        'getSize',
+        'getTextAnchor',
+        'getAlignmentBaseline'
+    ],
+    [EDGE_DECORATOR_TYPE.FLOW]: ['getColor', 'getWidth', 'getSpeed', 'getTailLength']
+};
+export class Stylesheet {
+    type;
+    properties;
+    constructor(style, updateTriggers) {
+        const { type: layerType, ...restStyle } = style;
+        if (!layerType || !(layerType in DECKGL_ACCESSOR_MAP)) {
+            throw new Error(`illegal type: ${layerType}`);
+        }
+        this.type = layerType;
+        // style = {
+        //  type: 'circle',
+        //  fill: 'red'
+        //  radius: 5,
+        //
+        //  ':hover': {
+        //    fill: 'blue',
+        //    stroke: 'red'
+        //  }
+        // };
+        // step 1: extract 'rules': default, hover
+        // default: {fill: 'red', radius: 5};
+        // hover: {fill: 'blue', stroke: 'red'};
+        const rules = Object.keys(restStyle).reduce((res, key) => {
+            const isSelector = key.startsWith(':');
+            if (isSelector) {
+                const state = key.substring(1);
+                res[state] = restStyle[key];
+                return res;
+            }
+            res.default[key] = restStyle[key];
+            return res;
+        }, {
+            default: {}
+        });
+        // step 2: extract all unique attributes from rules
+        // attributes: ['fill', 'radius', 'stroke']
+        const attributes = Object.values(rules).reduce((res, rule) => {
+            const attrs = Object.keys(rule);
+            const set = new Set([...res, ...attrs]);
+            return Array.from(set);
+        }, []);
+        // step 3: create a attribute map as:
+        // attrMap = {
+        //  fill: {default: 'red', hover: 'blue'},
+        //  radius: {default: 5},
+        //  stroke: {hover: 'red'},
+        // }
+        const attrMap = attributes.reduce((res, attr) => {
+            res[attr] = Object.entries(rules).reduce((acc, entry) => {
+                const [state, rule] = entry;
+                if (typeof rule[attr] !== 'undefined') {
+                    acc[state] = rule[attr];
+                }
+                return acc;
+            }, {});
+            return res;
+        }, {});
+        // step 4: simplify the attribute map if only default exists for the attribute
+        // simplifiedStyleMap = {
+        //  fill: {default: 'red', hover: 'blue'},
+        //  radius: 5,
+        //  stroke: {hover: 'red'},
+        // }
+        const simplifiedStyleMap = Object.entries(attrMap).reduce((res, entry) => {
+            const [attr, valueMap] = entry;
+            const onlyDefault = Object.keys(valueMap).length === 1 && valueMap.default !== undefined;
+            if (onlyDefault) {
+                res[attr] = valueMap.default;
+                return res;
+            }
+            res[attr] = valueMap;
+            return res;
+        }, {});
+        // step 5: create style property
+        // if the propety only maps to default state => return value only
+        // if the property maps to other states => return accessor function
+        // start to parse properties
+        this.properties = {};
+        for (const key in simplifiedStyleMap) {
+            this.properties[key] = new StyleProperty({
+                key,
+                value: simplifiedStyleMap[key],
+                updateTrigger: updateTriggers.stateUpdateTrigger
+            });
+        }
+    }
+    _getProperty(deckglAccessor) {
+        const map = DECKGL_ACCESSOR_MAP[this.type];
+        if (!map) {
+            throw new Error(`illegal type: ${this.type}`);
+        }
+        const styleProp = map[deckglAccessor];
+        if (!styleProp) {
+            log.error(`Invalid DeckGL accessor: ${deckglAccessor}`)();
+            throw new Error(`Invalid DeckGL accessor: ${deckglAccessor}`);
+        }
+        return this.properties[styleProp];
+    }
+    getDeckGLAccessor(deckglAccessor) {
+        const property = this._getProperty(deckglAccessor);
+        // get the value
+        if (property) {
+            return property.getValue();
+        }
+        // return default value
+        const styleProp = DECKGL_ACCESSOR_MAP[this.type][deckglAccessor];
+        return StyleProperty.getDefault(styleProp);
+    }
+    getDeckGLAccessorUpdateTrigger(deckglAccessor) {
+        const property = this._getProperty(deckglAccessor);
+        // get the value
+        if (property) {
+            return property.getUpdateTrigger();
+        }
+        return false;
+    }
+    getDeckGLAccessors() {
+        const accessorMap = DECKGL_ACCESSOR_MAP[this.type];
+        return Object.keys(accessorMap).reduce((res, accessor) => {
+            res[accessor] = this.getDeckGLAccessor(accessor);
+            return res;
+        }, {});
+    }
+    getDeckGLUpdateTriggers() {
+        return DECKGL_UPDATE_TRIGGERS[this.type].reduce((res, accessor) => {
+            res[accessor] = this.getDeckGLAccessorUpdateTrigger(accessor);
+            return res;
+        }, {});
+    }
+}

package/dist/utils/create-graph.d.ts

@@ -0,0 +1,8 @@
+import { Graph } from '../core/graph';
+export declare function createGraph({ name, nodes, edges, nodeParser, edgeParser }: {
+    name: any;
+    nodes: any;
+    edges: any;
+    nodeParser: any;
+    edgeParser: any;
+}): Graph;

package/dist/utils/create-graph.js

@@ -0,0 +1,33 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { Edge } from '../core/edge';
+import { Node } from '../core/node';
+import { Graph } from '../core/graph';
+export function createGraph({ name, nodes, edges, nodeParser, edgeParser }) {
+    // create a new empty graph
+    const graph = new Graph();
+    const graphName = name || Date.now();
+    graph.setGraphName(graphName);
+    // add nodes
+    const glNodes = nodes.map((node) => {
+        const { id } = nodeParser(node);
+        return new Node({
+            id,
+            data: node
+        });
+    });
+    graph.batchAddNodes(glNodes);
+    const glEdges = edges.map((edge) => {
+        const { id, sourceId, targetId, directed } = edgeParser(edge);
+        return new Edge({
+            id,
+            sourceId,
+            targetId,
+            directed,
+            data: edge
+        });
+    });
+    graph.batchAddEdges(glEdges);
+    return graph;
+}

package/dist/utils/layer-utils.d.ts

@@ -0,0 +1 @@
+export declare const mixedGetPosition: (getPosition: any, getOffset: any) => any;

package/dist/utils/layer-utils.js

@@ -0,0 +1,20 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+export const mixedGetPosition = (getPosition, getOffset) => {
+    if (!getOffset) {
+        return getPosition;
+    }
+    if (typeof getOffset === 'function') {
+        return (d) => {
+            const [x, y] = getPosition(d);
+            const [offX, offY] = getOffset(d);
+            return [x + offX, y + offY];
+        };
+    }
+    const [offX, offY] = getOffset;
+    return (d) => {
+        const [x, y] = getPosition(d);
+        return [x + offX, y + offY];
+    };
+};

package/dist/utils/log.d.ts

@@ -0,0 +1,2 @@
+import { Log } from 'probe.gl';
+export declare const log: Log;

package/dist/utils/log.js

@@ -0,0 +1,6 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { Log, COLOR } from 'probe.gl';
+export const log = new Log({ id: 'react-graph-layers' }).enable();
+log.log({ color: COLOR.CYAN }, 'Initialize react-graph-layers logger.')();

package/dist/utils/polygon-calculations.d.ts

@@ -0,0 +1 @@
+export declare function generateRoundedCorners(pos: any, width: any, height: any, radius: any, factor?: number): any[];

package/dist/utils/polygon-calculations.js

@@ -0,0 +1,102 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+export function generateRoundedCorners(pos, width, height, radius, factor = 20) {
+    const halfWidth = width / 2;
+    const halfHeight = height / 2;
+    const bottomLeft = { X: pos[0] - halfWidth, Y: pos[1] - halfHeight };
+    const topLeft = { X: pos[0] - halfWidth, Y: pos[1] + halfHeight };
+    const bottomRight = { X: pos[0] + halfWidth, Y: pos[1] - halfHeight };
+    const topRight = { X: pos[0] + halfWidth, Y: pos[1] + halfHeight };
+    const roundedPointsForBottomLeft = getRoundedCorner(bottomLeft, topLeft, bottomRight, radius, factor);
+    const roundedPointsForTopLeft = getRoundedCorner(topLeft, topRight, bottomLeft, radius, factor).reverse();
+    const roundedPointsForTopRight = getRoundedCorner(topRight, bottomRight, topLeft, radius, factor).reverse();
+    const roundedPointsForBottomRight = getRoundedCorner(bottomRight, bottomLeft, topRight, radius, factor).reverse();
+    const result = [
+        ...roundedPointsForBottomLeft,
+        ...roundedPointsForTopLeft,
+        ...roundedPointsForTopRight,
+        ...roundedPointsForBottomRight
+    ];
+    return result;
+}
+/**
+ *
+ * @param {*} angularPoint = corner point
+ * @param {*} p1 = edge one
+ * @param {*} p2 = edge two
+ * @param {*} radius = corner radius
+ * @param {*} factor = affects the points used for curve
+ * reference: https://stackoverflow.com/questions/24771828/how-to-calculate-rounded-corners-for-a-polygon
+ */
+// eslint-disable-next-line max-statements
+function getRoundedCorner(angularPoint, p1, p2, radius, factor) {
+    // Vector 1
+    const dx1 = angularPoint.X - p1.X;
+    const dy1 = angularPoint.Y - p1.Y;
+    // Vector 2
+    const dx2 = angularPoint.X - p2.X;
+    const dy2 = angularPoint.Y - p2.Y;
+    // Angle between vector 1 and vector 2 divided by 2
+    const angle = (Math.atan2(dy1, dx1) - Math.atan2(dy2, dx2)) / 2;
+    // The length of segment between angular point and the
+    // points of intersection with the circle of a given radius
+    const tan = Math.abs(Math.tan(angle));
+    let segment = radius / tan;
+    // var segment = 2;
+    // Check the segment
+    const length1 = getLength(dx1, dy1);
+    const length2 = getLength(dx2, dy2);
+    const length = Math.min(length1, length2);
+    if (segment > length) {
+        segment = length;
+        radius = length * tan;
+    }
+    // Points of intersection are calculated by the proportion between
+    // the coordinates of the vector, length of vector and the length of the segment.
+    const p1Cross = getProportionPoint(angularPoint, segment, length1, dx1, dy1);
+    const p2Cross = getProportionPoint(angularPoint, segment, length2, dx2, dy2);
+    // Calculation of the coordinates of the circle
+    // center by the addition of angular vectors.
+    const dx = angularPoint.X * 2 - p1Cross.X - p2Cross.X;
+    const dy = angularPoint.Y * 2 - p1Cross.Y - p2Cross.Y;
+    const L = getLength(dx, dy);
+    const d = getLength(segment, radius);
+    const circlePoint = getProportionPoint(angularPoint, d, L, dx, dy);
+    // StartAngle and EndAngle of arc
+    let startAngle = Math.atan2(p1Cross.Y - circlePoint.Y, p1Cross.X - circlePoint.X);
+    const endAngle = Math.atan2(p2Cross.Y - circlePoint.Y, p2Cross.X - circlePoint.X);
+    // Sweep angle
+    let sweepAngle = endAngle - startAngle;
+    // Some additional checks
+    if (sweepAngle < 0) {
+        startAngle = endAngle;
+        sweepAngle = -sweepAngle;
+    }
+    if (sweepAngle > Math.PI)
+        sweepAngle = Math.PI - sweepAngle;
+    const degreeFactor = factor / Math.PI;
+    return getPointsForArc(sweepAngle, degreeFactor, startAngle, circlePoint, radius);
+}
+function getLength(dx, dy) {
+    return Math.sqrt(dx * dx + dy * dy);
+}
+function getProportionPoint(point, segment, length, dx, dy) {
+    const factor = segment / length;
+    return {
+        X: point.X - dx * factor,
+        Y: point.Y - dy * factor
+    };
+}
+function getPointsForArc(sweepAngle, degreeFactor, startAngle, circlePoint, radius) {
+    const pointsCount = Math.abs(sweepAngle * degreeFactor);
+    const sign = Math.sign(sweepAngle);
+    const points = [];
+    for (let i = 0; i < pointsCount; ++i) {
+        const pointX = circlePoint.X + Math.cos(startAngle + (sign * i) / degreeFactor) * radius;
+        const pointY = circlePoint.Y + Math.sin(startAngle + (sign * i) / degreeFactor) * radius;
+        const point = [pointX, pointY];
+        points.push(point);
+    }
+    return points;
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@deck.gl-community/graph-layers",
+  "version": "9.0.0",
+  "description": "WebGL2-Powered library for Graph Visualization",
+  "keywords": [
+    "graph",
+    "visualization",
+    "force-directed layout",
+    "gpu",
+    "deck.gl"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "test": "vitest run",
+    "test-watch": "vitest"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@deck.gl/core": "^9.0.12",
+    "@deck.gl/layers": "^9.0.12",
+    "@luma.gl/core": "^9.0.12",
+    "cardinal-spline-js": "^2.3.10",
+    "color": "^4.2.3",
+    "core-js": "^3.29.0",
+    "d3": "^7.8.2",
+    "d3-array": "^3.2.2",
+    "d3-force": "^3.0.0",
+    "d3-format": "^3.1.0",
+    "d3-scale": "^4.0.2",
+    "global": "^4.4.0",
+    "gpu.js": "^2.16.0",
+    "lodash.isequal": "^4.5.0",
+    "lodash.pick": "^4.4.0",
+    "probe.gl": "^3.6.0",
+    "raf": "^3.4.1"
+  },
+  "devDependencies": {
+    "ngraph.generators": "^20.1.0"
+  }
+}

package/src/core/base-layout.ts

@@ -0,0 +1,154 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import isEqual from 'lodash.isequal';
+import {EDGE_TYPE, LAYOUT_STATE} from './constants';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface BaseLayoutOptions {}
+
+/**
+ * All the layout classes are extended from this base layout class.
+ */
+export class BaseLayout extends EventTarget {
+  /** Name of the layout. */
+  protected readonly _name: string = 'BaseLayout';
+  /** Extra configuration options of the layout. */
+  protected _options: BaseLayoutOptions;
+
+  public version = 0;
+  public state = LAYOUT_STATE.INIT;
+
+  /**
+   * Constructor of BaseLayout
+   * @param  {Object} options extra configuration options of the layout
+   */
+  constructor(options: BaseLayoutOptions = {}) {
+    super();
+    this._options = options;
+  }
+
+  /**
+   * @fires BaseLayout#onLayoutStart
+   * @protected
+   */
+  _onLayoutStart(): void {
+    this._updateState(LAYOUT_STATE.CALCULATING);
+
+    /**
+     * Layout calculation start.
+     *
+     * @event BaseLayout#onLayoutChange
+     * @type {CustomEvent}
+     */
+    this.dispatchEvent(new CustomEvent('onLayoutStart'));
+  }
+
+  /**
+   * @fires BaseLayout#onLayoutChange
+   * @protected
+   */
+  _onLayoutChange(): void {
+    this._updateState(LAYOUT_STATE.CALCULATING);
+
+    /**
+     * Layout calculation iteration.
+     *
+     * @event BaseLayout#onLayoutChange
+     * @type {CustomEvent}
+     */
+    this.dispatchEvent(new CustomEvent('onLayoutChange'));
+  }
+
+  /**
+   * @fires BaseLayout#onLayoutDone
+   * @protected
+   */
+  _onLayoutDone(): void {
+    this._updateState(LAYOUT_STATE.DONE);
+
+    /**
+     * Layout calculation is done.
+     *
+     * @event BaseLayout#onLayoutDone
+     * @type {CustomEvent}
+     */
+    this.dispatchEvent(new CustomEvent('onLayoutDone'));
+  }
+
+  /**
+   * @fires BaseLayout#onLayoutError
+   * @protected
+   */
+  _onLayoutError(): void {
+    this._updateState(LAYOUT_STATE.ERROR);
+
+    /**
+     * Layout calculation went wrong.
+     *
+     * @event BaseLayout#onLayoutError
+     * @type {CustomEvent}
+     */
+    this.dispatchEvent(new CustomEvent('onLayoutError'));
+  }
+
+  /**
+   * Check the equality of two layouts
+   * @param  {Object} layout The layout to be compared.
+   * @return {Bool}   True if the layout is the same as itself.
+   */
+  equals(layout: BaseLayout): boolean {
+    if (!layout || !(layout instanceof BaseLayout)) {
+      return false;
+    }
+    return this._name === layout._name && isEqual(this._options, layout._options);
+  }
+
+  /** virtual functions: will be implemented in the child class */
+
+  // first time to pass the graph data into this layout
+  initializeGraph(graph) {}
+  // update the existing graph
+  updateGraph(graph) {}
+  // start the layout calculation
+  start() {}
+  // update the layout calculation
+  update() {}
+  // resume the layout calculation
+  resume() {}
+  // stop the layout calculation
+  stop() {}
+  // access the position of the node in the layout
+  getNodePosition(node: Node): [number, number] {
+    return [0, 0];
+  }
+  // access the layout information of the edge
+  getEdgePosition(edge) {
+    return {
+      type: EDGE_TYPE.LINE,
+      sourcePosition: [0, 0],
+      targetPosition: [0, 0],
+      controlPoints: []
+    };
+  }
+
+  /**
+   * Pin the node to a designated position, and the node won't move anymore
+   * @param  {Object} node Node to be locked
+   * @param  {Number} x    x coordinate
+   * @param  {Number} y    y coordinate
+   */
+  lockNodePosition(node, x, y) {}
+
+  /**
+   * Unlock the node, the node will be able to move freely.
+   * @param  {Object} node Node to be unlocked
+   */
+  unlockNodePosition(node) {}
+
+  _updateState(state) {
+    this.state = state;
+    this.version += 1;
+  }
+}

package/src/core/cache.ts

@@ -0,0 +1,31 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export class Cache<K, V> {
+  private readonly _keys = new Map<K, {value: V; version: number}>();
+
+  /**
+   * @param key The key of the cache
+   * @returns {*} The value of the cache as set by the `set` method.
+   */
+  get(key: K): V | undefined {
+    return this._keys.get(key)?.value;
+  }
+
+  /**
+   * @param key The key of the cache
+   * @param createValue A callback to create the value of the cache if it is needed.
+   * @param version The version of the cache. If the version is smaller than the current version, the cache will not be updated.
+   */
+  set(key: K, createValue: (...args: unknown[]) => V, version: number): void {
+    const cached = this._keys.get(key);
+
+    const keyUpdated = cached === undefined || version > cached.version;
+    if (!keyUpdated) {
+      return;
+    }
+
+    this._keys.set(key, {version, value: createValue()});
+  }
+}