Progress on zoom

main.js

@@ -1,23 +1,28 @@
 const {app, BrowserWindow, webFrame, Menu} = require('electron')
 const path = require('path')
 const url = require('url')
+const shell = require('electron').shell
 
 let win
 
 app.on('ready', () => 
 {
-  win = new BrowserWindow({width: 930, height: 540, minWidth:300, minHeight:300, backgroundColor:"#000", frame:false, resizable:true, autoHideMenuBar: true, icon: __dirname + '/icon.ico'})
+  win = new BrowserWindow({width: 930, height: 540, frame:false, backgroundColor: '#000', show:false,  resizable:true, transparent: true, autoHideMenuBar: true, icon: __dirname + '/icon.ico'})
+
+  var nativeHandleBuffer = win.getNativeWindowHandle();
 
   win.loadURL(`file://${__dirname}/sources/index.html`)
     
   let is_shown = true;
+  let is_fullscreen = false;
 
-  if (process.platform === 'darwin') {
   Menu.setApplicationMenu(Menu.buildFromTemplate([
     {
       label: 'File',
       submenu: [
-          { label: 'Quit', accelerator: 'CmdOrCtrl+Q', click: function() { force_quit=true; app.exit(); }}
+        { label: 'Inspector', accelerator: 'CmdOrCtrl+.', click: () => { win.webContents.openDevTools(); }},
+        { label: 'Guide', accelerator: 'CmdOrCtrl+,', click: () => { shell.openExternal('https://github.com/hundredrabbits/Ronin'); }},
+        { label: 'Quit', accelerator: 'CmdOrCtrl+Q', click: () => { force_quit=true; app.exit(); }}
       ]
     },
     {
@@ -41,11 +46,9 @@ app.on('ready', () =>
       ]
     }
   ]));
-  }
 
-  win.on('closed', () => {
-    win = null
-    app.quit()
+  win.on('ready-to-show',function() {
+    win.show();
   })
 
   win.on('hide',function() {
@@ -55,8 +58,6 @@ app.on('ready', () =>
   win.on('show',function() {
     is_shown = true;
   })
-  // Open the DevTools.
-  // win.webContents.openDevTools()
 })
 
 app.on('window-all-closed', () => 

sources/links/main.css

@@ -12,14 +12,16 @@ yu { display:block; }
 #under { z-index:799; position: fixed; }
 #grid { z-index:795;position: fixed; }
 
-#ronin { background:#eee; height: 100vh; width:100vw; }
-#commander, #hint { position: fixed;bottom: 0px;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; background:black; }
-#commander input { background: transparent;width: calc(100vw - 30px);display: block;line-height: 40px;font-size: 11px;color: white; margin-left:20px;    z-index: 9000;position: relative; }
+#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 { 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;}
 #hint b { font-family: 'input_mono_regular'; color:#999;}
 #hint i { font-style: italic; }
 #hint .autocomplete { background:white; color:black; }
 
-#cursor_hint { position: absolute;top: 0px;right: 20px;color: white; padding: 0px 10px; color:#555; font-size:11px; text-transform: uppercase; }
+#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 }

sources/media/assets/grid.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1">
+  <circle cx="15" cy="15" r="0.5" fill="#fff"></circle>
+</svg>

sources/scripts/core/commander.js

@@ -117,6 +117,16 @@ function Commander()
     ronin.commander.update();    
   }
 
+  this.show = function()
+  {
+    this.el.style.display = "block";
+  }
+
+  this.hide = function()
+  {
+    this.el.style.display = "none";
+  }
+
   this.query = function()
   {
     return new Query(ronin.commander.input_el.value);

sources/scripts/core/cursor.js

@@ -8,10 +8,11 @@ function Cursor(rune)
   this.query = null;
   this.mode = "vertex";
 
-  this.color = "#444444"
+  this.color = "#000000"
   this.color_alt = "#ff0000"
   this.size = 4;
   this.under = false;
+  this.pos = {x:0,y:0};
 
   this.draw_cursor = function(pos,touch = false)
   {
@@ -33,11 +34,26 @@ function Cursor(rune)
     ctx.closePath();
   }
 
+  this.mouse_pos = function(e)
+  {
+    var pos = {x:e.clientX,y:e.clientY};
+
+    pos.x = ((pos.x/ronin.frame.width) / ronin.frame.zoom.scale) * ronin.frame.width;
+    pos.y = ((pos.y/ronin.frame.height) / ronin.frame.zoom.scale) * ronin.frame.height;
+
+    pos.x -= (ronin.frame.zoom.offset.x / ronin.frame.zoom.scale);
+    pos.y -= (ronin.frame.zoom.offset.y / ronin.frame.zoom.scale);
+
+    var magnet_pos = ronin.magnet.filter({x:pos.x,y:pos.y});
+    return magnet_pos;
+  }
+
   this.mouse_down = function(e)
   {
     e.preventDefault();
 
-    var pos = ronin.magnet.filter({x:e.clientX,y:e.clientY});
+    var pos = ronin.cursor.mouse_pos(e);
+    ronin.cursor.pos = pos;
 
     // Color Pick
     if(ronin.commander.input_el.value == "~"){
@@ -77,7 +93,8 @@ function Cursor(rune)
   {
     e.preventDefault();
 
-    var pos = ronin.magnet.filter({x:e.clientX,y:e.clientY});
+    var pos = ronin.cursor.mouse_pos(e);
+    ronin.cursor.pos = pos;
 
     ronin.cursor.draw_cursor({x:pos.x,y:pos.y});
 
@@ -107,7 +124,8 @@ function Cursor(rune)
   {   
     e.preventDefault();
 
-    var pos = ronin.magnet.filter({x:e.clientX,y:e.clientY});
+    var pos = ronin.cursor.mouse_pos(e);
+    ronin.cursor.pos = pos;
 
     ronin.cursor.draw_cursor({x:pos.x,y:pos.y},true);
     
@@ -120,10 +138,11 @@ function Cursor(rune)
     ronin.cursor.mode = "vertex";
 
     ronin.cursor.query = ronin.commander.input_el.value;
-
-    if(ronin.cursor.under){
-      ronin.cursor.flatten();
   }
+
+  this.mouse_alt = function(e)
+  {
+    console.log(e);
   }
 
   this.flatten = function()
@@ -149,10 +168,11 @@ function Cursor(rune)
 
   this.drag = function(line)
   {
+    var target = this.under ? ronin.layers.under : ronin.layers.render;
     var offset = make_offset(line.from,line.to);
-    var data = ronin.render.select();
-    ronin.render.clear();
-    ronin.render.context().putImageData(data, offset.x * -2, offset.y * -2);
+    var data = target.select();
+    target.clear();
+    target.context().putImageData(data, offset.x * -2, offset.y * -2);
   }
 
   this.swap_colors = function()

sources/scripts/core/keyboard.js

@@ -31,12 +31,16 @@ function Keyboard()
       ronin.guide.clear();
       ronin.guide.inspect = false;
       ronin.preview.clear();
+      if(!ronin.commander.is_focused()){
+        ronin.commander.hide();
+      }
     }
 
     if(e.key == "tab" || e.keyCode == 9){
       e.preventDefault();
       ronin.cursor.update();
       ronin.commander.autocomplete();
+      ronin.commander.show();
       return;
     }
 
@@ -88,6 +92,21 @@ function Keyboard()
       ronin.cursor.swap_layer();
     }
 
+    if(e.key == "1"){
+      e.preventDefault();
+      ronin.frame.methods.zoom.run(1);
+    }
+
+    if(e.key == "2"){
+      e.preventDefault();
+      ronin.frame.methods.zoom.run(2);
+    }
+
+    if(e.key == "3"){
+      e.preventDefault();
+      ronin.frame.methods.zoom.run(4);
+    }
+
     ronin.hint.update(e);
   }
 }

sources/scripts/core/layer.js

@@ -1,6 +1,7 @@
 function Layer()
 {
   this.el = document.createElement('canvas');
+  this.className = "layer";
 
   this.install = function()
   {

sources/scripts/modules/brush.js

@@ -5,7 +5,9 @@ function Brush()
   this.speed = 0;
 
   this.pointers = [
-    new Pointer({offset:{x:0,y:0}})
+    new Pointer({offset:{x:0,y:0}}),
+    new Pointer({offset:{x:2,y:2}}),
+    new Pointer({offset:{x:4,y:4}})
   ];
 
   this.methods.add = new Method("add","x,y&mirror_x,mirror_y","Add a new pointer to the brush",function(q){

sources/scripts/modules/frame.js

@@ -4,6 +4,7 @@ function Frame()
   
   this.width = 400;
   this.height = 400;
+  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);
@@ -38,6 +39,25 @@ function Frame()
     ronin.guide.draw();
   });
 
+  this.methods.zoom = new Method("zoom","","Zoom canvas",function(q){
+    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.layers.render.el.style.height = (ronin.frame.height * ronin.frame.zoom.scale)+"px";
+
+    if(ronin.frame.zoom.scale == 1){
+      ronin.frame.zoom.offset.x = 0;
+      ronin.frame.zoom.offset.y = 0;
+    }
+    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)
   {
     ronin.frame.width = size.width;

sources/scripts/ronin.js

@@ -69,6 +69,7 @@ function Ronin()
     ronin.cursor.el.addEventListener('mousedown', ronin.cursor.mouse_down);
     ronin.cursor.el.addEventListener('mousemove', ronin.cursor.mouse_move);
     ronin.cursor.el.addEventListener('mouseup', ronin.cursor.mouse_up);
+    ronin.cursor.el.addEventListener('contextmenu', ronin.cursor.mouse_alt);
     window.addEventListener('keydown', ronin.keyboard.key_down);
     window.addEventListener('keyup', ronin.keyboard.key_up);
     ronin.commander.input_el.addEventListener('input', ronin.commander.on_input);