gpucanvas 0.2.0 → 0.3.1

package/dist/editor-BSRqjhN8.d.ts

@@ -0,0 +1,267 @@
+interface Camera {
+    /** World coordinate shown at the viewport's top-left corner. */
+    x: number;
+    y: number;
+    zoom: number;
+}
+interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface Point {
+    x: number;
+    y: number;
+}
+/** A point in surface pixels (from the surface's top left) as world units. */
+declare const screenToWorld: (camera: Camera, point: Point) => Point;
+/** A world point as surface pixels. */
+declare const worldToScreen: (camera: Camera, point: Point) => Point;
+/** Zooms by `factor` while keeping the world point under (screenX, screenY) fixed. */
+declare function zoomAt(camera: Camera, screenX: number, screenY: number, factor: number): Camera;
+/** Fits `bounds` into the viewport with `padding` CSS pixels on each side. */
+declare function fitCamera(bounds: Rect, viewportWidth: number, viewportHeight: number, padding?: number): Camera;
+
+/**
+ * Shader effects on live nodes. An effect is a WGSL function the GPU runs for every pixel of a
+ * node's snapshot, so the component stays live DOM while it ripples, glows or dissolves.
+ *
+ * The function is `fn effect(input: EffectInput) -> vec4f`, returning a premultiplied color:
+ *
+ * ```wgsl
+ * struct EffectInput {
+ *   uv: vec2f,     // 0 to 1 across the node; outside that range in its padding
+ *   size: vec2f,   // the node's size in CSS pixels
+ *   time: f32,     // seconds since the canvas started
+ *   zoom: f32,     // the camera's zoom
+ *   params: vec4f, // the node's parameters, from setEffect
+ *   pointer: vec2f,  // the pointer, in the node's uv; far away when it is off the canvas
+ *   press: vec2f,    // where the last press landed, in the node's uv
+ *   sincePress: f32, // seconds since that press
+ * }
+ * fn source(uv: vec2f) -> vec4f // the node's own pixels, transparent outside 0 to 1
+ * fn hash(p: vec2f) -> f32      // a pseudo-random value from 0 to 1
+ * fn noise(p: vec2f) -> f32     // smooth value noise from 0 to 1
+ * ```
+ */
+interface Effect {
+    readonly name: string;
+    readonly wgsl: string;
+    /** Runs every frame while a node wearing it is in view, for effects that use `time`. */
+    readonly animated: boolean;
+    /** Parameters a node gets when `setEffect` leaves them out, up to four. */
+    readonly params: readonly number[];
+    /** How far past its node the effect draws, in CSS pixels: a glow's reach, a blur's spread. */
+    readonly pad: number | ((params: readonly number[]) => number);
+    /**
+     * The same look as a CSS `filter`, for the DOM backend. Effects without one show their node
+     * unchanged there.
+     */
+    readonly css?: (params: readonly number[], time: number) => string;
+    /** Seconds an animated CSS look takes to repeat. Default 4. */
+    readonly period?: number;
+}
+interface EffectDefinition {
+    name: string;
+    wgsl: string;
+    animated?: boolean;
+    params?: readonly number[];
+    pad?: Effect['pad'];
+    css?: Effect['css'];
+    period?: number;
+}
+declare const defineEffect: (definition: EffectDefinition) => Effect;
+declare const EFFECTS: {
+    readonly glass: Effect;
+    readonly shockwave: Effect;
+    readonly glitch: Effect;
+    readonly vhs: Effect;
+    readonly frost: Effect;
+    readonly dither: Effect;
+    readonly glow: Effect;
+    readonly hue: Effect;
+    readonly ripple: Effect;
+    readonly blur: Effect;
+    readonly pixelate: Effect;
+    readonly dissolve: Effect;
+    readonly grayscale: Effect;
+};
+
+type GpuCanvasMode = 'gpu' | 'dom';
+interface GpuCanvasOptions {
+    /** `auto` uses the GPU path when WebGPU and HTML-in-Canvas are available, otherwise DOM. */
+    mode?: 'auto' | GpuCanvasMode;
+    /** Canvas background, any CSS color. */
+    background?: string;
+    /** Outline of selected elements, any CSS color. Default `#4f8cff`. */
+    selectionColor?: string;
+    /** Outline of the hovered element, any CSS color. Default: the selection color. */
+    hoverColor?: string;
+    camera?: Camera;
+    /** Side of each atlas layer in texels. Default 4096, capped by the device. */
+    atlasSize?: number;
+    /** Atlas layers; each 4096 layer costs 64 MB of GPU memory. One holds thumbnails. Default 5. */
+    atlasLayers?: number;
+    /** Most snapshot pixels rasterized per frame; the rest wait for later frames. Default 24M. */
+    rasterPixelBudget?: number;
+    /** Most raster calls per frame; one call covers a whole page or one node. Default 12. */
+    maxRastersPerFrame?: number;
+    /** Main-thread milliseconds a frame may spend issuing rasters. Default 6. */
+    rasterTimeBudgetMs?: number;
+    /** Side of a page, the unit nodes are batched into for rasterizing, in CSS pixels. Default 2048. */
+    pageSize?: number;
+    onCameraChange?: (camera: Camera) => void;
+}
+interface GpuCanvasStats {
+    mode: GpuCanvasMode;
+    nodes: number;
+    visible: number;
+    /** Visible nodes still waiting for a snapshot at the current zoom. */
+    pending: number;
+    /** Nodes that got fresh pixels in the last frame. */
+    rasterizedLastFrame: number;
+    /** Raster calls in the last frame (gpu only). */
+    rasterCallsLastFrame?: number;
+    /** Main-thread milliseconds the last frame spent issuing rasters. */
+    rasterMs: number;
+    /** Pages nodes are batched into, and how many are drawable right now (gpu only). */
+    pages?: number;
+    drawablePages?: number;
+    atlasLayersUsed: number;
+    /** Main-thread milliseconds the last composite took. */
+    frameMs: number;
+    /** Frames composited since creation (gpu only). An idle canvas draws none. */
+    frames?: number;
+    /** Times a visible node that had pixels showed a placeholder instead: visible flicker. */
+    lostPixels?: number;
+    /** Times a sharp zoomed-in node fell back to its blurrier whole snapshot. */
+    lostDetail?: number;
+    /** Share of the thumbnail layer in use, 0 to 1 (gpu only). */
+    thumbnailFill?: number;
+    /** Visible nodes showing only their thumbnail while a sharper snapshot is drawn (gpu only). */
+    onThumbnail?: number;
+    /** Visible nodes the last frame planned to rasterize: missing, dirty, blurry, oversampled. */
+    needs?: number[];
+}
+interface GpuCanvas {
+    readonly mode: GpuCanvasMode;
+    /** The element that receives camera input; the host's only child. */
+    readonly surface: HTMLElement;
+    /** Places `element` on the canvas at `rect` (world units). The element keeps its own DOM and events. */
+    addNode(element: HTMLElement, rect: Rect): void;
+    updateNode(element: HTMLElement, rect: Rect): void;
+    removeNode(element: HTMLElement): void;
+    /** Where `element` sits on the canvas, in world units, or null when it is not a node. */
+    getNodeRect(element: HTMLElement): Rect | null;
+    /** Nodes that overlap `rect` (world units), such as the ones under a selection box. */
+    getNodesIn(rect: Rect): HTMLElement[];
+    /** The node that holds `element`: the element itself when it is a node, or null. */
+    getNodeOf(element: Element): HTMLElement | null;
+    /** Where any element on the canvas sits, a node or anything inside one, in world units. */
+    getElementRect(element: Element): Rect | null;
+    /** The deepest element under the world point `point`, in the topmost node there. */
+    getElementAt(point: Point): Element | null;
+    /**
+     * Outlines these elements as selected, replacing the previous selection. They can be nodes or
+     * anything inside them, and the outlines follow their layout. Pass `[]` to clear.
+     */
+    setSelection(elements: Iterable<Element>): void;
+    /** Outlines one element more lightly, such as the one under the pointer. Pass null to clear. */
+    setHover(element: Element | null): void;
+    /**
+     * Draws a node through a shader effect, such as \`ripple\` or one from \`defineEffect\`, with up to
+     * four parameters (the effect's defaults otherwise). Pass null to remove it. The DOM backend
+     * shows effects that have a CSS look as a \`filter\` and ignores the rest.
+     */
+    setEffect(node: HTMLElement, effect: Effect | null, params?: ArrayLike<number>): void;
+    getCamera(): Camera;
+    setCamera(camera: Camera): void;
+    /** A point in surface pixels as world units, under the current camera. */
+    screenToWorld(point: Point): Point;
+    /** A world point as surface pixels, under the current camera. */
+    worldToScreen(point: Point): Point;
+    /**
+     * Redraws every node. Call it after a change the nodes' own DOM does not show, such as a theme
+     * class on `<html>` or a web font finishing loading.
+     */
+    invalidate(): void;
+    /** Changes the canvas background, any CSS color. */
+    setBackground(color: string): void;
+    /** Fits all nodes in view. */
+    fit(padding?: number): void;
+    getStats(): GpuCanvasStats;
+    destroy(): void;
+}
+
+/**
+ * A layer is what one click selects: one element, or several that act as one, such as a React
+ * component that renders a fragment. Its first element is its identity.
+ */
+type Layer = Element[];
+/**
+ * What a click can select, from the element under the pointer. `'node'`: whole nodes only.
+ * `'element'`: every element down to the one under the pointer. A function returns the layers
+ * inside the node that hold `element`, outermost first; the node itself always comes before them.
+ */
+type EditorPick = 'node' | 'element' | ((element: Element, canvas: GpuCanvas) => Array<Element | Element[]>);
+
+interface TransformEvent {
+    phase: 'start' | 'move' | 'end' | 'cancel';
+    kind: 'move' | 'resize';
+    /** What is being moved or resized. */
+    layers: Layer[];
+    /** Each layer's rect when the gesture started, world units. */
+    from: Rect[];
+    /** Where each layer should be now. On `cancel` it equals `from`. */
+    to: Rect[];
+}
+interface EditorOptions {
+    /** What a click can select, and how deep a double-click goes. Default `'node'`. */
+    pick?: EditorPick;
+    /**
+     * `'shift-click'` (default): clicks still reach the components. Shift-click selects,
+     * shift-cmd-click (shift-ctrl-click) adds or removes, shift-drag draws a selection box.
+     * `'click'`: an edit mode. Every click selects, shift-click adds or removes, drags move, and
+     * shift-drag on the background draws a selection box.
+     * Either way, a double-click goes one layer deeper, and a drag on the open area of the layer
+     * you are inside draws a box over its children.
+     */
+    trigger?: 'shift-click' | 'click';
+    /** Outlines what a click would select. With `'shift-click'`, only while shift is held. Default true. */
+    hover?: boolean;
+    /** Shift-drag draws a box that selects the layers it touches. Default true. */
+    marquee?: boolean;
+    /** Names and sizes next to the selection and the hovered layer. Default true. */
+    labels?: boolean;
+    /** A layer's name for its label. Default: the element's tag inside nodes, nothing for nodes. */
+    label?: (layer: Layer) => string | null;
+    /** Moves and resizes snap to the edges and centers of their neighbors. Default true. */
+    snap?: boolean;
+    /** Called with the new selection after every change. */
+    onChange?: (selected: Layer[]) => void;
+    /**
+     * Called through every move and resize. The editor never moves anything itself: apply `to`
+     * (`updateNode`, state, styles) to make it real. Handles and drag-to-move need this and the
+     * `'click'` trigger.
+     */
+    onTransform?: (event: TransformEvent) => void;
+    /** Labels, frame and handles. Default `#4f8cff`. */
+    color?: string;
+}
+interface Editor {
+    get(): Layer[];
+    /** Selects these layers at the top level. */
+    set(layers: Iterable<Element | Element[]>): void;
+    clear(): void;
+    /** Removes the listeners, the chrome and the outlines. */
+    destroy(): void;
+}
+/**
+ * A canvas editor's selection: click, double-click to go deeper, hover, box selection,
+ * keyboard navigation, labels, and moving and resizing with snapping. The canvas draws the
+ * outlines; the editor draws the rest above it.
+ */
+declare function bindEditor(canvas: GpuCanvas, options?: EditorOptions): Editor;
+
+export { type Camera as C, type Editor as E, type GpuCanvasOptions as G, type Layer as L, type Point as P, type Rect as R, type TransformEvent as T, type GpuCanvas as a, type EditorOptions as b, type EditorPick as c, type Effect as d, type EffectDefinition as e, type GpuCanvasMode as f, type GpuCanvasStats as g, bindEditor as h, defineEffect as i, EFFECTS as j, fitCamera as k, screenToWorld as s, worldToScreen as w, zoomAt as z };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { G as GpuCanvasOptions, a as GpuCanvas } from './types-D8v10v6m.js';
-export { C as Camera, b as GpuCanvasMode, c as GpuCanvasStats, R as Rect, f as fitCamera, z as zoomAt } from './types-D8v10v6m.js';
+import { G as GpuCanvasOptions, a as GpuCanvas } from './editor-BSRqjhN8.js';
+export { C as Camera, E as Editor, b as EditorOptions, c as EditorPick, d as Effect, e as EffectDefinition, f as GpuCanvasMode, g as GpuCanvasStats, L as Layer, P as Point, R as Rect, T as TransformEvent, h as bindEditor, i as defineEffect, j as effects, k as fitCamera, s as screenToWorld, w as worldToScreen, z as zoomAt } from './editor-BSRqjhN8.js';
 
 declare function supportsGpuCanvas(): boolean;
 

package/dist/index.js

@@ -1,13 +1,23 @@
 import {
+  EFFECTS,
+  bindEditor,
   createGpuCanvas,
+  defineEffect,
   fitCamera,
+  screenToWorld,
   supportsGpuCanvas,
+  worldToScreen,
   zoomAt
-} from "./chunk-VOFDBN5J.js";
+} from "./chunk-RBXGH44N.js";
 export {
+  bindEditor,
   createGpuCanvas,
+  defineEffect,
+  EFFECTS as effects,
   fitCamera,
+  screenToWorld,
   supportsGpuCanvas,
+  worldToScreen,
   zoomAt
 };
 //# sourceMappingURL=index.js.map

package/dist/react.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode, CSSProperties } from 'react';
-import { G as GpuCanvasOptions, a as GpuCanvas$1 } from './types-D8v10v6m.js';
+import { d as Effect, G as GpuCanvasOptions, a as GpuCanvas$1, L as Layer, b as EditorOptions } from './editor-BSRqjhN8.js';
 
 interface GpuCanvasProps extends GpuCanvasOptions {
     children?: ReactNode;
@@ -18,9 +18,43 @@ interface CanvasNodeProps {
     children?: ReactNode;
     className?: string;
     style?: CSSProperties;
+    /** A shader the node is drawn through, such as `effects.glow`. */
+    effect?: Effect | null;
+    /** Up to four parameters for `effect`; its defaults otherwise. */
+    effectParams?: readonly number[];
 }
 /** A live DOM node placed on the canvas in world units. Events, focus and state work as usual. */
-declare function CanvasNode({ x, y, width, height, children, className, style }: CanvasNodeProps): react.ReactPortal;
+declare function CanvasNode({ x, y, width, height, children, className, style, effect, effectParams, }: CanvasNodeProps): react.ReactPortal;
 declare const useGpuCanvas: () => GpuCanvas$1 | null;
+/**
+ * The editor (`bindEditor`) on the canvas around it, with its selection as React state. Use it
+ * inside `<GpuCanvas>`; `onChange` lifts the selection out.
+ */
+declare function useEditor(options?: EditorOptions): {
+    selected: Layer[];
+    set: (layers: Iterable<Element | Element[]>) => void | undefined;
+    clear: () => void | undefined;
+};
+interface ComponentInfo {
+    /** The component's display name. Production builds usually minify it. */
+    name: string;
+    /** The DOM elements it renders at its top level: one, or several for a fragment. */
+    elements: Element[];
+}
+/**
+ * The React components that rendered `element`, nearest first, up to the portal into its node
+ * (`<CanvasNode>` renders one). It reads React's internal fibers, as click-to-component tools do,
+ * so it can break with a React release.
+ */
+declare function componentsOf(element: Element): ComponentInfo[];
+/** The nearest React component that rendered `element`, or null. */
+declare const componentOf: (element: Element) => ComponentInfo | null;
+/**
+ * A pick for `bindEditor` and `useEditor` that selects React components: a click lands on the
+ * outermost component in the node, and each double-click goes one component deeper.
+ */
+declare const pickComponents: (element: Element) => Element[][];
+/** A label for components: the name of the outermost component a layer is the top of. */
+declare const labelComponent: (layer: Layer) => string | null;
 
-export { CanvasNode, type CanvasNodeProps, GpuCanvas, type GpuCanvasProps, useGpuCanvas };
+export { CanvasNode, type CanvasNodeProps, type ComponentInfo, GpuCanvas, type GpuCanvasProps, componentOf, componentsOf, labelComponent, pickComponents, useEditor, useGpuCanvas };

package/dist/react.js

@@ -1,7 +1,8 @@
 'use client';
 import {
+  bindEditor,
   createGpuCanvas
-} from "./chunk-VOFDBN5J.js";
+} from "./chunk-RBXGH44N.js";
 
 // src/react.tsx
 import {
@@ -37,7 +38,17 @@ function GpuCanvas({ children, className, style, onReady, ...options }) {
   }, []);
   return /* @__PURE__ */ jsx("div", { ref: hostRef, className, style: { position: "relative", ...style }, children: /* @__PURE__ */ jsx(CanvasContext.Provider, { value: canvas, children: canvas && children }) });
 }
-function CanvasNode({ x, y, width, height, children, className, style }) {
+function CanvasNode({
+  x,
+  y,
+  width,
+  height,
+  children,
+  className,
+  style,
+  effect = null,
+  effectParams
+}) {
   const canvas = useContext(CanvasContext);
   if (!canvas) throw new Error("<CanvasNode> must be inside <GpuCanvas>");
   const [element] = useState(() => document.createElement("div"));
@@ -53,15 +64,94 @@ function CanvasNode({ x, y, width, height, children, className, style }) {
   useLayoutEffect(() => {
     element.className = className ?? "";
   }, [element, className]);
+  const paramsKey = effectParams?.join(",");
+  useLayoutEffect(() => {
+    canvas.setEffect(element, effect, effectParams);
+  }, [canvas, element, effect, paramsKey]);
   return createPortal(
     /* @__PURE__ */ jsx("div", { style: { width: "100%", height: "100%", ...style }, children }),
     element
   );
 }
 var useGpuCanvas = () => useContext(CanvasContext);
+function useEditor(options = {}) {
+  const canvas = useGpuCanvas();
+  const [selected, setSelected] = useState([]);
+  const editor = useRef(null);
+  const latest = useRef(options);
+  latest.current = options;
+  const pick = typeof options.pick === "function" ? "function" : options.pick ?? "node";
+  const transforms = !!options.onTransform;
+  const { trigger, hover, marquee, labels, snap, color } = options;
+  useEffect(() => {
+    if (!canvas) return;
+    const bound = bindEditor(canvas, {
+      pick: pick === "function" ? (element, at) => latest.current.pick(element, at) : pick,
+      trigger,
+      hover,
+      marquee,
+      labels,
+      snap,
+      color,
+      label: (layer) => latest.current.label ? latest.current.label(layer) : defaultLabel(canvas, layer),
+      onChange(next) {
+        setSelected(next);
+        latest.current.onChange?.(next);
+      },
+      onTransform: transforms ? (event) => latest.current.onTransform?.(event) : void 0
+    });
+    editor.current = bound;
+    return () => {
+      bound.destroy();
+      editor.current = null;
+      setSelected([]);
+    };
+  }, [canvas, pick, trigger, hover, marquee, labels, snap, color, transforms]);
+  return {
+    selected,
+    set: (layers) => editor.current?.set(layers),
+    clear: () => editor.current?.clear()
+  };
+}
+var defaultLabel = (canvas, layer) => canvas.getNodeOf(layer[0]) === layer[0] ? null : layer[0].localName;
+var COMPONENT_TAGS = /* @__PURE__ */ new Set([0, 1, 11, 15]);
+var PORTAL_TAG = 4;
+var fiberOf = (element) => {
+  const key = Object.keys(element).find((name) => name.startsWith("__reactFiber$"));
+  return key ? element[key] : null;
+};
+var nameOf = (type) => {
+  const t = type;
+  return t.displayName || t.name || t.render?.displayName || t.render?.name || "Anonymous";
+};
+var topElements = (fiber, out = []) => {
+  for (let child = fiber.child; child; child = child.sibling) {
+    if (child.stateNode instanceof Element) out.push(child.stateNode);
+    else if (child.tag !== PORTAL_TAG) topElements(child, out);
+  }
+  return out;
+};
+function componentsOf(element) {
+  const found = [];
+  for (let fiber = fiberOf(element); fiber; fiber = fiber.return) {
+    if (fiber.tag === PORTAL_TAG) break;
+    if (!COMPONENT_TAGS.has(fiber.tag)) continue;
+    const elements = topElements(fiber);
+    if (elements.length) found.push({ name: nameOf(fiber.type), elements });
+  }
+  return found;
+}
+var componentOf = (element) => componentsOf(element)[0] ?? null;
+var pickComponents = (element) => componentsOf(element).reverse().map((component) => component.elements);
+var labelComponent = (layer) => componentsOf(layer[0]).filter((component) => component.elements[0] === layer[0]).at(-1)?.name ?? null;
 export {
   CanvasNode,
   GpuCanvas,
+  componentOf,
+  componentsOf,
+  labelComponent,
+  pickComponents,
+  useEditor,
   useGpuCanvas
 };
 //# sourceMappingURL=react.js.map

package/dist/react.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/react.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  createGpuCanvas,\n  type GpuCanvas as GpuCanvasInstance,\n  type GpuCanvasOptions,\n} from './index';\n\nconst CanvasContext = createContext<GpuCanvasInstance | null>(null);\n\nexport interface GpuCanvasProps extends GpuCanvasOptions {\n  children?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n  onReady?: (canvas: GpuCanvasInstance) => void;\n}\n\n/** An infinite canvas. Children are `<CanvasNode>`s; they mount once the canvas is ready. */\nexport function GpuCanvas({ children, className, style, onReady, ...options }: GpuCanvasProps) {\n  const hostRef = useRef<HTMLDivElement>(null);\n  const [canvas, setCanvas] = useState<GpuCanvasInstance | null>(null);\n  const latest = useRef({ options, onReady });\n  latest.current = { options, onReady };\n\n  useEffect(() => {\n    let disposed = false;\n    let created: GpuCanvasInstance | null = null;\n    createGpuCanvas(hostRef.current!, latest.current.options).then((instance) => {\n      if (disposed) return instance.destroy();\n      created = instance;\n      setCanvas(instance);\n      latest.current.onReady?.(instance);\n    });\n    return () => {\n      disposed = true;\n      created?.destroy();\n      setCanvas(null);\n    };\n    // The mode and GPU resources are fixed for the canvas's lifetime; remount to change them.\n  }, []);\n\n  return (\n    <div ref={hostRef} className={className} style={{ position: 'relative', ...style }}>\n      <CanvasContext.Provider value={canvas}>{canvas && children}</CanvasContext.Provider>\n    </div>\n  );\n}\n\nexport interface CanvasNodeProps {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  children?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** A live DOM node placed on the canvas in world units. Events, focus and state work as usual. */\nexport function CanvasNode({ x, y, width, height, children, className, style }: CanvasNodeProps) {\n  const canvas = useContext(CanvasContext);\n  if (!canvas) throw new Error('<CanvasNode> must be inside <GpuCanvas>');\n  const [element] = useState(() => document.createElement('div'));\n\n  useLayoutEffect(() => {\n    canvas.addNode(element, { x, y, width, height });\n    return () => canvas.removeNode(element);\n    // Position changes go through updateNode below without remounting.\n  }, [canvas, element]);\n\n  const mounted = useRef(false);\n  useLayoutEffect(() => {\n    if (mounted.current) canvas.updateNode(element, { x, y, width, height });\n    mounted.current = true;\n  }, [canvas, element, x, y, width, height]);\n\n  useLayoutEffect(() => {\n    element.className = className ?? '';\n  }, [element, className]);\n\n  return createPortal(\n    <div style={{ width: '100%', height: '100%', ...style }}>{children}</div>,\n    element,\n  );\n}\n\nexport const useGpuCanvas = () => useContext(CanvasContext);\n"],"mappings":";;;;;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,oBAAoB;AA0CvB;AAnCN,IAAM,gBAAgB,cAAwC,IAAI;AAU3D,SAAS,UAAU,EAAE,UAAU,WAAW,OAAO,SAAS,GAAG,QAAQ,GAAmB;AAC7F,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAmC,IAAI;AACnE,QAAM,SAAS,OAAO,EAAE,SAAS,QAAQ,CAAC;AAC1C,SAAO,UAAU,EAAE,SAAS,QAAQ;AAEpC,YAAU,MAAM;AACd,QAAI,WAAW;AACf,QAAI,UAAoC;AACxC,oBAAgB,QAAQ,SAAU,OAAO,QAAQ,OAAO,EAAE,KAAK,CAAC,aAAa;AAC3E,UAAI,SAAU,QAAO,SAAS,QAAQ;AACtC,gBAAU;AACV,gBAAU,QAAQ;AAClB,aAAO,QAAQ,UAAU,QAAQ;AAAA,IACnC,CAAC;AACD,WAAO,MAAM;AACX,iBAAW;AACX,eAAS,QAAQ;AACjB,gBAAU,IAAI;AAAA,IAChB;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,SAAI,KAAK,SAAS,WAAsB,OAAO,EAAE,UAAU,YAAY,GAAG,MAAM,GAC/E,8BAAC,cAAc,UAAd,EAAuB,OAAO,QAAS,oBAAU,UAAS,GAC7D;AAEJ;AAaO,SAAS,WAAW,EAAE,GAAG,GAAG,OAAO,QAAQ,UAAU,WAAW,MAAM,GAAoB;AAC/F,QAAM,SAAS,WAAW,aAAa;AACvC,MAAI,CAAC,OAAQ,OAAM,IAAI,MAAM,yCAAyC;AACtE,QAAM,CAAC,OAAO,IAAI,SAAS,MAAM,SAAS,cAAc,KAAK,CAAC;AAE9D,kBAAgB,MAAM;AACpB,WAAO,QAAQ,SAAS,EAAE,GAAG,GAAG,OAAO,OAAO,CAAC;AAC/C,WAAO,MAAM,OAAO,WAAW,OAAO;AAAA,EAExC,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,QAAM,UAAU,OAAO,KAAK;AAC5B,kBAAgB,MAAM;AACpB,QAAI,QAAQ,QAAS,QAAO,WAAW,SAAS,EAAE,GAAG,GAAG,OAAO,OAAO,CAAC;AACvE,YAAQ,UAAU;AAAA,EACpB,GAAG,CAAC,QAAQ,SAAS,GAAG,GAAG,OAAO,MAAM,CAAC;AAEzC,kBAAgB,MAAM;AACpB,YAAQ,YAAY,aAAa;AAAA,EACnC,GAAG,CAAC,SAAS,SAAS,CAAC;AAEvB,SAAO;AAAA,IACL,oBAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,GAAG,MAAM,GAAI,UAAS;AAAA,IACnE;AAAA,EACF;AACF;AAEO,IAAM,eAAe,MAAM,WAAW,aAAa;","names":[]}
+{"version":3,"sources":["../src/react.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  bindEditor,\n  createGpuCanvas,\n  type Editor,\n  type EditorOptions,\n  type EditorPick,\n  type Effect,\n  type GpuCanvas as GpuCanvasInstance,\n  type GpuCanvasOptions,\n  type Layer,\n} from './index';\n\nconst CanvasContext = createContext<GpuCanvasInstance | null>(null);\n\nexport interface GpuCanvasProps extends GpuCanvasOptions {\n  children?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n  onReady?: (canvas: GpuCanvasInstance) => void;\n}\n\n/** An infinite canvas. Children are `<CanvasNode>`s; they mount once the canvas is ready. */\nexport function GpuCanvas({ children, className, style, onReady, ...options }: GpuCanvasProps) {\n  const hostRef = useRef<HTMLDivElement>(null);\n  const [canvas, setCanvas] = useState<GpuCanvasInstance | null>(null);\n  const latest = useRef({ options, onReady });\n  latest.current = { options, onReady };\n\n  useEffect(() => {\n    let disposed = false;\n    let created: GpuCanvasInstance | null = null;\n    createGpuCanvas(hostRef.current!, latest.current.options).then((instance) => {\n      if (disposed) return instance.destroy();\n      created = instance;\n      setCanvas(instance);\n      latest.current.onReady?.(instance);\n    });\n    return () => {\n      disposed = true;\n      created?.destroy();\n      setCanvas(null);\n    };\n    // The mode and GPU resources are fixed for the canvas's lifetime; remount to change them.\n  }, []);\n\n  return (\n    <div ref={hostRef} className={className} style={{ position: 'relative', ...style }}>\n      <CanvasContext.Provider value={canvas}>{canvas && children}</CanvasContext.Provider>\n    </div>\n  );\n}\n\nexport interface CanvasNodeProps {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  children?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n  /** A shader the node is drawn through, such as `effects.glow`. */\n  effect?: Effect | null;\n  /** Up to four parameters for `effect`; its defaults otherwise. */\n  effectParams?: readonly number[];\n}\n\n/** A live DOM node placed on the canvas in world units. Events, focus and state work as usual. */\nexport function CanvasNode({\n  x,\n  y,\n  width,\n  height,\n  children,\n  className,\n  style,\n  effect = null,\n  effectParams,\n}: CanvasNodeProps) {\n  const canvas = useContext(CanvasContext);\n  if (!canvas) throw new Error('<CanvasNode> must be inside <GpuCanvas>');\n  const [element] = useState(() => document.createElement('div'));\n\n  useLayoutEffect(() => {\n    canvas.addNode(element, { x, y, width, height });\n    return () => canvas.removeNode(element);\n    // Position changes go through updateNode below without remounting.\n  }, [canvas, element]);\n\n  const mounted = useRef(false);\n  useLayoutEffect(() => {\n    if (mounted.current) canvas.updateNode(element, { x, y, width, height });\n    mounted.current = true;\n  }, [canvas, element, x, y, width, height]);\n\n  useLayoutEffect(() => {\n    element.className = className ?? '';\n  }, [element, className]);\n\n  const paramsKey = effectParams?.join(',');\n  useLayoutEffect(() => {\n    canvas.setEffect(element, effect, effectParams);\n    // The parameters' values, not the array's identity, decide a redraw.\n  }, [canvas, element, effect, paramsKey]);\n\n  return createPortal(\n    <div style={{ width: '100%', height: '100%', ...style }}>{children}</div>,\n    element,\n  );\n}\n\nexport const useGpuCanvas = () => useContext(CanvasContext);\n\n/**\n * The editor (`bindEditor`) on the canvas around it, with its selection as React state. Use it\n * inside `<GpuCanvas>`; `onChange` lifts the selection out.\n */\nexport function useEditor(options: EditorOptions = {}) {\n  const canvas = useGpuCanvas();\n  const [selected, setSelected] = useState<Layer[]>([]);\n  const editor = useRef<Editor | null>(null);\n  const latest = useRef(options);\n  latest.current = options;\n  // Functions are read when they are called, so a new one each render does not rebind.\n  const pick = typeof options.pick === 'function' ? 'function' : (options.pick ?? 'node');\n  const transforms = !!options.onTransform;\n  const { trigger, hover, marquee, labels, snap, color } = options;\n\n  useEffect(() => {\n    if (!canvas) return;\n    const bound = bindEditor(canvas, {\n      pick:\n        pick === 'function'\n          ? (element, at) => (latest.current.pick as PickFunction)(element, at)\n          : pick,\n      trigger,\n      hover,\n      marquee,\n      labels,\n      snap,\n      color,\n      label: (layer) =>\n        latest.current.label ? latest.current.label(layer) : defaultLabel(canvas, layer),\n      onChange(next) {\n        setSelected(next);\n        latest.current.onChange?.(next);\n      },\n      onTransform: transforms ? (event) => latest.current.onTransform?.(event) : undefined,\n    });\n    editor.current = bound;\n    return () => {\n      bound.destroy();\n      editor.current = null;\n      setSelected([]);\n    };\n  }, [canvas, pick, trigger, hover, marquee, labels, snap, color, transforms]);\n\n  return {\n    selected,\n    set: (layers: Iterable<Element | Element[]>) => editor.current?.set(layers),\n    clear: () => editor.current?.clear(),\n  };\n}\n\ntype PickFunction = Extract<EditorPick, (...args: never[]) => unknown>;\n\n/** The editor's own label: the tag name inside nodes, nothing for nodes. */\nconst defaultLabel = (canvas: GpuCanvasInstance, layer: Layer) =>\n  canvas.getNodeOf(layer[0]) === layer[0] ? null : layer[0].localName;\n\nexport interface ComponentInfo {\n  /** The component's display name. Production builds usually minify it. */\n  name: string;\n  /** The DOM elements it renders at its top level: one, or several for a fragment. */\n  elements: Element[];\n}\n\ninterface Fiber {\n  tag: number;\n  type: unknown;\n  stateNode: unknown;\n  return: Fiber | null;\n  child: Fiber | null;\n  sibling: Fiber | null;\n}\n\n// React's fiber tags for components: function, class, forwardRef, memo.\nconst COMPONENT_TAGS = new Set([0, 1, 11, 15]);\nconst PORTAL_TAG = 4;\n\nconst fiberOf = (element: Element): Fiber | null => {\n  const key = Object.keys(element).find((name) => name.startsWith('__reactFiber$'));\n  return key ? (element as unknown as Record<string, Fiber>)[key] : null;\n};\n\nconst nameOf = (type: unknown): string => {\n  const t = type as {\n    displayName?: string;\n    name?: string;\n    render?: { displayName?: string; name?: string };\n  };\n  return t.displayName || t.name || t.render?.displayName || t.render?.name || 'Anonymous';\n};\n\nconst topElements = (fiber: Fiber, out: Element[] = []) => {\n  for (let child = fiber.child; child; child = child.sibling) {\n    if (child.stateNode instanceof Element) out.push(child.stateNode);\n    else if (child.tag !== PORTAL_TAG) topElements(child, out);\n  }\n  return out;\n};\n\n/**\n * The React components that rendered `element`, nearest first, up to the portal into its node\n * (`<CanvasNode>` renders one). It reads React's internal fibers, as click-to-component tools do,\n * so it can break with a React release.\n */\nexport function componentsOf(element: Element): ComponentInfo[] {\n  const found: ComponentInfo[] = [];\n  for (let fiber = fiberOf(element); fiber; fiber = fiber.return) {\n    // Node content reaches its node through a portal; above it is the app around the canvas.\n    if (fiber.tag === PORTAL_TAG) break;\n    if (!COMPONENT_TAGS.has(fiber.tag)) continue;\n    const elements = topElements(fiber);\n    if (elements.length) found.push({ name: nameOf(fiber.type), elements });\n  }\n  return found;\n}\n\n/** The nearest React component that rendered `element`, or null. */\nexport const componentOf = (element: Element): ComponentInfo | null =>\n  componentsOf(element)[0] ?? null;\n\n/**\n * A pick for `bindEditor` and `useEditor` that selects React components: a click lands on the\n * outermost component in the node, and each double-click goes one component deeper.\n */\nexport const pickComponents = (element: Element): Element[][] =>\n  componentsOf(element)\n    .reverse()\n    .map((component) => component.elements);\n\n/** A label for components: the name of the outermost component a layer is the top of. */\nexport const labelComponent = (layer: Layer): string | null =>\n  componentsOf(layer[0])\n    .filter((component) => component.elements[0] === layer[0])\n    .at(-1)?.name ?? null;\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gpucanvas",
-  "version": "0.2.0",
-  "description": "Put thousands of live DOM nodes on an infinite canvas and let the GPU pan and zoom them.",
+  "version": "0.3.1",
+  "description": "Put thousands of live DOM nodes on an infinite canvas: the GPU draws them, an editor selects, moves and resizes them, and shaders run on them.",
   "keywords": [
     "canvas",
     "infinite-canvas",
@@ -9,7 +9,10 @@
     "html-in-canvas",
     "react",
     "dom",
-    "design-tools"
+    "design-tools",
+    "editor",
+    "shaders",
+    "wgsl"
   ],
   "author": "Berkant Ay",
   "license": "MIT",