dbf-mirador 4.2.3

package/src/lib/ThumbnailFactory.js

@@ -0,0 +1,310 @@
+import { Utils } from 'manifesto.js';
+import MiradorManifest from './MiradorManifest';
+import MiradorCanvas from './MiradorCanvas';
+import asArray from './asArray';
+
+/** */
+function isLevel0ImageProfile(service) {
+  const profile = service.getProfile();
+
+  // work around a bug in manifesto with normalized urls that strip # values.
+  if (profile.endsWith('#level1') || profile.endsWith('#level2')) return false;
+
+  // support IIIF v3-style profiles
+  if (profile === 'level0') return true;
+
+  return Utils.isLevel0ImageProfile(profile);
+}
+
+/** */
+function isLevel2ImageProfile(service) {
+  const profile = service.getProfile();
+
+  // work around a bug in manifesto with normalized urls that strip # values.
+  if (profile.endsWith('#level0') || profile.endsWith('#level1')) return false;
+
+  // support IIIF v3-style profiles
+  if (profile === 'level2') return true;
+
+  return Utils.isLevel2ImageProfile(profile);
+}
+
+/** */
+function iiifv3ImageServiceType(service) {
+  const type = service.getProperty('type') || [];
+
+  return asArray(type).some((v) => v.startsWith('ImageService'));
+}
+
+/** */
+function iiifImageService(resource) {
+  const service =
+    resource && resource.getServices().find((s) => iiifv3ImageServiceType(s) || Utils.isImageProfile(s.getProfile()));
+
+  if (!service) return undefined;
+
+  return service;
+}
+
+/** */
+class ThumbnailFactory {
+  /** */
+  constructor(iiifOpts = {}, { getMiradorCanvas, getMiradorManifest }) {
+    this.iiifOpts = iiifOpts;
+    this.getMiradorCanvas = getMiradorCanvas;
+    this.getMiradorManifest = getMiradorManifest;
+  }
+
+  /** */
+  static staticImageUrl(resource) {
+    return {
+      height: resource.getProperty('height'),
+      url: resource.id,
+      width: resource.getProperty('width'),
+    };
+  }
+
+  /**
+   * Selects the image resource that is representative of the given canvas.
+   * @param {Object} canvas A Manifesto Canvas
+   * @return {Object} A Manifesto Image Resource
+   */
+  static getPreferredImage(miradorCanvas) {
+    return miradorCanvas.iiifImageResources[0] || miradorCanvas.imageResource;
+  }
+
+  /**
+   * Chooses the best available image size based on a target area (w x h) value.
+   * @param {Object} service A IIIF Image API service that has a `sizes` array
+   * @param {Number} targetArea The target area value to compare potential sizes against
+   * @return {Object|undefined} The best size, or undefined if none are acceptable
+   */
+  static selectBestImageSize(service, targetArea) {
+    const sizes = asArray(service.getProperty('sizes'));
+
+    let closestSize = {
+      default: true,
+      height: service.getProperty('height') || Number.MAX_SAFE_INTEGER,
+      width: service.getProperty('width') || Number.MAX_SAFE_INTEGER,
+    };
+
+    /** Compare the total image area to our target */
+    const imageFitness = (test) => test.width * test.height - targetArea;
+
+    /** Look for the size that's just bigger than we prefer... */
+    closestSize = sizes.reduce((best, test) => {
+      const score = imageFitness(test);
+
+      if (score < 0) return best;
+
+      return Math.abs(score) < Math.abs(imageFitness(best)) ? test : best;
+    }, closestSize);
+
+    /** .... but not "too" big; we'd rather scale up an image than download too much */
+    if (closestSize.width * closestSize.height > targetArea * 6) {
+      closestSize = sizes.reduce(
+        (best, test) => (Math.abs(imageFitness(test)) < Math.abs(imageFitness(best)) ? test : best),
+        closestSize,
+      );
+    }
+
+    if (closestSize.default) return undefined;
+
+    return closestSize;
+  }
+
+  /**
+   * Determines the appropriate thumbnail to use to represent an Image Resource.
+   * @param {Object} resource The Image Resource from which to derive a thumbnail
+   * @return {Object} The thumbnail URL and any spatial dimensions that can be determined
+   */
+  // eslint-disable-next-line complexity
+  iiifThumbnailUrl(resource) {
+    let size;
+    let width;
+    let height;
+    const minDimension = 120;
+    let maxHeight = minDimension;
+    let maxWidth = minDimension;
+    const { maxHeight: requestedMaxHeight, maxWidth: requestedMaxWidth } = this.iiifOpts;
+
+    if (requestedMaxHeight) maxHeight = Math.max(requestedMaxHeight, minDimension);
+    if (requestedMaxWidth) maxWidth = Math.max(requestedMaxWidth, minDimension);
+
+    const service = iiifImageService(resource);
+
+    if (!service) return ThumbnailFactory.staticImageUrl(resource);
+
+    const aspectRatio = resource.getWidth() && resource.getHeight() && resource.getWidth() / resource.getHeight();
+    const target = requestedMaxWidth && requestedMaxHeight ? requestedMaxWidth * requestedMaxHeight : maxHeight * maxWidth;
+    const closestSize = ThumbnailFactory.selectBestImageSize(service, target);
+
+    if (closestSize) {
+      // Embedded service advertises an appropriate size
+      width = closestSize.width;
+      height = closestSize.height;
+      size = `${width},${height}`;
+    } else if (isLevel0ImageProfile(service)) {
+      /** Bail if the best available size is the full size.. maybe we'll get lucky with the @id */
+      if (!service.getProperty('height') && !service.getProperty('width')) {
+        return ThumbnailFactory.staticImageUrl(resource);
+      }
+    } else if (requestedMaxHeight && requestedMaxWidth) {
+      // IIIF level 2, no problem.
+      if (isLevel2ImageProfile(service)) {
+        size = `!${maxWidth},${maxHeight}`;
+        width = maxWidth;
+        height = maxHeight;
+
+        if (aspectRatio && aspectRatio > 1) height = Math.round(maxWidth / aspectRatio);
+        if (aspectRatio && aspectRatio < 1) width = Math.round(maxHeight * aspectRatio);
+      } else if (maxWidth / maxHeight < aspectRatio) {
+        size = `${maxWidth},`;
+        width = maxWidth;
+        if (aspectRatio) height = Math.round(maxWidth / aspectRatio);
+      } else {
+        size = `,${maxHeight}`;
+        height = maxHeight;
+        if (aspectRatio) width = Math.round(maxHeight * aspectRatio);
+      }
+    } else if (requestedMaxHeight && !requestedMaxWidth) {
+      size = `,${maxHeight}`;
+      height = maxHeight;
+      if (aspectRatio) width = Math.round(maxHeight * aspectRatio);
+    } else if (!requestedMaxHeight && requestedMaxWidth) {
+      size = `${maxWidth},`;
+      width = maxWidth;
+      if (aspectRatio) height = Math.round(maxWidth / aspectRatio);
+    } else {
+      size = `,${minDimension}`;
+      height = minDimension;
+      if (aspectRatio) width = Math.round(height * aspectRatio);
+    }
+
+    const region = 'full';
+    const quality = Utils.getImageQuality(service.getProfile());
+    const id = service.id.replace(/\/+$/, '');
+    const format = this.getFormat(service);
+    return {
+      height,
+      url: [id, region, size, 0, `${quality}.${format}`].join('/'),
+      width,
+    };
+  }
+
+  /**
+   * Figure out what format thumbnail to use by looking at the preferred formats
+   * on offer, and selecting a format shared in common with the application's
+   * preferred format list.
+   *
+   * Fall back to jpg, which is required to work for all IIIF services.
+   */
+  getFormat(service) {
+    const { preferredFormats = [] } = this.iiifOpts;
+    const servicePreferredFormats = service.getProperty('preferredFormats');
+
+    if (!servicePreferredFormats) return 'jpg';
+
+    const filteredFormats = servicePreferredFormats.filter((value) => preferredFormats.includes(value));
+
+    // this is a format found in common between the preferred formats of the service
+    // and the application
+    if (filteredFormats[0]) return filteredFormats[0];
+
+    // IIIF Image API guarantees jpg support; if it wasn't provided by the service
+    // but the application is fine with it, we might as well try it.
+    if (!servicePreferredFormats.includes('jpg') && preferredFormats.includes('jpg')) {
+      return 'jpg';
+    }
+
+    // there were no formats in common, and the application didn't want jpg... so
+    // just trust that the IIIF service is advertising something useful?
+    if (servicePreferredFormats[0]) return servicePreferredFormats[0];
+
+    // JPG support is guaranteed by the spec, so it's a good worst-case fallback
+    return 'jpg';
+  }
+
+  /**
+   * Determines the content resource from which to derive a thumbnail to represent a given resource.
+   * This method is recursive.
+   * @param {Object} resource A IIIF resource to derive a thumbnail from
+   * @return {Object|undefined} The Image Resource to derive a thumbnail from, or undefined
+   * if no appropriate resource exists
+   */
+  getSourceContentResource(resource) {
+    const thumbnail = resource.getThumbnail();
+
+    // Any resource type may have a thumbnail
+    if (thumbnail) {
+      if (typeof thumbnail.__jsonld === 'string') return thumbnail.__jsonld;
+
+      // Prefer an image's ImageService over its image's thumbnail
+      // Note that Collection, Manifest, and Canvas don't have `getType()`
+      if (!resource.isCollection() && !resource.isManifest() && !resource.isCanvas()) {
+        if (resource.getType() === 'image' && iiifImageService(resource) && !iiifImageService(thumbnail)) {
+          return resource;
+        }
+      }
+
+      return thumbnail;
+    }
+
+    if (resource.isCollection()) {
+      const firstManifest = resource.getManifests()[0];
+      if (firstManifest) return this.getSourceContentResource(firstManifest);
+
+      return undefined;
+    }
+
+    if (resource.isManifest()) {
+      const miradorManifest = this.getMiradorManifest(resource);
+      const canvas = miradorManifest.startCanvas || miradorManifest.canvasAt(0);
+      if (canvas) return this.getSourceContentResource(canvas);
+
+      return undefined;
+    }
+
+    if (resource.isCanvas()) {
+      const image = ThumbnailFactory.getPreferredImage(this.getMiradorCanvas(resource));
+      if (image) return this.getSourceContentResource(image);
+
+      return undefined;
+    }
+
+    if (resource.getType() === 'image') {
+      return resource;
+    }
+
+    return undefined;
+  }
+
+  /**
+   * Gets a thumbnail representing the resource.
+   * @return {Object|undefined} A thumbnail representing the resource, or undefined if none could
+   * be determined
+   */
+  get(resource) {
+    if (!resource) return undefined;
+
+    // Determine which content resource we should use to derive a thumbnail
+    const sourceContentResource = this.getSourceContentResource(resource);
+    if (!sourceContentResource) return undefined;
+
+    // Special treatment for external resources
+    if (typeof sourceContentResource === 'string') return { url: sourceContentResource };
+
+    return this.iiifThumbnailUrl(sourceContentResource);
+  }
+}
+
+/** */
+function getBestThumbnail(resource, iiifOpts = {}) {
+  return new ThumbnailFactory(iiifOpts, {
+    getMiradorCanvas: (r) => new MiradorCanvas(r),
+    getMiradorManifest: (r) => new MiradorManifest(r),
+  }).get(resource);
+}
+
+export { ThumbnailFactory };
+export default getBestThumbnail;

package/src/lib/TruncatedHit.js

@@ -0,0 +1,34 @@
+/** */
+export default class TruncatedHit {
+  /** */
+  constructor(hit, annotation = undefined, { maxChars = 200, minimum = 20 } = {}) {
+    this.hit = hit;
+    this.annotation = annotation;
+    this.maxChars = maxChars || 200;
+    this.minimum = minimum || 20;
+  }
+
+  /** */
+  get match() {
+    return this.hit.match || (this.annotation && this.annotation.resource.resource.chars) || '-';
+  }
+
+  /** */
+  get charsOnSide() {
+    const resultingChars = (this.maxChars - this.match.length) / 2;
+    const measured = [(this.hit.before || '').length, (this.hit.after || '').length].filter((length) => length > 0);
+    return Math.max(Math.min(resultingChars, ...measured), this.minimum);
+  }
+
+  /** */
+  get before() {
+    if (!this.hit.before) return '';
+    return this.hit.before.substring(this.hit.before.length - this.charsOnSide, this.hit.before.length);
+  }
+
+  /** */
+  get after() {
+    if (!this.hit.after) return '';
+    return this.hit.after.substring(0, Math.min(this.hit.after.length, this.charsOnSide));
+  }
+}

package/src/lib/asArray.js

@@ -0,0 +1,11 @@
+/**
+ */
+export default function asArray(value) {
+  if (value === undefined) return [];
+
+  if (!Array.isArray(value)) {
+    return [value];
+  }
+
+  return value;
+}

package/src/lib/htmlRules.js

@@ -0,0 +1,28 @@
+// Only remove security related tags and attributes. Allow each other.
+const liberal = {};
+
+// No html at all. Only text will remain.
+const noHtml = {
+  ALLOWED_TAGS: [],
+};
+
+// Presentation API 2 suggestion.
+const iiif = {
+  ALLOWED_ATTR: ['href', 'src', 'alt'],
+  ALLOWED_TAGS: ['a', 'b', 'br', 'i', 'img', 'p', 'span'],
+};
+
+// Rule set that is used in Mirador 2.
+const mirador2 = {
+  ALLOWED_ATTR: ['href', 'target', 'src', 'alt', 'dir'],
+  ALLOWED_TAGS: ['a', 'b', 'br', 'i', 'img', 'p', 'span', 'strong', 'em', 'ul', 'ol', 'li'],
+};
+
+const htmlRules = {
+  iiif,
+  liberal,
+  mirador2,
+  noHtml,
+};
+
+export default htmlRules;

package/src/lib/iiif.js

@@ -0,0 +1,12 @@
+import { Utils } from 'manifesto.js';
+
+/** @returns an IIIF image service for the given resource */
+export function getIiifResourceImageService(resource) {
+  return resource
+    .getServices()
+    .find(
+      (service) =>
+        (service.getProfile && Utils.isImageProfile(service.getProfile() || '')) ||
+        Utils.isImageServiceType(service.getIIIFResourceType() || ''),
+    );
+}

package/src/lib/index.js

@@ -0,0 +1,23 @@
+import getBestThumbnail, { ThumbnailFactory } from './ThumbnailFactory';
+
+export { getBestThumbnail, ThumbnailFactory };
+
+export { default as AnnotationFactory } from './AnnotationFactory';
+export { default as AnnotationItem } from './AnnotationItem';
+export { default as AnnotationList } from './AnnotationList';
+export { default as AnnotationPage } from './AnnotationPage';
+export { default as AnnotationResource } from './AnnotationResource';
+export { default as CanvasAnnotationDisplay } from './CanvasAnnotationDisplay';
+export { default as CanvasGroupings } from './CanvasGroupings';
+export { default as CanvasWorld } from './CanvasWorld';
+export { default as CompanionWindowRegistry } from './CompanionWindowRegistry';
+export { default as MiradorCanvas } from './MiradorCanvas';
+export { default as MiradorManifest } from './MiradorManifest';
+export { default as MiradorViewer } from './MiradorViewer';
+export { default as MosaicLayout } from './MosaicLayout';
+export { default as OpenSeadragonCanvasOverlay } from './OpenSeadragonCanvasOverlay';
+
+export { default as TruncatedHit } from './TruncatedHit';
+export { default as asArray } from './asArray';
+export { default as htmlRules } from './htmlRules';
+export * from './readImageMetadata';

package/src/lib/readImageMetadata.js

@@ -0,0 +1,21 @@
+/** Extract metadata from an image File */
+export function readImageMetadata(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.addEventListener('load', () => {
+      const image = new Image();
+      image.addEventListener('load', () => {
+        resolve({
+          height: image.height,
+          name: file.name,
+          type: file.type,
+          url: reader.result,
+          width: image.width,
+        });
+      });
+      image.src = reader.result;
+    });
+    reader.readAsDataURL(file);
+  });
+}

package/src/lib/svgShapesToPath.js

@@ -0,0 +1,49 @@
+export function buildPath2D(element) {
+  const tag = element.tagName.toLowerCase();
+  const num = (attr) => parseFloat(element.getAttribute(attr)) || 0;
+
+  if (tag === 'path') return new Path2D(element.getAttribute('d'));
+
+  const path = new Path2D();
+  SHAPE_BUILDERS[tag]?.(path, element, num);
+  return path;
+}
+
+const SHAPE_BUILDERS = {
+  circle: (path, el, num) => {
+    path.arc(num('cx'), num('cy'), num('r'), 0, 2 * Math.PI);
+  },
+  ellipse: (path, el, num) => {
+    path.ellipse(num('cx'), num('cy'), num('rx'), num('ry'), 0, 0, 2 * Math.PI);
+  },
+  rect: (path, el, num) => {
+    path.rect(num('x'), num('y'), num('width'), num('height'));
+  },
+  line: (path, el, num) => {
+    path.moveTo(num('x1'), num('y1'));
+    path.lineTo(num('x2'), num('y2'));
+  },
+  polygon: (path, el) => pointElementPath(path, el, true),
+  polyline: (path, el) => pointElementPath(path, el, false),
+};
+
+function pointElementPath(path, element, closed) {
+  const points = parsePoints(element.getAttribute('points'));
+  points.forEach(([x, y], i) => {
+    if (i === 0) path.moveTo(x, y);
+    else path.lineTo(x, y);
+  });
+  if (closed) path.closePath();
+}
+
+function parsePoints(points) {
+  const nums = points
+    .trim()
+    .split(/[\s,]+/)
+    .map(Number);
+  const pointsList = [];
+  for (let i = 0; i < nums.length - 1; i += 2) {
+    pointsList.push([nums[i], nums[i + 1]]);
+  }
+  return pointsList;
+}

package/src/locales/README.md

@@ -0,0 +1,60 @@
+# Contributing a Mirador translation
+
+Mirador is built with internationalization and translation support. It uses a translation file and [react-i18next](https://react.i18next.com/) to provide translations in user interface elements.
+
+## Getting started
+To contribute a new language to Mirador, you will need to convert the strings contained in [en/translation.json](en/translation.json) to the target language.
+
+So we would want to create a directory for the target language using the iso language code that copies from the `en/translation.json` file. e.g. `fr/translation.json`.
+
+```sh
+$ mkdir src/locales/fr && cp src/locales/en/translation.json src/locales/fr/translation.json
+```
+
+For example, this subset of the English file:
+
+```javascript
+// src/locales/en/translation.json
+{
+  "translation": {
+    "aboutThisItem": "About this item",
+    "addedFromUrl": "(Added from URL)",
+    "addManifestUrl": "Resource location",
+    "addManifestUrlHelp": "The URL of a IIIF resource",
+    "addResource": "Add resource",
+    "annotationCanvasLabel_1/1": "Item: [{{label}}]",
+...
+```
+
+Would look like this in French.
+
+```javascript
+// src/locales/fr/translation.json
+{
+  "translation": {
+    "aboutThisItem": "A propos de cet item",
+    "addedFromUrl": "(Ajouté depuis une URL)",
+    "addManifestUrl": "Emplacement de la ressource",
+    "addManifestUrlHelp": "L'URL de la ressource IIIF",
+    "addResource": "Ajouter une ressource",
+    "annotationCanvasLabel_1/1": "Item: [{{label}}]",
+...
+```
+
+Strings contained in double curly braces `{{}}` should not be changed.
+
+The [`i18n.js`](../i18n.js) file should also be updated for the new language.
+
+Lastly, you'll want to add the new locale and native language to the `availableLanguages` section in the [settings file](/src/config/settings.js).
+
+```javascript
+// src/config/settings.js
+...
+availableLanguages: {
+    de: 'Deutsch',
+    en: 'English',
+    fr: 'Français',
+...
+```
+
+This will add the new language to the Language selection drop down as well as allow Mirador implementers to opt-out of including the language in their installation.