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

package/src/style/graph-layer-stylesheet.ts

@@ -0,0 +1,99 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {GraphStylesheet, GraphStyleType} from './graph-style-engine';
+
+export type GraphNodeStyleType = Exclude<
+  GraphStyleType,
+  'Edge' | 'edge' | 'edge-label' | 'flow' | 'arrow'
+>;
+
+export type GraphEdgeDecoratorType = Extract<GraphStyleType, 'edge-label' | 'flow' | 'arrow'>;
+
+export type GraphLayerNodeStyle = GraphStylesheet<GraphNodeStyleType> & {
+  pickable?: boolean;
+  visible?: boolean;
+  data?: (nodes: any[]) => any;
+};
+
+export type GraphLayerEdgeDecoratorStyle = GraphStylesheet<GraphEdgeDecoratorType>;
+
+type EdgeStyleType = Extract<GraphStyleType, 'Edge' | 'edge'>;
+
+export type GraphLayerEdgeStyle = (
+  | GraphStylesheet<EdgeStyleType>
+  | (Omit<GraphStylesheet<EdgeStyleType>, 'type'> & {type?: EdgeStyleType})
+) & {
+  decorators?: GraphLayerEdgeDecoratorStyle[];
+  data?: (edges: any[]) => any;
+  visible?: boolean;
+};
+
+export type GraphLayerStylesheet = {
+  nodes?: GraphLayerNodeStyle[];
+  edges?: GraphLayerEdgeStyle | GraphLayerEdgeStyle[];
+};
+
+export type GraphLayerStylesheetInput = GraphLayerStylesheet | null | undefined;
+
+export type NormalizedGraphLayerStylesheet = {
+  nodes: GraphLayerNodeStyle[];
+  edges: GraphLayerEdgeStyle[];
+};
+
+const DEFAULT_EDGE_STYLE: GraphLayerEdgeStyle = {
+  type: 'edge',
+  stroke: 'black',
+  strokeWidth: 1,
+  decorators: []
+};
+
+export const DEFAULT_GRAPH_LAYER_STYLESHEET: NormalizedGraphLayerStylesheet = {
+  nodes: [],
+  edges: [DEFAULT_EDGE_STYLE]
+};
+
+export type GraphLayerStylesheetSources = {
+  stylesheet?: GraphLayerStylesheetInput;
+  nodeStyle?: GraphLayerNodeStyle[];
+  edgeStyle?: GraphLayerEdgeStyle | GraphLayerEdgeStyle[];
+};
+
+export function normalizeGraphLayerStylesheet({
+  stylesheet,
+  nodeStyle,
+  edgeStyle
+}: GraphLayerStylesheetSources): NormalizedGraphLayerStylesheet {
+  const resolvedStylesheet = stylesheet ?? {};
+  const resolvedNodeStyles = Array.isArray(resolvedStylesheet.nodes)
+    ? resolvedStylesheet.nodes
+    : nodeStyle;
+
+  const resolvedEdgeStyles = resolvedStylesheet.edges ?? edgeStyle;
+
+  const nodes = Array.isArray(resolvedNodeStyles)
+    ? resolvedNodeStyles.filter(Boolean)
+    : [...DEFAULT_GRAPH_LAYER_STYLESHEET.nodes];
+
+  const edgeEntries = Array.isArray(resolvedEdgeStyles)
+    ? resolvedEdgeStyles
+    : resolvedEdgeStyles
+    ? [resolvedEdgeStyles]
+    : DEFAULT_GRAPH_LAYER_STYLESHEET.edges;
+
+  const edges: GraphLayerEdgeStyle[] = (edgeEntries)
+    .filter(Boolean)
+    .map((edgeStyleEntry) => ({
+      ...edgeStyleEntry,
+      type: ((edgeStyleEntry).type ?? 'edge'),
+      decorators: (edgeStyleEntry).decorators ?? []
+    })) as GraphLayerEdgeStyle[];
+
+  return {
+    nodes,
+    edges
+  };
+}
+
+export type {GraphStyleValue, GraphStylesheet, GraphStyleType} from './graph-style-engine';

package/src/style/graph-style-accessor-map.ts

@@ -0,0 +1,103 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+const COMMON_DECKGL_PROPS = {
+  getOffset: 'offset',
+  opacity: 'opacity'
+} as const;
+
+export const GRAPH_DECKGL_ACCESSOR_MAP = {
+  circle: {
+    ...COMMON_DECKGL_PROPS,
+    getFillColor: 'fill',
+    getLineColor: 'stroke',
+    getLineWidth: 'strokeWidth',
+    getRadius: 'radius'
+  },
+
+  rectangle: {
+    ...COMMON_DECKGL_PROPS,
+    getWidth: 'width',
+    getHeight: 'height',
+    getFillColor: 'fill',
+    getLineColor: 'stroke',
+    getLineWidth: 'strokeWidth'
+  },
+
+  'rounded-rectangle': {
+    ...COMMON_DECKGL_PROPS,
+    getCornerRadius: 'cornerRadius',
+    getRadius: 'radius',
+    getWidth: 'width',
+    getHeight: 'height',
+    getFillColor: 'fill',
+    getLineColor: 'stroke',
+    getLineWidth: 'strokeWidth'
+  },
+
+  'path-rounded-rectangle': {
+    ...COMMON_DECKGL_PROPS,
+    getWidth: 'width',
+    getHeight: 'height',
+    getFillColor: 'fill',
+    getLineColor: 'stroke',
+    getLineWidth: 'strokeWidth',
+    getCornerRadius: 'cornerRadius'
+  },
+
+  label: {
+    ...COMMON_DECKGL_PROPS,
+    getColor: 'color',
+    getText: 'text',
+    getSize: 'fontSize',
+    getTextAnchor: 'textAnchor',
+    getAlignmentBaseline: 'alignmentBaseline',
+    getAngle: 'angle',
+    scaleWithZoom: 'scaleWithZoom',
+    textMaxWidth: 'textMaxWidth',
+    textWordBreak: 'textWordBreak',
+    textSizeMinPixels: 'textSizeMinPixels'
+  },
+
+  marker: {
+    ...COMMON_DECKGL_PROPS,
+    getColor: 'fill',
+    getSize: 'size',
+    getMarker: 'marker',
+    scaleWithZoom: 'scaleWithZoom'
+  },
+
+  Edge: {
+    getColor: 'stroke',
+    getWidth: 'strokeWidth'
+  },
+  edge: {
+    getColor: 'stroke',
+    getWidth: 'strokeWidth'
+  },
+  'edge-label': {
+    getColor: 'color',
+    getText: 'text',
+    getSize: 'fontSize',
+    getTextAnchor: 'textAnchor',
+    getAlignmentBaseline: 'alignmentBaseline',
+    scaleWithZoom: 'scaleWithZoom',
+    textMaxWidth: 'textMaxWidth',
+    textWordBreak: 'textWordBreak',
+    textSizeMinPixels: 'textSizeMinPixels'
+  },
+  flow: {
+    getColor: 'color',
+    getWidth: 'width',
+    getSpeed: 'speed',
+    getTailLength: 'tailLength'
+  },
+  arrow: {
+    getColor: 'color',
+    getSize: 'size',
+    getOffset: 'offset'
+  }
+} as const;
+
+export type GraphDeckGLAccessorMap = typeof GRAPH_DECKGL_ACCESSOR_MAP;

package/src/style/graph-style-engine.ts

@@ -0,0 +1,229 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+/* eslint-disable no-continue */  
+
+import {ZodError, type ZodIssue} from 'zod';
+
+import {StyleEngine, type DeckGLUpdateTriggers} from './style-engine';
+import {
+  GraphStylesheetSchema,
+  type GraphStylesheet,
+  type GraphStylesheetParsed
+} from './graph-stylesheet.schema';
+import {GRAPH_DECKGL_ACCESSOR_MAP} from './graph-style-accessor-map';
+import {warn} from '../utils/log';
+
+const GRAPH_DECKGL_UPDATE_TRIGGERS: DeckGLUpdateTriggers = {
+  circle: ['getFillColor', 'getRadius', 'getLineColor', 'getLineWidth'],
+  rectangle: ['getFillColor', 'getLineColor', 'getLineWidth'],
+  'rounded-rectangle': ['getFillColor', 'getLineColor', 'getLineWidth', 'getCornerRadius'],
+  'path-rounded-rectangle': ['getFillColor', 'getLineColor', 'getLineWidth', 'getCornerRadius'],
+  label: ['getColor', 'getText', 'getSize', 'getTextAnchor', 'getAlignmentBaseline', 'getAngle'],
+  marker: ['getColor', 'getSize', 'getMarker'],
+  Edge: ['getColor', 'getWidth'],
+  edge: ['getColor', 'getWidth'],
+  'edge-label': ['getColor', 'getText', 'getSize', 'getTextAnchor', 'getAlignmentBaseline'],
+  flow: ['getColor', 'getWidth', 'getSpeed', 'getTailLength'],
+  arrow: ['getColor', 'getSize', 'getOffset']
+};
+
+function formatStylesheetError(error: ZodError) {
+  const details = error.issues
+    .map((issue) => {
+      const path = issue.path.length ? issue.path.join('.') : 'root';
+      return `  • ${path}: ${issue.message}`;
+    })
+    .join('\n');
+  return `Invalid graph stylesheet:\n${details}`;
+}
+
+export class GraphStyleEngine extends StyleEngine {
+  constructor(style: GraphStylesheet, {stateUpdateTrigger}: {stateUpdateTrigger?: unknown} = {}) {
+    const result = GraphStylesheetSchema.safeParse(style);
+    const parsedStyle = result.success
+      ? result.data
+      : sanitizeStylesheet(style, result.error.issues);
+
+    super(parsedStyle as GraphStylesheet, {
+      deckglAccessorMap: GRAPH_DECKGL_ACCESSOR_MAP,
+      deckglUpdateTriggers: GRAPH_DECKGL_UPDATE_TRIGGERS,
+      stateUpdateTrigger
+    });
+  }
+}
+
+export {
+  GraphStyleScaleTypeEnum,
+  GraphStyleScaleSchema,
+  GraphStyleAttributeReferenceSchema,
+  GraphStyleLeafValueSchema,
+  GraphStyleStateMapSchema,
+  GraphStyleValueSchema,
+  GraphStylesheetSchema
+} from './graph-stylesheet.schema';
+
+export type {
+  GraphStylesheet,
+  GraphStylesheetInput,
+  GraphStylesheetParsed,
+  GraphStyleSelector,
+  GraphStyleType,
+  GraphStyleAttributeReference,
+  GraphStyleLeafValue,
+  GraphStyleScale,
+  GraphStyleScaleType,
+  GraphStyleValue
+} from './graph-stylesheet.schema';
+
+export {GRAPH_DECKGL_ACCESSOR_MAP} from './graph-style-accessor-map';
+
+// eslint-disable-next-line max-statements, complexity
+function sanitizeStylesheet(style: GraphStylesheet, issues: ZodIssue[]): GraphStylesheetParsed {
+  if (issues.length) {
+    const details = issues
+      .map((issue) => {
+        const path = issue.path.length ? issue.path.join('.') : 'root';
+        return `${path}: ${issue.message}`;
+      })
+      .join('\n  • ');
+    warn(`GraphStyleEngine: stylesheet issues detected:\n  • ${details}`);
+  }
+
+  const fallbackTypeCandidate =
+    typeof (style as {type?: unknown}).type === 'string' ? (style as {type: string}).type : undefined;
+  const fallbackCandidates = Array.from(
+    new Set(
+      [fallbackTypeCandidate, 'edge'].filter(
+        (value): value is string => typeof value === 'string' && value.length > 0
+      )
+    )
+  );
+
+  for (const candidate of fallbackCandidates) {
+    const sanitized = cloneValue(style) as Record<string, unknown>;
+    sanitized.type = candidate;
+
+    for (const issue of issues) {
+      if (!Array.isArray(issue.path) || issue.path.length === 0) {
+        continue;
+      }
+
+      const path = issue.path.filter(
+        (segment): segment is string | number =>
+          typeof segment === 'string' || typeof segment === 'number'
+      );
+
+      if (path.length === 0) {
+        continue;
+      }
+
+      const [rootKey] = path;
+      if (rootKey === undefined || rootKey === 'type') {
+        continue;
+      }
+    
+      if (typeof rootKey === 'string' && rootKey.startsWith(':')) {
+        removeNestedProperty(sanitized, path);
+        continue;
+      }
+
+      if (typeof rootKey !== 'string') {
+        continue;
+      }
+
+      delete sanitized[rootKey];
+    }
+
+    const result = GraphStylesheetSchema.safeParse(sanitized);
+    if (result.success) {
+      return result.data;
+    }
+  }
+
+  // If every fallback failed, rethrow the detailed error so callers know parsing was impossible.
+  throw new Error(formatStylesheetError(new ZodError(issues)));
+}
+
+function cloneValue<T>(value: T): T {
+  if (Array.isArray(value)) {
+    return value.map((item) => cloneValue(item)) as unknown as T;
+  }
+  if (value && typeof value === 'object') {
+    if (value instanceof Date) {
+      return new Date(value) as unknown as T;
+    }
+    if (value instanceof RegExp) {
+      return new RegExp(value.source, value.flags) as unknown as T;
+    }
+    const cloned: Record<string, unknown> = {};
+    for (const [key, entryValue] of Object.entries(value as Record<string, unknown>)) {
+      cloned[key] = cloneValue(entryValue);
+    }
+    return cloned as unknown as T;
+  }
+  return value;
+}
+
+// eslint-disable-next-line max-statements, complexity
+function removeNestedProperty(target: Record<string, unknown> | unknown[], path: (string | number)[]) {
+  if (path.length === 0) {
+    return;
+  }
+
+  const [head, ...rest] = path;
+  if (head === undefined) {
+    return;
+  }
+
+  if (Array.isArray(target)) {
+    const index = typeof head === 'number' ? head : Number(head);
+    if (!Number.isInteger(index) || index < 0 || index >= target.length) {
+      return;
+    }
+    if (rest.length === 0) {
+      target.splice(index, 1);
+      return;
+    }
+    const child = target[index];
+    if (!child || typeof child !== 'object') {
+      target.splice(index, 1);
+      return;
+    }
+    removeNestedProperty(child as Record<string, unknown> | unknown[], rest);
+    if (isEmptyObject(child)) {
+      target.splice(index, 1);
+    }
+    return;
+  }
+
+  const recordTarget = target;
+
+  if (rest.length === 0) {
+    delete recordTarget[head as keyof typeof recordTarget];
+    return;
+  }
+
+  const child = recordTarget[head as keyof typeof recordTarget];
+  if (!child || typeof child !== 'object') {
+    delete recordTarget[head as keyof typeof recordTarget];
+    return;
+  }
+
+  removeNestedProperty(child as Record<string, unknown> | unknown[], rest);
+
+  if (isEmptyObject(child)) {
+    delete recordTarget[head as keyof typeof recordTarget];
+  }
+}
+
+function isEmptyObject(value: unknown): boolean {
+  if (Array.isArray(value)) {
+    return value.length === 0;
+  }
+  if (!value || typeof value !== 'object') {
+    return false;
+  }
+  return Object.keys(value as Record<string, unknown>).length === 0;
+}