Improved picker
This commit is contained in:
parent
b4359518b9
commit
556b6aba40
@ -20,7 +20,7 @@ function Cursor()
|
|||||||
|
|
||||||
this.down = function(e)
|
this.down = function(e)
|
||||||
{
|
{
|
||||||
this.pos = this.pos_from_event(e)
|
this.pos = this.pos_from_event(e);
|
||||||
|
|
||||||
// Translation
|
// Translation
|
||||||
if(dotgrid.tool.vertex_at(this.pos)){
|
if(dotgrid.tool.vertex_at(this.pos)){
|
||||||
@ -65,6 +65,7 @@ function Cursor()
|
|||||||
}
|
}
|
||||||
else if(e.target.id == "guide"){
|
else if(e.target.id == "guide"){
|
||||||
dotgrid.tool.add_vertex({x:this.pos.x,y:this.pos.y});
|
dotgrid.tool.add_vertex({x:this.pos.x,y:this.pos.y});
|
||||||
|
dotgrid.picker.stop();
|
||||||
}
|
}
|
||||||
|
|
||||||
this.translate();
|
this.translate();
|
||||||
|
@ -183,7 +183,7 @@ function Guide()
|
|||||||
ctx.lineTo((dotgrid.cursor.translation.to.x * this.scale),(dotgrid.cursor.translation.to.y * this.scale));
|
ctx.lineTo((dotgrid.cursor.translation.to.x * this.scale),(dotgrid.cursor.translation.to.y * this.scale));
|
||||||
ctx.lineCap="round";
|
ctx.lineCap="round";
|
||||||
ctx.lineWidth = 5;
|
ctx.lineWidth = 5;
|
||||||
ctx.strokeStyle = dotgrid.theme.active.b_inv;
|
ctx.strokeStyle = dotgrid.theme.active.f_low;
|
||||||
ctx.setLineDash([5,10]);
|
ctx.setLineDash([5,10]);
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
ctx.closePath();
|
ctx.closePath();
|
||||||
|
@ -5,38 +5,54 @@ function Picker()
|
|||||||
this.memory = "";
|
this.memory = "";
|
||||||
this.el = document.createElement("div");
|
this.el = document.createElement("div");
|
||||||
this.el.id = "picker"
|
this.el.id = "picker"
|
||||||
|
this.is_active = false;
|
||||||
this.input = document.createElement("input");
|
this.input = document.createElement("input");
|
||||||
this.input.id = "picker_input"
|
this.input.id = "picker_input"
|
||||||
this.original = null;
|
|
||||||
|
|
||||||
this.el.appendChild(this.input)
|
this.el.appendChild(this.input)
|
||||||
|
|
||||||
this.start = function()
|
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("placeholder",`${dotgrid.tool.style().color.replace("#","").trim()}`)
|
||||||
this.input.setAttribute("maxlength",6)
|
this.input.setAttribute("maxlength",6)
|
||||||
|
|
||||||
try{ dotgrid.controller.set("picker"); }
|
|
||||||
catch(err){ }
|
|
||||||
|
|
||||||
dotgrid.interface.el.className = "picker"
|
dotgrid.interface.el.className = "picker"
|
||||||
this.input.focus()
|
this.input.focus()
|
||||||
this.original = dotgrid.tool.style().color
|
|
||||||
this.input.value = ""
|
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.stop = function()
|
||||||
{
|
{
|
||||||
this.cancel();
|
if(!this.is_active){ return; }
|
||||||
|
|
||||||
try{ dotgrid.controller.set(); }
|
|
||||||
catch(err){ console.log("No controller"); }
|
|
||||||
|
|
||||||
|
this.is_active = false;
|
||||||
|
|
||||||
dotgrid.interface.el.className = ""
|
dotgrid.interface.el.className = ""
|
||||||
this.input.blur()
|
this.input.blur()
|
||||||
this.input.value = ""
|
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()
|
this.validate = function()
|
||||||
@ -45,46 +61,10 @@ function Picker()
|
|||||||
|
|
||||||
let hex = `#${this.input.value}`;
|
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().color = color;
|
||||||
dotgrid.tool.style().fill = dotgrid.tool.style().fill != "none" ? color : "none";
|
dotgrid.tool.style().fill = dotgrid.tool.style().fill != "none" ? color : "none";
|
||||||
}
|
|
||||||
|
|
||||||
this.set_size = function(size)
|
this.stop();
|
||||||
{
|
|
||||||
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.listen = function(e,is_down = false)
|
this.listen = function(e,is_down = false)
|
||||||
|
Loading…
Reference in New Issue
Block a user