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

package/dist/components/Root/useRootState.mjs

@@ -0,0 +1,188 @@
+"use client";
+import { useRef, useState, useEffect, useMemo, useSyncExternalStore } from "react";
+import { createClover } from "../../core/clover.mjs";
+import { requestKey } from "../../core/request.mjs";
+import { sameRenderers } from "../Body/renderers.mjs";
+function useRootState({
+  iiifContent,
+  canvasId,
+  defaultCanvasId,
+  onCanvasChange,
+  onStatusChange,
+  manifestId,
+  defaultManifestId,
+  onManifestChange,
+  searchQuery,
+  request,
+  language,
+  renderers,
+  annotations,
+  annotationPages = "view",
+  onContentStateChange,
+  ...rest
+}) {
+  const controlled = canvasId !== void 0;
+  const manifestControlled = manifestId !== void 0;
+  const latest = useRef({
+    controlled,
+    manifestControlled,
+    onCanvasChange,
+    onStatusChange,
+    onManifestChange
+  });
+  latest.current = {
+    controlled,
+    manifestControlled,
+    onCanvasChange,
+    onStatusChange,
+    onManifestChange
+  };
+  const [clover] = useState(
+    () => createClover({
+      request,
+      onCanvasChange: (id) => {
+        var _a, _b;
+        return (_b = (_a = latest.current).onCanvasChange) == null ? void 0 : _b.call(_a, id);
+      },
+      onManifestChange: (id) => {
+        var _a, _b;
+        return (_b = (_a = latest.current).onManifestChange) == null ? void 0 : _b.call(_a, id);
+      },
+      isControlled: () => latest.current.controlled,
+      isManifestControlled: () => latest.current.manifestControlled
+    })
+  );
+  clover.setRequest(request);
+  const initial = useRef({});
+  initial.current = {
+    canvasId,
+    defaultCanvasId,
+    manifestId: manifestId ?? defaultManifestId
+  };
+  const requestSettings = requestKey(request);
+  const content = useRef(iiifContent);
+  content.current = iiifContent;
+  const key = contentKey(iiifContent);
+  useEffect(() => {
+    void clover.load(content.current, initial.current);
+    return () => clover.dispose();
+  }, [clover, key, requestSettings]);
+  useEffect(() => {
+    if (controlled) clover.syncCanvas(canvasId ?? null);
+  }, [clover, controlled, canvasId]);
+  const [status, setStatus] = useState(clover.store.get().status);
+  useEffect(() => {
+    let last = clover.store.get().status;
+    return clover.store.subscribe(() => {
+      var _a, _b;
+      const { status: next, error } = clover.store.get();
+      if (next === last) return;
+      last = next;
+      setStatus(next);
+      (_b = (_a = latest.current).onStatusChange) == null ? void 0 : _b.call(_a, next, error);
+    });
+  }, [clover]);
+  const annotationsRef = useRef(annotations);
+  annotationsRef.current = annotations;
+  const annotationsKey = annotationsInputKey(annotations);
+  useEffect(() => {
+    void clover.loadAnnotations(annotationsRef.current ?? null);
+  }, [clover, annotationsKey, requestSettings]);
+  useEffect(() => {
+    clover.setAnnotationPages(annotationPages);
+  }, [clover, annotationPages]);
+  useContentStateOutput(clover, onContentStateChange);
+  useEffect(() => {
+    if (manifestControlled && status === "ready") {
+      void clover.syncManifest(manifestId ?? null);
+    }
+  }, [clover, manifestControlled, manifestId, status]);
+  const manifestShown = useCloverStoreValue(
+    clover,
+    (state) => {
+      var _a;
+      return state.status === "ready" ? ((_a = state.manifest) == null ? void 0 : _a.id) ?? null : null;
+    }
+  );
+  useEffect(() => {
+    if (searchQuery && manifestShown) void clover.search(searchQuery);
+  }, [clover, searchQuery, manifestShown]);
+  const kept = useRef(renderers);
+  if (!sameRenderers(kept.current, renderers)) kept.current = renderers;
+  const stableRenderers = kept.current;
+  const context = useMemo(
+    () => ({ clover, language, renderers: stableRenderers }),
+    [clover, language, stableRenderers]
+  );
+  return [context, status, rest];
+}
+function useCloverStoreValue(clover, select) {
+  return useSyncExternalStore(
+    clover.store.subscribe,
+    () => select(clover.store.get()),
+    () => select(clover.store.get())
+  );
+}
+function annotationsInputKey(input) {
+  const items = Array.isArray(input) ? input : input ? [input] : [];
+  return JSON.stringify(
+    items.map(
+      (item) => typeof item === "string" ? item : (item == null ? void 0 : item.id) ?? "object"
+    )
+  );
+}
+const SETTLE_MS = 300;
+function useContentStateOutput(clover, onChange) {
+  const latest = useRef(onChange);
+  latest.current = onChange;
+  const enabled = Boolean(onChange);
+  useEffect(() => {
+    if (!enabled) return;
+    let timer;
+    let last = "";
+    const settle = () => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        var _a;
+        const state = clover.getContentState();
+        if (!state || state.encoded === last) return;
+        last = state.encoded;
+        (_a = latest.current) == null ? void 0 : _a.call(latest, state);
+      }, SETTLE_MS);
+    };
+    let canvasId = clover.store.get().canvasId;
+    const offStore = clover.store.subscribe(() => {
+      const next = clover.store.get().canvasId;
+      if (next !== canvasId) {
+        canvasId = next;
+        settle();
+      }
+    });
+    const offViewport = clover.viewport.subscribe(settle);
+    let element = null;
+    const watch = (next) => {
+      element == null ? void 0 : element.removeEventListener("pause", settle);
+      element == null ? void 0 : element.removeEventListener("seeked", settle);
+      element = next;
+      element == null ? void 0 : element.addEventListener("pause", settle);
+      element == null ? void 0 : element.addEventListener("seeked", settle);
+    };
+    watch(clover.media.get());
+    const offMedia = clover.media.subscribe(watch);
+    settle();
+    return () => {
+      clearTimeout(timer);
+      offStore();
+      offViewport();
+      offMedia();
+      watch(null);
+    };
+  }, [clover, enabled]);
+}
+function contentKey(content) {
+  if (typeof content === "string") return content;
+  return content.id ?? content["@id"] ?? content;
+}
+export {
+  useRootState
+};

package/dist/components/Scene/Connected.mjs

@@ -0,0 +1,48 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useMemo } from "react";
+import { SceneView } from "./SceneView.mjs";
+import { useClover, useCloverSelector } from "../../react/context.mjs";
+import { useVisibleCanvases, useManifest } from "../../react/hooks.mjs";
+function ConnectedScene({
+  label,
+  language,
+  options,
+  ...props
+}) {
+  const context = useClover("Scene");
+  const { clover } = context;
+  const view = useVisibleCanvases();
+  const scene = view.find((container) => container.type === "Scene");
+  const manifest = useManifest();
+  const manifestId = useCloverSelector(
+    (state) => {
+      var _a;
+      return state.status === "loading" ? "loading" : ((_a = state.manifest) == null ? void 0 : _a.id) ?? "";
+    }
+  );
+  const target = useCloverSelector((state) => state.target);
+  useEffect(() => {
+    if (target && scene && target.canvasId === scene.id) clover.consumeTarget();
+  }, [target, scene, clover]);
+  const request = (options == null ? void 0 : options.request) ?? clover.request;
+  const connected = useMemo(
+    () => ({ ...options, request }),
+    [options, request]
+  );
+  if (!scene) return null;
+  return /* @__PURE__ */ jsx(
+    SceneView,
+    {
+      ...props,
+      scene,
+      manifestId,
+      label: label ?? scene.label ?? (manifest == null ? void 0 : manifest.label),
+      language: language ?? context.language,
+      options: connected
+    }
+  );
+}
+export {
+  ConnectedScene as default
+};

package/dist/components/Scene/Loaded.mjs

@@ -0,0 +1,56 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { SceneView } from "./SceneView.mjs";
+import { CanvasPending } from "../Body/Pending.mjs";
+import { BodyAlert } from "../Body/BodyAlert.mjs";
+import { loadContent } from "../../core/load.mjs";
+function LoadedScene({ iiifContent, ...props }) {
+  var _a;
+  const [view, setView] = useState({ state: "loading" });
+  const request = (_a = props.options) == null ? void 0 : _a.request;
+  const key = typeof iiifContent === "string" ? iiifContent : String((iiifContent == null ? void 0 : iiifContent.id) ?? "");
+  useEffect(() => {
+    let live = true;
+    setView({ state: "loading" });
+    (async () => {
+      var _a2;
+      const content = await loadContent(iiifContent, { request });
+      const scenes = (content.manifest.items ?? []).filter((item) => item.type === "Scene");
+      const wanted = (_a2 = content.target) == null ? void 0 : _a2.canvasId;
+      const scene = scenes.find((each) => each.id === wanted) ?? scenes[0];
+      if (!scene) throw new Error("It has no Scene to show.");
+      if (live)
+        setView({
+          state: "ready",
+          scene,
+          manifest: content.manifest
+        });
+    })().catch((error) => {
+      if (live)
+        setView({
+          state: "error",
+          error: error instanceof Error ? error : new Error(String(error))
+        });
+    });
+    return () => {
+      live = false;
+    };
+  }, [key, request]);
+  if (view.state === "ready")
+    return /* @__PURE__ */ jsx(
+      SceneView,
+      {
+        ...props,
+        scene: view.scene,
+        manifestId: String(view.manifest.id ?? ""),
+        label: props.label ?? view.scene.label ?? view.manifest.label
+      }
+    );
+  if (view.state === "error")
+    return /* @__PURE__ */ jsx(CanvasPending, { children: /* @__PURE__ */ jsx(BodyAlert, { error: view.error }) });
+  return /* @__PURE__ */ jsx(CanvasPending, {});
+}
+export {
+  LoadedScene as default
+};

package/dist/components/Scene/RotatePad.mjs

@@ -0,0 +1,204 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useRef, useEffect } from "react";
+import { attachOrbitGestures } from "./gestures.mjs";
+import { renderControl } from "../../ui/ControlCluster.mjs";
+const DIRECTIONS = {
+  rotateUp: { place: "up", rate: [0, Math.PI / 6] },
+  rotateLeft: { place: "left", rate: [Math.PI / 2, 0] },
+  rotateRight: { place: "right", rate: [-Math.PI / 2, 0] },
+  rotateDown: { place: "down", rate: [0, -Math.PI / 6] }
+};
+const HOLD_MS = 400;
+const Caret = ({ rotate }) => /* @__PURE__ */ jsx(
+  "path",
+  {
+    fill: "none",
+    strokeWidth: "64",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M192 96l160 160-160 160",
+    transform: `rotate(${rotate} 256 256)`
+  }
+);
+const GLOBE = 236;
+const n = (value) => value.toFixed(1);
+function half(rx, ry, upright, sweep) {
+  const [from, to] = upright ? [`256 ${n(256 - ry)}`, `256 ${n(256 + ry)}`] : [`${n(256 - rx)} 256`, `${n(256 + rx)} 256`];
+  return `M${from}A${n(rx)} ${n(ry)} 0 0 ${sweep} ${to}`;
+}
+function orientationOf({ theta, phi }) {
+  const above = Math.PI / 2 - phi;
+  const ry = Math.max(1, GLOBE * Math.abs(Math.sin(above)));
+  const rx = Math.max(1, GLOBE * Math.abs(Math.sin(theta)));
+  const down = above >= 0;
+  const nearRight = Math.sin(2 * theta) < 0;
+  return {
+    equator: {
+      front: half(GLOBE, ry, false, down ? 0 : 1),
+      back: half(GLOBE, ry, false, down ? 1 : 0)
+    },
+    meridian: {
+      front: half(rx, GLOBE, true, nearRight ? 1 : 0),
+      back: half(rx, GLOBE, true, nearRight ? 0 : 1)
+    },
+    x: 256 - GLOBE * Math.sin(theta),
+    y: 256 + (down ? 1 : -1) * ry * Math.cos(theta),
+    facing: Math.cos(theta) > 0
+  };
+}
+function showOrientation(glyph, orbit) {
+  const [equatorFront, equatorBack, meridianFront, meridianBack, dot] = (glyph == null ? void 0 : glyph.children) ?? [];
+  if (!dot) return;
+  const { equator, meridian, x, y, facing } = orientationOf(orbit);
+  equatorFront.setAttribute("d", equator.front);
+  equatorBack.setAttribute("d", equator.back);
+  meridianFront.setAttribute("d", meridian.front);
+  meridianBack.setAttribute("d", meridian.back);
+  dot.setAttribute("cx", x.toFixed(1));
+  dot.setAttribute("cy", y.toFixed(1));
+  dot.setAttribute("fill", facing ? "currentColor" : "none");
+  dot.setAttribute("opacity", facing ? "1" : String(BACK));
+}
+const BACK = 0.3;
+const Orientation = React.forwardRef(
+  function Orientation2(_, ref) {
+    const home = orientationOf({ theta: 0, phi: 75 * Math.PI / 180 });
+    return /* @__PURE__ */ jsxs("g", { ref, fill: "none", strokeWidth: "14", strokeLinecap: "round", children: [
+      /* @__PURE__ */ jsx("path", { d: home.equator.front }),
+      /* @__PURE__ */ jsx("path", { d: home.equator.back, strokeOpacity: BACK }),
+      /* @__PURE__ */ jsx("path", { d: home.meridian.front }),
+      /* @__PURE__ */ jsx("path", { d: home.meridian.back, strokeOpacity: BACK }),
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: home.x.toFixed(1),
+          cy: home.y.toFixed(1),
+          r: "34",
+          fill: "currentColor"
+        }
+      )
+    ] });
+  }
+);
+function RotatePad({
+  controls,
+  controlButtons,
+  turn,
+  zoom,
+  span,
+  indicator,
+  name
+}) {
+  const holding = useRef(null);
+  const swallow = useRef(false);
+  const turning = useRef(turn);
+  turning.current = turn;
+  const zooming = useRef(zoom);
+  zooming.current = zoom;
+  const disc = useRef(null);
+  const turns = Boolean(
+    controls.rotateUp || controls.rotateLeft || controls.rotateRight || controls.rotateDown
+  );
+  useEffect(() => {
+    const element = disc.current;
+    if (!element) return;
+    return attachOrbitGestures(
+      element,
+      {
+        turn: (dTheta, dPhi) => turning.current(dTheta, dPhi),
+        zoom: (factor) => zooming.current(factor)
+      },
+      span
+    );
+  }, [span, turns]);
+  const stop = (released) => {
+    const hold = holding.current;
+    if (!hold) return;
+    window.clearTimeout(hold.timer);
+    cancelAnimationFrame(hold.frame);
+    holding.current = null;
+    if (hold.held && released) swallow.current = true;
+  };
+  useEffect(() => () => stop(false), []);
+  const start = (event, direction) => {
+    if (event.button > 0) return;
+    stop(false);
+    swallow.current = false;
+    const [dTheta, dPhi] = DIRECTIONS[direction].rate;
+    const hold = { timer: 0, frame: 0, held: false };
+    hold.timer = window.setTimeout(() => {
+      hold.held = true;
+      let last = performance.now();
+      const step = (now) => {
+        const seconds = Math.min(0.1, Math.max(0, now - last) / 1e3);
+        last = now;
+        turning.current(dTheta * seconds, dPhi * seconds);
+        hold.frame = requestAnimationFrame(step);
+      };
+      hold.frame = requestAnimationFrame(step);
+    }, HOLD_MS);
+    holding.current = hold;
+  };
+  const cell = (direction) => {
+    const spec = controls[direction];
+    if (!spec) return null;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "clover-scene-rotate-cell",
+        "data-place": DIRECTIONS[direction].place,
+        onPointerDown: (event) => start(event, direction),
+        onPointerUp: () => stop(true),
+        onPointerLeave: () => stop(false),
+        onPointerCancel: () => stop(false),
+        onKeyDown: (event) => {
+          if (event.repeat && event.key === "Enter") event.preventDefault();
+        },
+        onClickCapture: (event) => {
+          if (swallow.current && event.detail > 0) {
+            event.stopPropagation();
+            event.preventDefault();
+          }
+          swallow.current = false;
+        },
+        children: renderControl(spec, controlButtons)
+      },
+      direction
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "clover-scene-rotate",
+      role: "group",
+      ...name.props,
+      "data-testid": "clover-scene-rotate",
+      children: [
+        name.node,
+        turns && /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: disc,
+            className: "clover-scene-rotate-disc",
+            "aria-hidden": "true",
+            "data-testid": "clover-scene-rotate-disc",
+            children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 512 512", width: "16", height: "16", focusable: "false", children: /* @__PURE__ */ jsx(Orientation, { ref: indicator }) })
+          }
+        ),
+        cell("rotateUp"),
+        cell("rotateLeft"),
+        cell("rotateRight"),
+        cell("rotateDown"),
+        controls.reset && /* @__PURE__ */ jsx("span", { className: "clover-scene-rotate-cell", "data-place": "corner", children: renderControl(controls.reset, controlButtons) })
+      ]
+    }
+  );
+}
+export {
+  Caret,
+  Orientation,
+  RotatePad,
+  orientationOf,
+  showOrientation
+};

package/dist/components/Scene/Scene.mjs

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Suspense, lazy } from "react";
+import { SceneView } from "./SceneView.mjs";
+import { CanvasPending } from "../Body/Pending.mjs";
+import { useOptionalClover } from "../../react/context.mjs";
+const ConnectedScene = lazy(() => import("./Connected.mjs"));
+const LoadedScene = lazy(() => import("./Loaded.mjs"));
+function Scene(props) {
+  const root = useOptionalClover();
+  if (props.iiifContent !== void 0 && props.scene === void 0)
+    return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(CanvasPending, {}), children: /* @__PURE__ */ jsx(LoadedScene, { ...props }) });
+  if (!props.scene)
+    return root ? /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(CanvasPending, {}), children: /* @__PURE__ */ jsx(ConnectedScene, { ...props }) }) : null;
+  return /* @__PURE__ */ jsx(SceneView, { ...props });
+}
+export {
+  Scene,
+  Scene as default
+};