diff --git a/src/components/OsdComponent.vue b/src/components/OsdComponent.vue index c6aca3f..e33c526 100644 --- a/src/components/OsdComponent.vue +++ b/src/components/OsdComponent.vue @@ -113,6 +113,7 @@ export default { } }, mounted: function () { + this.viewer = OpenSeadragon({ id: 'osdContainer', preserveViewport: false, @@ -229,13 +230,37 @@ export default { this.unwatchPages = this.$store.watch((state, getters) => getters.pages, (newArr, oldArr) => { this.viewer.open(newArr) + this.viewer.addHandler("open", () => { + if (this.viewer.source) { + // Access the image dimensions after it has loaded + const width = this.viewer.source.dimensions.x; + const height = this.viewer.source.dimensions.y; + newArr.forEach((obj, index) => { + // Dispatch an action for each page with the updated width and height + this.$store.dispatch("updatePageDimensions", { + index, + width, + height + }); + }); + + + }else{ + console.log("erroring") + } + + }) + console.log("this is the width of the current page ", this.$store.state.currentwidth) + this.$store.dispatch('setCurrentPage', 0) }) this.unwatchCurrentPage = this.$store.watch((state, getters) => getters.currentPageIndexZeroBased, (newPage, oldPage) => { + this.viewer.goToPage(newPage) }) + this.unwatchZonesOnCurrentPage = this.$store.watch((state, getters) => getters.zonesOnCurrentPage, (newArr, oldArr) => { diff --git a/src/store/index.js b/src/store/index.js index 8cbbddf..7f84d79 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,6 +1,7 @@ import { createStore } from 'vuex' import { iiifManifest2mei, checkIiifManifest, getPageArray } from '@/tools/iiif.js' import { meiZone2annotorious, annotorious2meiZone, measureDetector2meiZone, generateMeasure, insertMeasure, addZoneToLastMeasure, deleteZone, setMultiRest, createNewMdiv, moveContentToMdiv, toggleAdditionalZone, addImportedPage } from '@/tools/meiMappings.js' +import { toRaw } from 'vue'; import { mode as allowedModes } from '@/store/constants.js' import qs from 'qs'; @@ -60,7 +61,9 @@ export default createStore({ importingImages: [], currentMeasureId: null, username: null,// used for the MeasureModal - infoJson: [] + infoJson: [], + currentheight: "", + currentwidth: "" // TODO isScore: true }, @@ -115,7 +118,18 @@ export default createStore({ SET_USERNAME(state, username) { state.username = username }, + SET_CURRENT_WIDTH(state, height) { + state.currentheight = height + }, + SET_CURRENT_HEIGHT(state, width) { + state.currentheight = width + }, + SET_PAGE_ARRAY(state, updatedArray) { + state.pages = toRaw(updatedArray) + console.log("this is the updated array ", state.pages) + }, SET_CURRENT_PAGE(state, i) { + console.log("current page is ", state.currentPage) console.log("page is changed ", state.pages.length) if (i > -1 && i < state.pages.length) { state.currentPage = i @@ -296,6 +310,13 @@ export default createStore({ state.xmlDoc = xmlDoc } }, + SET_PAGE_DIMENSIONS(state, { index, width, height }) { + console.log("width is ", width) + + // Ensure the update is reactive + state.pages[index].width = width; + state.pages[index].height = height; + }, CREATE_NEW_MDIV(state) { const xmlDoc = state.xmlDoc.cloneNode(true) state.currentMdivId = createNewMdiv(xmlDoc, state.currentMdivId) @@ -380,6 +401,7 @@ export default createStore({ console.log("this is branch " + branch) state.branch = branch }, + }, actions: { async fetchDirectories({ state, commit }) { @@ -484,6 +506,16 @@ export default createStore({ console.log('setting current page to ' + i) commit('SET_CURRENT_PAGE', i) }, + setWidth({ commit }, width) { + commit('SET_CURRENT_WIDTH', width) + }, + setHeight({ commit }, height) { + commit('SET_CURRENT_HEIGHT', height) + }, + updatePage({ commit }, upatedArr) { + console.log("hi everyone") + commit('SET_PAGE_ARRAY', upatedArr) + }, setCurrentPageZone({ commit }, j) { commit('SET_TOTAL_ZONES_COUNT', j) }, @@ -796,151 +828,38 @@ export default createStore({ commit('SET_BRANCH', branch) }, importIIIF({ commit, dispatch, state }, url) { - commit('SET_LOADING', true); - - // Fetch the IIIF manifest + commit('SET_LOADING', true) fetch(url) - .then(res => res.json()) - .then(json => { - commit('SET_LOADING', false); - commit('SET_PROCESSING', true); - - let canvases = json.sequences[0].canvases; - - // 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(() => { - // 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 - }); + .then(res => { + return res.json() }) - .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); - }) + commit('SET_LOADING', false) + commit('SET_PROCESSING', true) + // check if this is a proper IIIF Manifest, then convert to MEI + const isManifest = checkIiifManifest(json) + console.log('isManifest: ' + isManifest) + if (!isManifest) { + // do some error handling + return false + } + + iiifManifest2mei(json, url, parser, state) .then(mei => { - // Dispatch setData with the generated MEI - dispatch('setData', 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); - }); + .catch(err => { + commit('SET_LOADING', false) + console.log(err) + // add some error message + }) + }, + updatePageDimensions({ commit }, { index, width, height }) { + commit('SET_PAGE_DIMENSIONS', { index, width, height }); + }, + importXML({ commit, dispatch }, mei) { fetch(mei) @@ -1221,13 +1140,12 @@ export default createStore({ pages: state => { const arr = [] state.pages.forEach(page => { - console.log("this is the page width and height at index", page.width, " " , page.height) + const obj = { tileSource: page.uri, - width: page.width, - x: 0, - y: 0 + width: page.width } + console.log("current width is ", state.currentwidth) arr.push(obj) }) return arr diff --git a/src/tools/iiif.js b/src/tools/iiif.js index c07f527..d2b77cc 100644 --- a/src/tools/iiif.js +++ b/src/tools/iiif.js @@ -1,19 +1,10 @@ import { uuid } from '@/tools/uuid.js' -function addPage (canvas,canvases, dimension, n, file, meiSurfaceTemplate, hasItems) { - // var imgsrc = canvas.images[0].resource.service['@id']+"/info.json" - //var width, height = getDimention(imgsrc) - +function addPage (canvas, n, file, meiSurfaceTemplate, hasItems) { + console.log("this is the meisurface " , canvas) const label = canvas.label - var width - var height - 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] - - } - + const height = canvas.height + const width = canvas.width var uri = "" if(hasItems == true){ console.log("has item is true") @@ -23,6 +14,7 @@ function addPage (canvas,canvases, dimension, n, file, meiSurfaceTemplate, hasI uri = canvas?.images[0]?.resource?.service['@id']+"/info.json" } + console.log("this is the url " + uri ) const surfaceId = 's' + uuid() const graphicId = 'g' + uuid() @@ -46,24 +38,11 @@ function addPage (canvas,canvases, dimension, n, file, meiSurfaceTemplate, hasI file.querySelector('facsimile').appendChild(surface) } -async function getDimension(imgsrc) { - try { - const res = await fetch(imgsrc); - const json = await res.json(); - const { width, height } = json; // Assuming the dimensions are in the JSON response - return { width, height }; - } catch (error) { - console.error('Error fetching image dimensions:', error); - return null; - } -} - - - -export async function iiifManifest2mei (json, url, parser, state) { +export async function iiifManifest2mei (json, url, parser) { const promises = [] let meiFileTemplate let meiSurfaceTemplate + promises.push( fetch('./assets/meiFileTemplate.xml') .then(res => res.text()) @@ -91,7 +70,7 @@ export async function iiifManifest2mei (json, url, parser, state) { file.querySelector('change date').setAttribute('isodate', new Date().toISOString().substring(0, 10)) file.querySelector('changeDesc ptr').setAttribute('target', '#' + sourceId) - try { + try { const metadata = json.metadata const shelfmark = metadata.find(entry => { return entry.label === 'Signatur' }).value @@ -109,14 +88,12 @@ export async function iiifManifest2mei (json, url, parser, state) { if(json.sequences){ json.sequences[0].canvases.forEach((canvas, i) => { var hasItems = false - addPage(canvas, json.sequences[0].canvases, state.pageDimension[i], i + 1, file, meiSurfaceTemplate, hasItems) - + addPage(canvas, i + 1, file, meiSurfaceTemplate, hasItems) }) }else{ json.items.forEach((canvas, i) => { var hasItems = true addPage(canvas, i + 1, file, meiSurfaceTemplate, hasItems) - }) } return file @@ -144,11 +121,16 @@ export function getPageArray (mei) { const arr = [] mei.querySelectorAll('surface').forEach((surface, n) => { const graphic = surface.querySelector('graphic') + const obj = {} obj.uri = graphic.getAttributeNS('', 'target').trim() + console.log("this is the target ", obj.uri) obj.id = surface.getAttribute('xml:id').trim() + console.log("this is the id ", obj.id) obj.n = surface.getAttributeNS('', 'n').trim() + console.log("this is the n ", obj.n) //obj.label = surface.getAttributeNS('', 'label').trim() + console.log("this is the label ", obj.label) obj.width = parseInt(graphic.getAttributeNS('', 'width').trim(), 10) obj.height = parseInt(graphic.getAttributeNS('', 'height').trim(), 10) obj.hasSvg = surface.querySelector('svg') !== null // exists(svg:svg) inside relevant /surface