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

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/common-layers/marker-layer/marker-list.ts

@@ -2,67 +2,65 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-/* eslint-disable */
-export const MarkerList = {
-  'bell-filled': 'bell-filled',
-  bell: 'bell',
-  'bookmark-filled': 'bookmark-filled',
-  bookmark: 'bookmark',
-  'cd-filled': 'cd-filled',
-  cd: 'cd',
-  checkmark: 'checkmark',
-  'circle-check-filled': 'circle-check-filled',
-  'circle-check': 'circle-check',
-  'circle-filled': 'circle-filled',
-  'circle-i-filled': 'circle-i-filled',
-  'circle-i': 'circle-i',
-  'circle-minus-filled': 'circle-minus-filled',
-  'circle-minus': 'circle-minus',
-  'circle-plus-filled': 'circle-plus-filled',
-  'circle-plus': 'circle-plus',
-  'circle-questionmark-filled': 'circle-questionmark-filled',
-  'circle-questionmark': 'circle-questionmark',
-  'circle-slash-filled': 'circle-slash-filled',
-  'circle-slash': 'circle-slash',
-  'circle-x-filled': 'circle-x-filled',
-  'circle-x': 'circle-x',
-  circle: 'circle',
-  'diamond-filled': 'diamond-filled',
-  diamond: 'diamond',
-  'flag-filled': 'flag-filled',
-  flag: 'flag',
-  gear: 'gear',
-  'heart-filled': 'heart-filled',
-  heart: 'heart',
-  'location-marker-filled': 'location-marker-filled',
-  'location-marker': 'location-marker',
-  'octagonal-star-filled': 'octagonal-star-filled',
-  'octagonal-star': 'octagonal-star',
-  'person-filled': 'person-filled',
-  person: 'person',
-  'pin-filled': 'pin-filled',
-  pin: 'pin',
-  'plus-small': 'plus-small',
-  plus: 'plus',
-  'rectangle-filled': 'rectangle-filled',
-  rectangle: 'rectangle',
-  'star-filled': 'star-filled',
-  star: 'star',
-  'tag-filled': 'tag-filled',
-  tag: 'tag',
-  'thumb-down-filled': 'thumb-down-filled',
-  'thumb-down': 'thumb-down',
-  'thumb-up': 'thumb-up',
-  'thumb_up-filled': 'thumb_up-filled',
-  'triangle-down-filled': 'triangle-down-filled',
-  'triangle-down': 'triangle-down',
-  'triangle-left-filled': 'triangle-left-filled',
-  'triangle-left': 'triangle-left',
-  'triangle-right-filled': 'triangle-right-filled',
-  'triangle-right': 'triangle-right',
-  'triangle-up-filled': 'triangle-up-filled',
-  'triangle-up': 'triangle-up',
-  'x-small': 'x-small',
-  x: 'x'
-};
-/* eslint-enable */
+/** Supported marker types */
+export type Marker =
+  | 'bell-filled'
+  | 'bell'
+  | 'bookmark-filled'
+  | 'bookmark'
+  | 'cd-filled'
+  | 'cd'
+  | 'checkmark'
+  | 'circle-check-filled'
+  | 'circle-check'
+  | 'circle-filled'
+  | 'circle-i-filled'
+  | 'circle-i'
+  | 'circle-minus-filled'
+  | 'circle-minus'
+  | 'circle-plus-filled'
+  | 'circle-plus'
+  | 'circle-questionmark-filled'
+  | 'circle-questionmark'
+  | 'circle-slash-filled'
+  | 'circle-slash'
+  | 'circle-x-filled'
+  | 'circle-x'
+  | 'circle'
+  | 'diamond-filled'
+  | 'diamond'
+  | 'flag-filled'
+  | 'flag'
+  | 'gear'
+  | 'heart-filled'
+  | 'heart'
+  | 'location-marker-filled'
+  | 'location-marker'
+  | 'octagonal-star-filled'
+  | 'octagonal-star'
+  | 'person-filled'
+  | 'person'
+  | 'pin-filled'
+  | 'pin'
+  | 'plus-small'
+  | 'plus'
+  | 'rectangle-filled'
+  | 'rectangle'
+  | 'star-filled'
+  | 'star'
+  | 'tag-filled'
+  | 'tag'
+  | 'thumb-down-filled'
+  | 'thumb-down'
+  | 'thumb-up'
+  | 'thumb_up-filled'
+  | 'triangle-down-filled'
+  | 'triangle-down'
+  | 'triangle-left-filled'
+  | 'triangle-left'
+  | 'triangle-right-filled'
+  | 'triangle-right'
+  | 'triangle-up-filled'
+  | 'triangle-up'
+  | 'x-small'
+  | 'x';