@quario/editor 0.1.0

package/lib/stage.js

@@ -0,0 +1,654 @@
+/**
+ * The design surface: the sheet the rendered fragment lands on, and the
+ * furniture drawn above it — selection outlines, the gutter grip, the drop
+ * caret, placeholders. Imperative on purpose, like the viewer's stage: the
+ * sheet's content must survive updates that fail, and lit-html leaves an
+ * interpolated node untouched.
+ *
+ * `swap()` is the editor's one markup edge: the html target's documented
+ * output injected the documented way, with `data-q-path` mapping every
+ * element back to its definition. One schema node renders many times, so one
+ * path has many rectangles; selecting any of them selects the definition, and
+ * dropping in any rectangle of a slot means the same edit.
+ *
+ * The gutter grip is a **hover region**, not an element summoned per item:
+ * the grip is drawn above the fragment, so the pointer must leave the item to
+ * reach its own handle — a pointer already over the grip must not clear it,
+ * and the grip is never rebuilt while it serves the same item (a rebuild
+ * swallows the pointerdown that lands between two frames). It is as tall as
+ * its item and overlaps its left edge, so the seam is not a dead zone.
+ */
+
+import { bandOfItem, indexOfItem } from "./document.js";
+
+/** How far a pointer may wobble before a press becomes a drag. */
+let DRAG_SLOP = 4;
+
+/** How far a placeholder looks for a sibling to sit against. Bounded because
+ * a band whose neighbours are all hidden has nothing to measure, and the
+ * stack under the sheet is the honest answer there. */
+let SEARCH = 8;
+
+/** The selectable element under an event target, innermost first. */
+/** @type {(target: any) => any} */
+let hit = (target) => target?.closest?.("[data-q-path]") ?? null;
+
+/**
+ * @param {{
+ *   select: (path: string | null, el: Element | null) => void,
+ *   slots: (path: string) => { band: string, label: string, index: number, legal: boolean }[],
+ *   drop: (path: string, slot: { band: string, index: number }) => void,
+ *   dropColumn: (at: number, to: number) => void,
+ *   insert: (band: string, index: number) => void,
+ *   remove: (path: string) => void,
+ *   duplicate: (path: string) => void,
+ * }} acts What each finished gesture means; the element owns the commits.
+ */
+export function stage(acts) {
+  let root = document.createElement("div");
+  root.className = "qe-stage";
+  let canvas = document.createElement("div");
+  canvas.style.position = "relative";
+  let sheet = document.createElement("div");
+  sheet.className = "qe-sheet";
+  let overlay = document.createElement("div");
+  overlay.className = "qe-overlay";
+  canvas.append(sheet, overlay);
+  root.append(canvas);
+
+  /** @type {Map<string, Element[]>} path -> every rendered instance. */
+  let instances = new Map();
+  /** @type {string | null} */
+  let selected = null;
+  /** @type {string | null} */
+  let hovered = null;
+  /** @type {any} */
+  let drag = null;
+  /** @type {any} */
+  let column = null;
+  /** @type {{ el: HTMLElement, plus: HTMLElement, path: string } | null} */
+  let grip = null;
+  /** @type {HTMLElement | null} */
+  let menu = null;
+  /** @type {(
+   *   { kind: "band", path: string } | { kind: "item", path: string, source: string }
+   * )[]} */
+  let ghosts = [];
+  let revealed = false;
+
+  let index = () => {
+    instances = new Map();
+    for (let el of sheet.querySelectorAll("[data-q-path]")) {
+      let path = /** @type {string} */ (el.getAttribute("data-q-path"));
+      let list = instances.get(path);
+      if (!list) instances.set(path, (list = []));
+      list.push(el);
+    }
+  };
+
+  /** @type {(el: Element) => { left: number, top: number, width: number, height: number }} */
+  let box = (el) => {
+    let r = el.getBoundingClientRect();
+    let c = canvas.getBoundingClientRect();
+    return { left: r.left - c.left, top: r.top - c.top, width: r.width, height: r.height };
+  };
+
+  /** @type {(cls: string, at: { left?: number, top?: number, width?: number, height?: number }) => HTMLElement} */
+  let add = (cls, at) => {
+    let el = document.createElement("div");
+    el.className = cls;
+    for (let key of /** @type {("left" | "top" | "width" | "height")[]} */ ([
+      "left",
+      "top",
+      "width",
+      "height",
+    ]))
+      if (at[key] != null) el.style.setProperty(key, at[key] + "px");
+    overlay.append(el);
+    return el;
+  };
+
+  let closeMenu = () => {
+    menu?.remove();
+    menu = null;
+  };
+
+  let dropGrip = () => {
+    grip?.el.remove();
+    grip?.plus.remove();
+    grip = null;
+  };
+
+  // --- selection -----------------------------------------------------------
+
+  /** @type {(cls: string, els: Element[]) => void} */
+  let paintClass = (cls, els) => {
+    for (let el of els) el.classList.add(cls);
+  };
+  /** @type {(cls: string) => void} */
+  let clearClass = (cls) => {
+    for (let el of sheet.querySelectorAll("." + cls)) el.classList.remove(cls);
+  };
+
+  /** The instance the pointer actually landed on, or the family's first. */
+  /** @type {(family: Element[], el?: Element | null) => Element | undefined} */
+  let struck = (family, el) => (el && family.includes(el) ? el : family[0]);
+
+  /** Definition, not instance: every rectangle of the path lights, the hit
+   * one strongly. Re-run after every swap so selection survives a re-render. */
+  /** @type {(path: string | null, el?: Element | null) => void} */
+  let paintSelection = (path, el) => {
+    clearClass("qe-hit");
+    clearClass("qe-hit-first");
+    selected = path;
+    if (!path) return;
+    let family = instances.get(path) ?? [];
+    paintClass("qe-hit", family);
+    struck(family, el)?.classList.add("qe-hit-first");
+  };
+
+  /** @type {(path: string | null) => void} */
+  let paintPeek = (path) => {
+    clearClass("qe-peek");
+    hovered = path;
+    if (path && path !== selected) paintClass("qe-peek", instances.get(path) ?? []);
+  };
+
+  // --- placeholders --------------------------------------------------------
+
+  /** What a placeholder says: a band names itself, a hidden item shows the
+   * template source the author wrote, so several are distinguishable. */
+  /** @type {(ghost: any) => string} */
+  let ghostText = (ghost) =>
+    ghost.kind === "band" ? "empty band" : "hidden: " + (ghost.source || "(empty)");
+
+  /** @type {(ghost: any) => string} */
+  let ghostLabel = (ghost) => ghost.path + " — " + ghostText(ghost);
+
+  /** @type {(ghost: any, seat: { left: number, top: number, width: number },
+   *   stacked: boolean) => void} */
+  let drawGhost = (ghost, seat, stacked) => {
+    let el = add("qe-ghost" + (ghost.kind === "item" ? " qe-hidden-item" : ""), {
+      left: seat.left,
+      top: seat.top,
+      width: seat.width,
+      height: 24,
+    });
+    el.dataset.ghostPath = ghost.path;
+    el.dataset.ghostKind = ghost.kind;
+    // A placeholder in its own place needs no path to name it; one stacked
+    // under the sheet does, because nothing around it says where it belongs.
+    el.textContent = stacked ? ghostLabel(ghost) : ghostText(ghost);
+  };
+
+  // Where a placeholder sits: against the nearest rendered sibling in its own
+  // band, so it appears in document order rather than in a strip of its own —
+  // below the one before it, or above the one after when nothing precedes it.
+  // A band with nothing rendered at all has no sibling to measure, and falls
+  // back to the stack under the sheet.
+  /** @type {(ghost: any) => { left: number, top: number, width: number } | null} */
+  let ghostSeat = (ghost) => {
+    let at = indexOfItem(ghost.path);
+    if (at < 0) return null;
+    let band = bandOfItem(ghost.path);
+    let before = nearestSibling(band, at, -1);
+    if (before) return edgeOf(before, false);
+    let after = nearestSibling(band, at, 1);
+    return after ? edgeOf(after, true) : null;
+  };
+
+  /** The closest rendered item of a band, walking `step` away from `at`. */
+  /** @type {(band: string, at: number, step: number) => Element | null} */
+  let nearestSibling = (band, at, step) => {
+    for (let hop = 1; hop <= SEARCH; hop++) {
+      let found = siblingAt(band, at + hop * step);
+      if (found) return found;
+    }
+    return null;
+  };
+
+  /** @type {(band: string, i: number) => Element | null} */
+  let siblingAt = (band, i) => (i < 0 ? null : (instances.get(band + "[" + i + "]")?.[0] ?? null));
+
+  /** @type {(el: Element, above: boolean) => { left: number, top: number, width: number }} */
+  let edgeOf = (el, above) => {
+    let r = box(el);
+    return { left: r.left, top: above ? r.top - 26 : r.top + r.height + 2, width: r.width };
+  };
+
+  /** A hidden item's placeholder is a selection, never a drop target, so a
+   * drag shows only the empty bands an item could actually land in. */
+  /** @type {(ghost: any) => boolean} */
+  let shown = (ghost) => !(ghost.kind === "item" && drag);
+
+  /** @type {(base: any) => void} */
+  let drawGhosts = (base) => {
+    let stacked = base.top + base.height + 10;
+    for (let ghost of ghosts.filter(shown)) {
+      let seat = ghostSeat(ghost);
+      drawGhost(ghost, seat ?? { left: base.left, top: stacked, width: base.width }, !seat);
+      if (!seat) stacked += 30;
+    }
+  };
+
+  let ghostFurniture = () => {
+    for (let el of overlay.querySelectorAll(".qe-ghost")) el.remove();
+    if (revealed || drag) drawGhosts(box(sheet));
+  };
+
+  // --- the gutter grip -----------------------------------------------------
+
+  /** @type {(path: string, el: Element) => void} */
+  let showGrip = (path, el) => {
+    if (grip?.path === path) return;
+    dropGrip();
+    let r = box(el);
+    let handle = add("qe-grip", { left: r.left - 20, top: r.top, height: Math.max(r.height, 14) });
+    handle.textContent = "⠿";
+    handle.dataset.path = path;
+    let plus = add("qe-plus", { left: r.left - 20, top: r.top + Math.max(r.height, 14) + 1 });
+    plus.textContent = "+";
+    plus.title = "Add a text item after this one";
+    plus.dataset.path = path;
+    grip = { el: handle, plus, path };
+  };
+
+  /** @type {(path: string) => boolean} */
+  let grippable = (path) =>
+    /\[\d+\]$/.test(path) &&
+    !path.includes(".columns[") &&
+    !path.includes(".total[") &&
+    !path.startsWith("page.");
+
+  // --- item drag -----------------------------------------------------------
+
+  /** Every rectangle a slot offers: real insertion lines, or its ghost. */
+  /** @type {(slot: any) => { left: number, top: number, width: number }[]} */
+  /** The insertion line along each anchor: its top edge, or its bottom when
+   * the slot sits after the band's last item. */
+  /** @type {(anchors: Element[], useTop: boolean) => { left: number, top: number, width: number }[]} */
+  let edgeRects = (anchors, useTop) =>
+    anchors.map((anchor) => {
+      let r = box(anchor);
+      return { left: r.left, top: useTop ? r.top : r.top + r.height, width: r.width };
+    });
+
+  /** The strip standing in for a band with nothing on screen to aim at. */
+  /** @type {(band: string) => { left: number, top: number, width: number }[]} */
+  let ghostRect = (band) => {
+    let ghost = overlay.querySelector('[data-ghost-path="' + CSS.escape(band) + '"]');
+    if (!(ghost instanceof HTMLElement)) return [];
+    return [
+      {
+        left: parseFloat(ghost.style.left),
+        top: parseFloat(ghost.style.top),
+        width: parseFloat(ghost.style.width),
+      },
+    ];
+  };
+
+  /** Every rectangle a slot offers: real insertion lines, or its ghost. */
+  /** @type {(slot: any) => { left: number, top: number, width: number }[]} */
+  let slotRects = (slot) => {
+    /** @type {(path: string) => Element[]} */
+    let family = (path) => instances.get(path) ?? [];
+    let afters = family(slot.band + "[" + slot.index + "]");
+    let rects = edgeRects(
+      afters.length ? afters : family(slot.band + "[" + (slot.index - 1) + "]"),
+      afters.length > 0,
+    );
+    return rects.length ? rects : ghostRect(slot.band);
+  };
+
+  // How far a pointer is from one insertion line: vertical proximity
+  // dominates, and horizontal still discriminates between side-by-side bands.
+  /** @type {(r: { left: number, top: number, width: number }, px: number, py: number) => number} */
+  let distance = (r, px, py) =>
+    Math.max(0, Math.max(r.left - px, px - (r.left + r.width))) * 3 + Math.abs(r.top - py);
+
+  /** @type {(best: any, next: any) => any} */
+  let closer = (best, next) => (!best || next.d < best.d ? next : best);
+
+  /** @type {(slot: any, px: number, py: number, best: any) => any} */
+  let nearestIn = (slot, px, py, best) => {
+    for (let r of slotRects(slot)) best = closer(best, { d: distance(r, px, py), slot });
+    return best;
+  };
+
+  /** The nearest legal slot to a point, across every rectangle each offers. */
+  /** @type {(px: number, py: number) => any} */
+  let nearest = (px, py) => {
+    let best = null;
+    for (let slot of drag.legal) best = nearestIn(slot, px, py, best);
+    return best;
+  };
+
+  // The caret refuses to go anywhere illegal: only legal slots compete, and
+  // one schema slot's many rectangles all mean the same edit.
+  /** @type {(best: any) => void} */
+  let paintCaret = (best) => {
+    for (let el of overlay.querySelectorAll(".qe-caret")) el.remove();
+    for (let r of best ? slotRects(best.slot) : []) add("qe-caret", r);
+  };
+
+  /** @type {(x: number, y: number) => void} */
+  let paintDrag = (x, y) => {
+    let c = canvas.getBoundingClientRect();
+    let best = nearest(x - c.left, y - c.top);
+    drag.target = best?.slot ?? null;
+    paintCaret(best);
+  };
+
+  /** @type {(commit: boolean) => void} */
+  let endItemDrag = (commit) => {
+    let finished = drag;
+    drag = null;
+    paintCaret(null);
+    clearClass("qe-lifted");
+    ghostFurniture();
+    if (commit && finished?.target) acts.drop(finished.path, finished.target);
+  };
+
+  /** @type {(path: string) => void} */
+  let beginItemDrag = (path) => {
+    closeMenu();
+    let slots = acts.slots(path);
+    drag = { path, legal: slots.filter((slot) => slot.legal), target: null };
+    for (let el of instances.get(path) ?? []) el.classList.add("qe-lifted");
+    ghostFurniture();
+  };
+
+  // --- column drag ---------------------------------------------------------
+
+  /** @type {(x: number) => void} */
+  /** The insertion point a pointer names: the first header it sits left of,
+   * or past the last one. */
+  /** @type {(heads: Element[], x: number) => number} */
+  let columnSlot = (heads, x) => {
+    let at = heads.findIndex((head) => {
+      let r = head.getBoundingClientRect();
+      return x < r.left + r.width / 2;
+    });
+    return at < 0 ? heads.length : at;
+  };
+
+  /** Where the vertical caret is drawn: a header's left edge, or the table's
+   * right edge for the slot past the last column. */
+  /** @type {(heads: Element[], to: number) => number} */
+  let columnEdge = (heads, to) => {
+    if (to < heads.length) return box(heads[to]).left;
+    let last = box(heads[heads.length - 1]);
+    return last.left + last.width;
+  };
+
+  /** @type {(x: number) => void} */
+  let paintColumnDrag = (x) => {
+    clearVCaret();
+    let heads = [...column.table.querySelectorAll("th[data-q-path]")];
+    column.to = columnSlot(heads, x);
+    let table = box(column.table);
+    add("qe-vcaret", { left: columnEdge(heads, column.to), top: table.top, height: table.height });
+  };
+
+  /** A column that stayed put — dropped where it already is — is no edit. */
+  /** @type {(at: number, to: number) => boolean} */
+  let travelledColumn = (at, to) => at !== to && at + 1 !== to;
+
+  let clearVCaret = () => {
+    for (let el of overlay.querySelectorAll(".qe-vcaret")) el.remove();
+  };
+
+  let endColumnDrag = () => {
+    let finished = column;
+    column = null;
+    clearVCaret();
+    if (!finished?.moved) return false;
+    if (travelledColumn(finished.at, finished.to)) acts.dropColumn(finished.at, finished.to);
+    return true;
+  };
+
+  // --- the grip menu -------------------------------------------------------
+
+  /** @type {(path: string) => void} */
+  let openMenu = (path) => {
+    closeMenu();
+    if (!grip) return;
+    let r = box(grip.el);
+    menu = document.createElement("div");
+    menu.className = "qe-menu";
+    /** @type {(label: string, run: () => void) => void} */
+    let make = (label, run) => {
+      let button = document.createElement("button");
+      button.type = "button";
+      button.textContent = label;
+      button.addEventListener("click", () => {
+        closeMenu();
+        run();
+      });
+      menu?.append(button);
+    };
+    make("Duplicate", () => acts.duplicate(path));
+    make("Delete", () => acts.remove(path));
+    menu.style.left = r.left + 18 + "px";
+    menu.style.top = r.top + "px";
+    overlay.append(menu);
+  };
+
+  // --- wiring --------------------------------------------------------------
+
+  /** @type {any} */
+  let press = null;
+
+  /** The path an element carries, or null — the one place it is read. */
+  /** @type {(el: Element | null) => string | null} */
+  let pathOf = (el) => el?.getAttribute("data-q-path") ?? null;
+
+  /** Best-effort: a browser that refuses capture still drags, it just loses
+   * the pointer when it leaves the stage. */
+  /** @type {(event: PointerEvent) => void} */
+  let capture = (event) => {
+    try {
+      root.setPointerCapture(event.pointerId);
+    } catch {
+      /* capture is best-effort */
+    }
+  };
+
+  /** @type {(target: Element, event: PointerEvent) => boolean} */
+  let gripPress = (target, event) => {
+    let onGrip = target.closest(".qe-grip");
+    if (!(onGrip instanceof HTMLElement) || !onGrip.dataset.path) return false;
+    event.preventDefault();
+    press = { kind: "grip", path: onGrip.dataset.path, x: event.clientX, y: event.clientY };
+    capture(event);
+    return true;
+  };
+
+  /** The column a header cell belongs to, or null for anything else. */
+  /** @type {(cell: Element | null) => number | null} */
+  let columnIndex = (cell) => {
+    let at = pathOf(cell)?.match(/^detail\.columns\[(\d+)\]$/);
+    return at ? Number(at[1]) : null;
+  };
+
+  /** @type {(target: Element, event: PointerEvent) => void} */
+  let columnPress = (target, event) => {
+    let cell = target.closest("th[data-q-path]");
+    let at = columnIndex(cell);
+    if (at === null) return;
+    press = {
+      kind: "column",
+      at,
+      table: cell?.closest("table"),
+      el: cell,
+      path: "detail.columns[" + at + "]",
+      x: event.clientX,
+      y: event.clientY,
+    };
+    capture(event);
+  };
+
+  root.addEventListener("pointerdown", (event) => {
+    let target = /** @type {Element} */ (event.target);
+    if (menu && !menu.contains(target)) closeMenu();
+    if (!gripPress(target, event)) columnPress(target, event);
+  });
+
+  /** @type {(event: PointerEvent) => boolean} */
+  let travelled = (event) =>
+    Math.abs(event.clientX - press.x) > DRAG_SLOP || Math.abs(event.clientY - press.y) > DRAG_SLOP;
+
+  /** Whether a press is still eligible to become a drag. */
+  let pending = () => press && !drag && !column;
+
+  /** Promote a press that travelled into the drag its kind means. */
+  /** @type {(event: PointerEvent) => void} */
+  let maybeLift = (event) => {
+    if (!pending() || !travelled(event)) return;
+    if (press.kind === "grip") beginItemDrag(press.path);
+    else column = { at: press.at, to: press.at, table: press.table, moved: true };
+  };
+
+  /** @type {(el: Element | null, path: string | null) => boolean} */
+  let showable = (el, path) => !!el && !!path && grippable(path);
+
+  /** @type {(el: Element | null, path: string | null) => void} */
+  let gripFor = (el, path) => {
+    if (showable(el, path)) showGrip(/** @type {string} */ (path), /** @type {Element} */ (el));
+    else if (!menu) dropGrip();
+  };
+
+  // The hover region spans gutter and item together: a pointer on the grip or
+  // its + keeps it, a pointer on the item refreshes it, anything else clears
+  // it — the affordance is a region entered once and left once, never an
+  // element summoned per item.
+  /** @type {(target: Element) => void} */
+  let hover = (target) => {
+    if (target.closest(".qe-grip, .qe-plus, .qe-menu")) return;
+    let el = hit(target);
+    let path = pathOf(el);
+    if (path !== hovered) paintPeek(path);
+    gripFor(el, path);
+  };
+
+  root.addEventListener("pointermove", (event) => {
+    maybeLift(event);
+    if (drag) return paintDrag(event.clientX, event.clientY);
+    if (column) return paintColumnDrag(event.clientX);
+    hover(/** @type {Element} */ (event.target));
+  });
+
+  // A press that never travelled is a click: what it means is decided by what
+  // it began on — the grip opens its menu, a column header selects its column.
+  /** @type {Record<string, (pressed: any, target: Element) => any>} */
+  let FINISH = {
+    grip: (pressed, target) => target.closest(".qe-grip") && openMenu(pressed.path),
+    column: (pressed) => acts.select(pressed.path, pressed.el),
+  };
+
+  /** A finished drag consumes the release; anything else is a click. */
+  let endDrags = () => {
+    if (drag) {
+      endItemDrag(true);
+      return true;
+    }
+    return column ? endColumnDrag() : false;
+  };
+
+  root.addEventListener("pointerup", (event) => {
+    let pressed = press;
+    press = null;
+    if (endDrags()) return;
+    FINISH[pressed?.kind]?.(pressed, /** @type {Element} */ (event.target));
+  });
+
+  root.addEventListener("pointerleave", () => {
+    paintPeek(null);
+  });
+
+  /** The insertion point the gutter's `+` names: right after its own item. */
+  /** @type {(path: string) => number} */
+  let afterIndex = (path) => indexOfItem(path) + 1;
+
+  /** @type {(target: Element) => boolean} */
+  let plusInsert = (target) => {
+    let plus = target.closest(".qe-plus");
+    if (!(plus instanceof HTMLElement) || !plus.dataset.path) return false;
+    let path = plus.dataset.path;
+    acts.insert(bandOfItem(path), afterIndex(path));
+    return true;
+  };
+
+  // Two meanings, one affordance: a hidden item's placeholder is a real node
+  // to select, an empty band's is an insertion point.
+  /** @type {(target: Element) => boolean} */
+  let ghostClick = (target) => {
+    let ghost = target.closest(".qe-ghost");
+    if (!(ghost instanceof HTMLElement) || !ghost.dataset.ghostPath) return false;
+    if (ghost.dataset.ghostKind === "item") acts.select(ghost.dataset.ghostPath, null);
+    else acts.insert(ghost.dataset.ghostPath, 0);
+    return true;
+  };
+
+  root.addEventListener("click", (event) => {
+    let target = /** @type {Element} */ (event.target);
+    if (target.closest(".qe-grip, .qe-menu")) return;
+    if (plusInsert(target) || ghostClick(target)) return;
+    let el = hit(target);
+    acts.select(pathOf(el), el);
+  });
+
+  return {
+    element: root,
+    /** The one markup edge: the html target's documented output, injected
+     * the documented way. Selection is re-painted so it survives the swap. */
+    /** @type {(fragment: string) => void} */
+    swap(fragment) {
+      closeMenu();
+      dropGrip();
+      sheet.innerHTML = fragment;
+      index();
+      paintSelection(selected);
+      ghostFurniture();
+    },
+    /** The sheet is the page's shape: its width, and at least one page tall,
+     * so a letter sheet is letter-shaped and an A4 one A4-shaped. It grows
+     * with the report — the editor never paginates. */
+    /** @type {(page: { width: number, height: number, margin: number }) => void} */
+    resize(page) {
+      sheet.style.width = page.width + "px";
+      sheet.style.minHeight = page.height + "px";
+      sheet.style.padding = page.margin + "px";
+      sheet.style.paddingLeft = "var(--_gutter)";
+    },
+    /** @type {(path: string | null, el?: Element | null) => void} */
+    select: paintSelection,
+    /** Does the current fragment carry any identity to select by? */
+    identified: () => instances.size > 0,
+    /** The set of paths the render produced — placeholders() takes it. */
+    rendered: () => new Set(instances.keys()),
+    /** @type {(list: typeof ghosts, on: boolean) => void} */
+    revealPlaceholders(list, on) {
+      ghosts = list;
+      revealed = on;
+      ghostFurniture();
+    },
+    /** Escape cancels a live drag; true when one was cancelled. */
+    cancel() {
+      if (drag) {
+        endItemDrag(false);
+        return true;
+      }
+      if (column) {
+        column.moved = false;
+        endColumnDrag();
+        return true;
+      }
+      if (menu) {
+        closeMenu();
+        return true;
+      }
+      return false;
+    },
+  };
+}