@panphora/clayjs 1.13.0 → 1.14.0

package/src/page/blocksel.js

@@ -0,0 +1,269 @@
+// Block selection: Esc, the grip and Shift+click select whole blocks, and every
+// block command (delete, duplicate, move, indent, copy) acts on "the current
+// span", the block selection or the blocks a text selection touches, lifted to
+// whole sibling subtrees. BlockSelection itself lives in blocks.js because
+// moveSpanTr needs it.
+import { state, history, view as pmView, keymap } from "../vendor/prosemirror.vendor.js";
+import { schema } from "./schema.js";
+import { outline, siblingSpan, touchedBlocks, BlockSelection, STEP } from "./blocks.js";
+import { keysBetween, newId, orderedIds, REMOTE } from "./model.js";
+import { announce } from "./announce.js";
+
+const { Selection, TextSelection, NodeSelection, Plugin, PluginKey } = state;
+const N = schema.nodes;
+
+export const asStep = (tr) => history.closeHistory(tr).setMeta(STEP, true);
+
+export function selectBlocks(doc, a, b = a, ents = outline(doc)) {
+  const { lo, hi } = siblingSpan(ents, Math.min(a, b), Math.max(a, b));
+  const from = ents[lo].at, to = ents[hi].end;
+  return a <= b ? new BlockSelection(doc.resolve(from), doc.resolve(to)) : new BlockSelection(doc.resolve(to), doc.resolve(from));
+}
+
+export function currentSpan(st, ents = outline(st.doc)) {
+  const [a, b] = touchedBlocks(st.doc, st.selection, ents);
+  return siblingSpan(ents, a, b);
+}
+
+const visibleIdx = (ents, i, dir) => {
+  for (let j = i; j >= 0 && j < ents.length; j += dir) if (!ents[j].hidden) return j;
+  return -1;
+};
+
+export function selectCurrentBlock(st, dispatch) {
+  if (st.selection instanceof BlockSelection) return false;
+  const i = Math.min(st.selection.$head.index(0), st.doc.childCount - 1);
+  if (dispatch) dispatch(st.tr.setSelection(selectBlocks(st.doc, i)));
+  return true;
+}
+
+export const stepBlock = (dir) => (st, dispatch) => {
+  const sel = st.selection;
+  if (!(sel instanceof BlockSelection)) return false;
+  const ents = outline(st.doc);
+  const { lo, hi } = sel.span(st.doc);
+  const i = dir < 0 ? visibleIdx(ents, lo - 1, -1) : visibleIdx(ents, hi + 1, 1);
+  if (i < 0) return true;
+  if (dispatch) dispatch(st.tr.setSelection(selectBlocks(st.doc, i)).scrollIntoView());
+  return true;
+};
+
+function rootAt(ents, lo, hi, side) {
+  if (side < 0) return lo;
+  let r = lo;
+  while (ents[r].subEnd < hi) r = ents[r].subEnd + 1;
+  return r;
+}
+
+function prevRoot(ents, i) {
+  for (let j = i - 1; j >= 0; j--) if (ents[j].up === ents[i].up) return j;
+  return i;
+}
+
+export const extendBlock = (dir) => (st, dispatch) => {
+  const sel = st.selection;
+  if (!(sel instanceof BlockSelection)) return false;
+  const ents = outline(st.doc);
+  const { lo, hi } = sel.span(st.doc);
+  const fwd = sel.anchor <= sel.head;
+  const anchorIdx = fwd ? lo : rootAt(ents, lo, hi, 1);
+  let headIdx = fwd ? rootAt(ents, lo, hi, 1) : lo;
+  if (dir > 0) {
+    if (fwd || lo === hi || headIdx === anchorIdx) headIdx = visibleIdx(ents, (fwd ? hi : headIdx) + 1, 1);
+    else headIdx = visibleIdx(ents, ents[headIdx].subEnd + 1, 1);
+  } else {
+    if (!fwd || headIdx === anchorIdx) headIdx = visibleIdx(ents, (fwd ? headIdx : lo) - 1, -1);
+    else headIdx = prevRoot(ents, headIdx);
+  }
+  if (headIdx < 0) return true;
+  if (dispatch) dispatch(st.tr.setSelection(selectBlocks(st.doc, anchorIdx, headIdx, ents)).scrollIntoView());
+  return true;
+};
+
+export function deleteBlocks(st, dispatch) {
+  const sel = st.selection;
+  if (!(sel instanceof BlockSelection)) return false;
+  if (dispatch) {
+    const tr = st.tr.delete(sel.from, sel.to);
+    if (tr.doc.content.size === 0) tr.insert(0, N.paragraph.create());
+    tr.setSelection(Selection.near(tr.doc.resolve(Math.min(sel.from, tr.doc.content.size)), -1));
+    dispatch(asStep(tr).scrollIntoView());
+  }
+  return true;
+}
+
+function freshBoard({ columns = {}, cards = {} }) {
+  const order = orderedIds(columns);
+  const ids = new Map(order.map((id) => [id, newId("c")]));
+  const columnKeys = keysBetween(null, null, order.length);
+  const nextCards = {};
+  for (const col of new Set([...order, ...Object.values(cards).map((card) => card.col)])) {
+    const inColumn = orderedIds(Object.fromEntries(Object.entries(cards).filter(([, card]) => card.col === col)));
+    const keys = keysBetween(null, null, inColumn.length);
+    inColumn.forEach((id, i) => { nextCards[newId("k")] = { ...cards[id], col: ids.get(col) ?? col, pos: keys[i] }; });
+  }
+  return { columns: Object.fromEntries(order.map((id, i) => [ids.get(id), { ...columns[id], pos: columnKeys[i] }])), cards: nextCards };
+}
+
+export function duplicateBlocks(st, dispatch) {
+  const ents = outline(st.doc);
+  if (!ents.length) return false;
+  const { lo, hi } = currentSpan(st, ents);
+  if (dispatch) {
+    const ids = new Map();
+    for (let k = lo; k <= hi; k++) if (ents[k].node.type === N.toggle && ents[k].node.attrs.id) ids.set(ents[k].node.attrs.id, newId());
+    const nodes = [];
+    for (let k = lo; k <= hi; k++) {
+      const n = ents[k].node, p = n.attrs.parent ?? null;
+      nodes.push(n.type.create({ ...n.attrs, ...(n.type === N.board ? freshBoard(n.attrs) : {}), id: ids.get(n.attrs.id) ?? null, pos: null, parent: ids.get(p) ?? p }, n.content, n.marks));
+    }
+    const at = ents[hi].end, size = at - ents[lo].at;
+    const tr = st.tr.insert(at, nodes);
+    const s = st.selection;
+    tr.setSelection(s instanceof BlockSelection
+      ? new BlockSelection(tr.doc.resolve(at), tr.doc.resolve(at + size))
+      : TextSelection.create(tr.doc, s.anchor + size, s.head + size));
+    dispatch(asStep(tr).scrollIntoView());
+  }
+  return true;
+}
+
+const endOfFirstText = (doc, ents, lo, hi) => {
+  for (let k = lo; k <= hi; k++) if (ents[k].node.isTextblock) return ents[k].end - 1;
+  return -1;
+};
+
+export function exitToText(st, dispatch) {
+  const sel = st.selection;
+  if (!(sel instanceof BlockSelection)) return false;
+  const ents = outline(st.doc);
+  const { lo, hi } = sel.span(st.doc);
+  if (dispatch) {
+    const at = endOfFirstText(st.doc, ents, lo, hi);
+    dispatch(st.tr.setSelection(at >= 0 ? TextSelection.create(st.doc, at) : NodeSelection.create(st.doc, ents[lo].at)));
+  }
+  return true;
+}
+
+export function selectAllBlocks(st, dispatch) {
+  const { $from, $to } = st.selection;
+  const one = $from.depth === 1 && $from.sameParent($to);
+  const whole = one && $from.parentOffset === 0 && $to.parentOffset === $to.parent.content.size;
+  if (one && !whole && $from.parent.content.size) {
+    if (dispatch) dispatch(st.tr.setSelection(TextSelection.create(st.doc, $from.start(), $from.end())));
+    return true;
+  }
+  if (dispatch) dispatch(st.tr.setSelection(new BlockSelection(st.doc.resolve(0), st.doc.resolve(st.doc.content.size))));
+  return true;
+}
+
+export const typeIntoBlocks = (view, text) => {
+  const st = view.state, sel = st.selection;
+  if (!(sel instanceof BlockSelection)) return false;
+  const ents = outline(st.doc);
+  const { lo, hi } = sel.span(st.doc);
+  const at = endOfFirstText(st.doc, ents, lo, hi);
+  const tr = st.tr;
+  if (at < 0) {
+    const to = ents[hi].end;
+    tr.insert(to, N.paragraph.create({ parent: ents[lo].node.attrs.parent ?? null }));
+    tr.setSelection(TextSelection.create(tr.doc, to + 1));
+    asStep(tr);
+  } else tr.setSelection(TextSelection.create(tr.doc, at));
+  tr.insertText(text);
+  view.dispatch(tr.scrollIntoView());
+  return true;
+};
+
+const leaveSummaryDown = (st, dispatch, view) => {
+  const sel = st.selection;
+  if (!(sel instanceof TextSelection) || !view?.endOfTextblock("down")) return false;
+  const { $anchor: $a, $head: $h } = sel;
+  if ($a.depth !== 1 || $a.parent.type !== N.toggle || $a.parent.attrs.open || $a.index(0) !== $h.index(0)) return false;
+  const ents = outline(st.doc);
+  const i = $a.index(0);
+  const j = visibleIdx(ents, ents[i].subEnd + 1, 1);
+  if (j < 0) return false;
+  if (dispatch) dispatch(st.tr.setSelection(selectBlocks(st.doc, i, j, ents)).scrollIntoView());
+  return true;
+};
+
+const only = (cmd) => (st, d, v) => st.selection instanceof BlockSelection && cmd(st, d, v);
+
+export const blockSelKeys = {
+  Escape: (st, d) => exitToText(st, d) || selectCurrentBlock(st, d),
+  Enter: only(exitToText),
+  ArrowUp: stepBlock(-1),
+  ArrowDown: stepBlock(1),
+  "Shift-ArrowUp": extendBlock(-1),
+  "Shift-ArrowDown": (st, d, v) => extendBlock(1)(st, d) || leaveSummaryDown(st, d, v),
+  Backspace: deleteBlocks,
+  "Alt-Backspace": deleteBlocks,
+  "Ctrl-h": deleteBlocks,
+  Delete: deleteBlocks,
+  "Mod-d": duplicateBlocks,
+  "Mod-a": selectAllBlocks,
+};
+
+export const blockSelKey = new PluginKey("page-blocksel");
+
+const countOf = (st) => {
+  const sel = st.selection;
+  const { lo, hi } = sel.span(st.doc);
+  return outline(st.doc).filter((e) => e.i >= lo && e.i <= hi && !e.hidden).length;
+};
+
+export function blockSelectionPlugin() {
+  const keys = keymap.keymap(blockSelKeys);
+  return new Plugin({
+    key: blockSelKey,
+    state: {
+      init: () => 0,
+      apply: (tr, notice, prev, next) => (tr.getMeta(REMOTE) && prev.selection instanceof BlockSelection && !(next.selection instanceof BlockSelection) ? notice + 1 : notice),
+    },
+    props: {
+      handleKeyDown: (view, event) => keys.props.handleKeyDown(view, event),
+      handleTextInput: (view, from, to, text) => typeIntoBlocks(view, text),
+      decorations(st) {
+        const sel = st.selection;
+        if (!(sel instanceof BlockSelection)) return null;
+        const decos = [];
+        st.doc.nodesBetween(sel.from, sel.to, (n, pos) => {
+          decos.push(pmView.Decoration.node(pos, pos + n.nodeSize, { class: "page-block-selected" }));
+          return false;
+        });
+        return pmView.DecorationSet.create(st.doc, decos);
+      },
+      createSelectionBetween(view, $anchor, $head) {
+        const sel = view.state.selection;
+        return sel instanceof BlockSelection && $anchor.pos === sel.anchor && $head.pos === sel.head ? sel : null;
+      },
+      handleDOMEvents: {
+        mousedown(view, event) {
+          const sel = view.state.selection;
+          if (!event.shiftKey || !(sel instanceof BlockSelection) || event.button !== 0) return false;
+          const hit = view.posAtCoords({ left: event.clientX, top: event.clientY });
+          if (!hit) return false;
+          const ents = outline(view.state.doc);
+          const j = Math.min(view.state.doc.resolve(hit.inside >= 0 ? hit.inside : hit.pos).index(0), ents.length - 1);
+          const { lo, hi } = sel.span(view.state.doc);
+          const anchorIdx = sel.anchor <= sel.head ? lo : rootAt(ents, lo, hi, 1);
+          event.preventDefault();
+          view.dispatch(view.state.tr.setSelection(selectBlocks(view.state.doc, anchorIdx, j, ents)));
+          return true;
+        },
+      },
+    },
+    view: () => ({
+      update(view, prev) {
+        const a = view.state.selection, b = prev.selection;
+        if (a instanceof BlockSelection && !a.eq(b)) {
+          const n = countOf(view.state);
+          announce(view, `${n} ${n === 1 ? "block" : "blocks"} selected`);
+        } else if (b instanceof BlockSelection && !(a instanceof BlockSelection)) {
+          announce(view, blockSelKey.getState(view.state) !== blockSelKey.getState(prev) ? "Block selection cleared because the document changed" : "Selection cleared");
+        }
+      },
+    }),
+  });
+}

package/src/page/board-drag.js

@@ -0,0 +1,226 @@
+import { announce } from "./announce.js";
+import { scrollParent } from "./drag.js";
+
+const SLOP = 4;
+const EDGE = 56;
+const MAX_SPEED = 18;
+const STRIP = ["id", "data-focus", "data-action", "data-card", "data-col"];
+
+const middle = (node, axis) => {
+  const r = node.getBoundingClientRect();
+  return axis === "x" ? r.left + r.width / 2 : r.top + r.height / 2;
+};
+const speed = (at, lo, hi) => (at < lo + EDGE ? -MAX_SPEED * Math.min(1, (lo + EDGE - at) / EDGE) : at > hi - EDGE ? MAX_SPEED * Math.min(1, (at - (hi - EDGE)) / EDGE) : 0);
+const same = (a, b) => a?.col === b?.col && a?.afterId === b?.afterId && !a === !b;
+
+export class BoardDrag {
+  constructor(host) {
+    this.host = host;
+    this.state = null;
+    this.line = null;
+    this.suppress = false;
+    this.onMove = (e) => this.move(e);
+    this.onUp = (e) => this.end(e);
+    this.onCancel = (e) => { if (e.pointerId === this.state?.pointer) this.cancel(); };
+    this.onKey = (e) => {
+      if (e.key === "Escape" && this.state?.active) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.cancel();
+      }
+    };
+    host.dom.addEventListener("pointerdown", (e) => this.start(e));
+    host.dom.addEventListener("click", (e) => {
+      if (!this.suppress) return;
+      this.suppress = false;
+      e.preventDefault();
+      e.stopImmediatePropagation();
+    }, true);
+  }
+
+  start(event) {
+    const host = this.host;
+    if (event.button !== 0 || event.pointerType === "touch" || this.state || !host.commands || !host.view.editable) return;
+    const card = event.target.closest?.(".page-board-card[data-card]");
+    const head = card ? null : event.target.closest?.(".page-board-head[data-col]");
+    if (!card && (!head || event.target.closest("button, input"))) return;
+    this.state = {
+      kind: card ? "card" : "column", id: card ? card.dataset.card : head.dataset.col, pointer: event.pointerId,
+      x0: event.clientX, y0: event.clientY, x: event.clientX, y: event.clientY, active: false, slot: null, raf: 0, ghost: null,
+    };
+    const doc = host.dom.ownerDocument;
+    doc.addEventListener("pointermove", this.onMove);
+    doc.addEventListener("pointerup", this.onUp);
+    doc.addEventListener("pointercancel", this.onCancel);
+  }
+
+  move(event) {
+    const s = this.state;
+    if (!s || event.pointerId !== s.pointer) return;
+    s.x = event.clientX;
+    s.y = event.clientY;
+    if (!s.active) {
+      if (Math.hypot(s.x - s.x0, s.y - s.y0) <= SLOP) return;
+      this.begin();
+    }
+    event.preventDefault();
+    this.track();
+  }
+
+  source() {
+    const { kind, id } = this.state;
+    const nodes = kind === "card" ? this.host.dom.querySelectorAll(".page-board-card[data-card]") : this.host.lanes.querySelectorAll(".page-board-lane[data-col]");
+    return [...nodes].find((node) => (kind === "card" ? node.dataset.card : node.dataset.col) === id) ?? null;
+  }
+
+  exists() {
+    const { kind, id } = this.state, board = this.host.board;
+    return kind === "card" ? Object.hasOwn(board.cards, id) : board.columnIds.includes(id);
+  }
+
+  begin() {
+    const s = this.state, host = this.host;
+    const source = this.source();
+    if (!source || !this.exists()) return this.stop();
+    if (host.menu !== null) host.closeMenu(false);
+    s.active = true;
+    const r = source.getBoundingClientRect();
+    s.dx = s.x0 - r.left;
+    s.dy = s.y0 - r.top;
+    const ghost = source.cloneNode(true);
+    for (const node of [ghost, ...ghost.querySelectorAll("*")]) for (const name of STRIP) node.removeAttribute(name);
+    ghost.classList.add("page-board-ghost");
+    ghost.setAttribute("aria-hidden", "true");
+    ghost.setAttribute("inert", "");
+    ghost.style.width = `${r.width}px`;
+    s.ghost = ghost;
+    host.dom.append(ghost);
+    host.dom.classList.add("is-dragging");
+    this.line = host.dom.ownerDocument.createElement(s.kind === "card" ? "li" : "div");
+    this.line.className = s.kind === "card" ? "page-board-drop" : "page-board-drop is-column";
+    this.line.setAttribute("aria-hidden", "true");
+    host.dom.setPointerCapture?.(s.pointer);
+    host.dom.addEventListener("lostpointercapture", this.onCancel);
+    window.addEventListener("keydown", this.onKey, true);
+    source.classList.add("is-drag-source");
+    this.loop();
+  }
+
+  track(force = false) {
+    const s = this.state;
+    if (!s?.active) return;
+    s.ghost.style.transform = `translate(${s.x - s.dx}px, ${s.y - s.dy}px)`;
+    if (!this.exists()) return this.cancel();
+    const slot = this.inBounds() ? (s.kind === "card" ? this.cardSlot() : this.columnSlot()) : null;
+    if (!force && same(slot, s.slot)) return;
+    s.slot = slot;
+    this.paint();
+  }
+
+  inBounds() {
+    const s = this.state, r = this.host.scroll.getBoundingClientRect();
+    return s.x >= r.left - EDGE && s.x <= r.right + EDGE && s.y >= r.top - EDGE && s.y <= r.bottom + EDGE;
+  }
+
+  cardSlot() {
+    const s = this.state;
+    let lane = null, best = Infinity;
+    for (const node of this.host.lanes.querySelectorAll(".page-board-lane[data-col]")) {
+      const r = node.getBoundingClientRect();
+      const distance = s.x < r.left ? r.left - s.x : s.x > r.right ? s.x - r.right : 0;
+      if (distance < best) { best = distance; lane = node; }
+    }
+    if (!lane) return null;
+    const cards = [...lane.querySelectorAll(".page-board-card[data-card]")].filter((node) => node.dataset.card !== s.id);
+    const index = cards.filter((node) => middle(node, "y") < s.y).length;
+    return { col: lane.dataset.col, afterId: index ? cards[index - 1].dataset.card : null };
+  }
+
+  columnSlot() {
+    const s = this.state;
+    const rtl = getComputedStyle(this.host.lanes).direction === "rtl";
+    const lanes = [...this.host.lanes.querySelectorAll(".page-board-lane[data-col]")].filter((node) => node.dataset.col !== s.id);
+    const index = lanes.filter((node) => (rtl ? middle(node, "x") > s.x : middle(node, "x") < s.x)).length;
+    return { col: null, afterId: index ? lanes[index - 1].dataset.col : null };
+  }
+
+  paint() {
+    const s = this.state, line = this.line;
+    line.remove();
+    if (!s.slot) return;
+    const lanes = this.host.lanes;
+    if (s.kind === "card") {
+      const list = [...lanes.querySelectorAll(".page-board-lane[data-col]")].find((node) => node.dataset.col === s.slot.col)?.querySelector(".page-board-cards");
+      const after = s.slot.afterId && [...(list?.querySelectorAll(".page-board-card[data-card]") ?? [])].find((node) => node.dataset.card === s.slot.afterId)?.closest("li");
+      list?.insertBefore(line, after ? after.nextSibling : list.firstChild);
+    } else {
+      const after = s.slot.afterId && [...lanes.querySelectorAll(".page-board-lane[data-col]")].find((node) => node.dataset.col === s.slot.afterId);
+      lanes.insertBefore(line, after ? after.nextSibling : lanes.firstChild);
+    }
+  }
+
+  repaint() {
+    if (!this.state?.active) return;
+    this.source()?.classList.add("is-drag-source");
+    this.track(true);
+  }
+
+  loop() {
+    const step = () => {
+      const s = this.state;
+      if (!s?.active) return;
+      const box = this.host.scroll.getBoundingClientRect();
+      const page = scrollParent(this.host.dom);
+      const pageBox = page === page.ownerDocument.scrollingElement ? { top: 0, bottom: window.innerHeight } : page.getBoundingClientRect();
+      const vx = speed(s.x, box.left, box.right), vy = speed(s.y, pageBox.top, pageBox.bottom);
+      if (vx) this.host.scroll.scrollLeft += vx;
+      if (vy) page.scrollTop += vy;
+      if (vx || vy) this.track();
+      if (this.state === s) s.raf = requestAnimationFrame(step);
+    };
+    this.state.raf = requestAnimationFrame(step);
+  }
+
+  end(event) {
+    const s = this.state;
+    if (!s || event.pointerId !== s.pointer) return;
+    if (!s.active) return this.stop();
+    event.preventDefault();
+    this.suppress = true;
+    setTimeout(() => { this.suppress = false; }, 0);
+    const { kind, id, slot } = s;
+    this.stop();
+    const host = this.host;
+    if (!slot) return announce(host.view, "Move cancelled");
+    const result = kind === "card" ? host.run("moveCard", id, { columnId: slot.col, afterId: slot.afterId }) : host.run("moveColumn", id, { afterId: slot.afterId });
+    if (result.status !== "moved") return;
+    if (kind === "card") {
+      announce(host.view, `Moved card to ${host.board.columns[slot.col]?.name || "Untitled"}`);
+      host.focusKey(`card:${id}`);
+    } else announce(host.view, "Moved column");
+  }
+
+  cancel() {
+    this.stop();
+    announce(this.host.view, "Move cancelled");
+  }
+
+  stop() {
+    const s = this.state, host = this.host;
+    if (!s) return;
+    this.state = null;
+    cancelAnimationFrame(s.raf);
+    const doc = host.dom.ownerDocument;
+    doc.removeEventListener("pointermove", this.onMove);
+    doc.removeEventListener("pointerup", this.onUp);
+    doc.removeEventListener("pointercancel", this.onCancel);
+    host.dom.removeEventListener("lostpointercapture", this.onCancel);
+    window.removeEventListener("keydown", this.onKey, true);
+    if (host.dom.hasPointerCapture?.(s.pointer)) host.dom.releasePointerCapture(s.pointer);
+    s.ghost?.remove();
+    this.line?.remove();
+    this.line = null;
+    host.dom.classList.remove("is-dragging");
+    for (const node of host.dom.querySelectorAll(".is-drag-source")) node.classList.remove("is-drag-source");
+  }
+}