@deck.gl-community/graph-layers 9.2.0-beta.2 → 9.2.0-beta.4

package/src/core/graph-layout.ts

@@ -4,9 +4,7 @@
 
 import type {Bounds2D} from '@math.gl/types';
 
-import type {Graph} from '../graph/graph';
-import type {Node} from '../graph/node';
-import type {Edge} from '../graph/edge';
+import type {Graph, NodeInterface, EdgeInterface} from '../graph/graph';
 
 import isEqual from 'lodash.isequal';
 import {log} from '../utils/log';
@@ -18,16 +16,30 @@ export type GraphLayoutEventDetail = {
   bounds: Bounds2D | null;
 };
 
-export type GraphLayoutProps = {};
+export type GraphLayoutProps = {
+  onLayoutStart?: (detail?: GraphLayoutEventDetail) => void;
+  onLayoutChange?: (detail?: GraphLayoutEventDetail) => void;
+  onLayoutDone?: (detail?: GraphLayoutEventDetail) => void;
+  onLayoutError?: (error?: unknown) => void;
+};
+
 
-/** All the layout classes are extended from this base layout class. */
 export abstract class GraphLayout<
-  OptionsT extends GraphLayoutProps = GraphLayoutProps
-> extends EventTarget {
-  /** Name of the layout. */
-  protected readonly _name: string = 'GraphLayout';
-  /** Extra configuration options of the layout. */
-  protected _options: OptionsT;
+  PropsT extends GraphLayoutProps = GraphLayoutProps
+> {
+  static defaultProps: Readonly<Required<GraphLayoutProps>> = {
+    onLayoutStart: undefined,
+    onLayoutChange: undefined,
+    onLayoutDone: undefined,
+    onLayoutError: undefined
+  };
+
+  get [Symbol.toStringTag](): string {
+    return 'GraphLayout';
+  }
+
+  /** Extra configuration props of the layout. */
+  protected props: Required<PropsT>;
 
   /**
    * Last computed layout bounds in local layout coordinates.
@@ -42,11 +54,22 @@ export abstract class GraphLayout<
 
   /**
    * Constructor of GraphLayout
-   * @param options extra configuration options of the layout
+   * @param props extra configuration props of the layout
    */
-  constructor(options: OptionsT) {
-    super();
-    this._options = options;
+  constructor(props: PropsT, defaultProps?: Required<PropsT>) {
+    this.props = {
+      ...GraphLayout.defaultProps,
+      ...defaultProps,
+      ...props
+    };
+  }
+
+  getProps(): PropsT {
+    return {...this.props};
+  }
+
+  setProps(props: Partial<PropsT>): void {
+    this.props = {...this.props, ...props};
   }
 
   /**
@@ -58,18 +81,18 @@ export abstract class GraphLayout<
     if (!layout || !(layout instanceof GraphLayout)) {
       return false;
     }
-    return this._name === layout._name && isEqual(this._options, layout._options);
+    return this instanceof layout.constructor && isEqual(this.props, layout.props);
   }
 
   // Accessors
 
   /** access the position of the node in the layout */
-  getNodePosition(node: Node): [number, number] {
+  getNodePosition(node: NodeInterface): [number, number] {
     return [0, 0];
   }
 
   /** access the layout information of the edge */
-  getEdgePosition(edge: Edge) {
+  getEdgePosition(edge: EdgeInterface) {
     return {
       type: 'line',
       sourcePosition: [0, 0],
@@ -84,13 +107,13 @@ export abstract class GraphLayout<
    * @param  x    x coordinate
    * @param  y    y coordinate
    */
-  lockNodePosition(node: Node, x: number, y: number) {}
+  lockNodePosition(node: NodeInterface, 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) {}
+  unlockNodePosition(node: NodeInterface) {}
 
   /** Returns the last computed layout bounds, if available. */
   getBounds(): Bounds2D | null {
@@ -100,9 +123,9 @@ export abstract class GraphLayout<
     /** virtual functions: will be implemented in the child class */
 
   /** first time to pass the graph data into this layout */
-  abstract initializeGraph(graph: Graph);
+  abstract initializeGraph(graph: Graph): void;
   /** update the existing graph */
-  abstract updateGraph(graph: Graph);
+  abstract updateGraph(graph: Graph): void;
   /** start the layout calculation */
   abstract start();
   /** update the layout calculation */
@@ -194,7 +217,7 @@ export abstract class GraphLayout<
 
   /** @fires GraphLayout#onLayoutStart */
   protected _onLayoutStart = (): void => {
-    log.log(0, `GraphLayout(${this._name}): start`)();
+    log.log(0, `GraphLayout(${this}): start`)();
     this._updateBounds();
     this._updateState('calculating');
 
@@ -204,12 +227,12 @@ export abstract class GraphLayout<
      * @type {CustomEvent}
      */
     const detail: GraphLayoutEventDetail = {bounds: this._bounds};
-    this.dispatchEvent(new CustomEvent<GraphLayoutEventDetail>('onLayoutStart', {detail}));
+    this.props.onLayoutStart?.(detail);
   };
 
   /** @fires GraphLayout#onLayoutChange */
   protected _onLayoutChange = (): void => {
-    log.log(0, `GraphLayout(${this._name}): update`)();
+    log.log(0, `GraphLayout(${this}): update`)();
     this._updateBounds();
     this._updateState('calculating');
 
@@ -219,12 +242,12 @@ export abstract class GraphLayout<
      * @type {CustomEvent}
      */
     const detail: GraphLayoutEventDetail = {bounds: this._bounds};
-    this.dispatchEvent(new CustomEvent<GraphLayoutEventDetail>('onLayoutChange', {detail}));
+    this.props.onLayoutChange?.(detail);
   };
 
   /** @fires GraphLayout#onLayoutDone */
   protected _onLayoutDone = (): void => {
-    log.log(0, `GraphLayout(${this._name}): end`)();
+    log.log(0, `GraphLayout(${this}): end`)();
     this._updateBounds();
     this._updateState('done');
 
@@ -234,7 +257,7 @@ export abstract class GraphLayout<
      * @type {CustomEvent}
      */
     const detail: GraphLayoutEventDetail = {bounds: this._bounds};
-    this.dispatchEvent(new CustomEvent<GraphLayoutEventDetail>('onLayoutDone', {detail}));
+    this.props.onLayoutDone?.(detail);
   };
 
   /** @fires GraphLayout#onLayoutError */
@@ -246,6 +269,6 @@ export abstract class GraphLayout<
      * @event GraphLayout#onLayoutError
      * @type {CustomEvent}
      */
-    this.dispatchEvent(new CustomEvent('onLayoutError'));
+    this.props.onLayoutError?.();
   };
 }

package/src/core/interaction-manager.ts

@@ -3,9 +3,8 @@
 // Copyright (c) vis.gl contributors
 
 import type {EdgeState, NodeState} from './constants';
-import {Edge} from '../graph/edge';
-import {Node} from '../graph/node';
 import {GraphEngine} from './graph-engine';
+import type {EdgeInterface, NodeInterface} from '../graph/graph';
 import {log} from '../utils/log';
 import {
   resolveChainInteractionSource,
@@ -32,13 +31,13 @@ const NODE_TO_EDGE_STATE_MAP: Record<NodeState, EdgeState> = {
   selected: 'selected'
 };
 
-function shouldEdgeBeSelected(edge: Edge): boolean {
+function shouldEdgeBeSelected(edge: EdgeInterface): boolean {
   return edge
     .getConnectedNodes()
     .some((node) => node.getState() === 'selected' && node.shouldHighlightConnectedEdges());
 }
 
-function setNodeState(node: Node, state: NodeState) {
+function setNodeState(node: NodeInterface, state: NodeState) {
   node.setState(state);
   if (node.shouldHighlightConnectedEdges()) {
     node.getConnectedEdges().forEach((edge) => {
@@ -55,7 +54,7 @@ interface EventMap {
   onClick?: (info: unknown, event: Event) => void;
   onHover?: (info: unknown) => void;
   onMouseEnter?: (info: unknown) => void;
-  onMouseLeave?: (node: Node) => void;
+  onMouseLeave?: (node: NodeInterface) => void;
   onDragStart?: (info: unknown) => void;
   onDrag?: (info: unknown) => void;
   onDragEnd?: (info: unknown) => void;
@@ -72,8 +71,8 @@ export interface InteractionManagerProps {
 export class InteractionManager {
   public notifyCallback: Function;
   private _lastInteraction = 0;
-  private _lastHoveredNode: Node | null = null;
-  private _lastSelectedNode: Node | null = null;
+  private _lastHoveredNode: NodeInterface | null = null;
+  private _lastSelectedNode: NodeInterface | null = null;
 
   public nodeEvents: EventMap = undefined!;
   public edgeEvents: EventMap = undefined!;
@@ -118,7 +117,7 @@ export class InteractionManager {
     }
 
     if (object.isNode) {
-      const node = object as Node;
+      const node = object as NodeInterface;
       const chainId = node.getPropertyValue('collapsedChainId');
       const collapsedNodeIds = node.getPropertyValue('collapsedNodeIds');
       const representativeId = node.getPropertyValue('collapsedChainRepresentativeId');
@@ -161,7 +160,7 @@ export class InteractionManager {
         }
       }
 
-      if ((object as Node).isSelectable()) {
+      if (node.isSelectable()) {
         if (this._lastSelectedNode) {
           setNodeState(this._lastSelectedNode, 'default');
         }
@@ -176,7 +175,7 @@ export class InteractionManager {
       }
     }
 
-    if (object.isEdge && this.edgeEvents.onClick) {
+    if ((object as EdgeInterface).isEdge && this.edgeEvents.onClick) {
       this.edgeEvents.onClick(info, event);
     }
   }
@@ -186,10 +185,9 @@ export class InteractionManager {
 
     if (!(lastHoveredNode.isSelectable() && lastHoveredNode.getState() === 'selected')) {
       // reset the last hovered node's state
-      const newState =
-        this._lastSelectedNode !== null && this._lastSelectedNode.id === this._lastHoveredNode?.id
-          ? 'selected'
-          : 'default';
+      const lastSelectedId = this._lastSelectedNode?.getId();
+      const lastHoveredId = this._lastHoveredNode?.getId();
+      const newState = lastSelectedId !== undefined && lastSelectedId === lastHoveredId ? 'selected' : 'default';
       setNodeState(lastHoveredNode, newState);
     }
     // trigger the callback if exists
@@ -200,7 +198,7 @@ export class InteractionManager {
 
   _mouseEnterNode(info): void {
     // set the node's state to hover
-    setNodeState(info.object as Node, 'hover');
+    setNodeState(info.object as NodeInterface, 'hover');
     // trigger the callback if exists
     if (this.nodeEvents.onMouseEnter) {
       this.nodeEvents.onMouseEnter(info);
@@ -223,7 +221,9 @@ export class InteractionManager {
 
     // hover over on a node
     if (info.object.isNode) {
-      const isSameNode = this._lastHoveredNode && this._lastHoveredNode.id === info.object.id;
+      const lastHoveredId = this._lastHoveredNode?.getId();
+      const currentId = (info.object as NodeInterface).getId();
+      const isSameNode = lastHoveredId !== undefined && lastHoveredId === currentId;
       // stay in the same node
       if (isSameNode) {
         return;
@@ -262,9 +262,9 @@ export class InteractionManager {
     const bounds = info.layer.context.viewport.getBounds(); // [minX, minY, maxX, maxY]
     const x = Math.min(Math.max(coordinates[0], bounds[0]), bounds[2]);
     const y = Math.min(Math.max(coordinates[1], bounds[1]), bounds[3]);
-    this.engine.lockNodePosition(info.object, x, y);
+    this.engine.lockNodePosition(info.object as NodeInterface, x, y);
 
-    setNodeState(info.object, 'dragging');
+    setNodeState(info.object as NodeInterface, 'dragging');
     this._lastInteraction = Date.now();
     this.notifyCallback();
     if (this.nodeEvents.onDrag) {
@@ -279,7 +279,7 @@ export class InteractionManager {
     if (this.resumeLayoutAfterDragging) {
       this.engine.resume();
     }
-    setNodeState(info.object, 'default');
-    this.engine.unlockNodePosition(info.object);
+    setNodeState(info.object as NodeInterface, 'default');
+    this.engine.unlockNodePosition(info.object as NodeInterface);
   }
 }