lgimgui 0.1.0

package/src/widgets/composite.js

@@ -0,0 +1,355 @@
+import { createNode } from '../core/frame.js'
+import { springs } from '../core/spring.js'
+import { withAlpha } from '../core/theme.js'
+import { graphemes } from '../render/glyphs.js'
+
+export function createComposite(core, primitives, controls, glassWidget) {
+  const { driver, ids, state, interaction } = core
+  const { row, text, icon, spacer, popup, font, separator } = primitives
+  const { button, item } = controls
+
+  function menu(anchorNode, props, fn) {
+    return popup({ anchorNode, placement: props.placement ?? 'below', gap: 6, alignEnd: props.alignEnd, minW: props.minW ?? 180, matchAnchor: props.matchAnchor, align: 'stretch' }, () => {
+      glassWidget.glass(
+        {
+          key: props.key ?? 'menu',
+          role: props.role ?? 'menu',
+          surface: 'large',
+          radius: props.radius ?? core.materials.menu?.cornerRadius ?? 16,
+          pad: 6,
+          gap: 2,
+          direction: 'column',
+          align: 'stretch',
+          from: () => anchorNode.rect,
+          morph: true,
+          morphSpring: springs.reveal,
+          presenceSpring: springs.reveal,
+        },
+        fn,
+      )
+    })
+  }
+
+  function insideIds(frame, id) {
+    const target = frame.hotEntry?.id
+    return target != null && (target === id || target.startsWith(id + '/'))
+  }
+
+  function menuButton(labelText, items, props = {}) {
+    const key = props.key ?? labelText ?? 'menu'
+    const id = ids.make(key)
+    const st = state.get(id, () => ({ open: false, retained: true }))
+    const frame = driver.frame
+    let selected = null
+    const clicked = button(labelText, { ...props, id, key, selected: st.open || props.selected })
+    const parent = driver.current()
+    const anchor = parent.children[parent.children.length - 1]
+    if (clicked) st.open = !st.open
+    if (st.open) {
+      ids.push(key)
+      const labelFont = font({ weight: 600 })
+      const widest = Math.max(0, ...items.map((entry) => (entry === '-' ? 0 : core.renderer.atlas.measure(typeof entry === 'string' ? entry : entry.label, labelFont).w + (entry.icon ? 26 : 0) + (entry.detail ? 40 : 0) + (entry.check ? 24 : 0))))
+      menu(anchor, { key: 'menu', alignEnd: props.alignEnd, minW: Math.max(props.menuMinW ?? 0, widest + 36 + 12), matchAnchor: true, placement: props.placement }, () => {
+        items.forEach((entry, index) => {
+          if (entry === '-') {
+            separator({ h: 1 })
+            return
+          }
+          const labelOf = typeof entry === 'string' ? entry : entry.label
+          if (item(labelOf, { key: labelOf + index, icon: entry.icon, check: entry.checked, detail: entry.detail, swatch: entry.swatch, h: 28 })) {
+            selected = entry
+            st.open = false
+          }
+        })
+      })
+      ids.pop()
+      if (frame.pressedAnywhere && !insideIds(frame, id)) st.open = false
+      if (frame.keysPressed.has('Escape')) st.open = false
+    }
+    return selected
+  }
+
+  function textInput(value, props = {}) {
+    const id = ids.make(props.key ?? props.placeholder ?? 'input')
+    const it = interaction(id, props)
+    const st = state.get(id, () => ({ caret: props.selectAll ? graphemes(value ?? '').length : 0, anchor: 0 }))
+    const frame = driver.frame
+    const f = font({ size: props.size ?? 13, weight: 500 })
+    let next = value ?? ''
+    const parts = () => graphemes(next)
+
+    if (it.focused) {
+      const keys = frame.keysPressed
+      const shift = frame.keysDown.has('Shift')
+      const meta = frame.keysDown.has('Meta')
+      st.caret = Math.min(st.caret, parts().length)
+      st.anchor = Math.min(st.anchor, parts().length)
+      const hasSelection = st.caret !== st.anchor
+      const selectionStart = Math.min(st.caret, st.anchor)
+      const selectionEnd = Math.max(st.caret, st.anchor)
+      const replaceSelection = (insert) => {
+        const p = parts()
+        next = p.slice(0, selectionStart).join('') + insert + p.slice(selectionEnd).join('')
+        st.caret = selectionStart + graphemes(insert).length
+        st.anchor = st.caret
+      }
+      if (meta && keys.has('a')) {
+        st.anchor = 0
+        st.caret = parts().length
+      } else if (frame.text && !meta) {
+        replaceSelection(frame.text)
+      }
+      if (keys.has('Backspace')) {
+        if (hasSelection) replaceSelection('')
+        else if (st.caret > 0) {
+          const p = parts()
+          next = p.slice(0, st.caret - 1).join('') + p.slice(st.caret).join('')
+          st.caret -= 1
+          st.anchor = st.caret
+        }
+      }
+      if (keys.has('Delete')) {
+        if (hasSelection) replaceSelection('')
+        else {
+          const p = parts()
+          next = p.slice(0, st.caret).join('') + p.slice(st.caret + 1).join('')
+        }
+      }
+      if (keys.has('Left')) {
+        st.caret = Math.max(0, hasSelection && !shift ? selectionStart : st.caret - 1)
+        if (!shift) st.anchor = st.caret
+      }
+      if (keys.has('Right')) {
+        st.caret = Math.min(parts().length, hasSelection && !shift ? selectionEnd : st.caret + 1)
+        if (!shift) st.anchor = st.caret
+      }
+      if (keys.has('Home')) {
+        st.caret = 0
+        if (!shift) st.anchor = 0
+      }
+      if (keys.has('End')) {
+        st.caret = parts().length
+        if (!shift) st.anchor = st.caret
+      }
+      if (keys.has('Enter') && props.onEnter) props.onEnter(next)
+    }
+
+    const height = props.h ?? 30
+    const useGlass = props.glass ?? (core.toolbarDepth > 0 && core.capsuleDepth === 0)
+    let glassNode = null
+    if (useGlass) {
+      glassNode = glassWidget.glass({
+        key: (props.key ?? props.placeholder ?? 'input') + '-back',
+        role: 'toolbar',
+        shape: 'pill',
+        inset: core.insideGlass(),
+        w: props.w,
+        h: height,
+        minW: props.minW ?? 120,
+        direction: 'row',
+        align: 'stretch',
+        clipContent: false,
+      })
+    }
+    const node = createNode('input', { ...props, id, h: useGlass ? 'fill' : height, w: useGlass ? 'fill' : props.w ?? 'fill', minW: useGlass ? 0 : props.minW ?? 120 })
+    node.paint = (n, ctx) => {
+      const r = n.rect
+      const k = n.drawScale ?? 1
+      const fs = { ...f, size: f.size * k }
+      const radius = (props.radius ?? height / 2) * k
+      ctx.hit(n)
+      const theme = ctx.theme
+      const atlas = core.renderer.atlas
+      if (!useGlass) ctx.emit({ type: 'rect', rect: r, radius, color: theme.field })
+      if (it.focused) ctx.emit({ type: 'stroke', rect: r, radius, color: theme.focusRing, width: 1.5 })
+      if (props.icon) {
+        const iconY = r.y + (r.h - 15 * k) / 2
+        ctx.emit({ type: 'stroke', rect: { x: r.x + 12 * k, y: iconY + 2 * k, w: 8 * k, h: 8 * k }, radius: 99, color: theme.fg3, width: 1.6 * k })
+        ctx.emit({ type: 'rect', rect: { x: r.x + 21 * k, y: iconY + 9.5 * k, w: 5 * k, h: 1.7 * k }, radius: 1, color: theme.fg3, rotation: Math.PI / 4 })
+      }
+      const iconSize = 15 * k
+      const padX = 12 * k
+      const iconPad = props.icon ? iconSize + 7 * k : 0
+      const textX = r.x + padX + iconPad
+      const lineH = fs.size * fs.lineHeight
+      const textY = r.y + (r.h - lineH) / 2
+      const p = graphemes(next)
+      const widthUpTo = (index) => atlas.measure(p.slice(0, index).join(''), fs).w
+      if (it.pressed || (it.active && frame.moved)) {
+        let best = 0
+        let bestDistance = Infinity
+        for (let i = 0; i <= p.length; i++) {
+          const d = Math.abs(textX + widthUpTo(i) - frame.x)
+          if (d < bestDistance) {
+            bestDistance = d
+            best = i
+          }
+        }
+        st.caret = best
+        if (it.pressed) st.anchor = best
+      }
+      const previousClip = ctx.pushClip({ x: r.x + 4 * k, y: r.y, w: r.w - 8 * k, h: r.h })
+      if (it.focused && st.caret !== st.anchor) {
+        const a = widthUpTo(Math.min(st.caret, st.anchor))
+        const b = widthUpTo(Math.max(st.caret, st.anchor))
+        ctx.emit({ type: 'rect', rect: { x: textX + a, y: textY, w: b - a, h: lineH }, radius: 2, color: withAlpha(theme.accent, 0.3) })
+      }
+      if (next.length === 0 && props.placeholder) {
+        ctx.emit({ type: 'text', x: textX, y: textY, text: props.placeholder, font: fs, color: theme.fg3 })
+      } else {
+        ctx.emit({ type: 'text', x: textX, y: textY, text: next, font: fs, color: theme.fg })
+      }
+      if (it.focused) {
+        const blink = (performance.now() / 530) % 2 < 1 || frame.keysPressed.size > 0 || frame.text
+        core.invalidateSoon(260)
+        if (blink) ctx.emit({ type: 'rect', rect: { x: textX + widthUpTo(st.caret), y: textY + 1, w: 1.5, h: lineH - 2 }, radius: 1, color: theme.accent })
+      }
+      ctx.popClip(previousClip)
+    }
+    if (glassNode) {
+      glassNode.children.push(node)
+      node.parent = glassNode
+    } else {
+      driver.add(node)
+    }
+    return next
+  }
+
+  function pane(props, fn) {
+    return glassWidget.glass(
+      {
+        role: 'pane',
+        surface: 'large',
+        inset: true,
+        radius: props.radius ?? core.materials.pane?.cornerRadius ?? 32,
+        morph: false,
+        appear: false,
+        direction: 'column',
+        align: 'stretch',
+        ...props,
+      },
+      fn,
+    )
+  }
+
+  const RESIZE_EDGES = {
+    left: { x: 1, w: -1, cursor: 'ew-resize' },
+    right: { w: 1, cursor: 'ew-resize' },
+    top: { y: 1, h: -1, cursor: 'ns-resize' },
+    bottom: { h: 1, cursor: 'ns-resize' },
+    topLeft: { x: 1, w: -1, y: 1, h: -1, cursor: 'nwse-resize' },
+    bottomRight: { w: 1, h: 1, cursor: 'nwse-resize' },
+    topRight: { w: 1, y: 1, h: -1, cursor: 'nesw-resize' },
+    bottomLeft: { x: 1, w: -1, h: 1, cursor: 'nesw-resize' },
+  }
+
+  function resizeInteraction(id, frame) {
+    const result = { resized: false, dx: 0, dy: 0, dw: 0, dh: 0 }
+    for (const [name, edge] of Object.entries(RESIZE_EDGES)) {
+      const edgeId = id + '/resize/' + name
+      const it = interaction(edgeId, { focusable: false })
+      if (it.hot || it.active) core.setCursor(edge.cursor)
+      if (it.active && !it.pressed && frame.moved) {
+        result.resized = true
+        result.dx += (edge.x ?? 0) * frame.dx
+        result.dw += (edge.w ?? 0) * frame.dx
+        result.dy += (edge.y ?? 0) * frame.dy
+        result.dh += (edge.h ?? 0) * frame.dy
+      }
+    }
+    return result
+  }
+
+  function window(props, fn) {
+    const key = props.key ?? props.title ?? 'window'
+    const id = ids.make(key)
+    const result = { closed: false, moved: false, dx: 0, dy: 0, focusRequested: false, minimized: false, zoomed: false, resize: null }
+    const focused = props.focused ?? true
+    const frame = driver.frame
+    const resizable = props.resizable !== false
+    if (resizable) {
+      const resize = resizeInteraction(id, frame)
+      if (resize.resized) result.resize = resize
+    }
+    const radius = props.radius ?? core.materials.window?.cornerRadius ?? 36
+    const inset = props.inset ?? 8
+    let drag = null
+    let dragId = null
+    const lights = (pad) => {
+      const pressed = controls.trafficLights({ focused, pad })
+      if (pressed.close) result.closed = true
+      if (pressed.minimize) result.minimized = true
+      if (pressed.zoom) result.zoomed = true
+    }
+    glassWidget.glass(
+      {
+        id,
+        key,
+        role: props.role ?? 'window',
+        surface: 'large',
+        radius,
+        x: props.x,
+        y: props.y,
+        w: props.w,
+        h: props.h,
+        direction: 'row',
+        align: 'stretch',
+        pad: inset,
+        gap: inset,
+        focused,
+        accent: props.accent,
+        appear: props.appear,
+        hit: true,
+        resizable,
+      },
+      (node) => {
+        dragId = ids.make('drag')
+        drag = interaction(dragId, { focusable: false })
+        const toolbarHeight = 44
+        const lightsY = inset + toolbarHeight / 2 - 6
+        const lightsAt = (x, y) => {
+          const lightsBox = createNode('box', { direction: 'row', x, y, key: 'lights' })
+          driver.open(lightsBox)
+          lights(0)
+          driver.close()
+        }
+        const dragArea = (rect) => {
+          const area = createNode('drag', { ...rect, key: 'drag-area' })
+          area.paint = (n, ctx) => ctx.hit({ id: dragId, layer: n.layer }, n.rect)
+          driver.add(area)
+        }
+        if (props.sidebar) {
+          const panePad = [toolbarHeight - 4, 8, 8, 8]
+          const paneWidth = props.sidebarWidth ?? 200
+          pane({ key: 'sidebar', w: paneWidth, radius: props.sidebarRadius ?? radius, pad: panePad, gap: 2, focused }, () => {
+            props.sidebar(node)
+            dragArea({ x: -panePad[3], y: -panePad[0], w: paneWidth, h: panePad[0] })
+            lightsAt(20 - inset - panePad[3], lightsY - inset - panePad[0])
+          })
+        }
+        const body = createNode('box', { direction: 'column', fr: 1, w: 'fill', align: 'stretch', key: 'body' })
+        driver.open(body)
+        controls.toolbar({ key: 'toolbar', h: toolbarHeight, pad: [0, 6, 0, props.sidebar ? 4 : 74] }, () => {
+          const bar = driver.current()
+          bar.paint = (n, ctx) => {
+            ctx.hit({ id: dragId, layer: n.layer }, n.rect)
+            ctx.paintChildren(n, ctx)
+          }
+          if (props.toolbar) props.toolbar(node)
+        })
+        if (fn) fn(node)
+        driver.close()
+        if (!props.sidebar) lightsAt(20 - inset, lightsY - inset)
+      },
+    )
+    if (drag.active && !drag.pressed) {
+      result.moved = frame.moved
+      result.dx = frame.dx
+      result.dy = frame.dy
+    }
+    if (frame.pressedAnywhere && insideIds(frame, id)) result.focusRequested = true
+    return result
+  }
+
+  return { menu, menuButton, textInput, window, pane }
+}