@deck.gl-community/graph-layers 9.1.1 → 9.2.0-beta.3

package/src/layers/edge-attachment-helper.ts

@@ -0,0 +1,361 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {InteractionManager} from '../core/interaction-manager';
+import type {GraphEngine} from '../core/graph-engine';
+import type {NodeInterface} from '../graph/graph';
+
+import {
+  GraphStylesheetEngine,
+  type GraphStylesheet
+} from '../style/graph-style-engine';
+import type {GraphLayerNodeStyle} from '../style/graph-layer-stylesheet';
+import {getNodeBoundaryIntersection, type GeometryNodeType, type NodeGeometry} from '../utils/node-boundary';
+import {warn} from '../utils/log';
+
+type NumericAccessor = ((node: NodeInterface) => number) | number | null | undefined;
+type OffsetAccessor =
+  | ((node: NodeInterface) => [number, number])
+  | [number, number]
+  | null
+  | undefined;
+
+type NodeStyleAccessors = {
+  type: GeometryNodeType;
+  getOffset?: OffsetAccessor;
+  getRadius?: NumericAccessor;
+  getWidth?: NumericAccessor;
+  getHeight?: NumericAccessor;
+  getCornerRadius?: NumericAccessor;
+  getSize?: NumericAccessor;
+};
+
+const GEOMETRY_NODE_TYPES: GeometryNodeType[] = [
+  'circle',
+  'rectangle',
+  'rounded-rectangle',
+  'path-rounded-rectangle',
+  'marker'
+];
+
+function evaluateNumericAccessor(accessor: NumericAccessor, node: NodeInterface): number | undefined {
+  if (typeof accessor === 'function') {
+    const value = accessor(node);
+    return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+  }
+  if (typeof accessor === 'number' && Number.isFinite(accessor)) {
+    return accessor;
+  }
+  return undefined;
+}
+
+function evaluateOffsetAccessor(accessor: OffsetAccessor, node: NodeInterface): [number, number] {
+  if (!accessor) {
+    return [0, 0];
+  }
+
+  let value = accessor as [number, number];
+  if (typeof accessor === 'function') {
+    value = accessor(node);
+  }
+
+  if (Array.isArray(value) && value.length >= 2) {
+    const offsetX = Number(value[0]);
+    const offsetY = Number(value[1]);
+    if (Number.isFinite(offsetX) && Number.isFinite(offsetY)) {
+      return [offsetX, offsetY];
+    }
+  }
+
+  return [0, 0];
+}
+
+function normalizePosition(value: any): [number, number] | null {
+  if (!value || typeof value !== 'object') {
+    return null;
+  }
+
+  const candidate = value as {length?: number; [index: number]: number};
+  if (typeof candidate.length === 'number' && candidate.length >= 2) {
+    const x = Number(candidate[0]);
+    const y = Number(candidate[1]);
+    if (Number.isFinite(x) && Number.isFinite(y)) {
+      return [x, y];
+    }
+  }
+
+  return null;
+}
+
+function resolveAccessorValue(accessor: NumericAccessor | undefined, node: NodeInterface) {
+  if (!accessor) {
+    return undefined;
+  }
+  return evaluateNumericAccessor(accessor, node);
+}
+
+function assignDimension(
+  geometry: NodeGeometry,
+  key: 'radius' | 'width' | 'height' | 'cornerRadius',
+  value: number | undefined
+) {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    geometry[key] = Math.max(value, 0);
+  }
+}
+
+function assignRectangleDimensions(
+  node: NodeInterface,
+  accessors: NodeStyleAccessors,
+  geometry: NodeGeometry
+) {
+  assignDimension(geometry, 'width', resolveAccessorValue(accessors.getWidth, node));
+  assignDimension(geometry, 'height', resolveAccessorValue(accessors.getHeight, node));
+}
+
+const GEOMETRY_APPLIERS: Record<
+  GeometryNodeType,
+  (node: NodeInterface, accessors: NodeStyleAccessors, geometry: NodeGeometry) => void
+> = {
+  circle: (node, accessors, geometry) => {
+    assignDimension(geometry, 'radius', resolveAccessorValue(accessors.getRadius, node));
+  },
+  marker: (node, accessors, geometry) => {
+    const size = resolveAccessorValue(accessors.getSize, node);
+    assignDimension(geometry, 'radius', typeof size === 'number' ? size / 2 : undefined);
+  },
+  rectangle: (node, accessors, geometry) => {
+    assignRectangleDimensions(node, accessors, geometry);
+  },
+  'rounded-rectangle': (node, accessors, geometry) => {
+    assignRectangleDimensions(node, accessors, geometry);
+    assignDimension(geometry, 'cornerRadius', resolveAccessorValue(accessors.getCornerRadius, node));
+    assignDimension(geometry, 'radius', resolveAccessorValue(accessors.getRadius, node));
+  },
+  'path-rounded-rectangle': (node, accessors, geometry) => {
+    assignRectangleDimensions(node, accessors, geometry);
+    assignDimension(geometry, 'cornerRadius', resolveAccessorValue(accessors.getCornerRadius, node));
+  }
+};
+
+export class EdgeAttachmentHelper {
+  getLayoutAccessor({
+    engine,
+    interactionManager,
+    nodeStyle
+  }: {
+    engine: GraphEngine;
+    interactionManager: InteractionManager;
+    nodeStyle?: GraphLayerNodeStyle[] | GraphLayerNodeStyle;
+  }) {
+    const nodeAccessorMap = this._buildNodeStyleAccessorMap({
+      engine,
+      interactionManager,
+      nodeStyle
+    });
+
+    if (nodeAccessorMap.size === 0) {
+      return (edge: any) => engine.getEdgePosition(edge);
+    }
+
+    const nodeMap = engine
+      .getNodes()
+      .reduce(
+        (acc, node) => acc.set(node.getId(), node),
+        new Map<string | number, NodeInterface>()
+      );
+
+    return (edge: any) =>
+      this._getAdjustedEdgeLayout(engine, nodeAccessorMap, nodeMap, edge);
+  }
+
+  private _buildNodeStyleAccessorMap({
+    engine,
+    interactionManager,
+    nodeStyle
+  }: {
+    engine: GraphEngine;
+    interactionManager: InteractionManager;
+    nodeStyle?: GraphLayerNodeStyle[] | GraphLayerNodeStyle;
+  }) {
+    const nodeAccessorMap = new Map<string | number, NodeStyleAccessors>();
+
+    if (!nodeStyle) {
+      return nodeAccessorMap;
+    }
+
+    const styles = Array.isArray(nodeStyle) ? nodeStyle : [nodeStyle];
+
+    styles
+      .filter(Boolean)
+      .forEach((style) => {
+        const {data = (nodes) => nodes, ...restStyle} = style;
+        const type = restStyle.type;
+
+        if (!type || !GEOMETRY_NODE_TYPES.includes(type as GeometryNodeType)) {
+          return;
+        }
+
+        let stylesheet: GraphStylesheetEngine | null = null;
+        try {
+          stylesheet = engine.createStylesheetEngine(restStyle as GraphStylesheet, {
+            stateUpdateTrigger: (interactionManager as any).getLastInteraction()
+          });
+        } catch (error) {
+          warn(
+            `GraphLayer: Failed to evaluate node stylesheet for edge attachment (${String(
+              (error as Error).message ?? error
+            )}).`
+          );
+          return;
+        }
+
+        const nodes = data(engine.getNodes());
+        if (!Array.isArray(nodes)) {
+          return;
+        }
+
+        const geometryType = type as GeometryNodeType;
+        const accessors = this._createAccessorsForType(geometryType, stylesheet);
+
+        nodes.forEach((node: NodeInterface) => {
+          const id = node.getId();
+          if (!nodeAccessorMap.has(id)) {
+            nodeAccessorMap.set(id, accessors);
+          }
+        });
+      });
+
+    return nodeAccessorMap;
+  }
+
+  private _getAdjustedEdgeLayout(
+    engine: GraphEngine,
+    nodeAccessorMap: Map<string | number, NodeStyleAccessors>,
+    nodeMap: Map<string | number, NodeInterface>,
+    edge: any
+  ) {
+    const layoutInfo = engine.getEdgePosition(edge);
+    if (!layoutInfo) {
+      return layoutInfo;
+    }
+
+    const sourceNode = nodeMap.get(edge.getSourceNodeId());
+    const targetNode = nodeMap.get(edge.getTargetNodeId());
+
+    if (!sourceNode || !targetNode) {
+      return layoutInfo;
+    }
+
+    const sourceGeometry = this._computeNodeGeometry(
+      engine,
+      sourceNode,
+      nodeAccessorMap.get(sourceNode.getId())
+    );
+    const targetGeometry = this._computeNodeGeometry(
+      engine,
+      targetNode,
+      nodeAccessorMap.get(targetNode.getId())
+    );
+
+    if (!sourceGeometry && !targetGeometry) {
+      return layoutInfo;
+    }
+
+    return this._applyGeometryToLayout(layoutInfo, sourceGeometry, targetGeometry);
+  }
+
+  private _applyGeometryToLayout(
+    layoutInfo: any,
+    sourceGeometry: NodeGeometry | null,
+    targetGeometry: NodeGeometry | null
+  ) {
+    const adjustedLayout = {...layoutInfo};
+
+    const targetReference = targetGeometry?.center ?? normalizePosition(layoutInfo.targetPosition);
+    const sourceReference = sourceGeometry?.center ?? normalizePosition(layoutInfo.sourcePosition);
+
+    if (sourceGeometry) {
+      adjustedLayout.sourcePosition = targetReference
+        ? getNodeBoundaryIntersection(sourceGeometry, targetReference)
+        : [...sourceGeometry.center];
+    }
+
+    if (targetGeometry) {
+      adjustedLayout.targetPosition = sourceReference
+        ? getNodeBoundaryIntersection(targetGeometry, sourceReference)
+        : [...targetGeometry.center];
+    }
+
+    return adjustedLayout;
+  }
+
+  private _createAccessorsForType(
+    geometryType: GeometryNodeType,
+    stylesheet: GraphStylesheetEngine
+  ): NodeStyleAccessors {
+    const base: NodeStyleAccessors = {
+      type: geometryType,
+      getOffset: stylesheet.getDeckGLAccessor('getOffset')
+    };
+
+    switch (geometryType) {
+      case 'circle':
+        base.getRadius = stylesheet.getDeckGLAccessor('getRadius');
+        break;
+      case 'marker':
+        base.getSize = stylesheet.getDeckGLAccessor('getSize');
+        break;
+      case 'rectangle':
+        base.getWidth = stylesheet.getDeckGLAccessor('getWidth');
+        base.getHeight = stylesheet.getDeckGLAccessor('getHeight');
+        break;
+      case 'rounded-rectangle':
+        base.getWidth = stylesheet.getDeckGLAccessor('getWidth');
+        base.getHeight = stylesheet.getDeckGLAccessor('getHeight');
+        base.getCornerRadius = stylesheet.getDeckGLAccessor('getCornerRadius');
+        base.getRadius = stylesheet.getDeckGLAccessor('getRadius');
+        break;
+      case 'path-rounded-rectangle':
+        base.getWidth = stylesheet.getDeckGLAccessor('getWidth');
+        base.getHeight = stylesheet.getDeckGLAccessor('getHeight');
+        base.getCornerRadius = stylesheet.getDeckGLAccessor('getCornerRadius');
+        break;
+      default:
+        break;
+    }
+
+    return base;
+  }
+
+  private _computeNodeGeometry(
+    engine: GraphEngine,
+    node: NodeInterface,
+    accessors?: NodeStyleAccessors
+  ): NodeGeometry | null {
+    const basePosition = engine.getNodePosition(node);
+    if (!basePosition) {
+      return null;
+    }
+
+    const offset = evaluateOffsetAccessor(accessors?.getOffset, node);
+    const center: [number, number] = [basePosition[0] + offset[0], basePosition[1] + offset[1]];
+
+    const geometry: NodeGeometry = {
+      type: accessors?.type,
+      center
+    };
+
+    if (!accessors || !accessors.type) {
+      return geometry;
+    }
+
+    const applier = GEOMETRY_APPLIERS[accessors.type];
+    if (applier) {
+      applier(node, accessors, geometry);
+    }
+
+    return geometry;
+  }
+}

package/src/layers/edge-layer.ts

@@ -4,15 +4,14 @@
 
 import {COORDINATE_SYSTEM, CompositeLayer} from '@deck.gl/core';
 
-import {EDGE_TYPE} from '../core/constants';
 import {StraightLineEdgeLayer} from '../layers/edge-layers/straight-line-edge-layer';
 import {PathEdgeLayer} from './edge-layers/path-edge-layer';
 import {CurvedEdgeLayer} from './edge-layers/curved-edge-layer';
 
 const EDGE_LAYER_MAP = {
-  [EDGE_TYPE.LINE]: StraightLineEdgeLayer,
-  [EDGE_TYPE.PATH]: PathEdgeLayer,
-  [EDGE_TYPE.SPLINE_CURVE]: CurvedEdgeLayer
+  'line': StraightLineEdgeLayer,
+  'path': PathEdgeLayer,
+  'spline-curve': CurvedEdgeLayer
 };
 
 export class EdgeLayer extends CompositeLayer {
@@ -47,9 +46,9 @@ export class EdgeLayer extends CompositeLayer {
         return res;
       },
       {
-        [EDGE_TYPE.LINE]: [],
-        [EDGE_TYPE.PATH]: [],
-        [EDGE_TYPE.SPLINE_CURVE]: []
+        'line': [],
+        'path': [],
+        'spline-curve': []
       }
     );
     this.setState({typedEdgeData});

package/src/layers/edge-layers/arrow-2d-geometry.ts

@@ -0,0 +1,51 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Geometry} from '@luma.gl/engine';
+
+// Mirror of the arrow geometry used by PathMarkerLayer, but only the head triangle.
+export class Arrow2DGeometry extends Geometry {
+  constructor(opts = {}) {
+    super(
+      Object.assign({}, opts, {
+        attributes: getArrowAttributes(opts),
+        topology: 'triangle-list' as const
+      })
+    );
+  }
+}
+
+function getArrowAttributes({length = 1, headWidth = 1}) {
+  const halfLength = length / 2;
+  const halfWidth = headWidth / 2;
+
+  const positions = new Float32Array([
+    0,
+    halfLength,
+    0,
+    -halfWidth,
+    -halfLength,
+    0,
+    halfWidth,
+    -halfLength,
+    0
+  ]);
+
+  const normals = new Float32Array([0, 0, 1, 0, 0, 1, 0, 0, 1]);
+
+  const texCoords = new Float32Array([
+    0.5,
+    1,
+    0,
+    0,
+    1,
+    0
+  ]);
+
+  return {
+    positions: {size: 3, value: positions},
+    normals: {size: 3, value: normals},
+    texCoords: {size: 2, value: texCoords}
+  };
+}

package/src/layers/edge-layers/edge-arrow-layer.ts

@@ -0,0 +1,171 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {CompositeLayer} from '@deck.gl/core';
+import {SimpleMeshLayer} from '@deck.gl/mesh-layers';
+
+import {Arrow2DGeometry} from './arrow-2d-geometry';
+
+const DEFAULT_ARROW_GEOMETRY = new Arrow2DGeometry({length: 1, headWidth: 0.6});
+
+type LayoutInfo = {
+  sourcePosition: number[];
+  targetPosition: number[];
+  controlPoints?: number[][];
+};
+
+const DEFAULT_Z = 0;
+
+function resolveSize(value: unknown): number {
+  const numeric = Number(value);
+  return Number.isFinite(numeric) && numeric !== 0 ? numeric : 1;
+}
+
+function getOffsetComponents(offset: unknown): {along: number; perpendicular: number} {
+  if (!Array.isArray(offset)) {
+    return {along: 0, perpendicular: 0};
+  }
+  const along = Number(offset[0]);
+  const perpendicular = Number(offset[1]);
+  return {
+    along: Number.isFinite(along) ? along : 0,
+    perpendicular: Number.isFinite(perpendicular) ? perpendicular : 0
+  };
+}
+
+export function isEdgeDirected(edge: any): boolean {
+  if (!edge) {
+    return false;
+  }
+  if (typeof edge.isDirected === 'function') {
+    return Boolean(edge.isDirected());
+  }
+  if (typeof edge.directed === 'boolean') {
+    return edge.directed;
+  }
+  return false;
+}
+
+function normalizeVector(vector: number[]): number[] {
+  const length = Math.hypot(vector[0] ?? 0, vector[1] ?? 0, vector[2] ?? 0);
+  if (length === 0) {
+    return [0, 0, 0];
+  }
+  return [(vector[0] ?? 0) / length, (vector[1] ?? 0) / length, (vector[2] ?? 0) / length];
+}
+
+function getTerminalDirection({sourcePosition, targetPosition, controlPoints = []}: LayoutInfo): {
+  target: number[];
+  direction: number[];
+} {
+  const anchor = controlPoints.length ? controlPoints[controlPoints.length - 1] : sourcePosition;
+  const direction = [
+    (targetPosition[0] ?? 0) - (anchor?.[0] ?? 0),
+    (targetPosition[1] ?? 0) - (anchor?.[1] ?? 0),
+    (targetPosition[2] ?? DEFAULT_Z) - (anchor?.[2] ?? DEFAULT_Z)
+  ];
+  return {target: targetPosition, direction};
+}
+
+export function getArrowTransform({
+  layout,
+  size,
+  offset = null
+}: {
+  layout: LayoutInfo;
+  size: number;
+  offset?: number[] | null;
+}): {position: [number, number, number]; angle: number} {
+  const {target, direction} = getTerminalDirection(layout);
+  const unit = normalizeVector(direction);
+
+  const hasDirection = unit[0] !== 0 || unit[1] !== 0 || unit[2] !== 0;
+  const resolvedSize = resolveSize(size);
+  const basePosition: [number, number, number] = [
+    target[0] ?? 0,
+    target[1] ?? 0,
+    target[2] ?? DEFAULT_Z
+  ];
+
+  if (!hasDirection) {
+    return {position: basePosition, angle: 0};
+  }
+
+  const {along, perpendicular} = getOffsetComponents(offset);
+  const alongDistance = resolvedSize * 0.5 + along;
+  const position: [number, number, number] = [
+    basePosition[0] - unit[0] * alongDistance,
+    basePosition[1] - unit[1] * alongDistance,
+    basePosition[2] - unit[2] * alongDistance
+  ];
+
+  if (perpendicular) {
+    const perp = [-unit[1], unit[0], 0];
+    position[0] += perp[0] * perpendicular;
+    position[1] += perp[1] * perpendicular;
+    position[2] += perp[2] * perpendicular;
+  }
+
+  const angle = (Math.atan2(unit[0], unit[1]) * 180) / Math.PI;
+
+  return {position, angle};
+}
+
+export class EdgeArrowLayer extends CompositeLayer {
+  static layerName = 'EdgeArrowLayer';
+
+  renderLayers() {
+    const {data, getLayoutInfo, positionUpdateTrigger = 0, stylesheet} = this.props as any;
+    const directedEdges = (data || []).filter(isEdgeDirected);
+
+    if (!directedEdges.length) {
+      return [];
+    }
+
+    const {getColor, getSize, getOffset} = stylesheet.getDeckGLAccessors();
+    const updateTriggers = stylesheet.getDeckGLUpdateTriggers();
+
+    return [
+      new SimpleMeshLayer(
+        this.getSubLayerProps({
+          id: '__edge-arrow-layer',
+          data: directedEdges,
+          mesh: DEFAULT_ARROW_GEOMETRY,
+          getColor,
+          getScale: (edge) => {
+            const size = resolveSize(getSize(edge));
+            return [size, size, size];
+          },
+          getOrientation: (edge) => {
+            const layout = getLayoutInfo(edge);
+            const size = resolveSize(getSize(edge));
+            const offset = getOffset ? getOffset(edge) : null;
+            const {angle} = getArrowTransform({layout, size, offset});
+            return [0, -angle, 0];
+          },
+          getPosition: (edge) => {
+            const layout = getLayoutInfo(edge);
+            const size = resolveSize(getSize(edge));
+            const offset = getOffset ? getOffset(edge) : null;
+            const {position} = getArrowTransform({layout, size, offset});
+            return position;
+          },
+          parameters: {
+            depthTest: false
+          },
+          updateTriggers: {
+            getColor: updateTriggers.getColor,
+            getScale: updateTriggers.getSize,
+            getOrientation: [
+              positionUpdateTrigger,
+              updateTriggers.getSize,
+              updateTriggers.getOffset
+            ],
+            getPosition: [positionUpdateTrigger, updateTriggers.getSize, updateTriggers.getOffset]
+          }
+        })
+      )
+    ];
+  }
+}