@cosmos.gl/graph 2.3.1-beta.1 → 2.4.0

package/dist/modules/GraphData/index.d.ts

@@ -7,13 +7,17 @@ export declare enum PointShape {
     Pentagon = 4,
     Hexagon = 5,
     Star = 6,
-    Cross = 7
+    Cross = 7,
+    None = 8
 }
 export declare class GraphData {
     inputPointPositions: Float32Array | undefined;
     inputPointColors: Float32Array | undefined;
     inputPointSizes: Float32Array | undefined;
     inputPointShapes: Float32Array | undefined;
+    inputImageData: ImageData[] | undefined;
+    inputPointImageIndices: Float32Array | undefined;
+    inputPointImageSizes: Float32Array | undefined;
     inputLinkColors: Float32Array | undefined;
     inputLinkWidths: Float32Array | undefined;
     inputLinkStrength: Float32Array | undefined;
@@ -24,6 +28,8 @@ export declare class GraphData {
     pointColors: Float32Array | undefined;
     pointSizes: Float32Array | undefined;
     pointShapes: Float32Array | undefined;
+    pointImageIndices: Float32Array | undefined;
+    pointImageSizes: Float32Array | undefined;
     inputLinks: Float32Array | undefined;
     links: Float32Array | undefined;
     linkColors: Float32Array | undefined;
@@ -58,9 +64,19 @@ export declare class GraphData {
      */
     updatePointSize(): void;
     /**
-     * Updates the point shapes based on the input data or default shape (Circle).
+     * Updates the point shapes based on the input data or default shape.
+     * Default behavior: Circle (0).
+    * Images are rendered above shapes.
      */
     updatePointShape(): void;
+    /**
+     * Updates the point image indices based on the input data or default value (-1 for no image).
+     */
+    updatePointImageIndices(): void;
+    /**
+     * Updates the point image sizes based on the input data or default to point sizes.
+     */
+    updatePointImageSizes(): void;
     updateLinks(): void;
     /**
      * Updates the link colors based on the input data or default config value.

package/dist/modules/Points/atlas-utils.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Creates a texture atlas from an array of ImageData objects.
+ *
+ * A texture atlas is a single large texture that contains multiple smaller images.
+ * This allows efficient rendering by reducing the number of texture bindings needed.
+ *
+ * The atlas uses a grid layout where each image gets a square region sized to
+ * accommodate the largest image dimension. Images are placed left-to-right, top-to-bottom.
+ *
+ * @param imageDataArray - Array of ImageData objects to pack into the atlas
+ * @param webglMaxTextureSize - WebGL maximum texture size limit (default: 16384)
+ * @returns Atlas data object containing:
+ *   - atlasData: RGBA pixel data as Uint8Array
+ *   - atlasSize: Total atlas texture size in pixels
+ *   - atlasCoords: UV coordinates for each image as Float32Array
+ *   - atlasCoordsSize: Grid size (number of rows/columns)
+ *   Returns null if creation fails or no valid images provided
+ */
+export declare function createAtlasDataFromImageData(imageDataArray: ImageData[], webglMaxTextureSize?: number): {
+    atlasData: Uint8Array;
+    atlasSize: number;
+    atlasCoords: Float32Array;
+    atlasCoordsSize: number;
+} | null;

package/dist/modules/Points/index.d.ts

@@ -9,14 +9,22 @@ export declare class Points extends CoreModule {
     greyoutStatusFbo: regl.Framebuffer2D | undefined;
     scaleX: ((x: number) => number) | undefined;
     scaleY: ((y: number) => number) | undefined;
-    dontRescale: boolean | undefined;
+    shouldSkipRescale: boolean | undefined;
+    imageAtlasTexture: regl.Texture2D | undefined;
+    imageCount: number;
     private colorBuffer;
     private sizeFbo;
     private sizeBuffer;
     private shapeBuffer;
+    private imageIndicesBuffer;
+    private imageSizesBuffer;
+    private imageAtlasCoordsTexture;
+    private imageAtlasCoordsTextureSize;
     private trackedIndicesFbo;
     private trackedPositionsFbo;
     private sampledPointsFbo;
+    private trackedPositions;
+    private isPositionsUpToDate;
     private drawCommand;
     private drawHighlightedCommand;
     private updatePositionCommand;
@@ -45,6 +53,9 @@ export declare class Points extends CoreModule {
     updateGreyoutStatus(): void;
     updateSize(): void;
     updateShape(): void;
+    updateImageIndices(): void;
+    updateImageSizes(): void;
+    createAtlas(): void;
     updateSampledPointsGrid(): void;
     trackPoints(): void;
     draw(): void;
@@ -55,7 +66,15 @@ export declare class Points extends CoreModule {
     updatePolygonPath(polygonPath: [number, number][]): void;
     findHoveredPoint(): void;
     trackPointsByIndices(indices?: number[] | undefined): void;
-    getTrackedPositionsMap(): Map<number, [number, number]>;
+    /**
+     * Get current X and Y coordinates of the tracked points.
+     *
+     * When the simulation is disabled or stopped, this method returns a cached
+     * result to avoid expensive GPU-to-CPU memory transfers (`readPixels`).
+     *
+     * @returns A ReadonlyMap where keys are point indices and values are [x, y] coordinates.
+     */
+    getTrackedPositionsMap(): ReadonlyMap<number, [number, number]>;
     getSampledPointPositionsMap(): Map<number, [number, number]>;
     getSampledPoints(): {
         indices: number[];

package/dist/modules/Store/index.d.ts

@@ -27,10 +27,11 @@ export declare class Store {
     adjustedSpaceSize: number;
     isSpaceKeyPressed: boolean;
     div: HTMLDivElement | undefined;
+    webglMaxTextureSize: number;
     hoveredPointRingColor: number[];
     focusedPointRingColor: number[];
     greyoutPointColor: number[];
-    darkenGreyout: boolean;
+    isDarkenGreyout: boolean;
     private alphaTarget;
     private scalePointX;
     private scalePointY;
@@ -45,6 +46,10 @@ export declare class Store {
      * it reduces the space size without changing the config parameter.
      */
     adjustSpaceSize(configSpaceSize: number, webglMaxTextureSize: number): void;
+    /**
+     * Sets the WebGL texture size limit for use in atlas creation and other texture operations.
+     */
+    setWebGLMaxTextureSize(webglMaxTextureSize: number): void;
     updateScreenSize(width: number, height: number): void;
     scaleX(x: number): number;
     scaleY(y: number): number;

package/dist/stories/create-story.d.ts

@@ -9,4 +9,8 @@ export declare const createStory: (storyFunction: () => {
     graph: Graph;
     div: HTMLDivElement;
     destroy?: () => void;
-}) => Story;
+} | Promise<{
+    graph: Graph;
+    div: HTMLDivElement;
+    destroy?: () => void;
+}>) => Story;

package/dist/stories/shapes/image-example/index.d.ts

@@ -0,0 +1,5 @@
+import { Graph } from '../../..';
+export declare const imageExample: () => Promise<{
+    div: HTMLDivElement;
+    graph: Graph;
+}>;

package/dist/stories/shapes.stories.d.ts

@@ -3,4 +3,5 @@ import { Story } from './create-story';
 import { CosmosStoryProps } from './create-cosmos';
 declare const meta: Meta<CosmosStoryProps>;
 export declare const AllShapes: Story;
+export declare const ImageExample: Story;
 export default meta;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmos.gl/graph",
-  "version": "2.3.1-beta.1",
+  "version": "2.4.0",
   "description": "GPU-based force graph layout and rendering",
   "jsdelivr": "dist/index.min.js",
   "main": "dist/index.js",
@@ -54,11 +54,11 @@
     "@types/d3-transition": "^3.0.1",
     "@types/d3-zoom": "^3.0.1",
     "@types/dompurify": "^3.0.5",
-    "@typescript-eslint/eslint-plugin": "^5.30.5",
-    "@typescript-eslint/parser": "^5.30.5",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "@zerollup/ts-transform-paths": "^1.7.18",
     "d3-scale-chromatic": "^3.1.0",
-    "eslint": "^8.19.0",
+    "eslint": "^8.57.1",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-node": "^11.1.0",

package/src/config.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import { D3ZoomEvent } from 'd3-zoom'
 import { D3DragEvent } from 'd3-drag'
 import {

package/src/declaration.d.ts

@@ -1,5 +1,10 @@
 declare module '*.frag';
 declare module '*.vert';
+declare module '*.png' {
+    const content: string
+    // eslint-disable-next-line import/no-default-export
+    export default content
+}
 declare module '*?raw' {
     const content: string
     // eslint-disable-next-line import/no-default-export

package/src/index.ts

@@ -64,18 +64,20 @@ export class Graph {
   private _isFirstRenderAfterInit = true
   private _fitViewOnInitTimeoutID: number | undefined
 
-  private _needsPointPositionsUpdate = false
-  private _needsPointColorUpdate = false
-  private _needsPointSizeUpdate = false
-  private _needsPointShapeUpdate = false
-  private _needsLinksUpdate = false
-  private _needsLinkColorUpdate = false
-  private _needsLinkWidthUpdate = false
-  private _needsLinkArrowUpdate = false
-  private _needsPointClusterUpdate = false
-  private _needsForceManyBodyUpdate = false
-  private _needsForceLinkUpdate = false
-  private _needsForceCenterUpdate = false
+  private isPointPositionsUpdateNeeded = false
+  private isPointColorUpdateNeeded = false
+  private isPointSizeUpdateNeeded = false
+  private isPointShapeUpdateNeeded = false
+  private isPointImageIndicesUpdateNeeded = false
+  private isLinksUpdateNeeded = false
+  private isLinkColorUpdateNeeded = false
+  private isLinkWidthUpdateNeeded = false
+  private isLinkArrowUpdateNeeded = false
+  private isPointClusterUpdateNeeded = false
+  private isForceManyBodyUpdateNeeded = false
+  private isForceLinkUpdateNeeded = false
+  private isForceCenterUpdateNeeded = false
+  private isPointImageSizesUpdateNeeded = false
 
   private _isDestroyed = false
 
@@ -114,6 +116,7 @@ export class Graph {
     this.reglInstance = reglInstance
 
     this.store.adjustSpaceSize(this.config.spaceSize, this.reglInstance.limits.maxTextureSize)
+    this.store.setWebGLMaxTextureSize(this.reglInstance.limits.maxTextureSize)
     this.store.updateScreenSize(w, h)
 
     this.canvasD3Selection = select<HTMLCanvasElement, undefined>(this.canvas)
@@ -297,18 +300,19 @@ export class Graph {
   public setPointPositions (pointPositions: Float32Array, dontRescale?: boolean | undefined): void {
     if (this._isDestroyed || !this.points) return
     this.graph.inputPointPositions = pointPositions
-    this.points.dontRescale = dontRescale
-    this._needsPointPositionsUpdate = true
+    this.points.shouldSkipRescale = dontRescale
+    this.isPointPositionsUpdateNeeded = true
     // Links related texture depends on point positions, so we need to update it
-    this._needsLinksUpdate = true
+    this.isLinksUpdateNeeded = true
     // Point related textures depend on point positions length, so we need to update them
-    this._needsPointColorUpdate = true
-    this._needsPointSizeUpdate = true
-    this._needsPointShapeUpdate = true
-    this._needsPointClusterUpdate = true
-    this._needsForceManyBodyUpdate = true
-    this._needsForceLinkUpdate = true
-    this._needsForceCenterUpdate = true
+    this.isPointColorUpdateNeeded = true
+    this.isPointSizeUpdateNeeded = true
+    this.isPointShapeUpdateNeeded = true
+    this.isPointImageIndicesUpdateNeeded = true
+    this.isPointClusterUpdateNeeded = true
+    this.isForceManyBodyUpdateNeeded = true
+    this.isForceLinkUpdateNeeded = true
+    this.isForceCenterUpdateNeeded = true
   }
 
   /**
@@ -321,7 +325,7 @@ export class Graph {
   public setPointColors (pointColors: Float32Array): void {
     if (this._isDestroyed) return
     this.graph.inputPointColors = pointColors
-    this._needsPointColorUpdate = true
+    this.isPointColorUpdateNeeded = true
   }
 
   /**
@@ -345,7 +349,7 @@ export class Graph {
   public setPointSizes (pointSizes: Float32Array): void {
     if (this._isDestroyed) return
     this.graph.inputPointSizes = pointSizes
-    this._needsPointSizeUpdate = true
+    this.isPointSizeUpdateNeeded = true
   }
 
   /**
@@ -353,13 +357,55 @@ export class Graph {
    *
    * @param {Float32Array} pointShapes - A Float32Array representing the shapes of points in the format [shape1, shape2, ..., shapen],
    * where `n` is the index of the point and each shape value corresponds to a PointShape enum:
-   * 0 = Circle, 1 = Square, 2 = Triangle, 3 = Diamond, 4 = Pentagon, 5 = Hexagon, 6 = Star, 7 = Cross.
+   * 0 = Circle, 1 = Square, 2 = Triangle, 3 = Diamond, 4 = Pentagon, 5 = Hexagon, 6 = Star, 7 = Cross, 8 = None.
    * Example: `new Float32Array([0, 1, 2])` sets the first point to Circle, the second point to Square, and the third point to Triangle.
+   * Images are rendered above shapes.
    */
   public setPointShapes (pointShapes: Float32Array): void {
     if (this._isDestroyed) return
     this.graph.inputPointShapes = pointShapes
-    this._needsPointShapeUpdate = true
+    this.isPointShapeUpdateNeeded = true
+  }
+
+  /**
+   * Sets the images for the graph points using ImageData objects.
+   * Images are rendered above shapes.
+   * To use images, provide image indices via setPointImageIndices().
+   *
+   * @param {ImageData[]} imageDataArray - Array of ImageData objects to use as point images.
+   * Example: `setImageData([imageData1, imageData2, imageData3])`
+   */
+  public setImageData (imageDataArray: ImageData[]): void {
+    if (this._isDestroyed || !this.points) return
+    this.graph.inputImageData = imageDataArray
+    this.points.createAtlas()
+  }
+
+  /**
+   * Sets which image each point should use from the images array.
+   * Images are rendered above shapes.
+   *
+   * @param {Float32Array} imageIndices - A Float32Array representing which image each point uses in the format [index1, index2, ..., indexn],
+   * where `n` is the index of the point and each value is an index into the images array provided to `setImageData`.
+   * Example: `new Float32Array([0, 1, 0])` sets the first point to use image 0, second point to use image 1, third point to use image 0.
+   */
+  public setPointImageIndices (imageIndices: Float32Array): void {
+    if (this._isDestroyed) return
+    this.graph.inputPointImageIndices = imageIndices
+    this.isPointImageIndicesUpdateNeeded = true
+  }
+
+  /**
+   * Sets the sizes for the point images.
+   *
+   * @param {Float32Array} imageSizes - A Float32Array representing the sizes of point images in the format [size1, size2, ..., sizen],
+   * where `n` is the index of the point.
+   * Example: `new Float32Array([10, 20, 30])` sets the first image to size 10, the second image to size 20, and the third image to size 30.
+   */
+  public setPointImageSizes (imageSizes: Float32Array): void {
+    if (this._isDestroyed) return
+    this.graph.inputPointImageSizes = imageSizes
+    this.isPointImageSizesUpdateNeeded = true
   }
 
   /**
@@ -384,12 +430,12 @@ export class Graph {
   public setLinks (links: Float32Array): void {
     if (this._isDestroyed) return
     this.graph.inputLinks = links
-    this._needsLinksUpdate = true
+    this.isLinksUpdateNeeded = true
     // Links related texture depends on links length, so we need to update it
-    this._needsLinkColorUpdate = true
-    this._needsLinkWidthUpdate = true
-    this._needsLinkArrowUpdate = true
-    this._needsForceLinkUpdate = true
+    this.isLinkColorUpdateNeeded = true
+    this.isLinkWidthUpdateNeeded = true
+    this.isLinkArrowUpdateNeeded = true
+    this.isForceLinkUpdateNeeded = true
   }
 
   /**
@@ -402,7 +448,7 @@ export class Graph {
   public setLinkColors (linkColors: Float32Array): void {
     if (this._isDestroyed) return
     this.graph.inputLinkColors = linkColors
-    this._needsLinkColorUpdate = true
+    this.isLinkColorUpdateNeeded = true
   }
 
   /**
@@ -426,7 +472,7 @@ export class Graph {
   public setLinkWidths (linkWidths: Float32Array): void {
     if (this._isDestroyed) return
     this.graph.inputLinkWidths = linkWidths
-    this._needsLinkWidthUpdate = true
+    this.isLinkWidthUpdateNeeded = true
   }
 
   /**
@@ -450,7 +496,7 @@ export class Graph {
   public setLinkArrows (linkArrows: boolean[]): void {
     if (this._isDestroyed) return
     this.graph.linkArrowsBoolean = linkArrows
-    this._needsLinkArrowUpdate = true
+    this.isLinkArrowUpdateNeeded = true
   }
 
   /**
@@ -463,7 +509,7 @@ export class Graph {
   public setLinkStrength (linkStrength: Float32Array): void {
     if (this._isDestroyed) return
     this.graph.inputLinkStrength = linkStrength
-    this._needsForceLinkUpdate = true
+    this.isForceLinkUpdateNeeded = true
   }
 
   /**
@@ -480,7 +526,7 @@ export class Graph {
   public setPointClusters (pointClusters: (number | undefined)[]): void {
     if (this._isDestroyed) return
     this.graph.inputPointClusters = pointClusters
-    this._needsPointClusterUpdate = true
+    this.isPointClusterUpdateNeeded = true
   }
 
   /**
@@ -496,7 +542,7 @@ export class Graph {
   public setClusterPositions (clusterPositions: (number | undefined)[]): void {
     if (this._isDestroyed) return
     this.graph.inputClusterPositions = clusterPositions
-    this._needsPointClusterUpdate = true
+    this.isPointClusterUpdateNeeded = true
   }
 
   /**
@@ -512,7 +558,7 @@ export class Graph {
   public setPointClusterStrength (clusterStrength: Float32Array): void {
     if (this._isDestroyed) return
     this.graph.inputClusterStrength = clusterStrength
-    this._needsPointClusterUpdate = true
+    this.isPointClusterUpdateNeeded = true
   }
 
   /**
@@ -936,9 +982,11 @@ export class Graph {
 
   /**
    * Get current X and Y coordinates of the tracked points.
-   * @returns A Map object where keys are the indices of the points and values are their corresponding X and Y coordinates in the [number, number] format.
+   * Do not mutate the returned map - it may affect future calls.
+   * @returns A ReadonlyMap where keys are point indices and values are their corresponding X and Y coordinates in the [number, number] format.
+   * @see trackPointPositionsByIndices To set which points should be tracked
    */
-  public getTrackedPointPositionsMap (): Map<number, [number, number]> {
+  public getTrackedPointPositionsMap (): ReadonlyMap<number, [number, number]> {
     if (this._isDestroyed || !this.points) return new Map()
     return this.points.getTrackedPositionsMap()
   }
@@ -1114,36 +1162,40 @@ export class Graph {
    */
   public create (): void {
     if (this._isDestroyed || !this.points || !this.lines) return
-    if (this._needsPointPositionsUpdate) this.points.updatePositions()
-    if (this._needsPointColorUpdate) this.points.updateColor()
-    if (this._needsPointSizeUpdate) this.points.updateSize()
-    if (this._needsPointShapeUpdate) this.points.updateShape()
-
-    if (this._needsLinksUpdate) this.lines.updatePointsBuffer()
-    if (this._needsLinkColorUpdate) this.lines.updateColor()
-    if (this._needsLinkWidthUpdate) this.lines.updateWidth()
-    if (this._needsLinkArrowUpdate) this.lines.updateArrow()
-
-    if (this._needsForceManyBodyUpdate) this.forceManyBody?.create()
-    if (this._needsForceLinkUpdate) {
+    if (this.isPointPositionsUpdateNeeded) this.points.updatePositions()
+    if (this.isPointColorUpdateNeeded) this.points.updateColor()
+    if (this.isPointSizeUpdateNeeded) this.points.updateSize()
+    if (this.isPointShapeUpdateNeeded) this.points.updateShape()
+    if (this.isPointImageIndicesUpdateNeeded) this.points.updateImageIndices()
+    if (this.isPointImageSizesUpdateNeeded) this.points.updateImageSizes()
+
+    if (this.isLinksUpdateNeeded) this.lines.updatePointsBuffer()
+    if (this.isLinkColorUpdateNeeded) this.lines.updateColor()
+    if (this.isLinkWidthUpdateNeeded) this.lines.updateWidth()
+    if (this.isLinkArrowUpdateNeeded) this.lines.updateArrow()
+
+    if (this.isForceManyBodyUpdateNeeded) this.forceManyBody?.create()
+    if (this.isForceLinkUpdateNeeded) {
       this.forceLinkIncoming?.create(LinkDirection.INCOMING)
       this.forceLinkOutgoing?.create(LinkDirection.OUTGOING)
     }
-    if (this._needsForceCenterUpdate) this.forceCenter?.create()
-    if (this._needsPointClusterUpdate) this.clusters?.create()
-
-    this._needsPointPositionsUpdate = false
-    this._needsPointColorUpdate = false
-    this._needsPointSizeUpdate = false
-    this._needsPointShapeUpdate = false
-    this._needsLinksUpdate = false
-    this._needsLinkColorUpdate = false
-    this._needsLinkWidthUpdate = false
-    this._needsLinkArrowUpdate = false
-    this._needsPointClusterUpdate = false
-    this._needsForceManyBodyUpdate = false
-    this._needsForceLinkUpdate = false
-    this._needsForceCenterUpdate = false
+    if (this.isForceCenterUpdateNeeded) this.forceCenter?.create()
+    if (this.isPointClusterUpdateNeeded) this.clusters?.create()
+
+    this.isPointPositionsUpdateNeeded = false
+    this.isPointColorUpdateNeeded = false
+    this.isPointSizeUpdateNeeded = false
+    this.isPointShapeUpdateNeeded = false
+    this.isPointImageIndicesUpdateNeeded = false
+    this.isPointImageSizesUpdateNeeded = false
+    this.isLinksUpdateNeeded = false
+    this.isLinkColorUpdateNeeded = false
+    this.isLinkWidthUpdateNeeded = false
+    this.isLinkArrowUpdateNeeded = false
+    this.isPointClusterUpdateNeeded = false
+    this.isForceManyBodyUpdateNeeded = false
+    this.isForceLinkUpdateNeeded = false
+    this.isForceCenterUpdateNeeded = false
   }
 
   /**

package/src/modules/GraphData/index.ts

@@ -9,7 +9,8 @@ export enum PointShape {
   Pentagon = 4,
   Hexagon = 5,
   Star = 6,
-  Cross = 7
+  Cross = 7,
+  None = 8
 }
 
 export class GraphData {
@@ -17,6 +18,9 @@ export class GraphData {
   public inputPointColors: Float32Array | undefined
   public inputPointSizes: Float32Array | undefined
   public inputPointShapes: Float32Array | undefined
+  public inputImageData: ImageData[] | undefined
+  public inputPointImageIndices: Float32Array | undefined
+  public inputPointImageSizes: Float32Array | undefined
   public inputLinkColors: Float32Array | undefined
   public inputLinkWidths: Float32Array | undefined
   public inputLinkStrength: Float32Array | undefined
@@ -28,6 +32,8 @@ export class GraphData {
   public pointColors: Float32Array | undefined
   public pointSizes: Float32Array | undefined
   public pointShapes: Float32Array | undefined
+  public pointImageIndices: Float32Array | undefined
+  public pointImageSizes: Float32Array | undefined
 
   public inputLinks: Float32Array | undefined
   public links: Float32Array | undefined
@@ -124,7 +130,9 @@ export class GraphData {
   }
 
   /**
-   * Updates the point shapes based on the input data or default shape (Circle).
+   * Updates the point shapes based on the input data or default shape.
+   * Default behavior: Circle (0).
+  * Images are rendered above shapes.
    */
   public updatePointShape (): void {
     if (this.pointsNumber === undefined) {
@@ -132,16 +140,68 @@ export class GraphData {
       return
     }
 
-    // Sets point shapes to default values (Circle) if the input is missing or does not match input points number.
+    // Determine default shape: Circle
+    const defaultShape = PointShape.Circle
+
+    // Sets point shapes to default values if the input is missing or does not match input points number.
     if (this.inputPointShapes === undefined || this.inputPointShapes.length !== this.pointsNumber) {
-      this.pointShapes = new Float32Array(this.pointsNumber).fill(PointShape.Circle)
+      this.pointShapes = new Float32Array(this.pointsNumber).fill(defaultShape)
     } else {
       this.pointShapes = new Float32Array(this.inputPointShapes)
       const pointShapes = this.pointShapes
       for (let i = 0; i < pointShapes.length; i++) {
         const shape = pointShapes[i]
-        if (shape == null || !isNumber(shape) || shape < 0 || shape > 7) {
-          pointShapes[i] = PointShape.Circle
+        if (shape == null || !isNumber(shape) || shape < 0 || shape > 8) {
+          pointShapes[i] = defaultShape
+        }
+      }
+    }
+  }
+
+  /**
+   * Updates the point image indices based on the input data or default value (-1 for no image).
+   */
+  public updatePointImageIndices (): void {
+    if (this.pointsNumber === undefined) {
+      this.pointImageIndices = undefined
+      return
+    }
+
+    // Sets point image indices to -1 if input is missing or doesn't match points count
+    if (this.inputPointImageIndices === undefined || this.inputPointImageIndices.length !== this.pointsNumber) {
+      this.pointImageIndices = new Float32Array(this.pointsNumber).fill(-1)
+    } else {
+      const pointImageIndices = new Float32Array(this.inputPointImageIndices)
+      for (let i = 0; i < pointImageIndices.length; i++) {
+        const rawIndex = pointImageIndices[i]
+        const imageIndex = (rawIndex === undefined) ? NaN : rawIndex
+        if (!Number.isFinite(imageIndex) || imageIndex < 0) {
+          pointImageIndices[i] = -1
+        } else {
+          pointImageIndices[i] = Math.trunc(imageIndex)
+        }
+      }
+      this.pointImageIndices = pointImageIndices
+    }
+  }
+
+  /**
+   * Updates the point image sizes based on the input data or default to point sizes.
+   */
+  public updatePointImageSizes (): void {
+    if (this.pointsNumber === undefined) {
+      this.pointImageSizes = undefined
+      return
+    }
+
+    // Sets point image sizes to point sizes if the input is missing or does not match input points number.
+    if (this.inputPointImageSizes === undefined || this.inputPointImageSizes.length !== this.pointsNumber) {
+      this.pointImageSizes = this.pointSizes ? new Float32Array(this.pointSizes) : new Float32Array(this.pointsNumber).fill(this._config.pointSize)
+    } else {
+      this.pointImageSizes = new Float32Array(this.inputPointImageSizes)
+      for (let i = 0; i < this.pointImageSizes.length; i++) {
+        if (!isNumber(this.pointImageSizes[i])) {
+          this.pointImageSizes[i] = this.pointSizes?.[i] ?? this._config.pointSize
         }
       }
     }
@@ -261,6 +321,8 @@ export class GraphData {
     this.updatePointColor()
     this.updatePointSize()
     this.updatePointShape()
+    this.updatePointImageIndices()
+    this.updatePointImageSizes()
 
     this.updateLinks()
     this.updateLinkColor()