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

package/src/utils/collapsed-chains.ts

@@ -0,0 +1,255 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {GraphEngine} from '../core/graph-engine';
+import type {NodeInterface} from '../graph/graph';
+
+const OUTLINE_PADDING = 24;
+const OUTLINE_CORNER_RADIUS = 16;
+const OUTLINE_CORNER_SEGMENTS = 6;
+
+export type ChainInteractionSource =
+  | 'node'
+  | 'collapsed-marker'
+  | 'expanded-marker'
+  | 'collapsed-outline'
+  | 'expanded-outline';
+
+function resolveLayerId(layer: any): string {
+  if (!layer) {
+    return '';
+  }
+  if (typeof layer.id === 'string') {
+    return layer.id;
+  }
+  if (typeof layer.props?.id === 'string') {
+    return layer.props.id;
+  }
+  return '';
+}
+
+function classifyChainLayer(layer: any): ChainInteractionSource | null {
+  let current = layer ?? null;
+  while (current) {
+    const layerId = resolveLayerId(current);
+    if (layerId.includes('collapsed-chain-markers')) {
+      return 'collapsed-marker';
+    }
+    if (layerId.includes('expanded-chain-markers')) {
+      return 'expanded-marker';
+    }
+    if (layerId.includes('collapsed-chain-outlines')) {
+      return 'collapsed-outline';
+    }
+    if (layerId.includes('expanded-chain-outlines')) {
+      return 'expanded-outline';
+    }
+    current = current.parent ?? null;
+  }
+  return null;
+}
+
+export function resolveChainInteractionSource(info: any): ChainInteractionSource {
+  if (!info) {
+    return 'node';
+  }
+
+  const layersToCheck = [] as any[];
+  if (info.layer || info.sourceLayer) {
+    if (info.layer) {
+      layersToCheck.push(info.layer);
+    }
+    if (info.sourceLayer && info.sourceLayer !== info.layer) {
+      layersToCheck.push(info.sourceLayer);
+    }
+  } else {
+    layersToCheck.push(info);
+  }
+
+  for (const layer of layersToCheck) {
+    const classification = classifyChainLayer(layer);
+    if (classification) {
+      return classification;
+    }
+  }
+
+  return 'node';
+}
+
+function isChainRepresentative(node: NodeInterface): boolean {
+  const chainId = node.getPropertyValue('collapsedChainId');
+  const nodeIds = node.getPropertyValue('collapsedNodeIds');
+  const representativeId = node.getPropertyValue('collapsedChainRepresentativeId');
+
+  return (
+    Boolean(chainId) &&
+    Array.isArray(nodeIds) &&
+    nodeIds.length > 1 &&
+    representativeId === node.getId()
+  );
+}
+
+export function getRepresentativeNodes(engine: GraphEngine | null | undefined): NodeInterface[] {
+  if (!engine) {
+    return [];
+  }
+
+  return engine.getNodes().filter((node) => isChainRepresentative(node));
+}
+
+export type ChainOutlineGetter = (node: NodeInterface) => [number, number][] | null;
+
+export function createChainOutlineGetter(engine: GraphEngine | null | undefined): ChainOutlineGetter {
+  if (!engine) {
+    return () => null;
+  }
+
+  const cache = new Map<string, [number, number][] | null>();
+
+  // eslint-disable-next-line max-statements, complexity
+  return (node: NodeInterface): [number, number][] | null => {
+    const chainId = node.getPropertyValue('collapsedChainId');
+    if (!chainId) {
+      return null;
+    }
+
+    const cacheKey = String(chainId);
+    if (cache.has(cacheKey)) {
+      return cache.get(cacheKey) ?? null;
+    }
+
+    const collapsedNodeIds = node.getPropertyValue('collapsedNodeIds');
+    if (!Array.isArray(collapsedNodeIds) || collapsedNodeIds.length === 0) {
+      cache.set(cacheKey, null);
+      return null;
+    }
+
+    let minX = Number.POSITIVE_INFINITY;
+    let maxX = Number.NEGATIVE_INFINITY;
+    let minY = Number.POSITIVE_INFINITY;
+    let maxY = Number.NEGATIVE_INFINITY;
+
+    for (const nodeId of collapsedNodeIds) {
+      const chainNode = engine.findNode(nodeId);
+      if (chainNode) {
+        const position = engine.getNodePosition(chainNode);
+        if (position) {
+          const [x, y] = position;
+          minX = Math.min(minX, x);
+          maxX = Math.max(maxX, x);
+          minY = Math.min(minY, y);
+          maxY = Math.max(maxY, y);
+        }
+      }
+    }
+
+    if (
+      !Number.isFinite(minX) ||
+      !Number.isFinite(maxX) ||
+      !Number.isFinite(minY) ||
+      !Number.isFinite(maxY)
+    ) {
+      cache.set(cacheKey, null);
+      return null;
+    }
+
+    const paddedMinX = minX - OUTLINE_PADDING;
+    const paddedMaxX = maxX + OUTLINE_PADDING;
+    const paddedMinY = minY - OUTLINE_PADDING;
+    const paddedMaxY = maxY + OUTLINE_PADDING;
+
+    const width = paddedMaxX - paddedMinX;
+    const height = paddedMaxY - paddedMinY;
+
+    if (width <= 0 || height <= 0) {
+      cache.set(cacheKey, null);
+      return null;
+    }
+
+    const radius = Math.min(OUTLINE_CORNER_RADIUS, width / 2, height / 2);
+
+    if (radius <= 0) {
+      const polygon: [number, number][] = [
+        [paddedMinX, paddedMinY],
+        [paddedMinX, paddedMaxY],
+        [paddedMaxX, paddedMaxY],
+        [paddedMaxX, paddedMinY],
+        [paddedMinX, paddedMinY]
+      ];
+      cache.set(cacheKey, polygon);
+      return polygon;
+    }
+
+    const left = paddedMinX;
+    const right = paddedMaxX;
+    const top = paddedMinY;
+    const bottom = paddedMaxY;
+
+    const polygon: [number, number][] = [];
+    const pushArc = (cx: number, cy: number, startAngle: number, endAngle: number) => {
+      const step = (endAngle - startAngle) / OUTLINE_CORNER_SEGMENTS;
+      for (let i = 1; i <= OUTLINE_CORNER_SEGMENTS; i++) {
+        const angle = startAngle + step * i;
+        polygon.push([cx + radius * Math.cos(angle), cy + radius * Math.sin(angle)]);
+      }
+    };
+
+    polygon.push([right - radius, top]);
+    pushArc(right - radius, top + radius, -Math.PI / 2, 0);
+    polygon.push([right, bottom - radius]);
+    pushArc(right - radius, bottom - radius, 0, Math.PI / 2);
+    polygon.push([left + radius, bottom]);
+    pushArc(left + radius, bottom - radius, Math.PI / 2, Math.PI);
+    polygon.push([left, top + radius]);
+    pushArc(left + radius, top + radius, Math.PI, (3 * Math.PI) / 2);
+    polygon.push(polygon[0]);
+
+    cache.set(cacheKey, polygon);
+    return polygon;
+  };
+}
+
+export interface CollapsedChainLayerData {
+  representativeNodes: NodeInterface[];
+  collapsedNodes: NodeInterface[];
+  collapsedOutlineNodes: NodeInterface[];
+  expandedNodes: NodeInterface[];
+  expandedOutlineNodes: NodeInterface[];
+  getChainOutlinePolygon: ChainOutlineGetter;
+  outlineUpdateTrigger: string;
+}
+
+export function buildCollapsedChainLayers(
+  engine: GraphEngine | null | undefined
+): CollapsedChainLayerData | null {
+  if (!engine) {
+    return null;
+  }
+
+  const representativeNodes = getRepresentativeNodes(engine);
+  if (representativeNodes.length === 0) {
+    return null;
+  }
+
+  const getChainOutlinePolygon = createChainOutlineGetter(engine);
+  const outlineUpdateTrigger = [engine.getLayoutLastUpdate(), engine.getLayoutState()].join();
+
+  const collapsedNodes = representativeNodes.filter((node) =>
+    Boolean(node.getPropertyValue('isCollapsedChain'))
+  );
+  const collapsedOutlineNodes = collapsedNodes.filter((node) => getChainOutlinePolygon(node));
+
+  const expandedNodes = representativeNodes.filter((node) => !node.getPropertyValue('isCollapsedChain'));
+  const expandedOutlineNodes = expandedNodes.filter((node) => getChainOutlinePolygon(node));
+
+  return {
+    representativeNodes,
+    collapsedNodes,
+    collapsedOutlineNodes,
+    expandedNodes,
+    expandedOutlineNodes,
+    getChainOutlinePolygon,
+    outlineUpdateTrigger
+  };
+}

package/src/utils/log.ts

@@ -6,4 +6,18 @@ import {Log, COLOR} from '@probe.gl/log';
 
 export const log = new Log({id: 'graph-layers'}).enable();
 
-log.log({color: COLOR.CYAN}, 'Initialize graph-layers logger.')();
+log.log({color: COLOR.CYAN}, 'Initialize graph-layers logger.');
+
+function invokeLogFunction(result: unknown) {
+  if (typeof result === 'function') {
+    result();
+  }
+}
+
+export function warn(message: string, ...args: unknown[]) {
+  invokeLogFunction(log.warn(message, ...args));
+}
+
+export function error(message: string, ...args: unknown[]) {
+  invokeLogFunction(log.error(message, ...args));
+}

package/src/utils/node-boundary.ts

@@ -0,0 +1,238 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export type GeometryNodeType =
+  | 'circle'
+  | 'rectangle'
+  | 'rounded-rectangle'
+  | 'path-rounded-rectangle'
+  | 'marker';
+
+export type NodeGeometry = {
+  type?: GeometryNodeType;
+  center: [number, number];
+  radius?: number;
+  width?: number;
+  height?: number;
+  cornerRadius?: number;
+};
+
+const EPSILON = 1e-6;
+
+function normalizeDirection(
+  center: [number, number],
+  target: [number, number]
+): {unit: [number, number]; distance: number} | null {
+  const dx = target[0] - center[0];
+  const dy = target[1] - center[1];
+  const length = Math.hypot(dx, dy);
+
+  if (length <= EPSILON) {
+    return null;
+  }
+
+  return {unit: [dx / length, dy / length], distance: length};
+}
+
+function projectFromCenter(
+  center: [number, number],
+  unit: [number, number],
+  distance: number
+): [number, number] {
+  return [center[0] + unit[0] * distance, center[1] + unit[1] * distance];
+}
+
+function projectToRectangle(
+  center: [number, number],
+  unit: [number, number],
+  halfWidth: number,
+  halfHeight: number
+): [number, number] {
+  const absUx = Math.abs(unit[0]);
+  const absUy = Math.abs(unit[1]);
+
+  let distance = Number.POSITIVE_INFINITY;
+  if (halfWidth > 0 && absUx > EPSILON) {
+    distance = Math.min(distance, halfWidth / absUx);
+  }
+  if (halfHeight > 0 && absUy > EPSILON) {
+    distance = Math.min(distance, halfHeight / absUy);
+  }
+
+  if (!Number.isFinite(distance)) {
+    return [...center] as [number, number];
+  }
+
+  return [center[0] + unit[0] * distance, center[1] + unit[1] * distance];
+}
+
+function resolveCornerRadius(
+  rawCornerRadius: number | undefined,
+  halfWidth: number,
+  halfHeight: number
+): number {
+  if (!Number.isFinite(rawCornerRadius) || rawCornerRadius <= 0) {
+    return 0;
+  }
+
+  let resolved = rawCornerRadius;
+  if (resolved <= 1) {
+    resolved *= Math.min(halfWidth, halfHeight);
+  }
+
+  return Math.min(resolved, halfWidth, halfHeight);
+}
+
+// eslint-disable-next-line max-params
+function intersectsInnerFaces(
+  absX: number,
+  absY: number,
+  innerHalfWidth: number,
+  innerHalfHeight: number,
+  halfWidth: number,
+  halfHeight: number
+) {
+  const insideVerticalFace = absX <= innerHalfWidth + EPSILON && absY <= halfHeight + EPSILON;
+  const insideHorizontalFace = absY <= innerHalfHeight + EPSILON && absX <= halfWidth + EPSILON;
+  return insideVerticalFace || insideHorizontalFace;
+}
+
+// eslint-disable-next-line max-params  
+function projectToCornerArc(
+  geometry: NodeGeometry,
+  unit: [number, number],
+  innerHalfWidth: number,
+  innerHalfHeight: number,
+  cornerRadius: number,
+  rectanglePoint: [number, number]
+) {
+  const offsetX = rectanglePoint[0] - geometry.center[0];
+  const offsetY = rectanglePoint[1] - geometry.center[1];
+
+  const cornerCenter: [number, number] = [
+    geometry.center[0] + Math.sign(offsetX || unit[0]) * innerHalfWidth,
+    geometry.center[1] + Math.sign(offsetY || unit[1]) * innerHalfHeight
+  ];
+  const relativeCornerCenter: [number, number] = [
+    cornerCenter[0] - geometry.center[0],
+    cornerCenter[1] - geometry.center[1]
+  ];
+
+  const dot = unit[0] * relativeCornerCenter[0] + unit[1] * relativeCornerCenter[1];
+  const centerDistanceSq =
+    relativeCornerCenter[0] * relativeCornerCenter[0] +
+    relativeCornerCenter[1] * relativeCornerCenter[1];
+  const discriminant = dot * dot - (centerDistanceSq - cornerRadius * cornerRadius);
+
+  if (discriminant < 0) {
+    return rectanglePoint;
+  }
+
+  const distance = dot - Math.sqrt(Math.max(0, discriminant));
+  return projectFromCenter(geometry.center, unit, distance);
+}
+
+function computeRectangleIntersection(
+  geometry: NodeGeometry,
+  unit: [number, number]
+): [number, number] {
+  const halfWidth = (geometry.width ?? 0) / 2;
+  const halfHeight = (geometry.height ?? 0) / 2;
+  if (halfWidth <= EPSILON || halfHeight <= EPSILON) {
+    return [...geometry.center];
+  }
+  return projectToRectangle(geometry.center, unit, halfWidth, halfHeight);
+}
+
+// eslint-disable-next-line max-statements, complexity
+function computeRoundedRectangleIntersection(
+  geometry: NodeGeometry,
+  unit: [number, number]
+): [number, number] {
+  const halfWidth = (geometry.width ?? 0) / 2;
+  const halfHeight = (geometry.height ?? 0) / 2;
+
+  if (halfWidth <= EPSILON || halfHeight <= EPSILON) {
+    const radius = geometry.radius ?? Math.min(halfWidth, halfHeight);
+    return projectFromCenter(geometry.center, unit, radius);
+  }
+
+  const cornerRadius = resolveCornerRadius(geometry.cornerRadius, halfWidth, halfHeight);
+
+  if (cornerRadius <= EPSILON) {
+    return projectToRectangle(geometry.center, unit, halfWidth, halfHeight);
+  }
+
+  const innerHalfWidth = Math.max(halfWidth - cornerRadius, 0);
+  const innerHalfHeight = Math.max(halfHeight - cornerRadius, 0);
+
+  if (innerHalfWidth <= EPSILON || innerHalfHeight <= EPSILON) {
+    const radius = Math.min(halfWidth, halfHeight);
+    return projectFromCenter(geometry.center, unit, radius);
+  }
+
+  const rectanglePoint = projectToRectangle(geometry.center, unit, halfWidth, halfHeight);
+  const absX = Math.abs(rectanglePoint[0] - geometry.center[0]);
+  const absY = Math.abs(rectanglePoint[1] - geometry.center[1]);
+
+  const touchesInnerFace =
+    absX <= innerHalfWidth + EPSILON || absY <= innerHalfHeight + EPSILON;
+
+  if (
+    touchesInnerFace &&
+    intersectsInnerFaces(absX, absY, innerHalfWidth, innerHalfHeight, halfWidth, halfHeight)
+  ) {
+    return rectanglePoint;
+  }
+
+  return projectToCornerArc(
+    geometry,
+    unit,
+    innerHalfWidth,
+    innerHalfHeight,
+    cornerRadius,
+    rectanglePoint
+  );
+}
+
+function computeCircleIntersection(
+  geometry: NodeGeometry,
+  unit: [number, number],
+  radius?: number
+) {
+  const effectiveRadius = radius ?? geometry.radius ?? 0;
+  return projectFromCenter(geometry.center, unit, Math.max(effectiveRadius, 0));
+}
+
+const BOUNDARY_COMPUTERS: Record<
+  GeometryNodeType,
+  (geometry: NodeGeometry, unit: [number, number]) => [number, number]
+> = {
+  circle: (geometry, unit) => computeCircleIntersection(geometry, unit),
+  marker: (geometry, unit) => computeCircleIntersection(geometry, unit),
+  rectangle: (geometry, unit) => computeRectangleIntersection(geometry, unit),
+  'rounded-rectangle': (geometry, unit) => computeRoundedRectangleIntersection(geometry, unit),
+  'path-rounded-rectangle': (geometry, unit) => computeRoundedRectangleIntersection(geometry, unit)
+};
+
+export function getNodeBoundaryIntersection(
+  geometry: NodeGeometry,
+  targetCenter: [number, number]
+): [number, number] {
+  const direction = normalizeDirection(geometry.center, targetCenter);
+  if (!direction) {
+    return [...geometry.center];
+  }
+
+  const handler = geometry.type ? BOUNDARY_COMPUTERS[geometry.type] : undefined;
+  if (handler) {
+    return handler(geometry, direction.unit);
+  }
+
+  if (geometry.radius && geometry.radius > EPSILON) {
+    return projectFromCenter(geometry.center, direction.unit, geometry.radius);
+  }
+
+  return [...geometry.center];
+}