@cosmos.gl/graph 2.0.0 → 2.1.0

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.1.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

@@ -886,6 +886,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 +926,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 +1036,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 +1067,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/stories/2. configuration.mdx

@@ -24,6 +24,7 @@ import { Meta } from "@storybook/blocks";
 | linkGreyoutOpacity | Greyed out link opacity value when the selection is active | `0.1` |
 | linkWidth | The default width value to use for links when no link widths are provided or if the width value in the array is `undefined` or `null` | `1` |
 | linkWidthScale | Scale factor for the link width | `1` |
+| scaleLinksOnZoom | Increase/decrease link width when zooming | `false` |
 | curvedLinks | If set to true, links are rendered as curved lines. Otherwise as straight lines | `false` |
 | curvedLinkSegments | Number of segments in a curved line | `19` |
 | curvedLinkWeight | Weight affects the shape of the curve | `0.8` |
@@ -35,7 +36,7 @@ import { Meta } from "@storybook/blocks";
 | useClassicQuadtree | Use the classic [quadtree algorithm](https://en.wikipedia.org/wiki/Barnes%E2%80%93Hut_simulation) for the Many-Body force. This property will be applied only on component initialization and it can't be changed using the `setConfig` method.<br /><br /> ⚠ The algorithm might not work on some GPUs (e.g. Nvidia) and on Windows (unless you disable ANGLE in the browser settings). | `false` |
 | showFPSMonitor | Show WebGL performance monitor | `false` |
 | pixelRatio | Canvas pixel ratio | `2` |
-| scalePointsOnZoom | Increase/decrease point size when zooming | `true` |
+| scalePointsOnZoom | Increase/decrease point size when zooming | `false` |
 | initialZoomLevel | Initial zoom level (set once during initialization) | `undefined` |
 | enableZoom | Enables zooming interactions | `true` |
 | enableSimulationDuringZoom | Keep simulation running during zoom operations | `false` |
@@ -70,6 +71,7 @@ cosmos.gl layout algorithm was inspired by the [d3-force](https://github.com/d3/
 | simulationLinkDistance | Minimum link distance | 1 – 20 | `10` |
 | simulationLinkDistRandomVariationRange | Link distance randomness multiplier range | [0.8 – 1.2,<br/> 1.2 – 2.0] | `[1.0, 1.2]` |
 | simulationRepulsionFromMouse | Repulsion from the mouse pointer force coefficient. The repulsion force is activated by pressing the right mouse button. | 0.0 – 5.0 | `2.0`
+| enableRightClickRepulsion | 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. | - | `false` |
 | simulationFriction | Friction coefficient. Values range from `0` (high friction, stops quickly) to `1` (no friction, keeps moving). | 0.0 – 1.0 | `0.85` |
 | simulationCluster | Cluster coefficient | 0.0 – 1.0 | `0.1` |
 

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

@@ -24,7 +24,8 @@ export const basicSetUp = (): { graph: Graph; div: HTMLDivElement} => {
     backgroundColor: '#2d313a',
     pointSize: 4,
     pointColor: '#4B5BBF',
-    linkWidth: 0.1,
+    linkWidth: 0.6,
+    scalePointsOnZoom: true,
     linkColor: '#5F74C2',
     linkArrows: false,
     linkGreyoutOpacity: 0,

package/src/stories/beginners/point-labels/index.ts

@@ -30,7 +30,8 @@ export const pointLabels = (
   const graph = new Graph(graphDiv, {
     spaceSize: 4096,
     backgroundColor: '#2d313a',
-    linkWidth: 0.1,
+    scalePointsOnZoom: true,
+    linkWidth: 0.6,
     linkColor: '#5F74C2',
     linkArrows: false,
     fitViewOnInit: false,

package/src/stories/beginners/quick-start.ts

@@ -9,6 +9,7 @@ export const quickStart = (): { graph: Graph; div: HTMLDivElement} => {
     spaceSize: 4096,
     backgroundColor: '#2d313a',
     pointColor: '#F069B4',
+    scalePointsOnZoom: true,
     simulationFriction: 0.1, // keeps the graph inert
     simulationGravity: 0, // disables gravity
     simulationRepulsion: 0.5, // increases repulsion between points

package/src/stories/beginners/remove-points/config.ts

@@ -5,8 +5,9 @@ export const config: GraphConfigInterface = {
   backgroundColor: '#2d313a',
   pointSize: 4,
   pointColor: '#4B5BBF',
+  scalePointsOnZoom: true,
   pointGreyoutOpacity: 0.1,
-  linkWidth: 0.1,
+  linkWidth: 0.6,
   linkColor: '#5F74C2',
   linkArrows: false,
   linkGreyoutOpacity: 0,

package/src/stories/create-cosmos.ts

@@ -25,7 +25,8 @@ export const createCosmos = (props: CosmosStoryProps): { div: HTMLDivElement; gr
     pointSize: 3,
     pointColor: '#4B5BBF',
     pointGreyoutOpacity: 0.1,
-    linkWidth: 0.2,
+    scalePointsOnZoom: true,
+    linkWidth: 0.8,
     linkColor: '#5F74C2',
     linkArrows: false,
     linkGreyoutOpacity: 0,

package/src/stories/generate-mesh-data.ts

@@ -104,7 +104,7 @@ export function generateMeshData (
     linkColors[i * 4 + 2] = rgba[2]
     linkColors[i * 4 + 3] = 0.9
 
-    linkWidths[i] = getRandom(0.1, 0.5)
+    linkWidths[i] = getRandom(0.4, 0.8)
     // linkStrength[i] = (n * m - sourcePointIndex) / (n * m)
   }
 

package/src/variables.ts

@@ -43,7 +43,8 @@ export const defaultConfigValues = {
   },
   showFPSMonitor: false,
   pixelRatio: 2,
-  scalePointsOnZoom: true,
+  scalePointsOnZoom: false,
+  scaleLinksOnZoom: false,
   enableZoom: true,
   enableSimulationDuringZoom: false,
   enableDrag: false,
@@ -54,6 +55,7 @@ export const defaultConfigValues = {
   pointSamplingDistance: 150,
   attribution: '',
   rescalePositions: undefined,
+  enableRightClickRepulsion: false,
 }
 
 export const hoveredPointRingOpacity = 0.7