diff --git a/desktop/sources/links/main.css b/desktop/sources/links/main.css index f1c5539..dda67dd 100644 --- a/desktop/sources/links/main.css +++ b/desktop/sources/links/main.css @@ -4,10 +4,10 @@ body { padding: 5px; font-family: 'input_mono_regular'; -webkit-user-select: non #app { display: flex; flex-direction: column; align-items: center; -webkit-app-region: drag; padding-top:30px;} #dotgrid { margin:0px auto; position:relative; padding:15px;-webkit-app-region: no-drag; width:310px; height:310px; } -#guide { position: absolute;width: 300px;height: 300px; transition: opacity 250ms;} +#guide { position: absolute;width: 300px;height: 300px; transition: opacity 150ms;} #render { display: none } #vector { z-index: 1000;position: relative;width:300px; height:300px; } -#preview { position: absolute; top:15px; left:15px; stroke-dasharray: 4,4;} +#preview { z-index: 1001;position: absolute; top:15px; left:15px; stroke-dasharray: 4,4;} /* Interface */ diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 92ff2c6..59b63b8 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -22,7 +22,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.layer_2 = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.layer_2.id = "layer_2"; this.layer_2.style.stroke = "#999"; this.layer_3 = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.layer_3.id = "layer_3"; this.layer_3.style.stroke = "#ccc"; - this.cursor = { pos:{x:0,y:0},translation:null,multi:false } + this.cursor = { pos:{x:0,y:0},translation:null,multi:false,updated:0 } this.install = function() { @@ -148,7 +148,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) document.addEventListener('copy', function(e){ dotgrid.copy(e); e.preventDefault(); }, false); document.addEventListener('cut', function(e){ dotgrid.cut(e); e.preventDefault(); }, false); document.addEventListener('paste', function(e){ dotgrid.paste(e); e.preventDefault(); }, false); - window.addEventListener('drop', dotgrid.drag); dotgrid.set_size({width:300,height:300}); @@ -197,34 +196,35 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.mouse_down = function(e) { - var pos = this.position_in_grid({x:e.clientX+5,y:e.clientY-5}); pos = this.position_on_grid(pos); + var o = e.target.getAttribute("ar"); + + if(o){ + if(o == "line"){ this.tool.cast("line"); return; } + if(o == "arc_c"){ this.tool.cast("arc_c"); return;} + if(o == "arc_r"){ this.tool.cast("arc_r"); return; } + if(o == "bezier"){ this.tool.cast("bezier"); return; } + if(o == "close"){ this.tool.cast("close"); return; } + + if(o == "thickness"){ this.mod_thickness(); return; } + if(o == "linecap"){ this.mod_linecap(); return; } + if(o == "linejoin"){ this.mod_linejoin(); return; } + if(o == "mirror"){ this.mod_mirror(); return; } + if(o == "fill"){ this.mod_fill(); return; } + if(o == "color"){ setTimeout(()=>{ this.picker.start(); }, 100); return; } + if(o == "depth"){ this.tool.select_next_layer(); return; } + + e.preventDefault(); + } + + var pos = this.position_in_grid({x:e.clientX+5,y:e.clientY-5}); + pos = this.position_on_grid(pos); if(e.altKey){ dotgrid.tool.remove_segments_at(pos); return; } if(dotgrid.tool.vertex_at(pos)){ console.log("Begin translation"); dotgrid.cursor.translation = {from:pos,to:pos}; if(e.shiftKey){ console.log("Begin translation(multi)"); dotgrid.cursor.multi = true; } - return; } - - var o = e.target.getAttribute("ar"); - if(!o){ return; } - - if(o == "line"){ this.tool.cast("line"); } - if(o == "arc_c"){ this.tool.cast("arc_c"); } - if(o == "arc_r"){ this.tool.cast("arc_r"); } - if(o == "bezier"){ this.tool.cast("bezier"); } - if(o == "close"){ this.tool.cast("close"); } - - if(o == "thickness"){ this.mod_thickness(); } - if(o == "linecap"){ this.mod_linecap(); } - if(o == "linejoin"){ this.mod_linejoin(); } - if(o == "mirror"){ this.mod_mirror(); } - if(o == "fill"){ this.mod_fill(); } - if(o == "color"){ setTimeout(()=>{ this.picker.start(); }, 100) } - if(o == "depth"){ this.tool.select_next_layer(); } - - e.preventDefault(); } this.mouse_move = function(e) @@ -232,6 +232,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) var pos = this.position_in_grid({x:e.clientX+5,y:e.clientY-5}); pos = this.position_on_grid(pos); this.cursor.pos = pos; + this.cursor.updated = new Date().getTime(); if(dotgrid.cursor.translation && (Math.abs(dotgrid.cursor.translation.from.x) != Math.abs(pos.x) || Math.abs(dotgrid.cursor.translation.from.y) != Math.abs(pos.y))){ dotgrid.cursor.translation.to = pos; } @@ -242,7 +243,10 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.mouse_up = function(e) { - var pos = this.position_in_grid({x:e.clientX+5,y:e.clientY-5}); pos = this.position_on_grid(pos); + if(e.target.getAttribute("ar")){ return } // If clicking on interface + + var pos = this.position_in_grid({x:e.clientX+5,y:e.clientY-5}); + pos = this.position_on_grid(pos); if(e.altKey){ return; } @@ -281,9 +285,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.preview = function(operation) { - if(this.preview_prev == operation ){ return; } + if(this.preview_prev == operation){ return; } - this.preview_el.innerHTML = !operation || operation == "close" ? `` : ``; + this.preview_el.innerHTML = !operation || operation == "close" || !dotgrid.tool.can_cast(operation) ? `` : ``; this.preview_prev = operation; } @@ -496,17 +500,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) return {x:x*-1,y:y}; } - function is_json(text) - { - try{ - JSON.parse(text); - return true; - } - catch (error){ - return false; - } - } - + function is_json(text){ try{ JSON.parse(text);return true; } catch(error){ return false; }} function pos_is_equal(a,b){ return a && b && a.x == b.x && a.y == b.y } function clamp(v, min, max) { return v < min ? min : v > max ? max : v; } } diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js index c93032e..6f1157c 100644 --- a/desktop/sources/scripts/guide.js +++ b/desktop/sources/scripts/guide.js @@ -101,7 +101,7 @@ function Guide() 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.strokeStyle = pos_is_equal(pos,dotgrid.cursor.pos) ? dotgrid.theme.active.b_inv : dotgrid.theme.active.f_low; ctx.stroke(); ctx.closePath(); } @@ -127,7 +127,6 @@ function Guide() this.draw_cursor = function(pos = dotgrid.cursor.pos,radius = 10) { - console.log(pos) var ctx = this.el.getContext('2d'); ctx.beginPath(); ctx.lineWidth = 3; @@ -137,4 +136,6 @@ function Guide() ctx.stroke(); ctx.closePath(); } + + function pos_is_equal(a,b){ return a && b && Math.abs(a.x) == Math.abs(b.x) && Math.abs(a.y) == Math.abs(b.y) } } \ No newline at end of file diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js index ff25f68..f49130e 100644 --- a/desktop/sources/scripts/tool.js +++ b/desktop/sources/scripts/tool.js @@ -170,6 +170,11 @@ function Tool() return false; } } + if(type == "bezier"){ + if(this.verteces.length % 2 == 0){ + return false; + } + } return this.verteces.length >= this.reqs[type]; }