function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,linecap = "round", color = "#000000") { this.controller = new Controller(); this.theme = new Theme(); this.interface = new Interface(); this.width = width; this.height = height; this.grid_x = grid_x; this.grid_y = grid_y; this.block_x = block_x; this.block_y = block_y; this.thickness = thickness; this.linecap = linecap; this.color = color; this.offset = new Pos(0,0); // Dotgrid this.element = document.createElement("div"); this.element.id = "dotgrid"; 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; var cursor = null; var cursor_from = null; var cursor_to = null; var cursor_end = null; var from = null; var to = null; var end = null; 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 this.install = function() { 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 this.cursor = document.createElement("div"); this.cursor.id = "cursor"; this.element.appendChild(this.cursor); this.cursor_coord = document.createElement("div"); this.cursor_coord.id = "cursor_coord"; this.cursor_coord.className = "fl" this.cursor.appendChild(this.cursor_coord); cursor_from = document.createElement("div"); cursor_from.id = "cursor_from"; this.element.appendChild(cursor_from); cursor_to = document.createElement("div"); cursor_to.id = "cursor_to"; this.element.appendChild(cursor_to); cursor_end = document.createElement("div"); cursor_end.id = "cursor_end"; this.element.appendChild(cursor_end); this.offset_el = document.createElementNS("http://www.w3.org/2000/svg", "g"); this.mirror_el = document.createElementNS("http://www.w3.org/2000/svg", "g"); this.mirror_path = document.createElementNS("http://www.w3.org/2000/svg", "path"); // 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.width+"px"); this.svg_el.setAttribute("height",this.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.width; this.svg_el.style.height = this.height; this.svg_el.style.stroke = this.color; this.svg_el.style.strokeWidth = this.thickness; this.svg_el.style.fill = "none"; this.svg_el.style.strokeLinecap = this.linecap; this.element.appendChild(this.svg_el); // Preview 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.width+"px"); this.preview_el.setAttribute("height",this.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.width; this.preview_el.style.height = this.height; this.preview_el.style.stroke = "#72dec2"; this.preview_el.style.strokeWidth = 2; this.preview_el.style.fill = "none"; this.preview_el.style.strokeLinecap = "round"; this.element.appendChild(this.preview_el); this.offset_el.appendChild(this.path) this.svg_el.appendChild(this.offset_el); this.svg_el.appendChild(this.mirror_el); this.mirror_el.appendChild(this.mirror_path); this.theme.start(); this.guide.start(); this.interface.start(); this.controller.start(); this.controller.add("default","*","Reset",() => { dotgrid.reset(); dotgrid.theme.reset(); },"CmdOrCtrl+Backspace"); this.controller.add("default","*","About Dotgrid",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,"); this.controller.add("default","*","Developer Tools",() => { app.inspect },"CmdOrCtrl+."); this.controller.add("default","*","Toggle Fullscreen",() => { app.toggle_fullscreen(); },"CmdOrCtrl+Enter"); this.controller.add("default","*","Toggle Visible",() => { app.toggle_visible(); },"CmdOrCtrl+H"); this.controller.add("default","*","Quit",() => { app.exit(); },"CmdOrCtrl+Q"); this.controller.add("default","File","New",() => { dotgrid.new(); },"CmdOrCtrl+N"); this.controller.add("default","File","Open",() => { dotgrid.open(); },"CmdOrCtrl+O"); this.controller.add("default","File","Save",() => { dotgrid.save(); },"CmdOrCtrl+S"); this.controller.add("default","Edit","Add vertex",() => { dotgrid.add_point(); },"Enter"); this.controller.add("default","Edit","Undo",() => { dotgrid.undo(); },"CmdOrCtrl+Z"); this.controller.add("default","Edit","Delete Last",() => { dotgrid.undo(); },"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 All",() => { dotgrid.reset(); },"Esc"); this.controller.add("default","Stroke","Line",() => { dotgrid.draw_line(); },"A"); this.controller.add("default","Stroke","Arc",() => { dotgrid.draw_arc("0,1"); },"S"); this.controller.add("default","Stroke","Arc(CC)",() => { dotgrid.draw_arc("0,0"); },"D"); this.controller.add("default","Stroke","Bezier",() => { dotgrid.draw_bezier(); },"F"); this.controller.add("default","Stroke","Close",() => { dotgrid.draw_close(); },"Z"); this.controller.add("default","Effect","Increase Thickness",() => { dotgrid.mod_thickness(1) },"]"); this.controller.add("default","Effect","Decrease Thickness",() => { dotgrid.mod_thickness(-1) },"["); this.controller.add("default","Effect","Linecap",() => { dotgrid.mod_linecap(); },"/"); this.controller.add("default","Effect","Mirror",() => { dotgrid.mod_mirror(); },"Space"); this.controller.add("default","Effect","Fill",() => { dotgrid.toggle_fill(); },"G"); this.controller.add("default","View","Toggle Tools",() => { dotgrid.interface.toggle(); },";"); this.controller.add("default","View","Toggle Canvas Size",() => { dotgrid.interface.toggle_zoom(); },":"); this.controller.add("default","View","Toggle Grid",() => { dotgrid.guide.toggle(); },"H"); this.controller.commit(); window.addEventListener('drop', dotgrid.drag); dotgrid.set_size({width:300,height:300}); this.draw(); } // FILE this.new = function() { dotgrid.segments = []; dotgrid.draw(); } this.save = function() { if(this.segments.length == 0){ return; } this.scale = 1 this.draw(); if(dotgrid.fill){ dotgrid.svg_el.style.fill = "black"; dotgrid.render.draw(); } var svg = dotgrid.svg_el.outerHTML; dialog.showSaveDialog((fileName) => { if (fileName === undefined){ return; } fs.writeFile(fileName+".svg", svg); fs.writeFile(fileName+'.png', dotgrid.render.buffer()); fs.writeFile(fileName+'.dot', JSON.stringify(dotgrid.serializer.serialize())); dotgrid.draw() }); } this.open = function() { var paths = dialog.showOpenDialog({properties: ['openFile'],filters:[{name:"Dotgrid Image",extensions:["dot"]}]}); if(!paths){ console.log("Nothing to load"); return; } fs.readFile(paths[0], 'utf-8', (err, data) => { if(err){ alert("An error ocurred reading the file :" + err.message); return; } dotgrid.serializer.deserialize(JSON.parse(data.toString().trim())); dotgrid.draw(); }); } // EDIT this.undo = function() { if(from || to || end){ dotgrid.reset(); } else{ dotgrid.segments.pop(); } dotgrid.draw(); } // STROKE this.draw_line = function() { if(from === null || to === null){ return; } to = new Pos(to.x * -1, to.y).sub(dotgrid.offset) from = new Pos(from.x * -1,from.y).sub(dotgrid.offset) end = end ? new Pos(end.x * -1,end.y).sub(dotgrid.offset) : null; dotgrid.segments.push(new Path_Line(from,to,end)); dotgrid.reset(); dotgrid.draw(); dotgrid.reset(); } this.draw_arc = function(orientation = "0,0") { if(from === null || to === null){ return; } to = new Pos(to.x * -1, to.y).sub(dotgrid.offset) from = new Pos(from.x * -1,from.y).sub(dotgrid.offset) end = end ? new Pos(end.x * -1,end.y).sub(dotgrid.offset) : null; dotgrid.segments.push(new Path_Arc(from,to,orientation,end)); dotgrid.reset(); dotgrid.draw(); dotgrid.reset(); } this.draw_bezier = function() { if(from === null || to === null || end === null){ return; } to = new Pos(to.x * -1, to.y).sub(dotgrid.offset) from = new Pos(from.x * -1,from.y).sub(dotgrid.offset) end = new Pos(end.x * -1,end.y).sub(dotgrid.offset) dotgrid.segments.push(new Path_Bezier(from,to,end)); dotgrid.reset(); dotgrid.draw(); dotgrid.reset(); } this.draw_close = function() { if(dotgrid.segments.length == 0){ return; } if(dotgrid.segments[dotgrid.segments.length-1].name == "close"){ return; } dotgrid.segments.push(new Path_Close()); dotgrid.reset(); dotgrid.draw(); dotgrid.reset(); } // Cursor this.translation = null; this.mouse_down = function(e) { var o = e.target.getAttribute("ar"); var pos = this.position_in_grid(new Pos(e.clientX,e.clientY)); pos = this.position_on_grid(pos); if(e.altKey){ dotgrid.delete_at(pos); return; } if(dotgrid.handle_at(pos)){ dotgrid.translation = {from:pos,to:pos}; return; } if(!o){ return; } if(o == "line"){ this.draw_line(); } if(o == "arc_c"){ this.draw_arc("0,1"); } if(o == "arc_r"){ this.draw_arc("0,0"); } if(o == "bezier"){ this.draw_bezier(); } if(o == "close"){ this.draw_close(); } if(o == "thickness"){ this.mod_thickness(); } if(o == "linecap"){ this.mod_linecap(); } if(o == "mirror"){ this.mod_mirror(); } if(o == "fill"){ this.toggle_fill(); } if(o == "export"){ this.save(); } } this.mouse_move = function(e) { var pos = this.position_in_grid(new Pos(e.clientX,e.clientY)); pos = this.position_on_grid(pos); if(dotgrid.translation){ dotgrid.translation.to = pos; } var o = e.target.getAttribute("ar"); dotgrid.preview(o); dotgrid.move_cursor(pos) dotgrid.guide.update(); } this.mouse_up = function(e) { var pos = this.position_in_grid(new Pos(e.clientX,e.clientY)); pos = this.position_on_grid(pos); if(e.altKey){ return; } if(pos.x>0) { dotgrid.translation = null; return; } if(dotgrid.translation && !dotgrid.translation.to.is_equal(dotgrid.translation.from) ){ dotgrid.translate(dotgrid.translation); return; } dotgrid.translation = null; this.add_point(pos) this.draw(); } this.move_cursor = function(pos) { 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_coord.className = -pos.x > this.width/2 ? "fl left" : "fl" this.cursor_coord.textContent = parseInt(-pos.x/this.grid_width)+","+parseInt(pos.y/this.grid_height); window.setTimeout(() => dotgrid.cursor.style.transition = "all 50ms", 17 /*one frame*/) } } this.add_point = function(pos = new Pos(0,0)) { 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.handle_at = function(pos) { for(id in dotgrid.segments){ var segment = dotgrid.segments[id]; if(segment.from && segment.from.is_equal(pos)){ return true; } if(segment.to && segment.to.is_equal(pos)){ return true; } if(segment.end && segment.end.is_equal(pos)){ return true; } } return false; } this.translate = function(t) { for(id in dotgrid.segments){ var segment = dotgrid.segments[id]; if(segment.from && segment.from.is_equal(dotgrid.translation.from)){ segment.from = new Pos(-dotgrid.translation.to.x,dotgrid.translation.to.y)} if(segment.to && segment.to.is_equal(dotgrid.translation.from)){ segment.to = new Pos(-dotgrid.translation.to.x,dotgrid.translation.to.y)} if(segment.end && segment.end.is_equal(dotgrid.translation.from)){ segment.end = new Pos(-dotgrid.translation.to.x,dotgrid.translation.to.y)} } dotgrid.translation = null; dotgrid.reset(); dotgrid.draw(); } this.preview = function(operation) { if(from && to && operation == "line"){ var d = new Path_Line(from.mirror(),to.mirror(),end ? end.mirror() : null).to_segment(); this.preview_el.innerHTML = "" return; } else if(from && to && operation == "arc_c"){ var d = new Path_Arc(from.mirror(),to.mirror(),"0,1",end ? end.mirror() : null).to_segment(); this.preview_el.innerHTML = "" return; } else if(from && to && operation == "arc_r"){ var d = new Path_Arc(from.mirror(),to.mirror(),"0,0",end ? end.mirror() : null).to_segment(); this.preview_el.innerHTML = "" return; } else if(from && to && operation == "bezier"){ var d = new Path_Bezier(from.mirror(),to.mirror(),end ? end.mirror() : null).to_segment(); this.preview_el.innerHTML = "" return; } this.preview_el.innerHTML = ""; } // Setters this.set_from = function(pos) { from = pos.mirror().clamp(0,this.width).mirror(); 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); } this.set_to = function(pos) { to = pos.mirror().clamp(0,this.width).mirror(); 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); } this.set_end = function(pos) { end = pos.mirror().clamp(0,this.width).mirror(); 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); } this.delete_at = function(pos) { var segs = []; for(id in this.segments){ var s = this.segments[id]; if(s.from && s.from.is_equal(pos)){ continue; } if(s.to && s.to.is_equal(pos)){ continue; } if(s.end && s.end.is_equal(pos)){ continue; } segs.push(s); } this.segments = segs; this.draw(); } this.mod_thickness = function(mod) { if(!mod){ mod = 1; this.thickness = this.thickness > 30 ? 1 : this.thickness } this.thickness = Math.max(this.thickness+mod,0); this.cursor_coord.textContent = this.thickness; this.draw(); } this.mod_linecap_index = 1; this.mod_linecap = function(mod) { var a = ["butt","square","round"]; this.mod_linecap_index += 1; this.linecap = a[this.mod_linecap_index % a.length]; this.draw(); } this.mod_move = function(move) { if(!to && !end && from){ var pos = new Pos(from.x-(move.x),from.y+(move.y)) this.set_from(pos) this.move_cursor(pos) this.draw(); return; } if(!end && to){ var pos = new Pos(to.x-(move.x),to.y+(move.y)) this.set_to(pos) this.move_cursor(pos) this.draw(); return; } if(end){ var pos = new Pos(end.x-(move.x),end.y+(move.y)) this.set_end(pos) this.move_cursor(pos) this.draw(); return; } this.draw(); } this.mirror_index = 0; this.mod_mirror = function() { this.mirror_index += 1; this.mirror_index = this.mirror_index > 3 ? 0 : this.mirror_index; this.draw(); } this.toggle_fill = function() { dotgrid.fill = dotgrid.fill ? false : true; this.draw(); } this.set_size = function(size = {width:300,height:300},interface = true) { var win = require('electron').remote.getCurrentWindow(); win.setSize(size.width+100,size.height+100+(interface ? 10 : 0),true); this.width = size.width this.height = size.height this.element.style.width = size.width+10 this.element.style.height = size.height+10 this.grid_x = size.width/15 this.grid_y = size.height/15 this.svg_el.setAttribute("width",size.width+"px"); this.svg_el.setAttribute("height",size.height+"px"); this.preview_el.style.width = size.width+10 this.preview_el.style.height = size.height+10 this.preview_el.setAttribute("width",size.width+"px"); this.preview_el.setAttribute("height",size.height+"px"); dotgrid.guide.resize(size); this.interface.update(); this.draw(); } this.draw = function(exp = false) { var d = ""; var prev = ""; for(id in this.segments){ var segment = this.segments[id]; d += segment.to_segment(prev)+" "; prev = segment; } this.path.setAttribute("d",d); this.svg_el.style.width = this.width; 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.scale; this.svg_el.style.fill = this.fill ? this.theme.active.f_high : "none"; // Draw Mirror if(this.mirror_index == 1){ this.mirror_path.setAttribute("d",d); 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*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("+(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.scale)+","+(this.offset.y*this.scale)+")") this.render.draw(); this.interface.update(); this.guide.update(); } // Draw this.reset = function() { from = null; to = null; end = null; cursor_from.style.left = -100; cursor_from.style.top = -100; cursor_to.style.left = -100; cursor_to.style.top = -100; cursor_end.style.left = -100; cursor_end.style.top = -100; } this.clear = function() { this.reset(); this.segments = []; this.thickness = 10 this.linecap = "square" this.color = "#000000" this.draw(); } this.drag = function(e) { e.preventDefault(); e.stopPropagation(); var file = e.dataTransfer.files[0]; if(!file.name || !file.name.indexOf(".dot") < 0){ console.log("Dotgrid","Not a dot file"); return; } var reader = new FileReader(); reader.onload = function(e){ dotgrid.serializer.deserialize(JSON.parse(e.target.result.toString().trim())); dotgrid.draw(); }; reader.readAsText(file); } this.copy = function(e) { if(this.segments.length == 0){ return; } this.scale = 1 this.width = 300 this.height = 300 this.draw(); var svg = this.svg_el.outerHTML e.clipboardData.items.add(JSON.stringify(this.serializer.serialize()), "text/plain"); e.clipboardData.items.add(svg, "text/html"); e.clipboardData.items.add(svg, "text/svg+xml"); e.preventDefault(); } this.paste = function(e) { var data = e.clipboardData.getData("text/plain"); try { data = JSON.parse(data.trim()); if (!data || !data.dotgrid) throw null; } catch (err) { // Not a dotgrid JSON. return; } this.serializer.deserialize(data); this.draw(); } // Normalizers this.position_in_grid = function(pos) { return new Pos((window.innerWidth/2) - (this.width/2) - pos.x,pos.y - (30+10*(this.scale))) } this.position_on_grid = function(pos) { pos.y = pos.y - 7.5 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.width || x>0 || y>this.height || y<0) if(off) { x = 50 y = -50 } return new Pos(x,y); } // To Clean this.from = function() { return from; } this.to = function() { return to; } this.end = function() { return end; } } window.addEventListener('resize', function(e) { dotgrid.draw() }, false); window.addEventListener('dragover',function(e) { e.stopPropagation(); e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; });