dbf-mirador 4.2.3

package/src/lib/MiradorCanvas.js

@@ -0,0 +1,211 @@
+import { Canvas, AnnotationPage, Annotation } from 'manifesto.js';
+import { getIiifResourceImageService } from './iiif';
+
+/**
+ * MiradorCanvas - adds additional, testable logic around Manifesto's Canvas
+ * https://iiif-commons.github.io/manifesto/classes/_canvas_.manifesto.canvas.html
+ */
+export default class MiradorCanvas {
+  /**
+   * @param {MiradorCanvas} canvas
+   */
+  constructor(canvas) {
+    this.canvas = canvas;
+  }
+
+  /** */
+  get id() {
+    return this.canvas.id;
+  }
+
+  /** */
+  getWidth() {
+    return this.canvas.getWidth();
+  }
+
+  /** */
+  getHeight() {
+    return this.canvas.getHeight();
+  }
+
+  /**
+   */
+  get aspectRatio() {
+    return this.canvas.getWidth() / this.canvas.getHeight();
+  }
+
+  /**
+   * Fetches AnnotationList URIs from canvas's otherContent property
+   *
+   * Supported otherContent types:
+   * - Objects having @type property of "sc:AnnotationList" and URI in @id
+   * - Strings being the URIs
+   */
+  get annotationListUris() {
+    return new Array(this.canvas.__jsonld.otherContent)
+      .flat()
+      .filter(
+        (otherContent) => otherContent && (typeof otherContent === 'string' || otherContent['@type'] === 'sc:AnnotationList'),
+      )
+      .map((otherContent) => (typeof otherContent === 'string' ? otherContent : otherContent['@id']));
+  }
+
+  /** */
+  get canvasAnnotationPages() {
+    return new Array(this.canvas.__jsonld.annotations)
+      .flat()
+      .filter((annotations) => annotations && annotations.type === 'AnnotationPage');
+  }
+
+  /**
+   * Will negotiate a v2 or v3 type of resource
+   */
+  get imageResource() {
+    return this.imageResources[0];
+  }
+
+  /** */
+  get imageResources() {
+    // TODO Clean up the following hack as soon as manifesto.js provides any information if an annotation body is a Choice option, and if so, whether it is the preferred one.
+    const resources = [
+      this.canvas.getImages().map((i) => i.getResource()),
+      this.canvas.getContent().map((i) => (i.__jsonld.body.type === 'Choice' ? i.__jsonld.body : i.getBody())),
+    ].flat(Infinity);
+
+    return resources.flatMap((resource) => {
+      const type = resource.type || resource.getProperty('type');
+      switch (type) {
+        case 'Choice': {
+          return new Canvas({ images: resource.items.map((r) => ({ resource: r })) }, this.canvas.options)
+            .getImages()
+            .map((img, index) => {
+              const r = img.getResource();
+              if (r) {
+                r.preferred = !index;
+              }
+              return r;
+            });
+        }
+        case 'oa:Choice': {
+          return new Canvas(
+            {
+              images: [resource.getProperty('default'), resource.getProperty('item')].flat(Infinity).map((r) => ({
+                resource: r,
+              })),
+            },
+            this.canvas.options,
+          )
+            .getImages()
+            .map((img, index) => {
+              const r = img.getResource();
+              if (r) {
+                r.preferred = !index;
+              }
+              return r;
+            });
+        }
+        default: {
+          const r = resource;
+          r.preferred = true;
+          return r;
+        }
+      }
+    });
+  }
+
+  /** */
+  get textResources() {
+    const resources = [this.canvas.getContent().map((i) => i.getBody())].flat(Infinity);
+    return resources.filter((resource) => resource.getProperty('type') === 'Text').flat();
+  }
+
+  /** */
+  get videoResources() {
+    const resources = [this.canvas.getContent().map((i) => i.getBody())].flat(Infinity);
+    return resources.filter((resource) => resource.getProperty('type') === 'Video').flat();
+  }
+
+  /** */
+  get audioResources() {
+    const resources = [this.canvas.getContent().map((i) => i.getBody())].flat(Infinity);
+
+    return resources.filter((resource) => resource.getProperty('type') === 'Sound').flat();
+  }
+
+  /** */
+  get v2VttContent() {
+    const resources = [this.canvas.getContent().map((i) => i.getBody())].flat(Infinity);
+
+    return resources.filter((resource) => resource.getProperty('format') === 'text/vtt').flat();
+  }
+
+  /** IIIF v3 captions are stored as 'supplementing' Annotations rather than in the resource content itself */
+  get v3VttContent() {
+    const resources = this.canvasAnnotationPages
+      .map((annoPage) => {
+        const manifestoAnnoPage = new AnnotationPage(annoPage, this.canvas.options);
+        return manifestoAnnoPage.getItems().map((item) => {
+          const manifestoAnnotation = new Annotation(item, this.canvas.options);
+          return manifestoAnnotation.getBody();
+        });
+      })
+      .flat(Infinity);
+
+    return resources.filter((resource) => resource.getProperty('format') === 'text/vtt').flat();
+  }
+
+  /** */
+  get resourceAnnotations() {
+    return [this.canvas.getImages(), this.canvas.getContent()].flat(Infinity);
+  }
+
+  /**
+   * Returns a given resource Annotation, based on a contained resource or body
+   * id
+   */
+  resourceAnnotation(id) {
+    return this.resourceAnnotations.find(
+      (anno) => anno.getResource().id === id || new Array(anno.getBody()).flat().some((body) => body.id === id),
+    );
+  }
+
+  /**
+   * Returns the fragment placement values if a resourceAnnotation is placed on
+   * a canvas somewhere besides the full extent
+   */
+  onFragment(id) {
+    const resourceAnnotation = this.resourceAnnotation(id);
+    if (!resourceAnnotation) return undefined;
+    // IIIF v2
+    const on = resourceAnnotation.getProperty('on');
+    // IIIF v3
+    const target = resourceAnnotation.getProperty('target');
+    const fragmentMatch = (on || target).match(/xywh=(.*)$/);
+    if (!fragmentMatch) return undefined;
+    return fragmentMatch[1].split(',').map((str) => parseInt(str, 10));
+  }
+
+  /** */
+  get iiifImageResources() {
+    return this.imageResources.filter((r) => r && getIiifResourceImageService(r)?.id);
+  }
+
+  /** */
+  get imageServiceIds() {
+    return this.iiifImageResources.map((r) => r && getIiifResourceImageService(r)?.id);
+  }
+
+  /**
+   * Get the canvas service
+   */
+  get service() {
+    return this.canvas.__jsonld.service;
+  }
+
+  /**
+   * Get the canvas label
+   */
+  getLabel(locale = undefined) {
+    return this.canvas.getLabel().length > 0 ? this.canvas.getLabel().getValue(locale) : String(this.canvas.index + 1);
+  }
+}

package/src/lib/MiradorManifest.js

@@ -0,0 +1,44 @@
+/**
+ * MiradorManifest - adds additional, testable logic around Manifesto's Manifest
+ * https://iiif-commons.github.io/manifesto/classes/_canvas_.manifesto.canvas.html
+ */
+export default class MiradorManifest {
+  /** */
+  constructor(manifest) {
+    this.manifest = manifest;
+  }
+
+  /**
+   * Returns the starting canvas specified in the manifest
+   * @param {object} manifest manifesto instance
+   * @param {number} canvasIndexFromState
+   * @return {Canvas}
+   */
+  get startCanvas() {
+    let canvasId;
+
+    const sequence = this.manifest.getSequences()[0];
+
+    if (!sequence) return undefined;
+
+    // IIIF v2
+    canvasId = sequence.getProperty('startCanvas');
+
+    if (!canvasId) {
+      // IIIF v3
+      const start = this.manifest.getProperty('start') || sequence.getProperty('start');
+
+      canvasId = start && (start.id || start.source);
+    }
+
+    return (canvasId && sequence.getCanvasById(canvasId)) || undefined;
+  }
+
+  /** */
+  canvasAt(index) {
+    const sequence = this.manifest.getSequences()[0];
+    const canvases = sequence && sequence.getCanvases();
+
+    return canvases && canvases[index];
+  }
+}

package/src/lib/MiradorViewer.jsx

@@ -0,0 +1,53 @@
+import { createRoot } from 'react-dom/client';
+import { Provider } from 'react-redux';
+import HotApp from '../components/App';
+import { filterValidPlugins } from '../extend/pluginPreprocessing';
+import createPluggableStore from '../state/createPluggableStore';
+
+/**
+ * Default Mirador instantiation
+ */
+class MiradorViewer {
+  /**
+   */
+  constructor(config, viewerConfig = {}) {
+    this.plugins = filterValidPlugins(viewerConfig.plugins || []);
+    this.config = config;
+    this.store = viewerConfig.store || createPluggableStore(this.config, this.plugins);
+
+    if (config.id) this.renderInto(document.getElementById(config.id));
+  }
+
+  /**
+   * @private
+   * @param {*} container
+   */
+  renderInto(container) {
+    this.container = container;
+    this.root = createRoot(this.container);
+
+    this.root.render(this.render());
+  }
+
+  /**
+   * Render the mirador viewer
+   */
+  render(props = {}) {
+    return (
+      <Provider store={this.store}>
+        <HotApp plugins={this.plugins} {...props} />
+      </Provider>
+    );
+  }
+
+  /**
+   * Cleanup method to unmount Mirador from the dom
+   */
+  unmount() {
+    if (!this.root) return;
+
+    this.root.unmount();
+  }
+}
+
+export default MiradorViewer;

package/src/lib/MosaicLayout.js

@@ -0,0 +1,77 @@
+import {
+  createRemoveUpdate,
+  updateTree,
+  getNodeAtPath,
+  getOtherDirection,
+  getPathToCorner,
+  Corner,
+} from 'react-mosaic-component';
+import dropRight from 'lodash/dropRight';
+
+/** */
+export default class MosaicLayout {
+  /** */
+  constructor(layout) {
+    this.layout = layout;
+  }
+
+  /** */
+  pathToCorner(corner = Corner.TOP_RIGHT) {
+    return getPathToCorner(this.layout, corner);
+  }
+
+  /** */
+  pathToParent(path) {
+    return getNodeAtPath(this.layout, dropRight(path));
+  }
+
+  /** */
+  nodeAtPath(path) {
+    return getNodeAtPath(this.layout, path);
+  }
+
+  /**
+   * addWindows - updates the layout with new windows using an algorithm ported
+   * from the react-mosaic-components examples. Will always add to the Top Right
+   * https://github.com/nomcopter/react-mosaic/blob/5081df8d1528d4c3b83a72763a46a30b3048fe95/demo/ExampleApp.tsx#L119-L154
+   * @param {Array} addedWindowIds [description]
+   */
+  addWindows(addedWindowIds) {
+    addedWindowIds.forEach((windowId, i) => {
+      const path = this.pathToCorner();
+      const parent = this.pathToParent(path);
+      const destination = this.nodeAtPath(path);
+      const direction = parent ? getOtherDirection(parent.direction) : 'row';
+      let children;
+      if (direction === 'row') {
+        children = [destination, addedWindowIds[i]];
+      } else {
+        children = [addedWindowIds[i], destination];
+      }
+      const update = {
+        path,
+        spec: {
+          $set: {
+            type: 'split',
+            direction,
+            children,
+          },
+        },
+      };
+      // We cannot batch the updates together because we need to recalculate
+      // the new location for each new window
+      this.layout = updateTree(this.layout, [update]);
+    });
+  }
+
+  /**
+   * removeWindows - Generate a set of "removeUpdates" to update layout binary
+   * tree. Then update the layout.
+   * @param  {Array} removedWindowIds
+   * @param  {Object} windowPaths - a lookup table for window paths
+   */
+  removeWindows(removedWindowIds, windowPaths) {
+    const removeUpdates = removedWindowIds.map((windowId) => createRemoveUpdate(this.layout, windowPaths[windowId]));
+    this.layout = updateTree(this.layout, removeUpdates);
+  }
+}

package/src/lib/OpenSeadragonCanvasOverlay.js

@@ -0,0 +1,114 @@
+import OpenSeadragon from 'openseadragon';
+
+/**
+ * OpenSeadragonCanvasOverlay - adapted from https://github.com/altert/OpenSeadragonCanvasOverlay
+ * used rather than an "onRedraw" function we tap into our own method. Existing
+ * repository is not published as an npm package.
+ * Code ported from https://github.com/altert/OpenSeadragonCanvasOverlay
+ * carries a BSD 3-Clause license originally authored by @altert from
+ * https://github.com/altert/OpenseadragonFabricjsOverlay
+ */
+export default class OpenSeadragonCanvasOverlay {
+  /**
+   * constructor - sets up the Canvas overlay container
+   */
+  constructor(viewer, ref) {
+    this.viewer = viewer;
+    this.ref = ref;
+
+    this.containerWidth = 0;
+    this.containerHeight = 0;
+    this.imgAspectRatio = 1;
+  }
+
+  /** */
+  get canvas() {
+    return this.canvasDiv.firstElementChild;
+  }
+
+  /** */
+  get canvasDiv() {
+    return this.ref.current;
+  }
+
+  /** */
+  get context2d() {
+    return this.canvas.getContext('2d');
+  }
+
+  /** */
+  clear() {
+    if (!this.context2d) return;
+
+    this.context2d.clearRect(0, 0, this.containerWidth, this.containerHeight);
+  }
+
+  /**
+   * resize - resizes the added Canvas overlay.
+   */
+  resize() {
+    if (this.containerWidth !== this.viewer.container.clientWidth) {
+      this.containerWidth = this.viewer.container.clientWidth;
+      this.canvasDiv.setAttribute('width', this.containerWidth);
+      this.canvas.setAttribute('width', this.containerWidth);
+    }
+
+    if (this.containerHeight !== this.viewer.container.clientHeight) {
+      this.containerHeight = this.viewer.container.clientHeight;
+      this.canvasDiv.setAttribute('height', this.containerHeight);
+      this.canvas.setAttribute('height', this.containerHeight);
+    }
+
+    this.viewportOrigin = new OpenSeadragon.Point(0, 0);
+    const boundsRect = this.viewer.viewport.getBoundsNoRotateWithMargins(true);
+    this.viewportOrigin.x = boundsRect.x;
+    this.viewportOrigin.y = boundsRect.y * this.imgAspectRatio;
+
+    this.viewportWidth = boundsRect.width;
+    this.viewportHeight = boundsRect.height * this.imgAspectRatio;
+    const image1 = this.viewer.world.getItemAt(0);
+    if (!image1) return;
+    this.imgWidth = image1.source.dimensions.x;
+    this.imgHeight = image1.source.dimensions.y;
+    this.imgAspectRatio = this.imgWidth / this.imgHeight;
+  }
+
+  /**
+   * canvasUpdate - sets up the dimensions for the canvas update to mimick image
+   * 0 dimensions. Then call provided update function.
+   * @param {Function} update
+   */
+  canvasUpdate(update) {
+    if (!this.context2d) return;
+
+    const viewportZoom = this.viewer.viewport.getZoom(true);
+    const image1 = this.viewer.world.getItemAt(0);
+    if (!image1) return;
+    const zoom = image1.viewportToImageZoom(viewportZoom);
+
+    const x = ((this.viewportOrigin.x / this.imgWidth - this.viewportOrigin.x) / this.viewportWidth) * this.containerWidth;
+    const y = ((this.viewportOrigin.y / this.imgHeight - this.viewportOrigin.y) / this.viewportHeight) * this.containerHeight;
+
+    if (this.clearBeforeRedraw) this.clear();
+    this.context2d.translate(x, y);
+    this.context2d.scale(zoom, zoom);
+
+    const center = this.viewer.viewport.getCenter();
+
+    const flip = this.viewer.viewport.getFlip();
+    if (flip) {
+      this.context2d.translate(center.x * 2, 0);
+      this.context2d.scale(-1, 1);
+    }
+
+    const rotation = this.viewer.viewport.getRotation();
+    if (rotation !== 0) {
+      this.context2d.translate(center.x, center.y);
+      this.context2d.rotate((rotation * Math.PI) / 180);
+      this.context2d.translate(-1 * center.x, -1 * center.y);
+    }
+    update();
+
+    this.context2d.setTransform(1, 0, 0, 1, 0, 0);
+  }
+}