From 42b47e817deee31b092da5bd89d2364c581ac5f1 Mon Sep 17 00:00:00 2001
From: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Sun, 25 Dec 2016 14:47:19 -0700
Subject: [PATCH] Progress on saving a merged image.

---
 scripts/core/init.js             |  1 +
 scripts/modules/file.save.js     |  3 +-
 scripts/modules/overlay.js       |  2 --
 scripts/modules/surface.js       | 61 +++++++++++++++++---------------
 scripts/modules/surface.layer.js | 16 +++++++++
 5 files changed, 52 insertions(+), 31 deletions(-)

diff --git a/scripts/core/init.js b/scripts/core/init.js
index b73a72d..fa54bcd 100644
--- a/scripts/core/init.js
+++ b/scripts/core/init.js
@@ -25,5 +25,6 @@ starting_canvas.height = window.innerHeight - 200;
 
 commander.query("~ "+ronin.timestamp());
 commander.query("# "+starting_canvas.render());
+commander.query("# layer=render");
 commander.query("# layer=main");
 commander.query("> 1 0,0 #000000");
\ No newline at end of file
diff --git a/scripts/modules/file.save.js b/scripts/modules/file.save.js
index 3877059..1530f48 100644
--- a/scripts/modules/file.save.js
+++ b/scripts/modules/file.save.js
@@ -8,7 +8,8 @@ function FileSave(rune)
   {
     var n = "Ronin Export";
     var f = cmd.variable("format");
-    var d = ronin.surface.merged();
+    var d = ronin.surface.merge();
+    d = ronin.surface.layers["render"].element.toDataURL('image/png');
     var w = window.open('about:blank','image from canvas');
     w.document.write("<title>"+(n ? n : "Untitled")+"</title><img src='"+d+"'/>");
   }
diff --git a/scripts/modules/overlay.js b/scripts/modules/overlay.js
index 710e450..d86634f 100644
--- a/scripts/modules/overlay.js
+++ b/scripts/modules/overlay.js
@@ -105,8 +105,6 @@ function Overlay(rune)
   {
     this.element.width = rect.width * 2;
     this.element.height = rect.height * 2;
-    this.element.style.left = (window.innerWidth/2)-(rect.width/2);
-    this.element.style.top = (window.innerHeight/2)-(rect.height/2);
     this.element.style.width = rect.width+"px";
     this.element.style.height = rect.height+"px";
     this.context().scale(2,2);
diff --git a/scripts/modules/surface.js b/scripts/modules/surface.js
index 691e570..9b3ee71 100644
--- a/scripts/modules/surface.js
+++ b/scripts/modules/surface.js
@@ -8,6 +8,7 @@ function Surface(rune)
 
   this.layers = {};
   this.active_layer = null;
+  this.render_layer = null;
 
   this.size = null;
   
@@ -24,22 +25,30 @@ function Surface(rune)
       this.context().fill();
     }
 
-    //
-
     if(cmd.variable("layer")){
-      var layer_name = cmd.variable("layer").value;
-      if(this.layers[layer_name]){
-        console.log("Selecting layer:"+layer_name);
-        this.active_layer = this.layers[layer_name];
-      }
-      else{
-        console.log("Creating layer:"+layer_name); 
-        this.layers[layer_name] = new Layer(layer_name,this.size);
-        this.active_layer = this.layers[layer_name];
-        this.element.appendChild(this.active_layer.element);
-        this.active_layer.resize(this.size);
+      var name = cmd.variable("layer").value;
+      if(!this.layers[name]){
+        this.add_layer(new Layer(name,this.size));
       }
+      this.select_layer(this.layers[name]);
     }
+
+  }
+
+  this.select_layer = function(layer)
+  {
+    console.log("Selecting layer:"+layer.name);
+    this.active_layer = layer;
+  }
+
+  this.add_layer = function(layer)
+  {
+    console.log("Creating layer:"+layer.name); 
+
+    this.layers[layer.name] = layer;
+    this.active_layer = layer;
+    this.element.appendChild(layer.element);
+    this.active_layer.resize(this.size);
   }
   
   this.passive = function(cmd)
@@ -94,24 +103,20 @@ function Surface(rune)
     return this.active_layer.context();
   }
 
-  this.merged = function()
+  this.merge = function()
   {
-    var export_canvas = document.createElement("canvas");
-    export_canvas.width = this.size.width;
-    export_canvas.height = this.size.height;
-
+    this.render_layer = this.layers["render"];
+    
+    var a = [];
     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);
+      if(key != "render"){
+        a.push(ronin.surface.layers[key]);
+      }
     });
-
-    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";
-
+    for (i = a.length; i > 0 ; i--) {
+      ronin.surface.render_layer.context().drawImage(a[i-1].context().canvas,10,10);
+    }
+    return this.render_layer;
   }
   
   // Cursor
diff --git a/scripts/modules/surface.layer.js b/scripts/modules/surface.layer.js
index 994ccf7..c527ada 100644
--- a/scripts/modules/surface.layer.js
+++ b/scripts/modules/surface.layer.js
@@ -29,6 +29,22 @@ function Layer(name)
     return this.element.getContext('2d');
   }
 
+  this.image = function()
+  {
+    return this.element.toDataURL('image/png');
+  }
+
+  this.merge = function()
+  {
+    console.log(ronin.surface.render_layer);
+    var ctx = ronin.surface.render_layer.context();
+    var img = new Image();
+    img.onload = function(){
+      ctx.drawImage(img,10,10);
+    };
+    img.src = this.element.toDataURL();
+  }
+
   //
 
   this.widget_cursor = function()