@cosmos.gl/graph 2.1.0 → 2.2.0

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

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

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

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

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

@@ -0,0 +1,20 @@
+export declare class LassoSelection {
+    private canvas;
+    private ctx;
+    private isDrawing;
+    private points;
+    private graphDiv;
+    private onLassoComplete?;
+    private boundStartDrawing;
+    private boundDraw;
+    private boundStopDrawing;
+    private resizeObserver;
+    constructor(graphDiv: HTMLElement, onLassoComplete?: (points: [number, number][]) => void);
+    enableLassoMode(): void;
+    disableLassoMode(): 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 LassoSelection: Story;
 export default meta;

package/package.json

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

package/src/index.ts

@@ -663,6 +663,31 @@ export class Graph {
       .filter(d => d !== -1)
   }
 
+  /**
+   * Get points indices inside a lasso (polygon) area.
+   * @param lassoPath - Array of points `[[x1, y1], [x2, y2], ..., [xn, yn]]` that defines the lasso 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.
+   */
+  public getPointsInLasso (lassoPath: [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
+
+    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 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.
@@ -686,6 +711,36 @@ 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.
+   * 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 {
+    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.')
+        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 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-lasso-selection.frag

@@ -0,0 +1,65 @@
+#ifdef GL_ES
+precision highp float;
+#endif
+
+uniform sampler2D positionsTexture;
+uniform sampler2D lassoPathTexture; // Texture containing lasso path points
+uniform int lassoPathLength;
+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) {
+  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 = getLassoPoint(pathTexture, i, pathLength);
+    vec2 pj = getLassoPoint(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 lasso polygon
+  if (pointInPolygon(screenPos, lassoPathTexture, lassoPathLength)) {
+    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 findPointsOnLassoSelectionFrag from '@/graph/modules/Points/find-points-on-lasso-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 findPointsOnLassoSelectionCommand: 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 lassoPathTexture: regl.Texture2D | undefined
+  private lassoPathFbo: regl.Framebuffer2D | undefined
+  private lassoPathLength = 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.findPointsOnLassoSelectionCommand) {
+      this.findPointsOnLassoSelectionCommand = reglInstance({
+        frag: findPointsOnLassoSelectionFrag,
+        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,
+          lassoPathTexture: () => this.lassoPathTexture,
+          lassoPathLength: () => this.lassoPathLength,
+        },
+      })
+    }
+
     if (!this.clearHoveredFboCommand) {
       this.clearHoveredFboCommand = reglInstance({
         frag: clearFrag,
@@ -547,6 +573,49 @@ export class Points extends CoreModule {
     this.findPointsOnAreaSelectionCommand?.()
   }
 
+  public findPointsOnLassoSelection (): void {
+    this.findPointsOnLassoSelectionCommand?.()
+  }
+
+  public updateLassoPath (lassoPath: [number, number][]): void {
+    const { reglInstance } = this
+    this.lassoPathLength = lassoPath.length
+
+    if (lassoPath.length === 0) {
+      this.lassoPathTexture = undefined
+      this.lassoPathFbo = undefined
+      return
+    }
+
+    // Calculate texture size (square texture)
+    const textureSize = Math.ceil(Math.sqrt(lassoPath.length))
+    const textureData = new Float32Array(textureSize * textureSize * 4)
+
+    // Fill texture with lasso path points
+    for (const [i, point] of lassoPath.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.lassoPathTexture) this.lassoPathTexture = reglInstance.texture()
+    this.lassoPathTexture({
+      data: textureData,
+      width: textureSize,
+      height: textureSize,
+      type: 'float',
+    })
+
+    if (!this.lassoPathFbo) this.lassoPathFbo = reglInstance.framebuffer()
+    this.lassoPathFbo({
+      color: this.lassoPathTexture,
+      depth: false,
+      stencil: false,
+    })
+  }
+
   public findHoveredPoint (): void {
     this.clearHoveredFboCommand?.()
     this.findHoveredPointCommand?.()

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

@@ -249,6 +249,25 @@ Select points within a rectangular area defined by two corner points `[[left, to
 
 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>)
+
+Get points as a Float32Array within a lasso (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:
+  - **`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.
+
+### <a name="select_points_in_lasso" href="#select_points_in_lasso">#</a> graph.<b>selectPointsInLasso</b>(<i>lassoPath</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.
+
+* **`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:
+  - **`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/clusters/lasso-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 { LassoSelection } from './lasso'
+
+export const lassoSelection = (): {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 lassoSelection = new LassoSelection(div, (lassoPoints) => {
+    graph.selectPointsInLasso(lassoPoints)
+  })
+
+  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()
+  })
+  actionsDiv.appendChild(lassoButton)
+
+  const destroy = (): void => {
+    lassoSelection.destroy()
+    if (actionsDiv.parentNode) {
+      actionsDiv.parentNode.removeChild(actionsDiv)
+    }
+  }
+
+  return { div, graph, destroy }
+}

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

@@ -0,0 +1,143 @@
+import './style.css'
+
+export class LassoSelection {
+  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 boundStartDrawing: (e: MouseEvent) => void
+  private boundDraw: (e: MouseEvent) => void
+  private boundStopDrawing: () => void
+  private resizeObserver: ResizeObserver
+
+  public constructor (graphDiv: HTMLElement, onLassoComplete?: (points: [number, number][]) => void) {
+    this.graphDiv = graphDiv
+    this.onLassoComplete = onLassoComplete
+
+    // 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 = 'lasso-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 enableLassoMode (): 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 disableLassoMode (): 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.disableLassoMode()
+    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 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)
+      }
+
+      if (this.onLassoComplete) {
+        this.onLassoComplete(lassoPoints)
+      }
+    }
+
+    const pixelRatio = window.devicePixelRatio || 1
+    this.ctx.clearRect(0, 0, this.canvas.width / pixelRatio, this.canvas.height / pixelRatio)
+    this.disableLassoMode()
+  }
+}

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

@@ -0,0 +1,8 @@
+.lasso-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 { lassoSelection } from './clusters/lasso-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 lassoSelectionStory from './clusters/lasso-selection?raw'
+import lassoSelectionStyleRaw from './clusters/lasso-selection/style.css?raw'
+import lassoSelectionLassoRaw from './clusters/lasso-selection/lasso.ts?raw'
 
 const meta: Meta<CosmosStoryProps> = {
   title: 'Examples/Clusters',
@@ -57,5 +61,17 @@ export const WithLabels: Story = {
   },
 }
 
+export const LassoSelection: Story = {
+  ...createStory(lassoSelection),
+  parameters: {
+    sourceCode: [
+      { name: 'Story', code: lassoSelectionStory },
+      { name: 'lasso.ts', code: lassoSelectionLassoRaw },
+      ...sourceCodeAddonParams,
+      { name: 'style.css', code: lassoSelectionStyleRaw },
+    ],
+  },
+}
+
 // eslint-disable-next-line import/no-default-export
 export default meta