@cosmos.gl/graph 2.7.0-beta.0 → 2.7.0-beta.1

package/src/modules/Drag/index.ts

@@ -1,33 +0,0 @@
-import { drag } from 'd3-drag'
-import { Store } from '@/graph/modules/Store'
-import { GraphConfigInterface } from '@/graph/config'
-
-export class Drag {
-  public readonly store: Store
-  public readonly config: GraphConfigInterface
-  public isActive = false
-  public behavior = drag<HTMLCanvasElement, undefined>()
-    .subject((event) => {
-      return this.store.hoveredPoint && !this.store.isSpaceKeyPressed ? { x: event.x, y: event.y } : undefined
-    })
-    .on('start', (e) => {
-      if (this.store.hoveredPoint) {
-        this.store.draggingPointIndex = this.store.hoveredPoint.index
-        this.isActive = true
-        this.config?.onDragStart?.(e)
-      }
-    })
-    .on('drag', (e) => {
-      this.config?.onDrag?.(e)
-    })
-    .on('end', (e) => {
-      this.isActive = false
-      this.store.draggingPointIndex = undefined
-      this.config?.onDragEnd?.(e)
-    })
-
-  public constructor (store: Store, config: GraphConfigInterface) {
-    this.store = store
-    this.config = config
-  }
-}

package/src/modules/FPSMonitor/css.ts

@@ -1,53 +0,0 @@
-export const benchCSS = `
-  #gl-bench {
-    position:absolute;
-    right:0;
-    top:0;
-    z-index:1000;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-  }
-  #gl-bench div {
-    position: relative;
-    display: block;
-    margin: 4px;
-    padding: 0 7px 0 10px;
-    background: #5f69de;
-    border-radius: 15px;
-    cursor: pointer;
-    opacity: 0.9;
-  }
-  #gl-bench svg {
-    height: 60px;
-    margin: 0 -1px;
-  }
-  #gl-bench text {
-    font-size: 12px;
-    font-family: Helvetica,Arial,sans-serif;
-    font-weight: 700;
-    dominant-baseline: middle;
-    text-anchor: middle;
-  }
-  #gl-bench .gl-mem {
-    font-size: 9px;
-  }
-  #gl-bench line {
-    stroke-width: 5;
-    stroke: #112211;
-    stroke-linecap: round;
-  }
-  #gl-bench polyline {
-    fill: none;
-    stroke: #112211;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    stroke-width: 3.5;
-  }
-  #gl-bench rect {
-    fill: #8288e4;
-  }
-  #gl-bench .opacity {
-    stroke: #8288e4;
-  }
-`

package/src/modules/FPSMonitor/index.ts

@@ -1,28 +0,0 @@
-
-import { select } from 'd3-selection'
-import GLBench from 'gl-bench/dist/gl-bench'
-import { benchCSS } from './css'
-
-export class FPSMonitor {
-  private bench: GLBench | undefined
-
-  public constructor (canvas: HTMLCanvasElement) {
-    this.destroy()
-    const gl = (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')) as WebGL2RenderingContext
-    this.bench = new GLBench(gl, { css: benchCSS })
-  }
-
-  public begin (): void {
-    this.bench?.begin('frame')
-  }
-
-  public end (now: number): void {
-    this.bench?.end('frame')
-    this.bench?.nextFrame(now)
-  }
-
-  public destroy (): void {
-    this.bench = undefined
-    select('#gl-bench').remove()
-  }
-}

package/src/modules/ForceCenter/calculate-centermass.frag

@@ -1,9 +0,0 @@
-#version 300 es
-precision highp float;
-
-in vec4 rgba;
-out vec4 fragColor;
-
-void main() {
-  fragColor = rgba;
-}

package/src/modules/ForceCenter/calculate-centermass.vert

@@ -1,26 +0,0 @@
-#version 300 es
-precision highp float;
-
-uniform sampler2D positionsTexture;
-
-#ifdef USE_UNIFORM_BUFFERS
-layout(std140) uniform calculateCentermassUniforms {
-  float pointsTextureSize;
-} calculateCentermass;
-
-#define pointsTextureSize calculateCentermass.pointsTextureSize
-#else
-uniform float pointsTextureSize;
-#endif
-
-in vec2 pointIndices;
-
-out vec4 rgba;
-
-void main() {
-  vec4 pointPosition = texture(positionsTexture, pointIndices / pointsTextureSize);
-  rgba = vec4(pointPosition.xy, 1.0, 0.0);
-
-  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
-  gl_PointSize = 1.0;
-}

package/src/modules/ForceCenter/force-center.frag

@@ -1,37 +0,0 @@
-#version 300 es
-precision highp float;
-
-uniform sampler2D positionsTexture;
-uniform sampler2D centermassTexture;
-
-#ifdef USE_UNIFORM_BUFFERS
-layout(std140) uniform forceCenterUniforms {
-  float centerForce;
-  float alpha;
-} forceCenter;
-
-#define centerForce forceCenter.centerForce
-#define alpha forceCenter.alpha
-#else
-uniform float centerForce;
-uniform float alpha;
-#endif
-
-in vec2 textureCoords;
-out vec4 fragColor;
-
-void main() {
-  vec4 pointPosition = texture(positionsTexture, textureCoords);
-  vec4 velocity = vec4(0.0);
-  vec4 centermassValues = texture(centermassTexture, vec2(0.0));
-  vec2 centermassPosition = centermassValues.xy / centermassValues.b;
-  vec2 distVector = centermassPosition - pointPosition.xy;
-  float dist = sqrt(dot(distVector, distVector));
-  if (dist > 0.0) {
-    float angle = atan(distVector.y, distVector.x);
-    float addV = alpha * centerForce * dist * 0.01;
-    velocity.rg += addV * vec2(cos(angle), sin(angle));
-  }
-
-  fragColor = velocity;
-}

package/src/modules/ForceCenter/index.ts

@@ -1,284 +0,0 @@
-import { Buffer, Framebuffer, RenderPass, Texture, UniformStore } from '@luma.gl/core'
-import { Model } from '@luma.gl/engine'
-import { CoreModule } from '@/graph/modules/core-module'
-import calculateCentermassFrag from '@/graph/modules/ForceCenter/calculate-centermass.frag?raw'
-import calculateCentermassVert from '@/graph/modules/ForceCenter/calculate-centermass.vert?raw'
-import forceFrag from '@/graph/modules/ForceCenter/force-center.frag?raw'
-import { createIndexesForBuffer } from '@/graph/modules/Shared/buffer'
-import clearFrag from '@/graph/modules/Shared/clear.frag?raw'
-import updateVert from '@/graph/modules/Shared/quad.vert?raw'
-
-export class ForceCenter extends CoreModule {
-  private centermassTexture: Texture | undefined
-  private centermassFbo: Framebuffer | undefined
-  private pointIndices: Buffer | undefined
-
-  private clearCentermassCommand: Model | undefined
-  private calculateCentermassCommand: Model | undefined
-  private runCommand: Model | undefined
-
-  private clearVertexCoordBuffer: Buffer | undefined
-  private forceVertexCoordBuffer: Buffer | undefined
-
-  private calculateUniformStore: UniformStore<{
-    calculateCentermassUniforms: {
-      pointsTextureSize: number;
-    };
-  }> | undefined
-
-  private forceUniformStore: UniformStore<{
-    forceCenterUniforms: {
-      centerForce: number;
-      alpha: number;
-    };
-  }> | undefined
-
-  private previousPointsTextureSize: number | undefined
-
-  public create (): void {
-    const { device, store } = this
-    const { pointsTextureSize } = store
-    if (!pointsTextureSize) return
-
-    if (!this.centermassTexture || this.centermassTexture.destroyed) {
-      this.centermassTexture = device.createTexture({
-        width: 1,
-        height: 1,
-        format: 'rgba32float',
-        usage: Texture.SAMPLE | Texture.RENDER | Texture.COPY_DST,
-      })
-    }
-    this.centermassTexture.copyImageData({
-      data: new Float32Array(4).fill(0),
-      bytesPerRow: 1,
-      mipLevel: 0,
-      x: 0,
-      y: 0,
-    })
-
-    if (!this.centermassFbo || this.centermassFbo.destroyed) {
-      this.centermassFbo = device.createFramebuffer({
-        width: 1,
-        height: 1,
-        colorAttachments: [this.centermassTexture],
-      })
-    }
-
-    const indexData = createIndexesForBuffer(pointsTextureSize)
-    if (!this.pointIndices || this.pointIndices.byteLength !== indexData.byteLength) {
-      this.pointIndices?.destroy()
-      this.pointIndices = device.createBuffer({
-        data: indexData,
-        usage: Buffer.VERTEX | Buffer.COPY_DST,
-      })
-    } else {
-      this.pointIndices.write(indexData)
-    }
-
-    this.previousPointsTextureSize = pointsTextureSize
-  }
-
-  public initPrograms (): void {
-    const { device, store, points } = this
-    if (!points || !store.pointsTextureSize) return
-    if (!this.centermassFbo || this.centermassFbo.destroyed || !this.centermassTexture || this.centermassTexture.destroyed) return
-    if (!this.pointIndices) return
-
-    // Fullscreen quad buffer (shared by clear and force passes)
-    if (!this.clearVertexCoordBuffer || this.clearVertexCoordBuffer.destroyed) {
-      this.clearVertexCoordBuffer = device.createBuffer({
-        data: new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
-      })
-    }
-    if (!this.forceVertexCoordBuffer || this.forceVertexCoordBuffer.destroyed) {
-      this.forceVertexCoordBuffer = device.createBuffer({
-        data: new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
-      })
-    }
-
-    if (!this.calculateUniformStore) {
-      this.calculateUniformStore = new UniformStore({
-        calculateCentermassUniforms: {
-          uniformTypes: {
-            pointsTextureSize: 'f32',
-          },
-        },
-      })
-    }
-
-    if (!this.forceUniformStore) {
-      this.forceUniformStore = new UniformStore({
-        forceCenterUniforms: {
-          uniformTypes: {
-            centerForce: 'f32',
-            alpha: 'f32',
-          },
-        },
-      })
-    }
-
-    if (!this.clearCentermassCommand) {
-      this.clearCentermassCommand = new Model(device, {
-        fs: clearFrag,
-        vs: updateVert,
-        topology: 'triangle-strip',
-        vertexCount: 4,
-        attributes: {
-          vertexCoord: this.clearVertexCoordBuffer,
-        },
-        bufferLayout: [
-          { name: 'vertexCoord', format: 'float32x2' },
-        ],
-        parameters: {
-          depthWriteEnabled: false,
-          depthCompare: 'always',
-        },
-      })
-    }
-
-    if (!this.calculateCentermassCommand) {
-      this.calculateCentermassCommand = new Model(device, {
-        fs: calculateCentermassFrag,
-        vs: calculateCentermassVert,
-        topology: 'point-list',
-        vertexCount: this.data.pointsNumber ?? 0,
-        attributes: {
-          pointIndices: this.pointIndices,
-        },
-        bufferLayout: [
-          { name: 'pointIndices', format: 'float32x2' },
-        ],
-        defines: {
-          USE_UNIFORM_BUFFERS: true,
-        },
-        bindings: {
-          calculateCentermassUniforms: this.calculateUniformStore.getManagedUniformBuffer(device, 'calculateCentermassUniforms'),
-          positionsTexture: points.previousPositionTexture!,
-        },
-        parameters: {
-          blend: true,
-          blendColorOperation: 'add',
-          blendColorSrcFactor: 'one',
-          blendColorDstFactor: 'one',
-          blendAlphaOperation: 'add',
-          blendAlphaSrcFactor: 'one',
-          blendAlphaDstFactor: 'one',
-          depthWriteEnabled: false,
-          depthCompare: 'always',
-        },
-      })
-    } else {
-      this.calculateCentermassCommand.setVertexCount(this.data.pointsNumber ?? 0)
-    }
-
-    if (!this.runCommand) {
-      this.runCommand = new Model(device, {
-        fs: forceFrag,
-        vs: updateVert,
-        topology: 'triangle-strip',
-        vertexCount: 4,
-        attributes: {
-          vertexCoord: this.forceVertexCoordBuffer,
-        },
-        bufferLayout: [
-          { name: 'vertexCoord', format: 'float32x2' },
-        ],
-        defines: {
-          USE_UNIFORM_BUFFERS: true,
-        },
-        bindings: {
-          forceCenterUniforms: this.forceUniformStore.getManagedUniformBuffer(device, 'forceCenterUniforms'),
-          positionsTexture: points.previousPositionTexture!,
-          centermassTexture: this.centermassTexture,
-        },
-        parameters: {
-          depthWriteEnabled: false,
-          depthCompare: 'always',
-        },
-      })
-    }
-  }
-
-  public run (renderPass?: RenderPass): void {
-    const { device, store, points } = this
-    if (!points || !this.centermassFbo || !this.centermassTexture) return
-    if (!this.calculateCentermassCommand || !this.calculateUniformStore || !this.runCommand || !this.forceUniformStore) return
-    if (!points.previousPositionTexture || points.previousPositionTexture.destroyed) return
-    if (!renderPass && (!points.velocityFbo || points.velocityFbo.destroyed)) return
-
-    // Skip if sizes changed and create() wasn't called yet
-    if (store.pointsTextureSize !== this.previousPointsTextureSize) return
-
-    // Clear centermass then accumulate
-    const centermassPass = device.beginRenderPass({
-      framebuffer: this.centermassFbo,
-      clearColor: [0, 0, 0, 0],
-    })
-
-    this.calculateUniformStore.setUniforms({
-      calculateCentermassUniforms: {
-        pointsTextureSize: store.pointsTextureSize ?? 0,
-      },
-    })
-    this.calculateCentermassCommand.setBindings({
-      calculateCentermassUniforms: this.calculateUniformStore.getManagedUniformBuffer(device, 'calculateCentermassUniforms'),
-      positionsTexture: points.previousPositionTexture!,
-    })
-
-    // No need to draw clear model separately; pass clearColor already zeroed
-    this.calculateCentermassCommand.draw(centermassPass)
-    centermassPass.end()
-
-    // Apply center force into velocity
-    this.forceUniformStore.setUniforms({
-      forceCenterUniforms: {
-        centerForce: this.config.simulationCenter ?? 0,
-        alpha: store.alpha,
-      },
-    })
-    this.runCommand.setBindings({
-      forceCenterUniforms: this.forceUniformStore.getManagedUniformBuffer(device, 'forceCenterUniforms'),
-      positionsTexture: points.previousPositionTexture!,
-      centermassTexture: this.centermassTexture,
-    })
-
-    const pass = renderPass ?? device.beginRenderPass({
-      framebuffer: points.velocityFbo,
-    })
-
-    this.runCommand.draw(pass)
-
-    if (!renderPass) pass.end()
-  }
-
-  public destroy (): void {
-    this.calculateUniformStore?.destroy()
-    this.calculateUniformStore = undefined
-    this.forceUniformStore?.destroy()
-    this.forceUniformStore = undefined
-
-    this.clearCentermassCommand?.destroy()
-    this.clearCentermassCommand = undefined
-    this.calculateCentermassCommand?.destroy()
-    this.calculateCentermassCommand = undefined
-    this.runCommand?.destroy()
-    this.runCommand = undefined
-
-    if (this.clearVertexCoordBuffer && !this.clearVertexCoordBuffer.destroyed) this.clearVertexCoordBuffer.destroy()
-    this.clearVertexCoordBuffer = undefined
-
-    if (this.forceVertexCoordBuffer && !this.forceVertexCoordBuffer.destroyed) this.forceVertexCoordBuffer.destroy()
-    this.forceVertexCoordBuffer = undefined
-
-    this.pointIndices?.destroy()
-    this.pointIndices = undefined
-
-    if (this.centermassTexture && !this.centermassTexture.destroyed) this.centermassTexture.destroy()
-    this.centermassTexture = undefined
-
-    if (this.centermassFbo && !this.centermassFbo.destroyed) this.centermassFbo.destroy()
-    this.centermassFbo = undefined
-
-    this.previousPointsTextureSize = undefined
-  }
-}

package/src/modules/ForceGravity/force-gravity.frag

@@ -1,40 +0,0 @@
-#version 300 es
-precision highp float;
-
-uniform sampler2D positionsTexture;
-
-#ifdef USE_UNIFORM_BUFFERS
-layout(std140) uniform forceGravityUniforms {
-  float gravity;
-  float spaceSize;
-  float alpha;
-} forceGravity;
-
-#define gravity forceGravity.gravity
-#define spaceSize forceGravity.spaceSize
-#define alpha forceGravity.alpha
-#else
-uniform float gravity;
-uniform float spaceSize;
-uniform float alpha;
-#endif
-
-in vec2 textureCoords;
-out vec4 fragColor;
-
-void main() {
-  vec4 pointPosition = texture(positionsTexture, textureCoords);
-
-  vec4 velocity = vec4(0.0);
-
-  vec2 centerPosition = vec2(spaceSize * 0.5);
-  vec2 distVector = centerPosition - pointPosition.rg;
-  float dist = sqrt(dot(distVector, distVector));
-  if (dist > 0.0) {
-    float angle = atan(distVector.y, distVector.x);
-    float additionalVelocity = alpha * gravity * dist * 0.1;
-    velocity.rg += additionalVelocity * vec2(cos(angle), sin(angle));
-  }
-
-  fragColor = velocity;
-}

package/src/modules/ForceGravity/index.ts

@@ -1,107 +0,0 @@
-import { Buffer, RenderPass, UniformStore } from '@luma.gl/core'
-import { Model } from '@luma.gl/engine'
-import { CoreModule } from '@/graph/modules/core-module'
-import forceFrag from '@/graph/modules/ForceGravity/force-gravity.frag?raw'
-import updateVert from '@/graph/modules/Shared/quad.vert?raw'
-
-export class ForceGravity extends CoreModule {
-  private runCommand: Model | undefined
-  private vertexCoordBuffer: Buffer | undefined
-  private uniformStore: UniformStore<{
-    forceGravityUniforms: {
-      gravity: number;
-      spaceSize: number;
-      alpha: number;
-    };
-  }> | undefined
-
-  public initPrograms (): void {
-    const { device, points, store } = this
-    if (!points || !store.pointsTextureSize) return
-
-    if (!this.vertexCoordBuffer || this.vertexCoordBuffer.destroyed) {
-      this.vertexCoordBuffer = device.createBuffer({
-        data: new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
-      })
-    }
-
-    if (!this.uniformStore) {
-      this.uniformStore = new UniformStore({
-        forceGravityUniforms: {
-          uniformTypes: {
-            gravity: 'f32',
-            spaceSize: 'f32',
-            alpha: 'f32',
-          },
-        },
-      })
-    }
-
-    if (!this.runCommand) {
-      this.runCommand = new Model(device, {
-        fs: forceFrag,
-        vs: updateVert,
-        topology: 'triangle-strip',
-        vertexCount: 4,
-        attributes: {
-          vertexCoord: this.vertexCoordBuffer,
-        },
-        bufferLayout: [
-          { name: 'vertexCoord', format: 'float32x2' },
-        ],
-        defines: {
-          USE_UNIFORM_BUFFERS: true,
-        },
-        bindings: {
-          forceGravityUniforms: this.uniformStore.getManagedUniformBuffer(device, 'forceGravityUniforms'),
-          positionsTexture: points.previousPositionTexture!,
-        },
-        parameters: {
-          depthWriteEnabled: false,
-          depthCompare: 'always',
-        },
-      })
-    }
-  }
-
-  public run (renderPass?: RenderPass): void {
-    const { device, points, store } = this
-    if (!points || !this.runCommand || !this.uniformStore) return
-    if (!points.previousPositionTexture || points.previousPositionTexture.destroyed) return
-    if (!renderPass && (!points.velocityFbo || points.velocityFbo.destroyed)) return
-
-    this.uniformStore.setUniforms({
-      forceGravityUniforms: {
-        gravity: this.config.simulationGravity ?? 0,
-        spaceSize: store.adjustedSpaceSize ?? 0,
-        alpha: store.alpha,
-      },
-    })
-
-    this.runCommand.setBindings({
-      forceGravityUniforms: this.uniformStore.getManagedUniformBuffer(device, 'forceGravityUniforms'),
-      positionsTexture: points.previousPositionTexture!,
-    })
-
-    const pass = renderPass ?? device.beginRenderPass({
-      framebuffer: points.velocityFbo,
-    })
-
-    this.runCommand.draw(pass)
-
-    if (!renderPass) pass.end()
-  }
-
-  public destroy (): void {
-    this.uniformStore?.destroy()
-    this.uniformStore = undefined
-
-    if (this.runCommand && !this.runCommand.destroyed) this.runCommand.destroy()
-    this.runCommand = undefined
-
-    if (this.vertexCoordBuffer && !this.vertexCoordBuffer.destroyed) {
-      this.vertexCoordBuffer.destroy()
-    }
-    this.vertexCoordBuffer = undefined
-  }
-}