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

package/README.md

@@ -183,6 +183,16 @@ runs programs for whoever connects.
   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.
+
+  An element that also has `data-steps="<x> [<y>]"` (whole numbers, 0 for
+  none along that axis) says where in it the pointer is: every event of a
+  drag of it carries `x` and `y`, the pointer's step along its border box
+  (`getBoundingClientRect`, as it is at each move), rounded to the nearest
+  and clamped to 0 and the count, wherever the pointer or the finger is.
+  A `drag` also goes out each time the step changes. The counts are read
+  when the drag starts; once the element has left the document, the step
+  stays as it last was, as it does in a `dragend` that ends a drag early.
+  The capabilities report `steps: true`.
 - **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

package/dist/hotty-xterm.js

@@ -683,6 +683,21 @@ var Touch = class {
   }
 };
 
+// src/steps.ts
+function parseSteps(value) {
+  if (value === null) return null;
+  const words = value.trim().split(/\s+/);
+  if (words.length > 2 || !words.every((w) => /^[0-9]+$/.test(w))) return null;
+  const [x, y = 0] = words.map(Number);
+  if (!Number.isSafeInteger(x) || !Number.isSafeInteger(y) || x === 0 && y === 0) return null;
+  return [x, y];
+}
+function stepAt(offset, size, count) {
+  if (!(size > 0)) return 0;
+  const at = Math.min(Math.max(offset / size, 0), 1) * count;
+  return Math.min(Math.floor(at + 0.5), count);
+}
+
 // src/resolver.ts
 var DROP = /* @__PURE__ */ new Set(["script", "iframe", "frame", "frameset", "object", "embed", "applet", "base", "meta", "portal", "fencedframe"]);
 var DROP_ATTRS = /* @__PURE__ */ new Set(["srcdoc", "autofocus", "http-equiv", "ping", "nonce", "integrity"]);
@@ -2289,25 +2304,49 @@ var Surface = class {
     if (!id) return;
     const [c, r] = this.cellOf(e);
     const keys = keysOf(e);
-    this.drag = { pointer: e.pointerId, start: id, target: id, c, r, keys };
-    this.emit("dragstart", id, { c, r, keys });
+    const d = { pointer: e.pointerId, start: id, steps: stepsOf(start), target: id, c, r, keys, step: {} };
+    d.step = this.stepIn(d, e.clientX, e.clientY);
+    this.drag = d;
+    this.emit("dragstart", id, { c, r, keys, ...d.step });
     try {
       this.doc.documentElement.setPointerCapture(e.pointerId);
     } catch {
     }
   }
-  /** A move during a drag: an event each time its target changes, and
-   * while it has none, each time its cell does. */
+  /** A move during a drag (`moveDrag`). */
   onDragMove(e) {
     const d = this.drag;
     if (!d || e.pointerId !== d.pointer) return;
-    const [c, r] = this.cellOf(e);
-    const target = this.dragTarget(this.elementAt(e, c, r));
-    const keys = keysOf(e);
-    if (target !== d.target || target === "" && (c !== d.c || r !== d.r)) {
-      this.emit("drag", target, { c, r, keys });
+    this.moveDrag(d, e.clientX, e.clientY, keysOf(e));
+  }
+  /** The pointer or the finger of a drag moved to (x, y) of the document:
+   * an event each time its target changes, while it has none each time its
+   * cell does, and each time its step does (SPEC §9.1); one for a move that
+   * changes more than one. */
+  moveDrag(d, x, y, keys) {
+    const [c, r] = this.cellAt(x, y);
+    const target = this.dragTarget(this.elementAtPoint(x, y, c, r));
+    const step = this.stepIn(d, x, y);
+    if (target !== d.target || target === "" && (c !== d.c || r !== d.r) || step.x !== d.step.x || step.y !== d.step.y) {
+      this.emit("drag", target, { c, r, keys, ...step });
     }
-    Object.assign(d, { target, c, r, keys });
+    Object.assign(d, { target, c, r, keys, step });
+  }
+  /**
+   * Where (x, y) of the document is in the element a drag started on, in
+   * its steps (SPEC §9.1): measured against its border box where the user
+   * sees it now, wherever the point is, and as they last were once the
+   * element has left the document. None when it has no steps.
+   */
+  stepIn(d, x, y) {
+    const s = d.steps;
+    if (!s) return {};
+    if (!s.el.isConnected) return d.step;
+    const box = s.el.getBoundingClientRect();
+    const step = {};
+    if (s.x) step.x = stepAt(x - box.left, box.width, s.x);
+    if (s.y) step.y = stepAt(y - box.top, box.height, s.y);
+    return step;
   }
   /** The release ends the drag, wherever it is. Where it began, it is the
    * click it would have been without the drag; anywhere else, no click. */
@@ -2318,7 +2357,7 @@ var Surface = class {
     const [c, r] = this.cellOf(e);
     const at = this.elementAt(e, c, r);
     const target = this.dragTarget(at);
-    this.emit("dragend", target, { c, r, keys: keysOf(e) });
+    this.emit("dragend", target, { c, r, keys: keysOf(e), ...this.stepIn(d, e.clientX, e.clientY) });
     this.dragReleased = true;
     setTimeout(() => this.dragReleased = false, 0);
     if (target === d.start && at) this.reportClick(ancestry(at));
@@ -2331,13 +2370,13 @@ var Surface = class {
   /**
    * Ends a drag under way without a release (SPEC §9.1: its placement went
    * away, a new document came, or the pointer was lost): `dragend` with no
-   * target, at the last cell the program heard of.
+   * target, at the last cell and step the program heard of.
    */
   cancelDrag() {
     const d = this.drag;
     if (!d) return;
     this.dropDrag();
-    this.emit("dragend", "", { c: d.c, r: d.r, keys: d.keys });
+    this.emit("dragend", "", { c: d.c, r: d.r, keys: d.keys, ...d.step });
   }
   /** Ends a drag under way, silently (a detached or deleted surface). */
   dropDrag() {
@@ -2454,25 +2493,20 @@ var Surface = class {
     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 });
+    const d = { pointer: NaN, start: id, steps: stepsOf(start), target: id, c, r, keys, step: {} };
+    d.step = this.stepIn(d, begin.x, begin.y);
+    this.drag = d;
+    this.emit("dragstart", id, { c, r, keys, ...d.step });
     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`). */
+   * move (`moveDrag`). */
   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 });
+    if (d) this.moveDrag(d, x, y, keysOf(e));
   }
   /** A touch drag's finger lifted at (x, y): as a pointer's release
    * (`onDragUp`), a click where it began. */
@@ -2483,7 +2517,7 @@ var Surface = class {
     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.emit("dragend", target, { c, r, keys: keysOf(e), ...this.stepIn(d, x, y) });
     this.dragReleased = true;
     setTimeout(() => this.dragReleased = false, 0);
     if (target === d.start && at) this.reportClick(ancestry(at));
@@ -2973,6 +3007,10 @@ function isElement(n) {
 function listens(el, what) {
   return (el.getAttribute("data-on") ?? "").split(/\s+/).includes(what);
 }
+function stepsOf(el) {
+  const n = parseSteps(el.getAttribute("data-steps"));
+  return n && { el, x: n[0], y: n[1] };
+}
 function ancestry(el) {
   const out = [];
   for (let n = el; n; n = n.parentElement) out.push(n);
@@ -3516,6 +3554,7 @@ var HottyAddon = class {
       limits: { resources: this.store.quota, surfaces: this.opts.maxSurfaces },
       net: this.policy,
       scroll: true,
+      steps: true,
       host: HOST,
       version: VERSION
     };