dbf-mirador 4.3.1 → 4.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dbf-mirador",
-  "version": "4.3.1",
+  "version": "4.3.2",
   "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/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/plugins/index.js

@@ -1 +1,2 @@
 export * from './OSDReferences';
+export * from './poiPreviewPlugin.tsx';

package/src/plugins/poiPreviewPlugin.tsx

@@ -1,4 +1,6 @@
 import { useState, type ComponentType } from 'react';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/material/styles';
 import {
   ConnectedCompanionWindow as CompanionWindow,
   addCompanionWindow,
@@ -7,7 +9,11 @@ import {
   getCompanionWindows,
   getVisibleCanvases,
   updateCompanionWindow,
-} from 'dbf-mirador';
+  // Relative, not `from 'dbf-mirador'`: this file lives inside the dbf-mirador package
+  // itself (unlike its copy in the Strapi maps plugin, a real external consumer), and
+  // there's no self-referencing node_modules link or dist build for the package name to
+  // resolve against during local dev.
+} from '../index';
 
 // A "dumb" way to preview a POI/journey (issue #375): a Mirador companion window plugin,
 // registered alongside dbf-mirador-annotation-editor's own (see MiradorMaeViewer.tsx) via
@@ -264,9 +270,10 @@ const poiPreviewCompanionWindowPlugin = {
 };
 
 // A canvas annotation resource, as AnnotationsOverlay's own `annotations`/`searchAnnotations`
-// props carry it (see AnnotationItem#pointSelector) - a POI marker is any resource with a
-// pointSelector, exactly the condition CanvasAnnotationDisplay#pointContext draws on.
-type AnnotationResourceLike = { id: string; pointSelector?: unknown };
+// props carry it (see AnnotationItem#pointSelector/#svgSelector) - a POI marker is any resource
+// with a pointSelector (CanvasAnnotationDisplay#pointContext), a Journey's own canvas target is
+// one with an svgSelector (AnnotationsOverlay#isAnnotationAtPoint's own svgSelector branch).
+type AnnotationResourceLike = { id: string; pointSelector?: unknown; svgSelector?: unknown };
 type AnnotationListItem = { resources?: AnnotationResourceLike[] };
 
 interface AnnotationsOverlayTargetProps {
@@ -287,9 +294,10 @@ interface AnnotationsOverlayPoiClickWrapperProps {
 
 // Wraps AnnotationsOverlay (the component that owns the OSD canvas-click handler and the
 // select/deselect-annotation dispatch, see AnnotationsOverlay#toggleAnnotation) so that
-// clicking a POI marker on the canvas - not just a row in a list somewhere - opens this same
-// preview companion window a "Preview" button would (issue #375's own follow-up: pins on the
-// map itself). Re-uses an already-open preview window instead of stacking a new one per click.
+// clicking a POI marker OR a Journey's own path on the canvas - not just a row in a list
+// somewhere - opens this same preview companion window a "Preview" button would (issue #375's
+// own follow-up: pins on the map itself; issue #378 extends this to journeys). Re-uses an
+// already-open preview window instead of stacking a new one per click.
 const AnnotationsOverlayPoiClickWrapper = ({
   TargetComponent,
   targetProps,
@@ -299,6 +307,12 @@ const AnnotationsOverlayPoiClickWrapper = ({
 }: AnnotationsOverlayPoiClickWrapperProps) => {
   const { annotations = [], searchAnnotations = [], selectAnnotation } = targetProps;
 
+  const theme = useTheme();
+  // Issue #410: on a phone-width viewport there's no room for a right-hand rail next to
+  // the map, so the POI/journey preview opens as a bottom sheet instead.
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const previewPosition = isMobile ? 'bottom' : 'right';
+
   const selectAnnotationAndMaybePreview = (clickedWindowId: string, annotationId: string) => {
     selectAnnotation?.(clickedWindowId, annotationId);
 
@@ -306,17 +320,20 @@ const AnnotationsOverlayPoiClickWrapper = ({
       .flatMap((item) => item.resources ?? [])
       .find((item) => item.id === annotationId);
 
-    if (!resource?.pointSelector) return;
+    // pointSelector => POI pin, svgSelector => a Journey's own canvas target (its path/stops
+    // line) - anything else (e.g. a fragmentSelector) has no preview content, skip it.
+    if (!resource?.pointSelector && !resource?.svgSelector) return;
 
     if (existingPreviewCompanionWindowId) {
       dispatchUpdateCompanionWindow(clickedWindowId, existingPreviewCompanionWindowId, {
         annotationid: annotationId,
+        position: previewPosition,
       });
     } else {
       dispatchAddCompanionWindow(clickedWindowId, {
         annotationid: annotationId,
         content: POI_PREVIEW_CONTENT_ID,
-        position: 'right',
+        position: previewPosition,
       });
     }
   };