lgimgui 0.1.0

package/src/core/input.js

@@ -0,0 +1,294 @@
+import { rectContains } from './geometry.js'
+
+const KEY_NAMES = {
+  ' ': 'Space',
+  ArrowLeft: 'Left',
+  ArrowRight: 'Right',
+  ArrowUp: 'Up',
+  ArrowDown: 'Down',
+}
+
+function keyName(event) {
+  return KEY_NAMES[event.key] ?? event.key
+}
+
+export function createInput(canvas) {
+  const queue = []
+  let hitList = []
+  let scrollTargets = []
+  let windowFocused = true
+
+  const frame = emptyFrame()
+  let pointer = { x: -1, y: -1, type: 'mouse' }
+  let active = null
+  let hot = null
+  let hotEntry = null
+  let pressOrigin = { x: 0, y: 0 }
+
+  function emptyFrame() {
+    return {
+      x: -1,
+      y: -1,
+      dx: 0,
+      dy: 0,
+      pointerType: 'mouse',
+      down: false,
+      pressed: new Set(),
+      released: new Set(),
+      clicked: new Set(),
+      pressedAnywhere: false,
+      releasedAnywhere: false,
+      hot: null,
+      active: null,
+      dragOrigin: { x: 0, y: 0 },
+      wheelX: 0,
+      wheelY: 0,
+      wheelTarget: null,
+      wheelTargetX: null,
+      pinch: 0,
+      keysDown: new Set(),
+      keysPressed: new Set(),
+      keysReleased: new Set(),
+      text: '',
+      windowFocused: true,
+      moved: false,
+      idle: true,
+      context: null,
+      contextEntry: null,
+      pressedEntry: null,
+    }
+  }
+
+  function position(event) {
+    const bounds = canvas.getBoundingClientRect()
+    return { x: event.clientX - bounds.left, y: event.clientY - bounds.top }
+  }
+
+  function topmost(x, y) {
+    for (let i = hitList.length - 1; i >= 0; i--) {
+      const entry = hitList[i]
+      if (!rectContains(entry.rect, x, y)) continue
+      if (entry.clip && !rectContains(entry.clip, x, y)) continue
+      return entry
+    }
+    return null
+  }
+
+  function innermostScroll(x, y, horizontal) {
+    let target = null
+    for (const entry of scrollTargets) {
+      if (entry.horizontal !== horizontal) continue
+      if (rectContains(entry.rect, x, y) && (!entry.clip || rectContains(entry.clip, x, y))) target = entry
+    }
+    return target
+  }
+
+  function refreshHot() {
+    const entry = topmost(pointer.x, pointer.y)
+    hotEntry = entry
+    if (active) {
+      hot = entry && entry.id === active ? active : null
+      return
+    }
+    hot = entry ? entry.id : null
+  }
+
+  const handlers = {
+    pointerdown(event) {
+      if (event.button !== 0 && event.pointerType === 'mouse') return
+      pointer = { ...position(event), type: event.pointerType }
+      canvas.setPointerCapture?.(event.pointerId)
+      canvas.focus?.({ preventScroll: true })
+      queue.push({ type: 'down', x: pointer.x, y: pointer.y, pointerType: event.pointerType })
+      event.preventDefault()
+    },
+    pointermove(event) {
+      pointer = { ...position(event), type: event.pointerType }
+      queue.push({ type: 'move', x: pointer.x, y: pointer.y, pointerType: event.pointerType })
+    },
+    pointerup(event) {
+      if (event.button !== 0 && event.pointerType === 'mouse') return
+      pointer = { ...position(event), type: event.pointerType }
+      queue.push({ type: 'up', x: pointer.x, y: pointer.y })
+    },
+    contextmenu(event) {
+      pointer = { ...position(event), type: 'mouse' }
+      canvas.focus?.({ preventScroll: true })
+      queue.push({ type: 'context', x: pointer.x, y: pointer.y })
+      event.preventDefault()
+    },
+    pointercancel() {
+      queue.push({ type: 'up', x: pointer.x, y: pointer.y })
+    },
+    pointerleave() {
+      queue.push({ type: 'leave' })
+    },
+    wheel(event) {
+      const scale = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? 400 : 1
+      const pos = position(event)
+      queue.push({ type: 'wheel', x: pos.x, y: pos.y, dx: event.deltaX * scale, dy: event.deltaY * scale, pinch: Boolean(event.ctrlKey) })
+      event.preventDefault()
+    },
+    keydown(event) {
+      const name = keyName(event)
+      queue.push({ type: 'keydown', key: name, repeat: event.repeat, meta: event.metaKey || event.ctrlKey, shift: event.shiftKey })
+      if (event.key.length === 1 && !event.metaKey && !event.ctrlKey) queue.push({ type: 'text', text: event.key })
+      if (name === 'Tab' || name === 'Space' || name.startsWith('Arrow')) event.preventDefault()
+    },
+    keyup(event) {
+      queue.push({ type: 'keyup', key: keyName(event) })
+    },
+    blur() {
+      windowFocused = false
+      queue.push({ type: 'up', x: pointer.x, y: pointer.y })
+      queue.push({ type: 'blur' })
+    },
+    focus() {
+      windowFocused = true
+      queue.push({ type: 'focus' })
+    },
+  }
+
+  function attach() {
+    canvas.tabIndex = canvas.tabIndex >= 0 ? canvas.tabIndex : 0
+    canvas.style.touchAction = 'none'
+    canvas.style.outline = 'none'
+    for (const [name, handler] of Object.entries(handlers)) {
+      const target = name === 'blur' || name === 'focus' ? window : canvas
+      target.addEventListener(name, handler, { passive: !['wheel', 'pointerdown', 'keydown', 'contextmenu'].includes(name) })
+    }
+  }
+
+  function detach() {
+    for (const [name, handler] of Object.entries(handlers)) {
+      const target = name === 'blur' || name === 'focus' ? window : canvas
+      target.removeEventListener(name, handler)
+    }
+  }
+
+  function pending() {
+    return queue.length > 0
+  }
+
+  function beginFrame() {
+    const next = emptyFrame()
+    next.idle = queue.length === 0
+    next.keysDown = frame.keysDown
+    const previousX = frame.x
+    const previousY = frame.y
+    let releaseActive = false
+
+    for (const event of queue) {
+      switch (event.type) {
+        case 'move':
+          pointer.x = event.x
+          pointer.y = event.y
+          next.pointerType = event.pointerType
+          refreshHot()
+          break
+        case 'down': {
+          pointer.x = event.x
+          pointer.y = event.y
+          next.pointerType = event.pointerType
+          active = null
+          refreshHot()
+          next.down = true
+          next.pressedAnywhere = true
+          next.pressedEntry = hotEntry
+          pressOrigin = { x: event.x, y: event.y }
+          if (hot) {
+            active = hot
+            next.pressed.add(hot)
+          }
+          break
+        }
+        case 'up': {
+          pointer.x = event.x
+          pointer.y = event.y
+          refreshHot()
+          next.releasedAnywhere = true
+          if (active) {
+            next.released.add(active)
+            if (hot === active) next.clicked.add(active)
+            releaseActive = true
+          }
+          next.down = false
+          break
+        }
+        case 'context':
+          pointer.x = event.x
+          pointer.y = event.y
+          refreshHot()
+          next.context = { x: event.x, y: event.y }
+          next.contextEntry = hotEntry
+          break
+        case 'leave':
+          if (!active) {
+            hot = null
+            hotEntry = null
+          }
+          break
+        case 'wheel': {
+          if (event.pinch) {
+            next.pinch += event.dy
+            break
+          }
+          next.wheelX += event.dx
+          next.wheelY += event.dy
+          const horizontal = Math.abs(event.dx) > Math.abs(event.dy)
+          const target = innermostScroll(event.x, event.y, horizontal)
+          if (horizontal) next.wheelTargetX = target ? target.id : null
+          else next.wheelTarget = target ? target.id : null
+          break
+        }
+        case 'keydown':
+          next.keysPressed.add(event.key)
+          next.keysDown.add(event.key)
+          if (event.meta) next.keysDown.add('Meta')
+          if (event.shift) next.keysDown.add('Shift')
+          else next.keysDown.delete('Shift')
+          break
+        case 'keyup':
+          next.keysReleased.add(event.key)
+          next.keysDown.delete(event.key)
+          if (event.key === 'Meta' || event.key === 'Control') next.keysDown.delete('Meta')
+          break
+        case 'text':
+          next.text += event.text
+          break
+        case 'blur':
+          next.keysDown.clear()
+          break
+        default:
+          break
+      }
+    }
+    queue.length = 0
+
+    if (!next.pressedAnywhere && !next.releasedAnywhere) refreshHot()
+
+    next.x = pointer.x
+    next.y = pointer.y
+    next.dx = previousX < 0 ? 0 : pointer.x - previousX
+    next.dy = previousY < 0 ? 0 : pointer.y - previousY
+    next.moved = next.dx !== 0 || next.dy !== 0
+    next.down = active !== null && !releaseActive ? true : next.down && !releaseActive
+    next.hot = hot
+    next.active = active
+    next.hotEntry = hotEntry
+    next.dragOrigin = pressOrigin
+    next.windowFocused = windowFocused
+
+    if (releaseActive) active = null
+
+    Object.assign(frame, next)
+    return frame
+  }
+
+  function endFrame(list, scrolls) {
+    hitList = list
+    scrollTargets = scrolls
+  }
+
+  return { attach, detach, beginFrame, endFrame, pending, get frame() { return frame }, get hits() { return hitList }, get pointer() { return pointer } }
+}

package/src/core/layout.js

@@ -0,0 +1,220 @@
+import { padding } from './geometry.js'
+
+export function scaleNode(node, cx, cy, factor) {
+  if (factor === 1) return
+  node.rect = {
+    x: cx + (node.rect.x - cx) * factor,
+    y: cy + (node.rect.y - cy) * factor,
+    w: node.rect.w * factor,
+    h: node.rect.h * factor,
+  }
+  node.drawScale = (node.drawScale ?? 1) * factor
+  for (const child of node.children) scaleNode(child, cx, cy, factor)
+}
+
+export function translateNode(node, dx, dy) {
+  if (dx === 0 && dy === 0) return
+  node.rect = { ...node.rect, x: node.rect.x + dx, y: node.rect.y + dy }
+  for (const child of node.children) translateNode(child, dx, dy)
+}
+
+function applyTransform(node) {
+  const transform = node.props.transform
+  if (!transform) return
+  for (const child of node.children) {
+    if (child.props.detached) continue
+    scaleNode(child, node.rect.x, node.rect.y, transform.scale ?? 1)
+    translateNode(child, transform.tx ?? 0, transform.ty ?? 0)
+  }
+}
+
+const MAIN = { row: 'w', column: 'h' }
+const CROSS = { row: 'h', column: 'w' }
+
+function axisSize(node, axis) {
+  return axis === 'w' ? node.props.w : node.props.h
+}
+
+function mainAxisOf(node) {
+  const direction = node.parent?.props.direction ?? 'row'
+  return direction === 'column' ? 'h' : direction === 'row' ? 'w' : null
+}
+
+function isFlexible(node, axis) {
+  const size = axisSize(node, axis)
+  return size === 'fill' || ((node.props.fr ?? 0) > 0 && mainAxisOf(node) === axis)
+}
+
+function fixed(node, axis) {
+  const size = axisSize(node, axis)
+  if (typeof size !== 'number') return null
+  if (node.props.reveal != null) return size * Math.max(0, Math.min(1, node.props.reveal))
+  return size
+}
+
+function flowChildren(node) {
+  return node.children.filter((child) => child.props.x == null && child.props.y == null && !child.props.detached)
+}
+
+export function measure(node, context) {
+  for (const child of node.children) measure(child, context)
+  const pad = padding(node.props.pad)
+  const gap = node.props.gap ?? 0
+  const direction = node.props.direction ?? 'row'
+  const flow = flowChildren(node)
+
+  let w = 0
+  let h = 0
+  if (node.intrinsic) {
+    const size = node.intrinsic(context)
+    w = size.w
+    h = size.h
+  } else if (direction === 'stack') {
+    for (const child of flow) {
+      w = Math.max(w, child.natural.w)
+      h = Math.max(h, child.natural.h)
+    }
+  } else {
+    const main = MAIN[direction]
+    const cross = CROSS[direction]
+    let mainTotal = 0
+    let crossMax = 0
+    let present = 0
+    for (const child of flow) {
+      mainTotal += child.natural[main]
+      crossMax = Math.max(crossMax, child.natural[cross])
+      if (child.natural[main] > 0) present += 1
+    }
+    mainTotal += Math.max(0, present - 1) * gap
+    if (main === 'w') {
+      w = mainTotal
+      h = crossMax
+    } else {
+      h = mainTotal
+      w = crossMax
+    }
+  }
+  w += pad[1] + pad[3]
+  h += pad[0] + pad[2]
+
+  const fixedW = fixed(node, 'w')
+  const fixedH = fixed(node, 'h')
+  node.natural = {
+    w: Math.max(node.props.minW ?? 0, fixedW ?? (isFlexible(node, 'w') ? node.props.minW ?? 0 : w)),
+    h: Math.max(node.props.minH ?? 0, fixedH ?? (isFlexible(node, 'h') ? node.props.minH ?? 0 : h)),
+  }
+  if (node.props.reveal != null) {
+    const reveal = Math.max(0, Math.min(1, node.props.reveal))
+    node.natural.w *= reveal
+    node.natural.h *= reveal
+  }
+  node.content = { w, h }
+}
+
+function alignOffset(align, available, size) {
+  if (align === 'center') return (available - size) / 2
+  if (align === 'end') return available - size
+  return 0
+}
+
+function placeAbsolute(child, node, pad) {
+  const inner = innerRect(node.rect, pad)
+  const w = fixed(child, 'w') ?? (isFlexible(child, 'w') ? inner.w : child.natural.w)
+  const h = fixed(child, 'h') ?? (isFlexible(child, 'h') ? inner.h : child.natural.h)
+  const x = child.props.x ?? alignOffset(child.props.alignSelf ?? node.props.align ?? 'start', inner.w, w)
+  const y = child.props.y ?? alignOffset(child.props.alignSelf ?? node.props.align ?? 'start', inner.h, h)
+  child.rect = { x: inner.x + x, y: inner.y + y, w, h }
+}
+
+function innerRect(rect, pad) {
+  return {
+    x: rect.x + pad[3],
+    y: rect.y + pad[0],
+    w: Math.max(0, rect.w - pad[1] - pad[3]),
+    h: Math.max(0, rect.h - pad[0] - pad[2]),
+  }
+}
+
+export function position(node, rect) {
+  node.rect = rect
+  const pad = padding(node.props.pad)
+  const inner = innerRect(rect, pad)
+  const direction = node.props.direction ?? 'row'
+  const flow = flowChildren(node)
+  const gap = node.props.gap ?? 0
+  const align = node.props.align ?? 'start'
+
+  for (const child of node.children) {
+    if (child.props.detached) continue
+    if (child.props.x != null || child.props.y != null) placeAbsolute(child, node, pad)
+  }
+
+  if (direction === 'stack') {
+    for (const child of flow) {
+      const w = fixed(child, 'w') ?? (isFlexible(child, 'w') || align === 'stretch' ? inner.w : child.natural.w)
+      const h = fixed(child, 'h') ?? (isFlexible(child, 'h') || align === 'stretch' ? inner.h : child.natural.h)
+      const selfAlign = child.props.alignSelf ?? align
+      child.rect = {
+        x: inner.x + alignOffset(selfAlign, inner.w, w),
+        y: inner.y + alignOffset(selfAlign, inner.h, h),
+        w,
+        h,
+      }
+    }
+  } else {
+    const main = MAIN[direction]
+    const cross = CROSS[direction]
+    const mainAvailable = inner[main]
+    const crossAvailable = inner[cross]
+    let used = 0
+    let shares = 0
+    let present = 0
+    for (const child of flow) {
+      if (isFlexible(child, main)) {
+        shares += child.props.fr ?? 1
+        present += 1
+      } else {
+        const size = fixed(child, main) ?? child.natural[main]
+        used += size
+        if (size > 0) present += 1
+      }
+    }
+    used += Math.max(0, present - 1) * gap
+    const leftover = Math.max(0, mainAvailable - used)
+    const justify = node.props.justify ?? 'start'
+    let cursor = 0
+    let spacing = gap
+    if (shares === 0) {
+      if (justify === 'center') cursor = leftover / 2
+      else if (justify === 'end') cursor = leftover
+      else if (justify === 'between' && flow.length > 1) spacing = gap + leftover / (flow.length - 1)
+    }
+    for (const child of flow) {
+      const flexible = isFlexible(child, main)
+      const mainSize = flexible
+        ? Math.max(child.natural[main], (leftover * (child.props.fr ?? 1)) / shares)
+        : (fixed(child, main) ?? child.natural[main])
+      const selfAlign = child.props.alignSelf ?? align
+      const crossSize =
+        fixed(child, cross) ??
+        (isFlexible(child, cross) || selfAlign === 'stretch' ? crossAvailable : Math.min(child.natural[cross], crossAvailable))
+      const crossOffset = alignOffset(selfAlign, crossAvailable, crossSize)
+      child.rect =
+        main === 'w'
+          ? { x: inner.x + cursor, y: inner.y + crossOffset, w: mainSize, h: crossSize }
+          : { x: inner.x + crossOffset, y: inner.y + cursor, w: crossSize, h: mainSize }
+      cursor += mainSize + (mainSize > 0 || flexible ? spacing : 0)
+    }
+  }
+
+  for (const child of node.children) {
+    if (child.props.detached) continue
+    position(child, child.rect)
+  }
+  applyTransform(node)
+}
+
+export function layout(root, viewport, context) {
+  measure(root, context)
+  position(root, viewport)
+}

package/src/core/spring.js

@@ -0,0 +1,113 @@
+const DEFAULT = { stiffness: 260, damping: 26, mass: 1, rest: 0.001 }
+const MAX_STEP = 1 / 240
+
+export const springs = {
+  snappy: { stiffness: 420, damping: 30, mass: 1 },
+  gentle: { stiffness: 170, damping: 22, mass: 1 },
+  bouncy: { stiffness: 300, damping: 16, mass: 1 },
+  lift: { stiffness: 320, damping: 24, mass: 1 },
+  morph: { stiffness: 240, damping: 26, mass: 1 },
+  presence: { stiffness: 200, damping: 24, mass: 1 },
+  reveal: { stiffness: 900, damping: 50, mass: 1 },
+  fade: { stiffness: 500, damping: 46, mass: 1 },
+  liquid: { stiffness: 140, damping: 24, mass: 1 },
+}
+
+export function springForDuration(milliseconds) {
+  const omega = 7.5 / Math.max(0.05, milliseconds / 1000)
+  return { stiffness: omega * omega, damping: 2 * omega, mass: 1 }
+}
+
+export function createSpringClock() {
+  let dt = 0
+  let animating = false
+  let reduceMotion = false
+
+  function tick(seconds) {
+    dt = Math.min(seconds, 1 / 20)
+    animating = false
+  }
+
+  function step(spring, target, opts) {
+    const config = opts ?? DEFAULT
+    if (reduceMotion) {
+      spring.value = target
+      spring.velocity = 0
+      return target
+    }
+    const stiffness = config.stiffness ?? DEFAULT.stiffness
+    const damping = config.damping ?? DEFAULT.damping
+    const mass = config.mass ?? DEFAULT.mass
+    const rest = config.rest ?? DEFAULT.rest
+    const steps = Math.max(1, Math.ceil(dt / MAX_STEP))
+    const h = dt / steps
+    for (let i = 0; i < steps; i++) {
+      const displacement = spring.value - target
+      const force = -stiffness * displacement - damping * spring.velocity
+      spring.velocity += (force / mass) * h
+      spring.value += spring.velocity * h
+    }
+    const settled = Math.abs(spring.velocity) < rest && Math.abs(spring.value - target) < rest
+    if (settled) {
+      spring.value = target
+      spring.velocity = 0
+    } else {
+      animating = true
+    }
+    return spring.value
+  }
+
+  function animate(data, key, target, opts) {
+    let spring = data[key]
+    if (!spring) {
+      spring = { value: target, velocity: 0 }
+      data[key] = spring
+      return target
+    }
+    return step(spring, target, opts)
+  }
+
+  function animateFrom(data, key, initial, target, opts) {
+    if (!data[key]) data[key] = { value: initial, velocity: 0 }
+    return step(data[key], target, opts)
+  }
+
+  function ease(data, key, target, speed = 8) {
+    let current = data[key]
+    if (current == null) {
+      data[key] = target
+      return target
+    }
+    if (reduceMotion) {
+      data[key] = target
+      return target
+    }
+    const next = current + (target - current) * Math.min(1, speed * dt)
+    if (Math.abs(next - target) < 0.0005) {
+      data[key] = target
+      return target
+    }
+    animating = true
+    data[key] = next
+    return next
+  }
+
+  return {
+    tick,
+    animate,
+    animateFrom,
+    ease,
+    get dt() {
+      return dt
+    },
+    get animating() {
+      return animating
+    },
+    get reduceMotion() {
+      return reduceMotion
+    },
+    set reduceMotion(value) {
+      reduceMotion = value
+    },
+  }
+}

package/src/core/state.js

@@ -0,0 +1,54 @@
+export function createStateStore() {
+  const entries = new Map()
+  let frame = 0
+
+  function get(id, init) {
+    let entry = entries.get(id)
+    if (!entry) {
+      entry = { seen: frame, data: init ? init() : {} }
+      entries.set(id, entry)
+    }
+    entry.seen = frame
+    return entry.data
+  }
+
+  function peek(id) {
+    return entries.get(id)?.data ?? null
+  }
+
+  function has(id) {
+    return entries.has(id)
+  }
+
+  function remove(id) {
+    entries.delete(id)
+  }
+
+  function nextFrame() {
+    frame += 1
+  }
+
+  function collect(keepFrames = 2) {
+    for (const [id, entry] of entries) {
+      if (frame - entry.seen > keepFrames && !entry.data.retained) entries.delete(id)
+    }
+  }
+
+  function unseen() {
+    const result = []
+    for (const [id, entry] of entries) {
+      if (entry.seen !== frame) result.push([id, entry.data])
+    }
+    return result
+  }
+
+  function size() {
+    return entries.size
+  }
+
+  function keys() {
+    return [...entries.keys()]
+  }
+
+  return { get, peek, has, remove, nextFrame, collect, unseen, size, keys }
+}