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

package/dist/components/Canvas/AnnotationMenu.mjs

@@ -0,0 +1,128 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { createElement } from "react";
+import { startOf } from "./Annotations.mjs";
+import ControlMenu from "./ControlMenu.mjs";
+import { CueTime } from "../../ui/Cue.mjs";
+import { HideToggle } from "../../ui/HideToggle.mjs";
+import { useContainerName } from "../../ui/useContainerName.mjs";
+const AnnotationMenu = ({
+  id,
+  triggerId,
+  label,
+  labelLang,
+  annotations,
+  hiddenPages = [],
+  onPageVisibilityChange,
+  selected,
+  onSelect,
+  onActivate,
+  onClose
+}) => {
+  const name = useContainerName(label, labelLang);
+  const groups = [];
+  annotations.forEach((annotation, index) => {
+    var _a, _b;
+    const last = groups[groups.length - 1];
+    if (last && ((_a = last.page) == null ? void 0 : _a.text) === ((_b = annotation.page) == null ? void 0 : _b.text))
+      last.items.push(index);
+    else groups.push({ page: annotation.page, items: [index] });
+  });
+  const unlabeled = groups.some((group) => !group.page);
+  return /* @__PURE__ */ jsxs(
+    ControlMenu,
+    {
+      className: "clover-canvas-annotation-menu",
+      "data-testid": "clover-canvas-annotation-menu",
+      id,
+      onClose,
+      triggerId,
+      children: [
+        unlabeled && name.node,
+        groups.map((group, g) => {
+          const pageIds = [
+            ...new Set(
+              group.items.flatMap((index) => annotations[index].pageId ?? [])
+            )
+          ];
+          const labelId = `${id}-page-${g}`;
+          const toggle = onPageVisibilityChange && pageIds.length > 0 && /* @__PURE__ */ jsx(
+            HideToggle,
+            {
+              hidden: pageIds.every((page) => hiddenPages.includes(page)),
+              onChange: (hide) => onPageVisibilityChange(pageIds, !hide),
+              of: group.page ? labelId : void 0
+            }
+          );
+          return /* @__PURE__ */ createElement(
+            "fieldset",
+            {
+              ...group.page ? { "aria-labelledby": labelId } : name.props,
+              className: "clover-canvas-menu-group clover-annotations-set",
+              key: g
+            },
+            group.page ? /* @__PURE__ */ jsxs("legend", { className: "clover-canvas-menu-legend clover-annotations-set-header", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "clover-annotations-title",
+                  id: labelId,
+                  lang: group.page.lang,
+                  children: group.page.text
+                }
+              ),
+              toggle
+            ] }) : toggle && /* @__PURE__ */ jsx("div", { className: "clover-annotations-set-header", children: toggle }),
+            /* @__PURE__ */ jsx("div", { className: "clover-annotations-list", children: group.items.map((index) => {
+              const annotation = annotations[index];
+              const start = startOf(annotation);
+              const picked = selected === annotation.id;
+              return /* @__PURE__ */ jsxs(
+                "label",
+                {
+                  className: "clover-canvas-menu-item clover-annotations-entry",
+                  "data-selected": picked,
+                  onMouseEnter: () => onActivate(annotation.id),
+                  onMouseLeave: () => onActivate(null),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "radio",
+                        name: id,
+                        checked: picked,
+                        onChange: () => onSelect(annotation),
+                        onClick: () => picked && onSelect(annotation),
+                        onFocus: () => onActivate(annotation.id),
+                        onBlur: () => onActivate(null)
+                      }
+                    ),
+                    start !== void 0 && /* @__PURE__ */ jsx(
+                      CueTime,
+                      {
+                        start,
+                        className: "clover-annotations-time"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "clover-annotations-body clover-cue-text",
+                        lang: annotation.label ? annotation.lang : void 0,
+                        children: annotation.label ?? String(index + 1)
+                      }
+                    )
+                  ]
+                },
+                annotation.id
+              );
+            }) })
+          );
+        })
+      ]
+    }
+  );
+};
+export {
+  AnnotationMenu as default
+};

package/dist/components/Canvas/AnnotationState.mjs

@@ -0,0 +1,338 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useMemo, useCallback, useRef, useEffect, useLayoutEffect } from "react";
+import Annotations, { wholeCanvasComments, placeAnnotations, goToTrack, timeAnnotations } from "./Annotations.mjs";
+import { canvasRectToWorld } from "./layout.mjs";
+import { useSvgReader } from "./useSvgReader.mjs";
+import { isRegionText, parseAnnotationTarget } from "../../core/annotations.mjs";
+import { playFrom } from "../../lib/time.mjs";
+const NO_PAGES = [];
+function AnnotationState({
+  given,
+  annotations: allAnnotations,
+  scene,
+  renderer,
+  sceneVersion,
+  drawn,
+  media,
+  mediaElement,
+  showPlaceholder,
+  canvasKey,
+  openImages,
+  openMedia,
+  host,
+  onModel
+}) {
+  const {
+    canvases,
+    language,
+    hiddenPages: hiddenPagesProp,
+    unlistedPages: unlistedPagesProp,
+    onPageVisibilityChange,
+    onAnnotationActive,
+    selectedAnnotation: selectedAnnotationProp,
+    animateAnnotations = false,
+    highlightedAnnotation,
+    onAnnotationSelect,
+    onAnnotationLink
+  } = given;
+  const [ownHiddenPages, setOwnHiddenPages] = useState([]);
+  const [ownShownPages, setOwnShownPages] = useState([]);
+  const controlledPages = hiddenPagesProp !== void 0;
+  const ownQuietPages = useMemo(() => {
+    var _a;
+    if (controlledPages) return NO_PAGES;
+    const quiet = /* @__PURE__ */ new Map();
+    for (const each of allAnnotations) {
+      if (!each.pageId) continue;
+      const still = !(Number((_a = canvases == null ? void 0 : canvases[each.targetIndex]) == null ? void 0 : _a.duration) > 0);
+      const supplements = still && isRegionText(
+        each.annotation.motivation,
+        parseAnnotationTarget(
+          Array.isArray(each.annotation.target) ? each.annotation.target[0] : each.annotation.target
+        )
+      );
+      quiet.set(each.pageId, (quiet.get(each.pageId) ?? true) && supplements);
+    }
+    const ids = [...quiet].filter(([, on]) => on).map(([id]) => id);
+    return ids.length ? ids : NO_PAGES;
+  }, [controlledPages, allAnnotations, canvases]);
+  const ownPages = useMemo(() => {
+    const quiet = ownQuietPages.filter(
+      (id) => !ownShownPages.includes(id) && !ownHiddenPages.includes(id)
+    );
+    return quiet.length ? [...ownHiddenPages, ...quiet] : ownHiddenPages;
+  }, [ownHiddenPages, ownShownPages, ownQuietPages]);
+  const hiddenPages = hiddenPagesProp ?? ownPages;
+  const unlistedPages = unlistedPagesProp ?? ownQuietPages;
+  const listed = useCallback(
+    (list) => unlistedPages.length ? list.filter(
+      (each) => !each.pageId || !unlistedPages.includes(each.pageId)
+    ) : list,
+    [unlistedPages]
+  );
+  const listedCount = useMemo(
+    () => listed(allAnnotations).length,
+    [allAnnotations, listed]
+  );
+  const shown = useCallback(
+    (list) => hiddenPages.length ? list.filter(
+      (each) => !each.pageId || !hiddenPages.includes(each.pageId)
+    ) : list,
+    [hiddenPages]
+  );
+  const onPageVisibilityRef = useRef(onPageVisibilityChange);
+  onPageVisibilityRef.current = onPageVisibilityChange;
+  const setPagesVisible = useCallback(
+    (pageIds, visible) => {
+      var _a;
+      (_a = onPageVisibilityRef.current) == null ? void 0 : _a.call(onPageVisibilityRef, pageIds, visible);
+      if (controlledPages) return;
+      setOwnHiddenPages((hidden) => {
+        const rest = hidden.filter((id) => !pageIds.includes(id));
+        return visible ? rest : [...rest, ...pageIds];
+      });
+      setOwnShownPages((shown2) => {
+        const rest = shown2.filter((id) => !pageIds.includes(id));
+        return visible ? [...rest, ...pageIds] : rest;
+      });
+    },
+    [controlledPages]
+  );
+  const comments = useMemo(
+    () => wholeCanvasComments(shown(allAnnotations), canvases),
+    [allAnnotations, shown, canvases]
+  );
+  const placeAnnotation = useMemo(() => {
+    if (!scene || !canvases) return void 0;
+    return (rect, targetId, targetIndex) => {
+      const found = canvases.findIndex((canvas) => canvas.id === targetId);
+      const index = found === -1 ? targetIndex : found;
+      const placement = scene.placements[index];
+      return placement ? canvasRectToWorld(canvases[index], placement, rect) : null;
+    };
+  }, [scene, canvases]);
+  const readSvg = useSvgReader(allAnnotations);
+  const allPlaced = useMemo(
+    () => renderer && sceneVersion > 0 && drawn ? placeAnnotations(
+      allAnnotations,
+      placeAnnotation ?? ((rect, _, targetIndex) => renderer.itemRectToWorld(targetIndex, rect)),
+      readSvg,
+      language
+    ) : [],
+    [
+      renderer,
+      allAnnotations,
+      sceneVersion,
+      drawn,
+      placeAnnotation,
+      readSvg,
+      language
+    ]
+  );
+  const placedAnnotations = useMemo(() => shown(allPlaced), [allPlaced, shown]);
+  const listedAnnotations = useMemo(
+    () => allPlaced.length || !placeAnnotation ? allPlaced : placeAnnotations(allAnnotations, placeAnnotation, readSvg, language),
+    [allPlaced, placeAnnotation, allAnnotations, readSvg, language]
+  );
+  const [hoveredAnnotation, setHoveredAnnotation] = useState(
+    null
+  );
+  const [ownSelected, setOwnSelected] = useState(null);
+  const controlledSelection = selectedAnnotationProp !== void 0;
+  const selectedAnnotation = controlledSelection ? selectedAnnotationProp : ownSelected;
+  const framed = useRef(null);
+  const onAnnotationActiveRef = useRef(onAnnotationActive);
+  onAnnotationActiveRef.current = onAnnotationActive;
+  const onAnnotationSelectRef = useRef(onAnnotationSelect);
+  onAnnotationSelectRef.current = onAnnotationSelect;
+  const activateAnnotation = useCallback((id) => {
+    var _a;
+    setHoveredAnnotation(id);
+    (_a = onAnnotationActiveRef.current) == null ? void 0 : _a.call(onAnnotationActiveRef, id);
+  }, []);
+  const glide = useRef(animateAnnotations);
+  glide.current = animateAnnotations;
+  const held = useRef(false);
+  held.current = showPlaceholder;
+  const mediaElementRef = useRef(mediaElement);
+  mediaElementRef.current = mediaElement;
+  const rendererRef = useRef(renderer);
+  rendererRef.current = renderer;
+  const sought = useRef(null);
+  const hiddenPagesRef = useRef(hiddenPages);
+  hiddenPagesRef.current = hiddenPages;
+  const setPagesVisibleRef = useRef(setPagesVisible);
+  setPagesVisibleRef.current = setPagesVisible;
+  const selectAnnotation = useCallback((annotation) => {
+    var _a, _b, _c;
+    if (annotation.pageId && hiddenPagesRef.current.includes(annotation.pageId))
+      setPagesVisibleRef.current([annotation.pageId], true);
+    setOwnSelected(annotation.id);
+    (_a = onAnnotationActiveRef.current) == null ? void 0 : _a.call(onAnnotationActiveRef, annotation.id);
+    (_b = onAnnotationSelectRef.current) == null ? void 0 : _b.call(onAnnotationSelectRef, annotation.id);
+    if (held.current) return;
+    if ("start" in annotation) {
+      const element = mediaElementRef.current;
+      if (!element) return;
+      sought.current = annotation.id;
+      playFrom(element, annotation.start);
+      return;
+    }
+    framed.current = annotation.id;
+    if (annotation.track) {
+      const element = mediaElementRef.current;
+      if (element && goToTrack(annotation, element))
+        sought.current = annotation.id;
+      return;
+    }
+    (_c = rendererRef.current) == null ? void 0 : _c.fitAnnotation(annotation.world, !glide.current);
+  }, []);
+  const selectedRef = useRef(selectedAnnotation);
+  selectedRef.current = selectedAnnotation;
+  const releaseAnnotation = useCallback(() => {
+    var _a;
+    if (!selectedRef.current) return false;
+    setOwnSelected(null);
+    framed.current = null;
+    (_a = onAnnotationSelectRef.current) == null ? void 0 : _a.call(onAnnotationSelectRef, null);
+    return true;
+  }, []);
+  const onAnnotationLinkRef = useRef(onAnnotationLink);
+  onAnnotationLinkRef.current = onAnnotationLink;
+  const canFollow = Boolean(onAnnotationLink);
+  const followLink = useMemo(
+    () => canFollow ? (annotation) => {
+      var _a, _b;
+      (_a = host.current) == null ? void 0 : _a.focus({ preventScroll: true });
+      releaseAnnotation();
+      if (annotation.link) (_b = onAnnotationLinkRef.current) == null ? void 0 : _b.call(onAnnotationLinkRef, annotation.link);
+    } : void 0,
+    [canFollow, releaseAnnotation, host]
+  );
+  useEffect(() => {
+    if (!selectedAnnotation) {
+      framed.current = null;
+      return;
+    }
+    if (framed.current === selectedAnnotation) return;
+    const find = (list) => list.find((annotation) => annotation.id === selectedAnnotation);
+    const drawnOne = find(placedAnnotations);
+    const placed = drawnOne ?? find(allPlaced);
+    if (!placed) return;
+    framed.current = placed.id;
+    if (placed.track) {
+      if (!drawnOne && mediaElement) goToTrack(placed, mediaElement);
+      return;
+    }
+    renderer == null ? void 0 : renderer.fitAnnotation(placed.world, !glide.current);
+  }, [
+    selectedAnnotation,
+    placedAnnotations,
+    allPlaced,
+    mediaElement,
+    renderer
+  ]);
+  const allTimed = useMemo(
+    () => media ? timeAnnotations(allAnnotations, language) : [],
+    [media, allAnnotations, language]
+  );
+  const timedAnnotations = useMemo(() => shown(allTimed), [allTimed, shown]);
+  const menuAnnotations = useMemo(
+    () => listed(
+      allTimed.length ? [...listedAnnotations, ...allTimed] : listedAnnotations
+    ),
+    [listedAnnotations, allTimed, listed]
+  );
+  useEffect(() => {
+    if (!selectedAnnotation) {
+      sought.current = null;
+      return;
+    }
+    if (sought.current === selectedAnnotation || !mediaElement) return;
+    const timed = timedAnnotations.find(
+      (annotation) => annotation.id === selectedAnnotation
+    );
+    if (!timed) return;
+    sought.current = timed.id;
+    mediaElement.currentTime = timed.start;
+  }, [selectedAnnotation, timedAnnotations, mediaElement]);
+  const pendingPick = useRef(null);
+  const [quietlyOpened, setQuietlyOpened] = useState(null);
+  useEffect(() => {
+    pendingPick.current = selectedAnnotation ?? null;
+  }, [selectedAnnotation]);
+  useEffect(() => {
+    const id = pendingPick.current;
+    if (!id || !allAnnotations.some((each) => {
+      var _a;
+      return ((_a = each.annotation) == null ? void 0 : _a.id) === id;
+    }))
+      return;
+    pendingPick.current = null;
+    if (!showPlaceholder) return;
+    if (!media) {
+      openImages(true);
+      return;
+    }
+    openMedia(canvasKey);
+    setQuietlyOpened(canvasKey);
+  }, [
+    selectedAnnotation,
+    allAnnotations,
+    showPlaceholder,
+    media,
+    canvasKey,
+    openImages,
+    openMedia
+  ]);
+  const model = useMemo(
+    () => ({
+      menu: menuAnnotations,
+      placed: placedAnnotations,
+      timed: timedAnnotations,
+      hiddenPages,
+      setPagesVisible,
+      listedCount,
+      comments,
+      selected: selectedAnnotation ?? null,
+      select: selectAnnotation,
+      activate: activateAnnotation,
+      release: releaseAnnotation,
+      quietlyOpened
+    }),
+    [
+      menuAnnotations,
+      placedAnnotations,
+      timedAnnotations,
+      hiddenPages,
+      setPagesVisible,
+      listedCount,
+      comments,
+      selectedAnnotation,
+      selectAnnotation,
+      activateAnnotation,
+      releaseAnnotation,
+      quietlyOpened
+    ]
+  );
+  useLayoutEffect(() => onModel(model), [model, onModel]);
+  useLayoutEffect(() => () => onModel(null), [onModel]);
+  return renderer && sceneVersion > 0 && !showPlaceholder ? /* @__PURE__ */ jsx(
+    Annotations,
+    {
+      renderer,
+      placed: placedAnnotations,
+      sceneVersion,
+      active: hoveredAnnotation ?? highlightedAnnotation ?? selectedAnnotation,
+      selected: selectedAnnotation,
+      onActivate: activateAnnotation,
+      onSelect: selectAnnotation,
+      onFollow: followLink,
+      media: media ? mediaElement : void 0
+    }
+  ) : null;
+}
+export {
+  AnnotationState
+};