Add undo for transform tool

web/page/bspaint.js

@@ -139,7 +139,7 @@ class Layer {
     ctx.globalCompositeOperation=this.compositeOperation;
     ctx.globalAlpha=this.opacity;
     ctx.setTransform(...this.transform);
-    ctx.drawImage(this.canvas);
+    ctx.drawImage(this.canvas,0,0);
     ctx.restore();    
   }
   convertFromPicCoords(x, y) {
@@ -186,6 +186,23 @@ class Layer {
     this.transform = concatenateTransforms(this.transform, newTransform);
   }
 
+  undoRecord() {
+    return {
+      type: 'layer',
+      layer: this,
+      compositeOperation: this.compositeOperation,
+      transform : [...this.transform],
+      data: this.ctx.getAllImageData()
+    }
+  }
+  undoTransformRecord() {
+    return {
+      type:"layerTransform",
+      layer:this,
+      transform:[...this.transform]
+    }
+  }
+
 }
 
 function updateMirrorGridButtonImage() {
@@ -336,9 +353,7 @@ function createDrawArea(canvas = blankCanvas(),initialTitle="Image") {
         if (this.isDrawing && layer===this.activeLayer) {
           canvas.ctx.drawImage(activeOperationCanvas,0,0);          
         } else {
-          canvas.ctx.setTransform(...layer.transform);
-          canvas.ctx.drawImage(layer.canvas,0,0);
-
+          layer.draw(canvas.ctx);
         }
       }
       canvas.ctx.restore();
@@ -390,6 +405,7 @@ function createDrawArea(canvas = blankCanvas(),initialTitle="Image") {
         transmitCanvas(canvas);          
       }
       this.composite(false);
+      if (typeof tool?.drawUI === "function") tool.drawUI(); 
     },
 
     startDraw(x,y) {
@@ -518,6 +534,11 @@ function createDrawArea(canvas = blankCanvas(),initialTitle="Image") {
       }
       this.updateLayerList(newList);
     },    
+    addUndoRecord(record) {
+      undoStack.push(record);
+      if (undoStack.length > undoDepth) undoStack.shift();
+      redoStack.length=0;
+    },
     undo() {
       const lastRecord = undoStack.pop();
       if (lastRecord) {
@@ -529,14 +550,17 @@ function createDrawArea(canvas = blankCanvas(),initialTitle="Image") {
           redoStack.push({
             type: 'layer',
             layer: lastRecord.layer,
+            compositeOperation: lastRecord.layer.compositeOperation,
             transform : [...lastRecord.layer.transform],
             data: lastRecord.layer.ctx.getAllImageData()
           });
+          layer.transform=[...lastRecord.transform];
+          layer.compositeOperation=lastRecord.compositeOperation;
           const ctx = lastRecord.layer.ctx;
-          ctx.save();
-          ctx.setTransform(...lastRecord.transform);
           ctx.putImageData(lastRecord.data, 0, 0);
-          ctx.restore();
+        } else if (lastRecord.type==="layerTransform") {
+          redoStack.push(lastRecord.layer.undoTransformRecord());
+          lastRecord.layer.transform=[...lastRecord.transform];
         }
         //... (handle other types of undoRecords)
       }
@@ -555,10 +579,16 @@ function createDrawArea(canvas = blankCanvas(),initialTitle="Image") {
           undoStack.push({
             type: 'layer',
             layer: lastRecord.layer,
-            transform: [...lastRecord.layer.transform],
+            compositeOperation: lastRecord.layer.compositeOperation,
+            transform: [...lastRecord.layer.transform],            
             data: lastRecord.layer.ctx.getAllImageData()
           });
+          lastRecord.layer.transform=[...lastRecord.transform];
+          lastRecord.layer.compositeOperation=lastRecord.compositeOperation;
           lastRecord.layer.ctx.putImageData(lastRecord.data, 0, 0);
+        } else if (lastRecord.type==="layerTransform") {
+          redoStack.push(lastRecord.layer.undoTransformRecord());
+          lastRecords.layer.transform=[...lastRecord.transform];
         }
         //... (handle other types of redoRecords)
       }

web/page/paintTools.js

@@ -231,6 +231,7 @@ const transformTool = (_=> {  //closure
   let dragHandler;
   let mouseDownPosition
   let preserveAspect = false;
+  let moved = false;
   let scaleHandlers= [
     dragTopLeft,dragTopRight,dragBottomRight,dragBottomLeft,dragTop,dragRight,dragBottom,dragLeft
   ];
@@ -331,6 +332,8 @@ const transformTool = (_=> {  //closure
           mouseDownTransform=[...layer.transform];
           mouseDownPosition = {x:e.offsetX,y:e.offsetY}          
           console.log({mouseDownAngle})
+          moved=false;
+
         }
       }
     },
@@ -340,7 +343,14 @@ const transformTool = (_=> {  //closure
     mousemove(e) { 
       
       if ((e.buttons && 1) !== 1) dragStop();
-      if (dragHandler) dragHandler(e);
+      if (dragHandler) {
+        if (!moved) {
+          activePic.addUndoRecord(layer.undoTransformRecord());
+          moved=true;
+        }
+        dragHandler(e);
+
+      }
       tool.drawUI();
 
     },
@@ -446,27 +456,6 @@ const transformTool = (_=> {  //closure
     activePic.updateVisualRepresentation();
   }
 
-  function rotateTopRight(e) {
-    
-  }
-  function rotateBottomLeft(e) {
-    
-  }
-  function rotateBottomRight(e) {
-    
-  }
-  function rotateTop(e) {
-    
-  }
-  function rotateBottom(e) {
-    
-  }
-  function rotateLeft(e) {
-    
-  }
-  function rotateRight(e) {
-    
-  }
 
 
   return tool;