diff --git a/desktop/sources/scripts/cursor.js b/desktop/sources/scripts/cursor.js index fe29c1d..af8dc20 100644 --- a/desktop/sources/scripts/cursor.js +++ b/desktop/sources/scripts/cursor.js @@ -20,7 +20,7 @@ function Cursor() this.down = function(e) { - this.pos = this.pos_from_event(e) + this.pos = this.pos_from_event(e); // Translation if(dotgrid.tool.vertex_at(this.pos)){ @@ -65,6 +65,7 @@ function Cursor() } else if(e.target.id == "guide"){ dotgrid.tool.add_vertex({x:this.pos.x,y:this.pos.y}); + dotgrid.picker.stop(); } this.translate(); diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js index 917f9ec..d0e712b 100644 --- a/desktop/sources/scripts/guide.js +++ b/desktop/sources/scripts/guide.js @@ -183,7 +183,7 @@ function Guide() ctx.lineTo((dotgrid.cursor.translation.to.x * this.scale),(dotgrid.cursor.translation.to.y * this.scale)); ctx.lineCap="round"; ctx.lineWidth = 5; - ctx.strokeStyle = dotgrid.theme.active.b_inv; + ctx.strokeStyle = dotgrid.theme.active.f_low; ctx.setLineDash([5,10]); ctx.stroke(); ctx.closePath(); diff --git a/desktop/sources/scripts/picker.js b/desktop/sources/scripts/picker.js index d092fab..c6e8ee2 100644 --- a/desktop/sources/scripts/picker.js +++ b/desktop/sources/scripts/picker.js @@ -5,38 +5,54 @@ function Picker() this.memory = ""; this.el = document.createElement("div"); this.el.id = "picker" + this.is_active = false; this.input = document.createElement("input"); this.input.id = "picker_input" - this.original = null; this.el.appendChild(this.input) this.start = function() { + if(this.is_active){ return; } + + this.is_active = true; + this.input.setAttribute("placeholder",`${dotgrid.tool.style().color.replace("#","").trim()}`) this.input.setAttribute("maxlength",6) - try{ dotgrid.controller.set("picker"); } - catch(err){ } - dotgrid.interface.el.className = "picker" this.input.focus() - this.original = dotgrid.tool.style().color this.input.value = "" + + try{ dotgrid.controller.set("picker"); } + catch(err){ } + } + + this.update = function() + { + if(!this.is_active){ return; } + if(!is_color(this.input.value)){ return; } + + let hex = `#${this.input.value}`; + + document.getElementById("option_color").children[0].style.fill = hex; + document.getElementById("option_color").children[0].style.stroke = hex; } this.stop = function() { - this.cancel(); - - try{ dotgrid.controller.set(); } - catch(err){ console.log("No controller"); } + if(!this.is_active){ return; } + this.is_active = false; + dotgrid.interface.el.className = "" this.input.blur() this.input.value = "" - setTimeout(() => { dotgrid.interface.update(true); }, 250) + try{ dotgrid.controller.set(); } + catch(err){ console.log("No controller"); } + + setTimeout(() => { dotgrid.interface.update(true); dotgrid.guide.update(); }, 250) } this.validate = function() @@ -45,46 +61,10 @@ function Picker() let hex = `#${this.input.value}`; - this.set_color(hex); - - dotgrid.guide.update(); - - try{ dotgrid.controller.set(); } - catch(err){ console.log("No controller"); } - - dotgrid.interface.el.className = "" - this.input.blur() - this.input.value = "" - - setTimeout(() => { dotgrid.interface.update(true); }, 250) - } - - this.set_color = function(color) - { dotgrid.tool.style().color = color; dotgrid.tool.style().fill = dotgrid.tool.style().fill != "none" ? color : "none"; - } - this.set_size = function(size) - { - dotgrid.set_size(size); - } - - this.cancel = function() - { - if(!this.original){ return; } - dotgrid.guide.update(); - setTimeout(() => { dotgrid.interface.update(true); }, 250) - } - - this.update = function() - { - if(!is_color(this.input.value)){ return; } - - let hex = `#${this.input.value}`; - - document.getElementById("option_color").children[0].style.fill = hex; - document.getElementById("option_color").children[0].style.stroke = hex; + this.stop(); } this.listen = function(e,is_down = false)