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

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

@@ -1,8 +1,19 @@
 import { GraphConfig } from '../../config';
+export declare enum PointShape {
+    Circle = 0,
+    Square = 1,
+    Triangle = 2,
+    Diamond = 3,
+    Pentagon = 4,
+    Hexagon = 5,
+    Star = 6,
+    Cross = 7
+}
 export declare class GraphData {
     inputPointPositions: Float32Array | undefined;
     inputPointColors: Float32Array | undefined;
     inputPointSizes: Float32Array | undefined;
+    inputPointShapes: Float32Array | undefined;
     inputLinkColors: Float32Array | undefined;
     inputLinkWidths: Float32Array | undefined;
     inputLinkStrength: Float32Array | undefined;
@@ -12,6 +23,7 @@ export declare class GraphData {
     pointPositions: Float32Array | undefined;
     pointColors: Float32Array | undefined;
     pointSizes: Float32Array | undefined;
+    pointShapes: Float32Array | undefined;
     inputLinks: Float32Array | undefined;
     links: Float32Array | undefined;
     linkColors: Float32Array | undefined;
@@ -45,6 +57,10 @@ export declare class GraphData {
      * Updates the point sizes based on the input data or default config value.
      */
     updatePointSize(): void;
+    /**
+     * Updates the point shapes based on the input data or default shape (Circle).
+     */
+    updatePointShape(): void;
     updateLinks(): void;
     /**
      * Updates the link colors based on the input data or default config value.

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

@@ -13,6 +13,7 @@ export declare class Points extends CoreModule {
     private colorBuffer;
     private sizeFbo;
     private sizeBuffer;
+    private shapeBuffer;
     private trackedIndicesFbo;
     private trackedPositionsFbo;
     private sampledPointsFbo;
@@ -43,6 +44,7 @@ export declare class Points extends CoreModule {
     updateColor(): void;
     updateGreyoutStatus(): void;
     updateSize(): void;
+    updateShape(): void;
     updateSampledPointsGrid(): void;
     trackPoints(): void;
     draw(): void;

package/dist/stories/shapes/all-shapes/index.d.ts

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

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

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/html';
+import { Story } from './create-story';
+import { CosmosStoryProps } from './create-cosmos';
+declare const meta: Meta<CosmosStoryProps>;
+export declare const AllShapes: Story;
+export default meta;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmos.gl/graph",
-  "version": "2.3.0",
+  "version": "2.3.1-beta.1",
   "description": "GPU-based force graph layout and rendering",
   "jsdelivr": "dist/index.min.js",
   "main": "dist/index.js",

package/src/config.ts

@@ -492,6 +492,12 @@ export interface GraphConfigInterface {
    * Default: `undefined`
    */
   fitViewByPointsInRect?: [[number, number], [number, number]] | [number, number][];
+  /**
+   * When `fitViewOnInit` is set to `true`, fits the view to show only the specified points by their indices.
+   * Takes precedence over `fitViewByPointsInRect` when both are provided.
+   * Default: `undefined`
+   */
+  fitViewByPointIndices?: number[];
   /**
    * Providing a `randomSeed` value allows you to control
    * the randomness of the layout across different simulation runs.
@@ -605,6 +611,7 @@ export class GraphConfig implements GraphConfigInterface {
   public fitViewPadding = defaultConfigValues.fitViewPadding
   public fitViewDuration = defaultConfigValues.fitViewDuration
   public fitViewByPointsInRect = undefined
+  public fitViewByPointIndices = undefined
 
   public randomSeed = undefined
   public pointSamplingDistance = defaultConfigValues.pointSamplingDistance

package/src/index.ts

@@ -67,6 +67,7 @@ export class Graph {
   private _needsPointPositionsUpdate = false
   private _needsPointColorUpdate = false
   private _needsPointSizeUpdate = false
+  private _needsPointShapeUpdate = false
   private _needsLinksUpdate = false
   private _needsLinkColorUpdate = false
   private _needsLinkWidthUpdate = false
@@ -303,6 +304,7 @@ export class Graph {
     // 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
@@ -346,6 +348,20 @@ export class Graph {
     this._needsPointSizeUpdate = true
   }
 
+  /**
+   * Sets the shapes for the graph points.
+   *
+   * @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.
+   * Example: `new Float32Array([0, 1, 2])` sets the first point to Circle, the second point to Square, and the third point to Triangle.
+   */
+  public setPointShapes (pointShapes: Float32Array): void {
+    if (this._isDestroyed) return
+    this.graph.inputPointShapes = pointShapes
+    this._needsPointShapeUpdate = true
+  }
+
   /**
    * Gets the current sizes of the graph points.
    *
@@ -509,7 +525,7 @@ export class Graph {
   public render (simulationAlpha?: number): void {
     if (this._isDestroyed || !this.reglInstance) return
     this.graph.update()
-    const { fitViewOnInit, fitViewDelay, fitViewPadding, fitViewDuration, fitViewByPointsInRect, initialZoomLevel } = this.config
+    const { fitViewOnInit, fitViewDelay, fitViewPadding, fitViewDuration, fitViewByPointsInRect, fitViewByPointIndices, initialZoomLevel } = this.config
     if (!this.graph.pointsNumber && !this.graph.linksNumber) {
       this.stopFrames()
       select(this.canvas).style('cursor', null)
@@ -524,7 +540,8 @@ export class Graph {
     // If `initialZoomLevel` is set, we don't need to fit the view
     if (this._isFirstRenderAfterInit && fitViewOnInit && initialZoomLevel === undefined) {
       this._fitViewOnInitTimeoutID = window.setTimeout(() => {
-        if (fitViewByPointsInRect) this.setZoomTransformByPointPositions(fitViewByPointsInRect, fitViewDuration, undefined, fitViewPadding)
+        if (fitViewByPointIndices) this.fitViewByPointIndices(fitViewByPointIndices, fitViewDuration, fitViewPadding)
+        else if (fitViewByPointsInRect) this.setZoomTransformByPointPositions(fitViewByPointsInRect, fitViewDuration, undefined, fitViewPadding)
         else this.fitView(fitViewDuration, fitViewPadding)
       }, fitViewDelay)
     }
@@ -1100,6 +1117,7 @@ export class Graph {
     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()
@@ -1117,6 +1135,7 @@ export class Graph {
     this._needsPointPositionsUpdate = false
     this._needsPointColorUpdate = false
     this._needsPointSizeUpdate = false
+    this._needsPointShapeUpdate = false
     this._needsLinksUpdate = false
     this._needsLinkColorUpdate = false
     this._needsLinkWidthUpdate = false
@@ -1412,5 +1431,6 @@ export class Graph {
 }
 
 export type { GraphConfigInterface } from './config'
+export { PointShape } from './modules/GraphData'
 
 export * from './helper'

package/src/modules/GraphData/index.ts

@@ -1,9 +1,22 @@
 import { getRgbaColor, isNumber } from '@/graph/helper'
 import { GraphConfig } from '@/graph/config'
+
+export enum PointShape {
+  Circle = 0,
+  Square = 1,
+  Triangle = 2,
+  Diamond = 3,
+  Pentagon = 4,
+  Hexagon = 5,
+  Star = 6,
+  Cross = 7
+}
+
 export class GraphData {
   public inputPointPositions: Float32Array | undefined
   public inputPointColors: Float32Array | undefined
   public inputPointSizes: Float32Array | undefined
+  public inputPointShapes: Float32Array | undefined
   public inputLinkColors: Float32Array | undefined
   public inputLinkWidths: Float32Array | undefined
   public inputLinkStrength: Float32Array | undefined
@@ -14,6 +27,7 @@ export class GraphData {
   public pointPositions: Float32Array | undefined
   public pointColors: Float32Array | undefined
   public pointSizes: Float32Array | undefined
+  public pointShapes: Float32Array | undefined
 
   public inputLinks: Float32Array | undefined
   public links: Float32Array | undefined
@@ -109,6 +123,30 @@ export class GraphData {
     }
   }
 
+  /**
+   * Updates the point shapes based on the input data or default shape (Circle).
+   */
+  public updatePointShape (): void {
+    if (this.pointsNumber === undefined) {
+      this.pointShapes = undefined
+      return
+    }
+
+    // Sets point shapes to default values (Circle) 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)
+    } 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
+        }
+      }
+    }
+  }
+
   public updateLinks (): void {
     this.links = this.inputLinks
   }
@@ -222,6 +260,7 @@ export class GraphData {
     this.updatePoints()
     this.updatePointColor()
     this.updatePointSize()
+    this.updatePointShape()
 
     this.updateLinks()
     this.updateLinkColor()

package/src/modules/Lines/draw-curve-line.vert

@@ -63,7 +63,11 @@ float calculateArrowWidth(float arrowWidth) {
   if (scaleLinksOnZoom) {
     return arrowWidth;
   } else {
-    return arrowWidth / transformationMatrix[0][0];
+    // Apply the same scaling logic as calculateLinkWidth to maintain proportionality
+    arrowWidth = arrowWidth / transformationMatrix[0][0];
+    // Apply the same non-linear scaling to avoid extreme widths
+    arrowWidth *= min(5.0, max(1.0, transformationMatrix[0][0] * 0.01));
+    return arrowWidth;
   }
 }
 
@@ -100,7 +104,8 @@ void main() {
   float arrowWidth = linkWidth * k;
   arrowWidth *= arrowSizeScale;
 
-  float arrowWidthDifference = arrowWidth - linkWidth;
+  // Ensure arrow width difference is non-negative to prevent unwanted changes to link width
+  float arrowWidthDifference = max(0.0, arrowWidth - linkWidth);
 
   // Calculate arrow width in pixels
   float arrowWidthPx = calculateArrowWidth(arrowWidth);

package/src/modules/Points/draw-points.frag

@@ -1,4 +1,4 @@
-// Fragment shader for rendering points with a smooth circular edge
+// Fragment shader for rendering points with various shapes and smooth edges
 
 #ifdef GL_ES
 precision highp float;
@@ -7,20 +7,145 @@ precision highp float;
 // The color and alpha values from the vertex shader
 varying vec3 rgbColor;
 varying float alpha;
+varying float pointShape;
 
-// Smoothing control the smoothness of the point’s edge
+// Smoothing controls the smoothness of the point's edge
 const float smoothing = 0.9;
 
+// Shape constants
+const float CIRCLE = 0.0;
+const float SQUARE = 1.0;
+const float TRIANGLE = 2.0;
+const float DIAMOND = 3.0;
+const float PENTAGON = 4.0;
+const float HEXAGON = 5.0;
+const float STAR = 6.0;
+const float CROSS = 7.0;
+
+// Distance functions for different shapes
+float circleDistance(vec2 p) {
+    return dot(p, p);
+}
+
+float squareDistance(vec2 p) {
+    vec2 d = abs(p) - vec2(0.8);
+    return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0);
+}
+
+float triangleDistance(vec2 p) {
+    const float k = sqrt(3.0);   // ≈1.732; slope of 60° lines for an equilateral triangle
+    p.x = abs(p.x) - 0.9;        // fold the X axis and shift: brings left and right halves together
+    p.y = p.y + 0.55;             // move the whole shape up slightly so it is centred vertically
+
+    // reflect points that fall outside the main triangle back inside, to reuse the same maths
+    if (p.x + k * p.y > 0.0)
+        p = vec2(p.x - k * p.y,  -k * p.x - p.y) / 2.0;
+
+    p.x -= clamp(p.x, -1.0, 0.0); // clip any remainder on the left side
+
+    // Return signed distance: negative = inside; positive = outside
+    return -length(p) * sign(p.y);
+}
+
+float diamondDistance(vec2 p) {
+    // aspect > 1  →  taller diamond
+    const float aspect = 1.2;
+    return abs(p.x) + abs(p.y) / aspect - 0.8;
+}
+
+float pentagonDistance(vec2 p) {
+    // Regular pentagon signed-distance (Inigo Quilez)
+    const vec3 k = vec3(0.809016994, 0.587785252, 0.726542528);
+    p.x = abs(p.x);
+
+    // Reflect across the two tilted edges ─ only if point is outside
+    p -= 2.0 * min(dot(vec2(-k.x, k.y), p), 0.0) * vec2(-k.x, k.y);
+    p -= 2.0 * min(dot(vec2( k.x, k.y), p), 0.0) * vec2( k.x, k.y);
+
+    // Clip against the top horizontal edge (keeps top point sharp)
+    p -= vec2(clamp(p.x, -k.z * k.x, k.z * k.x), k.z);
+
+    // Return signed distance (negative → inside, positive → outside)
+    return length(p) * sign(p.y);
+}
+
+float hexagonDistance(vec2 p) {
+    const vec3 k = vec3(-0.866025404, 0.5, 0.577350269);
+    p = abs(p);
+    p -= 2.0 * min(dot(k.xy, p), 0.0) * k.xy;
+    p -= vec2(clamp(p.x, -k.z * 0.8, k.z * 0.8), 0.8);
+    return length(p) * sign(p.y);
+}
+
+float starDistance(vec2 p) {
+    // 5-point star signed-distance function (adapted from Inigo Quilez)
+    // r  – outer radius, rf – inner/outer radius ratio
+    const float r  = 0.9;
+    const float rf = 0.45;
+
+    // Pre-computed rotation vectors for the star arms (36° increments)
+    const vec2 k1 = vec2(0.809016994, -0.587785252);
+    const vec2 k2 = vec2(-k1.x, k1.y);
+
+    // Fold the plane into a single arm sector
+    p.x = abs(p.x);
+    p -= 2.0 * max(dot(k1, p), 0.0) * k1;
+    p -= 2.0 * max(dot(k2, p), 0.0) * k2;
+    p.x = abs(p.x);
+
+    // Translate so the top tip of the star lies on the X-axis
+    p.y -= r;
+
+    // Vector describing the edge between an outer tip and its adjacent inner point
+    vec2 ba = rf * vec2(-k1.y, k1.x) - vec2(0.0, 1.0);
+    // Project the point onto that edge and clamp the projection to the segment
+    float h = clamp(dot(p, ba) / dot(ba, ba), 0.0, r);
+
+    // Return signed distance (negative => inside, positive => outside)
+    return length(p - ba * h) * sign(p.y * ba.x - p.x * ba.y);
+}
+
+float crossDistance(vec2 p) {
+    // Signed distance function for a cross (union of two rectangles)
+    // Adapted from Inigo Quilez (https://iquilezles.org/)
+    // Each arm has half-sizes 0.3 (thickness) and 0.8 (length)
+    p = abs(p);
+    if (p.y > p.x) p = p.yx;       // exploit symmetry
+
+    vec2 q = p - vec2(0.8, 0.3);   // subtract half-sizes (length, thickness)
+
+    // Standard rectangle SDF, then take union of the two arms
+    return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0);
+}
+
+float getShapeDistance(vec2 p, float shape) {
+    if (shape == SQUARE) return squareDistance(p);
+    else if (shape == TRIANGLE) return triangleDistance(p);
+    else if (shape == DIAMOND) return diamondDistance(p);
+    else if (shape == PENTAGON) return pentagonDistance(p);
+    else if (shape == HEXAGON) return hexagonDistance(p);
+    else if (shape == STAR) return starDistance(p);
+    else if (shape == CROSS) return crossDistance(p);
+    else return circleDistance(p); // Default to circle
+}
+
 void main() {
     // Discard the fragment if the point is fully transparent
     if (alpha == 0.0) { discard; }
 
     // Calculate coordinates within the point
     vec2 pointCoord = 2.0 * gl_PointCoord - 1.0;
-    // Calculate squared distance from the center
-    float pointCenterDistance = dot(pointCoord, pointCoord);
-    // Calculate opacity based on distance and smoothing
-    float opacity = alpha * (1.0 - smoothstep(smoothing, 1.0, pointCenterDistance));
+    
+    float opacity;
+    if (pointShape == CIRCLE) {
+        // For circles, use the original distance calculation
+        float pointCenterDistance = dot(pointCoord, pointCoord);
+        opacity = alpha * (1.0 - smoothstep(smoothing, 1.0, pointCenterDistance));
+    } else {
+        // For other shapes, use the shape distance function
+        float shapeDistance = getShapeDistance(pointCoord, pointShape);
+        opacity = alpha * (1.0 - smoothstep(-0.01, 0.01, shapeDistance));
+    }
 
     gl_FragColor = vec4(rgbColor, opacity);
 }

package/src/modules/Points/draw-points.vert

@@ -5,6 +5,7 @@ precision highp float;
 attribute vec2 pointIndices;
 attribute float size;
 attribute vec4 color;
+attribute float shape;
 
 uniform sampler2D positionsTexture;
 uniform sampler2D pointGreyoutStatus;
@@ -21,10 +22,13 @@ uniform vec4 backgroundColor;
 uniform bool scalePointsOnZoom;
 uniform float maxPointSize;
 uniform bool darkenGreyout;
+uniform bool skipSelected;
+uniform bool skipUnselected;
 
 varying vec2 textureCoords;
 varying vec3 rgbColor;
 varying float alpha;
+varying float pointShape;
 
 float calculatePointSize(float size) {
   float pSize;
@@ -39,6 +43,23 @@ float calculatePointSize(float size) {
 
 void main() {  
   textureCoords = pointIndices;
+  
+  // Check greyout status for selective rendering
+  vec4 greyoutStatus = texture2D(pointGreyoutStatus, (textureCoords + 0.5) / pointsTextureSize);
+  bool isSelected = greyoutStatus.r == 0.0;
+  
+  // Discard point based on rendering mode
+  if (skipSelected && isSelected) {
+    gl_Position = vec4(2.0, 2.0, 2.0, 1.0); // Move off-screen
+    gl_PointSize = 0.0;
+    return;
+  }
+  if (skipUnselected && !isSelected) {
+    gl_Position = vec4(2.0, 2.0, 2.0, 1.0); // Move off-screen
+    gl_PointSize = 0.0;
+    return;
+  }
+  
   // Position
   vec4 pointPosition = texture2D(positionsTexture, (textureCoords + 0.5) / pointsTextureSize);
   vec2 point = pointPosition.rg;
@@ -53,9 +74,9 @@ void main() {
 
   rgbColor = color.rgb;
   alpha = color.a * pointOpacity;
+  pointShape = shape;
 
   // Adjust alpha of selected points
-  vec4 greyoutStatus = texture2D(pointGreyoutStatus, (textureCoords + 0.5) / pointsTextureSize);
   if (greyoutStatus.r > 0.0) {
     if (greyoutColor[0] != -1.0) {
       rgbColor = greyoutColor.rgb;

package/src/modules/Points/index.ts

@@ -34,6 +34,7 @@ export class Points extends CoreModule {
   private colorBuffer: regl.Buffer | undefined
   private sizeFbo: regl.Framebuffer2D | undefined
   private sizeBuffer: regl.Buffer | undefined
+  private shapeBuffer: regl.Buffer | undefined
   private trackedIndicesFbo: regl.Framebuffer2D | undefined
   private trackedPositionsFbo: regl.Framebuffer2D | undefined
   private sampledPointsFbo: regl.Framebuffer2D | undefined
@@ -222,6 +223,10 @@ export class Points extends CoreModule {
             buffer: () => this.colorBuffer,
             size: 4,
           },
+          shape: {
+            buffer: () => this.shapeBuffer,
+            size: 1,
+          },
         },
         uniforms: {
           positionsTexture: () => this.currentPositionFbo,
@@ -239,6 +244,8 @@ export class Points extends CoreModule {
           darkenGreyout: () => store.darkenGreyout,
           scalePointsOnZoom: () => config.scalePointsOnZoom,
           maxPointSize: () => store.maxPointSize,
+          skipSelected: reglInstance.prop<{ skipSelected: boolean }, 'skipSelected'>('skipSelected'),
+          skipUnselected: reglInstance.prop<{ skipUnselected: boolean }, 'skipUnselected'>('skipUnselected'),
         },
         blend: {
           enable: true,
@@ -518,6 +525,13 @@ export class Points extends CoreModule {
     })
   }
 
+  public updateShape (): void {
+    const { reglInstance, data } = this
+    if (data.pointsNumber === undefined || data.pointShapes === undefined) return
+    if (!this.shapeBuffer) this.shapeBuffer = reglInstance.buffer(0)
+    this.shapeBuffer(data.pointShapes)
+  }
+
   public updateSampledPointsGrid (): void {
     const { store: { screenSize }, config: { pointSamplingDistance }, reglInstance } = this
     let dist = pointSamplingDistance ?? Math.min(...screenSize) / 2
@@ -542,7 +556,18 @@ export class Points extends CoreModule {
     const { config: { renderHoveredPointRing, pointSize }, store, data } = this
     if (!this.colorBuffer) this.updateColor()
     if (!this.sizeBuffer) this.updateSize()
-    this.drawCommand?.()
+    if (!this.shapeBuffer) this.updateShape()
+
+    // Render in layers: unselected points first (behind), then selected points (in front)
+    if (store.selectedIndices && store.selectedIndices.length > 0) {
+      // First draw unselected points (they will appear behind)
+      this.drawCommand?.({ skipSelected: true, skipUnselected: false })
+      // Then draw selected points (they will appear in front)
+      this.drawCommand?.({ skipSelected: false, skipUnselected: true })
+    } else {
+      // If no selection, draw all points
+      this.drawCommand?.({ skipSelected: false, skipUnselected: false })
+    }
     if ((renderHoveredPointRing) && store.hoveredPoint) {
       this.drawHighlightedCommand?.({
         width: 0.85,

package/src/stories/2. configuration.mdx

@@ -48,6 +48,7 @@ import { Meta } from "@storybook/blocks";
 | fitViewPadding | Extra space around points when fitting view | `0.1` |
 | fitViewDuration | Animation duration for fit view operation in milliseconds | `250` |
 | fitViewByPointsInRect | When `fitViewOnInit` is set to `true`, fits the view to show the points within a rectangle defined by its two corner coordinates `[[left, bottom], [right, top]]` in the scene space | `undefined` |
+| fitViewByPointIndices | When `fitViewOnInit` is set to `true`, fits the view to show only the specified points by their indices. Takes precedence over `fitViewByPointsInRect` when both are provided. | `undefined` |
 | randomSeed | Providing a value allows control over layout randomness for consistency across simulations. Applied only on initialization | `undefined` |
 | pointSamplingDistance | Sampling density for point position methods (used in `getSampledPointPositionsMap`) in pixels | `150` |
 | attribution | Controls the text shown in the bottom right corner. Provide HTML content as a string for custom attribution. Empty string hides attribution | `''` |

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

@@ -75,6 +75,39 @@ This method retrieves the current sizes of the graph points that were previously
 
 The returned array contains the processed point sizes used for rendering, including any default values that were applied during processing.
 
+### <a name="set_point_shapes" href="#set_point_shapes">#</a> graph.<b>setPointShapes</b>(<i>pointShapes</i>)
+
+This method sets the shapes for the graph points.
+
+* **`pointShapes`** (Float32Array): A Float32Array representing the shapes of points in the format `[shape1, shape2, ..., shapeN]`, where each `shape` value corresponds to the shape of the point at the same index in the graph's data. Each shape value should be one of the available shape constants:
+
+| Shape Value | Shape Name |
+|-------------|------------|
+| 0 | Circle |
+| 1 | Square |
+| 2 | Triangle |
+| 3 | Diamond |
+| 4 | Pentagon |
+| 5 | Hexagon |
+| 6 | Star |
+| 7 | Cross |
+
+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).
+
+**Example:**
+```javascript
+import { Graph, PointShape } from '@cosmos.gl/graph'
+
+// Create a mixed set of shapes using the PointShape enum
+graph.setPointShapes(new Float32Array([
+  PointShape.Circle,   // Circle for first point
+  PointShape.Star,     // Star for second point
+  PointShape.Triangle, // Triangle for third point
+  PointShape.Hexagon   // Hexagon for fourth point
+]));
+graph.render();
+```
+
 ### <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/shapes/all-shapes/index.ts

@@ -0,0 +1,69 @@
+import { Graph, PointShape } from '@cosmos.gl/graph'
+
+export const allShapes = (): {div: HTMLDivElement; graph: Graph } => {
+  // Create container div
+  const div = document.createElement('div')
+  div.style.height = '100vh'
+  div.style.width = '100%'
+
+  // Create 8 points, one for each shape
+  const spaceSize = 4096
+  const pointCount = 8
+  const spacing = spaceSize / pointCount
+
+  const pointPositions = new Float32Array(pointCount * 2)
+  const pointColors = new Float32Array(pointCount * 4)
+  const pointShapes = new Float32Array(pointCount)
+
+  // Define distinct colors for each shape
+  const shapeColors: [number, number, number][] = [
+    [1.0, 0.42, 0.38], // Coral for Circle
+    [0.13, 0.55, 0.45], // Forest Green for Square
+    [0.25, 0.32, 0.71], // Royal Blue for Triangle
+    [0.96, 0.76, 0.19], // Amber Gold for Diamond
+    [0.74, 0.24, 0.45], // Deep Rose for Pentagon
+    [0.18, 0.55, 0.56], // Teal for Hexagon
+    [0.85, 0.45, 0.28], // Terracotta for Star
+    [0.58, 0.44, 0.86], // Periwinkle for Cross
+  ]
+
+  // Position points in a horizontal line
+  const startX = spacing / 2
+  const centerY = spaceSize / 2
+  for (let i = 0; i < pointCount; i++) {
+    // Position: horizontal line, centered
+    pointPositions[i * 2] = startX + i * spacing
+    pointPositions[i * 2 + 1] = centerY
+
+    // Color: distinct color for each shape
+    const color = shapeColors[i] || [1.0, 1.0, 1.0] // fallback to white if undefined
+    pointColors[i * 4] = color[0] // R
+    pointColors[i * 4 + 1] = color[1] // G
+    pointColors[i * 4 + 2] = color[2] // B
+    pointColors[i * 4 + 3] = 1.0 // A
+
+    // Shape: cycle through all available shapes
+    pointShapes[i] = i as PointShape
+  }
+
+  // Create graph with minimal configuration
+  const graph = new Graph(div, {
+    spaceSize,
+    pointSize: spacing / 2,
+    enableSimulation: false,
+    scalePointsOnZoom: true,
+    renderHoveredPointRing: true,
+    hoveredPointRingColor: '#ffffff',
+    rescalePositions: false,
+    enableDrag: true,
+  })
+
+  // Set data
+  graph.setPointPositions(pointPositions)
+  graph.setPointColors(pointColors)
+  graph.setPointShapes(pointShapes)
+
+  graph.render()
+
+  return { div, graph }
+}