Zoom is working

sources/index.html

@@ -17,9 +17,7 @@
     <script type="text/javascript" src="scripts/core/layer.js"></script>
     <script type="text/javascript" src="scripts/layers/grid.js"></script>
     <script type="text/javascript" src="scripts/layers/guide.js"></script>
-    <script type="text/javascript" src="scripts/layers/render.js"></script>
     <script type="text/javascript" src="scripts/layers/preview.js"></script>
-    <script type="text/javascript" src="scripts/layers/under.js"></script>
 
     <script type="text/javascript" src="scripts/core/docs.js"></script>
     <script type="text/javascript" src="scripts/core/port.js"></script>

sources/links/main.css

@@ -8,12 +8,12 @@ yu { display:block; }
 #cursor { z-index:899; position: fixed; }
 #guide { z-index:810;position: fixed; }
 #preview { z-index:805; position: fixed; }
-#render { z-index:800; position: fixed; }
+#above { z-index:800; position: fixed; }
-#under { z-index:799; position: fixed; }
+#below { z-index:799; position: fixed; }
 #grid { z-index:795;position: fixed; }
 
 #ronin { background-color:#aaa; height: 100vh; width:100vw; background-image:url(../media/assets/grid.svg);}
-#commander, #hint { position: fixed;bottom: 7px;left: 0px;width: 100vw;line-height: 40px;-webkit-user-select: none;-webkit-app-region: drag;z-index: 900;height: 40px; font-size:11px; cursor: default;}
+#commander, #hint { position: fixed;bottom: 8px;left: 0px;width: 100vw;line-height: 40px;-webkit-user-select: none;-webkit-app-region: drag;z-index: 900;height: 40px; font-size:11px; cursor: default;}
 #commander { z-index: 9000; }
 #commander input { background: transparent;width: calc(100vw - 30px);display: block;line-height: 40px;font-size: 11px;color: black; margin-left:20px; z-index: 9000;position: relative; }
 #hint {  color:#666; padding-left:20px;}
@@ -24,4 +24,4 @@ yu { display:block; }
 #cursor_hint { position: absolute;top: 0px;right: 10px;color: white; padding: 0px 10px; color:#555; font-size:11px; text-transform: uppercase; }
 #cursor_hint .mode {}
 
-.layer { transition: all 450ms }
+.layer { transition: all 150ms; left:0px; top:0px; }

sources/scripts/core/cursor.js

@@ -11,9 +11,10 @@ function Cursor(rune)
   this.color = "#000000"
   this.color_alt = "#ff0000"
   this.size = 4;
-  this.under = false;
   this.pos = {x:0,y:0};
 
+  this.target = null;
+
   this.draw_cursor = function(pos,touch = false)
   {
     this.clear();
@@ -63,7 +64,7 @@ function Cursor(rune)
       return;
     }
 
-    ronin.cursor.draw_cursor({x:pos.x,y:pos.y},true);
+    ronin.cursor.draw_cursor({x:e.clientX,y:e.clientY},true);
 
     ronin.cursor.line.origin = {x:pos.x,y:pos.y};
     ronin.cursor.line.from = {x:pos.x,y:pos.y};
@@ -96,7 +97,7 @@ function Cursor(rune)
     var pos = ronin.cursor.mouse_pos(e);
     ronin.cursor.pos = pos;
 
-    ronin.cursor.draw_cursor({x:pos.x,y:pos.y});
+    ronin.cursor.draw_cursor({x:e.clientX,y:e.clientY});
 
     if(!ronin.cursor.line.from){ return; }
 
@@ -127,7 +128,7 @@ function Cursor(rune)
     var pos = ronin.cursor.mouse_pos(e);
     ronin.cursor.pos = pos;
 
-    ronin.cursor.draw_cursor({x:pos.x,y:pos.y},true);
+    ronin.cursor.draw_cursor({x:e.clientX,y:e.clientY},true);
     
     ronin.cursor.line.destination = {x:pos.x,y:pos.y};
 
@@ -145,34 +146,12 @@ function Cursor(rune)
     console.log(e);
   }
 
-  this.flatten = function()
-  {
-    var a = ronin.under.to_img()
-    var b = null
-
-    a.onload = function(){
-      b = ronin.render.to_img()
-      b.onload = function(){
-        ronin.cursor.merge(a,b);
-      }
-    }
-  }
-
-  this.merge = function(a,b)
-  {
-    ronin.render.clear();
-    ronin.render.context().drawImage(a, 0,0,ronin.frame.width*2,ronin.frame.height*2);  
-    ronin.render.context().drawImage(b, 0,0,ronin.frame.width*2,ronin.frame.height*2);  
-    ronin.under.clear();
-  }
-
   this.drag = function(line)
   {
-    var target = this.under ? ronin.layers.under : ronin.layers.render;
     var offset = make_offset(line.from,line.to);
-    var data = target.select();
+    var data = ronin.cursor.target.select();
-    target.clear();
+    ronin.cursor.target.clear();
-    target.context().putImageData(data, offset.x * -2, offset.y * -2);
+    ronin.cursor.target.context().putImageData(data, offset.x * -2, offset.y * -2);
   }
 
   this.swap_colors = function()
@@ -185,7 +164,7 @@ function Cursor(rune)
 
   this.swap_layer = function()
   {
-    this.under = this.under ? false : true;
+    this.target = this.target.name == "above" ? ronin.layers.below : ronin.layers.above;
     ronin.commander.update();
   }
 
@@ -259,7 +238,7 @@ function Cursor(rune)
       mode = "DRAG";
     }
 
-    return "<t class='mode'>"+mode+"</t><t class='size'>"+ronin.cursor.size+"</t> "+(ronin.cursor.under ? "UNDER" : "ABOVE")+" <t class='color' style='color:"+ronin.cursor.color+"'>●</t><t class='color' style='color:"+ronin.cursor.color_alt+"'>●</t>";
+    return "<t class='zoom'>ZOOM"+ronin.frame.zoom.scale+"</t> <t class='mode'>"+mode+"</t><t class='size'>"+ronin.cursor.size+"</t> "+(ronin.cursor.target.name)+" <t class='color' style='color:"+ronin.cursor.color+"'>●</t><t class='color' style='color:"+ronin.cursor.color_alt+"'>●</t>";
   }
 
   function distance_between(a,b)

sources/scripts/core/keyboard.js

@@ -62,7 +62,7 @@ function Keyboard()
       e.preventDefault();
       ronin.guide.inspect = false;
       ronin.guide.clear();
-      ronin.render.clear();
+      ronin.cursor.target.clear();
     }
 
     // Open

sources/scripts/core/layer.js

@@ -1,7 +1,9 @@
-function Layer()
+function Layer(name)
 {
+  this.name = name;
   this.el = document.createElement('canvas');
-  this.className = "layer";
+  this.el.id = name;
+  this.el.className = "layer";
 
   this.install = function()
   {
@@ -66,4 +68,17 @@ function Layer()
     ctx.fill();
     ctx.closePath();
   }
+
+  this.zoom = function(zoom)
+  {
+    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"; 
+  }
 }

sources/scripts/layers/guide.js

@@ -41,7 +41,7 @@ function Guide()
   this.toggle_color_picker = function(show)
   {
     if(!show){ return; }
-    var originalData = ronin.render.context().getImageData(0, 0, ronin.frame.width*2, ronin.frame.height*2);
+    var originalData = ronin.cursor.target.context().getImageData(0, 0, ronin.frame.width*2, ronin.frame.height*2);
     var data = originalData.data;
     for(var i = 0; i < data.length; i += 4) {
       var x = i % (ronin.frame.width*8)

sources/scripts/layers/render.js

@@ -1,6 +0,0 @@
-function Render()
-{
-  Layer.call(this);
-  
-  this.el.id = "render";
-}

sources/scripts/layers/under.js

@@ -1,6 +0,0 @@
-function Under()
-{
-  Layer.call(this);
-  
-  this.el.id = "under";
-}

sources/scripts/modules/brush.js

@@ -6,8 +6,8 @@ function Brush()
 
   this.pointers = [
     new Pointer({offset:{x:0,y:0}}),
-    new Pointer({offset:{x:2,y:2}}),
+    new Pointer({offset:{x:3,y:3}}),
-    new Pointer({offset:{x:4,y:4}})
+    new Pointer({offset:{x:-2,y:-3}})
   ];
 
   this.methods.add = new Method("add","x,y&mirror_x,mirror_y","Add a new pointer to the brush",function(q){
@@ -21,7 +21,7 @@ function Brush()
   })
 
   this.methods.pick = new Method("pick","x,y","Set brush color to a position's pixel.",function(q){
-    var pixel = (ronin.commander.input_el.value == "~" ? ronin.guide: ronin.render).context() .getImageData(q.x*2, q.y*2, 1, 1).data;
+    var pixel = (ronin.commander.input_el.value == "~" ? ronin.guide: ronin.cursor.target).context() .getImageData(q.x*2, q.y*2, 1, 1).data;
     var c = new Color().rgb_to_hex(pixel);
     var color = new Color(c);
     ronin.cursor.color = color.hex;
@@ -59,7 +59,7 @@ function Brush()
       line.to = line.from
     }
 
-    var pixel = ronin.render.context().getImageData(line.to.x*2, line.to.y*2, 1, 1).data;
+    var pixel = ronin.cursor.target.context().getImageData(line.to.x*2, line.to.y*2, 1, 1).data;
   }
 
   this.mod_size = function(mod)
@@ -94,7 +94,7 @@ function Pointer(options)
 
   this.stroke = function(line)
   {
-    var ctx = ronin.cursor.under ? ronin.layers.under.context() : ronin.layers.render.context();
+    var ctx = ronin.cursor.target.context();
 
     if(this.options.mirror){
       line.from.x = (this.options.mirror.x *2) - line.from.x;

sources/scripts/modules/filter.js

@@ -6,7 +6,7 @@ function Filter()
 
     var color = new Color(q).floats();
 
-    var originalData = ronin.render.context().getImageData(0, 0, ronin.frame.width*2, ronin.frame.height*2);
+    var originalData = ronin.cursor.target.context().getImageData(0, 0, ronin.frame.width*2, ronin.frame.height*2);
     var data = originalData.data;
 
     for(var i = 0; i < data.length; i += 4) {
@@ -15,14 +15,14 @@ function Filter()
       data[i + 2] = data[i + 2] * (color.b + 0.5);
     }
 
-    ronin.render.context().putImageData(originalData, 0, 0);
+    ronin.cursor.target.context().putImageData(originalData, 0, 0);
   });
 
   this.methods.saturation = new Method("saturation","#ff00333","Filter color saturation.",function(q){
 
     var color = new Color(q).floats();
 
-    var originalData = ronin.render.context().getImageData(0, 0, ronin.frame.width*2, ronin.frame.height*2);
+    var originalData = ronin.cursor.target.context().getImageData(0, 0, ronin.frame.width*2, ronin.frame.height*2);
     var data = originalData.data;
 
     for(var i = 0; i < data.length; i += 4) {
@@ -33,7 +33,7 @@ function Filter()
       data[i] = data[i+1] = data[i+2] = v
     }
 
-    ronin.render.context().putImageData(originalData, 0, 0);
+    ronin.cursor.target.context().putImageData(originalData, 0, 0);
   });
 
   this.preview = function(q)
@@ -46,7 +46,7 @@ function Filter()
 
     var x = q.methods.saturation.x/ronin.frame.width;
 
-    var originalData = ronin.render.context().getImageData(0, 0, ronin.frame.width*2, ronin.frame.height*2);
+    var originalData = ronin.cursor.target.context().getImageData(0, 0, ronin.frame.width*2, ronin.frame.height*2);
     var data = originalData.data;
 
     for(var i = 0; i < data.length; i += 4) {

sources/scripts/modules/frame.js

@@ -7,31 +7,31 @@ function Frame()
   this.zoom = {scale:1,offset:{x:0,y:0}};
 
   this.methods.resize = new Method("resize","WxH","Resize canvas to size.",function(q){
-    var data = ronin.render.select(0,0,ronin.frame.width,ronin.frame.height);
+    var data = ronin.cursor.target.select(0,0,ronin.frame.width,ronin.frame.height);
-    ronin.render.clear();
+    ronin.cursor.target.clear();
     ronin.frame.resize_to(q);
-    ronin.render.context().putImageData(data, 0, 0);
+    ronin.cursor.target.context().putImageData(data, 0, 0);
   });
 
   this.methods.rescale = new Method("rescale","0.5","Rescale canvas to float.",function(p){
     var new_size = {width:ronin.frame.width * p,height:ronin.frame.height * p};
-    ronin.render.context().drawImage(ronin.render.to_img(),0,0,new_size.width * 2,new_size.height * 2);
+    ronin.cursor.target.context().drawImage(ronin.cursor.target.to_img(),0,0,new_size.width * 2,new_size.height * 2);
     setTimeout(function(){ ronin.frame.methods.resize.run(new_size);},500)
   });
 
   this.methods.crop = new Method("crop","X,Y|WxH","Crop canvas to rect.",function(p){
-    var data = ronin.render.select(0,0,p.width*2,p.height*2);
+    var data = ronin.cursor.target.select(0,0,p.width*2,p.height*2);
-    ronin.render.clear();
+    ronin.cursor.target.clear();
     ronin.frame.resize_to(p);
-    setTimeout(function(){ ronin.render.context().putImageData(data, p.x*-2, p.y*-2);},500)
+    setTimeout(function(){ ronin.cursor.target.context().putImageData(data, p.x*-2, p.y*-2);},500)
   });
 
   this.methods.clear = new Method("clear","","Erase entire canvas",function(q){
-    ronin.render.clear();
+    ronin.cursor.target.clear();
   });
 
   this.methods.fill = new Method("fill","#f00","Fill entire canvas with color",function(q){
-    ronin.render.fill(q ? q : ronin.cursor.color);
+    ronin.cursor.target.fill(q ? q : ronin.cursor.color);
   });
 
   this.methods.inspect = new Method("inspect","","View canvas details",function(q){
@@ -43,19 +43,12 @@ function Frame()
     if(ronin.frame.zoom.scale == parseInt(q)){ return; }
 
     ronin.frame.zoom.scale = parseInt(q);
-    ronin.layers.render.el.style.width = (ronin.frame.width * ronin.frame.zoom.scale)+"px";
+    ronin.frame.zoom.offset.x = ronin.frame.zoom.scale == 1 ? 0 : ((-ronin.cursor.pos.x * ronin.frame.zoom.scale) + (ronin.frame.width/2));
-    ronin.layers.render.el.style.height = (ronin.frame.height * ronin.frame.zoom.scale)+"px";
+    ronin.frame.zoom.offset.y = ronin.frame.zoom.scale == 1 ? 0 : ((-ronin.cursor.pos.y * ronin.frame.zoom.scale) + (ronin.frame.height/2));
 
-    if(ronin.frame.zoom.scale == 1){
+    console.log(ronin.frame.zoom)
-      ronin.frame.zoom.offset.x = 0;
+    ronin.layers.above.zoom(ronin.frame.zoom);
-      ronin.frame.zoom.offset.y = 0;
+    ronin.layers.below.zoom(ronin.frame.zoom);
-    }
-    else{
-      ronin.frame.zoom.offset.x = ((-ronin.cursor.pos.x * ronin.frame.zoom.scale) + (ronin.frame.width/2));
-      ronin.frame.zoom.offset.y = ((-ronin.cursor.pos.y * ronin.frame.zoom.scale) + (ronin.frame.height/2));
-    }
-    ronin.layers.render.el.style.left = ronin.frame.zoom.offset.x+"px"; 
-    ronin.layers.render.el.style.top = ronin.frame.zoom.offset.y+"px"; 
   });
 
   this.resize_to = function(size)
@@ -66,7 +59,7 @@ function Frame()
     const {dialog,app} = require('electron').remote;
     var win = require('electron').remote.getCurrentWindow();
     win.setSize(size.width,size.height);
-    ronin.render.resize_to(size);
+    ronin.cursor.target.resize_to(size);
     ronin.grid.resize_to(size);
     ronin.guide.resize_to(size);
     ronin.cursor.resize_to(size);

sources/scripts/modules/io.js

@@ -17,7 +17,7 @@ function IO()
         var width = parseInt(img.naturalWidth * 0.5);
         var height = parseInt(img.naturalHeight * 0.5);
         ronin.frame.resize_to({width:width,height:height});
-        ronin.io.draw_image(ronin.render.context(),img,{x:0,y:0,width:width,height:height});
+        ronin.io.draw_image(ronin.cursor.target.context(),img,{x:0,y:0,width:width,height:height});
       }
     });
   })
@@ -41,7 +41,7 @@ function IO()
   this.methods.draw = new Method("draw","X,Y|WxH","Draw the loaded image pixels.",function(q){
     if(!ronin.io.image){ return; }
 
-    ronin.io.draw_image(ronin.render.context(),ronin.io.image,ronin.commander.query().methods.draw);
+    ronin.io.draw_image(ronin.cursor.target.context(),ronin.io.image,ronin.commander.query().methods.draw);
     ronin.io.image = null;
     ronin.preview.clear();
   });
@@ -49,7 +49,7 @@ function IO()
   this.methods.save = new Method("save","jpg/png","Export canvas.",function(q){
     var ext = q ? q : "jpg";
     var fs = require('fs');
-    var data = ronin.render.to_base64(ext).replace(/^data:image\/\w+;base64,/, "");
+    var data = ronin.cursor.target.to_base64(ext).replace(/^data:image\/\w+;base64,/, "");
     var buf = new Buffer(data, 'base64');
 
     dialog.showSaveDialog((fileName) => {

sources/scripts/modules/line.js

@@ -38,7 +38,7 @@ function Line()
     }
   }
 
-  this.stroke = function(from,to,ctx = ronin.render.context())
+  this.stroke = function(from,to,ctx = ronin.cursor.target.context())
   {
     ctx.beginPath();
     ctx.globalCompositeOperation="source-over";

sources/scripts/modules/path.js

@@ -9,7 +9,7 @@ function Path()
 
     var path = ronin.path.create_path(q);
 
-    var ctx = ronin.render.context();
+    var ctx = ronin.cursor.target.context();
 
     ctx.beginPath();
     ctx.lineCap = ronin.path.settings.cap;
@@ -24,7 +24,7 @@ function Path()
 
     var path = ronin.path.create_path(q);
 
-    var ctx = ronin.render.context();
+    var ctx = ronin.cursor.target.context();
 
     ctx.beginPath();
     ctx.lineCap = ronin.path.settings.cap;
@@ -36,7 +36,7 @@ function Path()
 
   this.methods.svg = new Method("svg","M0,0 L100,100","",function(q){    
     var path = ronin.commander.query().raw.replace("svg:","").trim();
-    var ctx = ronin.render.context();
+    var ctx = ronin.cursor.target.context();
     ctx.beginPath();
     ctx.lineCap = ronin.path.settings.cap;
     ctx.lineWidth = ronin.cursor.size;

sources/scripts/modules/type.js

@@ -10,9 +10,9 @@ function Type()
     var size = rect.height * 2
     ronin.preview.clear();
 
-    ronin.render.context().textAlign = ronin.type.settings.anchor;
+    ronin.cursor.target.context().textAlign = ronin.type.settings.anchor;
-    ronin.render.context().font = size+"px "+ronin.type.settings.font.replace("+"," ");
+    ronin.cursor.target.context().font = size+"px "+ronin.type.settings.font.replace("+"," ");
-    ronin.render.context().fillText(q[0].replace("+"," "),rect.x * 2,(rect.y * 2)+size);
+    ronin.cursor.target.context().fillText(q[0].replace("+"," "),rect.x * 2,(rect.y * 2)+size);
   })
 
   this.preview = function(q)

sources/scripts/ronin.js

@@ -11,9 +11,9 @@ function Ronin()
 
   this.grid = new Grid();
   this.guide = new Guide();
-  this.render = new Render();
+  this.above = new Layer("above");
+  this.below = new Layer("below");
   this.preview = new Preview();
-  this.under = new Under();
 
   this.io = new IO();
   this.brush = new Brush();
@@ -26,8 +26,8 @@ function Ronin()
   this.layers = {
     grid : this.grid,
     guide : this.guide,
-    under : this.under,
+    above : this.above,
-    render : this.render,
+    below : this.below,
     cursor : this.cursor,
     preview : this.preview,
   };
@@ -49,10 +49,12 @@ function Ronin()
     this.frame.width = window.innerWidth;
     this.frame.height = window.innerHeight;
 
+    this.cursor.target = this.layers.above;
+
     this.grid.install();
     this.guide.install();
-    this.render.install();
+    this.above.install();
-    this.under.install();
+    this.below.install();
     this.preview.install();
     this.cursor.install();
 
@@ -75,8 +77,8 @@ function Ronin()
     ronin.commander.input_el.addEventListener('input', ronin.commander.on_input);
 
     console.log("Ronin","Started");
-    this.render.update();
+    this.above.update();
-    this.under.update();
+    this.below.update();
     this.grid.update();
     this.guide.update();
     this.cursor.update();