dbf-mirador 4.3.0-testing2 → 4.3.0-testing4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dbf-mirador",
-  "version": "4.3.0-testing2",
+  "version": "4.3.0-testing4",
   "description": "An open-source, web-based 'multi-up' viewer that supports zoom-pan-rotate functionality, ability to display/compare simple images, and images with annotations.",
   "type": "module",
   "main": "./dist/mirador.min.js",
@@ -85,6 +85,7 @@
     "uuid": "^8.1.0 || ^9.0.0 || ^10.0.0 || ^11.0.0"
   },
   "devDependencies": {
+    "@ckeditor/ckeditor5-react": "~11.0.1",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@eslint/compat": "^2.0.3",
@@ -100,6 +101,8 @@
     "@vitest/coverage-v8": "^4.1.2",
     "@vitest/ui": "^4.1.2",
     "chalk": "^5.3.0",
+    "ckeditor5": "~47.6.1",
+    "dbf-mirador": "file:.",
     "eslint": "^10.0.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
@@ -125,7 +128,8 @@
     "vitest-fetch-mock": "^0.4.2"
   },
   "overrides": {
-    "brace-expansion@1": "^1.1.16"
+    "brace-expansion@1": "^1.1.16",
+    "dbf-mirador": "file:."
   },
   "peerDependencies": {
     "@emotion/react": "^11.10.6",

package/src/assets/icons/poi-marker.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M50.002 0C30.763 0 15 15.718 15 34.902c0 7.432 2.374 14.34 6.392 20.019L45.73 96.994c3.409 4.453 5.675 3.607 8.51-.235l26.843-45.683c.542-.981.967-2.026 1.338-3.092A34.446 34.446 0 0 0 85 34.902C85 15.718 69.24 0 50.002 0zm0 16.354c10.359 0 18.597 8.218 18.597 18.548c0 10.33-8.238 18.544-18.597 18.544c-10.36 0-18.601-8.215-18.601-18.544c0-10.33 8.241-18.548 18.6-18.548z" fill="#000000"></path></svg>

package/src/components/AnnotationsOverlay.jsx

@@ -2,15 +2,16 @@ import { useRef, useEffect, useCallback, useMemo } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { useDebouncedCallback } from 'use-debounce';
+import partition from 'lodash/partition';
 import sortBy from 'lodash/sortBy';
 import xor from 'lodash/xor';
 import OpenSeadragonCanvasOverlay from '../lib/OpenSeadragonCanvasOverlay';
 import CanvasWorld from '../lib/CanvasWorld';
-import CanvasAnnotationDisplay from '../lib/CanvasAnnotationDisplay';
+import CanvasAnnotationDisplay, { poiHitTarget } from '../lib/CanvasAnnotationDisplay';
 import { buildPath2D } from '../lib/svgShapesToPath';
 
 /** @private */
-function isAnnotationAtPoint(canvasWorld, osdCanvasOverlay, resource, canvas, point) {
+function isAnnotationAtPoint({ canvasWorld, osdCanvasOverlay, viewer }, resource, canvas, point) {
   const [canvasX, canvasY] = canvasWorld.canvasToWorldCoordinates(canvas.id);
   const relativeX = point.x - canvasX;
   const relativeY = point.y - canvasY;
@@ -21,6 +22,21 @@ function isAnnotationAtPoint(canvasWorld, osdCanvasOverlay, resource, canvas, po
     return [...svgPaths].some((path) => context.isPointInPath(buildPath2D(path), relativeX, relativeY));
   }
 
+  if (resource.pointSelector) {
+    const { x, y } = resource.pointSelector;
+    const osdCanvasIndex = canvasWorld.canvases.findIndex((c) => c.id === canvas.id);
+    const viewportCanvas = viewer.world.getItemAt(osdCanvasIndex);
+    if (!viewportCanvas) return false;
+    // The icon renders at a constant on-screen size regardless of zoom (see
+    // CanvasAnnotationDisplay#pointContext), so its clickable footprint must counter-scale the
+    // same way, or the hit region would shrink/grow with the image instead of the icon.
+    const zoomRatio = viewportCanvas.viewportToImageZoom(viewer.viewport.getZoom(true));
+    const hitTarget = poiHitTarget(x, y, zoomRatio);
+    const dx = relativeX - hitTarget.x;
+    const dy = relativeY - hitTarget.y;
+    return dx * dx + dy * dy <= hitTarget.radius * hitTarget.radius;
+  }
+
   if (resource.fragmentSelector) {
     const [x, y, w, h] = resource.fragmentSelector;
     return x <= relativeX && relativeX <= x + w && y <= relativeY && relativeY <= y + h;
@@ -82,30 +98,36 @@ export function AnnotationsOverlay({
   const annotationsToContext = useCallback(
     (renderedAnnotations, currentPalette) => {
       const context = osdCanvasOverlay.context2d;
-      renderedAnnotations.forEach((annotation) => {
-        annotation.resources.forEach((resource) => {
-          const osdCanvasIndex = canvasWorld.canvases.findIndex((canvas) => canvas.id === resource.targetId);
-          if (osdCanvasIndex === -1) return;
-          const viewportCanvas = viewer.world.getItemAt(osdCanvasIndex);
-          if (!viewportCanvas) return;
-          const offset = canvasWorld.offsetByCanvas(resource.targetId);
-          const zoomRatio = viewportCanvas.viewportToImageZoom(viewer.viewport.getZoom(true));
-          const canvasAnnotationDisplay = new CanvasAnnotationDisplay({
-            hovered: hoveredAnnotationIds.includes(resource.id),
-            offset,
-            palette: {
-              ...currentPalette,
-              default: {
-                ...currentPalette.default,
-                ...(!highlightAllAnnotations && currentPalette.hidden),
-              },
+      const resources = renderedAnnotations.flatMap((annotation) => annotation.resources);
+
+      // POI pins always draw last, on top of every other annotation shape on the same canvas -
+      // notably including a Journey's own annotation target (an svg/fragment selector, not a
+      // pointSelector), which would otherwise draw in plain store order and can end up covering
+      // - and stealing clicks from - a POI pin it happens to overlap on screen.
+      const [otherResources, poiResources] = partition(resources, (resource) => !resource.pointSelector);
+
+      [...otherResources, ...poiResources].forEach((resource) => {
+        const osdCanvasIndex = canvasWorld.canvases.findIndex((canvas) => canvas.id === resource.targetId);
+        if (osdCanvasIndex === -1) return;
+        const viewportCanvas = viewer.world.getItemAt(osdCanvasIndex);
+        if (!viewportCanvas) return;
+        const offset = canvasWorld.offsetByCanvas(resource.targetId);
+        const zoomRatio = viewportCanvas.viewportToImageZoom(viewer.viewport.getZoom(true));
+        const canvasAnnotationDisplay = new CanvasAnnotationDisplay({
+          hovered: hoveredAnnotationIds.includes(resource.id),
+          offset,
+          palette: {
+            ...currentPalette,
+            default: {
+              ...currentPalette.default,
+              ...(!highlightAllAnnotations && currentPalette.hidden),
             },
-            resource,
-            selected: selectedAnnotationId === resource.id,
-            zoomRatio,
-          });
-          canvasAnnotationDisplay.toContext(context);
+          },
+          resource,
+          selected: selectedAnnotationId === resource.id,
+          zoomRatio,
         });
+        canvasAnnotationDisplay.toContext(context);
       });
     },
     [osdCanvasOverlay, viewer, canvasWorld, highlightAllAnnotations, hoveredAnnotationIds, selectedAnnotationId],
@@ -137,12 +159,12 @@ export function AnnotationsOverlay({
         .filter((resource) => {
           if (canvas.id !== resource.targetId) return false;
 
-          return isAnnotationAtPoint(canvasWorld, osdCanvasOverlay, resource, canvas, point);
+          return isAnnotationAtPoint({ canvasWorld, osdCanvasOverlay, viewer }, resource, canvas, point);
         });
 
       return annos;
     },
-    [annotations, canvasWorld, osdCanvasOverlay, searchAnnotations],
+    [annotations, canvasWorld, osdCanvasOverlay, searchAnnotations, viewer],
   );
 
   const onCanvasClick = useCallback(
@@ -188,7 +210,7 @@ export function AnnotationsOverlay({
               const x = Math.cos(degrees * degreesToRadians) * radius + point.x;
               const y = Math.sin(degrees * degreesToRadians) * radius + point.y;
 
-              if (isAnnotationAtPoint(canvasWorld, osdCanvasOverlay, anno, canvas, { x, y })) score += 1;
+              if (isAnnotationAtPoint({ canvasWorld, osdCanvasOverlay, viewer }, anno, canvas, { x, y })) score += 1;
             }
 
             return { anno, score };
@@ -206,7 +228,7 @@ export function AnnotationsOverlay({
         toggleAnnotation(annosWithScore[0].anno.id);
       }
     },
-    [annotationsAtPoint, canvasWorld, osdCanvasOverlay, toggleAnnotation],
+    [annotationsAtPoint, canvasWorld, osdCanvasOverlay, toggleAnnotation, viewer],
   );
 
   const onCanvasMouseMove = useDebouncedCallback(

package/src/components/MapViewer.jsx

@@ -0,0 +1,80 @@
+import { useEffect, useId, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { viewer } from '../init';
+import { poiPreviewPlugins } from '../plugins/poiPreviewPlugin.tsx';
+
+// Hides Mirador's generic multi-window IIIF-viewer chrome (top bar, workspace controls,
+// canvas panel) so a manifest reads as a single interactive map rather than a document
+// viewer, and opens straight onto the annotation sidebar since that's where a map's
+// POIs/journeys live. Exported so callers who need Mirador's raw `viewer()`/`Mirador.viewer()`
+// API (e.g. the integration demo config) can build on the same preset instead of copying it.
+export const defaultMapViewerConfig = {
+  theme: {
+    components: {
+      WindowTopBar: {
+        styleOverrides: {
+          root: {
+            display: 'none',
+          },
+        },
+      },
+    },
+  },
+  window: {
+    defaultSideBarPanel: 'annotations',
+    // Closed by default (issue #410): the left sidebar (annotation list, table of
+    // contents, etc.) is Mirador's own document-viewer chrome, not part of the map UI -
+    // POIs/journeys are opened through the canvas or the poiPreview companion window
+    // instead. `highlightAllAnnotations` still draws markers on the canvas regardless.
+    sideBarOpenByDefault: false,
+    highlightAllAnnotations: true,
+    panels: {
+      canvas: false,
+    },
+  },
+  workspaceControlPanel: {
+    enabled: false,
+  },
+};
+
+/**
+ * Drop-in map renderer: give it a IIIF manifest URL, get Mirador pre-configured to look
+ * and behave like a map instead of a generic multi-window viewer. Wraps `viewer()` so
+ * callers don't need to know Mirador's own instantiation/config API.
+ */
+export function MapViewer({ manifestId }) {
+  const baseId = useId().replace(/:/g, '');
+  const wrapperRef = useRef(null);
+
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return undefined;
+
+    const container = document.createElement('div');
+    container.id = `mirador-map-viewer-${baseId}`;
+    container.style.position = 'absolute';
+    container.style.inset = 0;
+    wrapper.appendChild(container);
+
+    const instance = viewer(
+      {
+        ...defaultMapViewerConfig,
+        id: container.id,
+        windows: [{ manifestId }],
+      },
+      poiPreviewPlugins,
+    );
+
+    return () => {
+      instance.unmount();
+      container.remove();
+    };
+  }, [baseId, manifestId]);
+
+  return <div ref={wrapperRef} style={{ height: '100%', position: 'relative', width: '100%' }} />;
+}
+
+MapViewer.propTypes = {
+  /** URL of the IIIF manifest to render as a map. */
+  manifestId: PropTypes.string.isRequired,
+};

package/src/components/index.js

@@ -41,6 +41,7 @@ export * from './ManifestInfo';
 export * from './ManifestListItem';
 export * from './ManifestListItemError';
 export * from './ManifestRelatedLinks';
+export * from './MapViewer';
 export * from './MinimalWindow';
 export * from './MiradorMenuButton';
 export * from './MosaicRenderPreview';

package/src/lib/AnnotationItem.js

@@ -120,4 +120,22 @@ export default class AnnotationItem {
 
     return match && match[1].split(',').map((str) => parseInt(str, 10));
   }
+
+  /** */
+  get pointSelector() {
+    const { selector } = this;
+    switch (typeof selector) {
+      case 'string':
+        return null;
+      case 'object':
+        return selector.find((s) => s.type && s.type === 'PointSelector');
+      default:
+        return null;
+    }
+  }
+
+  /** the POI's position within its journey (see mirador-annotation-editor's `dbf:journey`), or null when the POI is not part of a journey */
+  get journeyOrder() {
+    return this.resource['dbf:journey']?.order ?? null;
+  }
 }

package/src/lib/AnnotationResource.js

@@ -119,4 +119,18 @@ export default class AnnotationResource {
 
     return match && match[1].split(',').map((str) => parseInt(str, 10));
   }
+
+  /** */
+  get pointSelector() {
+    const { selector } = this;
+    if (selector && typeof selector === 'object' && selector['@type'] === 'oa:PointSelector') {
+      return { x: selector.x, y: selector.y };
+    }
+    return null;
+  }
+
+  /** the POI's position within its journey (see mirador-annotation-editor's `dbf:journey`), or null when the POI is not part of a journey */
+  get journeyOrder() {
+    return this.resource['dbf:journey']?.order ?? null;
+  }
 }

package/src/lib/CanvasAnnotationDisplay.js

@@ -4,6 +4,51 @@
  */
 import { buildPath2D } from '../lib/svgShapesToPath';
 
+/**
+ * The POI marker icon's path data and viewBox, copied from src/assets/icons/poi-marker.svg -
+ * inlined as a Path2D (rather than loaded as an image via drawImage) so it renders as a crisp
+ * vector at any zoom with no async image-load step to coordinate with the render loop. Update
+ * this constant (and the asset file, for reference) together if the icon changes.
+ */
+const POI_ICON_PATH_D =
+  'M50.002 0C30.763 0 15 15.718 15 34.902c0 7.432 2.374 14.34 6.392 20.019L45.73 96.994c3.409 4.453 5.675 3.607 8.51-.235l26.843-45.683c.542-.981.967-2.026 1.338-3.092A34.446 34.446 0 0 0 85 34.902C85 15.718 69.24 0 50.002 0zm0 16.354c10.359 0 18.597 8.218 18.597 18.548c0 10.33-8.238 18.544-18.597 18.544c-10.36 0-18.601-8.215-18.601-18.544c0-10.33 8.241-18.548 18.6-18.548z';
+const POI_ICON_VIEWBOX_SIZE = 100;
+/** The icon's own point (its pin tip), in viewBox units - this is what gets placed exactly on the annotated coordinate, not the icon's bounding-box center. Derived from the path's actual lowest point (~50, 100), not just its nearby `L` command endpoint. */
+const POI_ICON_TIP = { x: 50, y: 100 };
+/** Center/radius of the icon's circular head, in viewBox units - where a journey-order badge is drawn, overlapping the icon like a numbered pin. */
+const POI_ICON_HEAD = { x: 50, y: 34.9, radius: 18.6 };
+/** Font size of the journey-order number, relative to POI_ICON_HEAD.radius, so it's bigger than the badge circle would otherwise imply while the circle itself stays the same size. */
+const POI_ICON_HEAD_FONT_SCALE = 1.6;
+const POI_ICON_DEFAULT_FILL = '#1e88e5';
+/** Constant on-screen height (CSS px) for the POI icon, regardless of zoom - counter-scaled the same way this class already counter-scales stroke width (see `lineWidth /= zoomRatio` in svgContext). */
+export const POI_ICON_HEIGHT_PX = 44;
+/**
+ * On-screen radius (CSS px, before counter-scaling by zoomRatio) of a POI marker's
+ * clickable/tappable hit target - deliberately independent of, and larger than, the icon's
+ * visual size (POI_ICON_HEIGHT_PX). The icon tapers to a fine point at its anchor, which is
+ * hard to hit precisely with a mouse and well under the ~44-48px minimum touch target size
+ * recommended for mobile (Apple HIG / Material Design), so the tappable area is deliberately
+ * generous rather than matching the icon's own footprint.
+ */
+export const POI_ICON_HIT_RADIUS_PX = 32;
+
+/**
+ * The on-screen hit-test circle (already counter-scaled by zoomRatio, in the same coordinate
+ * space as a resource's `pointSelector`) for a POI marker anchored at (x, y). Centered on the
+ * icon's round head rather than its pin tip: the tip is the anchor point used for rendering
+ * (see pointContext/POI_ICON_TIP), but it's the least visually prominent, hardest-to-aim-for
+ * part of the icon, so hit-testing there instead of at the head would make the marker harder,
+ * not easier, to hit.
+ */
+export function poiHitTarget(x, y, zoomRatio) {
+  const iconScale = POI_ICON_HEIGHT_PX / zoomRatio / POI_ICON_VIEWBOX_SIZE;
+  return {
+    radius: POI_ICON_HIT_RADIUS_PX / zoomRatio,
+    x: x + (POI_ICON_HEAD.x - POI_ICON_TIP.x) * iconScale,
+    y: y + (POI_ICON_HEAD.y - POI_ICON_TIP.y) * iconScale,
+  };
+}
+
 export default class CanvasAnnotationDisplay {
   /** */
   constructor({ resource, palette, zoomRatio, offset, selected, hovered }) {
@@ -20,11 +65,70 @@ export default class CanvasAnnotationDisplay {
     this.context = context;
     if (this.resource.svgSelector) {
       this.svgContext();
+    } else if (this.resource.pointSelector) {
+      this.pointContext();
     } else if (this.resource.fragmentSelector) {
       this.fragmentContext();
     }
   }
 
+  /** */
+  currentPalette() {
+    if (this.hovered) return this.palette.hovered;
+    if (this.selected) return this.palette.selected;
+    return this.palette.default;
+  }
+
+  /**
+   * Draws a POI marker (IIIF PointSelector) as the SVG pin icon, at a constant on-screen size,
+   * with the icon's own tip placed exactly on the annotated point. When the annotation carries
+   * journey-order metadata (`dbf:journey.order`), also draws a numbered badge over the icon's
+   * head, so a POI's position within its journey is visible directly on the map.
+   */
+  pointContext() {
+    const { x, y } = this.resource.pointSelector;
+    const currentPalette = this.currentPalette();
+    if (currentPalette.globalAlpha === 0) return;
+
+    const iconHeight = POI_ICON_HEIGHT_PX / this.zoomRatio;
+    const iconScale = iconHeight / POI_ICON_VIEWBOX_SIZE;
+
+    this.context.save();
+    this.context.translate(this.offset.x + x, this.offset.y + y);
+    this.context.scale(iconScale, iconScale);
+    this.context.translate(-POI_ICON_TIP.x, -POI_ICON_TIP.y);
+
+    this.context.globalAlpha = currentPalette.globalAlpha ?? 1;
+    this.context.fillStyle = currentPalette.fillStyle || POI_ICON_DEFAULT_FILL;
+    this.context.fill(new Path2D(POI_ICON_PATH_D));
+
+    const { journeyOrder } = this.resource;
+    if (journeyOrder != null) {
+      this.journeyOrderBadgeContext(journeyOrder);
+    }
+
+    this.context.restore();
+  }
+
+  /**
+   * Draws a small numbered circle over the POI icon's head, in the icon's own (viewBox-unit,
+   * already-scaled/translated) coordinate space - called from within pointContext's transform,
+   * before it restores the context.
+   * @param {number} order
+   */
+  journeyOrderBadgeContext(order) {
+    this.context.beginPath();
+    this.context.arc(POI_ICON_HEAD.x, POI_ICON_HEAD.y, POI_ICON_HEAD.radius, 0, Math.PI * 2);
+    this.context.fillStyle = '#ffffff';
+    this.context.fill();
+
+    this.context.fillStyle = this.currentPalette().fillStyle || POI_ICON_DEFAULT_FILL;
+    this.context.font = `bold ${POI_ICON_HEAD.radius * POI_ICON_HEAD_FONT_SCALE}px sans-serif`;
+    this.context.textAlign = 'center';
+    this.context.textBaseline = 'middle';
+    this.context.fillText(String(order), POI_ICON_HEAD.x, POI_ICON_HEAD.y);
+  }
+
   /** */
   get svgString() {
     return this.resource.svgSelector.value;