@panphora/clayjs 1.13.0 → 1.14.0

package/src/page/chart.js

@@ -0,0 +1,220 @@
+import { state } from "../vendor/prosemirror.vendor.js";
+import { schema } from "./schema.js";
+import { blockJson, keyBetween, newId, orderedIds } from "./model.js";
+import { chartModel, renderChartSvg } from "./rich/chart.js";
+import { openPageMenu } from "./chrome.js";
+import { project } from "./projection.js";
+import { columnKinds } from "./table-kinds.js";
+import { cellText } from "./rich/cell.js";
+
+const views = new WeakMap();
+
+function sourceTable(doc, id) {
+  let table = null;
+  doc.forEach((node) => { if (node.type === schema.nodes.table && node.attrs.id === id) table = node; });
+  return table;
+}
+
+function tableData(node) {
+  if (!node) return null;
+  return project({ [node.attrs.id]: blockJson(node) })[0];
+}
+
+function chartAttrs(table, pos, parent) {
+  const colIds = orderedIds(table.attrs.cols);
+  if (!colIds.length) return null;
+  const kinds = columnKinds(table);
+  const series = colIds.filter((id) => id !== colIds[0] && kinds[id] === "number");
+  return {
+    id: newId(),
+    pos,
+    parent,
+    source: table.attrs.id,
+    kind: "bar",
+    x: colIds[0],
+    series: series.length ? series : colIds[1] ? [colIds[1]] : [],
+    title: "",
+    highlight: null,
+  };
+}
+
+export function insertChartAfterTable(view, tablePos) {
+  const doc = view.state.doc;
+  const table = doc.nodeAt(tablePos);
+  if (table?.type !== schema.nodes.table) return false;
+  const after = tablePos + table.nodeSize;
+  const next = doc.maybeChild(doc.resolve(after).index(0));
+  const attrs = chartAttrs(table, keyBetween(table.attrs.pos, next?.attrs.pos ?? null), table.attrs.parent);
+  if (!attrs) return false;
+  view.dispatch(view.state.tr.insert(after, schema.nodes.chart.create(attrs)));
+  return true;
+}
+
+export function chartTables(doc) {
+  const tables = [];
+  doc.forEach((node) => { if (node.type === schema.nodes.table && orderedIds(node.attrs.cols).length) tables.push(node); });
+  return tables;
+}
+
+// /chart: an empty line becomes the chart, otherwise it goes below the line.
+// One table is charted at once; several open a picker named by their columns.
+function placeChart(view, index, table, remove) {
+  let tr = view.state.tr;
+  if (remove) tr.delete(remove.from, remove.to);
+  if (!sourceTable(tr.doc, table.attrs.id) || index >= tr.doc.childCount) return false;
+  let at = 0;
+  for (let i = 0; i < index; i++) at += tr.doc.child(i).nodeSize;
+  const node = tr.doc.child(index);
+  const replace = node.isTextblock && node.content.size === 0;
+  const next = tr.doc.maybeChild(index + 1);
+  const pos = replace ? node.attrs.pos : keyBetween(node.attrs.pos, next?.attrs.pos ?? null);
+  const attrs = chartAttrs(table, pos, node.attrs.parent ?? null);
+  if (!attrs) return false;
+  const chart = schema.nodes.chart.create(attrs);
+  tr = replace ? tr.replaceWith(at, at + node.nodeSize, chart) : tr.insert(at + node.nodeSize, chart);
+  view.dispatch(tr.scrollIntoView());
+  return true;
+}
+
+export const tableLabel = (table) => orderedIds(table.attrs.cols).map((id) => table.attrs.cols[id].name || "Untitled").join(", ");
+
+export function chartFromSlash(view, index, remove = null) {
+  const tables = chartTables(view.state.doc);
+  if (!tables.length) return false;
+  if (tables.length === 1) return placeChart(view, index, tables[0], remove);
+  const anchor = view.nodeDOM(view.state.doc.resolve(view.state.selection.head).before(1)) ?? view.dom;
+  return openPageMenu(view, anchor, tables.map((table, i) => ({
+    label: `Table ${i + 1}`,
+    description: tableLabel(table),
+    icon: "▦",
+    run: () => placeChart(view, index, table, remove),
+  })));
+}
+
+export class ChartView {
+  constructor(node, view, getPos) {
+    this.node = node;
+    this.view = view;
+    this.getPos = getPos;
+    this.source = undefined;
+    this.frame = null;
+    const doc = view.dom.ownerDocument;
+    this.dom = doc.createElement("figure");
+    this.dom.className = "page-chart";
+    this.dom.dataset.id = node.attrs.id ?? "";
+    this.dom.dataset.type = "chart";
+    this.plot = doc.createElement("div");
+    this.plot.className = "page-chart-plot";
+    this.caption = doc.createElement("figcaption");
+    this.settings = doc.createElement("button");
+    this.settings.type = "button";
+    this.settings.className = "page-chart-settings";
+    this.settings.textContent = "Chart settings";
+    this.settings.setAttribute("aria-label", "Chart settings");
+    this.settings.contentEditable = "false";
+    this.settings.addEventListener("click", () => this.openSettings());
+    this.dom.append(this.plot, this.caption, this.settings);
+    if (!views.has(view)) views.set(view, new Set());
+    views.get(view).add(this);
+    this.refresh();
+  }
+
+  refresh() {
+    const source = sourceTable(this.view.state.doc, this.node.attrs.source);
+    if (source === this.source) return;
+    this.source = source;
+    this.schedule();
+  }
+
+  schedule() {
+    if (this.frame !== null) return;
+    const win = this.dom.ownerDocument.defaultView;
+    const raf = win.requestAnimationFrame?.bind(win) ?? ((fn) => win.setTimeout(fn, 0));
+    this.frame = raf(() => { this.frame = null; this.draw(); });
+  }
+
+  draw() {
+    const attrs = this.node.attrs;
+    const chart = chartModel({ id: attrs.id, type: attrs.kind, x: attrs.x, series: attrs.series, title: attrs.title, highlight: attrs.highlight }, tableData(this.source));
+    this.plot.innerHTML = renderChartSvg(chart, { width: 640, height: 320, narrow: this.dom.getBoundingClientRect().width < 480 });
+    this.caption.textContent = attrs.title;
+  }
+
+  setAttrs(changes) {
+    const pos = this.getPos();
+    if (pos == null) return;
+    const node = this.view.state.doc.nodeAt(pos);
+    if (node?.type !== schema.nodes.chart) return;
+    this.view.dispatch(this.view.state.tr.setNodeMarkup(pos, null, { ...node.attrs, ...changes }));
+  }
+
+  submenu(items) {
+    openPageMenu(this.view, this.settings, items);
+  }
+
+  openSettings() {
+    const attrs = this.node.attrs;
+    const table = tableData(sourceTable(this.view.state.doc, attrs.source));
+    const cols = table?.cols ?? [];
+    const rows = table?.rows ?? [];
+    this.submenu([
+      { label: "Line", icon: attrs.kind === "line" ? "✓" : "", run: () => this.setAttrs({ kind: "line" }) },
+      { label: "Bar", icon: attrs.kind === "bar" ? "✓" : "", run: () => this.setAttrs({ kind: "bar" }) },
+      { label: "X column ▸", focus: false, run: () => this.submenu(cols.map((col) => ({ label: col.name || col.id, icon: attrs.x === col.id ? "✓" : "", run: () => this.setAttrs({ x: col.id, series: attrs.series.filter((id) => id !== col.id) }) }))) },
+      { label: "Series ▸", focus: false, run: () => this.submenu(cols.filter((col) => col.id !== attrs.x).map((col) => ({ label: col.name || col.id, icon: attrs.series.includes(col.id) ? "✓" : "", checked: attrs.series.includes(col.id), run: () => this.setAttrs({ series: attrs.series.includes(col.id) ? attrs.series.filter((id) => id !== col.id) : [...attrs.series, col.id] }) }))) },
+      { label: "Highlight row ▸", focus: false, run: () => this.submenu([{ label: "None", icon: !attrs.highlight ? "✓" : "", run: () => this.setAttrs({ highlight: null }) }, ...rows.map((row) => ({ label: cellText(row.cells[attrs.x]) || row.id, icon: attrs.highlight === row.id ? "✓" : "", run: () => this.setAttrs({ highlight: row.id }) }))]) },
+      { label: "Edit title", focus: false, run: () => this.editTitle() },
+    ]);
+  }
+
+  editTitle() {
+    const input = this.dom.ownerDocument.createElement("input");
+    input.type = "text";
+    input.className = "page-chart-title-input";
+    input.setAttribute("aria-label", "Chart title");
+    input.value = this.node.attrs.title ?? "";
+    const finish = (save) => {
+      input.remove();
+      this.caption.hidden = false;
+      if (save) this.setAttrs({ title: input.value });
+      else this.settings.focus();
+    };
+    input.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" || event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        finish(event.key === "Enter");
+      }
+    });
+    this.caption.hidden = true;
+    this.caption.after(input);
+    input.focus();
+    input.select();
+  }
+
+  update(node) {
+    if (node.type !== schema.nodes.chart) return false;
+    const changed = !node.sameMarkup(this.node);
+    this.node = node;
+    this.dom.dataset.id = node.attrs.id ?? "";
+    if (changed) { this.source = sourceTable(this.view.state.doc, node.attrs.source); this.schedule(); }
+    return true;
+  }
+
+  stopEvent(event) { return !!event.target.closest?.(".page-chart-settings, .page-chart-title-input"); }
+
+  destroy() {
+    views.get(this.view)?.delete(this);
+    if (this.frame !== null) {
+      const win = this.dom.ownerDocument.defaultView;
+      if (win.cancelAnimationFrame) win.cancelAnimationFrame(this.frame);
+      else win.clearTimeout(this.frame);
+    }
+  }
+}
+
+export function chartPlugin() {
+  return new state.Plugin({
+    view: () => ({ update(view) { for (const chart of views.get(view) ?? []) chart.refresh(); } }),
+  });
+}

package/src/page/checklist.js

@@ -0,0 +1,143 @@
+import { state, view as pmView } from "../vendor/prosemirror.vendor.js";
+import { schema } from "./schema.js";
+import { asStep } from "./blocksel.js";
+import { el, cardFace } from "./board-view.js";
+
+const { Plugin } = state;
+const { Decoration, DecorationSet } = pmView;
+
+function itemAt(view, id) {
+  let found = null;
+  view.state.doc.forEach((node, pos) => { if (node.attrs.id === id && node.type === schema.nodes.list_item && node.attrs.kind === "check") found = { node, pos }; });
+  return found;
+}
+
+function setItem(view, id, attr, value) {
+  const found = itemAt(view, id);
+  if (!found) return;
+  view.dispatch(asStep(view.state.tr.setNodeMarkup(found.pos, null, { ...found.node.attrs, [attr]: value || null })));
+}
+
+function chip(doc, label, aria, attr) {
+  const button = doc.createElement("button");
+  button.type = "button";
+  button.className = "page-check-chip";
+  button.dataset.check = attr;
+  button.textContent = label;
+  button.setAttribute("aria-label", aria);
+  return button;
+}
+
+// The same owner field a board card's panel shows: people as chips, "No owner",
+// then a name box for anyone not in the list.
+function ownerPicker(view, id, anchor) {
+  const doc = anchor.ownerDocument;
+  const current = itemAt(view, id)?.node.attrs.owner || "";
+  const popup = doc.createElement("span");
+  popup.className = "page-check-popup page-check-owner";
+  popup.contentEditable = "false";
+  const box = el(doc, "span", "page-board-owners");
+  const people = el(doc, "span", "page-board-people", { role: "group", "aria-label": "Owner" });
+  const input = el(doc, "input", "page-board-owner-input", { type: "text", "aria-label": "Owner name", placeholder: "Or type a name…" });
+  input.value = current;
+  const choose = (name) => setItem(view, id, "owner", name);
+  const person = (name, label, attr, pressed) => {
+    const button = el(doc, "button", `page-board-person${name ? "" : " is-none"}`, { type: "button", "aria-pressed": String(pressed), "data-check": attr });
+    if (name) button.append(cardFace(doc, name), el(doc, "span", null, {}, name));
+    else button.textContent = label;
+    button.addEventListener("click", () => choose(name));
+    return button;
+  };
+  const draw = (available) => {
+    const typed = input.value.trim().toLowerCase();
+    const shown = (available || []).filter((p) => !typed || typed === current.toLowerCase() || p.name.toLowerCase().includes(typed));
+    people.replaceChildren(...shown.map((p) => person(p.name, p.name, "owner-option", p.name === current)), person(null, "No owner", "clear-owner", !current));
+  };
+  input.addEventListener("keydown", (event) => {
+    if (event.key === "Enter") { event.preventDefault(); choose(input.value.trim()); }
+    if (event.key === "Escape") { event.preventDefault(); popup.remove(); anchor.focus(); }
+    event.stopPropagation();
+  });
+  box.append(people, input);
+  popup.append(box);
+  anchor.after(popup);
+  input.focus();
+  let available = [];
+  draw(available);
+  input.addEventListener("input", () => draw(available));
+  const source = globalThis.clay?.people?.available;
+  if (source) Promise.resolve().then(() => source()).then((list) => { if (popup.isConnected) { available = list || []; draw(available); } }).catch(() => {});
+}
+
+function datePicker(view, id, anchor) {
+  const doc = anchor.ownerDocument;
+  const popup = doc.createElement("span");
+  popup.className = "page-check-popup";
+  popup.contentEditable = "false";
+  const input = doc.createElement("input");
+  input.type = "date";
+  input.setAttribute("aria-label", "Due date");
+  input.value = itemAt(view, id)?.node.attrs.due || "";
+  input.addEventListener("change", () => setItem(view, id, "due", input.value));
+  input.addEventListener("keydown", (event) => event.stopPropagation());
+  const clear = chip(doc, "Clear", "Clear due date", "clear-date");
+  clear.addEventListener("click", () => setItem(view, id, "due", null));
+  popup.append(input, clear);
+  anchor.after(popup);
+  input.focus();
+}
+
+function controls(view, node) {
+  const doc = view.dom.ownerDocument;
+  const box = doc.createElement("span");
+  box.className = "page-check-controls";
+  box.contentEditable = "false";
+  box.dataset.empty = String(!node.attrs.owner && !node.attrs.due);
+  const owner = chip(doc, node.attrs.owner || "Assign", node.attrs.owner ? `Owner: ${node.attrs.owner}` : "Assign owner", "owner");
+  const dueLabel = node.attrs.due ? new Date(`${node.attrs.due}T00:00:00Z`).toLocaleDateString("en-US", { month: "short", day: "numeric", timeZone: "UTC" }) : "Date";
+  const date = chip(doc, dueLabel, node.attrs.due ? `Due ${dueLabel}` : "Set due date", "date");
+  owner.addEventListener("click", () => ownerPicker(view, node.attrs.id, owner));
+  date.addEventListener("click", () => datePicker(view, node.attrs.id, date));
+  box.append(owner, date);
+  return box;
+}
+
+function focusControl(view, name) {
+  const $pos = view.state.selection.$head;
+  if ($pos.depth !== 1 || $pos.parent.type !== schema.nodes.list_item || $pos.parent.attrs.kind !== "check") return false;
+  const id = $pos.parent.attrs.id;
+  const widget = [...view.dom.querySelectorAll(".page-check-controls")].find((el) => el.dataset.item === id);
+  const button = widget?.querySelector(`[data-check="${name}"]`);
+  if (!button) return false;
+  button.focus();
+  return true;
+}
+
+export const checklistKeys = new Plugin({
+  props: {
+    handleKeyDown(view, event) {
+      if (!(event.metaKey || event.ctrlKey) || !event.shiftKey || event.altKey) return false;
+      const name = event.key.toLowerCase() === "o" ? "owner" : event.key.toLowerCase() === "d" ? "date" : null;
+      return name ? focusControl(view, name) : false;
+    },
+  },
+});
+
+export function checklistPlugin() {
+  return new Plugin({
+    props: {
+      decorations(st) {
+        const widgets = [];
+        st.doc.forEach((node, pos) => {
+          if (node.type !== schema.nodes.list_item || node.attrs.kind !== "check") return;
+          widgets.push(Decoration.widget(pos + node.nodeSize - 1, (view) => {
+            const box = controls(view, node);
+            box.dataset.item = node.attrs.id;
+            return box;
+          }, { key: `${node.attrs.id}:${node.attrs.owner}:${node.attrs.due}`, side: 1, stopEvent: () => true, ignoreSelection: true }));
+        });
+        return DecorationSet.create(st.doc, widgets);
+      },
+    },
+  });
+}