gpucanvas 0.4.0 → 0.4.1

package/README.md

@@ -34,7 +34,8 @@ components. Recorded in Chrome from the demo.
 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.
 - 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),
@@ -100,10 +101,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        |

package/dist/{chunk-BQQVSR4B.js → chunk-DPCICAYZ.js}

@@ -3016,6 +3016,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 +3035,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 +3197,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 +3278,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 +3303,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 +3327,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 +3812,4 @@ export {
   swapNodes,
   createGpuCanvas2 as createGpuCanvas
 };
-//# sourceMappingURL=chunk-BQQVSR4B.js.map
+//# sourceMappingURL=chunk-DPCICAYZ.js.map