@knaw-huc/osd-iiif-viewer 0.3.0 → 0.4.0

package/dist/index.d.ts

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

package/dist/index.js

@@ -170,7 +170,7 @@ function useManifest() {
 function useLoadManifest() {
   return useViewerStoreSelector((s) => s.loadManifest);
 }
-function useStableProp(options) {
+function useStableState(options) {
   const [stable, setStable] = useState(options), [key, setKey] = useState(() => JSON.stringify(options)), json = JSON.stringify(options);
   return json !== key && (setKey(json), setStable(options)), stable;
 }
@@ -180,7 +180,7 @@ const defaultOptions = {
   showNavigationControl: !0
 };
 function Viewer(props) {
-  const containerRef = useRef(null), store = useViewerStore(), { vault } = useManifest(), { current } = useCanvas(), tileSource = current ? findTileSource(vault, current) : null, size = useContainerSize(containerRef), isContainerReady = size.width > 0 && size.height > 0, options = useStableProp(props.options);
+  const containerRef = useRef(null), store = useViewerStore(), { vault } = useManifest(), { current } = useCanvas(), tileSource = current ? findTileSource(vault, current) : null, size = useContainerSize(containerRef), isContainerReady = size.width && size.height, options = useStableState(props.options);
   useEffect(createOsdViewer, [isContainerReady, store, options]);
   function createOsdViewer() {
     if (!containerRef.current || !isContainerReady)
@@ -227,10 +227,10 @@ function Viewer(props) {
   );
 }
 function observeResize(element, callback) {
-  const ro = new ResizeObserver((entries) => {
+  const observer = new ResizeObserver((entries) => {
     callback(entries[0].contentRect);
   });
-  return ro.observe(element), () => ro.disconnect();
+  return observer.observe(element), () => observer.disconnect();
 }
 function useContainerSize(ref) {
   const [size, setSize] = useState({ width: 0, height: 0 });
@@ -238,9 +238,9 @@ function useContainerSize(ref) {
     const element = ref.current;
     if (!element)
       return;
-    const rect = element.getBoundingClientRect();
-    return setSize({ width: rect.width, height: rect.height }), observeResize(element, (rect2) => {
-      setSize({ width: rect2.width, height: rect2.height });
+    const { width, height } = element.getBoundingClientRect();
+    return setSize({ width, height }), observeResize(element, ({ width: width2, height: height2 }) => {
+      setSize({ width: width2, height: height2 });
     });
   }, [ref]), size;
 }
@@ -268,19 +268,33 @@ function Overlay({ location, children }) {
     return div.style.position = "absolute", div.style.pointerEvents = "none", div;
   });
   return useEffect(() => {
-    function stopPropagation(event) {
-      event.target !== overlay && event.stopPropagation();
-    }
-    return overlay.addEventListener("pointerdown", stopPropagation), () => {
-      overlay.removeEventListener("pointerdown", stopPropagation);
-    };
-  }, [overlay]), useEffect(() => {
     if (viewer)
       return viewer.addOverlay({ element: overlay, location }), () => {
         viewer.isOpen() && viewer.removeOverlay(overlay);
       };
   }, [viewer, location, overlay]), viewer ? createPortal(children, overlay) : null;
 }
+function hasMoved(from, to, threshold) {
+  return Math.hypot(to.x - from.x, to.y - from.y) > threshold;
+}
+function usePointerDown({
+  onClick,
+  onDrag,
+  onDragEnd,
+  dragThreshold = 5,
+  clickTimeLimit = 1 / 0
+}) {
+  return function(event) {
+    const from = { x: event.clientX, y: event.clientY }, startTime = Date.now(), gesture = new AbortController(), { signal } = gesture;
+    let dragging = !1;
+    window.addEventListener("pointermove", (move) => {
+      const to = { x: move.clientX, y: move.clientY };
+      dragging ||= hasMoved(from, to, dragThreshold), dragging && onDrag?.(move);
+    }, { signal }), window.addEventListener("pointerup", (up) => {
+      gesture.abort(), dragging ? onDragEnd?.(up) : Date.now() - startTime <= clickTimeLimit && onClick?.(up);
+    }, { signal }), window.addEventListener("pointercancel", () => gesture.abort(), { signal });
+  };
+}
 function ViewerProvider({ children }) {
   const [store] = useState(() => createViewerStore());
   return /* @__PURE__ */ jsx(ViewerContext.Provider, { value: store, children });
@@ -325,7 +339,8 @@ function useViewerControls(fullscreenRef) {
   };
 }
 function findThumbnail(vault, canvas, height = 120) {
-  return getImageServiceId(vault, canvas) ? `/full/,${height}/0/default.jpg` : null;
+  const id = getImageServiceId(vault, canvas);
+  return id ? `${id}/full/,${height}/0/default.jpg` : null;
 }
 export {
   Overlay,
@@ -338,6 +353,7 @@ export {
   useImageInfo,
   useLoadManifest,
   useManifest,
+  usePointerDown,
   useViewer,
   useViewerControls,
   useViewerReady,

package/dist/usePointerDown.d.ts

@@ -0,0 +1,13 @@
+import { PointerEvent as ReactPointerEvent } from 'react';
+type PointerDownOptions = {
+    onClick?: (event: PointerEvent) => void;
+    onDrag?: (event: PointerEvent) => void;
+    onDragEnd?: (event: PointerEvent) => void;
+    dragThreshold?: number;
+    clickTimeLimit?: number;
+};
+/**
+ * Tell a click apart from a drag, and leave the drag itself to the viewer
+ */
+export declare function usePointerDown({ onClick, onDrag, onDragEnd, dragThreshold, clickTimeLimit, }: PointerDownOptions): (event: ReactPointerEvent) => void;
+export {};

package/dist/useStableState.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Keep object reference intact when stringified content remains equal
+ */
+export declare function useStableState<T>(options: T): T;

package/dist/util/hasMoved.d.ts

@@ -0,0 +1,6 @@
+type Point = {
+    x: number;
+    y: number;
+};
+export declare function hasMoved(from: Point, to: Point, threshold: number): boolean;
+export {};

package/dist/util/hasMoved.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

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

package/dist/useStableProp.d.ts

@@ -1 +0,0 @@
-export declare function useStableProp<T>(options: T): T;