Minor progress on layer merges

scripts/modules/file.save.js

@@ -6,9 +6,9 @@ function FileSave(rune)
   
   this.active = function(cmd)
   {
-    var n = cmd.any().string[1];
+    var n = "Ronin Export";
     var f = cmd.variable("format");
-    var d = ronin.canvas.element.toDataURL("image/png");
+    var d = ronin.surface.merged();
     var w = window.open('about:blank','image from canvas');
     w.document.write("<title>"+(n ? n : "Untitled")+"</title><img src='"+d+"'/>");
   }

scripts/modules/surface.js

@@ -73,7 +73,13 @@ function Surface(rune)
   this.widget = function()
   {
     if(!this.active_layer){ return ""; }
-    return "# "+this.active_layer.name;
+
+    var s = "";
+
+    Object.keys(ronin.surface.layers).forEach(function (key) {
+      s += "# "+key+"<br />";
+    });
+    return s; // "# "+this.active_layer.name;
   }
   
   this.widget_cursor = function()
@@ -87,6 +93,26 @@ function Surface(rune)
   {
     return this.active_layer.context();
   }
+
+  this.merged = function()
+  {
+    var export_canvas = document.createElement("canvas");
+    export_canvas.width = this.size.width;
+    export_canvas.height = this.size.height;
+
+    Object.keys(ronin.surface.layers).forEach(function (key) {
+      var base_image = new Image();
+      base_image.src = ronin.surface.layers[key].element.toDataURL('image/png');
+      export_canvas.getContext('2d').drawImage(base_image,0,0);
+    });
+
+    return this.active_layer.element.toDataURL('image/png');
+
+    // this.context().globalCompositeOperation = "copy";
+    // this.context().drawImage(this.context().canvas, -offset_x, -offset_y);
+    // this.context().globalCompositeOperation = "source-over";
+
+  }
   
   // Cursor
   

scripts/modules/surface.layer.js

@@ -9,7 +9,6 @@ function Layer(name)
   {
     console.log("Resize "+this.name+" to "+rect.render());
 
-    var canvas_pixels = this.element.toDataURL("image/png");
     var pixels_rect   = new Rect(this.element.width+"x"+this.element.height);
     
     this.element.width = rect.width * 2;
@@ -18,12 +17,6 @@ function Layer(name)
     this.element.style.height = rect.height+"px";
 
     this.context().scale(2,2);
-    
-    // base_image = new Image();
-    // base_image.src = canvas_pixels;
-    
-    // ronin.surface.context().drawImage(base_image, -position.x, -position.y, pixels_rect.width, pixels_rect.height);
-    // ronin.surface.context().scale(2,2);
   }
 
   this.clear = function()
@@ -61,7 +54,7 @@ function Layer(name)
     
     this.context().globalCompositeOperation = "copy";
     this.context().drawImage(this.context().canvas, -offset_x, -offset_y);
-    this.context().globalCompositeOperation = "source-over"
+    this.context().globalCompositeOperation = "source-over";
     
     this.move_from = new Position(position.x,position.y);
   }