Skip to content

Commit baf7b24

Browse files
hizclickhizclick
committed
Getting image dimenssions from OpeanSeadragon viewer
1 parent 3271199 commit baf7b24

File tree

3 files changed

+100
-175
lines changed

3 files changed

+100
-175
lines changed

‎src/components/OsdComponent.vue

+25
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ export default {
113113
}
114114
},
115115
mounted: function () {
116+
116117
this.viewer = OpenSeadragon({
117118
id: 'osdContainer',
118119
preserveViewport: false,
@@ -229,13 +230,37 @@ export default {
229230
this.unwatchPages = this.$store.watch((state, getters) => getters.pages,
230231
(newArr, oldArr) => {
231232
this.viewer.open(newArr)
233+
this.viewer.addHandler("open", () => {
234+
if (this.viewer.source) {
235+
// Access the image dimensions after it has loaded
236+
const width = this.viewer.source.dimensions.x;
237+
const height = this.viewer.source.dimensions.y;
238+
newArr.forEach((obj, index) => {
239+
// Dispatch an action for each page with the updated width and height
240+
this.$store.dispatch("updatePageDimensions", {
241+
index,
242+
width,
243+
height
244+
});
245+
});
246+
247+
248+
}else{
249+
console.log("erroring")
250+
}
251+
252+
})
253+
console.log("this is the width of the current page ", this.$store.state.currentwidth)
254+
232255
this.$store.dispatch('setCurrentPage', 0)
233256
})
234257
235258
this.unwatchCurrentPage = this.$store.watch((state, getters) => getters.currentPageIndexZeroBased,
236259
(newPage, oldPage) => {
260+
237261
this.viewer.goToPage(newPage)
238262
})
263+
239264
240265
this.unwatchZonesOnCurrentPage = this.$store.watch((state, getters) => getters.zonesOnCurrentPage,
241266
(newArr, oldArr) => {

‎src/store/index.js

+61-143
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { createStore } from 'vuex'
22
import { iiifManifest2mei, checkIiifManifest, getPageArray } from '@/tools/iiif.js'
33
import { meiZone2annotorious, annotorious2meiZone, measureDetector2meiZone, generateMeasure, insertMeasure, addZoneToLastMeasure, deleteZone, setMultiRest, createNewMdiv, moveContentToMdiv, toggleAdditionalZone, addImportedPage } from '@/tools/meiMappings.js'
4+
import { toRaw } from 'vue';
45

56
import { mode as allowedModes } from '@/store/constants.js'
67
import qs from 'qs';
@@ -60,7 +61,9 @@ export default createStore({
6061
importingImages: [],
6162
currentMeasureId: null,
6263
username: null,// used for the MeasureModal
63-
infoJson: []
64+
infoJson: [],
65+
currentheight: "",
66+
currentwidth: ""
6467

6568
// TODO isScore: true
6669
},
@@ -115,7 +118,18 @@ export default createStore({
115118
SET_USERNAME(state, username) {
116119
state.username = username
117120
},
121+
SET_CURRENT_WIDTH(state, height) {
122+
state.currentheight = height
123+
},
124+
SET_CURRENT_HEIGHT(state, width) {
125+
state.currentheight = width
126+
},
127+
SET_PAGE_ARRAY(state, updatedArray) {
128+
state.pages = toRaw(updatedArray)
129+
console.log("this is the updated array ", state.pages)
130+
},
118131
SET_CURRENT_PAGE(state, i) {
132+
console.log("current page is ", state.currentPage)
119133
console.log("page is changed ", state.pages.length)
120134
if (i > -1 && i < state.pages.length) {
121135
state.currentPage = i
@@ -296,6 +310,13 @@ export default createStore({
296310
state.xmlDoc = xmlDoc
297311
}
298312
},
313+
SET_PAGE_DIMENSIONS(state, { index, width, height }) {
314+
console.log("width is ", width)
315+
316+
// Ensure the update is reactive
317+
state.pages[index].width = width;
318+
state.pages[index].height = height;
319+
},
299320
CREATE_NEW_MDIV(state) {
300321
const xmlDoc = state.xmlDoc.cloneNode(true)
301322
state.currentMdivId = createNewMdiv(xmlDoc, state.currentMdivId)
@@ -380,6 +401,7 @@ export default createStore({
380401
console.log("this is branch " + branch)
381402
state.branch = branch
382403
},
404+
383405
},
384406
actions: {
385407
async fetchDirectories({ state, commit }) {
@@ -484,6 +506,16 @@ export default createStore({
484506
console.log('setting current page to ' + i)
485507
commit('SET_CURRENT_PAGE', i)
486508
},
509+
setWidth({ commit }, width) {
510+
commit('SET_CURRENT_WIDTH', width)
511+
},
512+
setHeight({ commit }, height) {
513+
commit('SET_CURRENT_HEIGHT', height)
514+
},
515+
updatePage({ commit }, upatedArr) {
516+
console.log("hi everyone")
517+
commit('SET_PAGE_ARRAY', upatedArr)
518+
},
487519
setCurrentPageZone({ commit }, j) {
488520
commit('SET_TOTAL_ZONES_COUNT', j)
489521
},
@@ -796,151 +828,38 @@ export default createStore({
796828
commit('SET_BRANCH', branch)
797829
},
798830
importIIIF({ commit, dispatch, state }, url) {
799-
commit('SET_LOADING', true);
800-
801-
// Fetch the IIIF manifest
831+
commit('SET_LOADING', true)
802832
fetch(url)
803-
.then(res => res.json())
804-
.then(json => {
805-
commit('SET_LOADING', false);
806-
commit('SET_PROCESSING', true);
807-
808-
let canvases = json.sequences[0].canvases;
809-
810-
// Process each canvas one by one, sequentially
811-
const processCanvasesSequentially = async () => {
812-
for (let i = 0; i < canvases.length; i++) {
813-
try {
814-
// Build the info.json URL for the current canvas
815-
const infoUrl = canvases[i].images[0].resource.service['@id'] + "/info.json";
816-
817-
// Push the URL to the state.infoJson array
818-
state.infoJson.push(infoUrl);
819-
820-
// Fetch the info.json
821-
const res = await fetch(infoUrl);
822-
const result = await res.json();
823-
824-
// Check if this is a proper IIIF Manifest, then convert to MEI
825-
const isManifest = checkIiifManifest(json);
826-
if (!isManifest) {
827-
throw new Error("Invalid IIIF manifest");
828-
}
829-
830-
// Extract the width and height from the result
831-
const width = result.width;
832-
const height = result.height;
833-
834-
// Push the dimensions into the state.pageDimension array
835-
state.pageDimension.push([width, height]);
836-
837-
} catch (error) {
838-
console.error(`Error processing canvas ${i}:`, error);
839-
throw error; // This will stop the loop and be caught in the outer catch block
840-
}
841-
}
842-
};
843-
844-
// Call the sequential processing function
845-
processCanvasesSequentially()
846-
.then(() => {
847-
// After processing all canvases, convert the manifest to MEI
848-
return iiifManifest2mei(json, url, parser, state);
849-
})
850-
.then(mei => {
851-
// Dispatch setData with the generated MEI
852-
dispatch('setData', mei);
853-
})
854-
.catch(err => {
855-
console.error('Error processing IIIF manifest or canvases:', err);
856-
commit('SET_LOADING', false);
857-
// Add any additional error messaging here
858-
})
859-
.finally(() => {
860-
commit('SET_PROCESSING', false); // Ensure processing is set to false after completion
861-
});
833+
.then(res => {
834+
return res.json()
862835
})
863-
.catch(error => {
864-
// Handle errors in the initial IIIF manifest fetch
865-
console.error('Error fetching IIIF manifest:', error);
866-
commit('SET_LOADING', false);
867-
});
868-
},
869-
importIIIF({ commit, dispatch, state }, url) {
870-
commit('SET_LOADING', true);
871-
872-
// Fetch the IIIF manifest
873-
fetch(url)
874-
.then(res => res.json())
875836
.then(json => {
876-
commit('SET_LOADING', false);
877-
commit('SET_PROCESSING', true);
878-
879-
let canvases = json.sequences[0].canvases;
880-
881-
// Map all canvas images to their info.json URLs
882-
const infoJsonUrls = canvases.map(canvas => {
883-
return canvas.images[0].resource.service['@id'] + "/info.json";
884-
});
885-
886-
// Store all fetch promises for info.json
887-
const fetchPromises = infoJsonUrls.map((infoUrl) => {
888-
return fetch(infoUrl)
889-
.then(res => res.json())
890-
.then(result => {
891-
// Check if this is a proper IIIF Manifest
892-
const isManifest = checkIiifManifest(json);
893-
if (!isManifest) {
894-
throw new Error("Invalid IIIF manifest");
895-
}
896-
897-
// Extract the width and height from the result
898-
const width = result.width;
899-
const height = result.height;
900-
901-
// Return both the infoUrl and the dimensions
902-
return { infoUrl, dimensions: [width, height] };
903-
})
904-
.catch(error => {
905-
console.error(`Error fetching ${infoUrl}:`, error);
906-
// Return a fallback object in case of error, to keep the promise chain going
907-
return { infoUrl, dimensions: [null, null], error: true };
908-
});
909-
});
910-
911-
// Use Promise.allSettled to fetch all info.json files concurrently and wait for all of them
912-
Promise.allSettled(fetchPromises)
913-
.then((results) => {
914-
// Update state.infoJson and state.pageDimension in batches
915-
results.forEach(result => {
916-
if (result.status === 'fulfilled') {
917-
state.infoJson.push(result.value.infoUrl);
918-
state.pageDimension.push(result.value.dimensions);
919-
}
920-
});
921-
922-
// After processing all canvases, convert the manifest to MEI
923-
return iiifManifest2mei(json, url, parser, state);
924-
})
837+
commit('SET_LOADING', false)
838+
commit('SET_PROCESSING', true)
839+
// check if this is a proper IIIF Manifest, then convert to MEI
840+
const isManifest = checkIiifManifest(json)
841+
console.log('isManifest: ' + isManifest)
842+
if (!isManifest) {
843+
// do some error handling
844+
return false
845+
}
846+
847+
iiifManifest2mei(json, url, parser, state)
925848
.then(mei => {
926-
// Dispatch setData with the generated MEI
927-
dispatch('setData', mei);
849+
dispatch('setData', mei)
928850
})
929-
.catch(err => {
930-
console.error('Error processing IIIF manifest or canvases:', err);
931-
commit('SET_LOADING', false);
932-
// Add any additional error messaging here
933-
})
934-
.finally(() => {
935-
commit('SET_PROCESSING', false); // Ensure processing is set to false after completion
936-
});
937851
})
938-
.catch(error => {
939-
// Handle errors in the initial IIIF manifest fetch
940-
console.error('Error fetching IIIF manifest:', error);
941-
commit('SET_LOADING', false);
942-
});
852+
.catch(err => {
853+
commit('SET_LOADING', false)
854+
console.log(err)
855+
// add some error message
856+
})
857+
},
858+
updatePageDimensions({ commit }, { index, width, height }) {
859+
commit('SET_PAGE_DIMENSIONS', { index, width, height });
860+
943861
},
862+
944863

945864
importXML({ commit, dispatch }, mei) {
946865
fetch(mei)
@@ -1221,13 +1140,12 @@ export default createStore({
12211140
pages: state => {
12221141
const arr = []
12231142
state.pages.forEach(page => {
1224-
console.log("this is the page width and height at index", page.width, " " , page.height)
1143+
12251144
const obj = {
12261145
tileSource: page.uri,
1227-
width: page.width,
1228-
x: 0,
1229-
y: 0
1146+
width: page.width
12301147
}
1148+
console.log("current width is ", state.currentwidth)
12311149
arr.push(obj)
12321150
})
12331151
return arr

0 commit comments

Comments
 (0)