@cosmos.gl/graph 2.1.0 → 2.2.1

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

@@ -21,6 +21,7 @@ export declare class Points extends CoreModule {
     private updatePositionCommand;
     private dragPointCommand;
     private findPointsOnAreaSelectionCommand;
+    private findPointsOnPolygonSelectionCommand;
     private findHoveredPointCommand;
     private clearHoveredFboCommand;
     private clearSampledPointsFboCommand;
@@ -31,6 +32,9 @@ export declare class Points extends CoreModule {
     private greyoutStatusTexture;
     private sizeTexture;
     private trackedIndicesTexture;
+    private polygonPathTexture;
+    private polygonPathFbo;
+    private polygonPathLength;
     private drawPointIndices;
     private hoveredPointIndices;
     private sampledPointIndices;
@@ -45,6 +49,8 @@ export declare class Points extends CoreModule {
     updatePosition(): void;
     drag(): void;
     findPointsOnAreaSelection(): void;
+    findPointsOnPolygonSelection(): void;
+    updatePolygonPath(polygonPath: [number, number][]): void;
     findHoveredPoint(): void;
     trackPointsByIndices(indices?: number[] | undefined): void;
     getTrackedPositionsMap(): Map<number, [number, number]>;

package/dist/stories/clusters/polygon-selection/index.d.ts

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

package/dist/stories/clusters/polygon-selection/polygon.d.ts

@@ -0,0 +1,20 @@
+export declare class PolygonSelection {
+    private canvas;
+    private ctx;
+    private isDrawing;
+    private points;
+    private graphDiv;
+    private onPolygonComplete?;
+    private boundStartDrawing;
+    private boundDraw;
+    private boundStopDrawing;
+    private resizeObserver;
+    constructor(graphDiv: HTMLElement, onPolygonComplete?: (points: [number, number][]) => void);
+    enablePolygonMode(): void;
+    disablePolygonMode(): void;
+    destroy(): void;
+    private resizeCanvas;
+    private startDrawing;
+    private draw;
+    private stopDrawing;
+}

package/dist/stories/clusters.stories.d.ts

@@ -5,4 +5,5 @@ declare const meta: Meta<CosmosStoryProps>;
 export declare const Worm: Story;
 export declare const Radial: Story;
 export declare const WithLabels: Story;
+export declare const PolygonSelection: Story;
 export default meta;

package/package.json

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

package/src/index.ts

@@ -648,7 +648,7 @@ export class Graph {
    * The `top` and `bottom` coordinates should be from 0 to the height of the canvas.
    * @returns A Float32Array containing the indices of points inside a rectangular area.
    */
-  public getPointsInRange (selection: [[number, number], [number, number]]): Float32Array {
+  public getPointsInRect (selection: [[number, number], [number, number]]): Float32Array {
     if (this._isDestroyed || !this.reglInstance || !this.points) return new Float32Array()
     const h = this.store.screenSize[1]
     this.store.selectedArea = [[selection[0][0], (h - selection[1][1])], [selection[1][0], (h - selection[0][1])]]
@@ -663,11 +663,48 @@ export class Graph {
       .filter(d => d !== -1)
   }
 
+  /**
+   * Get points indices inside a rectangular area.
+   * @param selection - Array of two corner points `[[left, top], [right, bottom]]`.
+   * The `left` and `right` coordinates should be from 0 to the width of the canvas.
+   * The `top` and `bottom` coordinates should be from 0 to the height of the canvas.
+   * @returns A Float32Array containing the indices of points inside a rectangular area.
+   * @deprecated Use `getPointsInRect` instead. This method will be removed in a future version.
+   */
+  public getPointsInRange (selection: [[number, number], [number, number]]): Float32Array {
+    return this.getPointsInRect(selection)
+  }
+
+  /**
+   * Get points indices inside a polygon area.
+   * @param polygonPath - Array of points `[[x1, y1], [x2, y2], ..., [xn, yn]]` that defines the polygon.
+   * The coordinates should be from 0 to the width/height of the canvas.
+   * @returns A Float32Array containing the indices of points inside the polygon area.
+   */
+  public getPointsInPolygon (polygonPath: [number, number][]): Float32Array {
+    if (this._isDestroyed || !this.reglInstance || !this.points) return new Float32Array()
+    if (polygonPath.length < 3) return new Float32Array() // Need at least 3 points for a polygon
+
+    const h = this.store.screenSize[1]
+    // Convert coordinates to WebGL coordinate system (flip Y)
+    const convertedPath = polygonPath.map(([x, y]) => [x, h - y] as [number, number])
+    this.points.updatePolygonPath(convertedPath)
+    this.points.findPointsOnPolygonSelection()
+    const pixels = readPixels(this.reglInstance, this.points.selectedFbo as regl.Framebuffer2D)
+
+    return pixels
+      .map((pixel, i) => {
+        if (i % 4 === 0 && pixel !== 0) return i / 4
+        else return -1
+      })
+      .filter(d => d !== -1)
+  }
+
   /** Select points inside a rectangular area.
    * @param selection - Array of two corner points `[[left, top], [right, bottom]]`.
    * The `left` and `right` coordinates should be from 0 to the width of the canvas.
    * The `top` and `bottom` coordinates should be from 0 to the height of the canvas. */
-  public selectPointsInRange (selection: [[number, number], [number, number]] | null): void {
+  public selectPointsInRect (selection: [[number, number], [number, number]] | null): void {
     if (this._isDestroyed || !this.reglInstance || !this.points) return
     if (selection) {
       const h = this.store.screenSize[1]
@@ -686,6 +723,46 @@ export class Graph {
     this.points.updateGreyoutStatus()
   }
 
+  /** Select points inside a rectangular area.
+   * @param selection - Array of two corner points `[[left, top], [right, bottom]]`.
+   * The `left` and `right` coordinates should be from 0 to the width of the canvas.
+   * The `top` and `bottom` coordinates should be from 0 to the height of the canvas.
+   * @deprecated Use `selectPointsInRect` instead. This method will be removed in a future version.
+   */
+  public selectPointsInRange (selection: [[number, number], [number, number]] | null): void {
+    return this.selectPointsInRect(selection)
+  }
+
+  /** Select points inside a polygon area.
+   * @param polygonPath - Array of points `[[x1, y1], [x2, y2], ..., [xn, yn]]` that defines the polygon.
+   * The coordinates should be from 0 to the width/height of the canvas.
+   * Set to null to clear selection. */
+  public selectPointsInPolygon (polygonPath: [number, number][] | null): void {
+    if (this._isDestroyed || !this.reglInstance || !this.points) return
+    if (polygonPath) {
+      if (polygonPath.length < 3) {
+        console.warn('Polygon path requires at least 3 points to form a polygon.')
+        return
+      }
+
+      const h = this.store.screenSize[1]
+      // Convert coordinates to WebGL coordinate system (flip Y)
+      const convertedPath = polygonPath.map(([x, y]) => [x, h - y] as [number, number])
+      this.points.updatePolygonPath(convertedPath)
+      this.points.findPointsOnPolygonSelection()
+      const pixels = readPixels(this.reglInstance, this.points.selectedFbo as regl.Framebuffer2D)
+      this.store.selectedIndices = pixels
+        .map((pixel, i) => {
+          if (i % 4 === 0 && pixel !== 0) return i / 4
+          else return -1
+        })
+        .filter(d => d !== -1)
+    } else {
+      this.store.selectedIndices = null
+    }
+    this.points.updateGreyoutStatus()
+  }
+
   /**
    * Select a point by index. If you want the adjacent points to get selected too, provide `true` as the second argument.
    * @param index The index of the point in the array of points.

package/src/modules/Points/find-points-on-polygon-selection.frag

@@ -0,0 +1,65 @@
+#ifdef GL_ES
+precision highp float;
+#endif
+
+uniform sampler2D positionsTexture;
+uniform sampler2D polygonPathTexture; // Texture containing polygon path points
+uniform int polygonPathLength;
+uniform float spaceSize;
+uniform vec2 screenSize;
+uniform mat3 transformationMatrix;
+
+varying vec2 textureCoords;
+
+// Get a point from the polygon path texture at a specific index
+vec2 getPolygonPoint(sampler2D pathTexture, int index, int pathLength) {
+  if (index >= pathLength) return vec2(0.0);
+  
+  // Calculate texture coordinates for the index
+  int textureSize = int(ceil(sqrt(float(pathLength))));
+  int x = index - (index / textureSize) * textureSize;
+  int y = index / textureSize;
+  
+  vec2 texCoord = (vec2(float(x), float(y)) + 0.5) / float(textureSize);
+  vec4 pathData = texture2D(pathTexture, texCoord);
+  
+  return pathData.xy;
+}
+
+// Point-in-polygon algorithm using ray casting
+bool pointInPolygon(vec2 point, sampler2D pathTexture, int pathLength) {
+  bool inside = false;
+  
+  for (int i = 0; i < 2048; i++) {
+    if (i >= pathLength) break;
+    
+    int j = int(mod(float(i + 1), float(pathLength)));
+    
+    vec2 pi = getPolygonPoint(pathTexture, i, pathLength);
+    vec2 pj = getPolygonPoint(pathTexture, j, pathLength);
+    
+    if (((pi.y > point.y) != (pj.y > point.y)) &&
+        (point.x < (pj.x - pi.x) * (point.y - pi.y) / (pj.y - pi.y) + pi.x)) {
+      inside = !inside;
+    }
+  }
+  
+  return inside;
+}
+
+void main() {
+  vec4 pointPosition = texture2D(positionsTexture, textureCoords);
+  vec2 p = 2.0 * pointPosition.rg / spaceSize - 1.0;
+  p *= spaceSize / screenSize;
+  vec3 final = transformationMatrix * vec3(p, 1);
+
+  // Convert to screen coordinates for polygon check
+  vec2 screenPos = (final.xy + 1.0) * screenSize / 2.0;
+  
+  gl_FragColor = vec4(0.0, 0.0, pointPosition.rg);
+  
+  // Check if point center is inside the polygon
+  if (pointInPolygon(screenPos, polygonPathTexture, polygonPathLength)) {
+    gl_FragColor.r = 1.0;
+  }
+} 

package/src/modules/Points/index.ts

@@ -6,6 +6,7 @@ import { defaultConfigValues } from '@/graph/variables'
 import drawPointsFrag from '@/graph/modules/Points/draw-points.frag'
 import drawPointsVert from '@/graph/modules/Points/draw-points.vert'
 import findPointsOnAreaSelectionFrag from '@/graph/modules/Points/find-points-on-area-selection.frag'
+import findPointsOnPolygonSelectionFrag from '@/graph/modules/Points/find-points-on-polygon-selection.frag'
 import drawHighlightedFrag from '@/graph/modules/Points/draw-highlighted.frag'
 import drawHighlightedVert from '@/graph/modules/Points/draw-highlighted.vert'
 import findHoveredPointFrag from '@/graph/modules/Points/find-hovered-point.frag'
@@ -41,6 +42,7 @@ export class Points extends CoreModule {
   private updatePositionCommand: regl.DrawCommand | undefined
   private dragPointCommand: regl.DrawCommand | undefined
   private findPointsOnAreaSelectionCommand: regl.DrawCommand | undefined
+  private findPointsOnPolygonSelectionCommand: regl.DrawCommand | undefined
   private findHoveredPointCommand: regl.DrawCommand | undefined
   private clearHoveredFboCommand: regl.DrawCommand | undefined
   private clearSampledPointsFboCommand: regl.DrawCommand | undefined
@@ -51,6 +53,9 @@ export class Points extends CoreModule {
   private greyoutStatusTexture: regl.Texture2D | undefined
   private sizeTexture: regl.Texture2D | undefined
   private trackedIndicesTexture: regl.Texture2D | undefined
+  private polygonPathTexture: regl.Texture2D | undefined
+  private polygonPathFbo: regl.Framebuffer2D | undefined
+  private polygonPathLength = 0
   private drawPointIndices: regl.Buffer | undefined
   private hoveredPointIndices: regl.Buffer | undefined
   private sampledPointIndices: regl.Buffer | undefined
@@ -280,6 +285,27 @@ export class Points extends CoreModule {
       })
     }
 
+    if (!this.findPointsOnPolygonSelectionCommand) {
+      this.findPointsOnPolygonSelectionCommand = reglInstance({
+        frag: findPointsOnPolygonSelectionFrag,
+        vert: updateVert,
+        framebuffer: () => this.selectedFbo as regl.Framebuffer2D,
+        primitive: 'triangle strip',
+        count: 4,
+        attributes: {
+          vertexCoord: createQuadBuffer(reglInstance),
+        },
+        uniforms: {
+          positionsTexture: () => this.currentPositionFbo,
+          spaceSize: () => store.adjustedSpaceSize,
+          screenSize: () => store.screenSize,
+          transformationMatrix: () => store.transform,
+          polygonPathTexture: () => this.polygonPathTexture,
+          polygonPathLength: () => this.polygonPathLength,
+        },
+      })
+    }
+
     if (!this.clearHoveredFboCommand) {
       this.clearHoveredFboCommand = reglInstance({
         frag: clearFrag,
@@ -547,6 +573,49 @@ export class Points extends CoreModule {
     this.findPointsOnAreaSelectionCommand?.()
   }
 
+  public findPointsOnPolygonSelection (): void {
+    this.findPointsOnPolygonSelectionCommand?.()
+  }
+
+  public updatePolygonPath (polygonPath: [number, number][]): void {
+    const { reglInstance } = this
+    this.polygonPathLength = polygonPath.length
+
+    if (polygonPath.length === 0) {
+      this.polygonPathTexture = undefined
+      this.polygonPathFbo = undefined
+      return
+    }
+
+    // Calculate texture size (square texture)
+    const textureSize = Math.ceil(Math.sqrt(polygonPath.length))
+    const textureData = new Float32Array(textureSize * textureSize * 4)
+
+    // Fill texture with polygon path points
+    for (const [i, point] of polygonPath.entries()) {
+      const [x, y] = point
+      textureData[i * 4] = x
+      textureData[i * 4 + 1] = y
+      textureData[i * 4 + 2] = 0 // unused
+      textureData[i * 4 + 3] = 0 // unused
+    }
+
+    if (!this.polygonPathTexture) this.polygonPathTexture = reglInstance.texture()
+    this.polygonPathTexture({
+      data: textureData,
+      width: textureSize,
+      height: textureSize,
+      type: 'float',
+    })
+
+    if (!this.polygonPathFbo) this.polygonPathFbo = reglInstance.framebuffer()
+    this.polygonPathFbo({
+      color: this.polygonPathTexture,
+      depth: false,
+      stencil: false,
+    })
+  }
+
   public findHoveredPoint (): void {
     this.clearHoveredFboCommand?.()
     this.findHoveredPointCommand?.()

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

@@ -237,18 +237,55 @@ The `fitViewByPointPositions` method centers and zooms the view to fit the point
 * **`duration`** (Number, optional): The duration of the animation in milliseconds. Default is 250 ms.
 * **`padding`** (Number, optional): The padding around the viewport in percentage. This value should be between 0 and 1. Default is 0.1 (10% padding).
 
-### <a name="get_points_in_range" href="#get_points_in_range">#</a> graph.<b>getPointsInRange</b>(<i>selection</i>)
+### <a name="get_points_in_rect" href="#get_points_in_rect">#</a> graph.<b>getPointsInRect</b>(<i>selection</i>)
 
 Get points as a Float32Array within a rectangular area defined by two corner points `[[left, top], [right, bottom]]`. The `left` and `right` values represent the horizontal position in pixels, relative to the left edge of the canvas, with `0` being the leftmost position and the width of the canvas being the rightmost position.
 
 The `top` and `bottom` values represent the vertical position in pixels, relative to the top edge of the canvas, with `0` being the topmost position and the height of the canvas being the bottommost position.
 
-### <a name="select_points_in_range" href="#select_points_in_range">#</a> graph.<b>selectPointsInRange</b>(<i>selection</i>)
+* **`selection`** (Array): An array containing two coordinate arrays representing the corners of the selection rectangle in the format `[[left, top], [right, bottom]]`.
+
+**Returns:** A Float32Array containing the indices of points inside the rectangular area.
+
+### <a name="get_points_in_range" href="#get_points_in_range">#</a> graph.<b>getPointsInRange</b>(<i>selection</i>) <b style={{ color: 'orange' }}>[DEPRECATED]</b>
+
+**⚠️ Deprecated:** Use `getPointsInRect` instead. This method will be removed in a future version.
+
+Get points as a Float32Array within a rectangular area defined by two corner points `[[left, top], [right, bottom]]`. This method has the same functionality as `getPointsInRect`.
+
+### <a name="select_points_in_rect" href="#select_points_in_rect">#</a> graph.<b>selectPointsInRect</b>(<i>selection</i>)
 
 Select points within a rectangular area defined by two corner points `[[left, top], [right, bottom]]`. The `left` and `right` values represent the horizontal position in pixels, relative to the left edge of the canvas, with `0` being the leftmost position and the width of the canvas being the rightmost position.
 
 The `top` and `bottom` values represent the vertical position in pixels, relative to the top edge of the canvas, with `0` being the topmost position and the height of the canvas being the bottommost position.
 
+* **`selection`** (Array | null): An array containing two coordinate arrays representing the corners of the selection rectangle in the format `[[left, top], [right, bottom]]`, or `null` to clear the current selection.
+
+### <a name="select_points_in_range" href="#select_points_in_range">#</a> graph.<b>selectPointsInRange</b>(<i>selection</i>) <b style={{ color: 'orange' }}>[DEPRECATED]</b>
+
+**⚠️ Deprecated:** Use `selectPointsInRect` instead. This method will be removed in a future version.
+
+Select points within a rectangular area defined by two corner points `[[left, top], [right, bottom]]`. This method has the same functionality as `selectPointsInRect`.
+
+### <a name="get_points_in_polygon" href="#get_points_in_polygon">#</a> graph.<b>getPointsInPolygon</b>(<i>polygonPath</i>)
+
+Get points as a Float32Array within a polygon area defined by an array of coordinate points.
+
+* **`polygonPath`** (Array): An array of coordinate points in the format `[[x1, y1], [x2, y2], ..., [xN, yN]]` that defines the polygon. The coordinates should be in pixels relative to the canvas, where:
+  - **`x`**: Horizontal position from 0 to the width of the canvas
+  - **`y`**: Vertical position from 0 to the height of the canvas
+  - The polygon requires at least 3 points to form a valid selection area
+
+**Returns:** A Float32Array containing the indices of points inside the polygon area.
+
+### <a name="select_points_in_polygon" href="#select_points_in_polygon">#</a> graph.<b>selectPointsInPolygon</b>(<i>polygonPath</i>)
+
+Select points within a polygon area defined by an array of coordinate points. This method combines the functionality of `getPointsInPolygon` with point selection, making the identified points visually selected in the graph.
+
+* **`polygonPath`** (Array | null): An array of coordinate points in the format `[[x1, y1], [x2, y2], ..., [xN, yN]]` that defines the polygon, or `null` to clear the current selection. The coordinates should be in pixels relative to the canvas, where:
+  - **`x`**: Horizontal position from 0 to the width of the canvas  
+  - **`y`**: Vertical position from 0 to the height of the canvas
+  - The polygon requires at least 3 points to form a valid selection area
 
 ### <a name="select_point_by_index" href="#select_point_by_index">#</a> graph.<b>selectPointByIndex</b>(<i>index</i>, [<i>selectAdjacentPoints</i>])
 

package/src/stories/beginners/basic-set-up/index.ts

@@ -119,7 +119,7 @@ export const basicSetUp = (): { graph: Graph; div: HTMLDivElement} => {
     const top = getRandomInRange([h / 4, h / 2])
     const bottom = getRandomInRange([top, (h * 3) / 4])
     pause()
-    graph.selectPointsInRange([
+    graph.selectPointsInRect([
       [left, top],
       [right, bottom],
     ])

package/src/stories/clusters/polygon-selection/index.ts

@@ -0,0 +1,53 @@
+import { Graph } from '@cosmos.gl/graph'
+import { createCosmos } from '../../create-cosmos'
+import { generateMeshData } from '../../generate-mesh-data'
+import { PolygonSelection } from './polygon'
+
+export const polygonSelection = (): {div: HTMLDivElement; graph: Graph; destroy: () => void } => {
+  const nClusters = 25
+  const { pointPositions, pointColors, pointClusters } = generateMeshData(150, 150, nClusters, 1.0)
+
+  const { div, graph } = createCosmos({
+    pointPositions,
+    pointColors,
+    pointClusters,
+    simulationGravity: 1.5,
+    simulationCluster: 0.3,
+    simulationRepulsion: 8,
+    pointSize: 8,
+    backgroundColor: '#1a1a2e',
+    pointGreyoutOpacity: 0.2,
+    onClick: (index: number | undefined): void => {
+      if (index === undefined) {
+        graph.unselectPoints()
+      }
+    },
+  })
+
+  graph.setZoomLevel(0.4)
+
+  const polygonSelection = new PolygonSelection(div, (polygonPoints) => {
+    graph.selectPointsInPolygon(polygonPoints)
+  })
+
+  const actionsDiv = document.createElement('div')
+  actionsDiv.className = 'actions'
+  div.appendChild(actionsDiv)
+
+  const polygonButton = document.createElement('div')
+  polygonButton.className = 'action'
+  polygonButton.textContent = 'Enable Polygon Selection'
+  polygonButton.addEventListener('click', () => {
+    polygonSelection.enablePolygonMode()
+  })
+  actionsDiv.appendChild(polygonButton)
+
+  const destroy = (): void => {
+    polygonSelection.destroy()
+    if (actionsDiv.parentNode) {
+      actionsDiv.parentNode.removeChild(actionsDiv)
+    }
+  }
+
+  return { div, graph, destroy }
+}

package/src/stories/clusters/polygon-selection/polygon.ts

@@ -0,0 +1,143 @@
+import './style.css'
+
+export class PolygonSelection {
+  private canvas: HTMLCanvasElement
+  private ctx: CanvasRenderingContext2D
+  private isDrawing = false
+  private points: Array<{ x: number; y: number }> = []
+  private graphDiv: HTMLElement
+  private onPolygonComplete?: (points: [number, number][]) => void
+  private boundStartDrawing: (e: MouseEvent) => void
+  private boundDraw: (e: MouseEvent) => void
+  private boundStopDrawing: () => void
+  private resizeObserver: ResizeObserver
+
+  public constructor (graphDiv: HTMLElement, onPolygonComplete?: (points: [number, number][]) => void) {
+    this.graphDiv = graphDiv
+    this.onPolygonComplete = onPolygonComplete
+
+    // Bind event handlers
+    this.boundStartDrawing = this.startDrawing.bind(this)
+    this.boundDraw = this.draw.bind(this)
+    this.boundStopDrawing = this.stopDrawing.bind(this)
+
+    // Create canvas
+    this.canvas = document.createElement('canvas')
+    this.canvas.className = 'polygon-canvas'
+
+    const ctx = this.canvas.getContext('2d')
+    if (!ctx) throw new Error('Could not get canvas context')
+    this.ctx = ctx
+
+    this.graphDiv.appendChild(this.canvas)
+
+    this.resizeObserver = new ResizeObserver(() => {
+      this.resizeCanvas()
+    })
+    this.resizeObserver.observe(this.graphDiv)
+  }
+
+  public enablePolygonMode (): void {
+    this.canvas.style.pointerEvents = 'auto'
+    this.canvas.style.cursor = 'crosshair'
+
+    // Add event listeners
+    this.canvas.addEventListener('mousedown', this.boundStartDrawing)
+    this.canvas.addEventListener('mousemove', this.boundDraw)
+    this.canvas.addEventListener('mouseup', this.boundStopDrawing)
+  }
+
+  public disablePolygonMode (): void {
+    this.canvas.style.pointerEvents = 'none'
+    this.canvas.style.cursor = 'default'
+
+    // Remove event listeners
+    this.canvas.removeEventListener('mousedown', this.boundStartDrawing)
+    this.canvas.removeEventListener('mousemove', this.boundDraw)
+    this.canvas.removeEventListener('mouseup', this.boundStopDrawing)
+
+    // Clear canvas
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+  }
+
+  public destroy (): void {
+    this.disablePolygonMode()
+    this.resizeObserver.disconnect()
+    if (this.canvas.parentNode) {
+      this.canvas.parentNode.removeChild(this.canvas)
+    }
+  }
+
+  private resizeCanvas (): void {
+    const rect = this.graphDiv.getBoundingClientRect()
+
+    // Apply pixel ratio for crisp rendering
+    const pixelRatio = window.devicePixelRatio || 1
+    this.canvas.width = rect.width * pixelRatio
+    this.canvas.height = rect.height * pixelRatio
+
+    // Reset transform and scale the context to match the pixel ratio
+    this.ctx.resetTransform()
+    this.ctx.scale(pixelRatio, pixelRatio)
+  }
+
+  private startDrawing (e: MouseEvent): void {
+    this.isDrawing = true
+    this.points = []
+    const rect = this.canvas.getBoundingClientRect()
+    this.points.push({ x: e.clientX - rect.left, y: e.clientY - rect.top })
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+  }
+
+  private draw (e: MouseEvent): void {
+    if (!this.isDrawing) return
+
+    const rect = this.canvas.getBoundingClientRect()
+    this.points.push({ x: e.clientX - rect.left, y: e.clientY - rect.top })
+
+    // Clear the entire canvas accounting for pixel ratio
+    const pixelRatio = window.devicePixelRatio || 1
+    this.ctx.clearRect(0, 0, this.canvas.width / pixelRatio, this.canvas.height / pixelRatio)
+
+    this.ctx.beginPath()
+    if (this.points.length > 0 && this.points[0]) {
+      this.ctx.moveTo(this.points[0].x, this.points[0].y)
+    }
+
+    for (let i = 1; i < this.points.length; i++) {
+      const point = this.points[i]
+      if (point) {
+        this.ctx.lineTo(point.x, point.y)
+      }
+    }
+
+    this.ctx.strokeStyle = '#ffffff'
+    this.ctx.lineWidth = 2
+    this.ctx.stroke()
+  }
+
+  private stopDrawing (): void {
+    if (!this.isDrawing) return
+    this.isDrawing = false
+
+    if (this.points.length > 2) {
+      this.ctx.closePath()
+      this.ctx.stroke()
+
+      const polygonPoints: [number, number][] = this.points.map(p => [p.x, p.y])
+      const firstPolygonPoint = polygonPoints[0]
+      const lastPolygonPoint = polygonPoints[polygonPoints.length - 1]
+      if (firstPolygonPoint && lastPolygonPoint && (firstPolygonPoint[0] !== lastPolygonPoint[0] || firstPolygonPoint[1] !== lastPolygonPoint[1])) {
+        polygonPoints.push(firstPolygonPoint)
+      }
+
+      if (this.onPolygonComplete) {
+        this.onPolygonComplete(polygonPoints)
+      }
+    }
+
+    const pixelRatio = window.devicePixelRatio || 1
+    this.ctx.clearRect(0, 0, this.canvas.width / pixelRatio, this.canvas.height / pixelRatio)
+    this.disablePolygonMode()
+  }
+}

package/src/stories/clusters/polygon-selection/style.css

@@ -0,0 +1,8 @@
+.polygon-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+}

package/src/stories/clusters.stories.ts

@@ -4,6 +4,7 @@ import { createStory, Story } from '@/graph/stories/create-story'
 import { withLabels } from './clusters/with-labels'
 import { worm } from './clusters/worm'
 import { radial } from './clusters/radial'
+import { polygonSelection } from './clusters/polygon-selection'
 
 import createCosmosRaw from './create-cosmos?raw'
 import generateMeshDataRaw from './generate-mesh-data?raw'
@@ -11,6 +12,9 @@ import withLabelsStoryRaw from './clusters/with-labels?raw'
 import createClusterLabelsRaw from './create-cluster-labels?raw'
 import wormStory from './clusters/worm?raw'
 import radialStory from './clusters/radial?raw'
+import polygonSelectionStory from './clusters/polygon-selection?raw'
+import polygonSelectionStyleRaw from './clusters/polygon-selection/style.css?raw'
+import polygonSelectionPolygonRaw from './clusters/polygon-selection/polygon.ts?raw'
 
 const meta: Meta<CosmosStoryProps> = {
   title: 'Examples/Clusters',
@@ -57,5 +61,17 @@ export const WithLabels: Story = {
   },
 }
 
+export const PolygonSelection: Story = {
+  ...createStory(polygonSelection),
+  parameters: {
+    sourceCode: [
+      { name: 'Story', code: polygonSelectionStory },
+      { name: 'polygon.ts', code: polygonSelectionPolygonRaw },
+      ...sourceCodeAddonParams,
+      { name: 'style.css', code: polygonSelectionStyleRaw },
+    ],
+  },
+}
+
 // eslint-disable-next-line import/no-default-export
 export default meta