@neuroplastio/xterm-addon-hotty 0.1.0-next.1 → 0.1.0-next.2

package/README.md

@@ -171,11 +171,23 @@ runs programs for whoever connects.
   lose the capture. The browser clicks the root on a captured release, so
   the drag reports the click itself when it ends where it began. The host
   stylesheet makes the elements that opt in unselectable, important in its
-  layer, whatever the document's CSS. A touch never drags.
+  layer, whatever the document's CSS.
+
+  A touch drags such an element only where its `touch-action` allows no
+  pan along the touch's first move past 8 px (the larger delta; a tie is a
+  pan). The value is the element's own, met with its ancestors' up to the
+  nearest one that scrolls, both included, as Pointer Events have it; the
+  host's own `touch-action` on the root (below) is not the document's. The
+  touch then reports `press` and `dragstart` at the cell where it began,
+  and drags from there as a mouse does; the lift reports `dragend`, and the
+  click where it began. A second finger ends it with `dragend` and no
+  target, and nothing more is heard until every finger lifts. A long press,
+  or Alt held at the touch, never drags. Any other touch pans as below.
 - **Presses** (SPEC §5.2, §9: `p=1` on `a=place`). Every primary press of a
   mouse or a pen in the window reports `press` on its pointerdown, before
   the drag and the focus it causes; a tap reports it on the mousedown the
-  browser makes for it. A press on a hyperlink is the terminal's.
+  browser makes for it, and a touch that drags when it becomes a drag. A
+  touch that pans presses nothing. A press on a hyperlink is the terminal's.
 - **Fit** (SPEC §5.2, §9: `f=1` on `a=place`). The program hears `fit`
   with the rows the document needs at the placement's width whenever they
   differ from the rows it heard last, starting from the placement's own;
@@ -232,8 +244,8 @@ runs programs for whoever connects.
   - It shows no scrollbars, and pans nothing on a touch
     (`touch-action: none`). Any scroll offset the browser sets goes back to
     zero, except a text field's own text.
-  - A wheel over a surface goes to the terminal, and so does a touch drag,
-    as wheel events at the finger. After the finger lifts, the drag keeps
+  - A wheel over a surface goes to the terminal, and so does a touch that
+    pans, as wheel events at the finger. After the finger lifts, the drag keeps
     going and slows down.
   - Taps and long presses stay the surface's.
   - On the cells, the addon handles touch too (the `touch` option, on by
@@ -280,9 +292,12 @@ runs programs for whoever connects.
     the pointer that can move that way can (the browser scrolls it), else
     on to the terminal, as over the cells, unless `overscroll-behavior`
     stops it. A gesture begun over the cells stays the terminal's when a
-    surface comes under the pointer. A touch drag decides the same way once
-    it has a direction: the browser pans the document, or the drag goes to
-    the terminal as before.
+    surface comes under the pointer. A touch that pans decides the same way
+    once it has a direction: the browser pans the document, or the touch
+    goes to the terminal as before. Where the document's `touch-action`
+    would stop the browser's pan (a `none` on a box that doesn't drag), the
+    addon pans the box itself, so that only a drag element takes a touch
+    from scrolling (SPEC §9.1).
   - **Keys.** While the surface has the keyboard, the keys a browser
     scrolls with that the focused element neither uses nor gives the
     program (SPEC §10.2) scroll the innermost box, from the focused

package/dist/hotty-xterm.js

@@ -67,14 +67,13 @@ function scrollCss(axes, pageScrolls) {
   if (!axes) {
     return [
       "@layer hotty-host {",
-      `:root { overflow: hidden; touch-action: ${pageScrolls ? "manipulation" : "none"}; }`,
+      `:root { overflow: hidden; touch-action: ${rootTouchAction(axes, pageScrolls)}; }`,
       "* { scrollbar-width: none !important; }",
       "::-webkit-scrollbar { display: none !important; }",
       "}"
     ].join("\n");
   }
-  const pan = pageScrolls ? "manipulation" : axes === 3 ? "pan-x pan-y" : axes === 1 ? "pan-y" : "pan-x";
-  const lines = ["@layer hotty-host {", `:root { touch-action: ${pan}; }`];
+  const lines = ["@layer hotty-host {", `:root { touch-action: ${rootTouchAction(axes, pageScrolls)}; }`];
   if (axes !== 3) {
     const clipped = axes === 1 ? "overflow-x" : "overflow-y";
     lines.push(`:root, :root:not([${UNCLIPPED}]) [${CLIP}] { ${clipped}: hidden !important; }`);
@@ -82,6 +81,10 @@ function scrollCss(axes, pageScrolls) {
   lines.push("}");
   return lines.join("\n");
 }
+function rootTouchAction(axes, pageScrolls) {
+  if (pageScrolls) return "manipulation";
+  return axes === 3 ? "pan-x pan-y" : axes === 1 ? "pan-y" : axes === 2 ? "pan-x" : "none";
+}
 function fontStack(family) {
   const f = family.trim();
   if (!f) return "monospace";
@@ -515,9 +518,27 @@ var Store = class {
 
 // src/touch.ts
 var DRAG_SLOP = 8;
+var LONG_PRESS_MS = 500;
 var FLING_DECAY = 0.996;
 var REST_MS = 80;
+function touchPans(value) {
+  const v = value.trim();
+  if (!v || v === "auto" || v === "manipulation") return [true, true];
+  const words = v.split(/\s+/);
+  return [words.some((w) => /^pan-(x|left|right)$/.test(w)), words.some((w) => /^pan-(y|up|down)$/.test(w))];
+}
+function panBlocked(pans, dx, dy) {
+  const ax = Math.abs(dx), ay = Math.abs(dy);
+  return ax > ay ? !pans.x : ay > ax ? !pans.y : false;
+}
 var Touch = class {
+  touch = null;
+  fling = 0;
+  off = [];
+  win;
+  host;
+  exclusive;
+  engage;
   /**
    * `exclusive`: every touch here is this Touch's (the cells: xterm.js's own
    * touch handling, which listens on the document, never sees it). Otherwise
@@ -537,19 +558,12 @@ var Touch = class {
     };
     on("touchstart", (e) => this.start(e), true);
     on("touchmove", (e) => this.move(e), false);
-    on("touchend", (e) => this.end(e), !exclusive);
+    on("touchend", (e) => this.end(e), false);
     on("touchcancel", (e) => {
       this.keep(e);
-      this.touch = null;
+      this.drop();
     }, true);
   }
-  win;
-  host;
-  exclusive;
-  engage;
-  touch = null;
-  fling = 0;
-  off = [];
   dispose() {
     this.stopFling();
     for (const f of this.off) f();
@@ -557,32 +571,62 @@ var Touch = class {
   keep(e) {
     if (this.exclusive) e.stopPropagation();
   }
+  /** The touch under way ends without its lift: a drag the host holds
+   * hears it. */
+  drop() {
+    const s = this.touch;
+    this.touch = null;
+    if (s?.held) this.host.dragCancel?.();
+  }
   start(e) {
     this.keep(e);
     this.stopFling();
     const t = e.touches.length === 1 ? e.touches[0] : void 0;
     if (!t || this.engage && !this.engage(e)) {
-      this.touch = null;
+      this.drop();
       return;
     }
     const [x, y] = this.host.toPage(t.clientX, t.clientY);
-    this.touch = { id: t.identifier, x0: x, y0: y, x, y, t: e.timeStamp, t0: e.timeStamp, vx: 0, vy: 0, dragging: false };
+    const begin = {
+      target: e.target,
+      x: t.clientX,
+      y: t.clientY,
+      time: e.timeStamp,
+      shiftKey: e.shiftKey,
+      ctrlKey: e.ctrlKey,
+      altKey: e.altKey,
+      metaKey: e.metaKey
+    };
+    this.touch = { id: t.identifier, x0: x, y0: y, x, y, t: e.timeStamp, t0: e.timeStamp, vx: 0, vy: 0, dragging: false, held: false, begin };
   }
   move(e) {
     this.keep(e);
     const s = this.touch;
     if (!s) return;
     if (e.touches.length !== 1) {
-      this.touch = null;
+      this.drop();
       return;
     }
     const t = [...e.changedTouches].find((c) => c.identifier === s.id);
     if (!t) return;
+    if (s.held) {
+      e.preventDefault();
+      this.host.dragMove?.(t.clientX, t.clientY, e);
+      return;
+    }
     const [x, y] = this.host.toPage(t.clientX, t.clientY);
     if (!s.dragging && Math.hypot(x - s.x0, y - s.y0) < DRAG_SLOP) return;
-    if (!s.dragging && this.host.claim && !this.host.claim(s.x0 - x, s.y0 - y, e)) {
-      this.touch = null;
-      return;
+    if (!s.dragging && this.host.claim) {
+      const claimed = this.host.claim(s.x0 - x, s.y0 - y, e, s.begin);
+      if (!claimed) {
+        this.touch = null;
+        return;
+      }
+      if (claimed === "drag") {
+        s.held = true;
+        e.preventDefault();
+        return;
+      }
     }
     s.dragging = true;
     e.preventDefault();
@@ -599,13 +643,19 @@ var Touch = class {
   end(e) {
     this.keep(e);
     const s = this.touch;
-    if (!s || ![...e.changedTouches].some((c) => c.identifier === s.id)) return;
+    const t = s && [...e.changedTouches].find((c) => c.identifier === s.id);
+    if (!s || !t) return;
     this.touch = null;
+    if (s.held) {
+      e.preventDefault();
+      this.host.dragEnd?.(t.clientX, t.clientY, e);
+      return;
+    }
     if (s.dragging) {
       if (e.timeStamp - s.t < REST_MS) this.startFling(-s.vx, -s.vy, s.x, s.y);
       return;
     }
-    if (this.host.tap && e.timeStamp - s.t0 < 500) {
+    if (this.host.tap && e.timeStamp - s.t0 < LONG_PRESS_MS) {
       e.preventDefault();
       this.host.tap(s.x, s.y);
     }
@@ -1371,8 +1421,13 @@ var Surface = class {
   /** The axes the document asked to scroll along (`scroll`, SPEC §5.1): 1
    * vertically, 2 horizontally, 3 both; 0, nothing scrolls. */
   axes = 0;
-  /** Where the touch drag under way goes, once it has a direction. */
+  /** Where the touch drag under way goes, once it has a direction: "self",
+   * the document, but scrolled by the surface, since the document's
+   * `touch-action` would stop the browser's own pan (SPEC §9.1: it changes
+   * nothing there). */
   touchRoute = "terminal";
+  /** The box a touch drag scrolls itself ("self"). */
+  touchBox = null;
   /** The box the wheel gesture under way scrolls, if it went to the
    * document: the gesture moves no other (`scrollWheel`). */
   wheelBox = null;
@@ -1727,6 +1782,11 @@ var Surface = class {
       setTimeout(() => this.auxPress = false, 0);
       return;
     }
+    this.pressAt(e);
+  }
+  /** What a click (SPEC §10.1) at `e`'s target does to the keyboard: a
+   * press of the primary button, a tap, or a touch that becomes a drag. */
+  pressAt(e) {
     const el = this.detachedState ? null : focusTargetAt(e, this.hyper);
     if (el) {
       this.pressed = el;
@@ -2292,13 +2352,11 @@ var Surface = class {
   /** The surface's cell under the pointer, from its top left (the frame's
    * origin), counting on past its edges. */
   cellOf(e) {
-    return [Math.floor(e.clientX / this.cellW), Math.floor(e.clientY / this.cellH)];
+    return this.cellAt(e.clientX, e.clientY);
   }
   /** The element under the pointer, if it is in the window (SPEC §5.2). */
   elementAt(e, c, r) {
-    const w = this.win;
-    if (c < w.x || c >= w.x + w.w || r < w.y || r >= w.y + w.h) return null;
-    return this.doc.elementFromPoint(e.clientX, e.clientY);
+    return this.elementAtPoint(e.clientX, e.clientY, c, r);
   }
   /** A drag's target: the nearest element with an id and `drag` in its
    * `data-on`, from `el` outward; "" where there is none. */
@@ -2309,6 +2367,139 @@ var Surface = class {
     }
     return "";
   }
+  // --- Touch drags (SPEC §9.1) ----------------------------------------------
+  /**
+   * Where a touch that has just gone past the slop, scrolling by dx, dy so
+   * far, goes. A drag, where the touched element opts in and the
+   * touch-action that counts for it allows no pan along the touch's first
+   * move (the larger delta; a tie pans). Otherwise a pan, as §5.3 and §9
+   * have it, whatever touch-action says: where the browser would pan the
+   * document but the document's touch-action stops it, the surface scrolls
+   * the box itself.
+   */
+  claimTouch(dx, dy, e, begin) {
+    const el = begin.target && isElement(begin.target) ? begin.target : null;
+    const pans = this.allowedPans(el);
+    if (panBlocked(pans, dx, dy) && this.touchDragStart(e, begin)) return "drag";
+    if (!this.axes) {
+      this.touchRoute = "terminal";
+      return true;
+    }
+    const to = this.gestureTarget(el, dx, dy);
+    if (typeof to === "string") {
+      this.touchRoute = to;
+      return true;
+    }
+    if (pans.x && pans.y) {
+      this.touchRoute = "doc";
+      return false;
+    }
+    this.touchRoute = "self";
+    this.touchBox = to;
+    return true;
+  }
+  /** Whether the touch-action that counts at `target` allows every pan. */
+  pansFreely(target) {
+    const p = this.allowedPans(target && isElement(target) ? target : null);
+    return p.x && p.y;
+  }
+  /**
+   * The pans the document's touch-action allows a touch on `el`, as Pointer
+   * Events determine them: its own, with its ancestors' up to the nearest
+   * element that scrolls (SPEC §5.3), both included. The root's is the
+   * document's only where it differs from the host's (`rootTouchAction`),
+   * which is there for the browser's own panning.
+   */
+  allowedPans(el) {
+    let x = true;
+    let y = true;
+    const root = this.doc.documentElement;
+    const host = rootTouchAction(this.axes, this.host.pageScrolls);
+    for (let n = el; n; n = n.parentElement) {
+      const s = n.ownerDocument.defaultView.getComputedStyle(n);
+      const value = n === root && s.touchAction === host ? "auto" : s.touchAction;
+      const [px, py] = touchPans(value);
+      x &&= px;
+      y &&= py;
+      if (n !== root && this.scrolls(s)) break;
+    }
+    return { x, y };
+  }
+  /** Whether an element with this style scrolls (SPEC §5.3): its overflow is
+   * `auto` or `scroll` along an axis the document asked to scroll. */
+  scrolls(s) {
+    return !!(this.axes & 1) && /auto|scroll/.test(s.overflowY) || !!(this.axes & 2) && /auto|scroll/.test(s.overflowX);
+  }
+  /**
+   * A touch becomes a drag (SPEC §9.1), if it can: one that began without
+   * Alt and was not held still past a long press, on an element that opts
+   * in and has an id, in a surface not detached. It presses at this moment
+   * as a mouse does: `press`, then `dragstart`, both for where it began,
+   * then what the press causes; then a `drag` if the finger is by now over
+   * another element.
+   */
+  touchDragStart(e, begin) {
+    if (this.detachedState || begin.altKey || e.timeStamp - begin.time >= LONG_PRESS_MS) return false;
+    const el = begin.target && isElement(begin.target) ? begin.target : null;
+    let start = null;
+    for (let n = el; n; n = n.parentElement) {
+      if (listens(n, "drag")) {
+        start = n;
+        break;
+      }
+    }
+    const id = start?.getAttribute("id");
+    if (!id) return false;
+    this.cancelDrag();
+    const [c, r] = this.cellAt(begin.x, begin.y);
+    const keys = keysOf(begin);
+    this.reportPress(e);
+    this.drag = { pointer: NaN, start: id, target: id, c, r, keys };
+    this.emit("dragstart", id, { c, r, keys });
+    this.pressAt(e);
+    const t = [...e.changedTouches][0];
+    if (t) this.touchDragMove(t.clientX, t.clientY, e);
+    return true;
+  }
+  /** A touch drag's finger moved to (x, y) of the document: as a pointer's
+   * move (`onDragMove`). */
+  touchDragMove(x, y, e) {
+    const d = this.drag;
+    if (!d) return;
+    const [c, r] = this.cellAt(x, y);
+    const target = this.dragTarget(this.elementAtPoint(x, y, c, r));
+    const keys = keysOf(e);
+    if (target !== d.target || target === "" && (c !== d.c || r !== d.r)) {
+      this.emit("drag", target, { c, r, keys });
+    }
+    Object.assign(d, { target, c, r, keys });
+  }
+  /** A touch drag's finger lifted at (x, y): as a pointer's release
+   * (`onDragUp`), a click where it began. */
+  touchDragEnd(x, y, e) {
+    const d = this.drag;
+    if (!d) return;
+    this.drag = null;
+    const [c, r] = this.cellAt(x, y);
+    const at = this.elementAtPoint(x, y, c, r);
+    const target = this.dragTarget(at);
+    this.emit("dragend", target, { c, r, keys: keysOf(e) });
+    this.dragReleased = true;
+    setTimeout(() => this.dragReleased = false, 0);
+    if (target === d.start && at) this.reportClick(ancestry(at));
+  }
+  /** The surface's cell at (x, y) of the document, counting on past its
+   * edges. */
+  cellAt(x, y) {
+    return [Math.floor(x / this.cellW), Math.floor(y / this.cellH)];
+  }
+  /** The element at (x, y) of the document, if cell (c, r) is in the
+   * window (SPEC §5.2). */
+  elementAtPoint(x, y, c, r) {
+    const w = this.win;
+    if (c < w.x || c >= w.x + w.w || r < w.y || r >= w.y + w.h) return null;
+    return this.doc.elementFromPoint(x, y);
+  }
   // --- Presses with Alt (SPEC §9.2) ---------------------------------------
   /**
    * A press of a mouse's or a pen's primary button with Alt held is the
@@ -2455,26 +2646,27 @@ var Surface = class {
       const r = this.frame.getBoundingClientRect();
       return [r.left + x, r.top + y];
     };
-    if (this.host.pageScrolls) {
-      new Touch(
-        d,
-        this.frame.ownerDocument.defaultView,
-        { scroll: (dx, dy) => this.host.scrollPage(dx, dy), toPage },
-        false,
-        (e) => !this.axes && this.inScroller(e.target)
-      );
-    } else {
-      new Touch(d, this.frame.ownerDocument.defaultView, {
+    new Touch(
+      d,
+      this.frame.ownerDocument.defaultView,
+      {
         scroll: (dx, dy, x, y) => {
-          if (this.touchRoute === "terminal") this.host.wheel(new WheelEvent("wheel", { deltaX: dx, deltaY: dy, deltaMode: 0, clientX: x, clientY: y }), x, y);
+          if (this.touchRoute === "self") this.touchBox?.scrollBy(dx, dy);
+          else if (this.touchRoute !== "terminal") return;
+          else if (this.host.pageScrolls) this.host.scrollPage(dx, dy);
+          else this.host.wheel(new WheelEvent("wheel", { deltaX: dx, deltaY: dy, deltaMode: 0, clientX: x, clientY: y }), x, y);
         },
         toPage,
-        claim: (dx, dy, e) => {
-          this.touchRoute = this.axes ? this.gestureRoute(e.target, dx, dy) : "terminal";
-          return this.touchRoute !== "doc";
-        }
-      });
-    }
+        claim: (dx, dy, e, begin) => this.claimTouch(dx, dy, e, begin),
+        dragMove: (x, y, e) => this.touchDragMove(x, y, e),
+        dragEnd: (x, y, e) => this.touchDragEnd(x, y, e),
+        dragCancel: () => this.cancelDrag()
+      },
+      false,
+      // Where the page scrolls, the browser pans it from a touch the
+      // surface leaves alone.
+      this.host.pageScrolls ? (e) => !this.axes && this.inScroller(e.target) || !this.pansFreely(e.target) : void 0
+    );
     win.addEventListener("focus", () => {
       if (!this.programFocus && !this.auxPress && !this.keyboard) this.settle();
     });