ogm-viewer 0.3.0 → 0.5.0

package/dist/collection/components/ogm-attributes/ogm-attributes.js

@@ -0,0 +1,112 @@
+import { h } from "@stencil/core";
+import Autolinker from "autolinker";
+const LABEL_KEYS = ['name', 'title', 'label', 'id'];
+const getFeatureLabel = (feature) => {
+    const originalKeys = Object.keys(feature.properties || {});
+    if (originalKeys.length === 0)
+        return;
+    const key = LABEL_KEYS.map(k => originalKeys.find(ok => ok.toLowerCase() === k)).find(Boolean);
+    if (key)
+        return feature.properties?.[key];
+};
+export class OgmAttributes {
+    features = [];
+    featureSelected;
+    currentIndex = 0;
+    onFeaturesChange() {
+        this.currentIndex = 0;
+    }
+    onCurrentIndexChange() {
+        const feature = this.features[this.currentIndex];
+        if (feature)
+            this.featureSelected.emit(feature);
+    }
+    render() {
+        if (this.features.length === 0)
+            return null;
+        const feature = this.features[this.currentIndex];
+        const multiple = this.features.length > 1;
+        const label = getFeatureLabel(feature);
+        return (h("wa-scroller", { orientation: "vertical" }, h("table", { class: "attribute-table" }, multiple && label ? (h("thead", null, h("tr", { class: "header" }, h("td", { colSpan: 2 }, h("div", { class: "pagination" }, h("wa-button", { appearance: "plain", disabled: this.currentIndex === 0, onClick: () => this.currentIndex-- }, h("wa-icon", { name: "arrow-left", label: "Previous feature", canvas: "auto" })), label && (h("div", { class: "label" }, h("div", null, label))), h("div", { class: "count" }, ' ', "(", this.currentIndex + 1, "/", this.features.length, ")"), h("wa-button", { appearance: "plain", disabled: this.currentIndex === this.features.length - 1, onClick: () => this.currentIndex++ }, h("wa-icon", { name: "arrow-right", label: "Next feature", canvas: "auto" }))))))) : (label && (h("thead", null, h("tr", { class: "header" }, h("td", { colSpan: 2 }, h("div", { class: "label" }, h("div", null, label))))))), h("tbody", null, Object.entries(feature.properties || {}).map(([key, value]) => (h("tr", { key: key }, h("td", { class: "key" }, key), h("td", { class: "value", innerHTML: Autolinker.link(value.toString(), { hashtag: false, mention: false, phone: false }) }))))))));
+    }
+    static get is() { return "ogm-attributes"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ogm-attributes.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ogm-attributes.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "features": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "MapGeoJSONFeature[]",
+                    "resolved": "MapGeoJSONFeature[]",
+                    "references": {
+                        "MapGeoJSONFeature": {
+                            "location": "import",
+                            "path": "maplibre-gl",
+                            "id": "node_modules::MapGeoJSONFeature",
+                            "referenceLocation": "MapGeoJSONFeature"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "featureSelected",
+                "name": "featureSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "MapGeoJSONFeature",
+                    "resolved": "GeoJSONFeature & { layer: (Omit<FillLayerSpecification, \"source\"> | Omit<LineLayerSpecification, \"source\"> | Omit<SymbolLayerSpecification, \"source\"> | Omit<CircleLayerSpecification, \"source\"> | Omit<HeatmapLayerSpecification, \"source\"> | Omit<FillExtrusionLayerSpecification, \"source\"> | Omit<RasterLayerSpecification, \"source\"> | Omit<HillshadeLayerSpecification, \"source\"> | Omit<ColorReliefLayerSpecification, \"source\"> | Omit<BackgroundLayerSpecification, \"source\">) & { source: string; }; source: string; sourceLayer?: string; state: { [key: string]: any; }; }",
+                    "references": {
+                        "MapGeoJSONFeature": {
+                            "location": "import",
+                            "path": "maplibre-gl",
+                            "id": "node_modules::MapGeoJSONFeature",
+                            "referenceLocation": "MapGeoJSONFeature"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "features",
+                "methodName": "onFeaturesChange"
+            }, {
+                "propName": "currentIndex",
+                "methodName": "onCurrentIndexChange"
+            }];
+    }
+}

package/dist/collection/components/ogm-image/ogm-image.css

@@ -7,7 +7,7 @@
 
 #openseadragon {
   height: 100%;
-  background-color: var(--sl-panel-background-color);
+  background-color: var(--wa-color-surface-raised);
 }
 
 .controls {

package/dist/collection/components/ogm-image/ogm-image.js

@@ -1,15 +1,19 @@
 import { h, Host } from "@stencil/core";
 import { Viewer } from "openseadragon";
 import { getElement, findElement } from "../../lib/elements";
+import { referenceError } from "../../lib/errors";
 export class OgmImage {
     el;
-    record;
+    source;
     theme;
     padding = 0;
     imageLoaded;
     imageLoading;
+    previewError;
     // OpenSeadragon viewer instance
     viewer;
+    // Guards against reporting more than one error per load attempt
+    errorReported = false;
     // Set up OpenSeadragon viewer on load
     async componentDidLoad() {
         this.viewer = new Viewer({
@@ -26,13 +30,24 @@ export class OgmImage {
             nextButton: getElement(this.el, '.next'),
             previousButton: getElement(this.el, '.prev'),
         });
+        // Clear loading state whether we succeeded or failed
         this.viewer.addHandler('open', () => this.imageLoaded.emit());
-        if (this.record)
+        // Surface OpenSeaDragon decode errors here
+        this.viewer.addHandler('open-failed', event => {
+            this.imageLoaded.emit();
+            this.reportError(new Error(event.message));
+        });
+        // If we do have a source, load the images
+        if (this.source)
             await this.loadImages();
     }
-    // Update preview when record changes
-    async onRecordChange() {
-        if (this.record)
+    // Destroy the viewer when we are removed from the DOM
+    disconnectedCallback() {
+        this.viewer?.destroy();
+    }
+    // Update preview when source changes
+    async onSourceChange() {
+        if (this.source)
             await this.loadImages();
     }
     async onPaddingChange() {
@@ -46,14 +61,29 @@ export class OgmImage {
     // Get all of the IIIF image URLs and send them to OpenSeadragon
     // This makes a request to fetch and cache the manifest
     async loadImages() {
+        this.errorReported = false;
         this.imageLoading.emit();
-        const images = await this.record.references.iiifImageUrls();
-        if (!images)
-            throw new Error('No IIIF images found for record');
-        this.viewer.open(images);
+        try {
+            const images = await this.source.getIIIFImageUrls();
+            if (!images)
+                throw new Error('No IIIF images found for source');
+            this.viewer.open(images);
+        }
+        catch (error) {
+            console.error(`Error loading IIIF images for ${this.source.url}:`, error);
+            this.imageLoaded.emit();
+            this.reportError(error);
+        }
+    }
+    // Emit a single preview error per load attempt
+    reportError(error) {
+        if (this.errorReported || !this.source)
+            return;
+        this.errorReported = true;
+        this.previewError.emit(referenceError(error, this.source.label(), this.source.url));
     }
     render() {
-        return (h(Host, { key: 'c28429837984f688efbd0fd7be5d2c22cb213109' }, h("div", { key: 'ab4de1759a7d962840674d248cf9a15bc5f4e2b2', id: "openseadragon" }, h("div", { key: '59be4dd45b938f81787239162295de0f3db50401', class: "controls" }, h("sl-button", { key: '14bda0b404dd75a43d146ffa835ce82fbc338655', class: "zoom-in", size: "small", circle: true }, h("sl-icon", { key: '620b15a8ecca41fe547d2aa9a85b190aedfee4bf', name: "zoom-in", label: "Zoom In" })), h("sl-button", { key: 'e12c3c58fd65e04fc2568f941aab72101d443bf8', class: "zoom-out", size: "small", circle: true }, h("sl-icon", { key: '99938bb923d76ebd30f4aa344d714deabdd16e6b', name: "zoom-out", label: "Zoom Out" })), h("sl-button", { key: '2836926f056be59df8c74034c032edea1a2b42f6', class: "home", size: "small", circle: true }, h("sl-icon", { key: 'a1e532707374c5161462483e7b0ff84d62ac28b2', name: "house", label: "Reset View" })), h("sl-button", { key: 'a328228cf8b5ca07d08d972c066ad6cba7cb76d1', class: "full-page", size: "small", circle: true }, h("sl-icon", { key: '743ba0fa2af8df3fe00e037c1e2d89db328001f1', name: "arrows-fullscreen", label: "Full Screen" })), h("sl-button", { key: '100f2e7be8b44aab83e9e99de2f04d6897a2e5a6', class: "next", size: "small", circle: true }, h("sl-icon", { key: 'f1b9f5c24913f27b41e5dfa665bd62764f597a20', name: "arrow-right", label: "Next" })), h("sl-button", { key: '0b6c31c6af12718d256703f4f3b47d1879c14d9a', class: "prev", size: "small", circle: true }, h("sl-icon", { key: '1d9dce41e3dfd2be557417a19309f3fc888a84a2', name: "arrow-left", label: "Previous" }))))));
+        return (h(Host, { key: 'ebbebaddac72024a3b311e0e0e501267a83d1e95' }, h("div", { key: '4f171256535cfd11430e2269fda389ffae3cedae', id: "openseadragon" }, h("div", { key: 'c308186a13fd6b8e0b1fadbf1fd1e6924631f9d6', class: "controls" }, h("wa-button", { key: '1f9e0c4c6d881bf09d7ceb160f470992d71ebe07', class: "zoom-in", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: 'cbacb0a388de2c7f349e25172027874a0224a678', name: "zoom-in", label: "Zoom In", canvas: "auto" })), h("wa-button", { key: 'dd8d7e9c5584b124ae105b2187100964f5e3a02a', class: "zoom-out", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: '2b5acf2e07c99df9556692bf534bb3847506e4d4', name: "zoom-out", label: "Zoom Out", canvas: "auto" })), h("wa-button", { key: '5534a5c77ea20a1f77544e5acd99d4247dd3d287', class: "home", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: 'faadb8ea57bf1b831b292eaf66bcea39b7e215d1', name: "house", label: "Reset View", canvas: "auto" })), h("wa-button", { key: '8979cf58a94da89e0e2d132a92fe45323f07de01', class: "full-page", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: '12cb3224e7f14258376c1c0bf6ffc5abda5c2252', name: "arrows-fullscreen", label: "Full Screen", canvas: "auto" })), h("wa-button", { key: 'e79c37f27ff14d5c4991ff30ff88aada467214ec', class: "next", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: 'ee10870ace583257393c53ba12b73ab3b015371b', name: "arrow-right", label: "Next", canvas: "auto" })), h("wa-button", { key: '9d8999e199b7b6338261eb16a655d2199520cf22', class: "prev", size: "s", appearance: "filled-outlined", pill: true }, h("wa-icon", { key: 'fde1a9022b9e5f90e269c75ce87943808031e021', name: "arrow-left", label: "Previous", canvas: "auto" }))))));
     }
     static get is() { return "ogm-image"; }
     static get encapsulation() { return "shadow"; }
@@ -69,18 +99,16 @@ export class OgmImage {
     }
     static get properties() {
         return {
-            "record": {
+            "source": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "OgmRecord",
-                    "resolved": "OgmRecord",
+                    "original": "IIIFSource",
+                    "resolved": "IIIFSource",
                     "references": {
-                        "OgmRecord": {
-                            "location": "import",
-                            "path": "../../lib/record",
-                            "id": "src/lib/record.ts::OgmRecord",
-                            "referenceLocation": "OgmRecord"
+                        "IIIFSource": {
+                            "location": "global",
+                            "id": "global::IIIFSource"
                         }
                     }
                 },
@@ -165,13 +193,35 @@ export class OgmImage {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "previewError",
+                "name": "previewError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "PreviewError",
+                    "resolved": "PreviewError",
+                    "references": {
+                        "PreviewError": {
+                            "location": "import",
+                            "path": "../../lib/errors",
+                            "id": "src/lib/errors.ts::PreviewError",
+                            "referenceLocation": "PreviewError"
+                        }
+                    }
+                }
             }];
     }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "record",
-                "methodName": "onRecordChange"
+                "propName": "source",
+                "methodName": "onSourceChange"
             }, {
                 "propName": "padding",
                 "methodName": "onPaddingChange"

package/dist/collection/components/ogm-map/ogm-map.css

@@ -6,22 +6,55 @@
   position: relative;
 }
 
-/* inspection cursor 
-canvas {
-  cursor: crosshair;
+/* Color of the map background ("space" around the globe) */
+.maplibregl-canvas {
+  background-color: var(--wa-color-surface-default);
+}
+
+/* Inspection popups. Vertical scrolling (when content is too tall) is handled by the
+   <wa-scroller> inside ogm-attributes, not here - that's what gives it the fading shadow cue. */
+.maplibregl-popup-content {
+  max-width: 400px;
+  overflow: hidden;
+  padding: 0;
+  box-shadow: var(--wa-shadow-l);
+  border: var(--wa-panel-border-width) solid var(--wa-color-surface-border);
+  color: var(--wa-color-text-normal);
+  background-color: var(--wa-color-surface-default);
+
+  .maplibregl-popup-close-button {
+    background-color: var(--wa-color-surface-default);
+    border-radius: 10px;
+  }
+}
+
+/* Popup tip (the little triangle) */
+.maplibregl-popup-anchor-right .maplibregl-popup-tip {
+  border-left-color: var(--wa-color-surface-border);
+}
+
+.maplibregl-popup-anchor-left .maplibregl-popup-tip {
+  border-right-color: var(--wa-color-surface-border);
+}
+
+.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
+.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip,
+.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip {
+  border-top-color: var(--wa-color-surface-border);
+}
+
+.maplibregl-popup-anchor-top .maplibregl-popup-tip,
+.maplibregl-popup-anchor-top-right .maplibregl-popup-tip,
+.maplibregl-popup-anchor-top-left .maplibregl-popup-tip {
+  border-bottom-color: var(--wa-color-surface-border);
 }
-*/
 
 /* Dark mode map adjustments */
-.sl-theme-dark {
+.wa-dark {
   .tile-border {
     stroke: white;
   }
 
-  .maplibregl-canvas {
-    background-color: black;
-  }
-
   .maplibregl-ctrl.maplibregl-ctrl-group {
     filter: invert(1);
   }
@@ -30,42 +63,8 @@ canvas {
   .maplibregl-ctrl-group button:focus:focus-visible {
     box-shadow: 0 0 2px 2px #ff6900;
   }
+
   .maplibregl-ctrl button.maplibregl-ctrl-globe-enabled .maplibregl-ctrl-icon {
     filter: invert(1);
   }
-
-  details.maplibregl-ctrl.maplibregl-ctrl-attrib {
-    background-color: black;
-    color: #999;
-  }
-  details.maplibregl-ctrl.maplibregl-ctrl-attrib a {
-    color: #999;
-  }
-  details.maplibregl-ctrl.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button {
-    background-color: #999;
-  }
-
-  div.maplibregl-popup-content {
-    background-color: black;
-  }
-
-  div.maplibregl-popup-anchor-right div.maplibregl-popup-tip {
-    border-left-color: black;
-  }
-
-  div.maplibregl-popup-anchor-left div.maplibregl-popup-tip {
-    border-right-color: black;
-  }
-
-  div.maplibregl-popup-anchor-bottom div.maplibregl-popup-tip,
-  div.maplibregl-popup-anchor-bottom-right div.maplibregl-popup-tip,
-  div.maplibregl-popup-anchor-bottom-left div.maplibregl-popup-tip {
-    border-top-color: black;
-  }
-
-  div.maplibregl-popup-anchor-top div.maplibregl-popup-tip,
-  div.maplibregl-popup-anchor-top-right div.maplibregl-popup-tip,
-  div.maplibregl-popup-anchor-top-left div.maplibregl-popup-tip {
-    border-bottom-color: black;
-  }
 }