@cosmos.gl/graph 2.2.0 → 2.3.0-beta.0

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,12 +49,17 @@ 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]>;
     getSampledPointPositionsMap(): Map<number, [number, number]>;
+    getSampledPoints(): {
+        indices: number[];
+        positions: number[];
+    };
+    getTrackedPositionsArray(): number[];
     private swapFbo;
     private rescaleInitialNodePositions;
 }

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/dist/variables.d.ts

@@ -1,9 +1,11 @@
 export declare const defaultPointColor = "#b3b3b3";
 export declare const defaultGreyoutPointOpacity: undefined;
 export declare const defaultGreyoutPointColor: undefined;
+export declare const defaultPointOpacity = 1;
 export declare const defaultPointSize = 4;
 export declare const defaultLinkColor = "#666666";
 export declare const defaultGreyoutLinkOpacity = 0.1;
+export declare const defaultLinkOpacity = 1;
 export declare const defaultLinkWidth = 1;
 export declare const defaultBackgroundColor = "#222222";
 export declare const defaultConfigValues: {

package/package.json

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

package/src/config.ts

@@ -4,9 +4,11 @@ import {
   defaultPointColor,
   defaultGreyoutPointOpacity,
   defaultGreyoutPointColor,
+  defaultPointOpacity,
   defaultPointSize,
   defaultLinkColor,
   defaultGreyoutLinkOpacity,
+  defaultLinkOpacity,
   defaultLinkWidth,
   defaultBackgroundColor,
   defaultConfigValues,
@@ -74,6 +76,15 @@ export interface GraphConfigInterface {
    * Default value: `4`
   */
   pointSize?: number;
+
+  /**
+   * Universal opacity value applied to all points.
+   * This value multiplies with individual point alpha values (if set via setPointColors).
+   * Useful for dynamically controlling opacity of all points without updating individual RGBA arrays.
+   * Default value: `1.0`
+   */
+  pointOpacity?: number;
+
   /**
    * Scale factor for the point size.
    * Default value: `1`
@@ -128,6 +139,14 @@ export interface GraphConfigInterface {
    */
   linkColor?: string | [number, number, number, number];
 
+  /**
+   * Universal opacity value applied to all links.
+   * This value multiplies with individual link alpha values (if set via setLinkColors).
+   * Useful for dynamically controlling opacity of all links without updating individual RGBA arrays.
+   * Default value: `1.0`
+   */
+  linkOpacity?: number;
+
   /**
    * Greyed out link opacity value when the selection is active.
    * Default value: `0.1`
@@ -517,6 +536,7 @@ export class GraphConfig implements GraphConfigInterface {
   public pointGreyoutOpacity = defaultGreyoutPointOpacity
   public pointGreyoutColor = defaultGreyoutPointColor
   public pointSize = defaultPointSize
+  public pointOpacity = defaultPointOpacity
   public pointSizeScale = defaultConfigValues.pointSizeScale
   public hoveredPointCursor = defaultConfigValues.hoveredPointCursor
   public renderHoveredPointRing = defaultConfigValues.renderHoveredPointRing
@@ -524,6 +544,7 @@ export class GraphConfig implements GraphConfigInterface {
   public focusedPointRingColor = defaultConfigValues.focusedPointRingColor
   public focusedPointIndex = defaultConfigValues.focusedPointIndex
   public linkColor = defaultLinkColor
+  public linkOpacity = defaultLinkOpacity
   public linkGreyoutOpacity = defaultGreyoutLinkOpacity
   public linkWidth = defaultLinkWidth
   public linkWidthScale = defaultConfigValues.linkWidthScale

package/src/index.ts

@@ -322,6 +322,17 @@ export class Graph {
     this._needsPointColorUpdate = true
   }
 
+  /**
+   * Gets the current colors of the graph points.
+   *
+   * @returns {Float32Array} A Float32Array representing the colors of points in the format [r1, g1, b1, a1, r2, g2, b2, a2, ..., rn, gn, bn, an],
+   * where each color is in RGBA format. Returns an empty Float32Array if no point colors are set.
+   */
+  public getPointColors (): Float32Array {
+    if (this._isDestroyed) return new Float32Array()
+    return this.graph.pointColors ?? new Float32Array()
+  }
+
   /**
    * Sets the sizes for the graph points.
    *
@@ -335,6 +346,17 @@ export class Graph {
     this._needsPointSizeUpdate = true
   }
 
+  /**
+   * Gets the current sizes of the graph points.
+   *
+   * @returns {Float32Array} A Float32Array representing the sizes of points in the format [size1, size2, ..., sizen],
+   * where `n` is the index of the point. Returns an empty Float32Array if no point sizes are set.
+   */
+  public getPointSizes (): Float32Array {
+    if (this._isDestroyed) return new Float32Array()
+    return this.graph.pointSizes ?? new Float32Array()
+  }
+
   /**
    * Sets the links for the graph.
    *
@@ -367,6 +389,17 @@ export class Graph {
     this._needsLinkColorUpdate = true
   }
 
+  /**
+   * Gets the current colors of the graph links.
+   *
+   * @returns {Float32Array} A Float32Array representing the colors of links in the format [r1, g1, b1, a1, r2, g2, b2, a2, ..., rn, gn, bn, an],
+   * where each color is in RGBA format. Returns an empty Float32Array if no link colors are set.
+   */
+  public getLinkColors (): Float32Array {
+    if (this._isDestroyed) return new Float32Array()
+    return this.graph.linkColors ?? new Float32Array()
+  }
+
   /**
    * Sets the widths for the graph links.
    *
@@ -380,6 +413,17 @@ export class Graph {
     this._needsLinkWidthUpdate = true
   }
 
+  /**
+   * Gets the current widths of the graph links.
+   *
+   * @returns {Float32Array} A Float32Array representing the widths of links in the format [width1, width2, ..., widthn],
+   * where `n` is the index of the link. Returns an empty Float32Array if no link widths are set.
+   */
+  public getLinkWidths (): Float32Array {
+    if (this._isDestroyed) return new Float32Array()
+    return this.graph.linkWidths ?? new Float32Array()
+  }
+
   /**
    * Sets the arrows for the graph links.
    *
@@ -648,7 +692,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 +708,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 +748,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 +767,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) => {
@@ -860,6 +926,17 @@ export class Graph {
     return this.points.getTrackedPositionsMap()
   }
 
+  /**
+   * Get current X and Y coordinates of the tracked points as an array.
+   * @returns Array of point positions in the format [x1, y1, x2, y2, ..., xn, yn] for tracked points only.
+   * The positions are ordered by the tracking indices (same order as provided to trackPointPositionsByIndices).
+   * Returns an empty array if no points are being tracked.
+   */
+  public getTrackedPointPositionsArray (): number[] {
+    if (this._isDestroyed || !this.points) return []
+    return this.points.getTrackedPositionsArray()
+  }
+
   /**
    * For the points that are currently visible on the screen, get a sample of point indices with their coordinates.
    * The resulting number of points will depend on the `pointSamplingDistance` configuration property,
@@ -871,6 +948,17 @@ export class Graph {
     return this.points.getSampledPointPositionsMap()
   }
 
+  /**
+   * For the points that are currently visible on the screen, get a sample of point indices and positions.
+   * The resulting number of points will depend on the `pointSamplingDistance` configuration property,
+   * and the sampled points will be evenly distributed.
+   * @returns An object containing arrays of point indices and positions.
+   */
+  public getSampledPoints (): { indices: number[]; positions: number[] } {
+    if (this._isDestroyed || !this.points) return { indices: [], positions: [] }
+    return this.points.getSampledPoints()
+  }
+
   /**
    * Gets the X-axis of rescaling function.
    *
@@ -898,10 +986,15 @@ export class Graph {
   public start (alpha = 1): void {
     if (this._isDestroyed) return
     if (!this.graph.pointsNumber) return
-    this.store.isSimulationRunning = true
+
+    // Only start the simulation if alpha > 0
+    if (alpha > 0) {
+      this.store.isSimulationRunning = true
+      this.store.simulationProgress = 0
+      this.config.onSimulationStart?.()
+    }
+
     this.store.alpha = alpha
-    this.store.simulationProgress = 0
-    this.config.onSimulationStart?.()
     this.stopFrames()
     this.frame()
   }

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

@@ -5,6 +5,7 @@ varying vec2 pos;
 varying float arrowLength;
 varying float useArrow;
 varying float smoothing;
+varying float arrowWidthFactor;
 
 float map(float value, float min1, float max1, float min2, float max2) {
   return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
@@ -17,7 +18,7 @@ void main() {
   if (useArrow > 0.5) {
     float end_arrow = 0.5 + arrowLength / 2.0;
     float start_arrow = end_arrow - arrowLength;
-    float arrowWidthDelta = 0.25;
+    float arrowWidthDelta = arrowWidthFactor / 2.0;
     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) {

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

@@ -15,6 +15,7 @@ uniform float spaceSize;
 uniform vec2 screenSize;
 uniform vec2 linkVisibilityDistanceRange;
 uniform float linkVisibilityMinTransparency;
+uniform float linkOpacity;
 uniform float greyoutOpacity;
 uniform float curvedWeight;
 uniform float curvedLinkControlPointDistance;
@@ -27,6 +28,7 @@ varying vec2 pos;
 varying float arrowLength;
 varying float useArrow;
 varying float smoothing;
+varying float arrowWidthFactor;
 
 float map(float value, float min1, float max1, float min2, float max2) {
   return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
@@ -95,9 +97,11 @@ void main() {
   float linkWidth = width * widthScale;
   float k = 2.0;
   // Arrow width is proportionally larger than the line width
-  float arrowWidth = max(5.0, linkWidth * k);
+  float arrowWidth = linkWidth * k;
   arrowWidth *= arrowSizeScale;
 
+  float arrowWidthDifference = arrowWidth - linkWidth;
+
   // Calculate arrow width in pixels
   float arrowWidthPx = calculateArrowWidth(arrowWidth);
 
@@ -108,9 +112,11 @@ void main() {
 
   useArrow = arrow;
   if (useArrow > 0.5) {
-    linkWidth *= 2.0;
+    linkWidth += arrowWidthDifference;
   }
 
+  arrowWidthFactor = arrowWidthDifference / linkWidth;
+
   // Calculate final link width in pixels with smoothing
   float linkWidthPx = calculateLinkWidth(linkWidth);
   float smoothingPx = 0.5 / transformationMatrix[0][0];
@@ -120,7 +126,7 @@ void main() {
   // 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));
+  float opacity = color.a * linkOpacity * 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) {

package/src/modules/Lines/index.ts

@@ -69,6 +69,7 @@ export class Lines extends CoreModule {
           screenSize: () => store.screenSize,
           linkVisibilityDistanceRange: () => config.linkVisibilityDistanceRange,
           linkVisibilityMinTransparency: () => config.linkVisibilityMinTransparency,
+          linkOpacity: () => config.linkOpacity,
           greyoutOpacity: () => config.linkGreyoutOpacity,
           scaleLinksOnZoom: () => config.scaleLinksOnZoom,
           maxPointSize: () => store.maxPointSize,

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

@@ -14,6 +14,7 @@ uniform bool scalePointsOnZoom;
 uniform float pointIndex;
 uniform float maxPointSize;
 uniform vec4 color;
+uniform float universalPointOpacity;
 uniform float greyoutOpacity;
 uniform bool darkenGreyout;
 uniform vec4 backgroundColor;
@@ -41,7 +42,7 @@ void main () {
   vec4 pointPosition = texture2D(positionsTexture, textureCoordinates / pointsTextureSize);
 
   rgbColor = color.rgb;
-  pointOpacity = color.a;
+  pointOpacity = color.a * universalPointOpacity;
   vec4 greyoutStatus = texture2D(pointGreyoutStatusTexture, textureCoordinates / pointsTextureSize);
   if (greyoutStatus.r > 0.0) {
     if (greyoutColor[0] != -1.0) {

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

@@ -15,6 +15,7 @@ uniform float sizeScale;
 uniform float spaceSize;
 uniform vec2 screenSize;
 uniform float greyoutOpacity;
+uniform float pointOpacity;
 uniform vec4 greyoutColor;
 uniform vec4 backgroundColor;
 uniform bool scalePointsOnZoom;
@@ -51,7 +52,7 @@ void main() {
   gl_PointSize = calculatePointSize(size * sizeScale);
 
   rgbColor = color.rgb;
-  alpha = color.a;
+  alpha = color.a * pointOpacity;
 
   // Adjust alpha of selected points
   vec4 greyoutStatus = texture2D(pointGreyoutStatus, (textureCoords + 0.5) / pointsTextureSize);

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;
   }
 }