From 2e00d848f5f2fcd4e322aaeea978019609bfb57a Mon Sep 17 00:00:00 2001
From: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Wed, 3 Jan 2018 16:09:37 +1300
Subject: [PATCH] Progress on FullScreen

---
 sources/links/main.css           |  4 ++--
 sources/scripts/core/cursor.js   |  1 +
 sources/scripts/core/keyboard.js |  2 +-
 sources/scripts/core/layer.js    | 29 ++++++++++-------------------
 sources/scripts/modules/brush.js |  2 +-
 5 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/sources/links/main.css b/sources/links/main.css
index eaaeb07..3c6264c 100644
--- a/sources/links/main.css
+++ b/sources/links/main.css
@@ -10,7 +10,7 @@ yu { display:block; }
 #preview { z-index:805; position: fixed; }
 #above { z-index:800; position: fixed; }
 #below { z-index:799; position: fixed; }
-#grid { z-index:795;position: fixed; }
+#grid { z-index:795;position: fixed; display: none}
 
 #ronin { background-color:#ccc; height: 100vh; width:100vw; background-image:url(../media/assets/grid.svg);}
 #commander, #hint { width: 100vw;line-height: 40px;-webkit-user-select: none;-webkit-app-region: drag;z-index: 900;height: 40px; font-size:11px; cursor: default;}
@@ -38,4 +38,4 @@ yu { display:block; }
 #commander icon.brush icon.primary { display: block;width: 6px;height: 20px;border-radius: 20px;border-style: solid;top: 10px;left: 16px;position: absolute;background: pink;transform: rotate(23deg);}
 #commander icon.brush icon.secondary { display: block;width: 6px;height: 20px;border-radius: 20px;border-style: solid;top: 10px;left: 24px;position: absolute;background: pink;transform: rotate(23deg);}
 
-.layer { transition: all 150ms; left:0px; top:0px; outline-color: #bbb;outline-width: 1px;outline-style: solid;}
\ No newline at end of file
+.layer { transition: all 150ms; left:0px; top:0px; border-radius: 4px; overflow: hidden;}
\ No newline at end of file
diff --git a/sources/scripts/core/cursor.js b/sources/scripts/core/cursor.js
index 6306853..d10df1d 100644
--- a/sources/scripts/core/cursor.js
+++ b/sources/scripts/core/cursor.js
@@ -233,6 +233,7 @@ function Cursor(rune)
     }
 
     return `
+    <t class='frame'>${ronin.frame.width}x${ronin.frame.height}</t>
     <t class='target_${ronin.cursor.target.name}'></t><t class='size ${mode}'>${ronin.cursor.size}</t><t class='zoom'>${ronin.frame.zoom.scale}</t>
     <icon class='brush'><icon class='primary' style='background:${ronin.cursor.color}'></icon><icon class='secondary' style='background:${ronin.cursor.color_alt}'></icon></icon>`;
   }
diff --git a/sources/scripts/core/keyboard.js b/sources/scripts/core/keyboard.js
index 8636ec8..6675284 100644
--- a/sources/scripts/core/keyboard.js
+++ b/sources/scripts/core/keyboard.js
@@ -65,7 +65,7 @@ function Keyboard()
       ronin.brush.mod_size(-1);
     }
 
-    if(e.key == "n" && (e.ctrlKey || e.metaKey)){
+    if((e.key == "n" || e.key == "Backspace") && (e.ctrlKey || e.metaKey)){
       e.preventDefault();
       ronin.guide.inspect = false;
       ronin.guide.clear();
diff --git a/sources/scripts/core/layer.js b/sources/scripts/core/layer.js
index 11f3ccf..975442f 100644
--- a/sources/scripts/core/layer.js
+++ b/sources/scripts/core/layer.js
@@ -10,12 +10,12 @@ function Layer(name)
     ronin.el.appendChild(this.el);
   }
 
-  this.update = function()
+  this.update = function(zoom = {scale:1,offset:{x:0,y:0}})
   {
-    this.el.width = window.innerWidth * 2;
-    this.el.height = window.innerHeight * 2;
-    this.el.style.width = (window.innerWidth)+"px";
-    this.el.style.height = (window.innerHeight)+"px";
+    this.el.style.width = (ronin.frame.width * ronin.frame.zoom.scale)+"px";
+    this.el.style.height = (ronin.frame.height * ronin.frame.zoom.scale)+"px";
+    this.el.style.left = `calc(50vw - ${ronin.frame.width/2}px + ${zoom.offset.x}px)`;
+    this.el.style.top = `calc(50vh - ${ronin.frame.height/2}px + ${zoom.offset.y}px)`;
   }
 
   this.context = function()
@@ -25,10 +25,9 @@ function Layer(name)
 
   this.resize_to = function(size)
   {
-    this.el.width = size.width * 2;
-    this.el.height = size.height * 2;
-    this.el.style.width = size.width+"px";
-    this.el.style.height = size.height+"px";
+    this.el.width = ronin.frame.width * 2;
+    this.el.height = ronin.frame.height * 2;
+    this.update();
   }
 
   this.select = function(x = 0,y = 0,width = ronin.frame.width,height = ronin.frame.width)
@@ -69,16 +68,8 @@ function Layer(name)
     ctx.closePath();
   }
 
-  this.zoom = function(zoom)
+  this.zoom = function(zoom = {scale:1,offset:{x:0,y:0}})
   {
-    this.el.style.width = (ronin.frame.width * ronin.frame.zoom.scale)+"px";
-    this.el.style.height = (ronin.frame.height * ronin.frame.zoom.scale)+"px";
-
-    // Clamp
-    if(zoom.offset.x > 0){ zoom.offset.x = 0; }
-    if(zoom.offset.y > 0){ zoom.offset.y = 0; }
-
-    this.el.style.left = zoom.offset.x+"px"; 
-    this.el.style.top = zoom.offset.y+"px"; 
+    this.update(zoom);
   }
 }
\ No newline at end of file
diff --git a/sources/scripts/modules/brush.js b/sources/scripts/modules/brush.js
index d562fdd..3d8afce 100644
--- a/sources/scripts/modules/brush.js
+++ b/sources/scripts/modules/brush.js
@@ -62,7 +62,7 @@ function Brush()
 
   this.mod_size = function(mod)
   {
-    ronin.cursor.size = clamp(ronin.cursor.size+mod,1,100);
+    ronin.cursor.size = clamp(parseInt(ronin.cursor.size)+mod,1,100);
   }
 
   function clamp(v, min, max)