@cosmos.gl/graph 2.6.0 → 2.6.2-rc.0

package/src/modules/Lines/index.ts

@@ -1,273 +0,0 @@
-import regl from 'regl'
-import { CoreModule } from '@/graph/modules/core-module'
-import drawLineFrag from '@/graph/modules/Lines/draw-curve-line.frag'
-import drawLineVert from '@/graph/modules/Lines/draw-curve-line.vert'
-import hoveredLineIndexFrag from '@/graph/modules/Lines/hovered-line-index.frag'
-import hoveredLineIndexVert from '@/graph/modules/Lines/hovered-line-index.vert'
-import { defaultConfigValues } from '@/graph/variables'
-import { getCurveLineGeometry } from '@/graph/modules/Lines/geometry'
-
-export class Lines extends CoreModule {
-  public linkIndexFbo: regl.Framebuffer2D | undefined
-  public hoveredLineIndexFbo: regl.Framebuffer2D | undefined
-  private drawCurveCommand: regl.DrawCommand | undefined
-  private hoveredLineIndexCommand: regl.DrawCommand | undefined
-  private pointsBuffer: regl.Buffer | undefined
-  private colorBuffer: regl.Buffer | undefined
-  private widthBuffer: regl.Buffer | undefined
-  private arrowBuffer: regl.Buffer | undefined
-  private curveLineGeometry: number[][] | undefined
-  private curveLineBuffer: regl.Buffer | undefined
-  private linkIndexBuffer: regl.Buffer | undefined
-  private quadBuffer: regl.Buffer | undefined
-
-  public initPrograms (): void {
-    const { reglInstance, config, store } = this
-
-    this.updateLinkIndexFbo()
-
-    // Initialize the hovered line index FBO
-    if (!this.hoveredLineIndexFbo) {
-      this.hoveredLineIndexFbo = reglInstance.framebuffer({
-        color: reglInstance.texture({
-          width: 1,
-          height: 1,
-          format: 'rgba',
-          type: 'float',
-        }),
-        depth: false,
-        stencil: false,
-      })
-    }
-
-    if (!this.drawCurveCommand) {
-      this.drawCurveCommand = reglInstance({
-        vert: drawLineVert,
-        frag: drawLineFrag,
-
-        attributes: {
-          position: {
-            buffer: () => this.curveLineBuffer,
-            divisor: 0,
-          },
-          pointA: {
-            buffer: () => this.pointsBuffer,
-            divisor: 1,
-            offset: Float32Array.BYTES_PER_ELEMENT * 0,
-            stride: Float32Array.BYTES_PER_ELEMENT * 4,
-          },
-          pointB: {
-            buffer: () => this.pointsBuffer,
-            divisor: 1,
-            offset: Float32Array.BYTES_PER_ELEMENT * 2,
-            stride: Float32Array.BYTES_PER_ELEMENT * 4,
-          },
-          color: {
-            buffer: () => this.colorBuffer,
-            divisor: 1,
-            offset: Float32Array.BYTES_PER_ELEMENT * 0,
-            stride: Float32Array.BYTES_PER_ELEMENT * 4,
-          },
-          width: {
-            buffer: () => this.widthBuffer,
-            divisor: 1,
-            offset: Float32Array.BYTES_PER_ELEMENT * 0,
-            stride: Float32Array.BYTES_PER_ELEMENT * 1,
-          },
-          arrow: {
-            buffer: () => this.arrowBuffer,
-            divisor: 1,
-            offset: Float32Array.BYTES_PER_ELEMENT * 0,
-            stride: Float32Array.BYTES_PER_ELEMENT * 1,
-          },
-          linkIndices: {
-            buffer: () => this.linkIndexBuffer,
-            divisor: 1,
-            offset: Float32Array.BYTES_PER_ELEMENT * 0,
-            stride: Float32Array.BYTES_PER_ELEMENT * 1,
-          },
-        },
-        uniforms: {
-          positionsTexture: () => this.points?.currentPositionFbo,
-          pointGreyoutStatus: () => this.points?.greyoutStatusFbo,
-          transformationMatrix: () => store.transform,
-          pointsTextureSize: () => store.pointsTextureSize,
-          widthScale: () => config.linkWidthScale,
-          linkArrowsSizeScale: () => config.linkArrowsSizeScale,
-          spaceSize: () => store.adjustedSpaceSize,
-          screenSize: () => store.screenSize,
-          linkVisibilityDistanceRange: () => config.linkVisibilityDistanceRange,
-          linkVisibilityMinTransparency: () => config.linkVisibilityMinTransparency,
-          linkOpacity: () => config.linkOpacity,
-          greyoutOpacity: () => config.linkGreyoutOpacity,
-          scaleLinksOnZoom: () => config.scaleLinksOnZoom,
-          maxPointSize: () => store.maxPointSize,
-          curvedWeight: () => config.curvedLinkWeight,
-          curvedLinkControlPointDistance: () => config.curvedLinkControlPointDistance,
-          curvedLinkSegments: () => config.curvedLinks ? config.curvedLinkSegments ?? defaultConfigValues.curvedLinkSegments : 1,
-          hoveredLinkIndex: () => store.hoveredLinkIndex ?? -1,
-          hoveredLinkColor: () => store.hoveredLinkColor,
-          hoveredLinkWidthIncrease: () => config.hoveredLinkWidthIncrease,
-          renderMode: reglInstance.prop<{ renderMode: number }, 'renderMode'>('renderMode'),
-        },
-        cull: {
-          enable: true,
-          face: 'back',
-        },
-        /**
-         * Blending behavior for link index rendering (renderMode: 1.0 - hover detection):
-         *
-         * When rendering link indices to the framebuffer, we use full opacity (1.0).
-         * This means:
-         * - The source color completely overwrites the destination
-         * - No blending occurs - it's like drawing with a permanent marker
-         * - This preserves the exact index values we need for picking/selection
-         */
-        blend: {
-          enable: true,
-          func: {
-            dstRGB: 'one minus src alpha',
-            srcRGB: 'src alpha',
-            dstAlpha: 'one minus src alpha',
-            srcAlpha: 'one',
-          },
-          equation: {
-            rgb: 'add',
-            alpha: 'add',
-          },
-        },
-        depth: {
-          enable: false,
-          mask: false,
-        },
-        framebuffer: reglInstance.prop<{ framebuffer: regl.Framebuffer2D }, 'framebuffer'>('framebuffer'),
-        count: () => this.curveLineGeometry?.length ?? 0,
-        instances: () => this.data.linksNumber ?? 0,
-        primitive: 'triangle strip',
-      })
-    }
-
-    if (!this.hoveredLineIndexCommand) {
-      this.hoveredLineIndexCommand = reglInstance({
-        vert: hoveredLineIndexVert,
-        frag: hoveredLineIndexFrag,
-        attributes: {
-          position: {
-            buffer: () => this.quadBuffer,
-          },
-        },
-        uniforms: {
-          linkIndexTexture: () => this.linkIndexFbo,
-          mousePosition: () => store.screenMousePosition,
-          screenSize: () => store.screenSize,
-        },
-        framebuffer: this.hoveredLineIndexFbo,
-        count: 4,
-        primitive: 'triangle strip',
-      })
-    }
-
-    // Initialize quad buffer for full-screen rendering
-    if (!this.quadBuffer) {
-      this.quadBuffer = reglInstance.buffer([-1, -1, 1, -1, -1, 1, 1, 1])
-    }
-  }
-
-  public draw (): void {
-    if (!this.pointsBuffer) return
-    if (!this.colorBuffer) this.updateColor()
-    if (!this.widthBuffer) this.updateWidth()
-    if (!this.arrowBuffer) this.updateArrow()
-    if (!this.curveLineGeometry) this.updateCurveLineGeometry()
-
-    // Render normal links (renderMode: 0.0 = normal rendering)
-    this.drawCurveCommand?.({ framebuffer: null, renderMode: 0.0 })
-  }
-
-  public updateLinkIndexFbo (): void {
-    const { reglInstance, store } = this
-
-    // Only create and update the link index FBO if link hovering is enabled
-    if (!this.store.isLinkHoveringEnabled) return
-
-    if (!this.linkIndexFbo) this.linkIndexFbo = reglInstance.framebuffer()
-    this.linkIndexFbo({
-      color: reglInstance.texture({
-        width: store.screenSize[0],
-        height: store.screenSize[1],
-        format: 'rgba',
-        type: 'float',
-      }),
-      depth: false,
-      stencil: false,
-    })
-  }
-
-  public updatePointsBuffer (): void {
-    const { reglInstance, data, store } = this
-    if (data.linksNumber === undefined || data.links === undefined) return
-    const instancePoints = new Float32Array(data.linksNumber * 4)
-    for (let i = 0; i < data.linksNumber; i++) {
-      const fromIndex = data.links[i * 2] as number
-      const toIndex = data.links[i * 2 + 1] as number
-      const fromX = fromIndex % store.pointsTextureSize
-      const fromY = Math.floor(fromIndex / store.pointsTextureSize)
-      const toX = toIndex % store.pointsTextureSize
-      const toY = Math.floor(toIndex / store.pointsTextureSize)
-      const offset = i * 4
-      instancePoints[offset] = fromX
-      instancePoints[offset + 1] = fromY
-      instancePoints[offset + 2] = toX
-      instancePoints[offset + 3] = toY
-    }
-
-    if (!this.pointsBuffer) this.pointsBuffer = reglInstance.buffer(0)
-    this.pointsBuffer(instancePoints)
-
-    const linkIndices = new Float32Array(data.linksNumber)
-    for (let i = 0; i < data.linksNumber; i++) {
-      linkIndices[i] = i
-    }
-    if (!this.linkIndexBuffer) this.linkIndexBuffer = reglInstance.buffer(0)
-    this.linkIndexBuffer(linkIndices)
-  }
-
-  public updateColor (): void {
-    const { reglInstance, data } = this
-    if (!this.colorBuffer) this.colorBuffer = reglInstance.buffer(0)
-    this.colorBuffer(data.linkColors ?? new Float32Array())
-  }
-
-  public updateWidth (): void {
-    const { reglInstance, data } = this
-    if (!this.widthBuffer) this.widthBuffer = reglInstance.buffer(0)
-    this.widthBuffer(data.linkWidths ?? new Float32Array())
-  }
-
-  public updateArrow (): void {
-    const { reglInstance, data } = this
-    if (!this.arrowBuffer) this.arrowBuffer = reglInstance.buffer(0)
-    this.arrowBuffer(data.linkArrows ?? new Float32Array())
-  }
-
-  public updateCurveLineGeometry (): void {
-    const { reglInstance, config: { curvedLinks, curvedLinkSegments } } = this
-    this.curveLineGeometry = getCurveLineGeometry(curvedLinks ? curvedLinkSegments ?? defaultConfigValues.curvedLinkSegments : 1)
-    if (!this.curveLineBuffer) this.curveLineBuffer = reglInstance.buffer(0)
-    this.curveLineBuffer(this.curveLineGeometry)
-  }
-
-  public findHoveredLine (): void {
-    if (!this.data.linksNumber || !this.store.isLinkHoveringEnabled) return
-    if (!this.linkIndexFbo) this.updateLinkIndexFbo()
-    this.reglInstance.clear({
-      framebuffer: this.linkIndexFbo as regl.Framebuffer2D,
-      color: [0, 0, 0, 0],
-    })
-    // Render to index buffer for picking/hover detection (renderMode: 1.0 = index rendering)
-    this.drawCurveCommand?.({ framebuffer: this.linkIndexFbo, renderMode: 1.0 })
-
-    // Execute the command to read the link index at mouse position
-    this.hoveredLineIndexCommand?.()
-  }
-}

package/src/modules/Points/atlas-utils.ts

@@ -1,137 +0,0 @@
-/**
- * Creates a texture atlas from an array of ImageData objects.
- *
- * A texture atlas is a single large texture that contains multiple smaller images.
- * This allows efficient rendering by reducing the number of texture bindings needed.
- *
- * The atlas uses a grid layout where each image gets a square region sized to
- * accommodate the largest image dimension. Images are placed left-to-right, top-to-bottom.
- *
- * @param imageDataArray - Array of ImageData objects to pack into the atlas
- * @param webglMaxTextureSize - WebGL maximum texture size limit (default: 16384)
- * @returns Atlas data object containing:
- *   - atlasData: RGBA pixel data as Uint8Array
- *   - atlasSize: Total atlas texture size in pixels
- *   - atlasCoords: UV coordinates for each image as Float32Array
- *   - atlasCoordsSize: Grid size (number of rows/columns)
- *   Returns null if creation fails or no valid images provided
- */
-export function createAtlasDataFromImageData (
-  imageDataArray: ImageData[],
-  webglMaxTextureSize = 16384
-): {
-  atlasData: Uint8Array;
-  atlasSize: number;
-  atlasCoords: Float32Array;
-  atlasCoordsSize: number;
-} | null {
-  // Step 1: Validate input - ensure we have images to process
-  if (!imageDataArray?.length) {
-    return null
-  }
-
-  // Step 2: Find the maximum dimension across all images
-  // The max dimension determines the size of each grid cell in the atlas
-  let maxDimension = 0
-  for (const imageData of imageDataArray) {
-    const dimension = Math.max(imageData.width, imageData.height)
-    if (dimension > maxDimension) {
-      maxDimension = dimension
-    }
-  }
-
-  // Step 3: Validate that we found valid image dimensions
-  if (maxDimension === 0) {
-    console.warn('Invalid image dimensions: all images have zero width or height')
-    return null
-  }
-
-  const originalMaxDimension = maxDimension
-
-  // Step 4: Calculate optimal atlas grid size
-  const atlasCoordsSize = Math.ceil(Math.sqrt(imageDataArray.length))
-  let atlasSize = atlasCoordsSize * maxDimension
-
-  // Step 5: Apply WebGL size limit scaling if necessary
-  let scalingFactor = 1.0
-
-  if (atlasSize > webglMaxTextureSize) {
-    // Calculate required scale to fit within WebGL limits
-    scalingFactor = webglMaxTextureSize / atlasSize
-
-    // Apply scaling to both the individual image dimensions and atlas size
-    maxDimension = Math.max(1, Math.floor(maxDimension * scalingFactor))
-    atlasSize = Math.max(1, Math.floor(atlasSize * scalingFactor))
-
-    console.warn(
-      '🖼️  Atlas scaling required: Original size ' +
-      `${(originalMaxDimension * atlasCoordsSize).toLocaleString()}px exceeds WebGL limit ` +
-      `${webglMaxTextureSize.toLocaleString()}px. Scaling down to ${atlasSize.toLocaleString()}px ` +
-      `(${Math.round(scalingFactor * 100)}% of original quality)`
-    )
-  }
-
-  // Step 6: Create buffers for atlas data
-  const atlasData = new Uint8Array(atlasSize * atlasSize * 4).fill(0)
-  const atlasCoords = new Float32Array(atlasCoordsSize * atlasCoordsSize * 4).fill(-1)
-
-  // Step 7: Pack each image into the atlas grid
-  for (const [index, imageData] of imageDataArray.entries()) {
-    const originalWidth = imageData.width
-    const originalHeight = imageData.height
-    if (originalWidth === 0 || originalHeight === 0) {
-      // leave coords at -1 for this index and continue
-      continue
-    }
-
-    // Calculate individual scale for this image based on maxDimension
-    // This ensures each image fits optimally within its grid cell
-    const individualScale = Math.min(1.0, maxDimension / Math.max(originalWidth, originalHeight))
-
-    const scaledWidth = Math.floor(originalWidth * individualScale)
-    const scaledHeight = Math.floor(originalHeight * individualScale)
-
-    // Calculate grid position (row, column) for this image
-    const row = Math.floor(index / atlasCoordsSize)
-    const col = index % atlasCoordsSize
-
-    // Calculate pixel position in the atlas texture
-    const atlasX = col * maxDimension
-    const atlasY = row * maxDimension
-
-    // Calculate and store UV coordinates for this image
-    atlasCoords[index * 4] = atlasX / atlasSize // minU
-    atlasCoords[index * 4 + 1] = atlasY / atlasSize // minV
-    atlasCoords[index * 4 + 2] = (atlasX + scaledWidth) / atlasSize // maxU
-    atlasCoords[index * 4 + 3] = (atlasY + scaledHeight) / atlasSize // maxV
-
-    // Copy image pixel data into the atlas texture
-    for (let y = 0; y < scaledHeight; y++) {
-      for (let x = 0; x < scaledWidth; x++) {
-        // Calculate source pixel coordinates (with scaling)
-        const srcX = Math.floor(x * (originalWidth / scaledWidth))
-        const srcY = Math.floor(y * (originalHeight / scaledHeight))
-
-        // Calculate source pixel index in the original image
-        const srcIndex = (srcY * originalWidth + srcX) * 4
-
-        // Calculate target pixel index in the atlas texture
-        const atlasIndex = ((atlasY + y) * atlasSize + (atlasX + x)) * 4
-
-        // Copy RGBA values from source to atlas
-        atlasData[atlasIndex] = imageData.data[srcIndex] ?? 0 // Red channel
-        atlasData[atlasIndex + 1] = imageData.data[srcIndex + 1] ?? 0 // Green channel
-        atlasData[atlasIndex + 2] = imageData.data[srcIndex + 2] ?? 0 // Blue channel
-        atlasData[atlasIndex + 3] = imageData.data[srcIndex + 3] ?? 255 // Alpha channel
-      }
-    }
-  }
-
-  // Return the complete atlas data
-  return {
-    atlasData,
-    atlasSize,
-    atlasCoords,
-    atlasCoordsSize,
-  }
-}

package/src/modules/Points/drag-point.frag

@@ -1,20 +0,0 @@
-#ifdef GL_ES
-precision highp float;
-#endif
-
-uniform sampler2D positionsTexture;
-uniform vec2 mousePos;
-uniform float index;
-
-varying vec2 textureCoords;
-
-void main() {
-  vec4 pointPosition = texture2D(positionsTexture, textureCoords);
-
-  // Check if a point is being dragged
-  if (index >= 0.0 && index == pointPosition.b) {
-    pointPosition.rg = mousePos.rg;
-  }
-
-  gl_FragColor = pointPosition;
-}

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

@@ -1,16 +0,0 @@
-precision mediump float;
-
-uniform float width;
-
-varying vec2 vertexPosition;
-varying float pointOpacity;
-varying vec3 rgbColor;
-
-const float smoothing = 1.05;
-
-void main () {
-  float r = dot(vertexPosition, vertexPosition);
-  float opacity = smoothstep(r, r * smoothing, 1.0);
-  float stroke = smoothstep(width, width * smoothing, r);
-  gl_FragColor = vec4(rgbColor, opacity * stroke * pointOpacity);
-}

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

@@ -1,86 +0,0 @@
-precision mediump float;
-
-attribute vec2 vertexCoord;
-
-uniform sampler2D positionsTexture;
-uniform sampler2D pointGreyoutStatusTexture;
-uniform float size;
-uniform mat3 transformationMatrix;
-uniform float pointsTextureSize;
-uniform float sizeScale;
-uniform float spaceSize;
-uniform vec2 screenSize;
-uniform bool scalePointsOnZoom;
-uniform float pointIndex;
-uniform float maxPointSize;
-uniform vec4 color;
-uniform float universalPointOpacity;
-uniform float greyoutOpacity;
-uniform bool isDarkenGreyout;
-uniform vec4 backgroundColor;
-uniform vec4 greyoutColor;
-varying vec2 vertexPosition;
-varying float pointOpacity;
-varying vec3 rgbColor;
-
-float calculatePointSize(float size) {
-  float pSize;
-  if (scalePointsOnZoom) { 
-    pSize = size * transformationMatrix[0][0];
-  } else {
-    pSize = size * min(5.0, max(1.0, transformationMatrix[0][0] * 0.01));
-  }
-  return min(pSize, maxPointSize);
-}
-
-const float relativeRingRadius = 1.3;
-
-void main () {
-  vertexPosition = vertexCoord;
-
-  vec2 textureCoordinates = vec2(mod(pointIndex, pointsTextureSize), floor(pointIndex / pointsTextureSize)) + 0.5;
-  vec4 pointPosition = texture2D(positionsTexture, textureCoordinates / pointsTextureSize);
-
-  rgbColor = color.rgb;
-  pointOpacity = color.a * universalPointOpacity;
-  vec4 greyoutStatus = texture2D(pointGreyoutStatusTexture, textureCoordinates / pointsTextureSize);
-  if (greyoutStatus.r > 0.0) {
-    if (greyoutColor[0] != -1.0) {
-      rgbColor = greyoutColor.rgb;
-      pointOpacity = greyoutColor.a;
-    } else {
-      // If greyoutColor is not set, make color lighter or darker based on isDarkenGreyout
-      float blendFactor = 0.65; // Controls how much to modify (0.0 = original, 1.0 = target color)
-      
-      if (isDarkenGreyout) {
-        // Darken the color
-        rgbColor = mix(rgbColor, vec3(0.2), blendFactor);
-      } else {
-        // Lighten the color
-        rgbColor = mix(rgbColor, max(backgroundColor.rgb, vec3(0.8)), blendFactor);
-      }
-    }
-
-    if (greyoutOpacity != -1.0) {
-      pointOpacity *= greyoutOpacity;
-    }
-  }
-
-  // Calculate point radius
-  float pointSize = (calculatePointSize(size * sizeScale) * relativeRingRadius) / transformationMatrix[0][0];
-  float radius = pointSize * 0.5;
-
-  // Calculate point position in screen space
-  vec2 a = pointPosition.xy;
-  vec2 b = pointPosition.xy + vec2(0.0, radius);
-  vec2 xBasis = b - a;
-  vec2 yBasis = normalize(vec2(-xBasis.y, xBasis.x));
-  vec2 pointPositionInScreenSpace = a + xBasis * vertexCoord.x + yBasis * radius * vertexCoord.y;
-
-  // Transform point position to normalized device coordinates
-  vec2 p = 2.0 * pointPositionInScreenSpace / spaceSize - 1.0;
-  p *= spaceSize / screenSize;
-  vec3 final =  transformationMatrix * vec3(p, 1);
-  
-  gl_Position = vec4(final.rg, 0, 1);
-}