gpucanvas 0.4.1 → 0.4.3

package/README.md

@@ -29,13 +29,22 @@ The same session on both sides: 5,000 live React screens, the same camera path,
 Marks from an agent, a wipe and a dissolve, the glass lens and shockwaves, all on live
 components. Recorded in Chrome from the demo.
 
+How it works, with the benchmarks and what Chrome's HTML-in-Canvas does differently from the
+explainer: [gpucanvas: 5,000 Live React Screens on a WebGPU Infinite Canvas](https://berkant.me/blog/gpucanvas-webgpu-infinite-canvas).
+
 ## Try it
 
 Open **[berkantay.github.io/gpucanvas](https://berkantay.github.io/gpucanvas/)** in Chrome 157 or
 later. Thirty agent cursors build the first view, then the camera pulls out to all 5,000 screens.
 
 - Click a screen to select it, double-click to go deeper, drag to move it. Double-click a text
-  field to type in it.
+  field to type in it, or switch the toolbar to Interact and use the screens like a normal page.
+- In Interact, every button does something. Continue, Sign in and Back move the camera to the
+  next screen like a clickable prototype, Notifications and More open panels, Export saves a
+  CSV, Send adds the message and Share copies the link.
+- The toolbar holds every setting: renderer, number of screens, Edit or Interact, what a click
+  selects, the shader effect, the agent cursors and the theme. They apply live, and the URL
+  remembers them.
 - Pick a shader effect in the toolbar, or open one directly:
   [glass](https://berkantay.github.io/gpucanvas/?effect=glass),
   [shockwave](https://berkantay.github.io/gpucanvas/?effect=shockwave) (click anywhere),
@@ -43,15 +52,17 @@ later. Thirty agent cursors build the first view, then the camera pulls out to a
   [glitch](https://berkantay.github.io/gpucanvas/?effect=glitch).
 - Select a screen and press `D` to dissolve it, `W` to wipe it, or `S` to save it as a PNG.
 - In the console, `agentView.describe()` lists what is in view, and `marks` draws on it.
-- Press `b` to run the benchmark tour.
-
-The GPU path needs HTML-in-Canvas, which is behind a flag:
+- Press `b` to run the benchmark tour, `f` to fit every screen in view, `t` to switch the theme.
+- On a phone: pinch to zoom, drag to pan, tap to use a screen.
 
-1. Open `chrome://flags/#canvas-draw-element`
-2. Set it to Enabled and relaunch Chrome
-3. Reload the demo
+The GPU path needs WebGPU and HTML-in-Canvas. Chrome 157 and later on a computer has both on by
+default, so the demo opens on the GPU path. On older Chrome or other Chromium builds, turn it on
+with `chrome://flags/#canvas-draw-element` and relaunch.
 
-Without the flag the demo runs the DOM fallback with 1,000 screens and says so.
+Without HTML-in-Canvas the demo runs the DOM fallback with 1,000 screens and says so. Phones start
+smaller so the tab is not killed for memory: 1,000 screens on the GPU path and 250 as DOM. Firefox,
+Safari and every iPhone or iPad browser have no HTML-in-Canvas yet, so they run the DOM version and
+say so.
 
 Status: early (0.4). The API can still change.
 
@@ -144,9 +155,8 @@ canvas.setHover(el); // a lighter outline; null clears
 canvas.screenToWorld(point); // surface pixels to world units, and worldToScreen back
 ```
 
-Colors are the `selectionColor` and `hoverColor` options. The demo picks React components in the edit mode;
-`?pick=element` or `?pick=node` picks elements or whole screens, and `?edit=0` leaves clicks to
-the components.
+Colors are the `selectionColor` and `hoverColor` options. In the demo, the toolbar switches between
+Edit and Interact (clicks reach the components) and picks components, elements or whole screens.
 
 ## Shader effects
 
@@ -326,9 +336,11 @@ to npm from GitHub Actions, with provenance, through npm trusted publishing. See
 6. **Live updates.** A MutationObserver marks a node dirty when its content changes, and
    loading images, web fonts and CSS transitions trigger a redraw. Animated content on nodes
    under 200 screen pixels refreshes at most four times a second.
-7. **Input.** Only the page under the pointer is registered for hit testing, and a CSS transform
-   puts the node under the pointer exactly where the GPU drew it. Clicks, typing, selection and
-   hover all go to the real element. A focused node keeps its page live.
+7. **Input.** Only the page under the pointer is registered for hit testing, and its canvas
+   transform puts the node under the pointer exactly where the GPU drew it. Clicks, typing, selection and
+   hover all go to the real element. A focused node keeps its page live. Touch has no hover, so a
+   tap makes the node under the finger live and hands the click to the element it landed on. A
+   two-finger pinch zooms and pans the camera wherever the fingers land.
 
 ## Measured (M-series Mac, Chrome 157, 1600 x 900 window, DPR 1)
 
@@ -364,11 +376,11 @@ so a gap of a few percent, like frost above none, is noise rather than a speedup
 ## Chrome 157 findings (differ from the WICG explainer)
 
 - **Hit-test registration.** A drawable is hit-tested only after
-  `canvas.updateElementGeometry(el, {})` registers it. The `canvasTransform` option does not
-  move the hit area.
-- **Hit-test position.** The hit area is the element's CSS box, so position it with
-  `el.style.transform = canvas.getElementTransform(el, drawMatrix)`. The draw matrix maps the
-  element's default-size snapshot (CSS px × DPR) to canvas pixels.
+  `canvas.updateElementGeometry(el, options)` registers it.
+- **Hit-test position.** Chrome 157 hit tests at `options.canvasTransform`, a matrix in CSS
+  pixels from the element's border box to the canvas, and `getElementTransform(el)` returns it.
+  Chrome 156 ignored `canvasTransform` and hit tested at the CSS box, positioned with
+  `el.style.transform = canvas.getElementTransform(el, drawMatrix)`. gpucanvas handles both.
 - **Transform changes.** Changing a drawable's CSS transform or pointer-events reports it in
   `changedElements`.
 - **Newly drawable elements.** An element that just became drawable is not reported in

package/dist/{chunk-DPCICAYZ.js → chunk-2EDYGRFR.js}

@@ -56,7 +56,25 @@ function bindCameraInput(element, getCamera, onChange) {
     }
   };
   let drag = null;
+  const touches = /* @__PURE__ */ new Map();
+  const pinch = () => {
+    const [a, b] = [...touches.values()];
+    return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2, distance: Math.hypot(a.x - b.x, a.y - b.y) };
+  };
   const onPointerDown = (event) => {
+    if (event.pointerType === "touch") {
+      touches.set(event.pointerId, { x: event.clientX, y: event.clientY });
+      if (touches.size === 2) {
+        drag = null;
+        for (const id of touches.keys()) {
+          try {
+            element.setPointerCapture(id);
+          } catch {
+          }
+        }
+        return;
+      }
+    }
     if (event.button !== 0 && event.button !== 1 || event.shiftKey) return;
     if (event.target !== element && !event.target.hasAttribute?.("data-gpucanvas-surface"))
       return;
@@ -64,6 +82,31 @@ function bindCameraInput(element, getCamera, onChange) {
     element.setPointerCapture(event.pointerId);
   };
   const onPointerMove = (event) => {
+    const touch = touches.get(event.pointerId);
+    if (touch && touches.size === 2) {
+      const before = pinch();
+      touch.x = event.clientX;
+      touch.y = event.clientY;
+      const after = pinch();
+      if (!before.distance) return;
+      const bounds = element.getBoundingClientRect();
+      const zoomed = zoomAt(
+        getCamera(),
+        before.x - bounds.left,
+        before.y - bounds.top,
+        after.distance / before.distance
+      );
+      onChange({
+        ...zoomed,
+        x: zoomed.x - (after.x - before.x) / zoomed.zoom,
+        y: zoomed.y - (after.y - before.y) / zoomed.zoom
+      });
+      return;
+    }
+    if (touch) {
+      touch.x = event.clientX;
+      touch.y = event.clientY;
+    }
     if (!drag || event.pointerId !== drag.pointerId) return;
     const camera = getCamera();
     onChange({
@@ -75,6 +118,7 @@ function bindCameraInput(element, getCamera, onChange) {
     drag.y = event.clientY;
   };
   const onPointerUp = (event) => {
+    touches.delete(event.pointerId);
     if (drag?.pointerId === event.pointerId) drag = null;
   };
   element.addEventListener("wheel", onWheel, { passive: false });
@@ -1347,6 +1391,7 @@ var MISSING = 0;
 var DIRTY = 1;
 var BLURRY = 2;
 var OVERSAMPLED = 3;
+var CANVAS_TRANSFORM_HIT_TESTS = typeof HTMLCanvasElement !== "undefined" && "getElementImageDefaultSize" in HTMLCanvasElement.prototype;
 function supportsGpuCanvas() {
   return typeof navigator !== "undefined" && "gpu" in navigator && typeof HTMLCanvasElement !== "undefined" && "requestPaint" in HTMLCanvasElement.prototype && "getElementTransform" in HTMLCanvasElement.prototype && typeof GPUQueue !== "undefined" && "drawElementImageToTexture" in GPUQueue.prototype;
 }
@@ -2112,18 +2157,19 @@ async function createGpuCanvas(host, options) {
   };
   const positionLivePage = () => {
     if (!live || livePositioned) return;
-    const dpr = canvas.width / Math.max(1, canvas.clientWidth);
     const { zoom } = camera;
-    const drawn2 = new DOMMatrix([
-      zoom,
-      0,
-      0,
-      zoom,
-      ((live.rect.x - camera.x) * zoom - live.pageX * zoom) * dpr,
-      ((live.rect.y - camera.y) * zoom - live.pageY * zoom) * dpr
-    ]);
+    const x = (live.rect.x - camera.x - live.pageX) * zoom;
+    const y = (live.rect.y - camera.y - live.pageY) * zoom;
     try {
-      live.page.element.style.transform = canvas.getElementTransform(live.page.element, drawn2).toString();
+      if (CANVAS_TRANSFORM_HIT_TESTS) {
+        canvas.updateElementGeometry(live.page.element, {
+          canvasTransform: new DOMMatrix([zoom, 0, 0, zoom, x, y])
+        });
+      } else {
+        const dpr = canvas.width / Math.max(1, canvas.clientWidth);
+        const drawn2 = new DOMMatrix([zoom, 0, 0, zoom, x * dpr, y * dpr]);
+        live.page.element.style.transform = canvas.getElementTransform(live.page.element, drawn2).toString();
+      }
       live.element.style.pointerEvents = "auto";
       livePositioned = true;
     } catch {
@@ -2181,14 +2227,44 @@ async function createGpuCanvas(host, options) {
   };
   let press = FAR_AWAY;
   let pressedAt = -Infinity;
+  let tapped = false;
   const onPointerDown = (event) => {
     const bounds = canvas.getBoundingClientRect();
-    press = screenToWorld(camera, {
+    const at = { x: event.clientX - bounds.left, y: event.clientY - bounds.top };
+    press = screenToWorld(camera, at);
+    pressedAt = performance.now();
+    if (event.pointerType !== "mouse") {
+      pointer = at;
+      pickLive();
+      tapped = true;
+    }
+    if (effects.size) schedule();
+  };
+  const onClick = (event) => {
+    if (!tapped) return;
+    tapped = false;
+    const bounds = canvas.getBoundingClientRect();
+    const point = screenToWorld(camera, {
       x: event.clientX - bounds.left,
       y: event.clientY - bounds.top
     });
-    pressedAt = performance.now();
-    if (effects.size) schedule();
+    let top = null;
+    for (const node of nodes.values()) if (containsPoint(node.rect, point)) top = node;
+    if (!top || top.element.contains(event.target)) return;
+    let target = elementInNode(top.element, top.rect, point);
+    while (target && !(target instanceof HTMLElement)) target = target.parentElement;
+    if (!(target instanceof HTMLElement)) return;
+    target.focus({ preventScroll: true });
+    target.dispatchEvent(
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        view: window,
+        clientX: event.clientX,
+        clientY: event.clientY
+      })
+    );
   };
   const onFocusIn = (event) => {
     const node = nodeOf(event.target) ?? null;
@@ -2229,6 +2305,7 @@ async function createGpuCanvas(host, options) {
   surface.addEventListener("pointermove", onPointerMove);
   surface.addEventListener("pointerleave", onPointerLeave);
   surface.addEventListener("pointerdown", onPointerDown, true);
+  surface.addEventListener("click", onClick);
   canvas.addEventListener("focusin", onFocusIn);
   canvas.addEventListener("focusout", onFocusOut);
   const usedAt = /* @__PURE__ */ new WeakMap();
@@ -2507,6 +2584,7 @@ async function createGpuCanvas(host, options) {
       surface.removeEventListener("pointermove", onPointerMove);
       surface.removeEventListener("pointerleave", onPointerLeave);
       surface.removeEventListener("pointerdown", onPointerDown, true);
+      surface.removeEventListener("click", onClick);
       canvas.removeEventListener("focusin", onFocusIn);
       canvas.removeEventListener("focusout", onFocusOut);
       canvas.removeEventListener("transitionrun", onTransitionRun);
@@ -3812,4 +3890,4 @@ export {
   swapNodes,
   createGpuCanvas2 as createGpuCanvas
 };
-//# sourceMappingURL=chunk-DPCICAYZ.js.map
+//# sourceMappingURL=chunk-2EDYGRFR.js.map