@nulib/clover 0.0.0-stage → 4.0.0-beta.0

package/dist/components/Canvas/Annotations.mjs

@@ -0,0 +1,497 @@
+"use client";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import React, { useMemo, useRef, useEffect, useCallback, useLayoutEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { annotationTargets, orderKeys, boxAt } from "./track.mjs";
+import { readBodies } from "../../core/annotation-bodies.mjs";
+import { annotationName } from "../../core/annotation-name.mjs";
+import { parseAnnotationTarget } from "../../core/annotations.mjs";
+import { bodiesOf } from "../../core/painting.mjs";
+import { readLink } from "../../core/link.mjs";
+import { parseTime } from "../../core/ranges.mjs";
+import { localize } from "../../core/value.mjs";
+import { Tip } from "../../ui/Tip.mjs";
+import { overlaysOf } from "../../lib/renderer/overlays/OverlayLayer.mjs";
+const isTimed = (annotation) => "start" in annotation;
+const startOf = (annotation) => {
+  var _a, _b;
+  return isTimed(annotation) ? annotation.start : (_b = (_a = annotation.track) == null ? void 0 : _a[0]) == null ? void 0 : _b.start;
+};
+const onAt = (annotation, time) => !annotation.track || boxAt(annotation.track, time) !== null;
+function goToTrack(annotation, media) {
+  if (onAt(annotation, media.currentTime)) return false;
+  media.currentTime = annotation.track[0].start;
+  return true;
+}
+function trackOf(annotation, place, targetIndex) {
+  var _a, _b, _c;
+  const targets = annotationTargets(annotation == null ? void 0 : annotation.target);
+  if (!((_a = targets[0]) == null ? void 0 : _a.rect) || !((_b = targets[0]) == null ? void 0 : _b.t)) return null;
+  const keys = [];
+  for (const target of targets) {
+    const time = parseTime((_c = target.t) == null ? void 0 : _c.replace(/^npt:/, ""));
+    if (!target.rect || !time) continue;
+    const { x, y, w, h } = target.rect;
+    const world = place({ x, y, width: w, height: h }, target.id, targetIndex);
+    if (world)
+      keys.push({ start: time.start, end: time.end ?? Infinity, world });
+  }
+  return keys.length ? orderKeys(keys) : null;
+}
+function pageOf(label, language) {
+  const { text, lang } = localize(label, language);
+  return text ? { page: { text, ...lang ? { lang } : {} } } : {};
+}
+function timeAnnotations(annotations, language) {
+  var _a;
+  const timed = [];
+  for (const { annotation, pageLabel, pageId } of annotations) {
+    const target = parseAnnotationTarget([annotation == null ? void 0 : annotation.target].flat()[0]);
+    const time = parseTime((_a = target == null ? void 0 : target.t) == null ? void 0 : _a.replace(/^npt:/, ""));
+    if (!time || target.rect || target.point || target.svg) continue;
+    const { text, lang } = annotationLabel(annotation, language);
+    timed.push({
+      id: annotation.id,
+      ...text ? { label: text } : {},
+      ...lang ? { lang } : {},
+      ...time,
+      ...pageOf(pageLabel, language),
+      ...pageId ? { pageId } : {}
+    });
+  }
+  return timed;
+}
+const POINT_BOX = 40;
+function placeAnnotations(annotations, place, readSvg = null, language) {
+  var _a;
+  const placed = [];
+  for (const { annotation, targetIndex, pageLabel, pageId } of annotations) {
+    const target = parseAnnotationTarget(annotation == null ? void 0 : annotation.target);
+    if (!target) continue;
+    let rect = null;
+    let shape;
+    const track = trackOf(annotation, place, targetIndex);
+    if (track) {
+      const { x, y, w, h } = target.rect;
+      rect = { x, y, width: w, height: h };
+    } else if (target.rect) {
+      const { x, y, w, h } = target.rect;
+      rect = { x, y, width: w, height: h };
+    } else if (target.point) {
+      const { x, y } = target.point;
+      rect = {
+        x: x - POINT_BOX / 2,
+        y: y - POINT_BOX / 2,
+        width: POINT_BOX,
+        height: POINT_BOX
+      };
+      shape = { kind: "point" };
+    } else if (target.svg && readSvg) {
+      const svg = readSvg(target.svg);
+      if (svg) {
+        rect = svg.box;
+        shape = { kind: "svg", svg };
+      }
+    }
+    if (!rect) continue;
+    const world = track ? track[0].world : place(rect, target.id, targetIndex);
+    if (!world) continue;
+    const { text, lang } = annotationLabel(annotation, language);
+    const link = readLink(annotation);
+    const image = (_a = bodiesOf(annotation).find(
+      (body) => (body == null ? void 0 : body.type) === "Image" && /^https?:\/\//i.test(body.id ?? "")
+    )) == null ? void 0 : _a.id;
+    placed.push({
+      id: annotation.id,
+      label: text,
+      ...lang ? { lang } : {},
+      world,
+      ...shape ? { shape } : {},
+      ...track ? { track } : {},
+      ...link ? { link } : {},
+      ...image ? { image } : {},
+      ...pageOf(pageLabel, language),
+      ...pageId ? { pageId } : {}
+    });
+  }
+  return placed;
+}
+const area = ({ world }) => world.width * world.height;
+const within = (inner, outer) => inner.x >= outer.x && inner.y >= outer.y && inner.x + inner.width <= outer.x + outer.width && inner.y + inner.height <= outer.y + outer.height;
+const unit = (value) => String(Math.round(value * 1e3) / 1e3 || 0);
+function maskUnder(entry, over) {
+  var _a, _b;
+  const a = entry.world;
+  const b = over.world;
+  if (((_a = over.shape) == null ? void 0 : _a.kind) === "point" || b.x >= a.x + a.width || b.x + b.width <= a.x || b.y >= a.y + a.height || b.y + b.height <= a.y)
+    return null;
+  const [w, h] = [a.width, a.height];
+  const [x, y] = [b.x - a.x, b.y - a.y];
+  const view = `${unit(-w / 10)} ${unit(-h / 10)} ${unit(w * 1.2)} ${unit(h * 1.2)}`;
+  const all = `M${unit(-w / 10)} ${unit(-h / 10)}h${unit(w * 1.2)}v${unit(h * 1.2)}h${unit(-w * 1.2)}Z`;
+  let body;
+  if (((_b = over.shape) == null ? void 0 : _b.kind) === "svg") {
+    const { box, shapes } = over.shape.svg;
+    const drawn = shapes.map(
+      ({ tag, attributes }) => `<${tag} ${Object.entries(attributes).map(([name, value]) => `${name}="${value}"`).join(" ")}/>`
+    ).join("");
+    body = `<mask id="m"><path fill="#fff" d="${all}"/><svg x="${unit(x)}" y="${unit(y)}" width="${unit(b.width)}" height="${unit(b.height)}" viewBox="${box.x} ${box.y} ${Math.max(box.width, 1)} ${Math.max(box.height, 1)}" preserveAspectRatio="none" overflow="visible"><g fill="#000">${drawn}</g></svg></mask><path d="${all}" mask="url(#m)"/>`;
+  } else {
+    body = `<path fill-rule="evenodd" d="${all}M${unit(x)} ${unit(y)}h${unit(b.width)}v${unit(b.height)}h${unit(-b.width)}Z"/>`;
+  }
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${view}" preserveAspectRatio="none">${body}</svg>`;
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+const Annotations = ({
+  renderer,
+  placed,
+  sceneVersion,
+  active,
+  selected,
+  onActivate,
+  onSelect,
+  onFollow,
+  media
+}) => {
+  const rank = useMemo(() => {
+    const ranks = /* @__PURE__ */ new Map();
+    [...placed].sort((a, b) => area(b) - area(a)).forEach((entry, index) => ranks.set(entry, index));
+    return ranks;
+  }, [placed]);
+  const current = placed.find((entry) => entry.id === active);
+  const sought = useRef(null);
+  useEffect(() => {
+    const picked = placed.find((entry) => entry.id === selected && entry.track);
+    if (!selected) sought.current = null;
+    if (!picked || !media || sought.current === selected) return;
+    sought.current = selected;
+    goToTrack(picked, media);
+  }, [placed, selected, media]);
+  const depthOf = (entry) => {
+    const own = rank.get(entry) ?? 0;
+    if (!current) return own;
+    if (entry === current) return placed.length;
+    return own > (rank.get(current) ?? 0) && !entry.track && !current.track && within(entry.world, current.world) ? placed.length + 1 + own : own;
+  };
+  const elements = useRef(/* @__PURE__ */ new Map());
+  const now = useRef(/* @__PURE__ */ new Map());
+  const written = useRef(/* @__PURE__ */ new WeakMap());
+  const latest = useRef({ placed, current, depthOf });
+  latest.current = { placed, current, depthOf };
+  const remask = useCallback((only) => {
+    const { placed: placed2, current: current2, depthOf: depthOf2 } = latest.current;
+    const at = (entry) => now.current.get(entry.id);
+    const over = current2 && at(current2) !== null ? current2 : void 0;
+    const apply = (entry) => {
+      const element = elements.current.get(entry.id);
+      if (!element) return;
+      const world = at(entry);
+      const mask = over && entry !== over && world !== null && depthOf2(entry) < placed2.length ? maskUnder(
+        { ...entry, world: world ?? entry.world },
+        { ...over, world: at(over) ?? over.world }
+      ) : null;
+      if ((written.current.get(element) ?? "") === (mask ?? "")) return;
+      written.current.set(element, mask ?? "");
+      if (mask) element.style.setProperty("--clover-annotation-mask", mask);
+      else element.style.removeProperty("--clover-annotation-mask");
+    };
+    if (only && only !== current2) apply(only);
+    else placed2.forEach(apply);
+  }, []);
+  useLayoutEffect(() => remask());
+  const register = useCallback((id, element) => {
+    if (element) elements.current.set(id, element);
+    else elements.current.delete(id);
+  }, []);
+  const moved = useCallback(
+    (entry, world) => {
+      now.current.set(entry.id, world);
+      remask(entry);
+    },
+    [remask]
+  );
+  return createPortal(
+    /* @__PURE__ */ jsx(Fragment, { children: placed.map((entry, index) => /* @__PURE__ */ jsx(
+      AnnotationButton,
+      {
+        entry,
+        name: entry.label ?? String(index + 1),
+        lang: entry.label ? entry.lang : void 0,
+        depth: depthOf(entry),
+        register,
+        onMove: moved,
+        renderer,
+        active: active === entry.id,
+        selected: selected === entry.id,
+        onActivate,
+        onSelect,
+        onFollow,
+        media
+      },
+      `${entry.id}|${sceneVersion}`
+    )) }),
+    overlaysOf(renderer).container
+  );
+};
+let panning;
+const loadPanning = () => panning ?? (panning = import("./panClearOfControls.mjs"));
+const AnnotationButton = ({
+  entry,
+  name,
+  lang,
+  depth,
+  register,
+  onMove,
+  renderer,
+  active,
+  selected,
+  onActivate,
+  onSelect,
+  onFollow,
+  media
+}) => {
+  var _a, _b, _c;
+  const [element, setElement] = useState(null);
+  const { id } = entry;
+  const attach = useCallback(
+    (node) => {
+      setElement(node);
+      register(id, node);
+    },
+    [id, register]
+  );
+  const { x, y, width, height } = entry.world;
+  useEffect(() => {
+    if (!element) return;
+    const unpin = overlaysOf(renderer).add(element, { x, y, width, height });
+    renderer.invalidate();
+    return unpin;
+  }, [element, renderer, x, y, width, height]);
+  const shown = useFollow(
+    element,
+    entry.track,
+    renderer,
+    media,
+    () => onActivate(null),
+    (world) => onMove(entry, world)
+  );
+  const { link } = entry;
+  const web = link && !link.canvasId && !link.manifestId ? link.id : void 0;
+  const follow = link && !web && onFollow ? () => onFollow(entry) : void 0;
+  const Hotspot = web ? "a" : "button";
+  return /* @__PURE__ */ jsxs(
+    Hotspot,
+    {
+      ref: attach,
+      ...web ? { href: web, target: "_blank", rel: "noopener noreferrer" } : { type: "button" },
+      id: entry.id,
+      className: "clover-canvas-annotation",
+      hidden: !shown,
+      "data-active": active ? "true" : "false",
+      "data-shape": ((_a = entry.shape) == null ? void 0 : _a.kind) ?? "rect",
+      "data-track": entry.track ? "" : void 0,
+      "data-link": web || follow ? "true" : void 0,
+      "aria-label": name,
+      "aria-current": selected ? "true" : void 0,
+      lang,
+      style: {
+        "--clover-annotation-depth": depth
+      },
+      onMouseEnter: () => onActivate(entry.id),
+      onMouseLeave: () => onActivate(null),
+      onFocus: () => {
+        onActivate(entry.id);
+        void loadPanning();
+      },
+      onKeyUp: (event) => {
+        if (event.key !== "Tab") return;
+        const hotspot = event.currentTarget;
+        void loadPanning().then(({ panClearOfControls }) => {
+          if (document.activeElement === hotspot)
+            panClearOfControls(renderer, hotspot);
+        });
+      },
+      onBlur: () => onActivate(null),
+      onKeyDown: scrollNote,
+      onClick: (event) => {
+        event.stopPropagation();
+        if (web) return;
+        if (follow) follow();
+        else onSelect(entry);
+      },
+      children: [
+        ((_b = entry.shape) == null ? void 0 : _b.kind) === "point" && /* @__PURE__ */ jsx("span", { className: "clover-canvas-annotation-point", "aria-hidden": "true" }),
+        ((_c = entry.shape) == null ? void 0 : _c.kind) === "svg" && /* @__PURE__ */ jsx(ShapeOutline, { svg: entry.shape.svg }),
+        /* @__PURE__ */ jsx(Tip, { label: name, scrolls: true, image: entry.image })
+      ]
+    }
+  );
+};
+function useFollow(element, track, renderer, media, onGone, onMove) {
+  const follows = Boolean(track) && media !== void 0;
+  const [shown, setShown] = useState(
+    () => !follows || (media ? boxAt(track, media.currentTime) !== null : false)
+  );
+  const onGoneRef = useRef(onGone);
+  onGoneRef.current = onGone;
+  const onMoveRef = useRef(onMove);
+  onMoveRef.current = onMove;
+  useEffect(() => {
+    if (!track || media === void 0) {
+      setShown(true);
+      return;
+    }
+    if (!media) {
+      setShown(false);
+      return;
+    }
+    let last;
+    const update = (time) => {
+      var _a, _b, _c;
+      const box = boxAt(track, time);
+      if (box && element) (_a = renderer.overlays) == null ? void 0 : _a.move(element, box);
+      onMoveRef.current(box);
+      const now2 = box !== null;
+      if (now2 === last) return;
+      last = now2;
+      if (!now2 && element) {
+        const hovered = element.matches(":hover");
+        if (element.contains(document.activeElement)) {
+          (_c = (_b = renderer.overlays) == null ? void 0 : _b.container.parentElement) == null ? void 0 : _c.focus({
+            preventScroll: true
+          });
+        } else if (hovered) onGoneRef.current();
+      }
+      setShown(now2);
+    };
+    const video = media;
+    const byFrame = () => typeof video.requestVideoFrameCallback === "function" && video.videoWidth > 0;
+    let frame = 0;
+    let videoFrame = 0;
+    const onVideoFrame = (_, { mediaTime }) => {
+      update(mediaTime);
+      videoFrame = video.requestVideoFrameCallback(onVideoFrame);
+    };
+    const tick = () => {
+      update(media.currentTime);
+      frame = requestAnimationFrame(tick);
+    };
+    const stop = () => {
+      cancelAnimationFrame(frame);
+      if (videoFrame) video.cancelVideoFrameCallback(videoFrame);
+      frame = videoFrame = 0;
+    };
+    const start = () => {
+      stop();
+      if (byFrame()) videoFrame = video.requestVideoFrameCallback(onVideoFrame);
+      else frame = requestAnimationFrame(tick);
+    };
+    const now = () => update(media.currentTime);
+    const paused = () => media.paused && now();
+    const halt = () => {
+      stop();
+      now();
+    };
+    const events = [
+      ["play", start],
+      ["pause", halt],
+      ["ended", halt],
+      ["seeking", now],
+      ["seeked", now],
+      ["loadeddata", now],
+      ["timeupdate", paused]
+    ];
+    events.forEach(
+      ([type, listener]) => media.addEventListener(type, listener)
+    );
+    now();
+    if (!media.paused) start();
+    return () => {
+      stop();
+      events.forEach(
+        ([type, listener]) => media.removeEventListener(type, listener)
+      );
+    };
+  }, [element, track, media, renderer]);
+  return shown;
+}
+const ShapeOutline = ({ svg }) => {
+  const { x, y, width, height } = svg.box;
+  const shapes = svg.shapes.map(
+    ({ tag, attributes }, index) => React.createElement(tag, {
+      key: index,
+      ...attributes,
+      vectorEffect: "non-scaling-stroke"
+    })
+  );
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "clover-canvas-annotation-shape",
+      viewBox: `${x} ${y} ${Math.max(width, 1)} ${Math.max(height, 1)}`,
+      preserveAspectRatio: "none",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx("g", { children: shapes }),
+        /* @__PURE__ */ jsx("g", { children: shapes }),
+        /* @__PURE__ */ jsx("g", { children: shapes })
+      ]
+    }
+  );
+};
+function annotationLabel(annotation, language) {
+  return annotationName(readBodies(annotation), language);
+}
+const SCROLL_KEYS = {
+  ArrowDown: () => 32,
+  ArrowUp: () => -32,
+  PageDown: (tip) => tip.clientHeight - 32,
+  PageUp: (tip) => 32 - tip.clientHeight,
+  End: (tip) => tip.scrollHeight,
+  Home: (tip) => -tip.scrollHeight
+};
+function scrollNote(event) {
+  const tip = event.currentTarget.querySelector(
+    ":scope > .clover-tip"
+  );
+  const by = SCROLL_KEYS[event.key];
+  if (!tip || !by || event.altKey || event.ctrlKey || event.metaKey)
+    return false;
+  const delta = by(tip);
+  const room = delta > 0 ? tip.scrollHeight - tip.clientHeight - tip.scrollTop : tip.scrollTop;
+  if (room < 1) return false;
+  event.preventDefault();
+  tip.scrollBy({ top: delta });
+  return true;
+}
+function wholeCanvasComments(annotations, canvases) {
+  const byCanvas = /* @__PURE__ */ new Map();
+  for (const { annotation, targetIndex } of annotations ?? []) {
+    const target = parseAnnotationTarget(
+      [annotation == null ? void 0 : annotation.target].flat()[0]
+    );
+    if (target.rect || target.point || target.svg || target.t) continue;
+    if (!bodiesOf(annotation).some(
+      (body) => typeof (body == null ? void 0 : body.value) === "string" || (body == null ? void 0 : body.type) === "Image"
+    ))
+      continue;
+    const canvas = (canvases == null ? void 0 : canvases.find((each) => each.id === target.id)) ?? (target.id ? void 0 : canvases == null ? void 0 : canvases[targetIndex]);
+    if (!canvas) continue;
+    byCanvas.set(canvas.id, [...byCanvas.get(canvas.id) ?? [], annotation]);
+  }
+  return byCanvas;
+}
+export {
+  annotationLabel,
+  Annotations as default,
+  goToTrack,
+  isTimed,
+  maskUnder,
+  onAt,
+  placeAnnotations,
+  scrollNote,
+  startOf,
+  timeAnnotations,
+  wholeCanvasComments
+};