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

package/dist/components/Canvas/CanvasView.mjs

@@ -0,0 +1,669 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useRef, useState, useMemo, useCallback, useEffect, useLayoutEffect, Suspense, lazy } from "react";
+import Caption, { hasInformation, captionLabelId } from "../Body/Caption.mjs";
+import Controls from "./Controls.mjs";
+import Placeholder from "./Placeholder.mjs";
+import { findChoices, animationFrames, canvasScene, placeholderStill, frameKey, canvasRectToWorld, canvasSize } from "./layout.mjs";
+import ExitFullscreen from "../../ui/ExitFullscreen.mjs";
+import { useControlsVisibility } from "../Body/useControlsVisibility.mjs";
+import { useNearViewport } from "../Body/useNearViewport.mjs";
+import useFullscreen from "../../hooks/useFullscreen.mjs";
+import { useLoaded } from "../../hooks/useLoaded.mjs";
+import { ErrorBoundary } from "../../ui/ErrorBoundary.mjs";
+import { Loading } from "../../ui/Loading.mjs";
+import { SHORTCUTS, forwardShortcut } from "../../ui/Tip.mjs";
+import { useUniqueId } from "../../ui/useUniqueId.mjs";
+import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
+import { join } from "../../lib/classnames.mjs";
+import { localize } from "../../core/value.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { HostLanguageContext } from "../../i18n/hostLanguage.mjs";
+import { useRootLanguage } from "../../react/language.mjs";
+import { useContainerName } from "../../ui/useContainerName.mjs";
+import { union } from "../../lib/renderer/math/rect.mjs";
+import { findImageServiceId } from "../../lib/renderer/sources/imageService.mjs";
+import { hasCamera } from "./surface.mjs";
+import { resolveDirection } from "../../core/sequence.mjs";
+const MediaBody = lazy(() => import("./media/MediaBody.mjs"));
+const loadHotspots = () => import("./AnnotationState.mjs");
+const NO_COMMENTS = /* @__PURE__ */ new Map();
+const NO_MODEL = {
+  menu: [],
+  placed: [],
+  timed: [],
+  hiddenPages: [],
+  setPagesVisible: () => void 0,
+  listedCount: 0,
+  comments: NO_COMMENTS,
+  selected: null,
+  select: () => void 0,
+  activate: () => void 0,
+  release: () => false,
+  quietlyOpened: null
+};
+const FrameAnimation = lazy(() => import("./FrameAnimation.mjs"));
+const ALL_CONTROLS = {
+  zoom: true,
+  fullPage: true,
+  rotation: true,
+  reset: true,
+  annotations: true,
+  information: true
+};
+const CAMERA_KEYS = {
+  description: "canvasKeysImage",
+  keys: [
+    "ArrowLeft ArrowRight ArrowUp ArrowDown",
+    SHORTCUTS.zoomIn.keys,
+    SHORTCUTS.zoomOut.keys,
+    SHORTCUTS.reset.keys,
+    SHORTCUTS.rotateRight.keys,
+    SHORTCUTS.rotateLeft.keys
+  ].join(" ")
+};
+const MEDIA_KEYS = {
+  description: "canvasKeysMedia",
+  keys: [SHORTCUTS.play.keys, "J L", SHORTCUTS.mute.keys].join(" ")
+};
+const ANNOTATION_KEYS = {
+  description: "canvasKeysAnnotations",
+  keys: "Escape"
+};
+const CanvasView = (props) => {
+  var _a;
+  const hasSource = Boolean((_a = props.canvases) == null ? void 0 : _a.length) || toSceneImages(props.body, props.src).length > 0;
+  if (!hasSource) return null;
+  return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CanvasBody, { ...props }) });
+};
+const CanvasBody = (props) => {
+  var _a, _b, _c, _d, _e;
+  const {
+    surface: makeSurface,
+    manifestId,
+    canvases,
+    viewingDirection,
+    body,
+    src,
+    isTiledImage = false,
+    label,
+    partOf,
+    language,
+    instanceId,
+    className,
+    options,
+    navigator = false,
+    controls = true,
+    controlButtons,
+    annotations: allAnnotations,
+    onReady,
+    onViewportChange,
+    onMediaElement,
+    onCaptionChange,
+    caption,
+    onEnded,
+    chapters,
+    highlightedChapter,
+    onChapterHighlight,
+    placeholder = true,
+    children
+  } = props;
+  const { t } = useCloverTranslation();
+  const hostRef = useRef(null);
+  const [wrapperElement, setWrapperElement] = useState(
+    null
+  );
+  const isFullscreen = useFullscreen(wrapperElement);
+  const root = useRootLanguage(
+    setWrapperElement
+  );
+  const controlsVisible = useControlsVisibility(
+    wrapperElement,
+    options == null ? void 0 : options.hideDelay,
+    hostRef
+  );
+  const nearViewport = useNearViewport(wrapperElement);
+  const made = useUniqueId();
+  const [instance] = useState(() => instanceId ?? `clover-canvas-${made}`);
+  const surfaceRef = useRef(null);
+  const [surface, setSurface] = useState(null);
+  const renderer = hasCamera(surface) ? surface : null;
+  const [navigatorElement, setNavigatorElement] = useState(null);
+  const controlsConfig = controls === false ? null : controls === true ? ALL_CONTROLS : { ...ALL_CONTROLS, ...controls };
+  const [status, setStatus] = useState("loading");
+  const [sceneVersion, setSceneVersion] = useState(0);
+  const onReadyRef = useRef(onReady);
+  const onViewportChangeRef = useRef(onViewportChange);
+  const optionsRef = useRef(options);
+  onReadyRef.current = onReady;
+  onViewportChangeRef.current = onViewportChange;
+  optionsRef.current = options;
+  const direction = resolveDirection(viewingDirection);
+  const choices = useMemo(() => findChoices(canvases ?? []), [canvases]);
+  const [selections, setSelections] = useState({});
+  const selectChoice = (key, index) => setSelections((current) => ({ ...current, [key]: index }));
+  const showInformation = Boolean(controlsConfig == null ? void 0 : controlsConfig.information);
+  const hasAnnotations = Boolean(allAnnotations == null ? void 0 : allAnnotations.length);
+  const hotspots = useLoaded(loadHotspots, hasAnnotations);
+  const [annotationModel, setAnnotationModel] = useState(null);
+  const model = hasAnnotations && annotationModel || NO_MODEL;
+  const modelRef = useRef(model);
+  modelRef.current = model;
+  const releaseAnnotation = useCallback(() => modelRef.current.release(), []);
+  const { comments, listedCount } = model;
+  const captioned = useMemo(
+    () => showInformation ? (canvases ?? []).filter(
+      (canvas) => hasInformation(canvas) || comments.has(canvas.id)
+    ) : [],
+    [canvases, showInformation, comments]
+  );
+  const captionId = `caption-${instance}`;
+  const [captionOpen, setCaptionOpen] = useState(false);
+  const isCaptionOpen = captionOpen && captioned.length > 0;
+  const closeCaption = useCallback(
+    (restoreFocus) => {
+      var _a2;
+      setCaptionOpen(false);
+      if (restoreFocus)
+        (_a2 = document.getElementById(`information-${instance}`)) == null ? void 0 : _a2.focus();
+    },
+    [instance]
+  );
+  const animated = useMemo(
+    () => (canvases ?? []).find((canvas) => animationFrames(canvas).length) ?? null,
+    [canvases]
+  );
+  const frames = animated ? animationFrames(animated) : NO_FRAMES;
+  const scene = useMemo(
+    () => (canvases == null ? void 0 : canvases.length) ? canvasScene(canvases, direction, selections, {
+      standIns: canvases.length > 1
+    }) : null,
+    [canvases, direction, selections]
+  );
+  const bodyImages = useMemo(
+    () => toSceneImages(body, src, isTiledImage),
+    [body, src, isTiledImage]
+  );
+  const media = (scene == null ? void 0 : scene.media[0]) ?? null;
+  const [mediaElement, setMediaElement] = useState(
+    null
+  );
+  const onMediaElementRef = useRef(onMediaElement);
+  onMediaElementRef.current = onMediaElement;
+  const handleMediaElement = useCallback((element) => {
+    var _a2;
+    setMediaElement(element);
+    (_a2 = onMediaElementRef.current) == null ? void 0 : _a2.call(onMediaElementRef, element);
+  }, []);
+  const baseImages = scene ? scene.images : bodyImages;
+  const mediaOnly = Boolean(media) && (canvases == null ? void 0 : canvases.length) === 1;
+  const player = mediaOnly && (media == null ? void 0 : media.kind) === "audio";
+  const navigable = !mediaOnly && ((_a = options == null ? void 0 : options.gestures) == null ? void 0 : _a.navigable) !== false;
+  const canvasKey = (canvases == null ? void 0 : canvases.map((canvas) => canvas.id).join("|")) ?? null;
+  const stills = useMemo(() => {
+    if (!canvases || !placeholder) return [];
+    const found = canvases.flatMap((canvas) => {
+      const still = placeholderStill(canvas);
+      const alt = localize(canvas.label, language);
+      return still ? [{ ...still, alt: alt.text, lang: alt.lang }] : [];
+    });
+    return direction === "right-to-left" || direction === "bottom-to-top" ? found.reverse() : found;
+  }, [canvases, direction, placeholder, language]);
+  const [imagesOpen, setImagesOpen] = useState(false);
+  const [mediaOpenedFor, setMediaOpenedFor] = useState(null);
+  const showPlaceholder = !player && stills.length > 0 && (media ? mediaOpenedFor !== canvasKey : !imagesOpen);
+  const onlyInformation = (config, { annotations = false } = {}) => ({
+    ...config,
+    zoom: false,
+    rotation: false,
+    reset: false,
+    fullPage: false,
+    annotations: annotations && config.annotations
+  });
+  const hostControls = React.Children.count(children) > 0;
+  const shownControls = !controlsConfig ? null : showPlaceholder ? captioned.length || hostControls || listedCount ? onlyInformation(controlsConfig, { annotations: true }) : null : mediaOnly ? choices.length || captioned.length || hostControls || listedCount ? onlyInformation(controlsConfig, { annotations: true }) : null : controlsConfig;
+  const showNavigator = navigator && !showPlaceholder && (media ? media.kind === "audio" && !mediaOnly && baseImages.length > 0 : true);
+  const [fitted, setFitted] = useState(null);
+  const videoPlacement = media ? fitted ?? media.placement : null;
+  const images = useMemo(
+    () => (media == null ? void 0 : media.kind) === "video" && mediaElement && videoPlacement ? [
+      ...baseImages,
+      {
+        id: media.id,
+        placement: videoPlacement,
+        width: videoPlacement.width,
+        height: videoPlacement.height,
+        media: { element: mediaElement }
+      }
+    ] : baseImages,
+    [baseImages, media, mediaElement, videoPlacement]
+  );
+  const world = mediaOnly && (media == null ? void 0 : media.kind) === "video" && fitted ? fitted : scene ? union(scene.placements) : null;
+  const imagesKey = JSON.stringify([
+    baseImages,
+    world,
+    images.length !== baseImages.length && [media == null ? void 0 : media.id, videoPlacement]
+  ]);
+  const shownCanvases = useRef(null);
+  const placeholderShown = useRef(false);
+  const togglePlaceholder = () => {
+    if (media) setMediaOpenedFor(showPlaceholder ? canvasKey : null);
+    else setImagesOpen(showPlaceholder);
+    if (!showPlaceholder) releaseAnnotation();
+  };
+  const firstBody = Array.isArray(body) ? body[0] : body;
+  const ownName = [label, (_b = canvases == null ? void 0 : canvases[0]) == null ? void 0 : _b.label, firstBody == null ? void 0 : firstBody.label].map((value) => localize(value, language)).find((value) => value.text);
+  const partOfName = useMemo(() => {
+    const name = localize(partOf, language);
+    return name.text && name.text !== (ownName == null ? void 0 : ownName.text) ? name : void 0;
+  }, [partOf, language, ownName == null ? void 0 : ownName.text]);
+  const viewportName = useContainerName(
+    (ownName == null ? void 0 : ownName.text) || t("canvasImage"),
+    ownName ? ownName.lang : root.langOf("canvasImage"),
+    false,
+    root.hostLanguage
+  );
+  const viewportKeys = showPlaceholder ? [] : [
+    ...navigable ? [CAMERA_KEYS] : [],
+    ...media ? [MEDIA_KEYS] : [],
+    ...hasAnnotations ? [ANNOTATION_KEYS] : []
+  ];
+  const keysId = `keys-${instance}`;
+  const roleDescription = navigable && !showPlaceholder && !root.langOf("canvasRoleDescription") ? t("canvasRoleDescription") : void 0;
+  const hasCaption = Boolean(shownControls) && captioned.length > 0;
+  const figureLabel = hasCaption ? captioned.map(
+    (canvas, index) => localize(canvas.label, language).text ? captionLabelId(captionId, index) : null
+  ).filter(Boolean).join(" ") || void 0 : void 0;
+  const latestScene = useRef({ canvases, scene, canvasKey });
+  latestScene.current = { canvases, scene, canvasKey };
+  const drawnScene = useRef(null);
+  const markDrawn = useCallback(() => {
+    const { canvases: canvases2, scene: scene2, canvasKey: canvasKey2 } = latestScene.current;
+    drawnScene.current = canvases2 && scene2 && shownCanvases.current === canvasKey2 ? { key: canvasKey2, canvases: canvases2, placements: scene2.placements } : null;
+  }, []);
+  const drawn = !canvases || ((_c = drawnScene.current) == null ? void 0 : _c.key) === canvasKey;
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const surface2 = makeSurface(host, optionsRef.current);
+    const renderer2 = hasCamera(surface2) ? surface2 : null;
+    surfaceRef.current = surface2;
+    setSurface(surface2);
+    surface2.setDismiss(releaseAnnotation);
+    const offOpen = surface2.on("open", () => {
+      var _a2;
+      setCleared(false);
+      markDrawn();
+      setStatus("ready");
+      setSceneVersion((v) => v + 1);
+      if (!renderer2) return;
+      (_a2 = onReadyRef.current) == null ? void 0 : _a2.call(
+        onReadyRef,
+        canvasHandle(
+          renderer2,
+          () => drawnScene.current,
+          (id) => {
+            var _a3, _b2;
+            const annotation = modelRef.current.placed.find((a) => a.id === id);
+            if (!annotation) return false;
+            modelRef.current.select(annotation);
+            (_b2 = Array.from(
+              ((_a3 = renderer2.overlays) == null ? void 0 : _a3.container.querySelectorAll(
+                "[id]"
+              )) ?? []
+            ).find((element) => element.id === id)) == null ? void 0 : _b2.focus({ preventScroll: true });
+            return true;
+          }
+        )
+      );
+    });
+    const offChange = surface2.on("change", () => {
+      setCleared(false);
+      markDrawn();
+      setStatus("ready");
+      setSceneVersion((v) => v + 1);
+    });
+    const offError = surface2.on("error", () => {
+      if (!surface2.isOpen) setStatus("error");
+    });
+    const offViewport = surface2.on("viewport", () => {
+      var _a2;
+      if (renderer2) (_a2 = onViewportChangeRef.current) == null ? void 0 : _a2.call(onViewportChangeRef, renderer2.getBounds());
+    });
+    return () => {
+      offOpen();
+      offChange();
+      offError();
+      offViewport();
+      surface2.dispose();
+      surfaceRef.current = null;
+      setSurface(null);
+    };
+  }, [instanceId, makeSurface, releaseAnnotation, markDrawn]);
+  useEffect(() => {
+    if (!renderer || !navigatorElement) return;
+    return renderer.attachNavigator(navigatorElement);
+  }, [renderer, navigatorElement]);
+  useEffect(() => {
+    const surface2 = surfaceRef.current;
+    if (showPlaceholder) placeholderShown.current = true;
+    if (!surface2 || !nearViewport || showPlaceholder) return;
+    const moved = shownCanvases.current !== null && shownCanvases.current !== canvasKey;
+    if (!surface2.isOpen || moved) setStatus("loading");
+    const fit = mediaOnly || placeholderShown.current && surface2.isOpen || moved;
+    shownCanvases.current = canvasKey;
+    placeholderShown.current = false;
+    surface2.setImages(images, { world: world ?? void 0, fit });
+  }, [imagesKey, instanceId, mediaElement, nearViewport, showPlaceholder]);
+  const shownManifest = useRef(manifestId);
+  const [cleared, setCleared] = useState(false);
+  useLayoutEffect(() => {
+    var _a2;
+    if (manifestId === shownManifest.current) return;
+    shownManifest.current = manifestId;
+    (_a2 = surfaceRef.current) == null ? void 0 : _a2.clear();
+    setCleared(true);
+    setStatus("loading");
+  }, [manifestId]);
+  const loading = status === "loading" && images.length > 0 && nearViewport && !showPlaceholder;
+  return /* @__PURE__ */ jsx(HostLanguageContext.Provider, { value: root.hostLanguage, children: /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      "aria-labelledby": figureLabel,
+      className: join("clover-canvas", className),
+      "data-testid": "clover-canvas",
+      "data-status": status,
+      "data-has-navigator": showNavigator,
+      "data-fullscreen": isFullscreen,
+      "data-controls": controlsVisible ? "visible" : "hidden",
+      "data-media": media == null ? void 0 : media.kind,
+      "data-player": player ? "" : void 0,
+      "data-animated": animated ? "" : void 0,
+      "data-navigable": navigable,
+      "data-placeholder": stills.length && !player ? showPlaceholder : void 0,
+      ref: root.ref,
+      onKeyDown: (event) => {
+        if (event.key === "Escape" && isCaptionOpen && !event.defaultPrevented) {
+          event.preventDefault();
+          closeCaption(false);
+          return;
+        }
+        if (event.key === "Escape" && !event.defaultPrevented && !event.currentTarget.querySelector(".clover-canvas-menu") && releaseAnnotation()) {
+          event.preventDefault();
+          return;
+        }
+        forwardShortcut(event, hostRef.current);
+      },
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        margin: 0,
+        overflow: "hidden",
+        isolation: "isolate"
+      },
+      children: [
+        (shownControls || showNavigator) && /* @__PURE__ */ jsx("div", { className: "clover-canvas-scrim", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(ExitFullscreen, { hidden: !isFullscreen }),
+        surface && shownControls && /* @__PURE__ */ jsx(
+          Controls,
+          {
+            renderer,
+            instance,
+            config: shownControls,
+            controlButtons,
+            hasPlaceholder: stills.length > 0,
+            choices: showPlaceholder ? [] : choices,
+            selections,
+            onSelect: selectChoice,
+            annotations: model.menu,
+            hiddenPages: model.hiddenPages,
+            onPageVisibilityChange: model.setPagesVisible,
+            selectedAnnotation: model.selected,
+            onAnnotationSelect: model.select,
+            onAnnotationActivate: model.activate,
+            captionId: hasCaption ? captionId : void 0,
+            captionOpen: isCaptionOpen,
+            onCaptionToggle: () => setCaptionOpen((open) => !open),
+            language,
+            children
+          }
+        ),
+        showNavigator && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: setNavigatorElement,
+            className: "clover-canvas-navigator",
+            "data-testid": "clover-canvas-navigator",
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: hostRef,
+            className: "clover-canvas-viewport",
+            style: {
+              position: "absolute",
+              inset: 0,
+              overflow: "hidden",
+              zIndex: -1
+            },
+            "data-testid": "clover-canvas-viewport",
+            role: hasAnnotations ? "group" : "img",
+            "aria-roledescription": roleDescription,
+            ...viewportName.props,
+            "aria-describedby": viewportKeys.length ? keysId : void 0,
+            "aria-keyshortcuts": viewportKeys.map(({ keys }) => keys).join(" ") || void 0,
+            "aria-busy": loading,
+            tabIndex: 0
+          }
+        ),
+        viewportName.node,
+        viewportKeys.length > 0 && /* @__PURE__ */ jsx("span", { id: keysId, style: visuallyHidden, children: viewportKeys.map(({ description }, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          index > 0 && " ",
+          /* @__PURE__ */ jsx("span", { lang: root.langOf(description), children: t(description) })
+        ] }, description)) }),
+        (media == null ? void 0 : media.kind) === "audio" && !player && baseImages.length === 0 && !showPlaceholder && (ownName == null ? void 0 : ownName.text) && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "clover-canvas-sound-label",
+            "aria-hidden": "true",
+            lang: ownName.lang || void 0,
+            children: ownName.text
+          }
+        ),
+        stills.length > 0 && !player && /* @__PURE__ */ jsx(
+          Placeholder,
+          {
+            instance,
+            stills,
+            vertical: direction === "top-to-bottom" || direction === "bottom-to-top",
+            media: Boolean(media),
+            active: showPlaceholder,
+            lingering: status === "loading" && !cleared,
+            onToggle: togglePlaceholder,
+            request: options == null ? void 0 : options.request
+          }
+        ),
+        surface && media && nearViewport && !showPlaceholder && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+          MediaBody,
+          {
+            media,
+            request: options == null ? void 0 : options.request,
+            surface,
+            instance,
+            onElement: handleMediaElement,
+            onFit: setFitted,
+            onCaptionChange,
+            caption,
+            navigable,
+            fullscreen: mediaOnly && Boolean(controlsConfig == null ? void 0 : controlsConfig.fullPage),
+            isFullscreen,
+            onEnded,
+            chapters,
+            highlightedChapter,
+            onChapterHighlight,
+            autoPlay: !player && stills.length > 0 && model.quietlyOpened !== canvasKey,
+            language,
+            notes: model.timed,
+            player: player && canvases ? {
+              canvas: canvases[0],
+              title: ownName,
+              partOf: partOfName
+            } : void 0
+          }
+        ) }),
+        renderer && animated && (scene == null ? void 0 : scene.frames[frameKey(animated)]) && !showPlaceholder && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+          FrameAnimation,
+          {
+            renderer,
+            frames,
+            byFrame: scene.frames[frameKey(animated)],
+            animationKey: animated.id,
+            sceneVersion,
+            autoplay: (_d = options == null ? void 0 : options.animation) == null ? void 0 : _d.autoplay,
+            loop: (_e = options == null ? void 0 : options.animation) == null ? void 0 : _e.loop,
+            onEnded,
+            language
+          },
+          animated.id
+        ) }),
+        hotspots && hasAnnotations && allAnnotations && /* @__PURE__ */ jsx(
+          hotspots.AnnotationState,
+          {
+            given: props,
+            annotations: allAnnotations,
+            scene,
+            renderer,
+            sceneVersion,
+            drawn,
+            media,
+            mediaElement,
+            showPlaceholder,
+            canvasKey,
+            openImages: setImagesOpen,
+            openMedia: setMediaOpenedFor,
+            host: hostRef,
+            onModel: setAnnotationModel
+          }
+        ),
+        loading && /* @__PURE__ */ jsx(Loading, { overlay: true }),
+        hasCaption && /* @__PURE__ */ jsx(
+          Caption,
+          {
+            id: captionId,
+            canvases: captioned,
+            comments,
+            open: isCaptionOpen,
+            onClose: closeCaption,
+            language
+          }
+        )
+      ]
+    }
+  ) });
+};
+function canvasHandle(renderer, drawn, zoomToAnnotation) {
+  return {
+    fitCanvasRect(canvasId, rect, immediate) {
+      const scene = drawn();
+      const index = (scene == null ? void 0 : scene.canvases.findIndex((c) => c.id === canvasId)) ?? -1;
+      if (!scene || index === -1) return false;
+      renderer.fitBounds(
+        canvasRectToWorld(scene.canvases[index], scene.placements[index], rect),
+        immediate
+      );
+      return true;
+    },
+    getCanvasRegion() {
+      const scene = drawn();
+      if (!scene) return null;
+      return canvasRegion(
+        renderer.getBounds(),
+        scene.canvases,
+        scene.placements
+      );
+    },
+    get backendKind() {
+      return renderer.backendKind;
+    },
+    get atHome() {
+      return renderer.isAtHome;
+    },
+    fitBounds: (bounds, immediate) => renderer.fitBounds(bounds, immediate),
+    fitItemRect: (index, rect, immediate) => renderer.fitItemRect(index, rect, immediate),
+    itemRectToWorld: (index, rect) => renderer.itemRectToWorld(index, rect),
+    getBounds: () => renderer.getBounds(),
+    getHomeBounds: () => renderer.getHomeBounds(),
+    getCamera: () => renderer.getCamera(),
+    home: (immediate) => renderer.home(immediate),
+    zoomBy: (factor, at, animate) => renderer.zoomBy(factor, at, animate),
+    panBy: (dx, dy, animate) => renderer.panBy(dx, dy, animate),
+    setRotation: (degrees, immediate) => renderer.setRotation(degrees, immediate),
+    getRotation: () => renderer.getRotation(),
+    rotateBy: (degrees) => renderer.rotateBy(degrees),
+    worldToScreenPoint: (point) => renderer.worldToScreenPoint(point),
+    screenToWorldPoint: (point) => renderer.screenToWorldPoint(point),
+    on: (event, listener) => renderer.on(event, listener),
+    zoomToAnnotation
+  };
+}
+const NO_FRAMES = [];
+function toSceneImages(body, src, isTiledImage = false) {
+  const bodies = Array.isArray(body) ? body : body ? [body] : [];
+  if (bodies.length) {
+    return bodies.map((resource, index) => {
+      const service = findImageServiceId(resource.service);
+      if (!service && !resource.id) return null;
+      return {
+        id: `${index}:${resource.id ?? service}|${resource.region ?? ""}`,
+        service,
+        url: resource.id,
+        width: resource.width,
+        height: resource.height,
+        region: resource.region
+      };
+    }).filter((image) => image !== null);
+  }
+  const sources = Array.isArray(src) ? src : src ? [src] : [];
+  return sources.filter(Boolean).map((uri, index) => ({
+    id: `${index}:${uri}`,
+    ...isTiledImage ? { service: uri } : { url: uri }
+  }));
+}
+function canvasRegion(bounds, canvases, placements) {
+  let best = null;
+  placements.forEach((place2, index2) => {
+    const x = Math.max(bounds.x, place2.x);
+    const y = Math.max(bounds.y, place2.y);
+    const width = Math.min(bounds.x + bounds.width, place2.x + place2.width) - x;
+    const height = Math.min(bounds.y + bounds.height, place2.y + place2.height) - y;
+    if (width <= 0 || height <= 0) return;
+    const area = width * height;
+    if (!best || area > best.area) {
+      best = { index: index2, area, clip: { x, y, width, height } };
+    }
+  });
+  if (!best) return null;
+  const { index, clip } = best;
+  const canvas = canvases[index];
+  const place = placements[index];
+  const size = canvasSize(canvas);
+  const kx = size.width / place.width;
+  const ky = size.height / place.height;
+  return {
+    canvasId: canvas.id,
+    rect: {
+      x: Math.round((clip.x - place.x) * kx),
+      y: Math.round((clip.y - place.y) * ky),
+      width: Math.round(clip.width * kx),
+      height: Math.round(clip.height * ky)
+    }
+  };
+}
+export {
+  canvasRegion,
+  CanvasView as default,
+  toSceneImages
+};