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

package/src/modules/Points/index.ts

@@ -20,6 +20,7 @@ import dragPointFrag from '@/graph/modules/Points/drag-point.frag'
 import updateVert from '@/graph/modules/Shared/quad.vert'
 import clearFrag from '@/graph/modules/Shared/clear.frag'
 import { readPixels } from '@/graph/helper'
+import { createAtlasDataFromImageData } from '@/graph/modules/Points/atlas-utils'
 
 export class Points extends CoreModule {
   public currentPositionFbo: regl.Framebuffer2D | undefined
@@ -30,14 +31,22 @@ export class Points extends CoreModule {
   public greyoutStatusFbo: regl.Framebuffer2D | undefined
   public scaleX: ((x: number) => number) | undefined
   public scaleY: ((y: number) => number) | undefined
-  public dontRescale: boolean | undefined
+  public shouldSkipRescale: boolean | undefined
+  public imageAtlasTexture: regl.Texture2D | undefined
+  public imageCount = 0
   private colorBuffer: regl.Buffer | undefined
   private sizeFbo: regl.Framebuffer2D | undefined
   private sizeBuffer: regl.Buffer | undefined
   private shapeBuffer: regl.Buffer | undefined
+  private imageIndicesBuffer: regl.Buffer | undefined
+  private imageSizesBuffer: regl.Buffer | undefined
+  private imageAtlasCoordsTexture: regl.Texture2D | undefined
+  private imageAtlasCoordsTextureSize: number | undefined
   private trackedIndicesFbo: regl.Framebuffer2D | undefined
   private trackedPositionsFbo: regl.Framebuffer2D | undefined
   private sampledPointsFbo: regl.Framebuffer2D | undefined
+  private trackedPositions: Map<number, [number, number]> | undefined
+  private isPositionsUpToDate = false
   private drawCommand: regl.DrawCommand | undefined
   private drawHighlightedCommand: regl.DrawCommand | undefined
   private updatePositionCommand: regl.DrawCommand | undefined
@@ -72,21 +81,21 @@ export class Points extends CoreModule {
     let shouldRescale = rescalePositions
     // If rescalePositions isn't specified in config and simulation is disabled, default to true
     if (rescalePositions === undefined && !enableSimulation) shouldRescale = true
-    // Skip rescaling if `dontRescale` flag is set (allowing one-time skip of rescaling)
+    // Skip rescaling if `shouldSkipRescale` flag is set (allowing one-time skip of rescaling)
     // Temporary flag is used to skip rescaling when change point positions or adding new points by function `setPointPositions`
     // This flag overrides any other rescaling settings
-    if (this.dontRescale) shouldRescale = false
+    if (this.shouldSkipRescale) shouldRescale = false
 
     if (shouldRescale) {
       this.rescaleInitialNodePositions()
-    } else if (!this.dontRescale) {
+    } else if (!this.shouldSkipRescale) {
       // Only reset scale functions if not temporarily skipping rescale
       this.scaleX = undefined
       this.scaleY = undefined
     }
 
     // Reset temporary flag
-    this.dontRescale = undefined
+    this.shouldSkipRescale = undefined
 
     for (let i = 0; i < data.pointsNumber; ++i) {
       initialState[i * 4 + 0] = data.pointPositions[i * 2 + 0] as number
@@ -227,6 +236,14 @@ export class Points extends CoreModule {
             buffer: () => this.shapeBuffer,
             size: 1,
           },
+          imageIndex: {
+            buffer: () => this.imageIndicesBuffer,
+            size: 1,
+          },
+          imageSize: {
+            buffer: () => this.imageSizesBuffer,
+            size: 1,
+          },
         },
         uniforms: {
           positionsTexture: () => this.currentPositionFbo,
@@ -241,11 +258,16 @@ export class Points extends CoreModule {
           greyoutOpacity: () => config.pointGreyoutOpacity ?? -1,
           greyoutColor: () => store.greyoutPointColor,
           backgroundColor: () => store.backgroundColor,
-          darkenGreyout: () => store.darkenGreyout,
+          isDarkenGreyout: () => store.isDarkenGreyout,
           scalePointsOnZoom: () => config.scalePointsOnZoom,
           maxPointSize: () => store.maxPointSize,
           skipSelected: reglInstance.prop<{ skipSelected: boolean }, 'skipSelected'>('skipSelected'),
           skipUnselected: reglInstance.prop<{ skipUnselected: boolean }, 'skipUnselected'>('skipUnselected'),
+          imageAtlasTexture: () => this.imageAtlasTexture,
+          imageAtlasCoords: () => this.imageAtlasCoordsTexture,
+          hasImages: () => this.imageCount > 0,
+          imageCount: () => this.imageCount,
+          imageAtlasCoordsTextureSize: () => this.imageAtlasCoordsTextureSize,
         },
         blend: {
           enable: true,
@@ -285,8 +307,8 @@ export class Points extends CoreModule {
           sizeScale: () => config.pointSizeScale,
           transformationMatrix: () => store.transform,
           ratio: () => config.pixelRatio,
-          'selection[0]': () => store.selectedArea[0],
-          'selection[1]': () => store.selectedArea[1],
+          selection0: () => store.selectedArea[0],
+          selection1: () => store.selectedArea[1],
           scalePointsOnZoom: () => config.scalePointsOnZoom,
           maxPointSize: () => store.maxPointSize,
         },
@@ -422,7 +444,7 @@ export class Points extends CoreModule {
           pointGreyoutStatusTexture: () => this.greyoutStatusFbo,
           universalPointOpacity: () => config.pointOpacity,
           greyoutOpacity: () => config.pointGreyoutOpacity ?? -1,
-          darkenGreyout: () => store.darkenGreyout,
+          isDarkenGreyout: () => store.isDarkenGreyout,
           backgroundColor: () => store.backgroundColor,
           greyoutColor: () => store.greyoutPointColor,
         },
@@ -532,6 +554,54 @@ export class Points extends CoreModule {
     this.shapeBuffer(data.pointShapes)
   }
 
+  public updateImageIndices (): void {
+    const { reglInstance, data } = this
+    if (data.pointsNumber === undefined || data.pointImageIndices === undefined) return
+    if (!this.imageIndicesBuffer) this.imageIndicesBuffer = reglInstance.buffer(0)
+    this.imageIndicesBuffer(data.pointImageIndices)
+  }
+
+  public updateImageSizes (): void {
+    const { reglInstance, data } = this
+    if (data.pointsNumber === undefined || data.pointImageSizes === undefined) return
+    if (!this.imageSizesBuffer) this.imageSizesBuffer = reglInstance.buffer(0)
+    this.imageSizesBuffer(data.pointImageSizes)
+  }
+
+  public createAtlas (): void {
+    const { reglInstance, data, store } = this
+    if (!this.imageAtlasTexture) this.imageAtlasTexture = reglInstance.texture()
+    if (!this.imageAtlasCoordsTexture) this.imageAtlasCoordsTexture = reglInstance.texture()
+
+    if (!data.inputImageData?.length) {
+      this.imageCount = 0
+      this.imageAtlasCoordsTextureSize = 0
+      return
+    }
+
+    const atlasResult = createAtlasDataFromImageData(data.inputImageData, store.webglMaxTextureSize)
+    if (!atlasResult) {
+      console.warn('Failed to create atlas from image data')
+      return
+    }
+
+    this.imageCount = data.inputImageData.length
+    const { atlasData, atlasSize, atlasCoords, atlasCoordsSize } = atlasResult
+    this.imageAtlasCoordsTextureSize = atlasCoordsSize
+
+    this.imageAtlasTexture({
+      data: atlasData,
+      shape: [atlasSize, atlasSize, 4],
+      type: 'uint8',
+    })
+
+    this.imageAtlasCoordsTexture({
+      data: atlasCoords,
+      shape: [atlasCoordsSize, atlasCoordsSize, 4],
+      type: 'float',
+    })
+  }
+
   public updateSampledPointsGrid (): void {
     const { store: { screenSize }, config: { pointSamplingDistance }, reglInstance } = this
     let dist = pointSamplingDistance ?? Math.min(...screenSize) / 2
@@ -557,6 +627,9 @@ export class Points extends CoreModule {
     if (!this.colorBuffer) this.updateColor()
     if (!this.sizeBuffer) this.updateSize()
     if (!this.shapeBuffer) this.updateShape()
+    if (!this.imageIndicesBuffer) this.updateImageIndices()
+    if (!this.imageSizesBuffer) this.updateImageSizes()
+    if (!this.imageAtlasCoordsTexture || !this.imageAtlasTexture) this.createAtlas()
 
     // Render in layers: unselected points first (behind), then selected points (in front)
     if (store.selectedIndices && store.selectedIndices.length > 0) {
@@ -589,11 +662,15 @@ export class Points extends CoreModule {
   public updatePosition (): void {
     this.updatePositionCommand?.()
     this.swapFbo()
+    // Invalidate tracked positions cache since positions have changed
+    this.isPositionsUpToDate = false
   }
 
   public drag (): void {
     this.dragPointCommand?.()
     this.swapFbo()
+    // Invalidate tracked positions cache since positions have changed
+    this.isPositionsUpToDate = false
   }
 
   public findPointsOnAreaSelection (): void {
@@ -651,7 +728,12 @@ export class Points extends CoreModule {
   public trackPointsByIndices (indices?: number[] | undefined): void {
     const { store: { pointsTextureSize }, reglInstance } = this
     this.trackedIndices = indices
-    if (!indices?.length) return
+
+    // Clear cache when changing tracked indices
+    this.trackedPositions = undefined
+    this.isPositionsUpToDate = false
+
+    if (!indices?.length || !pointsTextureSize) return
     const textureSize = Math.ceil(Math.sqrt(indices.length))
 
     const initialState = new Float32Array(textureSize * textureSize * 4).fill(-1)
@@ -688,10 +770,29 @@ export class Points extends CoreModule {
     this.trackPoints()
   }
 
-  public getTrackedPositionsMap (): Map<number, [number, number]> {
-    const tracked = new Map<number, [number, number]>()
-    if (!this.trackedIndices) return tracked
+  /**
+   * 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.
+   */
+  public getTrackedPositionsMap (): ReadonlyMap<number, [number, number]> {
+    if (!this.trackedIndices) return new Map()
+
+    const { config: { enableSimulation }, store: { isSimulationRunning } } = this
+
+    // Use cached positions when simulation is inactive and cache is valid
+    if ((!enableSimulation || !isSimulationRunning) &&
+        this.isPositionsUpToDate &&
+        this.trackedPositions) {
+      return this.trackedPositions
+    }
+
     const pixels = readPixels(this.reglInstance, this.trackedPositionsFbo as regl.Framebuffer2D)
+
+    const tracked = new Map<number, [number, number]>()
     for (let i = 0; i < pixels.length / 4; i += 1) {
       const x = pixels[i * 4]
       const y = pixels[i * 4 + 1]
@@ -700,6 +801,13 @@ export class Points extends CoreModule {
         tracked.set(index, [x, y])
       }
     }
+
+    // If simulation is inactive, cache the result for next time
+    if (!enableSimulation || !isSimulationRunning) {
+      this.trackedPositions = tracked
+      this.isPositionsUpToDate = true
+    }
+
     return tracked
   }
 

package/src/modules/Store/index.ts

@@ -29,13 +29,14 @@ export class Store {
   public adjustedSpaceSize = defaultConfigValues.spaceSize
   public isSpaceKeyPressed = false
   public div: HTMLDivElement | undefined
+  public webglMaxTextureSize = 16384 // Default fallback value
 
   public hoveredPointRingColor = [1, 1, 1, hoveredPointRingOpacity]
   public focusedPointRingColor = [1, 1, 1, focusedPointRingOpacity]
   // -1 means that the color is not set
   public greyoutPointColor = [-1, -1, -1, -1]
-  // If backgroundColor is dark, darkenGreyout is true
-  public darkenGreyout = false
+  // If backgroundColor is dark, isDarkenGreyout is true
+  public isDarkenGreyout = false
   private alphaTarget = 0
   private scalePointX = scaleLinear()
   private scalePointY = scaleLinear()
@@ -53,7 +54,7 @@ export class Store {
     document.documentElement.style.setProperty('--cosmosgl-error-message-color', brightness > 0.65 ? 'black' : 'white')
     if (this.div) this.div.style.backgroundColor = `rgba(${color[0] * 255}, ${color[1] * 255}, ${color[2] * 255}, ${color[3]})`
 
-    this.darkenGreyout = brightness < 0.65
+    this.isDarkenGreyout = brightness < 0.65
   }
 
   public addRandomSeed (seed: number | string): void {
@@ -75,6 +76,13 @@ export class Store {
     } else this.adjustedSpaceSize = configSpaceSize
   }
 
+  /**
+   * Sets the WebGL texture size limit for use in atlas creation and other texture operations.
+   */
+  public setWebGLMaxTextureSize (webglMaxTextureSize: number): void {
+    this.webglMaxTextureSize = webglMaxTextureSize
+  }
+
   public updateScreenSize (width: number, height: number): void {
     const { adjustedSpaceSize } = this
     this.screenSize = [width, height]

package/src/stories/3. api-reference.mdx

@@ -91,8 +91,11 @@ This method sets the shapes for the graph points.
 | 5 | Hexagon |
 | 6 | Star |
 | 7 | Cross |
+| 8 | None |
 
-Each shape value in the array specifies the shape of a point using the same order as the points in the graph data. Invalid shape values (outside the range 0-7) will default to Circle (0).
+Each shape value in the array specifies the shape of a point using the same order as the points in the graph data. Invalid shape values (outside the range 0-8) will default to Circle (0).
+
+Images are rendered above shapes.
 
 **Example:**
 ```javascript
@@ -108,6 +111,50 @@ graph.setPointShapes(new Float32Array([
 graph.render();
 ```
 
+### <a name="set_image_data" href="#set_image_data">#</a> graph.<b>setImageData</b>(<i>imageDataArray</i>)
+
+This method sets the images for the graph points using [ImageData](https://developer.mozilla.org/en-US/docs/Web/API/ImageData) objects. Images are rendered above shapes. To use images, provide image indices via `setPointImageIndices()`.
+
+Images are rendered above shapes.
+
+* **`imageDataArray`** (ImageData[]): Array of ImageData objects to use as point images.
+
+**Example:**
+```javascript
+// Create ImageData objects from canvas or other sources
+const imageData1 = canvas1.getContext('2d').getImageData(0, 0, 32, 32);
+const imageData2 = canvas2.getContext('2d').getImageData(0, 0, 32, 32);
+
+// Set the images for the graph
+graph.setImageData([imageData1, imageData2]);
+
+// Set which image each point should use (0 = imageData1, 1 = imageData2)
+graph.setPointImageIndices(new Float32Array([0, 1, 0, 1]));
+
+// To show shapes with images
+graph.setPointShapes(new Float32Array([0, 1, 2, 3])); // Circle, Square, Triangle, Diamond
+
+graph.render();
+```
+
+This example sets up two images and assigns them to four points: the first and third points use imageData1, while the second and fourth points use imageData2. The shapes are also set to show both shapes and images together.
+
+### <a name="set_point_image_indices" href="#set_point_image_indices">#</a> graph.<b>setPointImageIndices</b>(<i>imageIndices</i>)
+
+This method sets which image each point should use from the images array provided to `setImageData()`. Images are rendered above shapes.
+
+* **`imageIndices`** (Float32Array): A Float32Array representing which image each point uses in the format `[index1, index2, ..., indexN]`, where each value is an index into the images array provided to `setImageData()`.
+* **Valid indices**: Use 0 for the first image, 1 for the second image, etc. Invalid or negative indices will default to -1 (no image).
+* **Default behavior**: When no image indices are provided, all points default to -1 (no image).
+
+### <a name="set_point_image_sizes" href="#set_point_image_sizes">#</a> graph.<b>setPointImageSizes</b>(<i>imageSizes</i>)
+
+This method sets the sizes for the point images in the graph.
+
+* **`imageSizes`** (Float32Array): A Float32Array representing the sizes of point images in the format `[size1, size2, ..., sizeN]`, where each `size` value corresponds to the size of the image for the point at the same index in the graph's data.
+
+Each size value in the array specifies the size of a point image using the same order as the points in the graph data. The sizes are applied to images that have been set using `setImageData()` and referenced via `setPointImageIndices()`.
+
 ### <a name="set_links" href="#set_links">#</a> graph.<b>setLinks</b>(<i>links</i>)
 
 This method sets the links (connections) between points in a cosmos.gl graph.

package/src/stories/create-story.ts

@@ -8,7 +8,11 @@ export const createStory: (storyFunction: () => {
   graph: Graph;
   div: HTMLDivElement;
   destroy?: () => void;
-}) => Story = (storyFunction) => ({
+} | Promise<{
+  graph: Graph;
+  div: HTMLDivElement;
+  destroy?: () => void;
+}>) => Story = (storyFunction) => ({
   async beforeEach (d): Promise<() => void> {
     return (): void => {
       d.args.destroy?.()
@@ -16,9 +20,32 @@ export const createStory: (storyFunction: () => {
     }
   },
   render: (args): HTMLDivElement => {
-    const story = storyFunction()
-    args.graph = story.graph
-    args.destroy = story.destroy
-    return story.div
+    const result = storyFunction()
+
+    if (result instanceof Promise) {
+      // For async story functions, create a simple div and update it when ready
+      const div = document.createElement('div')
+      div.style.height = '100vh'
+      div.style.width = '100%'
+      div.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #666;">Loading story...</div>'
+
+      result.then((story) => {
+        args.graph = story.graph
+        args.destroy = story.destroy
+        // Replace the content with the actual story div
+        div.innerHTML = ''
+        div.appendChild(story.div)
+      }).catch((error) => {
+        console.error('Failed to load story:', error)
+        div.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #ff0000;">Failed to load story</div>'
+      })
+
+      return div
+    } else {
+      // Synchronous story function
+      args.graph = result.graph
+      args.destroy = result.destroy
+      return result.div
+    }
   },
 })

package/src/stories/shapes/image-example/index.ts

@@ -0,0 +1,239 @@
+import { Graph, PointShape } from '@cosmos.gl/graph'
+
+// Import all PNG icons
+import boxUrl from './icons/box.png'
+import toolboxUrl from './icons/toolbox.png'
+import swiftUrl from './icons/swift.png'
+import legoUrl from './icons/lego.png'
+import sUrl from './icons/s.png'
+
+// Helper function to convert PNG URL to ImageData
+const pngUrlToImageData = (pngUrl: string): Promise<ImageData> => {
+  return new Promise<ImageData>((resolve, reject) => {
+    const img = new Image()
+
+    img.onload = (): void => {
+      const canvas = document.createElement('canvas')
+      const ctx = canvas.getContext('2d')
+      if (!ctx) {
+        reject(new Error('Could not get 2D context'))
+        return
+      }
+
+      canvas.width = img.width
+      canvas.height = img.height
+      ctx.drawImage(img, 0, 0)
+
+      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+      resolve(imageData)
+    }
+    img.onerror = (): void => reject(new Error(`Failed to load image: ${pngUrl}`))
+    img.src = pngUrl
+  })
+}
+
+const loadPngImages = (pngUrls: string[]): Promise<ImageData[]> => {
+  return Promise.all(pngUrls.map(pngUrlToImageData))
+}
+
+// Define node types for Xcode dependency graph
+enum NodeType {
+  App = 0, // Main app target (swift icon)
+  Framework = 1, // Framework (box icon)
+  Library = 2, // Static library (toolbox icon)
+  Bundle = 3, // Bundle (lego icon)
+  Target = 4 // Build target (s icon)
+}
+
+interface DependencyNode {
+  id: number;
+  name: string;
+  type: NodeType;
+  x: number;
+  y: number;
+  dependencies: number[];
+  size: number;
+  color: [number, number, number, number];
+}
+
+export const imageExample = async (): Promise<{div: HTMLDivElement; graph: Graph }> => {
+  // Create container div
+  const div = document.createElement('div')
+  div.style.height = '100vh'
+  div.style.width = '100%'
+  div.style.display = 'flex'
+  div.style.flexDirection = 'column'
+
+  // Create main graph container
+  const graphContainer = document.createElement('div')
+  graphContainer.style.height = '100vh'
+  graphContainer.style.width = '100%'
+  graphContainer.style.position = 'absolute'
+  graphContainer.style.overflow = 'hidden'
+  div.appendChild(graphContainer)
+
+  try {
+    const spaceSize = 4096
+
+    const nodes: DependencyNode[] = [
+      // Main app target (center)
+      { id: 0, name: 'MyApp', type: NodeType.App, x: 2048, y: 2048, dependencies: [1, 2, 3, 14], size: 60, color: [0.2, 0.6, 1.0, 1.0] },
+
+      // Frameworks (first ring around center)
+      { id: 1, name: 'CoreData', type: NodeType.Framework, x: 1024, y: 2048, dependencies: [4, 5], size: 50, color: [0.8, 0.4, 0.2, 1.0] },
+      { id: 2, name: 'UIKit', type: NodeType.Framework, x: 2048, y: 1024, dependencies: [6, 15], size: 50, color: [0.8, 0.4, 0.2, 1.0] },
+      { id: 3, name: 'Network', type: NodeType.Framework, x: 3072, y: 2048, dependencies: [7, 8], size: 50, color: [0.8, 0.4, 0.2, 1.0] },
+
+      // Libraries (second ring)
+      { id: 4, name: 'SQLite', type: NodeType.Library, x: 512, y: 2048, dependencies: [], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
+      { id: 5, name: 'Foundation', type: NodeType.Library, x: 1024, y: 1024, dependencies: [16], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
+      { id: 6, name: 'CoreGraphics', type: NodeType.Library, x: 2048, y: 512, dependencies: [], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
+      { id: 7, name: 'Security', type: NodeType.Library, x: 3072, y: 1024, dependencies: [], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
+      { id: 8, name: 'CFNetwork', type: NodeType.Library, x: 3584, y: 2048, dependencies: [], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
+
+      // Additional frameworks (first ring)
+      { id: 9, name: 'Analytics', type: NodeType.Framework, x: 2048, y: 3072, dependencies: [10, 17], size: 50, color: [0.8, 0.4, 0.2, 1.0] },
+      { id: 10, name: 'Firebase', type: NodeType.Library, x: 2048, y: 3840, dependencies: [], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
+
+      // Test targets (outer ring)
+      { id: 11, name: 'Tests', type: NodeType.Target, x: 512, y: 1024, dependencies: [0], size: 50, color: [0.4, 0.6, 1.0, 1.0] },
+      { id: 12, name: 'UITests', type: NodeType.Target, x: 3584, y: 1024, dependencies: [0, 2], size: 45, color: [0.4, 0.6, 1.0, 1.0] },
+      { id: 13, name: 'Widget', type: NodeType.Target, x: 3584, y: 3072, dependencies: [1, 2], size: 45, color: [0.4, 0.6, 1.0, 1.0] },
+
+      // Additional components
+      { id: 14, name: 'Localization', type: NodeType.Framework, x: 1536, y: 3072, dependencies: [18], size: 50, color: [0.8, 0.4, 0.2, 1.0] },
+      { id: 15, name: 'CoreAnimation', type: NodeType.Library, x: 2560, y: 512, dependencies: [], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
+      { id: 16, name: 'CoreFoundation', type: NodeType.Library, x: 1024, y: 512, dependencies: [], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
+      { id: 17, name: 'Crashlytics', type: NodeType.Library, x: 1536, y: 3584, dependencies: [], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
+      { id: 18, name: 'LocalizationBundle', type: NodeType.Bundle, x: 1792, y: 3584, dependencies: [], size: 45, color: [1.0, 0.4, 1.0, 1.0] },
+
+      // More test targets
+      { id: 19, name: 'UnitTests', type: NodeType.Target, x: 512, y: 3072, dependencies: [0, 1], size: 45, color: [0.4, 0.6, 1.0, 1.0] },
+      { id: 20, name: 'IntegrationTests', type: NodeType.Target, x: 512, y: 3584, dependencies: [0, 3], size: 45, color: [0.4, 0.6, 1.0, 1.0] },
+
+      // Bundle resources
+      { id: 21, name: 'Resources', type: NodeType.Bundle, x: 2304, y: 3072, dependencies: [0], size: 50, color: [1.0, 0.4, 1.0, 1.0] },
+      { id: 22, name: 'Assets', type: NodeType.Bundle, x: 2560, y: 3584, dependencies: [0, 21], size: 50, color: [1.0, 0.4, 1.0, 1.0] },
+    ]
+
+    const pointCount = nodes.length
+    const pointPositions = new Float32Array(pointCount * 2)
+    const pointColors = new Float32Array(pointCount * 4)
+    const pointShapes = new Float32Array(pointCount)
+    const pointSizes = new Float32Array(pointCount)
+    const imageIndices = new Float32Array(pointCount)
+
+    // Create links array for dependencies
+    const links: number[] = []
+    const linkArrows: boolean[] = []
+    const linkColors: number[] = []
+
+    // Set up nodes based on the dependency structure
+    for (const node of nodes) {
+      const i = node.id
+
+      // Set positions
+      pointPositions[i * 2] = node.x
+      pointPositions[i * 2 + 1] = node.y
+
+      // Set node properties - use None shape for all images except targets (s icon)
+      pointShapes[i] = node.type === NodeType.Target ? PointShape.Hexagon : PointShape.None
+      pointSizes[i] = node.size
+      imageIndices[i] = node.type
+
+      // Set colors
+      pointColors[i * 4] = node.color[0]
+      pointColors[i * 4 + 1] = node.color[1]
+      pointColors[i * 4 + 2] = node.color[2]
+      pointColors[i * 4 + 3] = node.color[3]
+
+      // Add dependency links
+      for (const depId of node.dependencies) {
+        links.push(i, depId)
+        linkArrows.push(true)
+
+        // Add colorful link colors based on source node type
+        const sourceType = node.type
+        let linkColor: [number, number, number, number]
+
+        switch (sourceType) {
+        case NodeType.App:
+          linkColor = [0.2, 0.8, 1.0, 0.8] // Bright blue
+          break
+        case NodeType.Framework:
+          linkColor = [1.0, 0.6, 0.2, 0.8] // Orange
+          break
+        case NodeType.Library:
+          linkColor = [0.4, 1.0, 0.4, 0.8] // Green
+          break
+        case NodeType.Bundle:
+          linkColor = [1.0, 0.4, 1.0, 0.8] // Magenta
+          break
+        case NodeType.Target:
+          linkColor = [0.8, 0.4, 1.0, 0.8] // Purple
+          break
+        default:
+          linkColor = [0.7, 0.7, 0.7, 0.8] // Gray
+        }
+
+        // Add RGBA values for this link
+        linkColors.push(linkColor[0], linkColor[1], linkColor[2], linkColor[3])
+      }
+    }
+
+    // Create graph with static positioning
+    const graph = new Graph(graphContainer, {
+      spaceSize,
+      enableSimulation: false,
+      enableDrag: false,
+      linkArrows: true,
+      curvedLinks: true,
+      pointSize: 50,
+      linkWidth: 3,
+      hoveredPointRingColor: 'white',
+      renderHoveredPointRing: true,
+
+      // Add click handler for point and background selection
+      onClick: (pointIndex: number | undefined): void => {
+        if (pointIndex !== undefined) {
+          // Use built-in functionality to select the clicked point and its neighbors
+          graph.selectPointByIndex(pointIndex, true)
+        } else {
+          // Clear selection when clicking on background
+          graph.unselectPoints()
+        }
+      },
+    })
+
+    const imageDataArray = await loadPngImages([swiftUrl, boxUrl, toolboxUrl, legoUrl, sUrl])
+
+    // Set images and their indices
+    graph.setImageData(imageDataArray)
+    graph.setPointImageIndices(imageIndices)
+
+    // Set all data
+    graph.setPointPositions(pointPositions)
+    graph.setPointColors(pointColors)
+    graph.setPointShapes(pointShapes)
+    graph.setPointSizes(pointSizes)
+
+    // Set links if we have any dependencies
+    if (links.length > 0) {
+      graph.setLinks(new Float32Array(links))
+      graph.setLinkArrows(linkArrows)
+      graph.setLinkColors(new Float32Array(linkColors))
+    }
+
+    graph.render()
+
+    return { div, graph }
+  } catch (error) {
+    console.error('Error creating Xcode dependency graph:', error)
+    div.innerHTML = `
+      <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #ff0000; font-size: 18px;">
+        Error loading Xcode dependency graph: ${error instanceof Error ? error.message : 'Unknown error'}
+      </div>
+    `
+    throw error
+  }
+}

package/src/stories/shapes.stories.ts

@@ -3,8 +3,10 @@ import type { Meta } from '@storybook/html'
 import { createStory, Story } from '@/graph/stories/create-story'
 import { CosmosStoryProps } from './create-cosmos'
 import { allShapes } from './shapes/all-shapes'
+import { imageExample } from './shapes/image-example'
 
 import allShapesStoryRaw from './shapes/all-shapes/index?raw'
+import imageExampleStoryRaw from './shapes/image-example/index?raw'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<CosmosStoryProps> = {
@@ -21,5 +23,15 @@ export const AllShapes: Story = {
   },
 }
 
+export const ImageExample: Story = {
+  ...createStory(imageExample),
+  name: 'Image Points Example',
+  parameters: {
+    sourceCode: [
+      { name: 'Story', code: imageExampleStoryRaw },
+    ],
+  },
+}
+
 // eslint-disable-next-line import/no-default-export
 export default meta