diff --git a/src/store/index.js b/src/store/index.js index 5f1aff5..8cbbddf 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -46,7 +46,7 @@ export default createStore({ loading: false, logedin: false, processing: false, - pageDimenssion: [], + pageDimension: [], mode: allowedModes.selection, existingMusicMode: false, selectedZoneId: null, @@ -796,77 +796,152 @@ export default createStore({ commit('SET_BRANCH', branch) }, importIIIF({ commit, dispatch, state }, url) { - commit('SET_LOADING', true) + commit('SET_LOADING', true); + + // Fetch the IIIF manifest fetch(url) - .then(res => { - return res.json() - }) + .then(res => res.json()) .then(json => { - commit('SET_LOADING', false) - commit('SET_PROCESSING', true) - + commit('SET_LOADING', false); + commit('SET_PROCESSING', true); + let canvases = json.sequences[0].canvases; - for (let i = 0; i < canvases.length; i++) { - // Do something with canvas - state.infoJson.push(canvases[i].images[0].resource.service['@id'] + "/info.json") - - } - let fetchPromises = []; - - for (let i = 0; i < state.infoJson.length; i++) { - // Add each fetch promise to the array - fetchPromises.push( - fetch(state.infoJson[i]) - .then(res => res.json()) // Parse the JSON from the response - .then(result => { - // check if this is a proper IIIF Manifest, then convert to MEI - const isManifest = checkIiifManifest(json) - if (!isManifest) { - // do some error handling - return false - } - - // Access the width and height from the result - const width = result.width; - const height = result.height; - - // Push the dimensions into the state - state.pageDimenssion.push([width, height]); - }) - .catch(error => { - console.error("Error:", error); - }) - ); - } - - // Use Promise.all to wait for all fetch requests to complete - Promise.all(fetchPromises) + + // Process each canvas one by one, sequentially + const processCanvasesSequentially = async () => { + for (let i = 0; i < canvases.length; i++) { + try { + // Build the info.json URL for the current canvas + const infoUrl = canvases[i].images[0].resource.service['@id'] + "/info.json"; + + // Push the URL to the state.infoJson array + state.infoJson.push(infoUrl); + + // Fetch the info.json + const res = await fetch(infoUrl); + const result = await res.json(); + + // Check if this is a proper IIIF Manifest, then convert to MEI + const isManifest = checkIiifManifest(json); + if (!isManifest) { + throw new Error("Invalid IIIF manifest"); + } + + // Extract the width and height from the result + const width = result.width; + const height = result.height; + + // Push the dimensions into the state.pageDimension array + state.pageDimension.push([width, height]); + + } catch (error) { + console.error(`Error processing canvas ${i}:`, error); + throw error; // This will stop the loop and be caught in the outer catch block + } + } + }; + + // Call the sequential processing function + processCanvasesSequentially() .then(() => { - - iiifManifest2mei(json, url, parser, state) - - .then(mei => { - dispatch('setData', mei) - }) - }) - .catch(err => { - commit('SET_LOADING', false) - console.log(err) - // add some error message + // After processing all canvases, convert the manifest to MEI + return iiifManifest2mei(json, url, parser, state); + }) + .then(mei => { + // Dispatch setData with the generated MEI + dispatch('setData', mei); + }) + .catch(err => { + console.error('Error processing IIIF manifest or canvases:', err); + commit('SET_LOADING', false); + // Add any additional error messaging here + }) + .finally(() => { + commit('SET_PROCESSING', false); // Ensure processing is set to false after completion + }); + }) + .catch(error => { + // Handle errors in the initial IIIF manifest fetch + console.error('Error fetching IIIF manifest:', error); + commit('SET_LOADING', false); + }); + }, + importIIIF({ commit, dispatch, state }, url) { + commit('SET_LOADING', true); + + // Fetch the IIIF manifest + fetch(url) + .then(res => res.json()) + .then(json => { + commit('SET_LOADING', false); + commit('SET_PROCESSING', true); + + let canvases = json.sequences[0].canvases; + + // Map all canvas images to their info.json URLs + const infoJsonUrls = canvases.map(canvas => { + return canvas.images[0].resource.service['@id'] + "/info.json"; + }); + + // Store all fetch promises for info.json + const fetchPromises = infoJsonUrls.map((infoUrl) => { + return fetch(infoUrl) + .then(res => res.json()) + .then(result => { + // Check if this is a proper IIIF Manifest + const isManifest = checkIiifManifest(json); + if (!isManifest) { + throw new Error("Invalid IIIF manifest"); + } + + // Extract the width and height from the result + const width = result.width; + const height = result.height; + + // Return both the infoUrl and the dimensions + return { infoUrl, dimensions: [width, height] }; }) + .catch(error => { + console.error(`Error fetching ${infoUrl}:`, error); + // Return a fallback object in case of error, to keep the promise chain going + return { infoUrl, dimensions: [null, null], error: true }; + }); + }); + + // Use Promise.allSettled to fetch all info.json files concurrently and wait for all of them + Promise.allSettled(fetchPromises) + .then((results) => { + // Update state.infoJson and state.pageDimension in batches + results.forEach(result => { + if (result.status === 'fulfilled') { + state.infoJson.push(result.value.infoUrl); + state.pageDimension.push(result.value.dimensions); + } + }); + + // After processing all canvases, convert the manifest to MEI + return iiifManifest2mei(json, url, parser, state); }) - .catch(error => { - console.error("Error with one of the promises:", error); + .then(mei => { + // Dispatch setData with the generated MEI + dispatch('setData', mei); + }) + .catch(err => { + console.error('Error processing IIIF manifest or canvases:', err); + commit('SET_LOADING', false); + // Add any additional error messaging here + }) + .finally(() => { + commit('SET_PROCESSING', false); // Ensure processing is set to false after completion }); - - - - - - - - + }) + .catch(error => { + // Handle errors in the initial IIIF manifest fetch + console.error('Error fetching IIIF manifest:', error); + commit('SET_LOADING', false); + }); }, + importXML({ commit, dispatch }, mei) { fetch(mei) .then(res => { diff --git a/src/tools/iiif.js b/src/tools/iiif.js index a4dd4ee..6c819d8 100644 --- a/src/tools/iiif.js +++ b/src/tools/iiif.js @@ -1,13 +1,14 @@ import { uuid } from '@/tools/uuid.js' -function addPage (canvas, dimension, n, file, meiSurfaceTemplate, hasItems) { +function addPage (canvas,canvases, dimension, n, file, meiSurfaceTemplate, hasItems) { // var imgsrc = canvas.images[0].resource.service['@id']+"/info.json" //var width, height = getDimention(imgsrc) const label = canvas.label var width var height - if(n < 120){ + if(n <= canvases.length){ + console.log(" number is", n , "dimenssion ", dimension, "canvas width ", canvas.width , "canvas height ", canvas.height ) height = dimension[1] width = dimension[0] @@ -108,7 +109,7 @@ export async function iiifManifest2mei (json, url, parser, state) { if(json.sequences){ json.sequences[0].canvases.forEach((canvas, i) => { var hasItems = false - addPage(canvas, state.pageDimenssion[i + 1], i + 1, file, meiSurfaceTemplate, hasItems) + addPage(canvas, json.sequences[0].canvases, state.pageDimension[i], i + 1, file, meiSurfaceTemplate, hasItems) }) }else{