Skip to content

Commit 121dcde

Browse files
hizclickhizclick
authored
Merge pull request #16 from Edirom/correcting_image_dimension
Correcting image dimension
2 parents 2bae1a5 + 0767a48 commit 121dcde

File tree

3 files changed

+101
-182
lines changed

3 files changed

+101
-182
lines changed

‎src/components/OsdComponent.vue

+25-2
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,35 @@ export default {
229230
this.unwatchPages = this.$store.watch((state, getters) => getters.pages,
230231
(newArr, oldArr) => {
231232
this.viewer.open(newArr)
232-
this.$store.dispatch('setCurrentPage', 0)
233-
})
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+
})
234255
235256
this.unwatchCurrentPage = this.$store.watch((state, getters) => getters.currentPageIndexZeroBased,
236257
(newPage, oldPage) => {
258+
237259
this.viewer.goToPage(newPage)
238260
})
261+
239262
240263
this.unwatchZonesOnCurrentPage = this.$store.watch((state, getters) => getters.zonesOnCurrentPage,
241264
(newArr, oldArr) => {

‎src/store/index.js

+61-147
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
},
@@ -104,19 +107,26 @@ export default createStore({
104107
state.selectedDirectory = gitdirec
105108
},
106109
SET_XML_DOC(state, xmlDoc) {
107-
console.log("this is the xml doc in set ", xmlDoc)
110+
console.log("this is the xml doc in set ", xmlDoc)
108111
state.xmlDoc = xmlDoc
109112
state.currentPage = 0
110113
},
111114
SET_PAGES(state, pageArray) {
112115
state.pages = pageArray
113-
console.log("this is the length of pages ", state.pages)
114116
},
115117
SET_USERNAME(state, username) {
116118
state.username = username
117119
},
120+
SET_CURRENT_HEIGHT(state, height) {
121+
state.currentheight = height
122+
},
123+
SET_CURRENT_WIDTH(state, width) {
124+
state.currentwidth = width
125+
},
126+
SET_PAGE_ARRAY(state, updatedArray) {
127+
state.pages = toRaw(updatedArray)
128+
},
118129
SET_CURRENT_PAGE(state, i) {
119-
console.log("page is changed ", state.pages.length)
120130
if (i > -1 && i < state.pages.length) {
121131
state.currentPage = i
122132
}
@@ -296,6 +306,13 @@ export default createStore({
296306
state.xmlDoc = xmlDoc
297307
}
298308
},
309+
SET_PAGE_DIMENSIONS(state, { index, width, height }) {
310+
console.log("width is ", width)
311+
312+
// Ensure the update is reactive
313+
state.pages[index].width = width;
314+
state.pages[index].height = height;
315+
},
299316
CREATE_NEW_MDIV(state) {
300317
const xmlDoc = state.xmlDoc.cloneNode(true)
301318
state.currentMdivId = createNewMdiv(xmlDoc, state.currentMdivId)
@@ -380,6 +397,7 @@ export default createStore({
380397
console.log("this is branch " + branch)
381398
state.branch = branch
382399
},
400+
383401
},
384402
actions: {
385403
async fetchDirectories({ state, commit }) {
@@ -481,9 +499,18 @@ export default createStore({
481499
commit('TOGGLE_MEASURE_LIST')
482500
},
483501
setCurrentPage({ commit }, i) {
484-
console.log('setting current page to ' + i)
485502
commit('SET_CURRENT_PAGE', i)
486503
},
504+
setWidth({ commit }, width) {
505+
commit('SET_CURRENT_WIDTH', width)
506+
},
507+
setHeight({ commit }, height) {
508+
commit('SET_CURRENT_HEIGHT', height)
509+
},
510+
updatePage({ commit }, upatedArr) {
511+
console.log("hi everyone")
512+
commit('SET_PAGE_ARRAY', upatedArr)
513+
},
487514
setCurrentPageZone({ commit }, j) {
488515
commit('SET_TOTAL_ZONES_COUNT', j)
489516
},
@@ -796,151 +823,38 @@ export default createStore({
796823
commit('SET_BRANCH', branch)
797824
},
798825
importIIIF({ commit, dispatch, state }, url) {
799-
commit('SET_LOADING', true);
800-
801-
// Fetch the IIIF manifest
826+
commit('SET_LOADING', true)
802827
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-
});
828+
.then(res => {
829+
return res.json()
862830
})
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())
875831
.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-
})
832+
commit('SET_LOADING', false)
833+
commit('SET_PROCESSING', true)
834+
// check if this is a proper IIIF Manifest, then convert to MEI
835+
const isManifest = checkIiifManifest(json)
836+
console.log('isManifest: ' + isManifest)
837+
if (!isManifest) {
838+
// do some error handling
839+
return false
840+
}
841+
842+
iiifManifest2mei(json, url, parser, state)
925843
.then(mei => {
926-
// Dispatch setData with the generated MEI
927-
dispatch('setData', mei);
928-
})
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
844+
dispatch('setData', mei)
933845
})
934-
.finally(() => {
935-
commit('SET_PROCESSING', false); // Ensure processing is set to false after completion
936-
});
937846
})
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-
});
847+
.catch(err => {
848+
commit('SET_LOADING', false)
849+
console.log(err)
850+
// add some error message
851+
})
852+
},
853+
updatePageDimensions({ commit }, { index, width, height }) {
854+
commit('SET_PAGE_DIMENSIONS', { index, width, height });
855+
943856
},
857+
944858

945859
importXML({ commit, dispatch }, mei) {
946860
fetch(mei)
@@ -1221,14 +1135,14 @@ export default createStore({
12211135
pages: state => {
12221136
const arr = []
12231137
state.pages.forEach(page => {
1224-
console.log("this is the page width and height at index", page.width, " " , page.height)
1138+
12251139
const obj = {
12261140
tileSource: page.uri,
1227-
width: page.width,
1228-
x: 0,
1229-
y: 0
1141+
width: page.width
12301142
}
12311143
arr.push(obj)
1144+
console.log("array is ", arr)
1145+
12321146
})
12331147
return arr
12341148
},

0 commit comments

Comments
 (0)