gpucanvas 0.4.1 → 0.4.2

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,7 +52,8 @@ 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.
+- 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.
 
 The GPU path needs HTML-in-Canvas, which is behind a flag:
 
@@ -51,7 +61,10 @@ The GPU path needs HTML-in-Canvas, which is behind a flag:
 2. Set it to Enabled and relaunch Chrome
 3. Reload the demo
 
-Without the flag the demo runs the DOM fallback with 1,000 screens and says so.
+Without the flag 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 (Chrome on Android with
+the flag) and 250 as DOM. iPhone and iPad browsers 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 +157,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
 
@@ -328,7 +340,9 @@ to npm from GitHub Actions, with provenance, through npm trusted publishing. See
    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.
+   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)
 

package/dist/{chunk-DPCICAYZ.js → chunk-TC6XBFOY.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 });
@@ -2181,14 +2225,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 +2303,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 +2582,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 +3888,4 @@ export {
   swapNodes,
   createGpuCanvas2 as createGpuCanvas
 };
-//# sourceMappingURL=chunk-DPCICAYZ.js.map
+//# sourceMappingURL=chunk-TC6XBFOY.js.map