@thunderclap-engine/engine 0.0.0-stage → 1.1.0

package/dist/ui/world-panel/wgsl.d.ts

@@ -0,0 +1,10 @@
+/** Floats in the panel's uniform: the 3×4 world matrix as three rows, then `size.xy`. */
+export declare const WORLD_PANEL_UNIFORM_FLOATS = 16;
+export declare const WORLD_PANEL_UNIFORM_BYTES: number;
+/**
+ * The panel quad's shader: six vertices, no vertex buffer. The quad spans `size` world units
+ * around the panel's origin in its xy plane (facing +z); its texture is the panel canvas, in
+ * premultiplied alpha, so the fragment writes the sample straight out under premultiplied blend.
+ * The canvas's row 0 is the panel's top, so v runs 0 at +y.
+ */
+export declare const WORLD_PANEL_WGSL = "\n\nstruct EngineGlobals {\n  logicalSize: vec2f,\n  targetSize: vec2f,\n  time: f32,\n  dt: f32,\n  _pad: vec2f,\n};\n@group(0) @binding(0) var<uniform> globals: EngineGlobals;\nstruct EngineCamera {\n  view: mat4x4f,\n  proj: mat4x4f,\n  view_proj: mat4x4f,\n  camera_pos: vec4f,\n  viewport: vec4f,\n  view_index: u32,\n  _pad0: u32, _pad1: u32, _pad2: u32,\n  inv_view_proj: mat4x4f,\n  prev_view_proj: mat4x4f,\n  prev_view: mat4x4f,\n  jitter: vec4f,\n};\n@group(0) @binding(1) var<uniform> camera: EngineCamera;\n\nstruct WorldPanel {\n  m0: vec4f,\n  m1: vec4f,\n  m2: vec4f,\n  size: vec4f,\n};\n@group(1) @binding(0) var<uniform> panel: WorldPanel;\n@group(1) @binding(1) var panel_sampler: sampler;\n@group(1) @binding(2) var panel_tex: texture_2d<f32>;\n\nstruct VSOut {\n  @builtin(position) clip: vec4f,\n  @location(0) uv: vec2f,\n};\nstruct FragOut {\n  @location(0) color: vec4f,\n  @location(1) emissive: vec4f,\n};\n\n@vertex fn vs(@builtin(vertex_index) vi: u32) -> VSOut {\n  var corners = array<vec2f, 6>(\n    vec2f(-0.5, -0.5), vec2f(0.5, -0.5), vec2f(0.5, 0.5),\n    vec2f(-0.5, -0.5), vec2f(0.5, 0.5), vec2f(-0.5, 0.5)\n  );\n  let q = corners[vi];\n  let local = vec4f(q * panel.size.xy, 0.0, 1.0);\n  let world = vec3f(dot(panel.m0, local), dot(panel.m1, local), dot(panel.m2, local));\n  var o: VSOut;\n  o.clip = camera.view_proj * vec4f(world, 1.0);\n  o.uv = vec2f(q.x + 0.5, 0.5 - q.y);\n  return o;\n}\n\n@fragment fn fs(in: VSOut) -> FragOut {\n  var o: FragOut;\n  o.color = textureSample(panel_tex, panel_sampler, in.uv);\n  o.emissive = vec4f(0.0);\n  return o;\n}\n";

package/dist/ui/world-panel/wgsl.js

@@ -0,0 +1,52 @@
+import { WGSL_GLOBALS } from '../../render/wgsl.js';
+/** Floats in the panel's uniform: the 3×4 world matrix as three rows, then `size.xy`. */
+export const WORLD_PANEL_UNIFORM_FLOATS = 16;
+export const WORLD_PANEL_UNIFORM_BYTES = WORLD_PANEL_UNIFORM_FLOATS * 4;
+/**
+ * The panel quad's shader: six vertices, no vertex buffer. The quad spans `size` world units
+ * around the panel's origin in its xy plane (facing +z); its texture is the panel canvas, in
+ * premultiplied alpha, so the fragment writes the sample straight out under premultiplied blend.
+ * The canvas's row 0 is the panel's top, so v runs 0 at +y.
+ */
+export const WORLD_PANEL_WGSL = /* wgsl */ `
+${WGSL_GLOBALS}
+struct WorldPanel {
+  m0: vec4f,
+  m1: vec4f,
+  m2: vec4f,
+  size: vec4f,
+};
+@group(1) @binding(0) var<uniform> panel: WorldPanel;
+@group(1) @binding(1) var panel_sampler: sampler;
+@group(1) @binding(2) var panel_tex: texture_2d<f32>;
+
+struct VSOut {
+  @builtin(position) clip: vec4f,
+  @location(0) uv: vec2f,
+};
+struct FragOut {
+  @location(0) color: vec4f,
+  @location(1) emissive: vec4f,
+};
+
+@vertex fn vs(@builtin(vertex_index) vi: u32) -> VSOut {
+  var corners = array<vec2f, 6>(
+    vec2f(-0.5, -0.5), vec2f(0.5, -0.5), vec2f(0.5, 0.5),
+    vec2f(-0.5, -0.5), vec2f(0.5, 0.5), vec2f(-0.5, 0.5)
+  );
+  let q = corners[vi];
+  let local = vec4f(q * panel.size.xy, 0.0, 1.0);
+  let world = vec3f(dot(panel.m0, local), dot(panel.m1, local), dot(panel.m2, local));
+  var o: VSOut;
+  o.clip = camera.view_proj * vec4f(world, 1.0);
+  o.uv = vec2f(q.x + 0.5, 0.5 - q.y);
+  return o;
+}
+
+@fragment fn fs(in: VSOut) -> FragOut {
+  var o: FragOut;
+  o.color = textureSample(panel_tex, panel_sampler, in.uv);
+  o.emissive = vec4f(0.0);
+  return o;
+}
+`;

package/dist/ui/world-panel/widgets.d.ts

@@ -0,0 +1,207 @@
+/**
+ * World-panel widgets: painted with Canvas2D from theme tokens, hit by panel px. Each widget
+ * owns its options; `set(patch)` writes only the fields that changed and marks its rect dirty, so
+ * a game may call it every tick. Hover, pressed and focus are flags the panel sets before a paint.
+ */
+import type { PanelRect } from './layout.js';
+import type { Painter, PanelTheme } from './paint.js';
+/** Where a widget lives: it asks for a repaint of its rect or a new layout pass. */
+export interface WorldWidgetHost {
+    readonly painter: Painter;
+    invalidate(widget: WorldWidget): void;
+    relayout(): void;
+}
+export type WorldWidgetTone = 'text' | 'muted' | 'accent' | 'info' | 'success' | 'warn' | 'danger';
+export type WorldWidgetSize = 's' | 'm' | 'l';
+export type WorldWidgetAlign = 'left' | 'center' | 'right';
+/** A key event the panel forwards (`KeyboardEvent` fits). */
+export interface PanelKeyEvent {
+    key: string;
+    shiftKey?: boolean;
+}
+/**
+ * Base of every panel widget. `O` is its options object; subclasses say which keys change the
+ * height (`layoutKeys`) so `set` can ask for a layout pass only then.
+ */
+export declare abstract class WorldWidget<O extends object = object> {
+    /** An explicit place in panel px; `null` lets the flow place it. */
+    rect: PanelRect | null;
+    /** Where the panel put it (the flow or `rect`). */
+    readonly layoutRect: PanelRect;
+    hover: boolean;
+    pressed: boolean;
+    focused: boolean;
+    /** @internal set by the panel on `add`. */
+    host: WorldWidgetHost | null;
+    protected theme: PanelTheme | null;
+    protected readonly opts: O;
+    protected readonly layoutKeys: ReadonlySet<string>;
+    protected constructor(opts: O, layoutKeys?: readonly (keyof O & string)[]);
+    /** The current options (read-only view). */
+    get options(): Readonly<O>;
+    /** Whether the widget takes focus and pointer presses. */
+    get focusable(): boolean;
+    /** Disabled widgets paint faded and ignore input. */
+    get disabled(): boolean;
+    /** @internal */
+    attach(host: WorldWidgetHost): void;
+    /** @internal */
+    detach(): void;
+    /** Mark the widget's rect dirty. */
+    invalidate(): void;
+    /**
+     * Write the fields of `patch` that differ (`!==`) from the current options. Only a change marks
+     * the rect dirty; a change to a layout key also re-runs the flow. Returns whether anything changed.
+     */
+    set(patch: Partial<O>): boolean;
+    /** Hook after `set` wrote something (clamp derived state). */
+    protected changed(): void;
+    /** The height wanted for `width` px (needs the theme, so after `attach`). */
+    abstract measure(width: number): number;
+    /** Paint into `r` (the widget's layout rect) with the panel's painter. */
+    abstract paint(p: Painter, r: PanelRect): void;
+    /** Pointer went down at panel px (inside the rect). */
+    pointerDown(_x: number, _y: number): void;
+    /** Pointer moved; `down` while this widget holds the press. */
+    pointerMove(_x: number, _y: number, _down: boolean): void;
+    /** The press ended; `inside` when the release was over this widget. */
+    pointerUp(_x: number, _y: number, _inside: boolean): void;
+    /** Wheel over the widget, `dy` in px (positive scrolls down). Returns whether it was used. */
+    wheel(_dy: number): boolean;
+    /** The pad's A / Enter / Space on the focused widget. */
+    activate(): void;
+    /** A key on the focused widget; true when consumed. */
+    key(_event: PanelKeyEvent): boolean;
+    protected get t(): PanelTheme;
+    /** The row height a control uses: the M font plus `space3` above and below. */
+    protected controlHeight(): number;
+    /** The background, hover and pressed layers of a control, then the border. */
+    protected paintControl(p: Painter, r: PanelRect, fill: string, radius: number): void;
+    /** Run `paint` at the disabled alpha when disabled; the focus ring after. */
+    protected frame(p: Painter, r: PanelRect, radius: number, paint: () => void): void;
+}
+export interface WorldLabelOptions {
+    text: string;
+    /** `s`, `m` (default) or `l`: the theme's font sizes. */
+    size?: WorldWidgetSize;
+    align?: WorldWidgetAlign;
+    tone?: WorldWidgetTone;
+    rect?: PanelRect;
+}
+export declare class WorldLabel extends WorldWidget<WorldLabelOptions> {
+    constructor(opts: WorldLabelOptions);
+    measure(): number;
+    paint(p: Painter, r: PanelRect): void;
+}
+export interface WorldButtonOptions {
+    text: string;
+    /** Fires on release over the button (and on `activate`), never on the press. */
+    onPress?: () => void;
+    disabled?: boolean;
+    rect?: PanelRect;
+}
+export declare class WorldButton extends WorldWidget<WorldButtonOptions> {
+    constructor(opts: WorldButtonOptions);
+    get focusable(): boolean;
+    measure(): number;
+    paint(p: Painter, r: PanelRect): void;
+    pointerUp(_x: number, _y: number, inside: boolean): void;
+    activate(): void;
+}
+export interface WorldToggleOptions {
+    text: string;
+    value: boolean;
+    onChange?: (value: boolean) => void;
+    disabled?: boolean;
+    rect?: PanelRect;
+}
+export declare class WorldToggle extends WorldWidget<WorldToggleOptions> {
+    constructor(opts: WorldToggleOptions);
+    get focusable(): boolean;
+    measure(): number;
+    paint(p: Painter, r: PanelRect): void;
+    pointerUp(_x: number, _y: number, inside: boolean): void;
+    activate(): void;
+}
+export interface WorldSliderOptions {
+    min: number;
+    max: number;
+    value: number;
+    /** Snap to multiples of `step` from `min`; 0 or unset for continuous. */
+    step?: number;
+    onChange?: (value: number) => void;
+    disabled?: boolean;
+    rect?: PanelRect;
+}
+export declare class WorldSlider extends WorldWidget<WorldSliderOptions> {
+    private dragging;
+    constructor(opts: WorldSliderOptions);
+    get focusable(): boolean;
+    measure(): number;
+    /** The value for a panel px `x` inside `r`. */
+    private valueAt;
+    private snap;
+    protected changed(): void;
+    private commit;
+    paint(p: Painter, r: PanelRect): void;
+    pointerDown(x: number): void;
+    pointerMove(x: number, _y: number, down: boolean): void;
+    pointerUp(x: number): void;
+    key(e: PanelKeyEvent): boolean;
+}
+export interface WorldListOptions {
+    items: readonly string[];
+    /** Index of the selected item, -1 for none. */
+    selected?: number;
+    onSelect?: (index: number) => void;
+    /** Rows shown; the rest scroll (drag or wheel). Default 4. */
+    visibleRows?: number;
+    disabled?: boolean;
+    rect?: PanelRect;
+}
+export declare class WorldList extends WorldWidget<WorldListOptions> {
+    /** Scroll offset in px from the top of the items. */
+    scroll: number;
+    private pressY;
+    private pressScroll;
+    private dragging;
+    private down;
+    constructor(opts: WorldListOptions);
+    get focusable(): boolean;
+    /** Row height in px. */
+    get rowHeight(): number;
+    /** The largest `scroll` that still shows a full last row. */
+    get maxScroll(): number;
+    measure(): number;
+    protected changed(): void;
+    /** Set the scroll offset, clamped to `[0, maxScroll]`; dirty only when it moved. */
+    setScroll(px: number): void;
+    /** Select `index` (clamped; -1 clears), scroll it into view and fire `onSelect` when it changed. */
+    select(index: number): void;
+    /** The item index under panel px `y`, or -1 between/after the items. */
+    rowAt(y: number): number;
+    paint(p: Painter, r: PanelRect): void;
+    pointerDown(_x: number, y: number): void;
+    pointerMove(_x: number, y: number, down: boolean): void;
+    pointerUp(_x: number, y: number, inside: boolean): void;
+    wheel(dy: number): boolean;
+    activate(): void;
+    key(e: PanelKeyEvent): boolean;
+}
+export interface WorldProgressOptions {
+    /** 0..1. */
+    value: number;
+    tone?: WorldWidgetTone;
+    rect?: PanelRect;
+}
+export declare class WorldProgress extends WorldWidget<WorldProgressOptions> {
+    constructor(opts: WorldProgressOptions);
+    measure(): number;
+    paint(p: Painter, r: PanelRect): void;
+}
+export declare function label(opts: WorldLabelOptions): WorldLabel;
+export declare function button(opts: WorldButtonOptions): WorldButton;
+export declare function toggle(opts: WorldToggleOptions): WorldToggle;
+export declare function slider(opts: WorldSliderOptions): WorldSlider;
+export declare function list(opts: WorldListOptions): WorldList;
+export declare function progress(opts: WorldProgressOptions): WorldProgress;