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

package/src/modules/Points/track-positions.frag

@@ -1,18 +0,0 @@
-#ifdef GL_ES
-precision highp float;
-#endif
-
-uniform sampler2D positionsTexture;
-uniform sampler2D trackedIndices;
-uniform float pointsTextureSize;
-
-varying vec2 textureCoords;
-
-void main() {
-  vec4 trackedPointIndices = texture2D(trackedIndices, textureCoords);
-  if (trackedPointIndices.r < 0.0) discard;
-  vec4 pointPosition = texture2D(positionsTexture, (trackedPointIndices.rg + 0.5) / pointsTextureSize);
-
-  gl_FragColor = vec4(pointPosition.rg, 1.0, 1.0);
-}
-

package/src/modules/Points/update-position.frag

@@ -1,37 +0,0 @@
-#ifdef GL_ES
-precision highp float;
-#endif
-
-uniform sampler2D positionsTexture;
-uniform sampler2D velocity;
-uniform sampler2D pinnedStatusTexture;
-uniform float friction;
-uniform float spaceSize;
-
-varying vec2 textureCoords;
-
-void main() {
-  vec4 pointPosition = texture2D(positionsTexture, textureCoords);
-  vec4 pointVelocity = texture2D(velocity, textureCoords);
-
-  // Check if point is pinned
-  // pinnedStatusTexture has the same size and layout as positionsTexture
-  // Each pixel corresponds to a point: red channel > 0.5 means the point is pinned
-  vec4 pinnedStatus = texture2D(pinnedStatusTexture, textureCoords);
-  
-  // If pinned, don't update position
-  if (pinnedStatus.r > 0.5) {
-    gl_FragColor = pointPosition;
-    return;
-  }
-
-  // Friction
-  pointVelocity.rg *= friction;
-
-  pointPosition.rg += pointVelocity.rg;
-
-  pointPosition.r = clamp(pointPosition.r, 0.0, spaceSize);
-  pointPosition.g = clamp(pointPosition.g, 0.0, spaceSize);
-  
-  gl_FragColor = pointPosition;
-}

package/src/modules/Shared/buffer.ts

@@ -1,37 +0,0 @@
-import regl from 'regl'
-
-export function createQuadBuffer (reglInstance: regl.Regl): { buffer: regl.Buffer; size: number } {
-  const quadBuffer = reglInstance.buffer(new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]))
-  return {
-    buffer: quadBuffer,
-    size: 2,
-  }
-}
-
-export function createIndexesForBuffer (textureSize: number): Float32Array {
-  const indexes = new Float32Array(textureSize * textureSize * 2)
-  for (let y = 0; y < textureSize; y++) {
-    for (let x = 0; x < textureSize; x++) {
-      const i = y * textureSize * 2 + x * 2
-      indexes[i + 0] = x
-      indexes[i + 1] = y
-    }
-  }
-  return indexes
-}
-
-export function destroyFramebuffer (fbo?: regl.Framebuffer2D): void {
-  if (!fbo) return
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  if ((fbo as any)?._framebuffer?.framebuffer) {
-    fbo.destroy()
-  }
-}
-
-export function destroyBuffer (fbo?: regl.Buffer): void {
-  if (!fbo) return
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  if ((fbo as any)?._buffer?.buffer) {
-    fbo.destroy()
-  }
-}

package/src/modules/Shared/clear.frag

@@ -1,7 +0,0 @@
-#ifdef GL_ES
-precision highp float;
-#endif
-
-void main() {
-  gl_FragColor = vec4(0.0);
-}

package/src/modules/Shared/quad.vert

@@ -1,12 +0,0 @@
-#ifdef GL_ES
-precision highp float;
-#endif
-
-attribute vec2 vertexCoord; // Vertex coordinates in normalized device coordinates
-varying vec2 textureCoords; // Texture coordinates to pass to the fragment shader
-
-void main() {
-    // Convert vertex coordinates from [-1, 1] range to [0, 1] range for texture sampling
-    textureCoords = (vertexCoord + 1.0) / 2.0;
-    gl_Position = vec4(vertexCoord, 0, 1);
-}

package/src/modules/Store/index.ts

@@ -1,173 +0,0 @@
-import { scaleLinear } from 'd3-scale'
-import { mat3 } from 'gl-matrix'
-import { Random } from 'random'
-import { getRgbaColor, rgbToBrightness } from '@/graph/helper'
-import { hoveredPointRingOpacity, focusedPointRingOpacity, defaultConfigValues } from '@/graph/variables'
-import type { GraphConfigInterface } from '@/graph/config'
-
-export const ALPHA_MIN = 0.001
-export const MAX_POINT_SIZE = 64
-
-/**
- * Maximum number of executions to delay before performing hover detection.
- * This threshold prevents excessive hover detection calls for performance optimization.
- * The `findHoveredItem` method will skip actual detection until this count is reached.
- */
-export const MAX_HOVER_DETECTION_DELAY = 4
-
-export type Hovered = { index: number; position: [ number, number ] }
-type Focused = { index: number }
-
-export class Store {
-  public pointsTextureSize = 0
-  public linksTextureSize = 0
-  public alpha = 1
-  public transform = mat3.create()
-  public screenSize: [number, number] = [0, 0]
-  public mousePosition = [0, 0]
-  public screenMousePosition = [0, 0]
-  public selectedArea = [[0, 0], [0, 0]]
-  public isSimulationRunning = false
-  public simulationProgress = 0
-  public selectedIndices: Float32Array | null = null
-  public maxPointSize = MAX_POINT_SIZE
-  public hoveredPoint: Hovered | undefined = undefined
-  public focusedPoint: Focused | undefined = undefined
-  public draggingPointIndex: number | undefined = undefined
-  public hoveredLinkIndex: number | undefined = undefined
-  public adjustedSpaceSize = defaultConfigValues.spaceSize
-  public isSpaceKeyPressed = false
-  public div: HTMLDivElement | undefined
-  public webglMaxTextureSize = 16384 // Default fallback value
-
-  public hoveredPointRingColor = [1, 1, 1, hoveredPointRingOpacity]
-  public focusedPointRingColor = [1, 1, 1, focusedPointRingOpacity]
-  public hoveredLinkColor = [-1, -1, -1, -1]
-  // -1 means that the color is not set
-  public greyoutPointColor = [-1, -1, -1, -1]
-  // If backgroundColor is dark, isDarkenGreyout is true
-  public isDarkenGreyout = false
-  // Whether link hovering is enabled based on configured event handlers
-  public isLinkHoveringEnabled = false
-  private alphaTarget = 0
-  private scalePointX = scaleLinear()
-  private scalePointY = scaleLinear()
-  private random = new Random()
-  private _backgroundColor: [number, number, number, number] = [0, 0, 0, 0]
-
-  public get backgroundColor (): [number, number, number, number] {
-    return this._backgroundColor
-  }
-
-  public set backgroundColor (color: [number, number, number, number]) {
-    this._backgroundColor = color
-    const brightness = rgbToBrightness(color[0], color[1], color[2])
-    document.documentElement.style.setProperty('--cosmosgl-attribution-color', brightness > 0.65 ? 'black' : 'white')
-    document.documentElement.style.setProperty('--cosmosgl-error-message-color', brightness > 0.65 ? 'black' : 'white')
-    if (this.div) this.div.style.backgroundColor = `rgba(${color[0] * 255}, ${color[1] * 255}, ${color[2] * 255}, ${color[3]})`
-
-    this.isDarkenGreyout = brightness < 0.65
-  }
-
-  public addRandomSeed (seed: number | string): void {
-    this.random = this.random.clone(seed)
-  }
-
-  public getRandomFloat (min: number, max: number): number {
-    return this.random.float(min, max)
-  }
-
-  /**
-   * If the config parameter `spaceSize` exceeds the limits of WebGL,
-   * it reduces the space size without changing the config parameter.
-   */
-  public adjustSpaceSize (configSpaceSize: number, webglMaxTextureSize: number): void {
-    if (configSpaceSize >= webglMaxTextureSize) {
-      this.adjustedSpaceSize = webglMaxTextureSize / 2
-      console.warn(`The \`spaceSize\` has been reduced to ${this.adjustedSpaceSize} due to WebGL limits`)
-    } else this.adjustedSpaceSize = configSpaceSize
-  }
-
-  /**
-   * Sets the WebGL texture size limit for use in atlas creation and other texture operations.
-   */
-  public setWebGLMaxTextureSize (webglMaxTextureSize: number): void {
-    this.webglMaxTextureSize = webglMaxTextureSize
-  }
-
-  public updateScreenSize (width: number, height: number): void {
-    const { adjustedSpaceSize } = this
-    this.screenSize = [width, height]
-    this.scalePointX
-      .domain([0, adjustedSpaceSize])
-      .range([(width - adjustedSpaceSize) / 2, (width + adjustedSpaceSize) / 2])
-    this.scalePointY
-      .domain([adjustedSpaceSize, 0])
-      .range([(height - adjustedSpaceSize) / 2, (height + adjustedSpaceSize) / 2])
-  }
-
-  public scaleX (x: number): number {
-    return this.scalePointX(x)
-  }
-
-  public scaleY (y: number): number {
-    return this.scalePointY(y)
-  }
-
-  public setHoveredPointRingColor (color: string | [number, number, number, number]): void {
-    const convertedRgba = getRgbaColor(color)
-    this.hoveredPointRingColor[0] = convertedRgba[0]
-    this.hoveredPointRingColor[1] = convertedRgba[1]
-    this.hoveredPointRingColor[2] = convertedRgba[2]
-  }
-
-  public setFocusedPointRingColor (color: string | [number, number, number, number]): void {
-    const convertedRgba = getRgbaColor(color)
-    this.focusedPointRingColor[0] = convertedRgba[0]
-    this.focusedPointRingColor[1] = convertedRgba[1]
-    this.focusedPointRingColor[2] = convertedRgba[2]
-  }
-
-  public setGreyoutPointColor (color: string | [number, number, number, number] | undefined): void {
-    if (color === undefined) {
-      this.greyoutPointColor = [-1, -1, -1, -1]
-      return
-    }
-    const convertedRgba = getRgbaColor(color)
-    this.greyoutPointColor[0] = convertedRgba[0]
-    this.greyoutPointColor[1] = convertedRgba[1]
-    this.greyoutPointColor[2] = convertedRgba[2]
-    this.greyoutPointColor[3] = convertedRgba[3]
-  }
-
-  public updateLinkHoveringEnabled (config: Pick<GraphConfigInterface, 'onLinkClick' | 'onLinkMouseOver' | 'onLinkMouseOut'>): void {
-    this.isLinkHoveringEnabled = !!(config.onLinkClick || config.onLinkMouseOver || config.onLinkMouseOut)
-    if (!this.isLinkHoveringEnabled) {
-      this.hoveredLinkIndex = undefined
-    }
-  }
-
-  public setHoveredLinkColor (color?: string | [number, number, number, number]): void {
-    if (color === undefined) {
-      this.hoveredLinkColor = [-1, -1, -1, -1]
-      return
-    }
-    const convertedRgba = getRgbaColor(color)
-    this.hoveredLinkColor[0] = convertedRgba[0]
-    this.hoveredLinkColor[1] = convertedRgba[1]
-    this.hoveredLinkColor[2] = convertedRgba[2]
-    this.hoveredLinkColor[3] = convertedRgba[3]
-  }
-
-  public setFocusedPoint (index?: number): void {
-    if (index !== undefined) {
-      this.focusedPoint = { index }
-    } else this.focusedPoint = undefined
-  }
-
-  public addAlpha (decay: number): number {
-    return (this.alphaTarget - this.alpha) * this.alphaDecay(decay)
-  }
-
-  private alphaDecay = (decay: number): number => 1 - Math.pow(ALPHA_MIN, 1 / decay)
-}

package/src/modules/Zoom/index.ts

@@ -1,148 +0,0 @@
-import { zoom, ZoomTransform, zoomIdentity, D3ZoomEvent } from 'd3-zoom'
-import { extent } from 'd3-array'
-import { mat3 } from 'gl-matrix'
-import { Store } from '@/graph/modules/Store'
-import { GraphConfigInterface } from '@/graph/config'
-import { clamp } from '@/graph/helper'
-
-export class Zoom {
-  public readonly store: Store
-  public readonly config: GraphConfigInterface
-  public eventTransform = zoomIdentity
-  public behavior = zoom<HTMLCanvasElement, undefined>()
-    .scaleExtent([0.001, Infinity])
-    .on('start', (e: D3ZoomEvent<HTMLCanvasElement, undefined>) => {
-      this.isRunning = true
-      const userDriven = !!e.sourceEvent
-      this.config?.onZoomStart?.(e, userDriven)
-    })
-    .on('zoom', (e: D3ZoomEvent<HTMLCanvasElement, undefined>) => {
-      this.eventTransform = e.transform
-      const { eventTransform: { x, y, k }, store: { transform, screenSize } } = this
-      const w = screenSize[0]
-      const h = screenSize[1]
-      if (!w || !h) return
-      mat3.projection(transform, w, h)
-      mat3.translate(transform, transform, [x, y])
-      mat3.scale(transform, transform, [k, k])
-      mat3.translate(transform, transform, [w / 2, h / 2])
-      mat3.scale(transform, transform, [w / 2, h / 2])
-      mat3.scale(transform, transform, [1, -1])
-
-      const userDriven = !!e.sourceEvent
-      this.config?.onZoom?.(e, userDriven)
-    })
-    .on('end', (e: D3ZoomEvent<HTMLCanvasElement, undefined>) => {
-      this.isRunning = false
-
-      const userDriven = !!e.sourceEvent
-      this.config?.onZoomEnd?.(e, userDriven)
-    })
-
-  public isRunning = false
-
-  public constructor (store: Store, config: GraphConfigInterface) {
-    this.store = store
-    this.config = config
-  }
-
-  /**
-   * Get the zoom transform that will fit the given point positions into the viewport
-   *
-   * @param positions An array of point positions in the form `[x, y]`
-   * @param scale An optional scale factor to apply to the transform
-   * @param padding Padding around the viewport in percentage
-   */
-  public getTransform (positions: [number, number][], scale?: number, padding = 0.1): ZoomTransform {
-    if (positions.length === 0) return this.eventTransform
-    const { store: { screenSize } } = this
-    const width = screenSize[0]
-    const height = screenSize[1]
-    const xExtent = extent(positions.map(d => d[0])) as [number, number]
-    const yExtent = extent(positions.map(d => d[1])) as [number, number]
-    xExtent[0] = this.store.scaleX(xExtent[0])
-    xExtent[1] = this.store.scaleX(xExtent[1])
-    yExtent[0] = this.store.scaleY(yExtent[0])
-    yExtent[1] = this.store.scaleY(yExtent[1])
-    // Adjust extent with one screen pixel if one point coordinate is set
-    if (xExtent[0] === xExtent[1]) {
-      xExtent[0] -= 0.5
-      xExtent[1] += 0.5
-    }
-    if (yExtent[0] === yExtent[1]) {
-      yExtent[0] += 0.5
-      yExtent[1] -= 0.5
-    }
-
-    const xScale = (width * (1 - padding * 2)) / (xExtent[1] - xExtent[0])
-    const yScale = (height * (1 - padding * 2)) / (yExtent[0] - yExtent[1])
-    const clampedScale = clamp(scale ?? Math.min(xScale, yScale), ...this.behavior.scaleExtent())
-    const xCenter = (xExtent[1] + xExtent[0]) / 2
-    const yCenter = (yExtent[1] + yExtent[0]) / 2
-    const translateX = width / 2 - xCenter * clampedScale
-    const translateY = height / 2 - yCenter * clampedScale
-
-    const transform = zoomIdentity
-      .translate(translateX, translateY)
-      .scale(clampedScale)
-
-    return transform
-  }
-
-  public getDistanceToPoint (position: [number, number]): number {
-    const { x, y, k } = this.eventTransform
-    const point = this.getTransform([position], k)
-    const dx = x - point.x
-    const dy = y - point.y
-    return Math.sqrt(dx * dx + dy * dy)
-  }
-
-  public getMiddlePointTransform (position: [number, number]): ZoomTransform {
-    const { store: { screenSize }, eventTransform: { x, y, k } } = this
-    const width = screenSize[0]
-    const height = screenSize[1]
-    const currX = (width / 2 - x) / k
-    const currY = (height / 2 - y) / k
-    const pointX = this.store.scaleX(position[0])
-    const pointY = this.store.scaleY(position[1])
-    const centerX = (currX + pointX) / 2
-    const centerY = (currY + pointY) / 2
-
-    const scale = 1
-    const translateX = width / 2 - centerX * scale
-    const translateY = height / 2 - centerY * scale
-
-    return zoomIdentity
-      .translate(translateX, translateY)
-      .scale(scale)
-  }
-
-  public convertScreenToSpacePosition (screenPosition: [number, number]): [number, number] {
-    const { eventTransform: { x, y, k }, store: { screenSize } } = this
-    const w = screenSize[0]
-    const h = screenSize[1]
-    const invertedX = (screenPosition[0] - x) / k
-    const invertedY = (screenPosition[1] - y) / k
-    const spacePosition = [invertedX, (h - invertedY)] as [number, number]
-    spacePosition[0] -= (w - this.store.adjustedSpaceSize) / 2
-    spacePosition[1] -= (h - this.store.adjustedSpaceSize) / 2
-    return spacePosition
-  }
-
-  public convertSpaceToScreenPosition (spacePosition: [number, number]): [number, number] {
-    const screenPointX = this.eventTransform.applyX(this.store.scaleX(spacePosition[0]))
-    const screenPointY = this.eventTransform.applyY(this.store.scaleY(spacePosition[1]))
-    return [screenPointX, screenPointY]
-  }
-
-  public convertSpaceToScreenRadius (spaceRadius: number): number {
-    const { config: { scalePointsOnZoom }, store: { maxPointSize }, eventTransform: { k } } = this
-    let size = spaceRadius * 2
-    if (scalePointsOnZoom) {
-      size *= k
-    } else {
-      size *= Math.min(5.0, Math.max(1.0, k * 0.01))
-    }
-    return Math.min(size, maxPointSize) / 2
-  }
-}

package/src/modules/core-module.ts

@@ -1,28 +0,0 @@
-import regl from 'regl'
-import { GraphConfigInterface } from '@/graph/config'
-import { GraphData } from '@/graph/modules/GraphData'
-import { Points } from '@/graph/modules/Points'
-import { Store } from '@/graph/modules/Store'
-
-export class CoreModule {
-  public readonly reglInstance: regl.Regl
-  public readonly config: GraphConfigInterface
-  public readonly store: Store
-  public readonly data: GraphData
-  public readonly points: Points | undefined
-  public _debugRandomNumber = Math.floor(Math.random() * 1000)
-
-  public constructor (
-    reglInstance: regl.Regl,
-    config: GraphConfigInterface,
-    store: Store,
-    data: GraphData,
-    points?: Points
-  ) {
-    this.reglInstance = reglInstance
-    this.config = config
-    this.store = store
-    this.data = data
-    if (points) this.points = points
-  }
-}

package/src/stories/1. welcome.mdx

@@ -1,81 +0,0 @@
-import { Meta } from "@storybook/blocks";
-
-<Meta title="Welcome to cosmos.gl" />
-
-<div style={{ fontSize: '1.0rem', float: 'right' }}>
-  <a href="https://github.com/cosmosgl/graph" target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', color: '#fff' }}>
-    <svg height="30" viewBox="0 0 16 16" width="30" aria-hidden="true">
-      <path fill="currentColor" d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
-    </svg>
-  </a>
-</div>
-
-<p style={{ fontSize: '1.75rem', lineHeight: '1.25em', marginTop: 0 }}>Welcome to <b>cosmos.gl</b> – a high-performance WebGL library for visualizing network graphs and machine learning embeddings.</p>
-
-<video style={{ width: '100%' }} src="https://user-images.githubusercontent.com/755708/173392407-9b05cbb6-d39e-4c2c-ab41-50900cfda823.mp4" loop autoPlay muted playsInline>
-</video>
-
----
-
-### Quick Start
-
-Install the package:
-
-```bash
-npm install @cosmos.gl/graph
-```
-
-
-Get the data, [configure](../?path=/docs/configuration--docs) the graph and run the simulation:
-```javascript
-import { Graph } from '@cosmos.gl/graph'
-
-const div = document.querySelector('div')
-const config = {
-  spaceSize: 4096,
-  simulationFriction: 0.1, // keeps the graph inert
-  simulationGravity: 0, // disables gravity
-  simulationRepulsion: 0.5, // increases repulsion between points
-  curvedLinks: true, // curved links
-  fitViewDelay: 1000, // wait 1 second before fitting the view
-  fitViewPadding: 0.3, // centers the graph width padding of ~30% of screen
-  rescalePositions: true, // rescale positions
-  enableDrag: true, // enable dragging points
-  onPointClick: pointIndex => { console.log('Clicked point index: ', pointIndex) },
-  onBackgroundClick: () => { console.log('Clicked background') },
-  /* ... */
-}
-
-const graph = new Graph(div, config)
-
-// Points: [x1, y1, x2, y2, x3, y3]
-const pointPositions = new Float32Array([
-  0.0, 0.0,    // Point 1 at (0,0)
-  1.0, 0.0,    // Point 2 at (1,0)
-  0.5, 1.0,    // Point 3 at (0.5,1)
-]);
-
-graph.setPointPositions(pointPositions)
-
-// Links: [sourceIndex1, targetIndex1, sourceIndex2, targetIndex2]
-const links = new Float32Array([
-  0, 1,    // Link from point 0 to point 1
-  1, 2,    // Link from point 1 to point 2
-  2, 0,    // Link from point 2 to point 0
-]);
-
-graph.setLinks(links)
-
-graph.render()
-```
-
-Try the [Quick Start](../?path=/story/examples-beginners--quick-start) example.
-
-### Examples
-- [Basic Set-Up](../?path=/story/examples-beginners--basic-set-up)
-- [Adding Point Labels](../?path=/story/examples-beginners--point-labels) (via [`@interacta/css-labels`](https://www.npmjs.com/package/@interacta/css-labels))
-
-
----
-Copyright [OpenJS Foundation](https://openjsf.org) and cosmos.gl contributors. All rights reserved. The [OpenJS Foundation](https://openjsf.org) has registered trademarks and uses trademarks.  For a list of trademarks of the [OpenJS Foundation](https://openjsf.org), please see our [Trademark Policy](https://trademark-policy.openjsf.org/) and [Trademark List](https://trademark-list.openjsf.org/).  Trademarks and logos not indicated on the [list of OpenJS Foundation trademarks](https://trademark-list.openjsf.org) are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
-[The OpenJS Foundation](https://openjsf.org/) | [Terms of Use](https://terms-of-use.openjsf.org/) | [Privacy Policy](https://privacy-policy.openjsf.org/) | [Bylaws](https://bylaws.openjsf.org/) | [Code of Conduct](https://code-of-conduct.openjsf.org) | [Trademark Policy](https://trademark-policy.openjsf.org/) | [Trademark List](https://trademark-list.openjsf.org/) | [Cookie Policy](https://www.linuxfoundation.org/cookies/)

package/src/stories/2. configuration.mdx

@@ -1,113 +0,0 @@
-import { Meta } from "@storybook/blocks";
-
-<Meta title="Configuration" />
-
-# cosmos.gl configuration properties
-
-| Property | Description | Default |
-|---|---|---|
-| enableSimulation | If set to `false`, the simulation will not run. This property will be applied only on component initialization and it can't be changed using the `setConfig` method | `true` |
-| backgroundColor | Canvas background color | `#222222` |
-| spaceSize | Simulation space size (max 8192) | `8192` |
-| pointDefaultColor | The default color to use for points when no point colors are provided, or if the color value in the array is `undefined` or `null`. This can be either a hex color string (e.g., '#b3b3b3') or an array of RGBA values in the format `[red, green, blue, alpha]` where each value is a number between 0 and 255 | `#b3b3b3` |
-| pointColor | **[DEPRECATED]** Use `pointDefaultColor` instead. The default color to use for points when no point colors are provided... | `#b3b3b3` |
-| pointGreyoutOpacity | Greyed out point opacity value when the selection is active | `undefined` |
-| pointGreyoutColor | The color to use for points when they are greyed out (when selection is active). This can be either a hex color string (e.g., '#b3b3b3') or an array of RGBA values in the format `[red, green, blue, alpha]` where each value is a number between 0 and 255. If not provided, the color will be the same as the point's original color, but darkened or lightened depending on the background color. If `pointGreyoutOpacity` is also defined, it will override the alpha/opacity component of this color. | `undefined` |
-| pointSize | The default size value to use for points when no point sizes are provided or if the size value in the array is `undefined` or `null` | `4` |
-| pointOpacity | 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. | `1.0` |
-| pointSizeScale | Scale factor for the point size | `1` |
-| hoveredPointCursor | Cursor style to use when hovering over a point | `auto` |
-| hoveredLinkCursor | Cursor style to use when hovering over a link | `auto` |
-| renderHoveredPointRing | Turns ring rendering around a point on hover on / off | `false` |
-| hoveredPointRingColor | Hovered point ring color hex value or an array of RGBA values | `white` |
-| focusedPointRingColor | Focused point ring color hex value or an array of RGBA values | `white` |
-| focusedPointIndex | Set focus on a point by index. A ring will be highlighted around the focused point. When set to `undefined`, no point is focused. | `undefined` |
-| renderLinks | Turns link rendering on / off | `true` |
-| linkColor | The default color to use for links when no link colors are provided, or if the color value in the array is `undefined` or `null`. This can be either a hex color string (e.g., '#666666') or an array of RGBA values in the format `[red, green, blue, alpha]` where each value is a number between 0 and 255 | `#666666` |
-| linkOpacity | 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. | `1.0` |
-| 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` |
-| hoveredLinkColor | The color to use for links when they are hovered. This can be either a hex color string (e.g., '#ff3333') or an array of RGBA values in the format `[red, green, blue, alpha]` where each value is a number between 0 and 255 | `undefined` |
-| hoveredLinkWidthIncrease | Number of pixels to add to the link width when hovered | `5` |
-| 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` |
-| curvedLinkControlPointDistance | Defines the position of the control point of the curve on the normal from the centre of the line. If set to 1 then the control point is at a distance equal to the length of the line | `0.5` |
-| linkArrows | The default link arrow value that controls whether or not to display link arrows | `false` |
-| linkArrowsSizeScale | Scale factor for the link arrows size | `1` |
-| linkVisibilityDistanceRange | The range defines the minimum and maximum link visibility distance in pixels.<br /><br />The link will be fully opaque when its length is less than the first number in the array, and will have `linkVisibilityMinTransparency` transparency when its length is greater than the second number in the array.<br /><br />This distance is defined in screen space coordinates and will change as you zoom in and out (e.g. links become longer when you zoom in, and shorter when you zoom out). | `[50, 150]` |
-| linkVisibilityMinTransparency | The transparency value that the link will have when its length reaches the maximum link distance value from `linkVisibilityDistanceRange`. | `0.25` |
-| 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 | `false` |
-| initialZoomLevel | Initial zoom level (set once during initialization) | `undefined` |
-| enableZoom | Enables zooming interactions | `true` |
-| enableSimulationDuringZoom | Keep simulation running during zoom operations | `false` |
-| enableDrag | Enable/disable point dragging | `false` |
-| fitViewOnInit | Auto-zoom to fit all points on initialization | `true` |
-| fitViewDelay | Delay before fitting view when enabled in milliseconds | `250` |
-| fitViewPadding | Extra space around points when fitting view | `0.1` |
-| fitViewDuration | Animation duration for fit view operation in milliseconds | `250` |
-| fitViewByPointsInRect | When `fitViewOnInit` is set to `true`, fits the view to show the points within a rectangle defined by its two corner coordinates `[[left, bottom], [right, top]]` in the scene space | `undefined` |
-| fitViewByPointIndices | When `fitViewOnInit` is set to `true`, fits the view to show only the specified points by their indices. Takes precedence over `fitViewByPointsInRect` when both are provided. | `undefined` |
-| randomSeed | Providing a value allows control over layout randomness for consistency across simulations. Applied only on initialization | `undefined` |
-| pointSamplingDistance | Sampling density for point position methods (used in `getSampledPointPositionsMap`) in pixels | `150` |
-| attribution | Controls the text shown in the bottom right corner. Provide HTML content as a string for custom attribution. Empty string hides attribution | `''` |
-| rescalePositions | Control automatic point position adjustment. When undefined: auto-rescale if simulation disabled | `undefined` |
-
-**Notes:**
-- The attribution text color can be customized using CSS variable `--cosmosgl-attribution-color`.
-- Error message text color can be customized using CSS variable `--cosmosgl-error-message-color`.
-
-## Simulation configuration
-
-cosmos.gl layout algorithm was inspired by the [d3-force](https://github.com/d3/d3-force#forces) simulation forces: Link, Many-Body, Gravitation, and Centering. It provides several simulation settings to adjust the layout. Each of them can be changed in real time, while the simulation is in progress.
-
-| Property | Description  | Recommended range | Default |
-|---|---|---|---|
-| simulationDecay | Force simulation decay coefficient. <br /><br />Use smaller values if you want the simulation to "cool down" slower.| 100 – 10 000| `5000` |
-| simulationGravity | Gravity force coefficient | 0.0 – 1.0 | `0.25` |
-| simulationCenter | Centering force coefficient | 0.0 – 1.0 | `0.0` |
-| simulationRepulsion | Repulsion force coefficient | 0.0 – 2.0 | `1.0` |
-| simulationRepulsionTheta | Decreases / increases the detalization of the Many-Body force calculations. <br /><br /> When `useClassicQuadtree` is set to `true`, this property corresponds to the Barnes–Hut approximation criterion. | 0.3 – 2.0 | `1.15` |
-| simulationRepulsionQuadtreeLevels | Barnes–Hut approximation depth. <br /><br />Can only be used when `useClassicQuadtree` is set `true`.  | 5 – 12 | `12` | 
-| simulationLinkSpring | Link spring force coefficient | 0.0 – 2.0 | `1.0` |
-| 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` |
-
-## Event Callbacks
-
-| Callback | Description | 
-|---|---|
-| onSimulationStart | Called when simulation starts |
-| onSimulationTick | Called on every simulation tick, with the current alpha value and hover information |
-| onSimulationEnd | Called when simulation stops |
-| onSimulationPause | Called when simulation pauses |
-| onSimulationUnpause | Called when simulation unpauses |
-| onSimulationRestart | **[DEPRECATED]** Called when simulation restarts. Use `onSimulationUnpause` instead |
-| onClick | Called on canvas click with point index and position |
-| onPointClick | Called when a point is clicked |
-| onLinkClick | Called when a link is clicked |
-| onBackgroundClick | Called when the background (empty space) is clicked |
-| onMouseMove | Called on mouse movement with hover info |
-| onPointMouseOver | Called when pointer enters a point |
-| onPointMouseOut | Called when pointer leaves a point |
-| onLinkMouseOver | Called when pointer enters a link |
-| onLinkMouseOut | Called when pointer leaves a link |
-| onZoomStart | Called when zoom/pan starts |
-| onZoom | Called during zoom/pan |
-| onZoomEnd | Called when zoom/pan ends |
-| onDragStart | Called when dragging starts |
-| onDrag | Called during dragging |
-| onDragEnd | Called when dragging ends |
-
----
-Copyright [OpenJS Foundation](https://openjsf.org) and cosmos.gl contributors. All rights reserved. The [OpenJS Foundation](https://openjsf.org) has registered trademarks and uses trademarks.  For a list of trademarks of the [OpenJS Foundation](https://openjsf.org), please see our [Trademark Policy](https://trademark-policy.openjsf.org/) and [Trademark List](https://trademark-list.openjsf.org/).  Trademarks and logos not indicated on the [list of OpenJS Foundation trademarks](https://trademark-list.openjsf.org) are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
-[The OpenJS Foundation](https://openjsf.org/) | [Terms of Use](https://terms-of-use.openjsf.org/) | [Privacy Policy](https://privacy-policy.openjsf.org/) | [Bylaws](https://bylaws.openjsf.org/) | [Code of Conduct](https://code-of-conduct.openjsf.org) | [Trademark Policy](https://trademark-policy.openjsf.org/) | [Trademark List](https://trademark-list.openjsf.org/) | [Cookie Policy](https://www.linuxfoundation.org/cookies/)