diff --git a/desktop/sources/index.html b/desktop/sources/index.html index 3dc3481..8e4a245 100644 --- a/desktop/sources/index.html +++ b/desktop/sources/index.html @@ -10,7 +10,6 @@ - diff --git a/desktop/sources/links/main.css b/desktop/sources/links/main.css index e4cf4b6..1a9ed76 100644 --- a/desktop/sources/links/main.css +++ b/desktop/sources/links/main.css @@ -4,10 +4,6 @@ body { padding: 5px; font-family: 'input_mono_regular'; -webkit-user-select: non #wrapper { padding: 25px; padding-bottom: 15px; -webkit-app-region: drag; padding-left:15px;} #dotgrid { margin:0px auto; position:relative; padding:10px;-webkit-app-region: no-drag; width:310px; height:310px; } -#cursor { opacity: 1; width:6px; height:6px; position:absolute; z-index:25; border-radius:15px; background:white; margin-left:2px; margin-top:2px;} -#cursor_x { position: absolute; top:0px; display: block; width:20px; height:10px; font-size: 11px; text-align: center; margin-left:10px; transition: left 100ms } -#cursor_y { position: absolute; left:-10px; display: block; width:20px; height:10px; font-size: 11px; text-align: right; margin-top:15px; transition: top 100ms } - #guide { position: absolute;width: 300px;height: 300px; margin-left: -5px; margin-top: -5px; transition: opacity 250ms} #render { display: none } @@ -50,6 +46,4 @@ body { background:var(--background) !important; } .icon { color:var(--f_high) !important; stroke:var(--f_high) !important; } #dotgrid svg.vector { stroke:var(--f_high) !important; } #dotgrid #preview { stroke:var(--f_high) !important; } -#dotgrid #cursor { background:var(--f_med); } -#dotgrid #cursor.keyboard { border-color:var(--f_high) !Important; } \ No newline at end of file diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index ced2472..57c94b4 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -7,7 +7,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.guide = new Guide(); this.render = new Render(); this.tool = new Tool(); - this.keyboard = new Keyboard(); this.picker = new Picker(); this.grid_x = grid_x; @@ -20,13 +19,13 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.wrapper = document.createElement("div"); this.wrapper.id = "wrapper"; - var cursor = null; - this.svg_el = null; this.layer_1 = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.layer_1.id = "layer_1"; this.layer_1.style.stroke = "black"; this.layer_2 = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.layer_2.id = "layer_2"; this.layer_2.style.stroke = "#999"; this.layer_3 = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.layer_3.id = "layer_3"; this.layer_3.style.stroke = "#ccc"; + this.cursor = { pos:{x:0,y:0},translation:null,multi:false } + this.install = function() { document.getElementById("app").appendChild(this.wrapper); @@ -34,21 +33,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.element.appendChild(this.guide.el); this.wrapper.appendChild(this.render.el); - // Cursors - this.cursor = document.createElement("div"); - this.cursor.id = "cursor"; - this.element.appendChild(this.cursor); - - this.cursor_x = document.createElement("t"); - this.cursor_x.id = "cursor_x"; - this.cursor_x.className = "fl" - this.element.appendChild(this.cursor_x); - - this.cursor_y = document.createElement("t"); - this.cursor_y.id = "cursor_y"; - this.cursor_y.className = "fl" - this.element.appendChild(this.cursor_y); - this.offset_el = document.createElementNS("http://www.w3.org/2000/svg", "g"); // Vector this.svg_el = document.createElementNS("http://www.w3.org/2000/svg", "svg"); @@ -127,6 +111,13 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.controller.add("default","Effect","Thicker +5",() => { dotgrid.mod_thickness(5,true) },"]"); this.controller.add("default","Effect","Thinner -5",() => { dotgrid.mod_thickness(-5,true) },"["); + this.controller.add("default","Manual","Add Point",() => { dotgrid.tool.add_vertex(dotgrid.cursor.pos); dotgrid.draw() },"Enter"); + this.controller.add("default","Manual","Move Up",() => { dotgrid.cursor.pos.y -= 15; dotgrid.draw() },"Up"); + this.controller.add("default","Manual","Move Right",() => { dotgrid.cursor.pos.x -= 15; dotgrid.draw() },"Right"); + this.controller.add("default","Manual","Move Down",() => { dotgrid.cursor.pos.y += 15; dotgrid.draw() },"Down"); + this.controller.add("default","Manual","Move Left",() => { dotgrid.cursor.pos.x += 15; dotgrid.draw() },"Left"); + this.controller.add("default","Manual","Remove Point",() => { dotgrid.tool.remove_segments_at(dotgrid.cursor.pos); },"CmdOrCtrl+Backspace"); + this.controller.add("default","Layers","Foreground",() => { dotgrid.tool.select_layer(0) },"CmdOrCtrl+1"); this.controller.add("default","Layers","Middleground",() => { dotgrid.tool.select_layer(1) },"CmdOrCtrl+2"); this.controller.add("default","Layers","Background",() => { dotgrid.tool.select_layer(2) },"CmdOrCtrl+3"); @@ -134,38 +125,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.controller.add("default","View","Tools",() => { dotgrid.interface.toggle(); },"U"); this.controller.add("default","View","Grid",() => { dotgrid.guide.toggle(); },"H"); - this.controller.add("default","Mode","Keyboard",() => { dotgrid.keyboard.start(); },"CmdOrCtrl+K"); this.controller.add("default","Mode","Picker",() => { dotgrid.picker.start(); },"CmdOrCtrl+P"); - this.controller.add("keyboard","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,"); - this.controller.add("keyboard","*","Fullscreen",() => { app.toggle_fullscreen(); },"CmdOrCtrl+Enter"); - this.controller.add("keyboard","*","Hide",() => { app.toggle_visible(); },"CmdOrCtrl+H"); - this.controller.add("keyboard","*","Inspect",() => { app.inspect(); },"CmdOrCtrl+."); - this.controller.add("keyboard","*","Documentation",() => { dotgrid.controller.docs(); },"CmdOrCtrl+Esc"); - this.controller.add("keyboard","*","Reset",() => { dotgrid.reset(); dotgrid.theme.reset(); },"CmdOrCtrl+Backspace"); - this.controller.add("keyboard","*","Quit",() => { app.exit(); },"CmdOrCtrl+Q"); - - this.controller.add("keyboard","Controls","Add vertex",() => { dotgrid.keyboard.confirm(); },"Enter"); - this.controller.add("keyboard","Controls","Remove vertex",() => { dotgrid.keyboard.erase(); },"Backspace"); - - this.controller.add("keyboard","Select","Move Up",() => { dotgrid.keyboard.move(0,1); },"Up"); - this.controller.add("keyboard","Select","Move Down",() => { dotgrid.keyboard.move(0,-1); },"Down"); - this.controller.add("keyboard","Select","Move Left",() => { dotgrid.keyboard.move(1,0); },"Left"); - this.controller.add("keyboard","Select","Move Right",() => { dotgrid.keyboard.move(-1,0); },"Right"); - - this.controller.add("keyboard","Select","XXYY(0)",() => { dotgrid.keyboard.push(0); },"0"); - this.controller.add("keyboard","Select","XXYY(1)",() => { dotgrid.keyboard.push(1); },"1"); - this.controller.add("keyboard","Select","XXYY(2)",() => { dotgrid.keyboard.push(2); },"2"); - this.controller.add("keyboard","Select","XXYY(3)",() => { dotgrid.keyboard.push(3); },"3"); - this.controller.add("keyboard","Select","XXYY(4)",() => { dotgrid.keyboard.push(4); },"4"); - this.controller.add("keyboard","Select","XXYY(5)",() => { dotgrid.keyboard.push(5); },"5"); - this.controller.add("keyboard","Select","XXYY(6)",() => { dotgrid.keyboard.push(6); },"6"); - this.controller.add("keyboard","Select","XXYY(7)",() => { dotgrid.keyboard.push(7); },"7"); - this.controller.add("keyboard","Select","XXYY(8)",() => { dotgrid.keyboard.push(8); },"8"); - this.controller.add("keyboard","Select","XXYY(9)",() => { dotgrid.keyboard.push(9); },"9"); - - this.controller.add("keyboard","Mode","Stop Keyboard Mode",() => { dotgrid.keyboard.stop(); },"Escape"); - this.controller.add("picker","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,"); this.controller.add("picker","*","Fullscreen",() => { app.toggle_fullscreen(); },"CmdOrCtrl+Enter"); this.controller.add("picker","*","Hide",() => { app.toggle_visible(); },"CmdOrCtrl+H"); @@ -240,9 +201,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) // Cursor - this.translation = null; - this.translation_multi = null; - this.mouse_down = function(e) { var pos = this.position_in_grid({x:e.clientX+5,y:e.clientY-5}); pos = this.position_on_grid(pos); @@ -250,8 +208,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) if(e.altKey){ dotgrid.tool.remove_segments_at(pos); return; } if(dotgrid.tool.vertex_at(pos)){ - console.log("Begin translation"); dotgrid.translation = {from:pos,to:pos}; - if(e.shiftKey){ console.log("Begin translation(multi)"); dotgrid.translation_multi = true; } + console.log("Begin translation"); dotgrid.cursor.translation = {from:pos,to:pos}; + if(e.shiftKey){ console.log("Begin translation(multi)"); dotgrid.cursor.multi = true; } return; } @@ -279,11 +237,12 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) { var pos = this.position_in_grid({x:e.clientX+5,y:e.clientY-5}); pos = this.position_on_grid(pos); - if(dotgrid.translation && (Math.abs(dotgrid.translation.from.x) != Math.abs(pos.x) || Math.abs(dotgrid.translation.from.y) != Math.abs(pos.y))){ dotgrid.translation.to = pos; } + this.cursor.pos = pos; + + if(dotgrid.cursor.translation && (Math.abs(dotgrid.cursor.translation.from.x) != Math.abs(pos.x) || Math.abs(dotgrid.cursor.translation.from.y) != Math.abs(pos.y))){ dotgrid.cursor.translation.to = pos; } dotgrid.preview(e.target.getAttribute("ar")); - dotgrid.move_cursor(pos) - dotgrid.guide.refresh(); + dotgrid.guide.refresh(pos); e.preventDefault(); } @@ -293,24 +252,24 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) if(e.altKey){ return; } - if(pos.x > 0) { dotgrid.translation = null; return; } + if(pos.x > 0) { dotgrid.cursor.translation = null; return; } - if(dotgrid.translation && (Math.abs(dotgrid.translation.from.x) != Math.abs(dotgrid.translation.to.x) || Math.abs(dotgrid.translation.from.y) != Math.abs(dotgrid.translation.to.y))){ - if(dotgrid.translation_multi){ - dotgrid.tool.translate_multi(dotgrid.translation.from,dotgrid.translation.to); + if(dotgrid.cursor.translation && (Math.abs(dotgrid.cursor.translation.from.x) != Math.abs(dotgrid.cursor.translation.to.x) || Math.abs(dotgrid.cursor.translation.from.y) != Math.abs(dotgrid.cursor.translation.to.y))){ + if(dotgrid.cursor.multi){ + dotgrid.tool.translate_multi(dotgrid.cursor.translation.from,dotgrid.cursor.translation.to); } else{ - dotgrid.tool.translate(dotgrid.translation.from,dotgrid.translation.to); + dotgrid.tool.translate(dotgrid.cursor.translation.from,dotgrid.cursor.translation.to); } - dotgrid.translation = null; - dotgrid.translation_multi = null; + dotgrid.cursor.translation = null; + dotgrid.cursor.multi = null; this.draw(); e.preventDefault(); return; } this.tool.add_vertex({x:pos.x * -1,y:pos.y}); - dotgrid.translation = null; + dotgrid.cursor.translation = null; this.draw(); e.preventDefault(); } @@ -324,30 +283,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) setTimeout(() => { dotgrid.tool.clear(); },150); } - this.cursor_prev = null; - - this.move_cursor = function(pos, force = false) - { - if(pos_is_equal(pos,this.cursor_prev) && !force){ return; } - - if(pos.x>0) { - this.cursor.style.visibility = "hidden" - } else { - if(this.cursor.style.visibility == "hidden") { - this.cursor.style.transition = "initial" - } - this.cursor.style.visibility = "visible" - this.cursor.style.left = Math.floor(-(pos.x-this.grid_width)); - this.cursor.style.top = Math.floor(pos.y+this.grid_height); - this.cursor_x.style.left = `${-pos.x}px`; - this.cursor_x.textContent = parseInt(-pos.x/this.grid_width) - this.cursor_y.style.top = `${pos.y}px`; - this.cursor_y.textContent = parseInt(pos.y/this.grid_width) - window.setTimeout(() => dotgrid.cursor.style.transition = "all 50ms", 17 /*one frame*/) - } - this.cursor_prev = pos; - } - this.preview_prev = null this.preview = function(operation) @@ -369,7 +304,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) } this.tool.style().thickness = Math.max(this.tool.style().thickness+mod,0); - this.cursor_x.textContent = this.tool.style().thickness; this.draw(); } diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js index fdab09b..2f1bd1a 100644 --- a/desktop/sources/scripts/guide.js +++ b/desktop/sources/scripts/guide.js @@ -64,9 +64,12 @@ function Guide() } // Translations - if(dotgrid.translation){ + if(dotgrid.cursor.translation){ this.draw_translation(); } + + // Cursor + this.draw_cursor(dotgrid.cursor.pos); } this.draw_vertex = function(pos, radius = 5) @@ -107,8 +110,8 @@ function Guide() { // From var ctx = this.el.getContext('2d'); - var from = dotgrid.translation.from; - var to = dotgrid.translation.to; + var from = dotgrid.cursor.translation.from; + var to = dotgrid.cursor.translation.to; if(to.x<=0) { ctx.beginPath(); @@ -121,4 +124,18 @@ function Guide() ctx.closePath(); } } + + this.draw_cursor = function(pos,radius = 10) + { + if(!pos || !pos.x || !pos.y){ return; } + + var ctx = this.el.getContext('2d'); + ctx.beginPath(); + ctx.lineWidth = 3; + ctx.lineCap="round"; + ctx.arc((pos.x * -2)+30, (pos.y * 2)+30, radius, 0, 2 * Math.PI, false); + ctx.strokeStyle = dotgrid.theme.active.f_med; + ctx.stroke(); + ctx.closePath(); + } } \ No newline at end of file diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js index 33b5f88..fc0c4d8 100644 --- a/desktop/sources/scripts/tool.js +++ b/desktop/sources/scripts/tool.js @@ -4,9 +4,9 @@ function Tool() this.settings = { size:{width:300,height:300} } this.layers = [[],[],[]]; this.styles = [ - { thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#f00",fill:"none",dash:[0,0],mirror_style:0 }, - { thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#0f0",fill:"none",dash:[0,0],mirror_style:0 }, - { thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#00f",fill:"none",dash:[0,0],mirror_style:0 } + { thickness:2,strokeLinecap:"round",strokeLinejoin:"round",color:"#f00",fill:"none",dash:[0,0],mirror_style:0 }, + { thickness:2,strokeLinecap:"round",strokeLinejoin:"round",color:"#0f0",fill:"none",dash:[0,0],mirror_style:0 }, + { thickness:2,strokeLinecap:"round",strokeLinejoin:"round",color:"#00f",fill:"none",dash:[0,0],mirror_style:0 } ]; this.verteces = []; this.reqs = { line:2,arc_c:2,arc_r:2,bezier:3,close:0 }; @@ -108,6 +108,7 @@ function Tool() this.add_vertex = function(pos) { + pos = {x:Math.abs(pos.x),y:Math.abs(pos.y)} this.verteces.push(pos); }