@heycys/gallery 0.0.0-stage → 0.1.0

package/browser/editor/page/drag/preview.mjs

@@ -0,0 +1,121 @@
+import { Z } from "../../../shared/layers.mjs";
+import { DIALOG } from "../../components/kit.mjs";
+import { withLeads } from "../core.mjs";
+import { own } from "../overlays.mjs";
+import { element, mount } from "../ui.mjs";
+
+// The picture of the blocks being dragged (docs/editor.md, "Moving blocks"), as Notion's: a copy of
+// each, faded, where it stands on the page when the drag starts, moving with the pointer by as much
+// as the pointer moves. The copies live in a shadow root of their own, so nothing of the page ever
+// meets them: not the editor's map and the commit's scans, not the kit's scripts, not the page's ids
+// (theirs stay theirs, a chart's gradients among them). The page's own rules are brought in as one
+// stylesheet (made once, applied at once: no unstyled first frame), and each copy stands in a frame
+// of its ancestors as the page has them (shallow copies, display: contents), so a list item keeps its
+// marker and its number, and a section's paragraph its section's look. At most MAX blocks, each at
+// most TALL of the window (cut, fading out at the bottom).
+
+const MAX = 12;
+const TALL = 0.6;
+const INSIDE = `
+  .ge-copy { box-sizing: border-box; pointer-events: none; }
+  .ge-copy.ge-cut { overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); }
+`;
+const OUTSIDE = `
+  .ge-drag-preview { position: fixed; inset: 0; overflow: visible; z-index: ${Z.preview}; opacity: .4; pointer-events: none; }
+`;
+
+// The page's rules as one stylesheet, made again only when the page has more or fewer sheets (the
+// editor adds its own as its tools start). Rules that cannot go into a shadow root's sheet are left
+// out: @import (none in the kit) and @font-face (the page's fonts are the page's already).
+let rules = null; // { count, sheet }
+function pageSheet() {
+  const count = document.styleSheets.length;
+  if (rules?.count === count) return rules.sheet;
+  const text = [];
+  for (const sheet of document.styleSheets) {
+    let list;
+    try {
+      list = sheet.cssRules;
+    } catch {
+      continue; // another origin's
+    }
+    for (const rule of list) if (!(rule instanceof CSSImportRule) && !(rule instanceof CSSFontFaceRule)) text.push(rule.cssText);
+  }
+  text.push(INSIDE);
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(text.join("\n"));
+  rules = { count, sheet };
+  return sheet;
+}
+
+// What a copy must not carry: the drag's own marks, a caret to take, media that would play.
+function clean(node) {
+  for (const each of [node, ...node.querySelectorAll("*")]) {
+    each.removeAttribute("data-ge-dragging");
+    each.removeAttribute("contenteditable");
+    each.removeAttribute("autofocus");
+  }
+  node.querySelectorAll("iframe, video, audio, object, embed").forEach((media) => media.remove());
+  return node;
+}
+
+// `part` copied, standing in shallow copies of its ancestors up to the page (or the dialog's
+// content), at `rect` (window coordinates, where it is now).
+function copyOf(part, rect, top) {
+  const copy = clean(part.cloneNode(true));
+  copy.classList.add("ge-copy");
+  // An ordered list's item keeps its number.
+  const list = part.parentElement;
+  if (part.localName === "li" && list?.localName === "ol") {
+    const items = [...list.children].filter((child) => child.localName === "li");
+    copy.setAttribute("value", String((Number(list.getAttribute("start")) || 1) + items.indexOf(part)));
+  }
+  const cut = rect.height > innerHeight * TALL;
+  if (cut) copy.classList.add("ge-cut");
+  // Its own size, as it was on the page: no share of a row or of its box (the window is the box here); inline, so the page's rules for the block cannot undo it.
+  Object.assign(copy.style, {
+    position: "absolute", margin: "0", maxWidth: "none", minWidth: "0", maxHeight: "none", flex: "none",
+    left: `${rect.left}px`, top: `${rect.top}px`, width: `${rect.width}px`,
+    height: `${cut ? Math.round(innerHeight * TALL) : rect.height}px`,
+  });
+  let outer = copy;
+  for (let node = part.parentElement; node && node !== top.parentElement; node = node.parentElement) {
+    const shell = clean(node.cloneNode(false));
+    shell.style.display = "contents";
+    shell.append(outer);
+    outer = shell;
+  }
+  outer.setAttribute("data-ge-editing", ""); // the editor's own rules for blocks being edited apply
+  return outer;
+}
+
+/**
+ * The picture of `targets` (blocks, in page order) for a drag starting at the pointer (`x`, `y`):
+ * { node, move(x, y) }; it belongs to the drag (`alive`, overlays.mjs) and goes with node.remove().
+ */
+export function createPreview(targets, x, y, { owner, alive }) {
+  if (!document.querySelector("style[data-ge-drag-preview]")) {
+    const style = element("style", { text: OUTSIDE, "data-ge-drag-preview": "" });
+    style.dataset.docDev = "";
+    document.head.append(style);
+  }
+  const node = own(element("div", { class: "ge-drag-preview" }), "drag preview", { owner, alive });
+  const root = node.attachShadow({ mode: "open" });
+  root.adoptedStyleSheets = [pageSheet()];
+  for (const target of targets.slice(0, MAX)) {
+    const top = target.closest(DIALOG.openContent) ?? target.closest("main") ?? target.parentElement;
+    for (const part of withLeads(target)) {
+      const rect = part.getBoundingClientRect();
+      if (rect.width === 0 && rect.height === 0) continue;
+      root.append(copyOf(part, rect, top));
+    }
+  }
+  mount(node);
+  return {
+    node,
+    /** The pointer is at `left`, `top`: the copies go with it. */
+    move(left, top) {
+      node.style.transform = `translate(${Math.round(left - x)}px, ${Math.round(top - y)}px)`;
+    },
+  };
+}

package/browser/editor/page/edge-scroll.mjs

@@ -0,0 +1,50 @@
+import { task } from "./frames.mjs";
+
+// What scrolls when the pointer of a press gesture nears the top or bottom edge of what it works in
+// (docs/editor.md, "Selecting blocks"): dragging blocks, drawing a box selection, selecting text across
+// blocks. One rule for the three, and one driver: edgeScroll() scrolls once and says whether
+// anything moved; the box selection and the text selection are tasks of the editor's frames
+// (edgeFollower, frames.mjs: no loop of their own), and a drag calls edgeScroll from the block
+// tools' task, which already runs on every frame of a drag. What scrolls is the gesture's: the
+// content of the detail card it started in (the one on top when one was opened from another, never
+// the card under it), else the window.
+
+const EDGE = 56; // how near the edge of what scrolls the pointer is when it starts to
+
+/**
+ * Scroll `scroller` (a detail card's content; null: the window) when the pointer at (x, y) is
+ * within EDGE of its top or bottom edge, faster the nearer the edge. Returns whether it moved.
+ */
+export function edgeScroll(x, y, scroller = null) {
+  const content = scroller?.isConnected ? scroller : null;
+  const rect = content ? content.getBoundingClientRect() : { top: 0, bottom: innerHeight };
+  const step = Math.round(y < rect.top + EDGE ? -(rect.top + EDGE - y) / 3 : y > rect.bottom - EDGE ? (y - rect.bottom + EDGE) / 3 : 0);
+  if (!step) return false;
+  if (content) {
+    const was = content.scrollTop;
+    content.scrollTop += step;
+    return content.scrollTop !== was;
+  }
+  const was = scrollY;
+  scrollBy(0, step);
+  return scrollY !== was;
+}
+
+/**
+ * A task of the editor's frames that scrolls near the edge for a gesture, on each frame from its
+ * wake() until `pointer()` gives null (the gesture is over). pointer(): where the pointer is, { x, y };
+ * scroller(): what the gesture scrolls (a card's content, null: the window); scrolled(): what to do
+ * once a frame has scrolled (the box or the selection follows what came into view); fail(): the
+ * gesture goes when the task throws (frames.mjs).
+ */
+export function edgeFollower(name, { pointer, scroller, scrolled, fail }) {
+  return task(name, {
+    run() {
+      const at = pointer();
+      if (!at) return false;
+      if (edgeScroll(at.x, at.y, scroller())) scrolled();
+      return true;
+    },
+    fail,
+  });
+}