From e21cf2cbf260beee379317047c1b21ccc385782b Mon Sep 17 00:00:00 2001 From: cantbesure1 Date: Sun, 12 Nov 2017 13:47:34 -0800 Subject: [PATCH] third time's the charm? --- main.js | 4 +- sources/links/main.css | 7 ++- sources/scripts/dotgrid.js | 101 +++++++++++++++++++++++++-------- sources/scripts/guide.js | 20 +++++-- sources/scripts/path_arc.js | 10 ++-- sources/scripts/path_bezier.js | 8 +-- sources/scripts/path_line.js | 14 ++--- sources/scripts/pos.js | 5 ++ 8 files changed, 119 insertions(+), 50 deletions(-) diff --git a/main.js b/main.js index 5eee005..9eaa154 100644 --- a/main.js +++ b/main.js @@ -6,7 +6,7 @@ let win app.on('ready', () => { - win = new BrowserWindow({width: 390, height: 420, backgroundColor:"#000", frame:false, minHeight: 402, minWidth: 390, autoHideMenuBar: true, icon: __dirname + '/icon.ico'}) + win = new BrowserWindow({width: 390, height: 420, minWidth: 390, minHeight: 420, backgroundColor:"#000", frame:false, autoHideMenuBar: true, icon: __dirname + '/icon.ico'}) win.loadURL(`file://${__dirname}/sources/index.html`) @@ -56,7 +56,7 @@ app.on('ready', () => is_shown = true; }) // Open the DevTools. - // win.webContents.openDevTools() + win.webContents.openDevTools() }) app.on('window-all-closed', () => diff --git a/sources/links/main.css b/sources/links/main.css index 626f3cd..ec7a1e8 100644 --- a/sources/links/main.css +++ b/sources/links/main.css @@ -1,14 +1,15 @@ -body { background:#fff; padding:30px; font-family: 'input_mono_regular'; -webkit-user-select: none;-webkit-app-region: drag; overflow: hidden;} +body { background:#fff; padding: 5px; font-family: 'input_mono_regular'; -webkit-user-select: none; overflow: hidden;} +#wrapper { width: calc(100% - 50px); height: calc(100% - 50px); padding: 25px; background: inherit; -webkit-app-region: drag;} #dotgrid { margin:0px auto; position:relative; overflow: hidden; padding:10px;-webkit-app-region: no-drag;} #cursor { width:8px; height:8px; margin-top:-5px; margin-left:-5px; position:absolute; z-index:25; border-radius:5px; border:1px solid black;} -#cursor_coord { font-size:10px; z-index: 10000; margin-left:15px; margin-top:-2px;} +#cursor_coord { font-size:10px; z-index: 10000; margin-left:15px; margin-top:-2px;} #cursor_coord.left { margin-left:-110px; text-align: right; width:100px; } #cursor_from { width:4px; height:4px; background:white; margin-top:-3px; margin-left:-3px; position:absolute; z-index:2500; border-radius:10px; left:-100px;border:1px solid black;} #cursor_to { width:4px; height:4px; background:white; margin-top:-3px; margin-left:-3px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;} #cursor_end { width:4px; height:4px; background:white; margin-top:-3px; margin-left:-3px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;} #interface { max-width: 295px;margin:0px auto;font-size: 11px;line-height: 30px; text-transform: uppercase; margin-top:20px;-webkit-app-region: no-drag;} -#guide { position: absolute;top: 30px;left: calc(50vw - 160px);padding: 10px; width: 300px;height: 300px;} +#guide { position: absolute;top: 0px;left: 0px;padding: 10px; width: 300px;height: 300px;} #guide .marker { width:2px; height:2px; position:absolute; margin-top:-1px; margin-left:-1px; border-radius:4px; z-index:50;} #render { display: none } diff --git a/sources/scripts/dotgrid.js b/sources/scripts/dotgrid.js index 26f30e2..9e21855 100644 --- a/sources/scripts/dotgrid.js +++ b/sources/scripts/dotgrid.js @@ -20,6 +20,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.element.style.width = this.width; this.element.style.height = this.height; + this.wrapper = document.createElement("div"); + this.wrapper.id = "wrapper"; + this.grid_width = this.width/this.grid_x; this.grid_height = this.height/this.grid_y; @@ -45,13 +48,15 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.segments = []; this.interface = document.createElement("div"); this.interface.id = "interface"; + this.scale = 1 this.install = function() { - document.body.appendChild(this.element); - document.body.appendChild(this.interface); - document.body.appendChild(this.guide.el); - document.body.appendChild(this.render.el); + document.body.appendChild(this.wrapper); + this.wrapper.appendChild(this.element); + this.wrapper.appendChild(this.interface); + this.element.appendChild(this.guide.el); + this.wrapper.appendChild(this.render.el); // Cursors this.cursor = document.createElement("div"); @@ -128,10 +133,10 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca var pos = this.position_in_grid(new Pos(e.clientX,e.clientY)); pos = this.position_on_grid(pos); - this.cursor.style.left = -pos.x + 10; - this.cursor.style.top = pos.y + 10; + this.cursor.style.left = Math.floor(-(pos.x-this.grid_width)); + this.cursor.style.top = Math.floor(pos.y+this.grid_height); this.cursor_coord.className = -pos.x > 150 ? "fl left" : "fl" - this.cursor_coord.textContent = parseInt(-pos.x/10)+","+parseInt(pos.y/10); + this.cursor_coord.textContent = parseInt(-pos.x/this.grid_width)+","+parseInt(pos.y/this.grid_height); } this.mouse_up = function(e) @@ -142,9 +147,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca if(e.altKey){ dotgrid.delete_at(pos); return; } if(pos.x>0) return; - if(from === null){ this.set_from(pos); } - else if(to === null){ this.set_to(pos); } - else{ this.set_end(pos); } + if(from === null){ this.set_from(pos.scale(1/this.scale)); } + else if(to === null){ this.set_to(pos.scale(1/this.scale)); } + else{ this.set_end(pos.scale(1/this.scale)); } this.draw(); } @@ -154,22 +159,22 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca { from = pos; - cursor_from.style.left = -pos.x + 10; - cursor_from.style.top = pos.y + 10; + cursor_from.style.left = Math.floor(-pos.x*this.scale + this.grid_width); + cursor_from.style.top = Math.floor(pos.y*this.scale + this.grid_height); } this.set_to = function(pos) { - cursor_to.style.left = -pos.x + 10; - cursor_to.style.top = pos.y + 10; + cursor_to.style.left = Math.floor(-pos.x*this.scale + this.grid_width); + cursor_to.style.top = Math.floor(pos.y*this.scale + this.grid_height); to = pos; } this.set_end = function(pos) { - cursor_end.style.left = -pos.x + 10; - cursor_end.style.top = pos.y + 10; + cursor_end.style.left = Math.floor(-pos.x*this.scale + this.grid_width); + cursor_end.style.top = Math.floor(pos.y*this.scale + this.grid_height); end = pos; } @@ -243,7 +248,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.draw(); } - this.draw = function() + this.draw = function(exp = false) { var d = ""; var prev = ""; @@ -259,29 +264,31 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.svg_el.style.height = this.height; this.svg_el.style.stroke = this.color; this.svg_el.style.strokeLinecap = this.linecap; - this.svg_el.style.strokeWidth = this.thickness; + this.svg_el.style.strokeWidth = this.thickness*this.scale; this.svg_el.style.fill = this.fill ? "black" : "none"; + //console.log(this.svg_el) + // Draw Mirror if(this.mirror_index == 1){ this.mirror_path.setAttribute("d",d); - this.mirror_path.setAttribute("transform","translate("+(300 - (this.offset.x))+","+(this.offset.y)+"),scale(-1,1)") + this.mirror_path.setAttribute("transform","translate("+(this.width - (this.offset.x*this.scale))+","+(this.offset.y*this.scale)+"),scale(-1,1)") } else if(this.mirror_index == 2){ this.mirror_path.setAttribute("d",d); - this.mirror_path.setAttribute("transform","translate("+((this.offset.x))+","+(300 - (this.offset.y))+"),scale(1,-1)") + this.mirror_path.setAttribute("transform","translate("+((this.offset.x*this.scale))+","+(this.height - (this.offset.y*this.scale))+"),scale(1,-1)") } else if(this.mirror_index == 3){ this.mirror_path.setAttribute("d",d); - this.mirror_path.setAttribute("transform","translate("+(300 -(this.offset.x))+","+(300 - (this.offset.y))+"),scale(-1,-1)") + this.mirror_path.setAttribute("transform","translate("+(this.width -(this.offset.x*this.scale))+","+(this.height - (this.offset.y*this.scale))+"),scale(-1,-1)") } else{ this.mirror_path.setAttribute("d",'M0,0'); this.mirror_path.setAttribute("transform","") } - this.offset_el.setAttribute("transform","translate("+(this.offset.x)+","+(this.offset.y)+")") + this.offset_el.setAttribute("transform","translate("+(this.offset.x*this.scale)+","+(this.offset.y*this.scale)+")") this.render.draw(); this.update_interface(); @@ -378,10 +385,18 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.export = function() { if(this.segments.length == 0){ return; } + this.scale = 1 + this.width = 300 + this.height = 300 + this.draw() + var svg = this.svg_el.outerHTML + + dotgrid.resize() dialog.showSaveDialog((fileName) => { + dotgrid.resize() if (fileName === undefined){ return; } - fs.writeFile(fileName+".svg", dotgrid.svg_el.outerHTML, (err) => { + fs.writeFile(fileName+".svg", svg, (err) => { if(err){ alert("An error ocurred creating the file "+ err.message); return; } }); fs.writeFile(fileName+'.png', dotgrid.render.buffer()); @@ -438,13 +453,13 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.position_in_grid = function(pos) { - return new Pos((window.innerWidth/2) - (this.width/2) - pos.x,pos.y - 50) + return new Pos((window.innerWidth/2) - (this.width/2) - pos.x,pos.y - (30+10*(this.scale))) } this.position_on_grid = function(pos) // rounds the mouse position to the nearest cell, and limits the coords to within the box { x = Math.round(pos.x/this.grid_width)*this.grid_width - y = Math.round(pos.y/this.grid_height)*this.grid_height+this.grid_height + y = Math.round(pos.y/this.grid_height)*this.grid_height off = (x<-this.width || x>0 || y>this.height || y<0) if(off) { // change position so the cursor will not be seen x = 50 @@ -452,6 +467,36 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca } return new Pos(x,y); } + + this.resize = function() + { + this.scale = Math.min((window.innerWidth-90)/300,(window.innerHeight-100)/320) + this.width = dotgrid.scale*300 + this.height = dotgrid.scale*300 + this.element.style.width = this.width + this.element.style.height = this.height + this.element.style.padding = Math.floor(10*this.scale)+"px" + this.svg_el.setAttribute("width",this.width+"px"); + this.svg_el.setAttribute("height",this.height+"px"); + this.grid_width = dotgrid.width/dotgrid.grid_x; + this.grid_height = dotgrid.height/dotgrid.grid_y; + this.guide.update() + + //cursor updates + + if(from) { + cursor_from.style.left = Math.floor(-from.x*this.scale + this.grid_width); + cursor_from.style.top = Math.floor(from.y*this.scale + this.grid_height); + } + if(to) { + cursor_to.style.left = Math.floor(-to.x*this.scale + this.grid_width); + cursor_to.style.top = Math.floor(to.y*this.scale + this.grid_height); + } + if(end) { + cursor_end.style.left = Math.floor(-end.x*this.scale + this.grid_width); + cursor_end.style.top = Math.floor(end.y*this.scale + this.grid_height); + } + } } window.addEventListener('dragover',function(e) @@ -461,6 +506,12 @@ window.addEventListener('dragover',function(e) e.dataTransfer.dropEffect = 'copy'; }); +window.addEventListener('resize', function(e) +{ + dotgrid.resize() + dotgrid.draw() +}, false); + window.addEventListener('drop', function(e) { e.preventDefault(); diff --git a/sources/scripts/guide.js b/sources/scripts/guide.js index f30a162..659ccb1 100644 --- a/sources/scripts/guide.js +++ b/sources/scripts/guide.js @@ -4,17 +4,29 @@ function Guide() // Guide this.el.id = "guide"; - + this.markers; this.start = function() { // Markers + this.markers = JSON.parse("["+"[],".repeat(dotgrid.grid_x)+"[]"+"]") for (var x = dotgrid.grid_x; x >= 0; x--) { for (var y = dotgrid.grid_y; y >= 0; y--) { - var marker = document.createElement("div"); + let marker = document.createElement("div"); marker.setAttribute("class",(x % dotgrid.block_x == 0 && y % dotgrid.block_y == 0 ? "marker bm" : "marker bl")); - marker.style.left = parseInt(x * dotgrid.grid_width + (dotgrid.grid_width/2)) +5; - marker.style.top = parseInt(y * dotgrid.grid_height + (dotgrid.grid_height/2)) +5; + marker.style.left = parseInt(x * dotgrid.grid_width + (dotgrid.grid_width/2)) ; + marker.style.top = parseInt(y * dotgrid.grid_height + (dotgrid.grid_height/2)) ; this.el.appendChild(marker); + this.markers[x][y] = marker + } + } + } + this.update = function() // it's less than ideal to reuse this much code, but I couldn't find a way to reuse the function that wouldn't mess with the architecture + { + for (var x = dotgrid.grid_x; x >= 0; x--) { + for (var y = dotgrid.grid_y; y >= 0; y--) { + let marker = this.markers[x][y] + marker.style.left = parseInt(x * dotgrid.grid_width + (dotgrid.grid_width/2) +(5*dotgrid.scale)); + marker.style.top = parseInt(y * dotgrid.grid_height + (dotgrid.grid_height/2) +(5*dotgrid.scale)); } } } diff --git a/sources/scripts/path_arc.js b/sources/scripts/path_arc.js index b1818c3..e23869d 100644 --- a/sources/scripts/path_arc.js +++ b/sources/scripts/path_arc.js @@ -12,25 +12,25 @@ function Path_Arc(from,to,orientation,end) var html = "" if(!prev || (!prev.to && !prev.end)){ - html += "M"+this.from+" "; + html += "M"+this.from.scale(dotgrid.scale)+" "; } else if(prev){ if(prev.end){ if(!prev.end.is_equal(this.from)){ - html += "M"+this.from+" "; + html += "M"+this.from.scale(dotgrid.scale)+" "; } } else if(prev.to){ if(!prev.to.is_equal(this.from)){ - html += "M"+this.from+" "; + html += "M"+this.from.scale(dotgrid.scale)+" "; } } } - html += "A"+this.to.sub(this.from)+" 0 "+orientation+" "+this.to+" "; + html += "A"+this.to.sub(this.from).scale(dotgrid.scale)+" 0 "+orientation+" "+this.to.scale(dotgrid.scale)+" "; if(this.end){ - html += "A"+this.end.sub(this.to)+" 0 "+orientation+" "+this.end+" "; + html += "A"+this.end.sub(this.to).scale(dotgrid.scale)+" 0 "+orientation+" "+this.end.scale(dotgrid.scale)+" "; } return html diff --git a/sources/scripts/path_bezier.js b/sources/scripts/path_bezier.js index 6612bef..90e7a57 100644 --- a/sources/scripts/path_bezier.js +++ b/sources/scripts/path_bezier.js @@ -11,21 +11,21 @@ function Path_Bezier(from,to,end) var html = "" if(!prev || (!prev.to && !prev.end)){ - html += "M"+this.from+" "; + html += "M"+this.from.scale(dotgrid.scale)+" "; } else if(prev){ if(prev.end){ if(!prev.end.is_equal(this.from)){ - html += "M"+this.from+" "; + html += "M"+this.from.scale(dotgrid.scale)+" "; } } else if(prev.to){ if(!prev.to.is_equal(this.from)){ - html += "M"+this.from+" "; + html += "M"+this.from.scale(dotgrid.scale)+" "; } } } - return html += "Q"+this.to+" "+this.end+" " + return html += "Q"+this.to.scale(dotgrid.scale)+" "+this.end.scale(dotgrid.scale)+" " } } \ No newline at end of file diff --git a/sources/scripts/path_line.js b/sources/scripts/path_line.js index 7353711..d412126 100644 --- a/sources/scripts/path_line.js +++ b/sources/scripts/path_line.js @@ -11,25 +11,25 @@ function Path_Line(from,to,end = null) var html = "" if(!prev || (!prev.to && !prev.end)){ - html += "M"+this.from+" "; + html += "M"+this.from.scale(dotgrid.scale)+" "; } else if(prev){ if(prev.end){ - if(!prev.end.is_equal(this.from)){ - html += "M"+this.from+" "; + if(!prev.end.is_equal(this.from.scale(dotgrid.scale))){ + html += "M"+this.from.scale(dotgrid.scale)+" "; } } else if(prev.to){ - if(!prev.to.is_equal(this.from)){ - html += "M"+this.from+" "; + if(!prev.to.is_equal(this.from.scale(dotgrid.scale))){ + html += "M"+this.from.scale(dotgrid.scale)+" "; } } } - html += "L"+this.to+" " + html += "L"+this.to.scale(dotgrid.scale)+" " if(this.end){ - html += "L"+this.end+" " + html += "L"+this.end.scale(dotgrid.scale)+" " } return html diff --git a/sources/scripts/pos.js b/sources/scripts/pos.js index 98bdf71..9d82fbf 100644 --- a/sources/scripts/pos.js +++ b/sources/scripts/pos.js @@ -22,4 +22,9 @@ function Pos(x,y) { return Math.abs(pos2.x) == Math.abs(this.x) && Math.abs(pos2.y) == Math.abs(this.y); } + + this.scale = function(a) + { + return new Pos(this.x*a,this.y*a) + } } \ No newline at end of file