ogm-viewer 0.3.0 → 0.4.0

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

@@ -0,0 +1,172 @@
+import { h, Host } from "@stencil/core";
+import CogSource from "../../lib/sources/cog";
+import GeoJSONSource from "../../lib/sources/geojson";
+import OpenIndexMapSource from "../../lib/sources/openindexmap";
+import PMTilesSource from "../../lib/sources/pmtiles";
+import TileJSONSource from "../../lib/sources/tilejson";
+import TMSSource from "../../lib/sources/tms";
+import WmsSource from "../../lib/sources/wms";
+import XYZSource from "../../lib/sources/xyz";
+import IIIFSource from "../../lib/sources/iiif";
+import IIIFManifestSource from "../../lib/sources/iiif-manifest";
+export class OgmPreviews {
+    el;
+    theme;
+    record;
+    previewOpacity;
+    sidebarPadding;
+    sources = [];
+    // Pick the appropriate preview to render based on the source type
+    renderPreview(source) {
+        if (source instanceof IIIFSource)
+            return this.renderImagePreview(source);
+        return this.renderMapPreview(source);
+    }
+    // Render an image preview
+    renderImagePreview(source) {
+        return h("ogm-image", { theme: this.theme, source: source, padding: this.sidebarPadding });
+    }
+    // Render a map preview
+    renderMapPreview(source) {
+        return h("ogm-map", { "preview-opacity": this.previewOpacity, theme: this.theme, source: source, padding: this.sidebarPadding });
+    }
+    // Given a record, get all of the valid sources that can be used to preview it on a map
+    getSources(record) {
+        while (this.sources.length)
+            this.sources.pop();
+        const recordBounds = record.getBounds();
+        if (record.references.iiifImageUrl)
+            this.sources.push(new IIIFSource(record.id, record.references.iiifImageUrl, recordBounds));
+        if (record.references.iiifManifestUrl)
+            this.sources.push(new IIIFManifestSource(record.id, record.references.iiifManifestUrl, recordBounds));
+        if (record.references.pmtilesUrl)
+            this.sources.push(new PMTilesSource(record.id, record.references.pmtilesUrl, recordBounds));
+        if (record.references.tilejsonUrl)
+            this.sources.push(new TileJSONSource(record.id, record.references.tilejsonUrl, recordBounds));
+        if (record.references.indexMapUrl)
+            this.sources.push(new OpenIndexMapSource(record.id, record.references.indexMapUrl, recordBounds));
+        if (record.references.geojsonUrl)
+            this.sources.push(new GeoJSONSource(record.id, record.references.geojsonUrl, recordBounds));
+        if (record.references.cogUrl)
+            this.sources.push(new CogSource(record.id, record.references.cogUrl, recordBounds));
+        if (record.references.tmsUrl)
+            this.sources.push(new TMSSource(record.id, record.references.tmsUrl, recordBounds));
+        if (record.references.xyzUrl)
+            this.sources.push(new XYZSource(record.id, record.references.xyzUrl, recordBounds));
+        if (record.references.wmsUrl && record.wxsIdentifier)
+            this.sources.push(new WmsSource(record.id, record.references.wmsUrl, { layerIds: [record.wxsIdentifier] }, recordBounds));
+    }
+    // Render as tabs for switching between sources
+    render() {
+        if (!this.record)
+            return h("ogm-map", { theme: this.theme, padding: this.sidebarPadding });
+        return (h(Host, { class: this.theme && `wa-${this.theme}` }, h("wa-tab-group", null, this.sources.map((source, idx) => (h("wa-tab", { key: idx, panel: `${source.constructor.name}-${source.id}-${idx}` }, source.label()))), this.sources.map((source, idx) => (h("wa-tab-panel", { key: idx, name: `${source.constructor.name}-${source.id}-${idx}`, active: idx === 0 }, this.renderPreview(source)))))));
+    }
+    static get is() { return "ogm-previews"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ogm-previews.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ogm-previews.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme"
+            },
+            "record": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "OgmRecord",
+                    "resolved": "OgmRecord",
+                    "references": {
+                        "OgmRecord": {
+                            "location": "global",
+                            "id": "global::OgmRecord"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "previewOpacity": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "preview-opacity"
+            },
+            "sidebarPadding": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sidebar-padding"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "sources": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "record",
+                "methodName": "getSources"
+            }];
+    }
+}

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

@@ -4,15 +4,15 @@ export class OgmSettings {
     record;
     el;
     opacityChange;
-    slRange;
+    waSlider;
     componentDidLoad() {
-        this.slRange = getElement(this.el, 'sl-range');
+        this.waSlider = getElement(this.el, 'wa-slider');
     }
     handleOpacityChange() {
-        this.opacityChange.emit(this.slRange.value);
+        this.opacityChange.emit(this.waSlider.value);
     }
     render() {
-        return (h("div", { key: '0c8f63ab2c784e81771aaa1000152ff7940a42c1', class: "settings" }, h("sl-range", { key: '69e6bf76e9bf4291a1da64b894fb7a2c8bf68452', disabled: !this.record || this.record.references.iiifOnly, label: "Layer opacity", min: "0", max: "100", step: "1", value: "100" })));
+        return (h("div", { key: '706e4027a015a9904b6a0ce792a35482b7b3e7ef', class: "settings" }, h("wa-slider", { key: '70129a4d1aab6fef042d818009814c8ffe5129f6', disabled: !this.record || this.record.references.iiifOnly, label: "Layer opacity", min: "0", max: "100", step: "1", value: "100" })));
     }
     static get is() { return "ogm-settings"; }
     static get encapsulation() { return "shadow"; }
@@ -36,10 +36,8 @@ export class OgmSettings {
                     "resolved": "OgmRecord",
                     "references": {
                         "OgmRecord": {
-                            "location": "import",
-                            "path": "../../lib/record",
-                            "id": "src/lib/record.ts::OgmRecord",
-                            "referenceLocation": "OgmRecord"
+                            "location": "global",
+                            "id": "global::OgmRecord"
                         }
                     }
                 },
@@ -75,7 +73,7 @@ export class OgmSettings {
     static get elementRef() { return "el"; }
     static get listeners() {
         return [{
-                "name": "sl-input",
+                "name": "input",
                 "method": "handleOpacityChange",
                 "target": undefined,
                 "capture": false,