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

package/package.json

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

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

@@ -63,7 +63,11 @@ float calculateArrowWidth(float arrowWidth) {
   if (scaleLinksOnZoom) {
     return arrowWidth;
   } else {
-    return arrowWidth / transformationMatrix[0][0];
+    // Apply the same scaling logic as calculateLinkWidth to maintain proportionality
+    arrowWidth = arrowWidth / transformationMatrix[0][0];
+    // Apply the same non-linear scaling to avoid extreme widths
+    arrowWidth *= min(5.0, max(1.0, transformationMatrix[0][0] * 0.01));
+    return arrowWidth;
   }
 }
 
@@ -100,7 +104,8 @@ void main() {
   float arrowWidth = linkWidth * k;
   arrowWidth *= arrowSizeScale;
 
-  float arrowWidthDifference = arrowWidth - linkWidth;
+  // Ensure arrow width difference is non-negative to prevent unwanted changes to link width
+  float arrowWidthDifference = max(0.0, arrowWidth - linkWidth);
 
   // Calculate arrow width in pixels
   float arrowWidthPx = calculateArrowWidth(arrowWidth);

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

@@ -21,6 +21,8 @@ uniform vec4 backgroundColor;
 uniform bool scalePointsOnZoom;
 uniform float maxPointSize;
 uniform bool darkenGreyout;
+uniform bool renderOnlySelected;
+uniform bool renderOnlyUnselected;
 
 varying vec2 textureCoords;
 varying vec3 rgbColor;
@@ -39,6 +41,23 @@ float calculatePointSize(float size) {
 
 void main() {  
   textureCoords = pointIndices;
+  
+  // Check greyout status for selective rendering
+  vec4 greyoutStatus = texture2D(pointGreyoutStatus, (textureCoords + 0.5) / pointsTextureSize);
+  bool isSelected = greyoutStatus.r == 0.0;
+  
+  // Discard point based on rendering mode
+  if (renderOnlySelected && !isSelected) {
+    gl_Position = vec4(2.0, 2.0, 2.0, 1.0); // Move off-screen
+    gl_PointSize = 0.0;
+    return;
+  }
+  if (renderOnlyUnselected && isSelected) {
+    gl_Position = vec4(2.0, 2.0, 2.0, 1.0); // Move off-screen
+    gl_PointSize = 0.0;
+    return;
+  }
+  
   // Position
   vec4 pointPosition = texture2D(positionsTexture, (textureCoords + 0.5) / pointsTextureSize);
   vec2 point = pointPosition.rg;
@@ -55,7 +74,6 @@ void main() {
   alpha = color.a * pointOpacity;
 
   // Adjust alpha of selected points
-  vec4 greyoutStatus = texture2D(pointGreyoutStatus, (textureCoords + 0.5) / pointsTextureSize);
   if (greyoutStatus.r > 0.0) {
     if (greyoutColor[0] != -1.0) {
       rgbColor = greyoutColor.rgb;

package/src/modules/Points/index.ts

@@ -239,6 +239,8 @@ export class Points extends CoreModule {
           darkenGreyout: () => store.darkenGreyout,
           scalePointsOnZoom: () => config.scalePointsOnZoom,
           maxPointSize: () => store.maxPointSize,
+          renderOnlySelected: reglInstance.prop<{ renderOnlySelected: boolean }, 'renderOnlySelected'>('renderOnlySelected'),
+          renderOnlyUnselected: reglInstance.prop<{ renderOnlyUnselected: boolean }, 'renderOnlyUnselected'>('renderOnlyUnselected'),
         },
         blend: {
           enable: true,
@@ -542,7 +544,17 @@ export class Points extends CoreModule {
     const { config: { renderHoveredPointRing, pointSize }, store, data } = this
     if (!this.colorBuffer) this.updateColor()
     if (!this.sizeBuffer) this.updateSize()
-    this.drawCommand?.()
+
+    // Render in layers: unselected points first (behind), then selected points (in front)
+    if (store.selectedIndices && store.selectedIndices.length > 0) {
+      // First draw unselected points (they will appear behind)
+      this.drawCommand?.({ renderOnlySelected: false, renderOnlyUnselected: true })
+      // Then draw selected points (they will appear in front)
+      this.drawCommand?.({ renderOnlySelected: true, renderOnlyUnselected: false })
+    } else {
+      // If no selection, draw all points
+      this.drawCommand?.({ renderOnlySelected: false, renderOnlyUnselected: false })
+    }
     if ((renderHoveredPointRing) && store.hoveredPoint) {
       this.drawHighlightedCommand?.({
         width: 0.85,