dbf-mirador 4.2.3

package/src/lib/AnnotationResource.js

@@ -0,0 +1,122 @@
+import compact from 'lodash/compact';
+import { v4 as uuid } from 'uuid';
+
+/** */
+export default class AnnotationResource {
+  /** */
+  constructor(resource = {}) {
+    this.resource = resource;
+  }
+
+  /** */
+  isOnlyTag() {
+    return this.motivations.length === 1 && this.motivations[0] === 'oa:tagging';
+  }
+
+  /** */
+  get id() {
+    this._id = this._id || this.resource['@id'] || (this.resources[0] && this.resources[0]['@id']) || uuid();
+    return this._id;
+  }
+
+  /** */
+  get targetId() {
+    const on = this.on[0];
+    switch (typeof on) {
+      case 'string':
+        return on.replace(/#?xywh=(.*)$/, '');
+      case 'object':
+        return on.full.replace(/#?xywh=(.*)$/, '');
+      default:
+        return null;
+    }
+  }
+
+  /**
+   * @return {[Array]}
+   */
+  get motivations() {
+    return compact(new Array(this.resource.motivation)).flat();
+  }
+
+  /** */
+  get resources() {
+    return compact(new Array(this.resource.resource)).flat();
+  }
+
+  /** */
+  get on() {
+    return compact(new Array(this.resource.on)).flat();
+  }
+
+  /** */
+  get tags() {
+    if (this.isOnlyTag()) {
+      return this.resources.map((r) => r.chars);
+    }
+    return this.resources.filter((r) => r['@type'] === 'oa:Tag').map((r) => r.chars);
+  }
+
+  /** */
+  get chars() {
+    return this.resources
+      .filter((r) => r['@type'] !== 'oa:Tag')
+      .map((r) => r.chars)
+      .join(' ');
+  }
+
+  /** */
+  get selector() {
+    const on = this.on[0];
+    switch (typeof on) {
+      case 'string':
+        return on;
+      case 'object':
+        // For choices, just return the default for now. FIXME: enhance for SVG
+        // selectors
+        if (on.selector['@type'] === 'oa:Choice') {
+          return on.selector.default;
+        }
+        return on.selector;
+      default:
+        return null;
+    }
+  }
+
+  /** */
+  get svgSelector() {
+    const on = this.on[0];
+
+    switch (typeof on) {
+      case 'string':
+        return null;
+      case 'object':
+        if (on.selector && on.selector.item && on.selector.item['@type'] === 'oa:SvgSelector') {
+          return on.selector.item;
+        }
+        return null;
+      default:
+        return null;
+    }
+  }
+
+  /** */
+  get fragmentSelector() {
+    const { selector } = this;
+
+    let match;
+
+    switch (typeof selector) {
+      case 'string':
+        match = selector.match(/xywh=(.*)$/);
+        break;
+      case 'object':
+        match = selector.value.match(/xywh=(.*)$/);
+        break;
+      default:
+        return null;
+    }
+
+    return match && match[1].split(',').map((str) => parseInt(str, 10));
+  }
+}

package/src/lib/CanvasAnnotationDisplay.js

@@ -0,0 +1,148 @@
+/**
+ * CanvasAnnotationDisplay - class used to display a SVG and fragment based
+ * annotations.
+ */
+import { buildPath2D } from '../lib/svgShapesToPath';
+
+export default class CanvasAnnotationDisplay {
+  /** */
+  constructor({ resource, palette, zoomRatio, offset, selected, hovered }) {
+    this.resource = resource;
+    this.palette = palette;
+    this.zoomRatio = zoomRatio;
+    this.offset = offset;
+    this.selected = selected;
+    this.hovered = hovered;
+  }
+
+  /** */
+  toContext(context) {
+    this.context = context;
+    if (this.resource.svgSelector) {
+      this.svgContext();
+    } else if (this.resource.fragmentSelector) {
+      this.fragmentContext();
+    }
+  }
+
+  /** */
+  get svgString() {
+    return this.resource.svgSelector.value;
+  }
+
+  parseOpacity(value) {
+    if (typeof value === 'string' && value.trim().endsWith('%')) {
+      return parseFloat(value) / 100;
+    }
+    return parseFloat(value);
+  }
+
+  /** */
+  svgContext() {
+    let currentPalette;
+    if (this.hovered) {
+      currentPalette = this.palette.hovered;
+    } else if (this.selected) {
+      currentPalette = this.palette.selected;
+    } else {
+      currentPalette = this.palette.default;
+    }
+
+    if (currentPalette.globalAlpha === 0) return;
+
+    [...this.svgPaths].forEach((element) => {
+      /**
+       *  Note: Path2D is not supported in IE11.
+       *  TODO: Support multi canvas offset
+       *  One example: https://developer.mozilla.org/en-US/docs/Web/API/Path2D/addPath
+       */
+      this.context.save();
+      this.context.translate(this.offset.x, this.offset.y);
+      const p = buildPath2D(element);
+
+      // Setup styling from SVG -> Canvas
+      this.context.strokeStyle = this.color;
+      if (element.getAttribute('stroke-dasharray')) {
+        this.context.setLineDash(element.getAttribute('stroke-dasharray').split(','));
+      }
+      const svgToCanvasMap = {
+        fill: 'fillStyle',
+        stroke: 'strokeStyle',
+        'stroke-dashoffset': 'lineDashOffset',
+        'stroke-linecap': 'lineCap',
+        'stroke-linejoin': 'lineJoin',
+        'stroke-miterlimit': 'miterlimit',
+        'stroke-width': 'lineWidth',
+      };
+      Object.keys(svgToCanvasMap).forEach((key) => {
+        if (element.getAttribute(key)) {
+          this.context[svgToCanvasMap[key]] = element.getAttribute(key);
+        }
+      });
+
+      // Resize the stroke based off of the zoomRatio (currentZoom / maxZoom)
+      this.context.lineWidth /= this.zoomRatio;
+
+      // Reset the color if it is selected or hovered on
+      if (this.selected || this.hovered) {
+        this.context.strokeStyle = currentPalette.strokeStyle || currentPalette.fillStyle;
+      }
+
+      this.context.globalAlpha = currentPalette.globalAlpha;
+      // Set the globalAlpha for fill, draw the fill and then update the globalAlpha for stroke
+      if (element.getAttribute('fill') && element.getAttribute('fill') !== 'none') {
+        if (element.getAttribute('fill-opacity')) {
+          this.context.globalAlpha = currentPalette.globalAlpha * this.parseOpacity(element.getAttribute('fill-opacity'));
+        }
+        this.context.fill(p);
+      }
+
+      if (element.getAttribute('stroke-opacity')) {
+        this.context.globalAlpha = currentPalette.globalAlpha * this.parseOpacity(element.getAttribute('stroke-opacity'));
+      } else {
+        this.context.globalAlpha = currentPalette.globalAlpha;
+      }
+      this.context.stroke(p);
+      this.context.restore();
+    });
+  }
+
+  /** */
+  fragmentContext() {
+    const fragment = this.resource.fragmentSelector;
+    fragment[0] += this.offset.x;
+    fragment[1] += this.offset.y;
+
+    let currentPalette;
+    if (this.selected) {
+      currentPalette = this.palette.selected;
+    } else if (this.hovered) {
+      currentPalette = this.palette.hovered;
+    } else {
+      currentPalette = this.palette.default;
+    }
+
+    this.context.save();
+    Object.keys(currentPalette).forEach((key) => {
+      this.context[key] = currentPalette[key];
+    });
+
+    if (currentPalette.globalAlpha === 0) return;
+
+    if (currentPalette.fillStyle) {
+      this.context.fillRect(...fragment);
+    } else {
+      this.context.lineWidth = 1 / this.zoomRatio;
+      this.context.strokeRect(...fragment);
+    }
+
+    this.context.restore();
+  }
+
+  /** */
+  get svgPaths() {
+    const parser = new DOMParser();
+    const xmlDoc = parser.parseFromString(this.svgString, 'text/xml');
+    return Array.from(xmlDoc.querySelectorAll('circle, ellipse, rect, line, polygon, polyline, path'));
+  }
+}

package/src/lib/CanvasGroupings.js

@@ -0,0 +1,55 @@
+/**
+ *
+ */
+export default class CanvasGroupings {
+  /**
+   */
+  constructor(canvases, viewType = 'single') {
+    this.canvases = canvases;
+    this.viewType = viewType;
+    this._groupings = null;
+  }
+
+  /**
+   */
+  getCanvases(index) {
+    switch (this.viewType) {
+      case 'book':
+        return this.groupings()[Math.ceil(index / 2)];
+      default:
+        return this.groupings()[index];
+    }
+  }
+
+  /**
+   * Groups a set of canvases based on the view type. Single, is just an array
+   * of canvases, while book view creates pairs.
+   */
+  groupings() {
+    if (this._groupings) {
+      return this._groupings;
+    }
+    if (this.viewType === 'scroll') {
+      return [this.canvases];
+    }
+    if (this.viewType !== 'book') {
+      return this.canvases.map((canvas) => [canvas]);
+    }
+    const groupings = [];
+    this.canvases.forEach((canvas, i) => {
+      if (i === 0) {
+        groupings.push([canvas]);
+        return;
+      }
+      // Odd page
+      if (i % 2 !== 0) {
+        groupings.push([canvas]);
+      } else {
+        // Even page
+        groupings[Math.ceil(i / 2)].push(canvas);
+      }
+    });
+    this._groupings = groupings;
+    return groupings;
+  }
+}

package/src/lib/CanvasWorld.js

@@ -0,0 +1,214 @@
+import normalizeUrl from 'normalize-url';
+import { getIiifResourceImageService } from './iiif';
+
+/**
+ * CanvasWorld
+ */
+export default class CanvasWorld {
+  /**
+   * @param {Array} canvases - Array of Manifesto:Canvas objects to create a
+   * world from.
+   */
+  constructor(miradorCanvases, layers, viewingDirection = 'left-to-right') {
+    this.canvases = miradorCanvases;
+    this.layers = layers;
+    this.viewingDirection = viewingDirection;
+    this._canvasDimensions = null;
+  }
+
+  /** */
+  get canvasIds() {
+    return this.canvases.map((canvas) => canvas.id);
+  }
+
+  /** */
+  get canvasDimensions() {
+    if (this._canvasDimensions) {
+      return this._canvasDimensions;
+    }
+
+    const [dirX, dirY] = this.canvasDirection;
+    const scale =
+      dirY === 0 ? Math.min(...this.canvases.map((c) => c.getHeight())) : Math.min(...this.canvases.map((c) => c.getWidth()));
+    let incX = 0;
+    let incY = 0;
+
+    const canvasDims = this.canvases.reduce((acc, canvas) => {
+      let canvasHeight = 0;
+      let canvasWidth = 0;
+
+      if (!Number.isNaN(canvas.aspectRatio)) {
+        if (dirY === 0) {
+          // constant height
+          canvasHeight = scale;
+          canvasWidth = Math.floor(scale * canvas.aspectRatio);
+        } else {
+          // constant width
+          canvasWidth = scale;
+          canvasHeight = Math.floor(scale * (1 / canvas.aspectRatio));
+        }
+      }
+
+      acc.push({
+        canvas,
+        height: canvasHeight,
+        width: canvasWidth,
+        x: incX,
+        y: incY,
+      });
+
+      incX += dirX * canvasWidth;
+      incY += dirY * canvasHeight;
+      return acc;
+    }, []);
+
+    const worldHeight = dirY === 0 ? scale : Math.abs(incY);
+    const worldWidth = dirX === 0 ? scale : Math.abs(incX);
+
+    this._canvasDimensions = canvasDims.reduce((acc, dims) => {
+      acc.push({
+        ...dims,
+        x: dirX === -1 ? dims.x + worldWidth - dims.width : dims.x,
+        y: dirY === -1 ? dims.y + worldHeight - dims.height : dims.y,
+      });
+
+      return acc;
+    }, []);
+
+    return this._canvasDimensions;
+  }
+
+  /**
+   * contentResourceToWorldCoordinates - calculates the contentResource coordinates
+   * respective to the world.
+   */
+  contentResourceToWorldCoordinates(contentResource) {
+    const miradorCanvasIndex = this.canvases.findIndex((c) => c.imageResources.find((r) => r.id === contentResource.id));
+    const canvas = this.canvases[miradorCanvasIndex];
+    if (!canvas) return [];
+
+    const [x, y, w, h] = this.canvasToWorldCoordinates(canvas.id);
+
+    const fragmentOffset = canvas.onFragment(contentResource.id);
+    if (fragmentOffset) {
+      return [x + fragmentOffset[0], y + fragmentOffset[1], fragmentOffset[2], fragmentOffset[3]];
+    }
+    return [x, y, w, h];
+  }
+
+  /** */
+  canvasToWorldCoordinates(canvasId) {
+    const canvasDimensions = this.canvasDimensions.find((c) => c.canvas.id === canvasId);
+
+    return [canvasDimensions.x, canvasDimensions.y, canvasDimensions.width, canvasDimensions.height];
+  }
+
+  /** */
+  get canvasDirection() {
+    switch (this.viewingDirection) {
+      case 'left-to-right':
+        return [1, 0];
+      case 'right-to-left':
+        return [-1, 0];
+      case 'top-to-bottom':
+        return [0, 1];
+      case 'bottom-to-top':
+        return [0, -1];
+      default:
+        return [1, 0];
+    }
+  }
+
+  /** Get the IIIF content resource for an image */
+  contentResource(infoResponseId) {
+    const miradorCanvas = this.canvases.find((c) =>
+      c.imageServiceIds.some(
+        (id) =>
+          id &&
+          infoResponseId &&
+          normalizeUrl(id, { stripAuthentication: false }) === normalizeUrl(infoResponseId, { stripAuthentication: false }),
+      ),
+    );
+    if (!miradorCanvas) return undefined;
+    return miradorCanvas.imageResources.find(
+      (r) =>
+        normalizeUrl(getIiifResourceImageService(r).id, { stripAuthentication: false }) ===
+        normalizeUrl(infoResponseId, { stripAuthentication: false }),
+    );
+  }
+
+  /** @private */
+  getLayerMetadata(contentResource) {
+    const miradorCanvas = this.canvases.find((c) => c.imageResources.find((r) => r.id === contentResource.id));
+
+    if (!miradorCanvas) return undefined;
+
+    const resourceIndex = miradorCanvas.imageResources.findIndex((r) => r.id === contentResource.id);
+    const resource = miradorCanvas.imageResources.find((r) => r.id === contentResource.id);
+
+    const layer = this.layers && this.layers[miradorCanvas.canvas.id];
+    const imageResourceLayer = (layer && layer[contentResource.id]) || {};
+
+    return {
+      index: resourceIndex,
+      opacity: 1,
+      total: miradorCanvas.imageResources.length,
+      visibility: !!resource.preferred,
+      ...imageResourceLayer,
+    };
+  }
+
+  /** */
+  layerOpacityOfImageResource(contentResource) {
+    const layer = this.getLayerMetadata(contentResource);
+    if (!layer) return 1;
+    if (!layer.visibility) return 0;
+
+    return layer.opacity;
+  }
+
+  /** */
+  layerIndexOfImageResource(contentResource) {
+    const layer = this.getLayerMetadata(contentResource);
+    if (!layer) return undefined;
+
+    return layer.index;
+  }
+
+  /**
+   * offsetByCanvas - calculates the offset for a given canvas target. Currently
+   * assumes a horrizontal only layout.
+   */
+  offsetByCanvas(canvasTarget) {
+    const coordinates = this.canvasToWorldCoordinates(canvasTarget);
+    return {
+      x: coordinates[0],
+      y: coordinates[1],
+    };
+  }
+
+  /** */
+  hasDimensions() {
+    return this.canvasDimensions.length > 0;
+  }
+
+  /**
+   * worldBounds - calculates the "World" bounds. World in this case is canvases
+   * lined up horizontally starting from left to right.
+   */
+  worldBounds() {
+    const worldWidth = Math.max(0, ...this.canvasDimensions.map((c) => c.x + c.width));
+    const worldHeight = Math.max(0, ...this.canvasDimensions.map((c) => c.y + c.height));
+
+    return [0, 0, worldWidth, worldHeight];
+  }
+
+  /** */
+  canvasAtPoint(point) {
+    const canvasDimensions = this.canvasDimensions.find(
+      (c) => c.x <= point.x && point.x <= c.x + c.width && c.y <= point.y && point.y <= c.y + c.height,
+    );
+
+    return canvasDimensions && canvasDimensions.canvas;
+  }
+}

package/src/lib/CompanionWindowRegistry.js

@@ -0,0 +1,23 @@
+import ThumbnailNavigation from '../containers/ThumbnailNavigation';
+import WindowSideBarAnnotationsPanel from '../containers/WindowSideBarAnnotationsPanel';
+import WindowSideBarInfoPanel from '../containers/WindowSideBarInfoPanel';
+import WindowSideBarCanvasPanel from '../containers/WindowSideBarCanvasPanel';
+import AttributionPanel from '../containers/AttributionPanel';
+import SearchPanel from '../containers/SearchPanel';
+import LayersPanel from '../containers/LayersPanel';
+import CustomPanel from '../containers/CustomPanel';
+import WindowSideBarCollectionPanel from '../containers/WindowSideBarCollectionPanel';
+
+const map = {
+  annotations: WindowSideBarAnnotationsPanel,
+  attribution: AttributionPanel,
+  canvas: WindowSideBarCanvasPanel,
+  collection: WindowSideBarCollectionPanel,
+  custom: CustomPanel,
+  info: WindowSideBarInfoPanel,
+  layers: LayersPanel,
+  search: SearchPanel,
+  thumbnailNavigation: ThumbnailNavigation,
+};
+
+export default map;

package/src/lib/FullScreenHandle.jsx

@@ -0,0 +1,76 @@
+import { useCallback, useState, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Used to request or exit fullscreen using the native Fullscreen API.
+ */
+export function useFullScreenHandle() {
+  const [active, setActive] = useState(false);
+
+  /**  */
+  const handleFullScreenChange = () => {
+    setActive(document.fullscreenElement === document.body);
+  };
+
+  useEffect(() => {
+    document.addEventListener('fullscreenchange', handleFullScreenChange);
+    return () => document.removeEventListener('fullscreenchange', handleFullScreenChange);
+  }, []);
+
+  /**  */
+  const requestFullscreen = () => document.body.requestFullscreen();
+
+  const enter = useCallback(() => {
+    if (document.fullscreenElement) {
+      return document.exitFullscreen().then(() => requestFullscreen());
+    }
+    return requestFullscreen();
+  }, []);
+
+  const exit = useCallback(() => {
+    if (document.fullscreenElement !== document.body) return Promise.resolve();
+    return document.exitFullscreen();
+  }, []);
+
+  return useMemo(
+    () => ({
+      active,
+      enter,
+      exit,
+    }),
+    [active, enter, exit],
+  );
+}
+
+/**
+ * Used to set its children to fullscreen.
+ */
+export const FullScreen = ({ handle, onChange = undefined, children = null, className = '' }) => {
+  const fullScreenClasses = ['fullscreen', className, handle.active ? 'fullscreen-enabled' : ''].filter(Boolean);
+
+  useEffect(() => {
+    if (onChange) {
+      onChange(handle.active, handle);
+    }
+  }, [handle, handle.active, onChange]);
+
+  const styles = handle.active
+    ? {
+        height: '100%',
+        width: '100%',
+      }
+    : {};
+
+  return (
+    <div className={fullScreenClasses.join(' ')} style={styles}>
+      {children}
+    </div>
+  );
+};
+
+FullScreen.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  handle: PropTypes.object.isRequired,
+  onChange: PropTypes.func,
+};