diff --git a/main.js b/main.js index d5e2c66..aefd8ad 100644 --- a/main.js +++ b/main.js @@ -32,6 +32,7 @@ app.on('ready', () => app.win = new BrowserWindow({width: 400, height: 420, minWidth: 400, minHeight: 420, backgroundColor:"#000", frame:false, autoHideMenuBar: true, icon: __dirname + '/icon.ico'}) app.win.loadURL(`file://${__dirname}/sources/index.html`); + app.win.toggleDevTools(); app.win.on('closed', () => { win = null diff --git a/sources/index.html b/sources/index.html index a30a6b4..dd2bdec 100644 --- a/sources/index.html +++ b/sources/index.html @@ -14,6 +14,8 @@ + + diff --git a/sources/scripts/dotgrid.js b/sources/scripts/dotgrid.js index 81b3001..f153d23 100644 --- a/sources/scripts/dotgrid.js +++ b/sources/scripts/dotgrid.js @@ -4,6 +4,11 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.theme = new Theme(); this.interface = new Interface(); this.history = new History(); + this.guide = new Guide(); + this.render = new Render(); + this.serializer = new Serializer(); + this.project = new Project(); + this.tool = new Tool(); this.width = width; this.height = height; @@ -41,14 +46,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.svg_el = null; this.mirror_el = null; - this.mirror = false; this.fill = false; - - this.guide = new Guide(); - this.render = new Render(); - this.serializer = new Serializer(); - this.path = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.segments = []; this.scale = 1; @@ -150,14 +149,14 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.controller.add("default","Edit","Paste",() => { document.execCommand('paste'); },"CmdOrCtrl+V"); this.controller.add("default","Edit","Undo",() => { dotgrid.undo(); },"CmdOrCtrl+Z"); this.controller.add("default","Edit","Redo",() => { dotgrid.redo(); },"CmdOrCtrl+Shift+Z"); - this.controller.add("default","Edit","Delete",() => { dotgrid.delete(); },"Backspace"); + this.controller.add("default","Edit","Delete",() => { dotgrid.tool.remove_segment(); },"Backspace"); this.controller.add("default","Edit","Move Up",() => { dotgrid.mod_move(new Pos(0,-15)); },"Up"); this.controller.add("default","Edit","Move Down",() => { dotgrid.mod_move(new Pos(0,15)); },"Down"); this.controller.add("default","Edit","Move Left",() => { dotgrid.mod_move(new Pos(-15,0)); },"Left"); this.controller.add("default","Edit","Move Right",() => { dotgrid.mod_move(new Pos(15,0)); },"Right"); this.controller.add("default","Edit","Deselect",() => { dotgrid.reset(); },"Esc"); - this.controller.add("default","Stroke","Line",() => { dotgrid.draw_line(); },"A"); + this.controller.add("default","Stroke","Line",() => { dotgrid.tool.cast("line"); },"A"); this.controller.add("default","Stroke","Arc",() => { dotgrid.draw_arc("0,1"); },"S"); this.controller.add("default","Stroke","Arc Rev",() => { dotgrid.draw_arc("0,0"); },"D"); this.controller.add("default","Stroke","Bezier",() => { dotgrid.draw_bezier(); },"F"); @@ -358,6 +357,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca dotgrid.reset(); } + // Cursor this.translation = null; @@ -417,8 +417,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca } dotgrid.translation = null; - - this.add_point(pos); + this.tool.add_vertex({x:pos.x * -1,y:pos.y}); this.draw(); } @@ -622,7 +621,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca prev = segment; } - this.path.setAttribute("d",d); + this.path.setAttribute("d",this.tool.path()); this.svg_el.style.width = this.width; this.svg_el.style.height = this.height; diff --git a/sources/scripts/guide.js b/sources/scripts/guide.js index 666e121..feca1ed 100644 --- a/sources/scripts/guide.js +++ b/sources/scripts/guide.js @@ -68,15 +68,8 @@ function Guide() { this.clear(); - var handles = []; - for(id in dotgrid.segments){ - var segment = dotgrid.segments[id]; - handles = handles.concat(segment.handles()) - } - - for(id in handles){ - var handle = handles[id]; - this.draw_handle(handle,4); + for(id in dotgrid.tool.verteces){ + this.draw_vertex(dotgrid.tool.verteces[id]); } // Translations @@ -86,6 +79,16 @@ function Guide() this.draw(); } + this.draw_vertex = function(pos, radius = 5) + { + var ctx = this.el.getContext('2d'); + ctx.beginPath(); + ctx.arc((pos.x * 2)+30, (pos.y * 2)+30, radius, 0, 2 * Math.PI, false); + ctx.fillStyle = "red"; + ctx.fill(); + ctx.closePath(); + } + this.draw_marker = function(pos,radius = 1,step) { var ctx = this.el.getContext('2d'); diff --git a/sources/scripts/interface.js b/sources/scripts/interface.js index de486a9..948675b 100644 --- a/sources/scripts/interface.js +++ b/sources/scripts/interface.js @@ -3,30 +3,33 @@ function Interface() this.el = document.createElement("div"); this.el.id = "interface"; + this.is_visible = true; + this.zoom = false; + this.start = function() { document.getElementById("app").appendChild(this.el); - - // Interface var html = "" - var path_arr = [ + var tools = [ ["line","line","M60,60 L240,240",""], ["arc_c","arc clockwise","M60,60 A180,180 0 0,1 240,240",""], ["arc_r","arc reverse","M60,60 A180,180 0 0,0 240,240",""], - ["bezier","bezier","M60,60 Q60,150 150,150 Q240,150 240,240 ",""], + ["bezier","bezier","M60,60 Q60,150 150,150 Q240,150 240,240",""], ["close","close","M60,60 A180,180 0 0,1 240,240 M60,60 A180,180 0 0,0 240,240",""], ["thickness","thickness","M60,60 L240,240","stroke-dasharray: 30,15"], ["linecap","linecap","M60,60 L240,240 M240,180 L240,240 M180,240 L240,240"], ["linejoin","linejoin","M60,60 L120,120 L180,120 M120,180 L180,180 L240,240"], - ["mirror","mirror","M60,60 L240,240 M180,120 L210,90 M120,180 L90,210 "], - ["fill","fill","M60,60 L60,150 L150,150 L240,150 L240,240 Z "], - + ["mirror","mirror","M60,60 L240,240 M180,120 L210,90 M120,180 L90,210"], + ["fill","fill","M60,60 L60,150 L150,150 L240,150 L240,240 Z"], + ["export","export","M150,50 L50,150 L150,250 L250,150 L150,50 Z"] ] - path_arr.forEach(function(a) { - html += ''+a[1]+'' - }, this); + + for(id in tools){ + var tool = tools[id]; + html += `${tool[1]}` + } this.el.innerHTML = html } @@ -38,31 +41,27 @@ function Interface() document.getElementById("arc_c").className.baseVal = !dotgrid.from() || !dotgrid.to() ? "icon inactive" : "icon"; document.getElementById("arc_r").className.baseVal = !dotgrid.from() || !dotgrid.to() ? "icon inactive" : "icon"; document.getElementById("bezier").className.baseVal = !dotgrid.from() || !dotgrid.to() || !dotgrid.end() ? "icon inactive" : "icon"; + document.getElementById("close").className.baseVal = dotgrid.segments.length < 1 || (prev && prev.name == "close") ? "icon inactive" : "icon"; document.getElementById("thickness").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon"; document.getElementById("linecap").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon"; document.getElementById("linejoin").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon"; document.getElementById("mirror").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon"; document.getElementById("fill").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon"; - document.getElementById("close").className.baseVal = dotgrid.segments.length < 1 || (prev && prev.name == "close") ? "icon inactive" : "icon"; + document.getElementById("export").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon"; } this.update_size = function() { var size = this.zoom ? {width:600,height:600} : {width:300,height:300}; - dotgrid.set_size(size,this.is_visible); } - this.is_visible = true; - this.zoom = false; - this.toggle = function() { this.is_visible = this.is_visible ? false : true; this.el.className = this.is_visible ? "visible" : "hidden"; - this.update_size(); } diff --git a/sources/scripts/project.js b/sources/scripts/project.js new file mode 100644 index 0000000..3100cf2 --- /dev/null +++ b/sources/scripts/project.js @@ -0,0 +1,5 @@ +function Project() +{ + this.layers = []; + +} \ No newline at end of file diff --git a/sources/scripts/tool.js b/sources/scripts/tool.js new file mode 100644 index 0000000..f284c76 --- /dev/null +++ b/sources/scripts/tool.js @@ -0,0 +1,61 @@ +function Tool() +{ + this.layer = 0; + this.layers = []; + this.verteces = []; + + this.remove_segment = function() + { + this.layers[this.layer].pop(); + this.clear(); + dotgrid.draw(); + } + + this.add_vertex = function(pos) + { + this.verteces.push(pos); + console.log(this.verteces); + } + + this.cast = function(type) + { + if(!this.layers[this.layer]){ this.layers[this.layer] = []; } + + this.layers[this.layer].push({type:type,verteces:this.verteces.slice()}) + this.clear(); + dotgrid.draw(); + + console.log(`Casted ${type}+${this.layers[this.layer].length}`); + } + + this.path = function() + { + var html = ""; + + for(id in this.layers[this.layer]){ + var segment = this.layers[this.layer][id]; + html += this.render(segment); + } + return html + } + + this.render = function(segment) + { + var type = segment.type; + var verteces = segment.verteces; + var html = `M${verteces[0].x},${verteces[0].y} `; + + for(id in verteces){ + if(id == 0){ continue; } + var vertex = verteces[id]; + html += `L${vertex.x},${vertex.y} `; + } + + return html + } + + this.clear = function() + { + this.verteces = []; + } +} \ No newline at end of file