diff --git a/main.js b/main.js index 1883ce5..a328d77 100644 --- a/main.js +++ b/main.js @@ -1,51 +1,54 @@ 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: 'Edit', - submenu: [ - { role: 'undo' }, - { role: 'redo' }, - { role: 'cut' }, - { role: 'copy' }, - { role: 'paste' }, - { role: 'delete' }, - { role: 'selectall' } - ] - }, - { - label: 'Window', - submenu : [ - { label: 'Hide', accelerator: 'CmdOrCtrl+H',click: () => { if(is_shown){ win.hide(); } else{ win.show(); }}}, - { label: 'Minimize', accelerator: 'CmdOrCtrl+M',click: () => { win.minimize(); }}, - { label: 'Fullscreen', accelerator: 'CmdOrCtrl+Enter',click: () => { win.setFullScreen(win.isFullScreen() ? false : true); }} - ] - } - ])); - } + Menu.setApplicationMenu(Menu.buildFromTemplate([ + { + label: 'File', + submenu: [ + { 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(); }} + ] + }, + { + label: 'Edit', + submenu: [ + { role: 'undo' }, + { role: 'redo' }, + { role: 'cut' }, + { role: 'copy' }, + { role: 'paste' }, + { role: 'delete' }, + { role: 'selectall' } + ] + }, + { + label: 'Window', + submenu : [ + { label: 'Hide', accelerator: 'CmdOrCtrl+H',click: () => { if(is_shown){ win.hide(); } else{ win.show(); }}}, + { label: 'Minimize', accelerator: 'CmdOrCtrl+M',click: () => { win.minimize(); }}, + { label: 'Fullscreen', accelerator: 'CmdOrCtrl+Enter',click: () => { win.setFullScreen(win.isFullScreen() ? false : true); }} + ] + } + ])); - 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', () => diff --git a/sources/links/main.css b/sources/links/main.css index 37a8fdc..efb952a 100644 --- a/sources/links/main.css +++ b/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 .mode {} \ No newline at end of file +#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 } \ No newline at end of file diff --git a/sources/media/assets/grid.svg b/sources/media/assets/grid.svg new file mode 100644 index 0000000..d5b4b91 --- /dev/null +++ b/sources/media/assets/grid.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/sources/scripts/core/commander.js b/sources/scripts/core/commander.js index c553a29..43b6fa1 100644 --- a/sources/scripts/core/commander.js +++ b/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); diff --git a/sources/scripts/core/cursor.js b/sources/scripts/core/cursor.js index 977a663..1319ae0 100644 --- a/sources/scripts/core/cursor.js +++ b/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() diff --git a/sources/scripts/core/keyboard.js b/sources/scripts/core/keyboard.js index b36633d..385e281 100644 --- a/sources/scripts/core/keyboard.js +++ b/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); } } \ No newline at end of file diff --git a/sources/scripts/core/layer.js b/sources/scripts/core/layer.js index 705f042..22b3f77 100644 --- a/sources/scripts/core/layer.js +++ b/sources/scripts/core/layer.js @@ -1,6 +1,7 @@ function Layer() { this.el = document.createElement('canvas'); + this.className = "layer"; this.install = function() { diff --git a/sources/scripts/modules/brush.js b/sources/scripts/modules/brush.js index 864a0f8..fad3641 100644 --- a/sources/scripts/modules/brush.js +++ b/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){ diff --git a/sources/scripts/modules/frame.js b/sources/scripts/modules/frame.js index ac74c37..2266141 100644 --- a/sources/scripts/modules/frame.js +++ b/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; diff --git a/sources/scripts/ronin.js b/sources/scripts/ronin.js index b0c80ac..8202e84 100644 --- a/sources/scripts/ronin.js +++ b/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);