diff --git a/desktop/sources/links/main.css b/desktop/sources/links/main.css index 850aa69..e5c5ca1 100644 --- a/desktop/sources/links/main.css +++ b/desktop/sources/links/main.css @@ -3,8 +3,8 @@ 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; transition: all 50ms; width:6px; height:6px; position:absolute; z-index:25; border-radius:5px; border:2px solid black;} +#cursor { opacity: 1; width:6px; height:6px; position:absolute; z-index:25; border-radius:5px; border:2px solid black;} #cursor_from { width:4px; height:4px; margin-top:2px; margin-left:2px; position:absolute; z-index:2500; border-radius:10px; left:-100px;border:1px solid black;} #cursor_to { width:4px; height:4px; margin-top:2px; margin-left:2px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;} #cursor_end { width:4px; height:4px; margin-top:2px; margin-left:2px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;} @@ -12,8 +12,7 @@ body { padding: 5px; font-family: 'input_mono_regular'; -webkit-user-select: non #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,#widgets { position: absolute;width: 300px;height: 300px; margin-left: -5px; margin-top: -5px; transition: opacity 250ms} -#widgets { z-index: 9000; margin-left: 0; margin-top: 0; } +#guide { position: absolute;width: 300px;height: 300px; margin-left: -5px; margin-top: -5px; transition: opacity 250ms} #render { display: none } .icon { width:30px; height:30px; margin-right:-2px; opacity: 1} diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 92865b0..238c75b 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -32,7 +32,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) document.getElementById("app").appendChild(this.wrapper); this.wrapper.appendChild(this.element); this.element.appendChild(this.guide.el); - this.element.appendChild(this.guide.widgets); this.wrapper.appendChild(this.render.el); // Cursors @@ -54,14 +53,14 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) // Vector this.svg_el = document.createElementNS("http://www.w3.org/2000/svg", "svg"); this.svg_el.setAttribute("class","vector"); - this.svg_el.setAttribute("width",this.tool.settings.width+"px"); - this.svg_el.setAttribute("height",this.tool.settings.height+"px"); + this.svg_el.setAttribute("width",this.tool.settings.size.width+"px"); + this.svg_el.setAttribute("height",this.tool.settings.size.height+"px"); this.svg_el.setAttribute("xmlns","http://www.w3.org/2000/svg"); this.svg_el.setAttribute("baseProfile","full"); this.svg_el.setAttribute("version","1.1"); - this.svg_el.style.width = this.tool.settings.width; - this.svg_el.style.height = this.tool.settings.height; + this.svg_el.style.width = this.tool.settings.size.width; + this.svg_el.style.height = this.tool.settings.size.height; this.svg_el.style.fill = "none"; this.svg_el.style.strokeWidth = this.tool.style().thickness; this.element.appendChild(this.svg_el); @@ -69,13 +68,13 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.preview_el = document.createElementNS("http://www.w3.org/2000/svg", "svg"); this.preview_el.id = "preview" this.preview_el.setAttribute("class","vector"); - this.preview_el.setAttribute("width",this.tool.settings.width+"px"); - this.preview_el.setAttribute("height",this.tool.settings.height+"px"); + this.preview_el.setAttribute("width",this.tool.settings.size.width+"px"); + this.preview_el.setAttribute("height",this.tool.settings.size.height+"px"); this.preview_el.setAttribute("xmlns","http://www.w3.org/2000/svg"); this.preview_el.setAttribute("baseProfile","full"); this.preview_el.setAttribute("version","1.1"); - this.preview_el.style.width = this.tool.settings.width; - this.preview_el.style.height = this.tool.settings.height; + this.preview_el.style.width = this.tool.settings.size.width; + this.preview_el.style.height = this.tool.settings.size.height; this.preview_el.style.strokeWidth = this.tool.style().thickness; this.preview_el.style.strokeLinecap = this.tool.style().strokeLinecap; this.preview_el.style.fill = this.tool.style().fill; @@ -134,7 +133,6 @@ 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","View","Control Points",() => { dotgrid.guide.toggle_widgets(); },"J"); this.controller.add("default","Mode","Keyboard",() => { dotgrid.keyboard.start(); },"CmdOrCtrl+K"); this.controller.add("default","Mode","Picker",() => { dotgrid.picker.start(); },"CmdOrCtrl+P"); @@ -428,8 +426,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) var win = require('electron').remote.getCurrentWindow(); win.setSize(size.width+100,size.height+100+(interface ? 10 : 0),true); - this.tool.settings.width = size.width - this.tool.settings.height = size.height + this.tool.settings.size.width = size.width + this.tool.settings.size.height = size.height this.element.style.width = size.width+10 this.element.style.height = size.height+10 this.grid_x = size.width/15 @@ -441,11 +439,11 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.preview_el.setAttribute("width",size.width+"px"); this.preview_el.setAttribute("height",size.height+"px"); - this.element.style.width = this.tool.settings.width; - this.element.style.height = this.tool.settings.height; + this.element.style.width = this.tool.settings.size.width; + this.element.style.height = this.tool.settings.size.height; - this.grid_width = this.tool.settings.width/this.grid_x; - this.grid_height = this.tool.settings.height/this.grid_y; + this.grid_width = this.tool.settings.size.width/this.grid_x; + this.grid_height = this.tool.settings.size.height/this.grid_y; dotgrid.guide.resize(size); this.interface.update(); @@ -463,8 +461,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.layer_2.setAttribute("d",paths[1]); this.layer_3.setAttribute("d",paths[2]); - this.svg_el.style.width = this.tool.settings.width; - this.svg_el.style.height = this.tool.settings.height; + this.svg_el.style.width = this.tool.settings.size.width; + this.svg_el.style.height = this.tool.settings.size.height; this.layer_1.style.strokeWidth = this.tool.styles[0].thickness; this.layer_1.style.strokeLinecap = this.tool.styles[0].strokeLinecap; @@ -568,7 +566,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.position_in_grid = function(pos) { - return {x:(window.innerWidth/2) - (this.tool.settings.width/2) - pos.x,y:pos.y - (30+10)} + return {x:(window.innerWidth/2) - (this.tool.settings.size.width/2) - pos.x,y:pos.y - (30+10)} } this.position_on_grid = function(pos) @@ -577,7 +575,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) pos.x = pos.x + 7.5 x = Math.round(pos.x/this.grid_width)*this.grid_width y = Math.round(pos.y/this.grid_height)*this.grid_height - off = (x<-this.tool.settings.width || x>0 || y>this.tool.settings.height || y<0) + off = (x<-this.tool.settings.size.width || x>0 || y>this.tool.settings.size.height || y<0) if(off) { x = 50 y = -50 diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js index 77acc8b..afaa9a2 100644 --- a/desktop/sources/scripts/guide.js +++ b/desktop/sources/scripts/guide.js @@ -7,13 +7,6 @@ function Guide() this.el.style.width = "320px"; this.el.style.height = "320px"; - this.widgets = document.createElement("canvas"); - this.widgets.id = "widgets"; - this.widgets.width = 640; - this.widgets.height = 640; - this.widgets.style.width = "320px"; - this.widgets.style.height = "320px"; - this.start = function() { this.clear(); @@ -25,11 +18,6 @@ function Guide() this.el.style.opacity = !this.el.style.opacity || this.el.style.opacity == 1 ? 0 : 1; } - this.toggle_widgets = function() - { - this.widgets.style.opacity = !this.widgets.style.opacity || this.widgets.style.opacity == 1 ? 0 : 1; - } - this.draw = function() { for (var x = dotgrid.grid_x; x >= 0; x--) { @@ -50,18 +38,12 @@ function Guide() this.el.style.width = (size.width+40)+"px"; this.el.style.height = (size.height+40)+"px"; - this.widgets.width = (size.width+20)*2; - this.widgets.height = (size.height+20)*2; - this.widgets.style.width = (size.width+20)+"px"; - this.widgets.style.height = (size.height+20)+"px"; - this.update(); } this.clear = function() { this.el.getContext('2d').clearRect(0, 0, this.el.width*2, this.el.height*2); - this.widgets.getContext('2d').clearRect(0, 0, this.el.width*2, this.el.height*2); } this.update = function() @@ -91,6 +73,7 @@ function Guide() { var ctx = this.el.getContext('2d'); ctx.beginPath(); + ctx.lineWidth = 2; ctx.arc((pos.x * 2)+30, (pos.y * 2)+30, radius, 0, 2 * Math.PI, false); ctx.fillStyle = dotgrid.theme.active.f_med; ctx.fill(); @@ -101,42 +84,43 @@ function Guide() { var ctx = this.el.getContext('2d'); ctx.beginPath(); + ctx.lineWidth = 2; ctx.arc(pos.x * 2, pos.y * 2, radius, 0, 2 * Math.PI, false); ctx.fillStyle = step ? dotgrid.theme.active.f_med : dotgrid.theme.active.f_low; ctx.fill(); ctx.closePath(); } - this.draw_handle = function(pos,radius = 5) + this.draw_handle = function(pos,radius = 15) { - var ctx = this.widgets.getContext('2d'); - + var ctx = this.el.getContext('2d'); ctx.beginPath(); - ctx.arc((pos.x * 2)+20, (pos.y * 2)+20, 10, 0, 2 * Math.PI, false); - ctx.fillStyle = dotgrid.theme.active.f_high; - ctx.fill(); + 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_low; + ctx.stroke(); ctx.closePath(); ctx.beginPath(); - ctx.arc((pos.x * 2)+20, (pos.y * 2)+20, radius, 0, 2 * Math.PI, false); + ctx.arc((pos.x * 2)+30, (pos.y * 2)+30, 2, 0, 2 * Math.PI, false); ctx.fillStyle = dotgrid.theme.active.f_high; ctx.fill(); - ctx.lineWidth = 3; ctx.strokeStyle = dotgrid.theme.active.background; ctx.stroke(); - ctx.closePath(); + ctx.closePath(); } this.draw_translation = function() { // From - var ctx = this.widgets.getContext('2d'); + var ctx = this.el.getContext('2d'); var from = dotgrid.translation.from; var to = dotgrid.translation.to; if(to.x<=0) { ctx.beginPath(); - ctx.moveTo((from.x * -2)+20,(from.y * 2)+20); - ctx.lineTo((to.x * -2)+20,(to.y * 2)+20); + ctx.moveTo((from.x * -2)+30,(from.y * 2)+30); + ctx.lineTo((to.x * -2)+30,(to.y * 2)+30); ctx.lineCap="round"; ctx.lineWidth = 5; ctx.strokeStyle = dotgrid.theme.active.b_inv; diff --git a/desktop/sources/scripts/picker.js b/desktop/sources/scripts/picker.js index 91746a7..1529d1a 100644 --- a/desktop/sources/scripts/picker.js +++ b/desktop/sources/scripts/picker.js @@ -7,7 +7,7 @@ function Picker() this.start = function() { - this.el.setAttribute("placeholder",`${dotgrid.tool.style().color} ${dotgrid.tool.settings.width}x${dotgrid.tool.settings.height}`) + this.el.setAttribute("placeholder",`${dotgrid.tool.style().color} ${dotgrid.tool.settings.size.width}x${dotgrid.tool.settings.size.height}`) dotgrid.controller.set("picker"); dotgrid.interface.el.className = "picker" diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js index 38863ba..33b5f88 100644 --- a/desktop/sources/scripts/tool.js +++ b/desktop/sources/scripts/tool.js @@ -1,7 +1,7 @@ function Tool() { this.index = 0; - this.settings = { width:300,height:300 } + 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 }, @@ -64,8 +64,8 @@ function Tool() { if(!dot.layers || dot.layers.length != 3){ console.log("Incompatible version"); return; } - if(this.settings && (this.settings.width != dot.settings.width || this.settings.height != dot.settings.height)){ - dotgrid.set_size({width:dot.settings.width,height:dot.settings.height}) + if(this.settings && (this.settings.size.width != dot.settings.size.width || this.settings.size.height != dot.settings.size.height)){ + dotgrid.set_size({width:dot.settings.size.width,height:dot.settings.size.height}) } this.layers = dot.layers; @@ -269,21 +269,12 @@ function Tool() if(!vertex){ return null; } if(mirror_x == true){ - return {x:(dotgrid.tool.settings.width - vertex.x),y:vertex.y} + return {x:(dotgrid.tool.settings.size.width - vertex.x),y:vertex.y} } if(mirror_y == true){ - return {x:vertex.x,y:(dotgrid.tool.settings.height - vertex.y)+(dotgrid.height/2)} + return {x:vertex.x,y:(dotgrid.tool.settings.size.height - vertex.y)+(dotgrid.height/2)} } - return rotate_point(vertex.x,vertex.y,dotgrid.tool.settings.width/2,dotgrid.tool.settings.height/2,angle) - } - - function rotate_point(pointX, pointY, originX, originY, angle) - { - angle = angle * Math.PI / 180.0; - return { - x: (Math.cos(angle) * (pointX-originX) - Math.sin(angle) * (pointY-originY) + originX).toFixed(1), - y: (Math.sin(angle) * (pointX-originX) + Math.cos(angle) * (pointY-originY) + originY).toFixed(1) - }; + return rotate_point(vertex.x,vertex.y,dotgrid.tool.settings.size.width/2,dotgrid.tool.settings.size.height/2,angle) } this.translate = function(a,b) @@ -352,6 +343,7 @@ function Tool() this.select_layer(this.index); } + function rotate_point(pointX, pointY, originX, originY, angle){ angle = angle * Math.PI / 180.0; return { x: (Math.cos(angle) * (pointX-originX) - Math.sin(angle) * (pointY-originY) + originX).toFixed(1), y: (Math.sin(angle) * (pointX-originX) + Math.cos(angle) * (pointY-originY) + originY).toFixed(1) }; } function copy(data){ return data ? JSON.parse(JSON.stringify(data)) : []; } function clamp(v, min, max) { return v < min ? min : v > max ? max : v; } } \ No newline at end of file diff --git a/npm-debug.log b/npm-debug.log deleted file mode 100644 index 618bbd9..0000000 --- a/npm-debug.log +++ /dev/null @@ -1,20 +0,0 @@ -0 info it worked if it ends with ok -1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ] -2 info using npm@3.10.10 -3 info using node@v6.11.4 -4 verbose stack Error: ENOENT: no such file or directory, open '/Users/VillaMoirai/Github/HundredRabbits/Dotgrid/package.json' -4 verbose stack at Error (native) -5 verbose cwd /Users/VillaMoirai/Github/HundredRabbits/Dotgrid -6 error Darwin 16.7.0 -7 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "start" -8 error node v6.11.4 -9 error npm v3.10.10 -10 error path /Users/VillaMoirai/Github/HundredRabbits/Dotgrid/package.json -11 error code ENOENT -12 error errno -2 -13 error syscall open -14 error enoent ENOENT: no such file or directory, open '/Users/VillaMoirai/Github/HundredRabbits/Dotgrid/package.json' -15 error enoent ENOENT: no such file or directory, open '/Users/VillaMoirai/Github/HundredRabbits/Dotgrid/package.json' -15 error enoent This is most likely not a problem with npm itself -15 error enoent and is related to npm not being able to find a file. -16 verbose exit [ -2, true ]