@cosmos.gl/graph 2.6.2-rc.0 → 2.7.0-beta.0

package/src/declaration.d.ts

@@ -0,0 +1,12 @@
+declare module '*.frag';
+declare module '*.vert';
+declare module '*.png' {
+    const content: string
+    // eslint-disable-next-line import/no-default-export
+    export default content
+}
+declare module '*?raw' {
+    const content: string
+    // eslint-disable-next-line import/no-default-export
+    export default content
+  }

package/src/graph/utils/error-message.ts

@@ -0,0 +1,23 @@
+/**
+ * Creates and appends an error message element to the container
+ * @param container The HTML element to append the error message to
+ * @returns The created error div element
+ */
+export function createWebGLErrorMessage (container: HTMLElement, error: string): HTMLDivElement {
+  const errorDiv = document.createElement('div')
+  errorDiv.style.cssText = `
+    color: var(--cosmosgl-error-message-color);
+    padding: 0em 2em;
+    position: absolute;
+    top: 50%; left: 0; right: 0;
+    transform: translateY(-50%);
+    z-index: 1000;
+    font-family: inherit;
+    font-size: 1rem;
+    text-align: center;
+    user-select: none;
+  `
+  errorDiv.textContent = `Sorry, your device or browser does not support the required WebGL features for this visualization: ${error}`
+  container.appendChild(errorDiv)
+  return errorDiv
+}

package/src/helper.ts

@@ -0,0 +1,113 @@
+import { color as d3Color } from 'd3-color'
+import { Device, Framebuffer } from '@luma.gl/core'
+import DOMPurify from 'dompurify'
+
+export const isFunction = <T>(a: T): boolean => typeof a === 'function'
+export const isArray = <T>(a: unknown | T[]): a is T[] => Array.isArray(a)
+export const isObject = <T>(a: T): boolean => (a instanceof Object)
+export const isAClassInstance = <T>(a: T): boolean => {
+  if (a instanceof Object) {
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    return (a as T & Object).constructor.name !== 'Function' && (a as T & Object).constructor.name !== 'Object'
+  } else return false
+}
+export const isPlainObject = <T>(a: T): boolean => isObject(a) && !isArray(a) && !isFunction(a) && !isAClassInstance(a)
+
+export function getRgbaColor (value: string | [number, number, number, number]): [number, number, number, number] {
+  let rgba: [number, number, number, number]
+  if (isArray(value)) {
+    rgba = value
+  } else {
+    const color = d3Color(value)
+    const rgb = color?.rgb()
+    rgba = [rgb?.r || 0, rgb?.g || 0, rgb?.b || 0, color?.opacity ?? 1]
+  }
+
+  return [
+    rgba[0] / 255,
+    rgba[1] / 255,
+    rgba[2] / 255,
+    rgba[3],
+  ]
+}
+
+export function rgbToBrightness (r: number, g: number, b: number): number {
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b
+}
+
+/**
+ * TODO: Migrate from deprecated `readPixelsToArrayWebGL` to CommandEncoder API
+ *
+ * `readPixelsToArrayWebGL` is deprecated in luma.gl v9. The recommended modern approach is:
+ *
+ * 1. Create a buffer to hold the pixel data:
+ *    const buffer = device.createBuffer({
+ *      byteLength: width * height * 4 * 4, // RGBA, 4 bytes per float
+ *      usage: Buffer.COPY_DST | Buffer.MAP_READ
+ *    });
+ *
+ * 2. Copy texture/framebuffer to buffer using command encoder:
+ *    const commandEncoder = device.createCommandEncoder();
+ *    commandEncoder.copyTextureToBuffer({
+ *      sourceTexture: fbo, // Can be Texture or Framebuffer
+ *      width: sourceWidth ?? fbo.width,
+ *      height: sourceHeight ?? fbo.height,
+ *      origin: [sourceX, sourceY],
+ *      destinationBuffer: buffer
+ *    });
+ *    const commandBuffer = commandEncoder.finish();
+ *    device.submit(commandBuffer);
+ *
+ * 3. Read the data from the buffer (async):
+ *    const pixelData = await buffer.readAsync(); // Returns ArrayBuffer
+ *    return new Float32Array(pixelData);
+ *
+ * Note: The modern approach is asynchronous, so this function signature would need to change
+ * to return Promise<Float32Array> or we'd need to handle async at all call sites (18 locations).
+ *
+ * Migration impact:
+ * - This function is used in 18 places across the codebase
+ * - All call sites would need to be updated to handle async
+ * - Consider batching the migration to avoid inconsistencies
+ *
+ * Current status: Deprecated but still functional. Keeping for now until full migration can be planned.
+ */
+export function readPixels (device: Device, fbo: Framebuffer, sourceX = 0, sourceY = 0, sourceWidth?: number, sourceHeight?: number): Float32Array {
+  // Let luma.gl auto-allocate based on texture format
+  // It will use Float32Array for rgba32float textures
+  return device.readPixelsToArrayWebGL(fbo, {
+    sourceX,
+    sourceY,
+    sourceWidth,
+    sourceHeight,
+  }) as Float32Array
+}
+
+export function clamp (num: number, min: number, max: number): number {
+  return Math.min(Math.max(num, min), max)
+}
+
+export function isNumber (value: number | undefined | null | typeof NaN): boolean {
+  return value !== undefined && value !== null && !Number.isNaN(value)
+}
+
+/**
+ * Sanitizes HTML content to prevent XSS attacks using DOMPurify
+ *
+ * This function is used internally to sanitize HTML content before setting innerHTML,
+ * such as in attribution text. It uses a safe default configuration that allows
+ * only common safe HTML elements and attributes.
+ *
+ * @param html The HTML string to sanitize
+ * @param options Optional DOMPurify configuration options to override defaults
+ * @returns Sanitized HTML string safe for innerHTML usage
+ */
+export function sanitizeHtml (html: string, options?: DOMPurify.Config): string {
+  return DOMPurify.sanitize(html, {
+    // Default configuration: allow common safe HTML elements and attributes
+    ALLOWED_TAGS: ['a', 'b', 'i', 'em', 'strong', 'span', 'div', 'p', 'br'],
+    ALLOWED_ATTR: ['href', 'target', 'class', 'id', 'style'],
+    ALLOW_DATA_ATTR: false,
+    ...options,
+  })
+}