@cosmos.gl/graph 2.6.2-rc.0 → 2.6.3

package/dist/{config.d.ts → src/config.d.ts}

@@ -58,6 +58,8 @@ export interface GraphConfigInterface {
      * if the size value in the array is `undefined` or `null`.
      * Default value: `4`
     */
+    pointDefaultSize?: number;
+    /** @deprecated Use `pointDefaultSize` instead */
     pointSize?: number;
     /**
      * Universal opacity value applied to all points.
@@ -135,6 +137,8 @@ export interface GraphConfigInterface {
      * The default width value to use for links when no link widths are provided or if the width value in the array is `undefined` or `null`.
      * Default value: `1`
     */
+    linkDefaultWidth?: number;
+    /** @deprecated Use `linkDefaultWidth` instead */
     linkWidth?: number;
     /**
      * The color to use for links when they are hovered.
@@ -185,6 +189,8 @@ export interface GraphConfigInterface {
      * The default link arrow value that controls whether or not to display link arrows.
      * Default value: `false`
      */
+    linkDefaultArrows?: boolean;
+    /** @deprecated Use `linkDefaultArrows` instead */
     linkArrows?: boolean;
     /**
      * Scale factor for the link arrows size.
@@ -207,13 +213,6 @@ export interface GraphConfigInterface {
      * Default value: `0.25`
      */
     linkVisibilityMinTransparency?: number;
-    /**
-     * Use the classic quadtree algorithm for the Many-Body force.
-     * This property will be applied only on component initialization and it
-     * can't be changed using the `setConfig` method.
-     * Default value: `false`
-     */
-    useClassicQuadtree?: boolean;
     /**
      * Decay coefficient. Use smaller values if you want the simulation to "cool down" slower.
      * Default value: `5000`
@@ -236,16 +235,9 @@ export interface GraphConfigInterface {
     simulationRepulsion?: number;
     /**
      * Decreases / increases the detalization of the Many-Body force calculations.
-     * When `useClassicQuadtree` is set to `true`, this property corresponds to the Barnes–Hut approximation criterion.
      * Default value: `1.15`
      */
     simulationRepulsionTheta?: number;
-    /**
-     * Barnes–Hut approximation depth.
-     * Can only be used when `useClassicQuadtree` is set `true`.
-     * Default value: `12`
-     */
-    simulationRepulsionQuadtreeLevels?: number;
     /**
      * Link spring force coefficient.
      * Default value: `1`
@@ -441,8 +433,8 @@ export interface GraphConfigInterface {
      */
     showFPSMonitor?: boolean;
     /**
-     * Canvas pixel ratio.
-     * Default value: `2`
+     * Pixel ratio for the canvas. Higher values use more GPU memory but provide better quality on high-DPI displays.
+     * Default value: `window.devicePixelRatio || 2`
      */
     pixelRatio?: number;
     /**
@@ -553,6 +545,7 @@ export declare class GraphConfig implements GraphConfigInterface {
     pointGreyoutOpacity: undefined;
     pointGreyoutColor: undefined;
     pointSize: number;
+    pointDefaultSize: undefined;
     pointOpacity: number;
     pointSizeScale: number;
     hoveredPointCursor: string;
@@ -566,6 +559,7 @@ export declare class GraphConfig implements GraphConfigInterface {
     linkOpacity: number;
     linkGreyoutOpacity: number;
     linkWidth: number;
+    linkDefaultWidth: undefined;
     linkWidthScale: number;
     hoveredLinkColor: undefined;
     hoveredLinkWidthIncrease: number;
@@ -575,17 +569,16 @@ export declare class GraphConfig implements GraphConfigInterface {
     curvedLinkWeight: number;
     curvedLinkControlPointDistance: number;
     linkArrows: boolean;
+    linkDefaultArrows: undefined;
     linkArrowsSizeScale: number;
     scaleLinksOnZoom: boolean;
     linkVisibilityDistanceRange: number[];
     linkVisibilityMinTransparency: number;
-    useClassicQuadtree: boolean;
     simulationDecay: number;
     simulationGravity: number;
     simulationCenter: number;
     simulationRepulsion: number;
     simulationRepulsionTheta: number;
-    simulationRepulsionQuadtreeLevels: number;
     simulationLinkSpring: number;
     simulationLinkDistance: number;
     simulationLinkDistRandomVariationRange: number[];

package/dist/{graph → src/graph}/utils/error-message.d.ts

@@ -3,4 +3,4 @@
  * @param container The HTML element to append the error message to
  * @returns The created error div element
  */
-export declare function createWebGLErrorMessage(container: HTMLElement): HTMLDivElement;
+export declare function createWebGLErrorMessage(container: HTMLElement, error: string): HTMLDivElement;

package/dist/src/helper.d.ts

@@ -0,0 +1,61 @@
+import { Device, Framebuffer } from '@luma.gl/core';
+import { default as DOMPurify } from 'dompurify';
+export declare const isFunction: <T>(a: T) => boolean;
+export declare const isArray: <T>(a: unknown | T[]) => a is T[];
+export declare const isObject: <T>(a: T) => boolean;
+export declare const isAClassInstance: <T>(a: T) => boolean;
+export declare const isPlainObject: <T>(a: T) => boolean;
+export declare function getRgbaColor(value: string | [number, number, number, number]): [number, number, number, number];
+export declare function rgbToBrightness(r: number, g: number, b: number): number;
+/**
+ * TODO: Migrate from deprecated `readPixelsToArrayWebGL` to CommandEncoder API
+ *
+ * `readPixelsToArrayWebGL` is deprecated in luma.gl v9. The recommended modern approach is:
+ *
+ * 1. Create a buffer to hold the pixel data:
+ *    const buffer = device.createBuffer({
+ *      byteLength: width * height * 4 * 4, // RGBA, 4 bytes per float
+ *      usage: Buffer.COPY_DST | Buffer.MAP_READ
+ *    });
+ *
+ * 2. Copy texture/framebuffer to buffer using command encoder:
+ *    const commandEncoder = device.createCommandEncoder();
+ *    commandEncoder.copyTextureToBuffer({
+ *      sourceTexture: fbo, // Can be Texture or Framebuffer
+ *      width: sourceWidth ?? fbo.width,
+ *      height: sourceHeight ?? fbo.height,
+ *      origin: [sourceX, sourceY],
+ *      destinationBuffer: buffer
+ *    });
+ *    const commandBuffer = commandEncoder.finish();
+ *    device.submit(commandBuffer);
+ *
+ * 3. Read the data from the buffer (async):
+ *    const pixelData = await buffer.readAsync(); // Returns ArrayBuffer
+ *    return new Float32Array(pixelData);
+ *
+ * Note: The modern approach is asynchronous, so this function signature would need to change
+ * to return Promise<Float32Array> or we'd need to handle async at all call sites (18 locations).
+ *
+ * Migration impact:
+ * - This function is used in 18 places across the codebase
+ * - All call sites would need to be updated to handle async
+ * - Consider batching the migration to avoid inconsistencies
+ *
+ * Current status: Deprecated but still functional. Keeping for now until full migration can be planned.
+ */
+export declare function readPixels(device: Device, fbo: Framebuffer, sourceX?: number, sourceY?: number, sourceWidth?: number, sourceHeight?: number): Float32Array;
+export declare function clamp(num: number, min: number, max: number): number;
+export declare function isNumber(value: number | undefined | null | typeof NaN): boolean;
+/**
+ * Sanitizes HTML content to prevent XSS attacks using DOMPurify
+ *
+ * This function is used internally to sanitize HTML content before setting innerHTML,
+ * such as in attribution text. It uses a safe default configuration that allows
+ * only common safe HTML elements and attributes.
+ *
+ * @param html The HTML string to sanitize
+ * @param options Optional DOMPurify configuration options to override defaults
+ * @returns Sanitized HTML string safe for innerHTML usage
+ */
+export declare function sanitizeHtml(html: string, options?: DOMPurify.Config): string;

package/dist/{index.d.ts → src/index.d.ts}

@@ -1,3 +1,4 @@
+import { Device } from '@luma.gl/core';
 import { GraphConfig, GraphConfigInterface } from './config';
 import { GraphData } from './modules/GraphData';
 export declare class Graph {
@@ -6,7 +7,8 @@ export declare class Graph {
     private canvas;
     private attributionDivElement;
     private canvasD3Selection;
-    private reglInstance;
+    private device;
+    private deviceInitPromise;
     private requestAnimationFrameId;
     private isRightClickMouse;
     private store;
@@ -52,7 +54,7 @@ export declare class Graph {
     private isForceCenterUpdateNeeded;
     private isPointImageSizesUpdateNeeded;
     private _isDestroyed;
-    constructor(div: HTMLDivElement, config?: GraphConfigInterface);
+    constructor(div: HTMLDivElement, config?: GraphConfigInterface, devicePromise?: Promise<Device>);
     /**
      * Returns the current simulation progress
      */
@@ -511,10 +513,31 @@ export declare class Graph {
      */
     pair(pointPositions: number[]): [number, number][];
     /**
-     * Updates and recreates the graph visualization based on pending changes.
-     *
-     * @param simulationAlpha - Optional alpha value to set. If not provided, keeps current alpha.
+     * Ensures device is initialized before executing a method.
+     * If device is not ready, queues the method to run after initialization.
+     * @param callback - Function to execute once device is ready
+     * @returns true if device was not ready and operation was queued, false if device is ready
+     */
+    private ensureDevice;
+    /**
+     * Validates that a device has the required HTMLCanvasElement canvas context.
+     * Cosmos requires an HTMLCanvasElement canvas context and does not support
+     * OffscreenCanvas or compute-only devices.
+     * @param device - The device to validate
+     * @returns The validated canvas context (guaranteed to be non-null and HTMLCanvasElement type)
+     * @throws Error if the device does not meet Cosmos requirements
      */
+    private validateDevice;
+    /**
+     * Internal device creation method
+     * Graph class decides what device to create with sensible defaults
+     */
+    private createDevice;
+    /**
+    * Updates and recreates the graph visualization based on pending changes.
+    *
+    * @param simulationAlpha - Optional alpha value to set. If not provided, keeps current alpha.
+    */
     private update;
     /**
      * Runs one step of the simulation (forces, position updates, alpha decay).

package/dist/{modules → src/modules}/Clusters/index.d.ts

@@ -1,12 +1,8 @@
-import { default as regl } from 'regl';
+import { Framebuffer } from '@luma.gl/core';
 import { CoreModule } from '../core-module';
 export declare class Clusters extends CoreModule {
-    centermassFbo: regl.Framebuffer2D | undefined;
+    centermassFbo: Framebuffer | undefined;
     clusterCount: number | undefined;
-    private clusterFbo;
-    private clusterPositionsFbo;
-    private clusterForceCoefficientFbo;
-    private clearCentermassCommand;
     private calculateCentermassCommand;
     private applyForcesCommand;
     private clusterTexture;
@@ -15,8 +11,19 @@ export declare class Clusters extends CoreModule {
     private centermassTexture;
     private pointIndices;
     private clustersTextureSize;
+    private applyForcesVertexCoordBuffer;
+    private previousPointsTextureSize;
+    private previousClustersTextureSize;
+    private previousClusterCount;
+    private calculateCentermassUniformStore;
+    private applyForcesUniformStore;
     create(): void;
     initPrograms(): void;
     calculateCentermass(): void;
     run(): void;
+    /**
+     * Destruction order matters
+     * Models -> Framebuffers -> Textures -> UniformStores -> Buffers
+     */
+    destroy(): void;
 }

package/dist/{modules → src/modules}/ForceCenter/index.d.ts

@@ -1,12 +1,20 @@
 import { CoreModule } from '../core-module';
 export declare class ForceCenter extends CoreModule {
+    private centermassTexture;
     private centermassFbo;
-    private clearCentermassCommand;
+    private pointIndices;
     private calculateCentermassCommand;
     private runCommand;
-    private centermassTexture;
-    private pointIndices;
+    private forceVertexCoordBuffer;
+    private calculateUniformStore;
+    private forceUniformStore;
+    private previousPointsTextureSize;
     create(): void;
     initPrograms(): void;
     run(): void;
+    /**
+     * Destruction order matters
+     * Models -> Framebuffers -> Textures -> UniformStores -> Buffers
+     */
+    destroy(): void;
 }

package/dist/src/modules/ForceGravity/index.d.ts

@@ -0,0 +1,13 @@
+import { CoreModule } from '../core-module';
+export declare class ForceGravity extends CoreModule {
+    private runCommand;
+    private vertexCoordBuffer;
+    private uniformStore;
+    initPrograms(): void;
+    run(): void;
+    /**
+     * Destruction order matters
+     * Models -> Framebuffers -> Textures -> UniformStores -> Buffers
+     */
+    destroy(): void;
+}

package/dist/{modules → src/modules}/ForceLink/index.d.ts

@@ -4,14 +4,15 @@ export declare enum LinkDirection {
     INCOMING = "incoming"
 }
 export declare class ForceLink extends CoreModule {
-    private linkFirstIndicesAndAmountFbo;
-    private indicesFbo;
-    private biasAndStrengthFbo;
-    private randomDistanceFbo;
     private linkFirstIndicesAndAmount;
     private indices;
     private maxPointDegree;
+    private previousMaxPointDegree;
+    private previousPointsTextureSize;
+    private previousLinksTextureSize;
     private runCommand;
+    private vertexCoordBuffer;
+    private uniformStore;
     private linkFirstIndicesAndAmountTexture;
     private indicesTexture;
     private biasAndStrengthTexture;
@@ -19,4 +20,9 @@ export declare class ForceLink extends CoreModule {
     create(direction: LinkDirection): void;
     initPrograms(): void;
     run(): void;
+    /**
+     * Destruction order matters
+     * Models -> Framebuffers -> Textures -> UniformStores -> Buffers
+     */
+    destroy(): void;
 }

package/dist/src/modules/ForceManyBody/index.d.ts

@@ -0,0 +1,26 @@
+import { CoreModule } from '../core-module';
+export declare class ForceManyBody extends CoreModule {
+    private randomValuesTexture;
+    private pointIndices;
+    private levels;
+    private levelTargets;
+    private calculateLevelsCommand;
+    private forceCommand;
+    private forceFromItsOwnCentermassCommand;
+    private forceVertexCoordBuffer;
+    private calculateLevelsUniformStore;
+    private forceUniformStore;
+    private forceCenterUniformStore;
+    private previousPointsTextureSize;
+    private previousSpaceSize;
+    create(): void;
+    initPrograms(): void;
+    run(): void;
+    /**
+     * Destruction order matters
+     * Models -> Framebuffers -> Textures -> UniformStores -> Buffers
+     */
+    destroy(): void;
+    private drawLevels;
+    private drawForces;
+}

package/dist/src/modules/ForceMouse/index.d.ts

@@ -0,0 +1,13 @@
+import { CoreModule } from '../core-module';
+export declare class ForceMouse extends CoreModule {
+    private runCommand;
+    private vertexCoordBuffer;
+    private uniformStore;
+    initPrograms(): void;
+    run(): void;
+    /**
+     * Destruction order matters
+     * Models -> Framebuffers -> Textures -> UniformStores -> Buffers
+     */
+    destroy(): void;
+}

package/dist/{modules → src/modules}/Lines/index.d.ts

@@ -1,11 +1,12 @@
-import { default as regl } from 'regl';
+import { Framebuffer, RenderPass } from '@luma.gl/core';
 import { CoreModule } from '../core-module';
 export declare class Lines extends CoreModule {
-    linkIndexFbo: regl.Framebuffer2D | undefined;
-    hoveredLineIndexFbo: regl.Framebuffer2D | undefined;
+    linkIndexFbo: Framebuffer | undefined;
+    hoveredLineIndexFbo: Framebuffer | undefined;
     private drawCurveCommand;
     private hoveredLineIndexCommand;
-    private pointsBuffer;
+    private pointABuffer;
+    private pointBBuffer;
     private colorBuffer;
     private widthBuffer;
     private arrowBuffer;
@@ -13,8 +14,13 @@ export declare class Lines extends CoreModule {
     private curveLineBuffer;
     private linkIndexBuffer;
     private quadBuffer;
+    private linkIndexTexture;
+    private hoveredLineIndexTexture;
+    private drawLineUniformStore;
+    private hoveredLineIndexUniformStore;
+    private previousScreenSize;
     initPrograms(): void;
-    draw(): void;
+    draw(renderPass: RenderPass): void;
     updateLinkIndexFbo(): void;
     updatePointsBuffer(): void;
     updateColor(): void;
@@ -22,4 +28,9 @@ export declare class Lines extends CoreModule {
     updateArrow(): void;
     updateCurveLineGeometry(): void;
     findHoveredLine(): void;
+    /**
+     * Destruction order matters
+     * Models -> Framebuffers -> Textures -> UniformStores -> Buffers
+     */
+    destroy(): void;
 }

package/dist/{modules → src/modules}/Points/index.d.ts

@@ -1,26 +1,27 @@
-import { default as regl } from 'regl';
+import { Framebuffer, Texture, RenderPass } from '@luma.gl/core';
 import { CoreModule } from '../core-module';
 export declare class Points extends CoreModule {
-    currentPositionFbo: regl.Framebuffer2D | undefined;
-    previousPositionFbo: regl.Framebuffer2D | undefined;
-    velocityFbo: regl.Framebuffer2D | undefined;
-    selectedFbo: regl.Framebuffer2D | undefined;
-    hoveredFbo: regl.Framebuffer2D | undefined;
-    greyoutStatusFbo: regl.Framebuffer2D | undefined;
+    currentPositionFbo: Framebuffer | undefined;
+    previousPositionFbo: Framebuffer | undefined;
+    velocityFbo: Framebuffer | undefined;
+    selectedFbo: Framebuffer | undefined;
+    hoveredFbo: Framebuffer | undefined;
     scaleX: ((x: number) => number) | undefined;
     scaleY: ((y: number) => number) | undefined;
     shouldSkipRescale: boolean | undefined;
-    imageAtlasTexture: regl.Texture2D | undefined;
+    imageAtlasTexture: Texture | undefined;
     imageCount: number;
+    currentPositionTexture: Texture | undefined;
+    previousPositionTexture: Texture | undefined;
+    velocityTexture: Texture | undefined;
+    greyoutStatusTexture: Texture | undefined;
     private colorBuffer;
-    private sizeFbo;
     private sizeBuffer;
     private shapeBuffer;
     private imageIndicesBuffer;
     private imageSizesBuffer;
     private imageAtlasCoordsTexture;
     private imageAtlasCoordsTextureSize;
-    private trackedIndicesFbo;
     private trackedPositionsFbo;
     private sampledPointsFbo;
     private trackedPositions;
@@ -32,23 +33,33 @@ export declare class Points extends CoreModule {
     private findPointsOnAreaSelectionCommand;
     private findPointsOnPolygonSelectionCommand;
     private findHoveredPointCommand;
-    private clearHoveredFboCommand;
-    private clearSampledPointsFboCommand;
     private fillSampledPointsFboCommand;
     private trackPointsCommand;
+    private updatePositionVertexCoordBuffer;
+    private dragPointVertexCoordBuffer;
+    private findPointsOnAreaSelectionVertexCoordBuffer;
+    private findPointsOnPolygonSelectionVertexCoordBuffer;
+    private drawHighlightedVertexCoordBuffer;
+    private trackPointsVertexCoordBuffer;
     private trackedIndices;
     private selectedTexture;
-    private greyoutStatusTexture;
     private pinnedStatusTexture;
-    private pinnedStatusFbo;
     private sizeTexture;
     private trackedIndicesTexture;
     private polygonPathTexture;
-    private polygonPathFbo;
     private polygonPathLength;
     private drawPointIndices;
     private hoveredPointIndices;
     private sampledPointIndices;
+    private updatePositionUniformStore;
+    private dragPointUniformStore;
+    private drawUniformStore;
+    private findPointsOnAreaSelectionUniformStore;
+    private findPointsOnPolygonSelectionUniformStore;
+    private findHoveredPointUniformStore;
+    private fillSampledPointsUniformStore;
+    private drawHighlightedUniformStore;
+    private trackPointsUniformStore;
     updatePositions(): void;
     initPrograms(): void;
     updateColor(): void;
@@ -61,7 +72,7 @@ export declare class Points extends CoreModule {
     createAtlas(): void;
     updateSampledPointsGrid(): void;
     trackPoints(): void;
-    draw(): void;
+    draw(renderPass: RenderPass): void;
     updatePosition(): void;
     drag(): void;
     findPointsOnAreaSelection(): void;
@@ -84,6 +95,11 @@ export declare class Points extends CoreModule {
         positions: number[];
     };
     getTrackedPositionsArray(): number[];
+    /**
+     * Destruction order matters
+     * Models -> Framebuffers -> Textures -> UniformStores -> Buffers
+     * */
+    destroy(): void;
     private swapFbo;
     private rescaleInitialNodePositions;
 }

package/dist/src/modules/Shared/buffer.d.ts

@@ -0,0 +1 @@
+export declare function createIndexesForBuffer(textureSize: number): Float32Array;

package/dist/src/modules/Shared/texture-utils.d.ts

@@ -0,0 +1,8 @@
+import { TextureFormat } from '@luma.gl/core';
+/**
+ * Calculates bytesPerRow for texture uploads.
+ * @param format - Texture format
+ * @param width - Texture width in pixels
+ * @returns bytesPerRow in bytes
+ */
+export declare function getBytesPerRow(format: TextureFormat, width: number): number;

package/dist/src/modules/Shared/uniform-utils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Validates and normalizes array values to fixed-size tuples for shader uniforms.
+ */
+/**
+ * Ensures a value is a vec2 tuple [number, number].
+ */
+export declare function ensureVec2(arr: number[] | undefined, fallback: [number, number]): [number, number];
+/**
+ * Ensures a value is a vec4 tuple [number, number, number, number].
+ */
+export declare function ensureVec4(arr: number[] | undefined, fallback: [number, number, number, number]): [number, number, number, number];