@nulib/clover 4.0.0 → 4.2.0

package/dist/lib/pointer.mjs

@@ -20,7 +20,7 @@ function isInteractive(target, bodyBox) {
   var _a;
   let node = target;
   while (node && node !== bodyBox) {
-    if (node instanceof HTMLButtonElement || node instanceof HTMLAnchorElement || node instanceof HTMLInputElement || node instanceof HTMLSelectElement || ((_a = node.dataset) == null ? void 0 : _a.cloverCanvasInteractive) !== void 0) {
+    if (node instanceof HTMLButtonElement || node instanceof HTMLAnchorElement || node instanceof HTMLInputElement || node instanceof HTMLLabelElement || node instanceof HTMLSelectElement || ((_a = node.dataset) == null ? void 0 : _a.cloverCanvasInteractive) !== void 0) {
       return true;
     }
     node = node.parentElement;

package/dist/lib/renderer/CanvasRenderer.mjs

@@ -4,7 +4,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { claimContext, returnContext } from "./backends/contexts.mjs";
 import { WebGL2Backend } from "./backends/webgl2/WebGL2Backend.mjs";
-import { fitCamera, visibleWorldRect, screenPointToWorld, anchoredCenter, worldPointToScreen, sameCamera } from "./camera/Camera.mjs";
+import { fitCamera, anchoredCenter, visibleWorldRect, screenPointToWorld, worldPointToScreen, sameCamera } from "./camera/Camera.mjs";
 import { CameraAnimator } from "./camera/CameraAnimator.mjs";
 import { GestureController, DEFAULT_GESTURES } from "./input/GestureController.mjs";
 import { TileCache } from "./io/TileCache.mjs";
@@ -12,7 +12,7 @@ import { loadImage } from "./io/decode.mjs";
 import { FrameLoop } from "./loop/FrameLoop.mjs";
 import { uploadBudget } from "./scene/uploadBudget.mjs";
 import { apply, compose, rotate, scale } from "./math/affine.mjs";
-import { union, clamp, transformRect } from "./math/rect.mjs";
+import { union, rectCenter, clamp, transformRect } from "./math/rect.mjs";
 import { planFrame } from "./scene/planFrame.mjs";
 import { sameSpec, prepareItem, layoutItems, pixelsToWorld, itemToWorld, MEDIA_KEY_PREFIX } from "./scene/sceneItem.mjs";
 const DEFAULTS = {
@@ -29,15 +29,15 @@ const MAX_CONTEXT_LOSSES = 3;
 const ANNOTATION_PADDING = 0.1;
 const ZOOM_EPSILON = 1e-6;
 const NO_INSET = { top: 0, right: 0, bottom: 0, left: 0 };
-function readInset(host) {
-  if (typeof getComputedStyle !== "function") return NO_INSET;
-  const style = getComputedStyle(host);
-  const px = (value) => parseFloat(value) || 0;
+function readInset(element, box = "padding") {
+  if (!element || typeof getComputedStyle !== "function") return NO_INSET;
+  const style = getComputedStyle(element);
+  const px = (side) => parseFloat(style.getPropertyValue(`${box}-${side}`)) || 0;
   return {
-    top: px(style.paddingTop),
-    right: px(style.paddingRight),
-    bottom: px(style.paddingBottom),
-    left: px(style.paddingLeft)
+    top: px("top"),
+    right: px("right"),
+    bottom: px("bottom"),
+    left: px("left")
   };
 }
 const sameInset = (a, b) => a.top === b.top && a.right === b.right && a.bottom === b.bottom && a.left === b.left;
@@ -329,20 +329,38 @@ class CanvasRenderer {
     }
     return true;
   }
-  /** Frame `bounds` (world units) in the viewport. */
-  fitBounds(bounds, immediate = false) {
-    const target = fitCamera(
-      bounds,
-      this.viewport,
-      this.camera.destination.rotation,
-      0
-    );
+  /** Frame `bounds` (world units) in the viewport, or in the part of it `inset` leaves. */
+  fitBounds(bounds, immediate = false, inset = NO_INSET) {
+    const target = this.fit(bounds, this.camera.destination.rotation, inset);
     this.atHome = false;
     this.animateTo(
       this.constrain(target, { allowBeyondLimits: true }),
       immediate
     );
   }
+  /**
+   * The camera that frames `bounds`, turned by `rotation`, in the part of the viewport
+   * `inset` leaves: centered there, off the viewport's center where its sides differ.
+   */
+  fit(bounds, rotation, { top, right, bottom, left }) {
+    const { width, height } = this.viewport;
+    const { zoom } = fitCamera(
+      bounds,
+      {
+        width: Math.max(1, width - left - right),
+        height: Math.max(1, height - top - bottom)
+      },
+      rotation
+    );
+    const center = anchoredCenter(
+      rectCenter(bounds),
+      { x: (width + left - right) / 2, y: (height + top - bottom) / 2 },
+      zoom,
+      rotation,
+      this.viewport
+    );
+    return { ...center, zoom, rotation };
+  }
   /**
    * Zoom to a rectangle in item `index`'s own coordinates — an annotation's `xywh` — with
    * OpenSeadragon's padding.
@@ -351,8 +369,12 @@ class CanvasRenderer {
     const world = this.itemRectToWorld(index, rect);
     if (world) this.fitAnnotation(world, immediate);
   }
-  /** Zoom to a world rectangle with OpenSeadragon's annotation padding. */
+  /**
+   * Zoom to a world rectangle with OpenSeadragon's annotation padding, clear of the
+   * controls over the view (the hotspots' layer's scroll padding, `Annotations.css`).
+   */
   fitAnnotation(world, immediate = false) {
+    var _a;
     const first = this.items[0];
     if (!first) return;
     const pad = first.rect.width * ANNOTATION_PADDING;
@@ -363,7 +385,8 @@ class CanvasRenderer {
         width: world.width + pad * 2,
         height: world.height + pad * 2
       },
-      immediate
+      immediate,
+      readInset((_a = this.overlays) == null ? void 0 : _a.container, "scroll-padding")
     );
   }
   /** The world rectangle currently visible (its bounding box when rotated). */
@@ -663,18 +686,7 @@ class CanvasRenderer {
     if (!this.worldBounds) return null;
     const turn = 2 * Math.PI;
     const upright = Math.round(this.camera.destination.rotation / turn) * turn || 0;
-    const { top, right, bottom, left } = this.inset;
-    const camera = fitCamera(
-      this.worldBounds,
-      {
-        width: Math.max(1, this.viewport.width - left - right),
-        height: Math.max(1, this.viewport.height - top - bottom)
-      },
-      upright
-    );
-    camera.x -= (left - right) / 2 / camera.zoom;
-    camera.y -= (top - bottom) / 2 / camera.zoom;
-    return camera;
+    return this.fit(this.worldBounds, upright, this.inset);
   }
   /**
    * Keep the camera usable: zoom within limits, and the center over the world so the

package/dist/lib/renderer/camera/Camera.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { apply, compose, rotate, translate, scale } from "../math/affine.mjs";
+import { apply, compose, rotate, scale, translate } from "../math/affine.mjs";
 import { transformRect, rectCenter } from "../math/rect.mjs";
 function worldToScreen(camera, viewport) {
   return compose(

package/dist/react/useContentStateOutput.mjs

@@ -0,0 +1,71 @@
+"use client";
+import { useEffect, useRef, useCallback } from "react";
+const REPORT_MS = 100;
+function useContentStateOutput(read, onChange) {
+  const latest = useRef({ read, onChange });
+  latest.current = { read, onChange };
+  const timer = useRef(void 0);
+  const last = useRef("");
+  useEffect(
+    () => () => {
+      clearTimeout(timer.current);
+      timer.current = void 0;
+    },
+    []
+  );
+  return useCallback(() => {
+    if (!latest.current.onChange || timer.current !== void 0) return;
+    timer.current = setTimeout(() => {
+      var _a, _b;
+      timer.current = void 0;
+      const state = latest.current.read();
+      if (!state || state.encoded === last.current) return;
+      last.current = state.encoded;
+      (_b = (_a = latest.current).onChange) == null ? void 0 : _b.call(_a, state);
+    }, REPORT_MS);
+  }, []);
+}
+function watchMedia(element, changed) {
+  element == null ? void 0 : element.addEventListener("pause", changed);
+  element == null ? void 0 : element.addEventListener("seeked", changed);
+  return () => {
+    element == null ? void 0 : element.removeEventListener("pause", changed);
+    element == null ? void 0 : element.removeEventListener("seeked", changed);
+  };
+}
+function useRootContentState(clover, onChange) {
+  const changed = useContentStateOutput(
+    () => clover.getContentState(),
+    onChange
+  );
+  const enabled = Boolean(onChange);
+  useEffect(() => {
+    if (!enabled) return;
+    let canvasId = clover.store.get().canvasId;
+    const offStore = clover.store.subscribe(() => {
+      const next = clover.store.get().canvasId;
+      if (next !== canvasId) {
+        canvasId = next;
+        changed();
+      }
+    });
+    const offViewport = clover.viewport.subscribe(changed);
+    let offElement = watchMedia(clover.media.get(), changed);
+    const offMedia = clover.media.subscribe((element) => {
+      offElement();
+      offElement = watchMedia(element, changed);
+    });
+    changed();
+    return () => {
+      offStore();
+      offViewport();
+      offMedia();
+      offElement();
+    };
+  }, [clover, enabled, changed]);
+}
+export {
+  useContentStateOutput,
+  useRootContentState,
+  watchMedia
+};