@deck.gl-community/graph-layers 9.0.1 → 9.1.0-beta.2

package/dist/widgets/view-control-widget.js

@@ -0,0 +1,194 @@
+import { jsxs as _jsxs, jsx as _jsx } from "preact/jsx-runtime";
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { Component, render } from 'preact';
+import { LongPressButton } from "./long-press-button.js";
+export const ViewControlWrapper = ({ children }) => (_jsxs("div", { style: {
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        position: 'absolute',
+        zIndex: 99,
+        userSelect: 'none'
+    }, children: [' ', children, ' '] }));
+export const NavigationButtonContainer = ({ children }) => (_jsxs("div", { style: {
+        background: '#f7f7f7',
+        borderRadius: '23px',
+        border: '0.5px solid #eaeaea',
+        boxShadow: 'inset 11px 11px 5px -7px rgba(230, 230, 230, 0.49)',
+        height: '46px',
+        width: '46px'
+    }, children: [' ', children, ' '] }));
+export const NavigationButton = (props) => (_jsxs("div", { onClick: props.onClick, style: {
+        color: '#848484',
+        cursor: 'pointer',
+        position: 'absolute',
+        left: props.left,
+        top: props.top,
+        transform: `rotate(${props.rotate || 0}deg)`
+        // &:hover,
+        // &:active {
+        //   color: #00ade6;
+        // }
+    }, children: [' ', props.children, ' '] }));
+export const ZoomControlWrapper = ({ children }) => (_jsxs("div", { style: {
+        alignItems: 'center',
+        background: '#f7f7f7',
+        border: '0.5px solid #eaeaea',
+        display: 'flex',
+        flexDirection: 'column',
+        marginTop: '6px',
+        padding: '2px 0',
+        width: '18px'
+    }, children: [' ', children, ' '] }));
+export const VerticalSlider = ({ children }) => (_jsxs("div", { style: {
+        display: 'inline-block',
+        height: '100px',
+        padding: '0',
+        width: '10px'
+        // > input[type='range'][orient='vertical'] {
+        //   -webkit-appearance: slider-vertical;
+        //   height: 100px;
+        //   padding: 0;
+        //   margin: 0;
+        //   width: 10px;
+        // }
+    }, children: [' ', children, ' '] }));
+export const ZoomControlButton = ({ children }) => (_jsxs("div", { style: {
+        cursor: 'pointer',
+        fontSize: '14px',
+        fontWeight: 500,
+        margin: '-4px'
+        // &:hover,
+        // &:active {
+        //   color: #00ade6;
+        // }
+    }, children: [' ', children, ' '] }));
+export class ViewControl extends Component {
+    static displayName = 'ViewControl';
+    static defaultProps = {
+        id: undefined,
+        viewId: undefined,
+        placement: 'top-left',
+        fitBounds: () => { },
+        panBy: () => { },
+        zoomBy: () => { },
+        zoomLevel: 1,
+        deltaPan: 10,
+        deltaZoom: 0.1,
+        minZoom: 0.1,
+        maxZoom: 1,
+        style: {},
+        className: ''
+    };
+    // pan actions
+    panUp = () => this.props.panBy(0, this.props.deltaPan);
+    panDown = () => this.props.panBy(0, -1 * this.props.deltaPan);
+    panLeft = () => this.props.panBy(this.props.deltaPan, 0);
+    panRight = () => this.props.panBy(-1 * this.props.deltaPan, 0);
+    // zoom actions
+    zoomIn = () => this.props.zoomBy(this.props.deltaZoom);
+    zoomOut = () => this.props.zoomBy(-1 * this.props.deltaZoom);
+    onChangeZoomLevel = (evt) => {
+        const delta = evt.target.value - this.props.zoomLevel;
+        this.props.zoomBy(delta);
+    };
+    render() {
+        const buttons = [
+            { top: -2, left: 14, rotate: 0, onClick: this.panUp, content: '▲', key: 'up' },
+            { top: 12, left: 0, rotate: -90, onClick: this.panLeft, content: '◀', key: 'left' },
+            { top: 12, left: 28, rotate: 90, onClick: this.panRight, content: '▶', key: 'right' },
+            { top: 25, left: 14, rotate: 180, onClick: this.panDown, content: '▼', key: 'down' }
+        ];
+        return (_jsxs(ViewControlWrapper, { children: [_jsxs(NavigationButtonContainer, { children: [buttons.map((b) => (_jsx(NavigationButton, { top: `${b.top}px`, left: `${b.left}px`, rotate: b.rotate, children: _jsx(LongPressButton, { onClick: b.onClick, children: b.content }) }, b.key))), _jsx(NavigationButton, { top: '12px', left: '16px', onClick: () => {
+                                // console.log('on click fit bounds') || this.props.fitBounds;
+                            }, children: '¤' })] }), _jsxs(ZoomControlWrapper, { children: [_jsx(ZoomControlButton, { children: _jsx(LongPressButton, { onClick: this.zoomIn, children: '+' }) }), _jsx(VerticalSlider, { children: _jsx("input", { type: "range", value: this.props.zoomLevel, min: this.props.minZoom, max: this.props.maxZoom, step: this.props.deltaZoom, onChange: this.onChangeZoomLevel, 
+                                /* @ts-expect-error TODO */
+                                orient: "vertical" }) }), _jsx(ZoomControlButton, { children: _jsx(LongPressButton, { onClick: this.zoomOut, children: '-' }) })] })] }));
+    }
+}
+export class ViewControlWidget {
+    id = 'zoom';
+    props;
+    placement = 'top-left';
+    orientation = 'vertical';
+    viewId = null;
+    viewports = {};
+    deck;
+    element;
+    constructor(props) {
+        this.props = { ...ViewControl.defaultProps, ...props };
+        this.id = props.id || 'zoom';
+        this.viewId = props.viewId || null;
+        this.placement = props.placement || 'top-left';
+        // this.orientation = props.orientation || 'vertical';
+        // props.transitionDuration = props.transitionDuration || 200;
+        // props.zoomInLabel = props.zoomInLabel || 'Zoom In';
+        // props.zoomOutLabel = props.zoomOutLabel || 'Zoom Out';
+        props.style = props.style || {};
+        this.props = props;
+    }
+    onAdd({ deck }) {
+        this.deck = deck;
+        this.element = document.createElement('div');
+        const { style, className } = this.props;
+        this.element.classList.add('deck-widget', 'deck-widget-zoom');
+        if (className) {
+            this.element.classList.add(className);
+        }
+        if (style) {
+            Object.entries(style).map(([key, value]) => this.element.style.setProperty(key, value));
+        }
+        const ui = (_jsx(ViewControl, { ...this.props, zoomBy: this.handleDeltaZoom.bind(this), panBy: this.handlePanBy.bind(this) }));
+        render(ui, this.element);
+        return this.element;
+    }
+    onRemove() {
+        this.deck = undefined;
+        this.element = undefined;
+    }
+    setProps(props) {
+        Object.assign(this.props, props);
+    }
+    onViewportChange(viewport) {
+        this.viewports[viewport.id] = viewport;
+    }
+    handleDeltaZoom(deltaZoom) {
+        // console.log('Handle delta zoom');
+        for (const view of this.deck.getViewports()) {
+            this.handleZoomView(view, view.zoom + deltaZoom);
+        }
+    }
+    handlePanBy(deltaX, deltaY) {
+        // console.log('Handle panby', deltaX, deltaY);
+        for (const viewport of this.deck.getViewports()) {
+            this.handlePanViewport(viewport, deltaX, deltaY);
+        }
+    }
+    handleZoomView(viewport, nextZoom) {
+        const viewId = this.viewId || viewport?.id || 'default-view';
+        // @ts-expect-error TODO we lack a proper API for getting viewStates
+        const viewState = this.deck.viewManager.viewState || viewport;
+        const nextViewState = {
+            ...viewState,
+            zoom: nextZoom
+            // transitionDuration: this.props.transitionDuration,
+            // transitionInterpolator: new FlyToInterpolator()
+        };
+        // @ts-ignore Using private method temporary until there's a public one
+        this.deck._onViewStateChange({ viewId, viewState: nextViewState, interactionState: {} });
+    }
+    handlePanViewport(viewport, deltaX, deltaY) {
+        const viewId = this.viewId || viewport?.id || 'default-view';
+        // @ts-expect-error TODO we lack a proper API for getting viewStates
+        const viewState = this.deck.viewManager.viewState || viewport;
+        // console.log('Handle pan viewport', deltaX, deltaY, viewState);
+        const nextViewState = {
+            ...viewState,
+            position: [viewport.position[0] + deltaX, viewport.position[1] + deltaY]
+        };
+        // @ts-ignore Using private method temporary until there's a public one
+        this.deck._onViewStateChange({ viewId, viewState: nextViewState, interactionState: {} });
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deck.gl-community/graph-layers",
-  "version": "9.0.1",
+  "version": "9.1.0-beta.2",
   "description": "WebGL2-Powered library for Graph Visualization",
   "keywords": [
     "graph",
@@ -31,9 +31,11 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@deck.gl/core": "^9.0.12",
-    "@deck.gl/layers": "^9.0.12",
-    "@luma.gl/core": "^9.0.12",
+    "@deck.gl/core": "^9.1.0",
+    "@deck.gl/layers": "^9.1.0",
+    "@deck.gl/widgets": "^9.1.0",
+    "@luma.gl/core": "^9.1.0",
+    "@probe.gl/log": "^4.0.4",
     "cardinal-spline-js": "^2.3.10",
     "color": "^4.2.3",
     "core-js": "^3.29.0",
@@ -43,14 +45,13 @@
     "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",
+    "preact": "^10.17.0",
     "raf": "^3.4.1"
   },
   "devDependencies": {
     "ngraph.generators": "^20.1.0"
   },
-  "gitHead": "646f8328d27d67d596f05c9154072051ec5cf4f0"
+  "gitHead": "80b6a3b1fafe0765f2070928ae360fc52bd57a46"
 }

package/src/core/graph-engine.ts

@@ -2,23 +2,43 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {BaseLayout} from './base-layout';
+import type {Node} from '../graph/node';
+import {Edge} from '../graph/edge';
+import {Graph} from '../graph/graph';
+import {GraphLayout} from './graph-layout';
 import {Cache} from './cache';
-import {Edge} from './edge';
-import {Graph} from './graph';
 
-// Graph engine controls the graph data and layout calculation
+export type GraphEngineProps = {
+  graph: Graph;
+  layout: GraphLayout;
+};
+
+/** Graph engine controls the graph data and layout calculation */
 export class GraphEngine extends EventTarget {
+  props: Readonly<Required<GraphEngineProps>>;
+
   private readonly _graph: Graph;
-  private readonly _layout: BaseLayout;
+  private readonly _layout: GraphLayout;
   private readonly _cache = new Cache<'nodes' | 'edges', Node[] | Edge[]>();
   private _layoutDirty = false;
   private _transactionInProgress = false;
 
-  constructor(graph: Graph, layout: BaseLayout) {
+  constructor(props: GraphEngineProps);
+  /** @deprecated Use props constructor: new GraphEngine(props) */
+  constructor(graph: Graph, layout: GraphLayout);
+
+  constructor(props: GraphEngineProps | Graph, layout?: GraphLayout) {
     super();
-    this._graph = graph;
-    this._layout = layout;
+    if (props instanceof Graph) {
+      props = {
+        graph: props,
+        layout
+      };
+    }
+
+    this.props = props;
+    this._graph = props.graph;
+    this._layout = props.layout;
   }
 
   /** Getters */
@@ -39,9 +59,9 @@ export class GraphEngine extends EventTarget {
     return this._cache.get('edges') as Edge[];
   };
 
-  getNodePosition = (node) => this._layout.getNodePosition(node);
+  getNodePosition = (node: Node) => this._layout.getNodePosition(node);
 
-  getEdgePosition = (edge) => this._layout.getEdgePosition(edge);
+  getEdgePosition = (edge: Edge) => this._layout.getEdgePosition(edge);
 
   getGraphVersion = () => this._graph.version;
 

package/src/core/graph-layout.ts

@@ -0,0 +1,146 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {Graph} from '../graph/graph';
+import type {Node} from '../graph/node';
+import type {Edge} from '../graph/edge';
+
+import isEqual from 'lodash.isequal';
+import {EDGE_TYPE} from './constants';
+
+// the status of the layout
+export type GraphLayoutState = 'INIT' | 'START' | 'CALCULATING' | 'DONE' | 'ERROR';
+
+export type GraphLayoutOptions = {};
+
+/** All the layout classes are extended from this base layout class. */
+export class GraphLayout<
+  OptionsT extends GraphLayoutOptions = GraphLayoutOptions
+> extends EventTarget {
+  /** Name of the layout. */
+  protected readonly _name: string = 'GraphLayout';
+  /** Extra configuration options of the layout. */
+  protected _options: OptionsT;
+
+  public version = 0;
+  public state: GraphLayoutState = 'INIT';
+
+  /**
+   * Constructor of GraphLayout
+   * @param options extra configuration options of the layout
+   */
+  constructor(options: OptionsT) {
+    super();
+    this._options = options;
+  }
+
+  /**
+   * Check the equality of two layouts
+   * @param layout - The layout to be compared.
+   * @return - True if the layout is the same as itself.
+   */
+  equals(layout: GraphLayout): boolean {
+    if (!layout || !(layout instanceof GraphLayout)) {
+      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: Graph) {}
+  /** update the existing graph */
+  updateGraph(graph: 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: 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  node Node to be locked
+   * @param  x    x coordinate
+   * @param  y    y coordinate
+   */
+  lockNodePosition(node: Node, x: number, y: number) {}
+
+  /**
+   * Unlock the node, the node will be able to move freely.
+   * @param  {Object} node Node to be unlocked
+   */
+  unlockNodePosition(node: Node) {}
+
+  // INTERNAL METHODS
+
+  protected _updateState(state) {
+    this.state = state;
+    this.version += 1;
+  }
+
+  /** @fires GraphLayout#onLayoutStart */
+  protected _onLayoutStart = (): void => {
+    this._updateState('CALCULATING');
+
+    /**
+     * Layout calculation start.
+     * @event GraphLayout#onLayoutChange
+     * @type {CustomEvent}
+     */
+    this.dispatchEvent(new CustomEvent('onLayoutStart'));
+  };
+
+  /** @fires GraphLayout#onLayoutChange */
+  protected _onLayoutChange = (): void => {
+    this._updateState('CALCULATING');
+
+    /**
+     * Layout calculation iteration.
+     * @event GraphLayout#onLayoutChange
+     * @type {CustomEvent}
+     */
+    this.dispatchEvent(new CustomEvent('onLayoutChange'));
+  };
+
+  /** @fires GraphLayout#onLayoutDone */
+  protected _onLayoutDone = (): void => {
+    this._updateState('DONE');
+
+    /**
+     * Layout calculation is done.
+     * @event GraphLayout#onLayoutDone
+     * @type {CustomEvent}
+     */
+    this.dispatchEvent(new CustomEvent('onLayoutDone'));
+  };
+
+  /** @fires GraphLayout#onLayoutError */
+  protected _onLayoutError = (): void => {
+    this._updateState('ERROR');
+
+    /**
+     * Layout calculation went wrong.
+     * @event GraphLayout#onLayoutError
+     * @type {CustomEvent}
+     */
+    this.dispatchEvent(new CustomEvent('onLayoutError'));
+  };
+}

package/src/core/interaction-manager.ts

@@ -3,9 +3,9 @@
 // Copyright (c) vis.gl contributors
 
 import {EDGE_STATE, NODE_STATE, ValueOf} from './constants';
-import {Edge} from './edge';
+import {Edge} from '../graph/edge';
+import {Node} from '../graph/node';
 import {GraphEngine} from './graph-engine';
-import {Node} from './node';
 
 const NODE_TO_EDGE_STATE_MAP: Record<ValueOf<typeof NODE_STATE>, ValueOf<typeof EDGE_STATE>> = {
   [NODE_STATE.DEFAULT]: EDGE_STATE.DEFAULT,

package/src/{core → graph}/edge.ts

@@ -3,17 +3,23 @@
 // Copyright (c) vis.gl contributors
 
 // Basic data structure of an edge
-import {EDGE_STATE} from './constants';
+import {EDGE_STATE} from '../core/constants';
 import {Node} from './node';
 
-interface EdgeOptions {
+export interface EdgeOptions {
+  /** the unique ID of the edge */
   id: string | number;
+  /** the ID of the source node */
   sourceId: string | number;
+  /** the ID of the target node */
   targetId: string | number;
+  /** whether the edge is directed or not */
   directed?: boolean;
-  data: Record<string, unknown>;
+  /** origin data reference */
+  data?: Record<string, unknown>;
 }
 
+/** Basic edge data structure */
 export class Edge {
   /** Unique uuid of the edge. */
   public id: string | number;
@@ -34,11 +40,7 @@ export class Edge {
 
   /**
    * The constructor
-   * @param  {String|Number} options.id - the unique ID of the edge
-   * @param  {String|Number} options.sourceId - the ID of the source node
-   * @param  {String|Number} options.targetId - the ID of the target node
-   * @param  {Boolean} options.directed - whether the edge is directed or not
-   * @param  {Record<string, unknown>} options.data - origin data reference
+   * @param options.id - information about the edge
    */
   constructor({id, sourceId, targetId, data, directed = false}: EdgeOptions) {
     this.id = id;
@@ -66,7 +68,7 @@ export class Edge {
 
   /**
    * Get the ID of the source node.
-   * @return {String|Number} the ID of the source node.
+   * @return the ID of the source node.
    */
   getSourceNodeId(): string | number {
     return this._sourceId;
@@ -74,7 +76,7 @@ export class Edge {
 
   /**
    * Get the ID of the target node.
-   * @return {String|Number} the ID of the target node.
+   * @return the ID of the target node.
    */
   getTargetNodeId(): string | number {
     return this._targetId;
@@ -82,8 +84,8 @@ export class Edge {
 
   /**
    * Return of the value of the selected property key.
-   * @param  {String} key - property key.
-   * @return {Any} - the value of the property.
+   * @param  key - property key.
+   * @return - the value of the property.
    */
   getPropertyValue(key: string): unknown {
     // try to search the key within this object
@@ -100,7 +102,7 @@ export class Edge {
 
   /**
    * Set the origin data as a reference.
-   * @param {Object} data - the origin data.
+   * @param data - the origin data.
    */
   setData(data: Record<string, unknown>): void {
     this._data = data;
@@ -108,8 +110,8 @@ export class Edge {
 
   /**
    * Update a data property.
-   * @param {String} key - the key of the property
-   * @param {Any} value - the value of the property.
+   * @param key - the key of the property
+   * @param value - the value of the property.
    */
   setDataProperty(key: string, value: unknown): void {
     this._data[key] = value;
@@ -117,7 +119,7 @@ export class Edge {
 
   /**
    * Set edge state
-   * @param {String} state - one of EDGE_STATE
+   * @param state - one of EDGE_STATE
    */
   setState(state: string): void {
     this.state = state;
@@ -125,7 +127,7 @@ export class Edge {
 
   /**
    * Get edge state
-   * @returns {string} state - one of EDGE_STATE
+   * @returns state - one of EDGE_STATE
    */
   getState(): string {
     return this.state;