gpucanvas 0.4.0 → 0.4.2

package/README.md

@@ -29,12 +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.
+- Click a screen to select it, double-click to go deeper, drag to move it. Double-click a text
+  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),
@@ -42,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:
 
@@ -50,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.
 
@@ -100,10 +114,10 @@ so every double-click visibly changes something.
 
 | Input              | Does                                                                         |
 | ------------------ | ---------------------------------------------------------------------------- |
-| Double-click       | One layer deeper                                                             |
+| Double-click       | One layer deeper; on a text field, starts typing in it                       |
 | Enter, Shift+Enter | First child, parent                                                          |
 | Tab, Shift+Tab     | Next and previous sibling                                                    |
-| Escape             | Cancels a drag, then goes up a layer, then clears                            |
+| Escape             | Ends typing, cancels a drag, then goes up a layer, then clears               |
 | Drag               | Moves, snapping to the edges and centers of neighbors (Shift locks the axis) |
 | Handles            | Resize (Shift on a corner keeps the ratio)                                   |
 | Drag on open space | A box that selects the layers it touches, inside the layer you are in        |
@@ -143,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
 
@@ -327,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-BQQVSR4B.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);
@@ -3016,6 +3092,7 @@ function bindEditor(canvas, options = {}) {
   let pointer = null;
   let shift = false;
   let swallowClick = false;
+  let keepFocus = false;
   const commit = (next, nextScopes = scopes) => {
     selection = next.filter((layer, i) => next.findIndex((other) => sameLayer(layer, other)) === i);
     scopes = selection.length ? nextScopes : [];
@@ -3034,6 +3111,15 @@ function bindEditor(canvas, options = {}) {
     return { x: event.clientX - bounds.left, y: event.clientY - bounds.top };
   };
   const chainAt = (point) => layers.chainAt(canvas.screenToWorld(point));
+  const fieldAt = (point) => {
+    const element = canvas.getElementAt(canvas.screenToWorld(point));
+    const field = element?.closest("input, textarea, select, [contenteditable]") ?? null;
+    return isEditable(field) ? field : null;
+  };
+  const typingIn = () => {
+    const active = document.activeElement;
+    return isEditable(active) && canvas.getNodeOf(active) ? active : null;
+  };
   const targetIn = (chain) => {
     if (!chain.length) return null;
     for (let i = scopes.length - 1; i >= 0; i--) {
@@ -3187,8 +3273,15 @@ function bindEditor(canvas, options = {}) {
     swallowClick = false;
     if (event.button !== 0) return;
     const point = at(event);
+    const field = typingIn();
+    keepFocus = false;
+    if (field && field.contains(fieldAt(point))) {
+      keepFocus = !field.contains(event.target);
+      return;
+    }
     const take = () => {
       event.stopPropagation();
+      field?.blur();
       swallowClick = true;
       surface.setPointerCapture(event.pointerId);
     };
@@ -3261,7 +3354,20 @@ function bindEditor(canvas, options = {}) {
     if (!selecting(event.shiftKey)) return;
     event.preventDefault();
     event.stopPropagation();
-    const chain = chainAt(at(event));
+    const point = at(event);
+    const field = trigger === "click" ? fieldAt(point) : null;
+    if (field) {
+      if (selection.length) commit([], []);
+      field.focus();
+      if (field instanceof HTMLInputElement || field instanceof HTMLTextAreaElement) {
+        try {
+          field.setSelectionRange(field.value.length, field.value.length);
+        } catch {
+        }
+      }
+      return;
+    }
+    const chain = chainAt(point);
     let depth = -1;
     chain.forEach((layer, i) => {
       if (layerIn(layer, selection)) depth = i;
@@ -3273,6 +3379,11 @@ function bindEditor(canvas, options = {}) {
     setHovered(null);
   };
   const onMouseDown = (event) => {
+    if (keepFocus) {
+      keepFocus = false;
+      event.preventDefault();
+      return;
+    }
     if (!swallowClick) return;
     event.preventDefault();
     event.stopPropagation();
@@ -3292,7 +3403,11 @@ function bindEditor(canvas, options = {}) {
       shift = event.type === "keydown";
       return updateHover();
     }
-    if (event.type !== "keydown" || isEditable(document.activeElement)) return;
+    if (event.type !== "keydown") return;
+    if (isEditable(document.activeElement)) {
+      if (event.key === "Escape" && trigger === "click") typingIn()?.blur();
+      return;
+    }
     if (event.key === "Escape") {
       if (gesture?.kind === "move" || gesture?.kind === "resize") {
         emit("cancel");
@@ -3773,4 +3888,4 @@ export {
   swapNodes,
   createGpuCanvas2 as createGpuCanvas
 };
-//# sourceMappingURL=chunk-BQQVSR4B.js.map
+//# sourceMappingURL=chunk-TC6XBFOY.js.map