Add functionality for viewing IIIF images and manifests

This uses OpenSeaDragon to provide a lightweight viewer for images
and manifests.

Other than paging and zoom controls, nothing else is provided
in order to keep the implementation simple.

Ref #19
Ref #69

Author: thatbudakguy

assets/icons/arrow-left.svg

@@ -47,9 +47,12 @@
   "license": "MIT",
   "dependencies": {
     "@geomatico/maplibre-cog-protocol": "^0.5.0",
+    "@iiif/presentation-2": "^1.0.4",
+    "@iiif/presentation-3": "^2.2.3",
     "@shoelace-style/shoelace": "^2.20.1",
     "@terraformer/wkt": "^2.2.1",
     "d3-scale": "^4.0.2",
-    "maplibre-gl": "^5.6.0"
+    "maplibre-gl": "^5.6.0",
+    "openseadragon": "^5.0.1"
   }
 }

assets/icons/arrow-right.svg

@@ -10,6 +10,10 @@ import { EaseToOptions } from "maplibre-gl";
 export { OgmRecord } from "./utils/record";
 export { EaseToOptions } from "maplibre-gl";
 export namespace Components {
+    interface OgmImage {
+        "record": OgmRecord;
+        "theme": 'light' | 'dark';
+    }
     interface OgmMap {
         "easeMapTo": (options: EaseToOptions) => Promise<maplibregl.Map>;
         "previewOpacity": number;
@@ -35,10 +39,15 @@ export namespace Components {
         "theme": 'light' | 'dark';
     }
     interface OgmViewer {
+        "loadRecord": (record: OgmRecord) => Promise<void>;
         "recordUrl": string;
         "theme": 'light' | 'dark';
     }
 }
+export interface OgmImageCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLOgmImageElement;
+}
 export interface OgmMapCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLOgmMapElement;
@@ -52,6 +61,24 @@ export interface OgmSettingsCustomEvent<T> extends CustomEvent<T> {
     target: HTMLOgmSettingsElement;
 }
 declare global {
+    interface HTMLOgmImageElementEventMap {
+        "imageLoaded": void;
+        "imageLoading": void;
+    }
+    interface HTMLOgmImageElement extends Components.OgmImage, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLOgmImageElementEventMap>(type: K, listener: (this: HTMLOgmImageElement, ev: OgmImageCustomEvent<HTMLOgmImageElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLOgmImageElementEventMap>(type: K, listener: (this: HTMLOgmImageElement, ev: OgmImageCustomEvent<HTMLOgmImageElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLOgmImageElement: {
+        prototype: HTMLOgmImageElement;
+        new (): HTMLOgmImageElement;
+    };
     interface HTMLOgmMapElementEventMap {
         "mapIdle": void;
         "mapLoading": void;
@@ -123,6 +150,7 @@ declare global {
         new (): HTMLOgmViewerElement;
     };
     interface HTMLElementTagNameMap {
+        "ogm-image": HTMLOgmImageElement;
         "ogm-map": HTMLOgmMapElement;
         "ogm-menubar": HTMLOgmMenubarElement;
         "ogm-metadata": HTMLOgmMetadataElement;
@@ -132,6 +160,12 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    interface OgmImage {
+        "onImageLoaded"?: (event: OgmImageCustomEvent<void>) => void;
+        "onImageLoading"?: (event: OgmImageCustomEvent<void>) => void;
+        "record"?: OgmRecord;
+        "theme"?: 'light' | 'dark';
+    }
     interface OgmMap {
         "onMapIdle"?: (event: OgmMapCustomEvent<void>) => void;
         "onMapLoading"?: (event: OgmMapCustomEvent<void>) => void;
@@ -164,6 +198,7 @@ declare namespace LocalJSX {
         "theme"?: 'light' | 'dark';
     }
     interface IntrinsicElements {
+        "ogm-image": OgmImage;
         "ogm-map": OgmMap;
         "ogm-menubar": OgmMenubar;
         "ogm-metadata": OgmMetadata;
@@ -176,6 +211,7 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "ogm-image": LocalJSX.OgmImage & JSXBase.HTMLAttributes<HTMLOgmImageElement>;
             "ogm-map": LocalJSX.OgmMap & JSXBase.HTMLAttributes<HTMLOgmMapElement>;
             "ogm-menubar": LocalJSX.OgmMenubar & JSXBase.HTMLAttributes<HTMLOgmMenubarElement>;
             "ogm-metadata": LocalJSX.OgmMetadata & JSXBase.HTMLAttributes<HTMLOgmMetadataElement>;

assets/icons/arrows-fullscreen.svg

@@ -0,0 +1,21 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+#openseadragon {
+  height: 100%;
+  background-color: var(--sl-panel-background-color);
+}
+
+.controls {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}