@cosmos.gl/graph 2.0.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/dist/variables.d.ts

@@ -43,6 +43,7 @@ export declare const defaultConfigValues: {
     showFPSMonitor: boolean;
     pixelRatio: number;
     scalePointsOnZoom: boolean;
+    scaleLinksOnZoom: boolean;
     enableZoom: boolean;
     enableSimulationDuringZoom: boolean;
     enableDrag: boolean;
@@ -53,6 +54,7 @@ export declare const defaultConfigValues: {
     pointSamplingDistance: number;
     attribution: string;
     rescalePositions: undefined;
+    enableRightClickRepulsion: boolean;
 };
 export declare const hoveredPointRingOpacity = 0.7;
 export declare const focusedPointRingOpacity = 0.95;

package/package.json

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

package/src/config.ts

@@ -143,6 +143,11 @@ export interface GraphConfigInterface {
    * Default value: `1`
    */
   linkWidthScale?: number;
+  /**
+   * Increase or decrease the size of the links when zooming in or out.
+   * Default value: `false`
+   */
+  scaleLinksOnZoom?: boolean;
   /**
    * If set to true, links are rendered as curved lines.
    * Otherwise as straight lines.
@@ -252,6 +257,13 @@ export interface GraphConfigInterface {
    * Default value: `2`
    */
   simulationRepulsionFromMouse?: number;
+  /**
+   * Enable or disable the repulsion force from mouse when right-clicking.
+   * When set to `true`, holding the right mouse button will activate the mouse repulsion force.
+   * When set to `false`, right-clicking will not trigger any repulsion force.
+   * Default value: `false`
+   */
+  enableRightClickRepulsion?: boolean;
   /**
    * Friction coefficient.
    * Values range from 0 (high friction, stops quickly) to 1 (no friction, keeps moving).
@@ -405,7 +417,7 @@ export interface GraphConfigInterface {
   pixelRatio?: number;
   /**
    * Increase or decrease the size of the points when zooming in or out.
-   * Default value: true
+   * Default value: `false`
    */
   scalePointsOnZoom?: boolean;
   /**
@@ -522,6 +534,7 @@ export class GraphConfig implements GraphConfigInterface {
   public curvedLinkControlPointDistance = defaultConfigValues.curvedLinkControlPointDistance
   public linkArrows = defaultConfigValues.arrowLinks
   public linkArrowsSizeScale = defaultConfigValues.arrowSizeScale
+  public scaleLinksOnZoom = defaultConfigValues.scaleLinksOnZoom
   public linkVisibilityDistanceRange = defaultConfigValues.linkVisibilityDistanceRange
   public linkVisibilityMinTransparency = defaultConfigValues.linkVisibilityMinTransparency
   public useClassicQuadtree = defaultConfigValues.useClassicQuadtree
@@ -536,6 +549,7 @@ export class GraphConfig implements GraphConfigInterface {
   public simulationLinkDistance = defaultConfigValues.simulation.linkDistance
   public simulationLinkDistRandomVariationRange = defaultConfigValues.simulation.linkDistRandomVariationRange
   public simulationRepulsionFromMouse = defaultConfigValues.simulation.repulsionFromMouse
+  public enableRightClickRepulsion = defaultConfigValues.enableRightClickRepulsion
   public simulationFriction = defaultConfigValues.simulation.friction
   public simulationCluster = defaultConfigValues.simulation.cluster
 

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.
@@ -886,6 +941,39 @@ export class Graph {
     if (this._isDestroyed || !this.reglInstance) return
     window.clearTimeout(this._fitViewOnInitTimeoutID)
     this.stopFrames()
+
+    // Remove all event listeners
+    if (this.canvasD3Selection) {
+      this.canvasD3Selection
+        .on('mouseenter.cosmos', null)
+        .on('mousemove.cosmos', null)
+        .on('mouseleave.cosmos', null)
+        .on('click', null)
+        .on('mousemove', null)
+        .on('contextmenu', null)
+        .on('.drag', null)
+        .on('.zoom', null)
+    }
+
+    select(document)
+      .on('keydown.cosmos', null)
+      .on('keyup.cosmos', null)
+
+    if (this.zoomInstance?.behavior) {
+      this.zoomInstance.behavior
+        .on('start.detect', null)
+        .on('zoom.detect', null)
+        .on('end.detect', null)
+    }
+
+    if (this.dragInstance?.behavior) {
+      this.dragInstance.behavior
+        .on('start.detect', null)
+        .on('drag.detect', null)
+        .on('end.detect', null)
+    }
+
+    this.fpsMonitor?.destroy()
     this.reglInstance.destroy()
     // Clears the canvas after particle system is destroyed
     this.reglInstance.clear({
@@ -893,9 +981,21 @@ export class Graph {
       depth: 1,
       stencil: 0,
     })
-    select(this.canvas).style('cursor', null)
-    this.fpsMonitor?.destroy()
+
+    if (this.canvas && this.canvas.parentNode) {
+      this.canvas.parentNode.removeChild(this.canvas)
+    }
+
+    if (this.attributionDivElement && this.attributionDivElement.parentNode) {
+      this.attributionDivElement.parentNode.removeChild(this.attributionDivElement)
+    }
+
     document.getElementById('gl-bench-style')?.remove()
+
+    this.canvasD3Selection = undefined
+    this.reglInstance = undefined
+    this.attributionDivElement = undefined
+
     this._isDestroyed = true
   }
 
@@ -991,8 +1091,7 @@ export class Graph {
       if (!this.dragInstance.isActive) this.findHoveredPoint()
 
       if (enableSimulation) {
-        if (this.isRightClickMouse) {
-          if (!isSimulationRunning) this.start(0.1)
+        if (this.isRightClickMouse && this.config.enableRightClickRepulsion) {
           this.forceMouse?.run()
           this.points?.updatePosition()
         }
@@ -1023,7 +1122,7 @@ export class Graph {
           }
 
           this.store.alpha += this.store.addAlpha(this.config.simulationDecay ?? defaultConfigValues.simulation.decay)
-          if (this.isRightClickMouse) this.store.alpha = Math.max(this.store.alpha, 0.1)
+          if (this.isRightClickMouse && this.config.enableRightClickRepulsion) this.store.alpha = Math.max(this.store.alpha, 0.1)
           this.store.simulationProgress = Math.sqrt(Math.min(1, ALPHA_MIN / this.store.alpha))
           this.config.onSimulationTick?.(
             this.store.alpha,

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

@@ -3,9 +3,8 @@ precision highp float;
 varying vec4 rgbaColor;
 varying vec2 pos;
 varying float arrowLength;
-varying float linkWidthArrowWidthRatio;
-varying float smoothWidthRatio;
 varying float useArrow;
+varying float smoothing;
 
 float map(float value, float min1, float max1, float min2, float max2) {
   return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
@@ -14,22 +13,22 @@ float map(float value, float min1, float max1, float min2, float max2) {
 void main() {
   float opacity = 1.0;
   vec3 color = rgbaColor.rgb;
-  float smoothDelta = smoothWidthRatio / 2.0;
+
   if (useArrow > 0.5) {
     float end_arrow = 0.5 + arrowLength / 2.0;
     float start_arrow = end_arrow - arrowLength;
-    float arrowWidthDelta = linkWidthArrowWidthRatio / 2.0;
-    float linkOpacity = rgbaColor.a * smoothstep(0.5 - arrowWidthDelta, 0.5 - arrowWidthDelta - smoothDelta, abs(pos.y));
+    float arrowWidthDelta = 0.25;
+    float linkOpacity = rgbaColor.a * smoothstep(0.5 - arrowWidthDelta, 0.5 - arrowWidthDelta - smoothing / 2.0, abs(pos.y));
     float arrowOpacity = 1.0;
     if (pos.x > start_arrow && pos.x < start_arrow + arrowLength) {
       float xmapped = map(pos.x, start_arrow, end_arrow, 0.0, 1.0);
-      arrowOpacity = rgbaColor.a * smoothstep(xmapped - smoothDelta, xmapped, map(abs(pos.y), 0.5, 0.0, 0.0, 1.0));
+      arrowOpacity = rgbaColor.a * smoothstep(xmapped - smoothing, xmapped, map(abs(pos.y), 0.5, 0.0, 0.0, 1.0));
       if (linkOpacity != arrowOpacity) {
-        linkOpacity += arrowOpacity;
+        linkOpacity = max(linkOpacity, arrowOpacity);
       }
     }
     opacity = linkOpacity;
-  } else opacity = rgbaColor.a * smoothstep(0.5, 0.5 - smoothDelta, abs(pos.y));
+  } else opacity = rgbaColor.a * smoothstep(0.5, 0.5 - smoothing, abs(pos.y));
   
   gl_FragColor = vec4(color, opacity);
 }

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

@@ -1,8 +1,10 @@
 precision highp float;
+
 attribute vec2 position, pointA, pointB;
 attribute vec4 color;
 attribute float width;
 attribute float arrow;
+
 uniform sampler2D positionsTexture;
 uniform sampler2D pointGreyoutStatus;
 uniform mat3 transformationMatrix;
@@ -11,20 +13,20 @@ uniform float widthScale;
 uniform float arrowSizeScale;
 uniform float spaceSize;
 uniform vec2 screenSize;
-uniform float ratio;
 uniform vec2 linkVisibilityDistanceRange;
 uniform float linkVisibilityMinTransparency;
 uniform float greyoutOpacity;
 uniform float curvedWeight;
 uniform float curvedLinkControlPointDistance;
 uniform float curvedLinkSegments;
+uniform bool scaleLinksOnZoom;
+uniform float maxPointSize;
 
 varying vec4 rgbaColor;
 varying vec2 pos;
 varying float arrowLength;
-varying float linkWidthArrowWidthRatio;
-varying float smoothWidthRatio;
 varying float useArrow;
+varying float smoothing;
 
 float map(float value, float min1, float max1, float min2, float max2) {
   return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
@@ -36,19 +38,48 @@ vec2 conicParametricCurve(vec2 A, vec2 B, vec2 ControlPoint, float t, float w) {
   return divident / divisor;
 }
 
+float calculateLinkWidth(float width) {
+  float linkWidth;
+  if (scaleLinksOnZoom) {
+    // Use original width if links should scale with zoom
+    linkWidth = width;
+  } else {
+    // Adjust width based on zoom level to maintain visual size
+    linkWidth = width / transformationMatrix[0][0];
+    // Apply a non-linear scaling to avoid extreme widths
+    linkWidth *= min(5.0, max(1.0, transformationMatrix[0][0] * 0.01));
+  }
+  // Limit link width based on whether it has an arrow
+  if (useArrow > 0.5) {
+    return min(linkWidth, (maxPointSize * 2.0) / transformationMatrix[0][0]);
+  } else {
+    return min(linkWidth, maxPointSize / transformationMatrix[0][0]);
+  }
+}
+
+float calculateArrowWidth(float arrowWidth) {
+  if (scaleLinksOnZoom) {
+    return arrowWidth;
+  } else {
+    return arrowWidth / transformationMatrix[0][0];
+  }
+}
+
 void main() {
   pos = position;
 
   vec2 pointTexturePosA = (pointA + 0.5) / pointsTextureSize;
   vec2 pointTexturePosB = (pointB + 0.5) / pointsTextureSize;
-  // Greyed out status of points
+  
   vec4 greyoutStatusA = texture2D(pointGreyoutStatus, pointTexturePosA);
   vec4 greyoutStatusB = texture2D(pointGreyoutStatus, pointTexturePosB);
-  // Position
+  
   vec4 pointPositionA = texture2D(positionsTexture, pointTexturePosA);
   vec4 pointPositionB = texture2D(positionsTexture, pointTexturePosB);
   vec2 a = pointPositionA.xy;
   vec2 b = pointPositionB.xy;
+  
+  // Calculate direction vector and its perpendicular
   vec2 xBasis = b - a;
   vec2 yBasis = normalize(vec2(-xBasis.y, xBasis.x));
 
@@ -57,50 +88,69 @@ void main() {
   float h = curvedLinkControlPointDistance;
   vec2 controlPoint = (a + b) / 2.0 + yBasis * linkDist * h;
 
+  // Convert link distance to screen pixels
   float linkDistPx = linkDist * transformationMatrix[0][0];
   
+  // Calculate line width using the width scale
   float linkWidth = width * widthScale;
   float k = 2.0;
+  // Arrow width is proportionally larger than the line width
   float arrowWidth = max(5.0, linkWidth * k);
   arrowWidth *= arrowSizeScale;
 
-  float arrowWidthPx = arrowWidth / transformationMatrix[0][0];
+  // Calculate arrow width in pixels
+  float arrowWidthPx = calculateArrowWidth(arrowWidth);
+
+  // Calculate arrow length proportional to its width
+  // 0.866 is approximately sqrt(3)/2 - related to equilateral triangle geometry
+  // Cap the length to avoid overly long arrows on short links
   arrowLength = min(0.3, (0.866 * arrowWidthPx * 2.0) / linkDist);
 
-  float smoothWidth = 2.0;
-  float arrowExtraWidth = arrowWidth - linkWidth;
-  linkWidth += smoothWidth / 2.0;
   useArrow = arrow;
   if (useArrow > 0.5) {
-    linkWidth += arrowExtraWidth;
+    linkWidth *= 2.0;
   }
-  smoothWidthRatio = smoothWidth / linkWidth;
-  linkWidthArrowWidthRatio = arrowExtraWidth / linkWidth;
 
-  float linkWidthPx = linkWidth / transformationMatrix[0][0];
+  // Calculate final link width in pixels with smoothing
+  float linkWidthPx = calculateLinkWidth(linkWidth);
+  float smoothingPx = 0.5 / transformationMatrix[0][0];
+  smoothing = smoothingPx / linkWidthPx;
+  linkWidthPx += smoothingPx;
 
-  // Color
+  // Calculate final color with opacity based on link distance
   vec3 rgbColor = color.rgb;
+  // Adjust opacity based on link distance
   float opacity = color.a * max(linkVisibilityMinTransparency, map(linkDistPx, linkVisibilityDistanceRange.g, linkVisibilityDistanceRange.r, 0.0, 1.0));
 
+  // Apply greyed out opacity if either endpoint is greyed out
   if (greyoutStatusA.r > 0.0 || greyoutStatusB.r > 0.0) {
     opacity *= greyoutOpacity;
   }
 
+  // Pass final color to fragment shader
   rgbaColor = vec4(rgbColor, opacity);
 
+  // Calculate position on the curved path
   float t = position.x;
   float w = curvedWeight;
+  
   float tPrev = t - 1.0 / curvedLinkSegments;
   float tNext = t + 1.0 / curvedLinkSegments;
+  
   vec2 pointCurr = conicParametricCurve(a, b, controlPoint, t, w);
+  
   vec2 pointPrev = conicParametricCurve(a, b, controlPoint, max(0.0, tPrev), w);
   vec2 pointNext = conicParametricCurve(a, b, controlPoint, min(tNext, 1.0), w);
+  
   vec2 xBasisCurved = pointNext - pointPrev;
   vec2 yBasisCurved = normalize(vec2(-xBasisCurved.y, xBasisCurved.x));
+  
   pointCurr += yBasisCurved * linkWidthPx * position.y;
+  
+  // Transform to clip space coordinates
   vec2 p = 2.0 * pointCurr / spaceSize - 1.0;
   p *= spaceSize / screenSize;
-  vec3 final =  transformationMatrix * vec3(p, 1);
+  vec3 final = transformationMatrix * vec3(p, 1);
+  
   gl_Position = vec4(final.rg, 0, 1);
 }

package/src/modules/Lines/index.ts

@@ -63,16 +63,15 @@ export class Lines extends CoreModule {
           pointGreyoutStatus: () => this.points?.greyoutStatusFbo,
           transformationMatrix: () => store.transform,
           pointsTextureSize: () => store.pointsTextureSize,
-          pointSizeScale: () => config.pointSizeScale,
           widthScale: () => config.linkWidthScale,
           arrowSizeScale: () => config.linkArrowsSizeScale,
           spaceSize: () => store.adjustedSpaceSize,
           screenSize: () => store.screenSize,
-          ratio: () => config.pixelRatio,
           linkVisibilityDistanceRange: () => config.linkVisibilityDistanceRange,
           linkVisibilityMinTransparency: () => config.linkVisibilityMinTransparency,
           greyoutOpacity: () => config.linkGreyoutOpacity,
-          scalePointsOnZoom: () => config.scalePointsOnZoom,
+          scaleLinksOnZoom: () => config.scaleLinksOnZoom,
+          maxPointSize: () => store.maxPointSize,
           curvedWeight: () => config.curvedLinkWeight,
           curvedLinkControlPointDistance: () => config.curvedLinkControlPointDistance,
           curvedLinkSegments: () => config.curvedLinks ? config.curvedLinkSegments ?? defaultConfigValues.curvedLinkSegments : 1,

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?.()