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

package/src/layers/common-layers/grid-layer/grid-layer.ts

@@ -0,0 +1,237 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {CompositeLayer, type CompositeLayerProps, type UpdateParameters} from '@deck.gl/core';
+import {LineLayer, TextLayer} from '@deck.gl/layers';
+
+export type GridLineDatum = {
+  /** Optional label associated with the grid line. */
+  label?: string | number;
+  /** Horizontal grid lines use the yPosition value. */
+  yPosition?: number | null;
+  /** Vertical grid lines use the xPosition value. */
+  xPosition?: number | null;
+};
+
+export type GridLayerProps<DatumT extends GridLineDatum = GridLineDatum> = CompositeLayerProps & {
+  /** Collection of grid line definitions. */
+  data: readonly DatumT[];
+  /** Direction in which to draw grid lines. */
+  direction?: 'horizontal' | 'vertical';
+  /** Minimum X coordinate for grid lines. */
+  xMin?: number;
+  /** Maximum X coordinate for grid lines. */
+  xMax?: number;
+  /** Minimum Y coordinate for grid lines. */
+  yMin?: number;
+  /** Maximum Y coordinate for grid lines. */
+  yMax?: number;
+  /** Width of the grid lines in screen pixels. */
+  width?: number;
+  /** RGBA color for grid lines. */
+  color?: [number, number, number, number];
+  /** Optional accessor for line labels. */
+  getLabel?: (d: DatumT) => string | number | null | undefined;
+  /** Optional accessor for per-datum colors. */
+  getColor?: (d: DatumT) => [number, number, number, number] | null | undefined;
+  /** Optional accessor for per-datum widths. */
+  getWidth?: (d: DatumT) => number | null | undefined;
+  /** Whether to render labels alongside the grid lines. */
+  showLabels?: boolean;
+  /** Pixel offset applied to rendered labels. */
+  labelOffset?: [number, number];
+};
+
+const DEFAULT_COLOR: [number, number, number, number] = [200, 200, 200, 255];
+const DEFAULT_WIDTH = 1;
+const DEFAULT_OFFSET: [number, number] = [8, 0];
+const DEFAULT_MIN = -1e6;
+const DEFAULT_MAX = 1e6;
+
+export class GridLayer<DatumT extends GridLineDatum = GridLineDatum> extends CompositeLayer<GridLayerProps<DatumT>> {
+  static override layerName = 'GridLayer';
+
+  static override defaultProps: Required<Pick<GridLayerProps<GridLineDatum>, 'direction' | 'width' | 'color' | 'xMin' | 'xMax' | 'yMin' | 'yMax' | 'showLabels' | 'labelOffset'>> = {
+    direction: 'horizontal',
+    width: DEFAULT_WIDTH,
+    color: DEFAULT_COLOR,
+    xMin: DEFAULT_MIN,
+    xMax: DEFAULT_MAX,
+    yMin: DEFAULT_MIN,
+    yMax: DEFAULT_MAX,
+    showLabels: true,
+    labelOffset: DEFAULT_OFFSET
+  } as const;
+
+  override shouldUpdateState(params: UpdateParameters<this>): boolean {
+    const {changeFlags} = params;
+    return Boolean(changeFlags.dataChanged || changeFlags.propsChanged || changeFlags.viewportChanged);
+  }
+
+  override renderLayers() {
+    const {
+      data,
+      direction = 'horizontal',
+      xMin = DEFAULT_MIN,
+      xMax = DEFAULT_MAX,
+      yMin = DEFAULT_MIN,
+      yMax = DEFAULT_MAX,
+      color = DEFAULT_COLOR,
+      width = DEFAULT_WIDTH,
+      getLabel,
+      getColor,
+      getWidth,
+      showLabels = true,
+      labelOffset = DEFAULT_OFFSET
+    } = this.props;
+
+    const bounds = this._resolveViewportBounds({xMin, xMax, yMin, yMax});
+    const lines = this._createLineSegments(data, direction, bounds);
+
+    if (!lines.length) {
+      return [];
+    }
+
+    const lineLayer = new LineLayer({
+      id: `${this.props.id}-lines`,
+      data: lines,
+      getSourcePosition: (d) => d.sourcePosition,
+      getTargetPosition: (d) => d.targetPosition,
+      getColor: getColor ? (d) => getColor(d.datum) ?? color : () => color,
+      getWidth: getWidth ? (d) => getWidth(d.datum) ?? width : () => width,
+      widthUnits: 'pixels',
+      parameters: {
+        depthTest: false
+      }
+    });
+
+    if (!showLabels) {
+      return [lineLayer];
+    }
+
+    const textData = this._createLabelData(lines, direction, bounds, getLabel);
+
+    if (!textData.length) {
+      return [lineLayer];
+    }
+
+    const textLayer = new TextLayer({
+      id: `${this.props.id}-labels`,
+      data: textData,
+      getPosition: (d) => d.position,
+      getText: (d) => d.text,
+      getColor: getColor ? (d) => getColor(d.datum) ?? color : () => color,
+      getSize: 12,
+      sizeUnits: 'pixels',
+      getPixelOffset: labelOffset,
+      getTextAnchor: () => 'start',
+      getAlignmentBaseline: () => 'center',
+      background: true,
+      backgroundPadding: [4, 2],
+      backgroundColor: [255, 255, 255, 200],
+      parameters: {
+        depthTest: false
+      }
+    });
+
+    return [lineLayer, textLayer];
+  }
+
+  private _resolveViewportBounds(bounds: {
+    xMin: number;
+    xMax: number;
+    yMin: number;
+    yMax: number;
+  }): {minX: number; maxX: number; minY: number; maxY: number} {
+    const viewportBounds = this.context?.viewport?.getBounds?.();
+    if (!Array.isArray(viewportBounds) || viewportBounds.length !== 4) {
+      return {minX: bounds.xMin, maxX: bounds.xMax, minY: bounds.yMin, maxY: bounds.yMax};
+    }
+
+    const [bxMin, byMin, bxMax, byMax] = viewportBounds;
+    const minX =
+      Number.isFinite(bxMin) && Number.isFinite(bxMax)
+        ? Math.min(bounds.xMin, bxMin)
+        : bounds.xMin;
+    const maxX =
+      Number.isFinite(bxMin) && Number.isFinite(bxMax)
+        ? Math.max(bounds.xMax, bxMax)
+        : bounds.xMax;
+    const minY =
+      Number.isFinite(byMin) && Number.isFinite(byMax)
+        ? Math.min(bounds.yMin, byMin)
+        : bounds.yMin;
+    const maxY =
+      Number.isFinite(byMin) && Number.isFinite(byMax)
+        ? Math.max(bounds.yMax, byMax)
+        : bounds.yMax;
+
+    return {minX, maxX, minY, maxY};
+  }
+
+  private _createLineSegments(
+    data: readonly DatumT[],
+    direction: 'horizontal' | 'vertical',
+    bounds: {minX: number; maxX: number; minY: number; maxY: number}
+  ): Array<{
+    sourcePosition: [number, number];
+    targetPosition: [number, number];
+    datum: DatumT;
+  }> {
+    const segments: Array<{
+      sourcePosition: [number, number];
+      targetPosition: [number, number];
+      datum: DatumT;
+    }> = [];
+
+    const isHorizontal = direction === 'horizontal';
+    for (const datum of data) {
+      const position = isHorizontal ? datum.yPosition : datum.xPosition;
+      if (typeof position === 'number' && Number.isFinite(position)) {
+        if (isHorizontal) {
+          segments.push({
+            sourcePosition: [bounds.minX, position],
+            targetPosition: [bounds.maxX, position],
+            datum
+          });
+        } else {
+          segments.push({
+            sourcePosition: [position, bounds.minY],
+            targetPosition: [position, bounds.maxY],
+            datum
+          });
+        }
+      }
+    }
+
+    return segments;
+  }
+
+  private _createLabelData(
+    lines: Array<{
+      sourcePosition: [number, number];
+      targetPosition: [number, number];
+      datum: DatumT;
+    }>,
+    direction: 'horizontal' | 'vertical',
+    bounds: {minX: number; maxX: number; minY: number; maxY: number},
+    getLabel?: (datum: DatumT) => string | number | null | undefined
+  ): Array<{position: [number, number]; text: string; datum: DatumT}> {
+    const labels: Array<{position: [number, number]; text: string; datum: DatumT}> = [];
+    const isHorizontal = direction === 'horizontal';
+
+    for (const {datum, sourcePosition} of lines) {
+      const rawLabel = getLabel ? getLabel(datum) : datum.label ?? null;
+      if (rawLabel !== null && rawLabel !== undefined && rawLabel !== '') {
+        const [sx, sy] = sourcePosition;
+        const position: [number, number] = isHorizontal
+          ? [bounds.minX, sy]
+          : [sx, bounds.minY];
+        labels.push({position, text: String(rawLabel), datum});
+      }
+    }
+
+    return labels;
+  }
+}

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

@@ -4,16 +4,19 @@
 
 import type {InteractionManager} from '../core/interaction-manager';
 import type {GraphEngine} from '../core/graph-engine';
-import type {Node} from '../graph/node';
+import type {NodeInterface} from '../graph/graph';
 
-import {GraphStyleEngine, type GraphStylesheet} from '../style/graph-style-engine';
+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: Node) => number) | number | null | undefined;
+type NumericAccessor = ((node: NodeInterface) => number) | number | null | undefined;
 type OffsetAccessor =
-  | ((node: Node) => [number, number])
+  | ((node: NodeInterface) => [number, number])
   | [number, number]
   | null
   | undefined;
@@ -36,7 +39,7 @@ const GEOMETRY_NODE_TYPES: GeometryNodeType[] = [
   'marker'
 ];
 
-function evaluateNumericAccessor(accessor: NumericAccessor, node: Node): number | undefined {
+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;
@@ -47,7 +50,7 @@ function evaluateNumericAccessor(accessor: NumericAccessor, node: Node): number
   return undefined;
 }
 
-function evaluateOffsetAccessor(accessor: OffsetAccessor, node: Node): [number, number] {
+function evaluateOffsetAccessor(accessor: OffsetAccessor, node: NodeInterface): [number, number] {
   if (!accessor) {
     return [0, 0];
   }
@@ -85,7 +88,7 @@ function normalizePosition(value: any): [number, number] | null {
   return null;
 }
 
-function resolveAccessorValue(accessor: NumericAccessor | undefined, node: Node) {
+function resolveAccessorValue(accessor: NumericAccessor | undefined, node: NodeInterface) {
   if (!accessor) {
     return undefined;
   }
@@ -103,7 +106,7 @@ function assignDimension(
 }
 
 function assignRectangleDimensions(
-  node: Node,
+  node: NodeInterface,
   accessors: NodeStyleAccessors,
   geometry: NodeGeometry
 ) {
@@ -113,7 +116,7 @@ function assignRectangleDimensions(
 
 const GEOMETRY_APPLIERS: Record<
   GeometryNodeType,
-  (node: Node, accessors: NodeStyleAccessors, geometry: NodeGeometry) => void
+  (node: NodeInterface, accessors: NodeStyleAccessors, geometry: NodeGeometry) => void
 > = {
   circle: (node, accessors, geometry) => {
     assignDimension(geometry, 'radius', resolveAccessorValue(accessors.getRadius, node));
@@ -158,7 +161,10 @@ export class EdgeAttachmentHelper {
 
     const nodeMap = engine
       .getNodes()
-      .reduce((acc, node) => acc.set(node.getId(), node), new Map<string | number, Node>());
+      .reduce(
+        (acc, node) => acc.set(node.getId(), node),
+        new Map<string | number, NodeInterface>()
+      );
 
     return (edge: any) =>
       this._getAdjustedEdgeLayout(engine, nodeAccessorMap, nodeMap, edge);
@@ -191,9 +197,9 @@ export class EdgeAttachmentHelper {
           return;
         }
 
-        let stylesheet: GraphStyleEngine | null = null;
+        let stylesheet: GraphStylesheetEngine | null = null;
         try {
-          stylesheet = new GraphStyleEngine(restStyle as GraphStylesheet, {
+          stylesheet = engine.createStylesheetEngine(restStyle as GraphStylesheet, {
             stateUpdateTrigger: (interactionManager as any).getLastInteraction()
           });
         } catch (error) {
@@ -213,7 +219,7 @@ export class EdgeAttachmentHelper {
         const geometryType = type as GeometryNodeType;
         const accessors = this._createAccessorsForType(geometryType, stylesheet);
 
-        nodes.forEach((node: Node) => {
+        nodes.forEach((node: NodeInterface) => {
           const id = node.getId();
           if (!nodeAccessorMap.has(id)) {
             nodeAccessorMap.set(id, accessors);
@@ -227,7 +233,7 @@ export class EdgeAttachmentHelper {
   private _getAdjustedEdgeLayout(
     engine: GraphEngine,
     nodeAccessorMap: Map<string | number, NodeStyleAccessors>,
-    nodeMap: Map<string | number, Node>,
+    nodeMap: Map<string | number, NodeInterface>,
     edge: any
   ) {
     const layoutInfo = engine.getEdgePosition(edge);
@@ -287,7 +293,7 @@ export class EdgeAttachmentHelper {
 
   private _createAccessorsForType(
     geometryType: GeometryNodeType,
-    stylesheet: GraphStyleEngine
+    stylesheet: GraphStylesheetEngine
   ): NodeStyleAccessors {
     const base: NodeStyleAccessors = {
       type: geometryType,
@@ -325,7 +331,7 @@ export class EdgeAttachmentHelper {
 
   private _computeNodeGeometry(
     engine: GraphEngine,
-    node: Node,
+    node: NodeInterface,
     accessors?: NodeStyleAccessors
   ): NodeGeometry | null {
     const basePosition = engine.getNodePosition(node);