Load transformed images

src/main.js

@@ -261,11 +261,20 @@ let actions = {
       undoStack.push({name: "addImageObject", action: action})
       actions.addImageObject.execute(action)
     },
-    execute: (action) => {
+    execute: async (action) => {
       let imageObject = new GraphicsObject(action.objectUuid)
       // let img = pointerList[action.img] 
       let img = new Image();
-      img.onload = function() {
+      function loadImage(src) {
+        return new Promise((resolve, reject) => {
+          let img = new Image();
+          img.onload = () => resolve(img);  // Resolve the promise with the image once loaded
+          img.onerror = (err) => reject(err);  // Reject the promise if there's an error loading the image
+          img.src = src;  // Start loading the image
+        });
+      }
+      img = await loadImage(action.src)
+      // img.onload = function() {
         let ct = {
           ...context,
           fillImage: img,
@@ -287,8 +296,8 @@ let actions = {
           action.y-img.height/2 + (20*action.ix)
         )
         updateUI();
-      }
+      // }
-      img.src = action.src
+      // img.src = action.src
     },
     rollback: (action) => {
       let shape = pointerList[action.shapeUuid]
@@ -318,10 +327,14 @@ let actions = {
     execute: (action) => {
       let frame = pointerList[action.frame]
       frame.keys = structuredClone(action.newState)
+      console.log(structuredClone(frame.keys))
+      console.log(frame.keys)
+      updateUI()
     },
     rollback: (action) => {
       let frame = pointerList[action.frame]
       frame.keys = structuredClone(action.oldState)
+      updateUI()
     }
   },
   addFrame: {
@@ -841,13 +854,13 @@ class Frame {
 
 class Layer {
   constructor(uuid) {         
-    this.frames = [new Frame("keyframe")]
     this.children = []
     if (!uuid) {
       this.idx = uuidv4()
     } else {
       this.idx = uuid
     }
+    this.frames = [new Frame("keyframe", this.idx+"-F1")]
     pointerList[this.idx] = this
   }
 }
@@ -1465,7 +1478,8 @@ class GraphicsObject {
       x: this.x,
       y: this.y,
       rotation: this.rotation,
-      scale: this.scale
+      scale_x: this.scale_x,
+      scale_y: this.scale_y
     }
   }
 }
@@ -1661,7 +1675,8 @@ async function open() {
               await messageDialog(`Invalid action ${action.name}. File may be corrupt.`, { title: "Error", kind: 'error'})
               return
             }
-            actions[action.name].execute(action.action)
+            console.log(action.name)
+            await actions[action.name].execute(action.action)
             undoStack.push(action)
           }
           updateUI()
@@ -1814,6 +1829,7 @@ function stage() {
             selection: structuredClone(selection)
           }
         }
+        context.activeObject.currentFrame.saveState()
       }
     })
     cornerRect.addEventListener('mouseup', (e) => {
@@ -2014,6 +2030,9 @@ function stage() {
           actions.editFrame.create(context.activeObject.currentFrame)
         } 
         break;
+      case "transform":
+        actions.editFrame.create(context.activeObject.currentFrame)
+        break;
       default:
         break;
     }