From 7d5df4b1491fc4b28f8c2e7bfc5cc9e5e14cd55d Mon Sep 17 00:00:00 2001
From: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Sun, 25 Dec 2016 11:47:45 -0700
Subject: [PATCH] Minor progress on layer merges

---
 links/main.css                   |  4 +++-
 scripts/core/widget.js           |  4 ++--
 scripts/modules/file.save.js     |  4 ++--
 scripts/modules/surface.js       | 28 +++++++++++++++++++++++++++-
 scripts/modules/surface.layer.js |  9 +--------
 5 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/links/main.css b/links/main.css
index f303aad..d2bdb36 100644
--- a/links/main.css
+++ b/links/main.css
@@ -7,7 +7,9 @@ canvas:hover { cursor: crosshair;}
 #surface { width:100vw; height:100vh; overflow:hidden; position:fixed; left:0px; top:0px; background:#efefef; border-radius:3px;}
 #surface .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;}
 #overlay { position:absolute; z-index:1000;}
-#widget { color:#efefef; position:absolute; font-size:10px; line-height:30px;}
+#widget { color:#efefef; position:absolute; font-size:10px; padding-top:10px;}
+#widget .module { float:left; margin-right:10px; }
+#widget .module .highlight { color:#72dec2; }
 #widget .cursor { float:right;}
 
 #commander { display:none; z-index: 2000; position:fixed; }
diff --git a/scripts/core/widget.js b/scripts/core/widget.js
index 3749010..c4d0004 100644
--- a/scripts/core/widget.js
+++ b/scripts/core/widget.js
@@ -7,10 +7,10 @@ function Widget()
     var s = "";
     
     for (var key in ronin.modules){
-      s += ronin.modules[key].widget();
+      s += ronin.modules[key].widget() ? "<div class='module'>"+ronin.modules[key].widget()+"</div>" : "";
     }
   
-    s += "<span class='cursor'>"+ronin.cursor.mode.widget_cursor()+"</span>";
+    s += "<div class='cursor'>"+ronin.cursor.mode.widget_cursor()+"</div>";
     
     this.element.innerHTML = s;
   }
diff --git a/scripts/modules/file.save.js b/scripts/modules/file.save.js
index 2524c17..3877059 100644
--- a/scripts/modules/file.save.js
+++ b/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+"'/>");
   }
diff --git a/scripts/modules/surface.js b/scripts/modules/surface.js
index 9ad122c..691e570 100644
--- a/scripts/modules/surface.js
+++ b/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
   
diff --git a/scripts/modules/surface.layer.js b/scripts/modules/surface.layer.js
index 1ff89e3..994ccf7 100644
--- a/scripts/modules/surface.layer.js
+++ b/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);
   }