@knaw-huc/osd-iiif-viewer 0.1.3 → 0.1.4

package/README.md

@@ -12,19 +12,19 @@ Current features (WIP):
 ```tsx
 import {useEffect} from 'react';
 import {
+  Viewer,
   ViewerProvider,
-  ViewerCanvas,
   useLoadManifest,
   useManifest,
 } from '@knaw-huc/osd-iiif-viewer';
 
 export function Example() {
   return <ViewerProvider>
-    <Viewer/>
+    <View/>
   </ViewerProvider>
 }
 
-function Viewer() {
+function View() {
   const loadManifest = useLoadManifest();
   const manifest = useManifest();
 
@@ -38,7 +38,7 @@ function Viewer() {
 
   return (
     <div style={{width: '100%', height: '100vh'}}>
-      <ViewerCanvas/>
+      <Viewerer/>
     </div>
   );
 }

package/dist/ControlSlice.d.ts

@@ -5,10 +5,12 @@ export type ControlSlice = {
     zoomMin: number | null;
     zoomMax: number | null;
     isFullPage: boolean;
+    rotation: number;
     setZoomLevel: (zoomLevel: number | null) => void;
     setZoomMin: (zoomMin: number | null) => void;
     setZoomMax: (zoomMax: number | null) => void;
     setIsFullPage: (isFullPage: boolean) => void;
+    setRotation: (rotation: number) => void;
 };
 export declare const createControlSlice: StateCreator<ViewerStore, [
 ], [

package/dist/Viewer.d.ts

@@ -1,5 +1,5 @@
-type ViewerCanvasProps = {
+type ViewerProps = {
     showControls?: boolean;
 };
-export declare function Viewer({ showControls }: ViewerCanvasProps): import("react/jsx-runtime").JSX.Element;
+export declare function Viewer({ showControls }: ViewerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.d.ts

@@ -1,6 +1,6 @@
+export { Viewer } from './Viewer.tsx';
 export { useImageInfo } from './useImageInfo.tsx';
 export { Overlay } from './Overlay.tsx';
-export { Viewer } from './Viewer.tsx';
 export { ViewerProvider } from './ViewerProvider';
 export { useViewer } from './useViewer';
 export { useViewerControls } from './useViewerControls';

package/dist/index.js

@@ -1,9 +1,9 @@
-import { useStore } from "zustand/index";
-import { createContext, useContext, useMemo, useState, useEffect, useRef, useCallback } from "react";
-import { createStore } from "zustand/vanilla";
-import { createPortal } from "react-dom";
 import { jsx } from "react/jsx-runtime";
 import { Viewer as Viewer$1 } from "openseadragon";
+import { createContext, useContext, useRef, useEffect, useMemo, useState, useCallback } from "react";
+import { createStore } from "zustand/vanilla";
+import { useStore } from "zustand/index";
+import { createPortal } from "react-dom";
 const createInstanceSlice = (set) => ({
   viewer: null,
   viewerReady: !1,
@@ -14,10 +14,12 @@ const createInstanceSlice = (set) => ({
   zoomMin: null,
   zoomMax: null,
   isFullPage: !1,
+  rotation: 0,
   setZoomLevel: (zoomLevel) => set({ zoomLevel }),
   setZoomMin: (zoomMin) => set({ zoomMin }),
   setZoomMax: (zoomMax) => set({ zoomMax }),
-  setIsFullPage: (isFullPage) => set({ isFullPage })
+  setIsFullPage: (isFullPage) => set({ isFullPage }),
+  setRotation: (rotation) => set({ rotation })
 }), defaultLanguage = "en";
 function findLanguage(translations, lang = defaultLanguage) {
   if (!translations || typeof translations != "object")
@@ -154,43 +156,13 @@ const defaultManifest = { data: null, url: "", isLoading: !1, error: null }, cre
 function useViewerStore() {
   return useContext(ViewerContext) ?? orThrow("viewer hook must be used within viewer provider");
 }
+function findTileSource(canvas) {
+  return canvas.imageServiceId + "/info.json";
+}
 function useViewerStoreSelector(selector) {
   const store = useViewerStore();
   return useStore(store, selector);
 }
-function useViewer() {
-  return useViewerStoreSelector((s) => s.viewer);
-}
-function useViewerReady() {
-  return useViewerStoreSelector((s) => s.viewerReady);
-}
-function useImageInfo() {
-  const viewer = useViewer(), ready = useViewerReady();
-  return useMemo(() => {
-    if (!viewer || !ready)
-      return null;
-    const item = viewer.world.getItemAt(0);
-    if (!item)
-      return null;
-    const size = item.getContentSize();
-    return { location: item.imageToViewportRectangle(0, 0, size.x, size.y), size };
-  }, [viewer, ready]);
-}
-function Overlay({ location, children }) {
-  const viewer = useViewer(), [container] = useState(() => {
-    const el = document.createElement("div");
-    return el.style.position = "absolute", el.style.pointerEvents = "none", el;
-  });
-  return useEffect(() => {
-    if (viewer)
-      return viewer.addOverlay({ element: container, location }), () => {
-        viewer.removeOverlay(container);
-      };
-  }, [viewer, location, container]), viewer ? createPortal(children, container) : null;
-}
-function findTileSource(canvas) {
-  return canvas.imageServiceId + "/info.json";
-}
 function useCanvas() {
   const { currentIndex } = useViewerStoreSelector((s) => s.canvas), goTo = useViewerStoreSelector((s) => s.goToCanvas), next = useViewerStoreSelector((s) => s.nextCanvas), prev = useViewerStoreSelector((s) => s.prevCanvas), current = useViewerStoreSelector(
     (s) => s.manifest.data?.canvases[s.canvas.currentIndex] ?? null
@@ -213,15 +185,17 @@ function Viewer({ showControls = !0 }) {
     });
     store.getState().setViewer(viewer), viewer.addOnceHandler("open", () => {
       const state2 = store.getState();
-      state2.setViewerReady(!0), state2.setZoomLevel(viewer.viewport.getZoom()), state2.setZoomMin(viewer.viewport.getMinZoom()), state2.setZoomMax(viewer.viewport.getMaxZoom());
+      state2.setViewerReady(!0), state2.setZoomLevel(viewer.viewport.getZoom()), state2.setZoomMin(viewer.viewport.getMinZoom()), state2.setZoomMax(viewer.viewport.getMaxZoom()), state2.setRotation(viewer.viewport.getRotation());
     });
     const onZoom = () => {
       store.getState().setZoomLevel(viewer.viewport.getZoom());
+    }, onRotate = () => {
+      store.getState().setRotation(viewer.viewport.getRotation());
     };
-    return viewer.addHandler("animation-start", onZoom), viewer.addHandler("animation-finish", onZoom), () => {
-      viewer.removeHandler("animation-start", onZoom), viewer.removeHandler("animation-finish", onZoom), viewer.destroy();
+    return viewer.addHandler("animation-start", onZoom), viewer.addHandler("animation-finish", onZoom), viewer.addHandler("rotate", onRotate), () => {
+      viewer.removeHandler("animation-start", onZoom), viewer.removeHandler("animation-finish", onZoom), viewer.removeHandler("rotate", onRotate), viewer.destroy();
       const state2 = store.getState();
-      state2.setViewer(null), state2.setViewerReady(!1), state2.setZoomLevel(null), state2.setZoomMin(null), state2.setZoomMax(null), state2.setIsFullPage(!1);
+      state2.setViewer(null), state2.setViewerReady(!1), state2.setZoomLevel(null), state2.setZoomMin(null), state2.setZoomMax(null), state2.setIsFullPage(!1), state2.setRotation(0);
     };
   }, [tileSource, showControls, store]), /* @__PURE__ */ jsx(
     "div",
@@ -232,12 +206,42 @@ function Viewer({ showControls = !0 }) {
     }
   );
 }
+function useViewer() {
+  return useViewerStoreSelector((s) => s.viewer);
+}
+function useViewerReady() {
+  return useViewerStoreSelector((s) => s.viewerReady);
+}
+function useImageInfo() {
+  const viewer = useViewer(), ready = useViewerReady();
+  return useMemo(() => {
+    if (!viewer || !ready)
+      return null;
+    const item = viewer.world.getItemAt(0);
+    if (!item)
+      return null;
+    const size = item.getContentSize();
+    return { location: item.imageToViewportRectangle(0, 0, size.x, size.y), size };
+  }, [viewer, ready]);
+}
+function Overlay({ location, children }) {
+  const viewer = useViewer(), [container] = useState(() => {
+    const el = document.createElement("div");
+    return el.style.position = "absolute", el.style.pointerEvents = "none", el;
+  });
+  return useEffect(() => {
+    if (viewer)
+      return viewer.addOverlay({ element: container, location }), () => {
+        viewer.removeOverlay(container);
+      };
+  }, [viewer, location, container]), viewer ? createPortal(children, container) : null;
+}
 function ViewerProvider({ children }) {
   const [store] = useState(() => createViewerStore());
   return /* @__PURE__ */ jsx(ViewerContext.Provider, { value: store, children });
 }
 function useViewerControls(fullscreenRef) {
-  const viewer = useViewer(), store = useViewerStore(), zoomLevel = useViewerStoreSelector((s) => s.zoomLevel), zoomMin = useViewerStoreSelector((s) => s.zoomMin), zoomMax = useViewerStoreSelector((s) => s.zoomMax), isFullPage = useViewerStoreSelector((s) => s.isFullPage);
+  const viewer = useViewer(), store = useViewerStore(), zoomLevel = useViewerStoreSelector((s) => s.zoomLevel), zoomMin = useViewerStoreSelector((s) => s.zoomMin), zoomMax = useViewerStoreSelector((s) => s.zoomMax), isFullPage = useViewerStoreSelector((s) => s.isFullPage), rotation = useViewerStoreSelector((s) => s.rotation);
   useEffect(() => {
     const onFullscreenChange = () => {
       store.getState().setIsFullPage(!!document.fullscreenElement);
@@ -253,6 +257,11 @@ function useViewerControls(fullscreenRef) {
     viewer?.viewport.zoomBy(0.667);
   }, [viewer]), home = useCallback(() => {
     viewer?.viewport.goHome();
+  }, [viewer]), rotateRight = useCallback(() => {
+    if (!viewer)
+      return;
+    const rotationUpdate = viewer.viewport.getRotation() + 90;
+    viewer.viewport.setRotation(rotationUpdate);
   }, [viewer]), toggleFullPage = useCallback(() => {
     const container = fullscreenRef?.current;
     container && (document.fullscreenElement ? document.exitFullscreen() : container.requestFullscreen());
@@ -261,11 +270,13 @@ function useViewerControls(fullscreenRef) {
     zoomIn,
     zoomOut,
     home,
+    rotateRight,
     toggleFullPage,
     zoomLevel,
     zoomMin,
     zoomMax,
-    isFullPage
+    isFullPage,
+    rotation
   };
 }
 function useManifest() {

package/dist/useViewerControls.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
 /**
- * Expose zoom and full-screen controls and state
+ * Expose zoom, rotation and full-screen controls and state
  *
  * Note: Fullscreen is handled via the native Fullscreen API,
  * skipping setFullScreen/setFullPage which moves
@@ -11,9 +11,11 @@ export declare function useViewerControls(fullscreenRef: RefObject<HTMLElement |
     zoomIn: () => void;
     zoomOut: () => void;
     home: () => void;
+    rotateRight: () => void;
     toggleFullPage: () => void;
     zoomLevel: number | null;
     zoomMin: number | null;
     zoomMax: number | null;
     isFullPage: boolean;
+    rotation: number;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knaw-huc/osd-iiif-viewer",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/knaw-huc/osd-iiif-viewer.git"