diff --git a/sources/index.html b/sources/index.html index dd2bdec..ec5e477 100644 --- a/sources/index.html +++ b/sources/index.html @@ -5,7 +5,6 @@ - diff --git a/sources/scripts/dotgrid.js b/sources/scripts/dotgrid.js index 0aeb921..7fe28f8 100644 --- a/sources/scripts/dotgrid.js +++ b/sources/scripts/dotgrid.js @@ -36,13 +36,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca 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; @@ -75,18 +68,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.cursor_y.className = "fl" this.element.appendChild(this.cursor_y); - 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"); @@ -234,56 +215,34 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.undo = function() { - if(from || to || end){ - dotgrid.reset(); - dotgrid.draw(); - return; - } - - this.segments = this.history.prev(); + // this.segments = this.history.prev(); this.draw(); } this.redo = function() { - this.segments = this.history.next(); + // this.segments = this.history.next(); this.draw(); } this.delete_at = function(pos) { - var segs = []; + // 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; - dotgrid.history.push(dotgrid.segments); + // 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; + // dotgrid.history.push(dotgrid.segments); this.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.history.push(dotgrid.segments); - - dotgrid.reset(); - dotgrid.draw(); - dotgrid.reset(); - } - this.draw_arc = function(orientation = "0,0") { if(from === null || to === null){ return; } @@ -346,7 +305,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca if(!o){ return; } - if(o == "line"){ this.draw_line(); } + if(o == "line"){ this.tool.cast("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(); } @@ -437,26 +396,26 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca 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; - } + // 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 = ""; } @@ -633,15 +592,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca 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; + console.log("TODO") } this.clear = function() @@ -723,23 +674,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca } 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) diff --git a/sources/scripts/interface.js b/sources/scripts/interface.js index 948675b..5d89f83 100644 --- a/sources/scripts/interface.js +++ b/sources/scripts/interface.js @@ -25,7 +25,7 @@ function Interface() ["export","export","M150,50 L50,150 L150,250 L250,150 L150,50 Z"] ] - + for(id in tools){ var tool = tools[id]; html += `${tool[1]}` @@ -37,19 +37,19 @@ function Interface() { let prev = dotgrid.segments[dotgrid.segments.length-1] - document.getElementById("line").className.baseVal = !dotgrid.from() || !dotgrid.to() ? "icon inactive" : "icon"; - 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("line").className.baseVal = dotgrid.tool.verteces.length < 2 ? "icon inactive" : "icon"; + document.getElementById("arc_c").className.baseVal = dotgrid.tool.verteces.length < 2 ? "icon inactive" : "icon"; + document.getElementById("arc_r").className.baseVal = dotgrid.tool.verteces.length < 2 ? "icon inactive" : "icon"; + document.getElementById("bezier").className.baseVal = dotgrid.tool.verteces.length < 3 ? "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("thickness").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon"; + document.getElementById("linecap").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon"; + document.getElementById("linejoin").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon"; + document.getElementById("mirror").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon"; + document.getElementById("fill").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon"; - document.getElementById("export").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon"; + document.getElementById("export").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon"; } this.update_size = function() diff --git a/sources/scripts/path_line.js b/sources/scripts/path_line.js deleted file mode 100644 index 8abc52e..0000000 --- a/sources/scripts/path_line.js +++ /dev/null @@ -1,47 +0,0 @@ -function Path_Line(from,to,end = null) -{ - this.__serialized_name__ = "Path_Line"; - this.name = "line"; - - this.from = from; - this.to = to; - this.end = end; - - this.to_segment = function(prev) - { - var html = "" - - if(!prev || (!prev.to && !prev.end)){ - html += "M"+this.from.scale(dotgrid.scale)+" "; - } - else if(prev){ - if(prev.end){ - 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.scale(dotgrid.scale))){ - html += "M"+this.from.scale(dotgrid.scale)+" "; - } - } - } - - html += "L"+this.to.scale(dotgrid.scale)+" " - - if(this.end){ - html += "L"+this.end.scale(dotgrid.scale)+" " - } - - return html - } - - this.handles = function() - { - var a = []; - if(this.from){ a.push(this.from); } - if(this.to){ a.push(this.to); } - if(this.end){ a.push(this.end); } - return a; - } -} \ No newline at end of file diff --git a/sources/scripts/tool.js b/sources/scripts/tool.js index 9466dc9..1fc1cd2 100644 --- a/sources/scripts/tool.js +++ b/sources/scripts/tool.js @@ -1,12 +1,21 @@ function Tool() { - this.layer = 0; + this.index = 0; this.layers = []; this.verteces = []; + this.layer = function() + { + console.log(this.layers) + if(!this.layers[this.index]){ + this.layers[this.index] = []; + } + return this.layers[this.index]; + } + this.remove_segment = function() { - this.layers[this.layer].pop(); + this.layer().pop(); this.clear(); dotgrid.draw(); } @@ -19,21 +28,21 @@ function Tool() this.cast = function(type) { - if(!this.layers[this.layer]){ this.layers[this.layer] = []; } + if(!this.layer()){ this.layers[this.index] = []; } - this.layers[this.layer].push({type:type,verteces:this.verteces.slice()}) + this.layer().push({type:type,verteces:this.verteces.slice()}) this.clear(); dotgrid.draw(); - console.log(`Casted ${type}+${this.layers[this.layer].length}`); + console.log(`Casted ${type}+${this.layer().length}`); } this.path = function() { var html = ""; - for(id in this.layers[this.layer]){ - var segment = this.layers[this.layer][id]; + for(id in this.layer()){ + var segment = this.layer()[id]; html += this.render(segment); } return html @@ -56,8 +65,8 @@ function Tool() this.vertex_at = function(pos) { - for(segment_id in this.layers[this.layer]){ - var segment = this.layers[this.layer][segment_id]; + for(segment_id in this.layer()){ + var segment = this.layer()[segment_id]; for(vertex_id in segment.verteces){ var vertex = segment.verteces[vertex_id]; if(vertex.x == Math.abs(pos.x) && vertex.y == Math.abs(pos.y)){ @@ -70,8 +79,8 @@ function Tool() this.translate = function(a,b) { - for(segment_id in this.layers[this.layer]){ - var segment = this.layers[this.layer][segment_id]; + for(segment_id in this.layer()){ + var segment = this.layer()[segment_id]; for(vertex_id in segment.verteces){ var vertex = segment.verteces[vertex_id]; if(vertex.x == Math.abs(a.x) && vertex.y == Math.abs(a.y)){