@cosmos.gl/graph 2.2.0 → 2.2.1

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

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

package/dist/stories/clusters/{lasso-selection → polygon-selection}/index.d.ts

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

package/dist/stories/clusters/{lasso-selection/lasso.d.ts → polygon-selection/polygon.d.ts}

@@ -1,17 +1,17 @@
-export declare class LassoSelection {
+export declare class PolygonSelection {
     private canvas;
     private ctx;
     private isDrawing;
     private points;
     private graphDiv;
-    private onLassoComplete?;
+    private onPolygonComplete?;
     private boundStartDrawing;
     private boundDraw;
     private boundStopDrawing;
     private resizeObserver;
-    constructor(graphDiv: HTMLElement, onLassoComplete?: (points: [number, number][]) => void);
-    enableLassoMode(): void;
-    disableLassoMode(): void;
+    constructor(graphDiv: HTMLElement, onPolygonComplete?: (points: [number, number][]) => void);
+    enablePolygonMode(): void;
+    disablePolygonMode(): void;
     destroy(): void;
     private resizeCanvas;
     private startDrawing;

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

@@ -5,5 +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 LassoSelection: Story;
+export declare const PolygonSelection: Story;
 export default meta;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmos.gl/graph",
-  "version": "2.2.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])]]
@@ -664,20 +664,32 @@ export class Graph {
   }
 
   /**
-   * Get points indices inside a lasso (polygon) area.
-   * @param lassoPath - Array of points `[[x1, y1], [x2, y2], ..., [xn, yn]]` that defines the lasso polygon.
+   * 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 lasso area.
+   * @returns A Float32Array containing the indices of points inside the polygon area.
    */
-  public getPointsInLasso (lassoPath: [number, number][]): Float32Array {
+  public getPointsInPolygon (polygonPath: [number, number][]): Float32Array {
     if (this._isDestroyed || !this.reglInstance || !this.points) return new Float32Array()
-    if (lassoPath.length < 3) return new Float32Array() // Need at least 3 points for a polygon
+    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 = lassoPath.map(([x, y]) => [x, h - y] as [number, number])
-    this.points.updateLassoPath(convertedPath)
-    this.points.findPointsOnLassoSelection()
+    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
@@ -692,7 +704,7 @@ export class Graph {
    * @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]
@@ -711,23 +723,33 @@ export class Graph {
     this.points.updateGreyoutStatus()
   }
 
-  /** Select points inside a lasso (polygon) area.
-   * @param lassoPath - Array of points `[[x1, y1], [x2, y2], ..., [xn, yn]]` that defines the lasso polygon.
+  /** 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 selectPointsInLasso (lassoPath: [number, number][] | null): void {
+  public selectPointsInPolygon (polygonPath: [number, number][] | null): void {
     if (this._isDestroyed || !this.reglInstance || !this.points) return
-    if (lassoPath) {
-      if (lassoPath.length < 3) {
-        console.warn('Lasso path requires at least 3 points to form a polygon.')
+    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 = lassoPath.map(([x, y]) => [x, h - y] as [number, number])
-      this.points.updateLassoPath(convertedPath)
-      this.points.findPointsOnLassoSelection()
+      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) => {

package/src/modules/Points/{find-points-on-lasso-selection.frag → find-points-on-polygon-selection.frag}

@@ -3,16 +3,16 @@ precision highp float;
 #endif
 
 uniform sampler2D positionsTexture;
-uniform sampler2D lassoPathTexture; // Texture containing lasso path points
-uniform int lassoPathLength;
+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 lasso path texture at a specific index
-vec2 getLassoPoint(sampler2D pathTexture, int index, int pathLength) {
+// 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
@@ -35,8 +35,8 @@ bool pointInPolygon(vec2 point, sampler2D pathTexture, int pathLength) {
     
     int j = int(mod(float(i + 1), float(pathLength)));
     
-    vec2 pi = getLassoPoint(pathTexture, i, pathLength);
-    vec2 pj = getLassoPoint(pathTexture, j, 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)) {
@@ -58,8 +58,8 @@ void main() {
   
   gl_FragColor = vec4(0.0, 0.0, pointPosition.rg);
   
-  // Check if point center is inside the lasso polygon
-  if (pointInPolygon(screenPos, lassoPathTexture, lassoPathLength)) {
+  // 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,7 +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 findPointsOnLassoSelectionFrag from '@/graph/modules/Points/find-points-on-lasso-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'
@@ -42,7 +42,7 @@ export class Points extends CoreModule {
   private updatePositionCommand: regl.DrawCommand | undefined
   private dragPointCommand: regl.DrawCommand | undefined
   private findPointsOnAreaSelectionCommand: regl.DrawCommand | undefined
-  private findPointsOnLassoSelectionCommand: regl.DrawCommand | undefined
+  private findPointsOnPolygonSelectionCommand: regl.DrawCommand | undefined
   private findHoveredPointCommand: regl.DrawCommand | undefined
   private clearHoveredFboCommand: regl.DrawCommand | undefined
   private clearSampledPointsFboCommand: regl.DrawCommand | undefined
@@ -53,9 +53,9 @@ export class Points extends CoreModule {
   private greyoutStatusTexture: regl.Texture2D | undefined
   private sizeTexture: regl.Texture2D | undefined
   private trackedIndicesTexture: regl.Texture2D | undefined
-  private lassoPathTexture: regl.Texture2D | undefined
-  private lassoPathFbo: regl.Framebuffer2D | undefined
-  private lassoPathLength = 0
+  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
@@ -285,9 +285,9 @@ export class Points extends CoreModule {
       })
     }
 
-    if (!this.findPointsOnLassoSelectionCommand) {
-      this.findPointsOnLassoSelectionCommand = reglInstance({
-        frag: findPointsOnLassoSelectionFrag,
+    if (!this.findPointsOnPolygonSelectionCommand) {
+      this.findPointsOnPolygonSelectionCommand = reglInstance({
+        frag: findPointsOnPolygonSelectionFrag,
         vert: updateVert,
         framebuffer: () => this.selectedFbo as regl.Framebuffer2D,
         primitive: 'triangle strip',
@@ -300,8 +300,8 @@ export class Points extends CoreModule {
           spaceSize: () => store.adjustedSpaceSize,
           screenSize: () => store.screenSize,
           transformationMatrix: () => store.transform,
-          lassoPathTexture: () => this.lassoPathTexture,
-          lassoPathLength: () => this.lassoPathLength,
+          polygonPathTexture: () => this.polygonPathTexture,
+          polygonPathLength: () => this.polygonPathLength,
         },
       })
     }
@@ -573,26 +573,26 @@ export class Points extends CoreModule {
     this.findPointsOnAreaSelectionCommand?.()
   }
 
-  public findPointsOnLassoSelection (): void {
-    this.findPointsOnLassoSelectionCommand?.()
+  public findPointsOnPolygonSelection (): void {
+    this.findPointsOnPolygonSelectionCommand?.()
   }
 
-  public updateLassoPath (lassoPath: [number, number][]): void {
+  public updatePolygonPath (polygonPath: [number, number][]): void {
     const { reglInstance } = this
-    this.lassoPathLength = lassoPath.length
+    this.polygonPathLength = polygonPath.length
 
-    if (lassoPath.length === 0) {
-      this.lassoPathTexture = undefined
-      this.lassoPathFbo = undefined
+    if (polygonPath.length === 0) {
+      this.polygonPathTexture = undefined
+      this.polygonPathFbo = undefined
       return
     }
 
     // Calculate texture size (square texture)
-    const textureSize = Math.ceil(Math.sqrt(lassoPath.length))
+    const textureSize = Math.ceil(Math.sqrt(polygonPath.length))
     const textureData = new Float32Array(textureSize * textureSize * 4)
 
-    // Fill texture with lasso path points
-    for (const [i, point] of lassoPath.entries()) {
+    // 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
@@ -600,17 +600,17 @@ export class Points extends CoreModule {
       textureData[i * 4 + 3] = 0 // unused
     }
 
-    if (!this.lassoPathTexture) this.lassoPathTexture = reglInstance.texture()
-    this.lassoPathTexture({
+    if (!this.polygonPathTexture) this.polygonPathTexture = reglInstance.texture()
+    this.polygonPathTexture({
       data: textureData,
       width: textureSize,
       height: textureSize,
       type: 'float',
     })
 
-    if (!this.lassoPathFbo) this.lassoPathFbo = reglInstance.framebuffer()
-    this.lassoPathFbo({
-      color: this.lassoPathTexture,
+    if (!this.polygonPathFbo) this.polygonPathFbo = reglInstance.framebuffer()
+    this.polygonPathFbo({
+      color: this.polygonPathTexture,
       depth: false,
       stencil: false,
     })

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

@@ -237,34 +237,52 @@ 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.
 
-### <a name="get_points_in_lasso" href="#get_points_in_lasso">#</a> graph.<b>getPointsInLasso</b>(<i>lassoPath</i>)
+* **`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 lasso (polygon) area defined by an array of coordinate points.
+Get points as a Float32Array within a polygon area defined by an array of coordinate points.
 
-* **`lassoPath`** (Array): An array of coordinate points in the format `[[x1, y1], [x2, y2], ..., [xN, yN]]` that defines the lasso polygon. The coordinates should be in pixels relative to the canvas, where:
+* **`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 lasso area.
+**Returns:** A Float32Array containing the indices of points inside the polygon area.
 
-### <a name="select_points_in_lasso" href="#select_points_in_lasso">#</a> graph.<b>selectPointsInLasso</b>(<i>lassoPath</i>)
+### <a name="select_points_in_polygon" href="#select_points_in_polygon">#</a> graph.<b>selectPointsInPolygon</b>(<i>polygonPath</i>)
 
-Select points within a lasso (polygon) area defined by an array of coordinate points. This method combines the functionality of `getPointsInLasso` with point selection, making the identified points visually selected in the graph.
+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.
 
-* **`lassoPath`** (Array | null): An array of coordinate points in the format `[[x1, y1], [x2, y2], ..., [xN, yN]]` that defines the lasso polygon, or `null` to clear the current selection. The coordinates should be in pixels relative to the canvas, where:
+* **`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

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/{lasso-selection → polygon-selection}/index.ts

@@ -1,9 +1,9 @@
 import { Graph } from '@cosmos.gl/graph'
 import { createCosmos } from '../../create-cosmos'
 import { generateMeshData } from '../../generate-mesh-data'
-import { LassoSelection } from './lasso'
+import { PolygonSelection } from './polygon'
 
-export const lassoSelection = (): {div: HTMLDivElement; graph: Graph; destroy: () => void } => {
+export const polygonSelection = (): {div: HTMLDivElement; graph: Graph; destroy: () => void } => {
   const nClusters = 25
   const { pointPositions, pointColors, pointClusters } = generateMeshData(150, 150, nClusters, 1.0)
 
@@ -26,24 +26,24 @@ export const lassoSelection = (): {div: HTMLDivElement; graph: Graph; destroy: (
 
   graph.setZoomLevel(0.4)
 
-  const lassoSelection = new LassoSelection(div, (lassoPoints) => {
-    graph.selectPointsInLasso(lassoPoints)
+  const polygonSelection = new PolygonSelection(div, (polygonPoints) => {
+    graph.selectPointsInPolygon(polygonPoints)
   })
 
   const actionsDiv = document.createElement('div')
   actionsDiv.className = 'actions'
   div.appendChild(actionsDiv)
 
-  const lassoButton = document.createElement('div')
-  lassoButton.className = 'action'
-  lassoButton.textContent = 'Enable Lasso Selection'
-  lassoButton.addEventListener('click', () => {
-    lassoSelection.enableLassoMode()
+  const polygonButton = document.createElement('div')
+  polygonButton.className = 'action'
+  polygonButton.textContent = 'Enable Polygon Selection'
+  polygonButton.addEventListener('click', () => {
+    polygonSelection.enablePolygonMode()
   })
-  actionsDiv.appendChild(lassoButton)
+  actionsDiv.appendChild(polygonButton)
 
   const destroy = (): void => {
-    lassoSelection.destroy()
+    polygonSelection.destroy()
     if (actionsDiv.parentNode) {
       actionsDiv.parentNode.removeChild(actionsDiv)
     }

package/src/stories/clusters/{lasso-selection/lasso.ts → polygon-selection/polygon.ts}

@@ -1,20 +1,20 @@
 import './style.css'
 
-export class LassoSelection {
+export class PolygonSelection {
   private canvas: HTMLCanvasElement
   private ctx: CanvasRenderingContext2D
   private isDrawing = false
   private points: Array<{ x: number; y: number }> = []
   private graphDiv: HTMLElement
-  private onLassoComplete?: (points: [number, number][]) => void
+  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, onLassoComplete?: (points: [number, number][]) => void) {
+  public constructor (graphDiv: HTMLElement, onPolygonComplete?: (points: [number, number][]) => void) {
     this.graphDiv = graphDiv
-    this.onLassoComplete = onLassoComplete
+    this.onPolygonComplete = onPolygonComplete
 
     // Bind event handlers
     this.boundStartDrawing = this.startDrawing.bind(this)
@@ -23,7 +23,7 @@ export class LassoSelection {
 
     // Create canvas
     this.canvas = document.createElement('canvas')
-    this.canvas.className = 'lasso-canvas'
+    this.canvas.className = 'polygon-canvas'
 
     const ctx = this.canvas.getContext('2d')
     if (!ctx) throw new Error('Could not get canvas context')
@@ -37,7 +37,7 @@ export class LassoSelection {
     this.resizeObserver.observe(this.graphDiv)
   }
 
-  public enableLassoMode (): void {
+  public enablePolygonMode (): void {
     this.canvas.style.pointerEvents = 'auto'
     this.canvas.style.cursor = 'crosshair'
 
@@ -47,7 +47,7 @@ export class LassoSelection {
     this.canvas.addEventListener('mouseup', this.boundStopDrawing)
   }
 
-  public disableLassoMode (): void {
+  public disablePolygonMode (): void {
     this.canvas.style.pointerEvents = 'none'
     this.canvas.style.cursor = 'default'
 
@@ -61,7 +61,7 @@ export class LassoSelection {
   }
 
   public destroy (): void {
-    this.disableLassoMode()
+    this.disablePolygonMode()
     this.resizeObserver.disconnect()
     if (this.canvas.parentNode) {
       this.canvas.parentNode.removeChild(this.canvas)
@@ -124,20 +124,20 @@ export class LassoSelection {
       this.ctx.closePath()
       this.ctx.stroke()
 
-      const lassoPoints: [number, number][] = this.points.map(p => [p.x, p.y])
-      const firstLassoPoint = lassoPoints[0]
-      const lastLassoPoint = lassoPoints[lassoPoints.length - 1]
-      if (firstLassoPoint && lastLassoPoint && (firstLassoPoint[0] !== lastLassoPoint[0] || firstLassoPoint[1] !== lastLassoPoint[1])) {
-        lassoPoints.push(firstLassoPoint)
+      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.onLassoComplete) {
-        this.onLassoComplete(lassoPoints)
+      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.disableLassoMode()
+    this.disablePolygonMode()
   }
 }

package/src/stories/clusters/{lasso-selection → polygon-selection}/style.css

@@ -1,4 +1,4 @@
-.lasso-canvas {
+.polygon-canvas {
   position: absolute;
   top: 0;
   left: 0;

package/src/stories/clusters.stories.ts

@@ -4,7 +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 { lassoSelection } from './clusters/lasso-selection'
+import { polygonSelection } from './clusters/polygon-selection'
 
 import createCosmosRaw from './create-cosmos?raw'
 import generateMeshDataRaw from './generate-mesh-data?raw'
@@ -12,9 +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 lassoSelectionStory from './clusters/lasso-selection?raw'
-import lassoSelectionStyleRaw from './clusters/lasso-selection/style.css?raw'
-import lassoSelectionLassoRaw from './clusters/lasso-selection/lasso.ts?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',
@@ -61,14 +61,14 @@ export const WithLabels: Story = {
   },
 }
 
-export const LassoSelection: Story = {
-  ...createStory(lassoSelection),
+export const PolygonSelection: Story = {
+  ...createStory(polygonSelection),
   parameters: {
     sourceCode: [
-      { name: 'Story', code: lassoSelectionStory },
-      { name: 'lasso.ts', code: lassoSelectionLassoRaw },
+      { name: 'Story', code: polygonSelectionStory },
+      { name: 'polygon.ts', code: polygonSelectionPolygonRaw },
       ...sourceCodeAddonParams,
-      { name: 'style.css', code: lassoSelectionStyleRaw },
+      { name: 'style.css', code: polygonSelectionStyleRaw },
     ],
   },
 }