New helper method

components/annotorious-annotator/line-parser.js

@@ -18,6 +18,7 @@ import { detectTextLinesCombined } from "./detect-lines.js"
 import { v4 as uuidv4 } from "https://cdn.skypack.dev/uuid@9.0.1"
 import { CleanupRegistry } from '../../utilities/CleanupRegistry.js'
 import { onProjectReady } from '../../utilities/projectReady.js'
+import vault from '../../js/vault.js'
 import '../page-selector/index.js'
 
 class AnnotoriousAnnotator extends HTMLElement {
@@ -553,7 +554,7 @@ class AnnotoriousAnnotator extends HTMLElement {
 
   /**
    * Fetch a Canvas URI and check that it is a Canvas object.  Pass it forward to render the Image into the interface.
-   * Be prepared to recieve presentation api 2+
+   * Be prepared to receive presentation api 2+
    *
    * FIXME
    * Give users a path when Canvas URIs do not resolve or resolve to something unexpected.
@@ -562,20 +563,15 @@ class AnnotoriousAnnotator extends HTMLElement {
    */
   async processCanvas(uri) {
     if (!uri) return
-      // TODO Vault me?
-    const resolvedCanvas = await fetch(uri)
-      .then(r => {
-        if (!r.ok) throw r
-        return r.json()
-      })
-      .catch(e => {
-        this.shadowRoot.innerHTML = `
-          <h3>Canvas Error</h3>
-          <p>The Canvas within this Page could not be loaded.</p>
-          <p> ${e.status ?? e.code}: ${e.statusText ?? e.message} </p>
-        `
-        throw e
-      })
+    let resolvedCanvas = await vault.getWithFallback(uri, 'canvas', TPEN.activeProject?.manifest)
+    if (!resolvedCanvas) {
+      this.shadowRoot.innerHTML = `
+        <h3>Canvas Error</h3>
+        <p>The Canvas within this Page could not be loaded.</p>
+        <p>The Canvas could not be resolved or is invalid.</p>
+      `
+      return
+    }
     const context = resolvedCanvas["@context"]
     if (!context?.includes("iiif.io/api/presentation/3/context.json")) {
       console.warn("The Canvas object did not have the IIIF Presentation API 3 context and may not be parseable.")
@@ -619,7 +615,7 @@ class AnnotoriousAnnotator extends HTMLElement {
       throw new Error("Cannot Resolve Canvas Image", { "cause": "The Image is 404 or unresolvable." })
     }
     let imgx = resolvedCanvas?.items?.[0]?.items?.[0]?.body?.width
-    if (!imgx) imgx = resolvedCanvas?.images[0]?.resource?.width
+    if (!imgx) imgx = resolvedCanvas?.images?.[0]?.resource?.width
     let imgy = resolvedCanvas?.items?.[0]?.items?.[0]?.body?.height
     if (!imgy) imgy = resolvedCanvas?.images?.[0]?.resource?.height
     this.#imageDims = [imgx, imgy]

components/column-selector/index.js

@@ -68,7 +68,8 @@ export default class ColumnSelector extends HTMLElement {
             return { ...col, label: isAuto ? `Unnamed ${i + 1}` : col.label }
         })
 
-        this.#page = await vault.get(pageId, 'annotationpage', true)
+        this.#page = await vault.getWithFallback(pageId, 'annotationpage', TPEN.activeProject?.manifest, true)
+        if (!this.#page) return
         const { orderedItems, columnsInPage, allColumnLines } = orderPageItemsByColumns(
             { columns: this.columns, items: page?.items },
             this.#page

components/continue-working/index.js

@@ -1,4 +1,5 @@
 import TPEN from '../../api/TPEN.js'
+import vault from '../../js/vault.js'
 import { stringFromDate } from '/js/utils.js'
 import { CleanupRegistry } from '../../utilities/CleanupRegistry.js'
 
@@ -177,26 +178,12 @@ class ContinueWorking extends HTMLElement {
             if (!canvasId) return this.generateProjectPlaceholder(project)
 
             let canvas, isV3
-            try {
-                canvas = await fetch(canvasId).then(r => r.json())
-                const context = canvas['@context']
-                isV3 = Array.isArray(context)
-                    ? context.some(ctx => typeof ctx === 'string' && ctx.includes('iiif.io/api/presentation/3'))
-                    : typeof context === 'string' && context.includes('iiif.io/api/presentation/3')
-            } catch {
-                // Fetch manifest
-                const manifestUrl = project.manifest?.[0]
-                if (!manifestUrl) return this.generateProjectPlaceholder(project)
-
-                const manifest = await fetch(manifestUrl).then(r => r.json())
-                const context = manifest['@context']
-                isV3 = Array.isArray(context)
-                    ? context.some(ctx => typeof ctx === 'string' && ctx.includes('iiif.io/api/presentation/3'))
-                    : typeof context === 'string' && context.includes('iiif.io/api/presentation/3')
-                const canvases = isV3 ? manifest.items : manifest.sequences?.[0]?.canvases
-                canvas = canvases?.find(c => (isV3 ? c.id : c['@id']) === canvasId)
-                if (!canvas) return this.generateProjectPlaceholder(project)
-            }
+            canvas = await vault.getWithFallback(canvasId, 'canvas', project.manifest)
+
+            if (!canvas) return this.generateProjectPlaceholder(project)
+
+            // Structure-based detection
+            isV3 = Array.isArray(canvas.items) || canvas.type === "Canvas"
 
             // Get thumbnail from canvas
             let thumbnailUrl = canvas.thumbnail?.id ?? canvas.thumbnail?.['@id'] ?? canvas.thumbnail

components/default-transcribe/index.js

@@ -2,13 +2,13 @@
  * TpenTranscriptionElement - Default transcription view component.
  * Displays line text and images for an annotation page.
  * @element tpen-transcription
+ *
+ * @deprecated in favor of tpen-simple-transcription.
  */
 import { userMessage, encodeContentState } from "../iiif-tools/index.js"
+import vault from "../../js/vault.js"
 import "../line-image/index.js"
 import "../line-text/index.js"
-import { Vault } from 'https://cdn.jsdelivr.net/npm/@iiif/helpers/+esm'
-
-const vault = new Vault()
 
 class TpenTranscriptionElement extends HTMLElement {
     #transcriptionContainer
@@ -71,26 +71,18 @@ class TpenTranscriptionElement extends HTMLElement {
     }
 
     async #loadPage(annotationPageID) {
-        let page = { id: annotationPageID }
-        try {
-            page = vault.get({id:annotationPageID,type:"AnnotationPage"}) ?? await vault.load(annotationPageID)
-        } catch (err) {
-            switch (err.status ?? err.code) {
-                case 401:
-                    return userMessage('Unauthorized')
-                case 403:
-                    return userMessage('Forbidden')
-                case 404:
-                    return userMessage('Project not found')
-                default:
-                    return userMessage(err.message ?? err.statusText ?? err.text ?? 'Unknown error')
-            }
+        let page = await vault.getWithFallback(annotationPageID, 'annotationpage', TPEN.activeProject?.manifest)
+        if (!page) {
+            return userMessage('Failed to load page. Please try again.')
         }
         let lines = await Promise.all(page.items.flatMap(async l => {
             const lineElem = document.createElement('tpen-line-text')
             const lineImg = document.createElement('tpen-line-image')
-            lineElem.line = vault.get({id:l.id,type:"Annotation"}) ?? await vault.load(l.id)
-            lineElem.line.body[0] = vault.get({id:lineElem.line.body[0].id,type:"ContentResource"})
+            lineElem.line = await vault.get(l.id, 'annotation')
+            if (!lineElem.line) {
+                lineElem.line = await vault.get(l.id, 'annotation', true)
+            }
+            lineElem.line.body[0] = await vault.get(lineElem.line.body[0].id, 'contentresource')
             lineElem.setAttribute('tpen-line-id', l.id)
             lineImg.setAttribute('tpen-line-id', l.id)
             lineImg.setAttribute('iiif-canvas', lineElem.line.target.source.id)

components/legacy-annotator/plain.js

@@ -6,11 +6,14 @@
  *
  * It is exposed to the user through /interfaces/annotator/legacy.html
  * @element tpen-legacy-annotator
+ *
+ * @deprecated in favor of tpen-plain-annotator.
  */
 
 import { eventDispatcher } from '../../api/events.js'
 import TPEN from '../../api/TPEN.js'
 import User from '../../api/User.js'
+import vault from '../../js/vault.js'
 import { CleanupRegistry } from '../../utilities/CleanupRegistry.js'
 
 class LegacyAnnotator extends HTMLElement {
@@ -311,14 +314,10 @@ class LegacyAnnotator extends HTMLElement {
 
     async processAnnotationPage(page) {
         if(!page) return
-        const resolvedPage = await fetch(page)
-            .then(r => {
-                if(!r.ok) throw r
-                return r.json()
-            })
-            .catch(e => {
-                throw e
-            })
+        let resolvedPage = await vault.getWithFallback(page, 'annotationpage', TPEN.activeProject?.manifest)
+        if (!resolvedPage) {
+            throw new Error("Cannot Resolve AnnotationPage", {cause: "The AnnotationPage is 404 or unresolvable."})
+        }
         const context = resolvedPage["@context"]
         if(!(context.includes("iiif.io/api/presentation/3/context.json") || context.includes("w3.org/ns/anno.jsonld"))){
             console.warn("The AnnotationPage object did not have the IIIF Presentation API 3 context and may not be parseable.")
@@ -396,14 +395,10 @@ class LegacyAnnotator extends HTMLElement {
         const ctx = imageCanvas.getContext("2d")
         let err
         if(!canvas) return
-        const resolvedCanvas = await fetch(canvas)
-            .then(r => {
-                if(!r.ok) throw r
-                return r.json()
-            })
-            .catch(e => {
-                throw e
-            })
+        let resolvedCanvas = await vault.getWithFallback(canvas, 'canvas', TPEN.activeProject?.manifest)
+        if (!resolvedCanvas) {
+            throw new Error("Canvas Error", {cause: "The Canvas could not be resolved"})
+        }
         const context = resolvedCanvas["@context"]
         if(!context.includes("iiif.io/api/presentation/3/context.json")){
             console.warn("The Canvas object did not have the IIIF Presentation API 3 context and may not be parseable.")

components/line-image/index.js

@@ -204,18 +204,21 @@ class TpenImageFragment extends HTMLElement {
     }
 
     connectedCallback() {
-        this.cleanup.onDocument('canvas-change', (event) => {
-            fetch(event.detail.canvasId)
-                .then(res => res.json())
-                .then(canvas => {
-                    this.#canvas = canvas
-                    this.setContainerStyle()
-                    const imageResource = canvas?.items?.[0]?.items?.[0]?.body?.id ?? canvas?.images?.[0]?.resource?.id
-                    if (imageResource) {
-                        this.#lineImage.src = imageResource
-                    }
-                })
-                .catch(console.error)
+        this.cleanup.onDocument('canvas-change', async (event) => {
+            const canvasId = event.detail.canvasId
+            if (!canvasId) return
+
+            this.#canvas = { id: canvasId }
+            this.setContainerStyle()
+
+            // If canvas data is provided, extract image resource
+            if (event.detail.canvas) {
+                this.#canvas = event.detail.canvas
+                const imageResource = event.detail.canvas?.items?.[0]?.items?.[0]?.body?.id ?? event.detail.canvas?.images?.[0]?.resource?.["@id"]
+                if (imageResource) {
+                    this.#lineImage.src = imageResource
+                }
+            }
         })
     }
 

components/read-only-transcribe/index.js

@@ -1,4 +1,5 @@
 import { checkIfUrlExists } from '../../utilities/checkIfUrlExists.js'
+import vault from '../../js/vault.js'
 import { CleanupRegistry } from '../../utilities/CleanupRegistry.js'
 
 /**
@@ -324,12 +325,10 @@ class ReadOnlyViewTranscribe extends HTMLElement {
             return
         }
 
-        const response = await fetch(manifestUrl)
-        if (!response.ok) {
-            const errText = await response.text()
-            throw new Error(`GitHub read failed: ${response.status} - ${errText}`)
+        const manifest = await vault.get(manifestUrl, 'manifest')
+        if (!manifest) {
+            throw new Error(`Manifest could not be resolved for URL: ${manifestUrl}`)
         }
-        const manifest = await response.json()
         this.#staticManifest = manifest
 
         this.shadowRoot.querySelector(".transcribe-title").textContent = `Transcription for ${manifest.label.none?.[0]}`
@@ -411,9 +410,9 @@ class ReadOnlyViewTranscribe extends HTMLElement {
 
     async processCanvas(uri) {
         if (!uri) return
-        let embeddedCanvas = this.#staticManifest?.items.find(c => (c.id ?? c['@id']) === uri)
+        let embeddedCanvas = this.#staticManifest?.items?.find(c => (c.id ?? c['@id']) === uri)
         // Handle both Presentation API v3 (items) and v2 (images) formats
-        let fullImage = embeddedCanvas?.items?.[0]?.items?.[0]?.body?.id ?? embeddedCanvas?.images?.[0]?.resource?.id
+        let fullImage = embeddedCanvas?.items?.[0]?.items?.[0]?.body?.id ?? embeddedCanvas?.images?.[0]?.resource?.["@id"]
         let imageService = embeddedCanvas?.items?.[0]?.items?.[0]?.body?.service?.id
         let imgx = embeddedCanvas?.items?.[0]?.items?.[0]?.body?.width
         let imgy = embeddedCanvas?.items?.[0]?.items?.[0]?.body?.height

components/simple-transcription/index.js

@@ -481,7 +481,7 @@ export default class SimpleTranscriptionInterface extends HTMLElement {
       }
 
       // Use vault.get to fetch the page properly
-      const fetchedPage = await vault.get(pageID, 'annotationpage', true)
+      let fetchedPage = await vault.getWithFallback(pageID, 'annotationpage', TPEN.activeProject?.manifest, true)
       if (!fetchedPage) {
         TPEN.eventDispatcher.dispatch("tpen-toast", {
           message: "Failed to load page. Please try again.",
@@ -515,24 +515,21 @@ export default class SimpleTranscriptionInterface extends HTMLElement {
         canvasID = target.source
       }
 
-      const fetchedCanvas = await vault.get(canvasID, 'canvas')
+      let fetchedCanvas = await vault.getWithFallback(canvasID, 'canvas', TPEN.activeProject?.manifest)
       if (!fetchedCanvas) {
         TPEN.eventDispatcher.dispatch("tpen-toast", {
           message: "Could not load canvas. Please try again.",
           status: "error"
         })
         return
       }
-
       this.#canvas = fetchedCanvas
-
-      // Get canvas dimensions (these are the authoritative dimensions for XYWH calculations)
-      this.#imgTopOriginalHeight = fetchedCanvas.height ?? 1000
-      this.#imgTopOriginalWidth = fetchedCanvas.width ?? 1000
+      this.#imgTopOriginalHeight = this.#canvas.height ?? 1000
+      this.#imgTopOriginalWidth = this.#canvas.width ?? 1000
 
       // Get the image resource from the canvas
       // Handle both Presentation API v3 (items) and v2 (images) formats
-      const imageResource = fetchedCanvas.items?.[0]?.items?.[0]?.body?.id ?? fetchedCanvas.images?.[0]?.resource?.id
+      const imageResource = fetchedCanvas.items?.[0]?.items?.[0]?.body?.id ?? fetchedCanvas.images?.[0]?.resource?.["@id"]
 
       if (!imageResource) {
         TPEN.eventDispatcher.dispatch("tpen-toast", {

components/transcription-block/index.js

@@ -92,7 +92,7 @@ export default class TranscriptionBlock extends HTMLElement {
      */
     async initializeAsync() {
         const pageID = TPEN.screen?.pageInQuery
-        this.#page = await vault.get(pageID, 'annotationpage', true)
+        this.#page = await vault.getWithFallback(pageID, 'annotationpage', TPEN.activeProject?.manifest, true)
         const projectPage = TPEN.activeProject.layers.flatMap(layer => layer.pages || []).find(p => p.id.split('/').pop() === pageID.split('/').pop())
         if (!this.#page || !projectPage) return
 
@@ -508,6 +508,7 @@ export default class TranscriptionBlock extends HTMLElement {
     }
 
     updateTranscriptionUI() {
+        if (!this.#transcriptions) return
         const previousLineText = this.#transcriptions[TPEN.activeLineIndex - 1] || 'No previous line'
         const currentLineText = this.#transcriptions[TPEN.activeLineIndex] || ''
         const prevLineElem = this.shadowRoot?.querySelector('.transcription-line')