Set <surface> based on image size

DDMAL · Dec 13, 2023 · f5ffa37 · f5ffa37
1 parent 699b1e0
commit f5ffa37
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 5 deletions.
diff --git a/deployment/server/samples/mei/mei_template.mei b/deployment/server/samples/mei/mei_template.mei
@@ -13,7 +13,7 @@
     </meiHead>
     <music>
         <facsimile>
-            <surface lrx="4872" lry="6496">
+            <surface>
             </surface>
         </facsimile>
         <body>

diff --git 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
@@ -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