gladly-plot 0.0.4 → 0.0.6

package/src/Float.js

@@ -1,159 +0,0 @@
-import { Colorbar } from "./Colorbar.js"
-import { Plot } from "./Plot.js"
-
-const DRAG_BAR_HEIGHT = 12
-const MIN_WIDTH  = 80
-const MIN_HEIGHT = DRAG_BAR_HEIGHT + 30
-
-// Default sizes include the drag bar so the colorbar content area is unchanged.
-const DEFAULT_SIZE = {
-  horizontal: { width: 220, height: 70 + DRAG_BAR_HEIGHT },
-  vertical:   { width: 70,  height: 220 + DRAG_BAR_HEIGHT }
-}
-
-export class Float {
-  constructor(parentPlot, colorAxisName, {
-    orientation = "horizontal",
-    x = 10,
-    y = 10,
-    width,
-    height,
-    margin
-  } = {}) {
-    const defaults = DEFAULT_SIZE[orientation]
-    const w = width  ?? defaults.width
-    const h = height ?? defaults.height
-
-    // Outer floating container
-    this._el = document.createElement('div')
-    Object.assign(this._el.style, {
-      position:     'absolute',
-      left:         x + 'px',
-      top:          y + 'px',
-      width:        w + 'px',
-      height:       h + 'px',
-      zIndex:       '10',
-      boxSizing:    'border-box',
-      background:   'rgba(255,255,255,0.88)',
-      border:       '1px solid #aaa',
-      borderRadius: '4px',
-      boxShadow:    '0 2px 8px rgba(0,0,0,0.25)',
-      overflow:     'hidden'
-    })
-
-    // Ensure parent is positioned so our absolute child is contained within it
-    const parentEl = parentPlot.container
-    if (getComputedStyle(parentEl).position === 'static') {
-      parentEl.style.position = 'relative'
-    }
-    parentEl.appendChild(this._el)
-
-    // Drag bar — thin strip at the top; dragging here moves the float
-    this._dragBar = document.createElement('div')
-    Object.assign(this._dragBar.style, {
-      position:     'absolute',
-      top:          '0',
-      left:         '0',
-      right:        '0',
-      height:       DRAG_BAR_HEIGHT + 'px',
-      cursor:       'grab',
-      background:   'rgba(0,0,0,0.07)',
-      borderBottom: '1px solid rgba(0,0,0,0.12)',
-      zIndex:       '1'
-    })
-    this._el.appendChild(this._dragBar)
-
-    // Resize handle — bottom-right corner
-    this._resizeHandle = document.createElement('div')
-    Object.assign(this._resizeHandle.style, {
-      position:          'absolute',
-      right:             '0',
-      bottom:            '0',
-      width:             '12px',
-      height:            '12px',
-      cursor:            'se-resize',
-      background:        'rgba(0,0,0,0.18)',
-      borderTopLeftRadius: '3px',
-      zIndex:            '3'
-    })
-    this._el.appendChild(this._resizeHandle)
-
-    // Sub-container for the colorbar — sits below the drag bar
-    this._colorbarEl = document.createElement('div')
-    Object.assign(this._colorbarEl.style, {
-      position: 'absolute',
-      top:      DRAG_BAR_HEIGHT + 'px',
-      left:     '0',
-      right:    '0',
-      bottom:   '0'
-    })
-    this._el.appendChild(this._colorbarEl)
-
-    this._colorbar = new Colorbar(this._colorbarEl, parentPlot, colorAxisName, { orientation, margin })
-
-    this._setupInteraction()
-  }
-
-  _setupInteraction() {
-    let mode = null  // 'drag' | 'resize'
-    let startX, startY, startLeft, startTop, startW, startH
-
-    const onDragBarMouseDown = (e) => {
-      mode      = 'drag'
-      startX    = e.clientX
-      startY    = e.clientY
-      startLeft = parseInt(this._el.style.left, 10)
-      startTop  = parseInt(this._el.style.top,  10)
-      this._dragBar.style.cursor = 'grabbing'
-      e.preventDefault()
-    }
-
-    const onResizeMouseDown = (e) => {
-      mode   = 'resize'
-      startX = e.clientX
-      startY = e.clientY
-      startW = this._el.offsetWidth
-      startH = this._el.offsetHeight
-      e.preventDefault()
-      e.stopPropagation()
-    }
-
-    const onMouseMove = (e) => {
-      if (!mode) return
-      const dx = e.clientX - startX
-      const dy = e.clientY - startY
-      if (mode === 'drag') {
-        this._el.style.left = (startLeft + dx) + 'px'
-        this._el.style.top  = (startTop  + dy) + 'px'
-      } else {
-        this._el.style.width  = Math.max(MIN_WIDTH,  startW + dx) + 'px'
-        this._el.style.height = Math.max(MIN_HEIGHT, startH + dy) + 'px'
-      }
-    }
-
-    const onMouseUp = () => {
-      if (mode === 'drag') this._dragBar.style.cursor = 'grab'
-      mode = null
-    }
-
-    this._dragBar.addEventListener('mousedown', onDragBarMouseDown)
-    this._resizeHandle.addEventListener('mousedown', onResizeMouseDown)
-    document.addEventListener('mousemove', onMouseMove)
-    document.addEventListener('mouseup',   onMouseUp)
-
-    this._cleanupInteraction = () => {
-      this._dragBar.removeEventListener('mousedown', onDragBarMouseDown)
-      this._resizeHandle.removeEventListener('mousedown', onResizeMouseDown)
-      document.removeEventListener('mousemove', onMouseMove)
-      document.removeEventListener('mouseup',   onMouseUp)
-    }
-  }
-
-  destroy() {
-    this._cleanupInteraction()
-    this._colorbar.destroy()
-    this._el.remove()
-  }
-}
-
-Plot._FloatClass = Float

package/src/Layer.js

@@ -1,44 +0,0 @@
-export class Layer {
-  constructor({ type, attributes, uniforms, nameMap = {}, domains = {}, lineWidth = 1, primitive = "points", xAxis = "xaxis_bottom", yAxis = "yaxis_left", xAxisQuantityKind, yAxisQuantityKind, colorAxes = [], filterAxes = [], vertexCount = null, instanceCount = null, attributeDivisors = {}, blend = null }) {
-    // Validate that all attributes are typed arrays
-    for (const [key, value] of Object.entries(attributes)) {
-      if (!(value instanceof Float32Array)) {
-        throw new Error(`Attribute '${key}' must be Float32Array`)
-      }
-    }
-
-    // Validate colorAxes: must be an array of quantity kind strings
-    for (const quantityKind of colorAxes) {
-      if (typeof quantityKind !== 'string') {
-        throw new Error(`Color axis quantity kind must be a string, got ${typeof quantityKind}`)
-      }
-    }
-
-    // Validate filterAxes: must be an array of quantity kind strings
-    for (const quantityKind of filterAxes) {
-      if (typeof quantityKind !== 'string') {
-        throw new Error(`Filter axis quantity kind must be a string, got ${typeof quantityKind}`)
-      }
-    }
-
-    this.type = type
-    this.attributes = attributes
-    this.uniforms = uniforms
-    this.nameMap = nameMap
-    this.domains = domains
-    this.lineWidth = lineWidth
-    this.primitive = primitive
-    this.xAxis = xAxis
-    this.yAxis = yAxis
-    this.xAxisQuantityKind = xAxisQuantityKind
-    this.yAxisQuantityKind = yAxisQuantityKind
-    // colorAxes: string[] — quantity kinds of color axes; attribute named by quantityKind holds the data
-    this.colorAxes = colorAxes
-    // filterAxes: string[] — quantity kinds of filter axes; attribute named by quantityKind holds the data
-    this.filterAxes = filterAxes
-    this.vertexCount = vertexCount
-    this.instanceCount = instanceCount
-    this.attributeDivisors = attributeDivisors
-    this.blend = blend
-  }
-}

package/src/LayerType.js

@@ -1,209 +0,0 @@
-import { Layer } from "./Layer.js"
-import { buildColorGlsl } from "./ColorscaleRegistry.js"
-import { buildFilterGlsl } from "./FilterAxisRegistry.js"
-
-function buildSpatialGlsl() {
-  return `float normalize_axis(float v, vec2 domain, float scaleType) {
-  float vt = scaleType > 0.5 ? log(v) : v;
-  float d0 = scaleType > 0.5 ? log(domain.x) : domain.x;
-  float d1 = scaleType > 0.5 ? log(domain.y) : domain.y;
-  return (vt - d0) / (d1 - d0);
-}`
-}
-
-function buildApplyColorGlsl() {
-  return `uniform float u_pickingMode;
-uniform float u_pickLayerIndex;
-varying float v_pickId;
-vec4 gladly_apply_color(vec4 color) {
-  if (u_pickingMode > 0.5) {
-    float layerIdx = u_pickLayerIndex + 1.0;
-    float dataIdx = floor(v_pickId + 0.5);
-    return vec4(
-      layerIdx / 255.0,
-      floor(dataIdx / 65536.0) / 255.0,
-      floor(mod(dataIdx, 65536.0) / 256.0) / 255.0,
-      mod(dataIdx, 256.0) / 255.0
-    );
-  }
-  return color;
-}`
-}
-
-function injectPickIdAssignment(src) {
-  const lastBrace = src.lastIndexOf('}')
-  if (lastBrace === -1) return src
-  return src.slice(0, lastBrace) + '  v_pickId = a_pickId;\n}'
-}
-
-function injectInto(src, helpers) {
-  const injected = helpers.filter(Boolean).join('\n')
-  if (!injected) return src
-  const versionRe = /^[ \t]*#version[^\n]*\n?/
-  const versionMatch = src.match(versionRe)
-  const version = versionMatch ? versionMatch[0] : ''
-  const rest = version ? src.slice(version.length) : src
-  const precisionRe = /^\s*precision\s+\S+\s+\S+\s*;\s*$/mg
-  const precisions = rest.match(precisionRe) ?? []
-  const body = rest.replace(precisionRe, '')
-  return version + precisions.join('\n') + '\n' + injected + '\n' + body
-}
-
-export class LayerType {
-  constructor({
-    name,
-    // Optional static axis declarations (for schema/introspection — no function call needed)
-    xAxis, xAxisQuantityKind,
-    yAxis, yAxisQuantityKind,
-    colorAxisQuantityKinds,
-    filterAxisQuantityKinds,
-    // Optional dynamic resolver — overrides statics wherever it returns a non-undefined value
-    getAxisConfig,
-    // GPU rendering
-    vert, frag, schema, createLayer, createDrawCommand
-  }) {
-    this.name = name
-    // Static declarations stored as-is (undefined = not declared)
-    this.xAxis = xAxis
-    this.xAxisQuantityKind = xAxisQuantityKind
-    this.yAxis = yAxis
-    this.yAxisQuantityKind = yAxisQuantityKind
-    this.colorAxisQuantityKinds = colorAxisQuantityKinds ?? []
-    this.filterAxisQuantityKinds = filterAxisQuantityKinds ?? []
-    this.vert = vert
-    this.frag = frag
-
-    if (schema) this._schema = schema
-    if (createLayer) this._createLayer = createLayer
-    if (getAxisConfig) this._getAxisConfig = getAxisConfig
-    if (createDrawCommand) this.createDrawCommand = createDrawCommand
-  }
-
-  createDrawCommand(regl, layer) {
-    const nm = layer.nameMap
-    // Rename an internal name to the shader-visible name via nameMap (identity if absent).
-    const shaderName = (internalName) => nm[internalName] ?? internalName
-    // Build a single-entry uniform object with renamed key reading from the internal prop name.
-    const u = (internalName) => ({ [shaderName(internalName)]: regl.prop(internalName) })
-
-    const isInstanced = layer.instanceCount !== null
-    const pickCount = isInstanced ? layer.instanceCount : (layer.vertexCount ?? layer.attributes.x?.length ?? 0)
-    const pickIds = new Float32Array(pickCount)
-    for (let i = 0; i < pickCount; i++) pickIds[i] = i
-
-    const attributes = {
-      ...Object.fromEntries(
-        Object.entries(layer.attributes).map(([key, buffer]) => {
-          const divisor = layer.attributeDivisors[key]
-          const attrObj = divisor !== undefined ? { buffer, divisor } : { buffer }
-          return [shaderName(key), attrObj]
-        })
-      ),
-      a_pickId: isInstanced ? { buffer: regl.buffer(pickIds), divisor: 1 } : regl.buffer(pickIds)
-    }
-
-    const uniforms = {
-      ...u("xDomain"),
-      ...u("yDomain"),
-      ...u("xScaleType"),
-      ...u("yScaleType"),
-      u_pickingMode: regl.prop('u_pickingMode'),
-      u_pickLayerIndex: regl.prop('u_pickLayerIndex'),
-      ...Object.fromEntries(
-        Object.entries(layer.uniforms).map(([key, value]) => [shaderName(key), value])
-      )
-    }
-
-    // Add per-color-axis uniforms (colorscale index + range + scale type), keyed by quantity kind
-    for (const qk of layer.colorAxes) {
-      Object.assign(uniforms, u(`colorscale_${qk}`), u(`color_range_${qk}`), u(`color_scale_type_${qk}`))
-    }
-
-    // Add per-filter-axis uniforms (vec4: [min, max, hasMin, hasMax] + scale type), keyed by quantity kind
-    for (const qk of layer.filterAxes) {
-      Object.assign(uniforms, u(`filter_range_${qk}`), u(`filter_scale_type_${qk}`))
-    }
-
-    // Inject GLSL helpers before the layer shader body.
-    const spatialGlsl = buildSpatialGlsl()
-    const colorGlsl = layer.colorAxes.length > 0 ? buildColorGlsl() : ''
-    const filterGlsl = layer.filterAxes.length > 0 ? buildFilterGlsl() : ''
-    const pickVertDecls = `attribute float a_pickId;\nvarying float v_pickId;`
-
-    const drawConfig = {
-      vert: injectPickIdAssignment(injectInto(this.vert, [spatialGlsl, filterGlsl, pickVertDecls])),
-      frag: injectInto(this.frag, [buildApplyColorGlsl(), colorGlsl, filterGlsl]),
-      attributes,
-      uniforms,
-      viewport: regl.prop("viewport"),
-      primitive: layer.primitive,
-      lineWidth: layer.lineWidth,
-      count: regl.prop("count"),
-      ...(layer.blend ? { blend: layer.blend } : {})
-    }
-
-    if (layer.instanceCount !== null) {
-      drawConfig.instances = regl.prop("instances")
-    }
-
-    return regl(drawConfig)
-  }
-
-  schema(data) {
-    if (this._schema) return this._schema(data)
-    throw new Error(`LayerType '${this.name}' does not implement schema()`)
-  }
-
-  // Resolves axis config by merging static declarations with dynamic getAxisConfig output.
-  // Dynamic values (non-undefined) override static values.
-  resolveAxisConfig(parameters, data) {
-    const resolved = {
-      xAxis: this.xAxis,
-      xAxisQuantityKind: this.xAxisQuantityKind,
-      yAxis: this.yAxis,
-      yAxisQuantityKind: this.yAxisQuantityKind,
-      colorAxisQuantityKinds: [...this.colorAxisQuantityKinds],
-      filterAxisQuantityKinds: [...this.filterAxisQuantityKinds],
-    }
-
-    if (this._getAxisConfig) {
-      const dynamic = this._getAxisConfig.call(this, parameters, data)
-      if (dynamic.xAxis !== undefined)                  resolved.xAxis = dynamic.xAxis
-      if (dynamic.xAxisQuantityKind !== undefined)      resolved.xAxisQuantityKind = dynamic.xAxisQuantityKind
-      if (dynamic.yAxis !== undefined)                  resolved.yAxis = dynamic.yAxis
-      if (dynamic.yAxisQuantityKind !== undefined)      resolved.yAxisQuantityKind = dynamic.yAxisQuantityKind
-      if (dynamic.colorAxisQuantityKinds !== undefined) resolved.colorAxisQuantityKinds = dynamic.colorAxisQuantityKinds
-      if (dynamic.filterAxisQuantityKinds !== undefined) resolved.filterAxisQuantityKinds = dynamic.filterAxisQuantityKinds
-    }
-
-    return resolved
-  }
-
-  createLayer(parameters, data) {
-    if (!this._createLayer) {
-      throw new Error(`LayerType '${this.name}' does not implement createLayer()`)
-    }
-    const gpuConfigs = this._createLayer.call(this, parameters, data)
-    const axisConfig = this.resolveAxisConfig(parameters, data)
-
-    return gpuConfigs.map(gpuConfig => new Layer({
-      type: this,
-      attributes: gpuConfig.attributes ?? {},
-      uniforms: gpuConfig.uniforms ?? {},
-      nameMap: gpuConfig.nameMap ?? {},
-      domains: gpuConfig.domains ?? {},
-      lineWidth: gpuConfig.lineWidth ?? 1,
-      primitive: gpuConfig.primitive ?? "points",
-      vertexCount: gpuConfig.vertexCount ?? null,
-      instanceCount: gpuConfig.instanceCount ?? null,
-      attributeDivisors: gpuConfig.attributeDivisors ?? {},
-      blend: gpuConfig.blend ?? null,
-      xAxis: axisConfig.xAxis,
-      yAxis: axisConfig.yAxis,
-      xAxisQuantityKind: axisConfig.xAxisQuantityKind,
-      yAxisQuantityKind: axisConfig.yAxisQuantityKind,
-      colorAxes: axisConfig.colorAxisQuantityKinds,
-      filterAxes: axisConfig.filterAxisQuantityKinds,
-    }))
-  }
-}