diff --git a/deployment/server/samples/mei/mei_template.mei b/deployment/server/samples/mei/mei_template.mei index 31117ad6..e2e8acee 100644 --- a/deployment/server/samples/mei/mei_template.mei +++ b/deployment/server/samples/mei/mei_template.mei @@ -13,7 +13,7 @@ - + diff --git a/src/Dashboard/UploadFileManager.ts b/src/Dashboard/UploadFileManager.ts index bf478939..e683a406 100644 --- a/src/Dashboard/UploadFileManager.ts +++ b/src/Dashboard/UploadFileManager.ts @@ -47,7 +47,7 @@ class UploadFileManager { } } - public createMeiFile(filename: string): File { + public createMeiFile(filename: string, lrx: number, lry: number): File { try { if (!this.meiTemplate) { throw new Error('Cannot find MEI template'); @@ -72,6 +72,8 @@ class UploadFileManager { facsimile.setAttribute('xml:id', 'm-' + uuidv4()); const surface = mei.querySelector('surface'); surface.setAttribute('xml:id', 'm-' + uuidv4()); + surface.setAttribute('lrx', lrx.toString()); + surface.setAttribute('lry', lry.toString()); const mdiv = mei.querySelector('mdiv'); mdiv.setAttribute('xml:id', 'm-' + uuidv4()); @@ -85,7 +87,7 @@ class UploadFileManager { staffDef.setAttribute('xml:id', 'm-' + uuidv4()); const section = mei.querySelector('section'); section.setAttribute('xml:id', 'm-' + uuidv4()); - + const meiFileContent = vkbeautify.xml(serializer.serializeToString(meiDoc)); const meiBlob = new Blob([meiFileContent], { type: 'text/xml' }); @@ -95,6 +97,33 @@ class UploadFileManager { } } + public getImgDimension(filename: string): Promise<{ width: number; height: number }> { + return new Promise((resolve, reject) => { + const imgFile = this.getFile(filename); + + if (!imgFile) { + reject(new Error(`File not found: ${filename}`)); + return; + } + + const reader = new FileReader(); + + reader.onload = (event) => { + const img = new Image(); + img.onload = () => { + resolve({ width: img.width, height: img.height }); + }; + img.onerror = () => { + reject(new Error(`Failed to load image: ${filename}`)); + }; + img.src = event.target.result as string; + }; + + reader.readAsDataURL(imgFile); + }); + } + + public getFile(key: string): File { if (this.allFiles.has(key)) { return this.allFiles.get(key).file; diff --git a/src/Dashboard/UploadTools.ts b/src/Dashboard/UploadTools.ts index 9a0abaff..5c52eebb 100644 --- a/src/Dashboard/UploadTools.ts +++ b/src/Dashboard/UploadTools.ts @@ -105,8 +105,15 @@ export function handleMakePair(): void { mei_filename = fn.join('.'); // Create new MEI file - const newMeiFile = fm.createMeiFile(mei_filename); - fm.addFile(newMeiFile); + fm.getImgDimension(image_filename) + .then((dimensions) => { + const { width, height } = dimensions; + const newMeiFile = fm.createMeiFile(mei_filename, width, height); + fm.addFile(newMeiFile); + }) + .catch((error) => { + console.error(error.message); + }); } const filename = mei_filename.substring(0, mei_filename.length-4); // make and append UI element