Atlas48/pointvec
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved UI/UX

Browse Source
This commit is contained in:
Devine Lu Linvega
2018-09-12 15:27:01 +12:00
parent a0ede91554
commit ce84b3115b
9 changed files with 98 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
desktop/sources/scripts/dotgrid.js
View File

@@ -17,15 +17,18 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
this.block_x = block_x;
this.block_y = block_y;
this.install = function()
{
document.getElementById("app").appendChild(this.guide.el);
// ISU
this.install = function(host)
{
host.appendChild(this.guide.el);
this.interface.install(document.body);
this.theme.install(document.body,this.update);
}
this.start = function()
{
{
this.theme.start();
this.tool.start();
this.guide.start();
@@ -41,6 +44,15 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
window.addEventListener('drop', dotgrid.drag);
this.new();
setTimeout(() => { document.body.className += ' ready'; }, 250)
}
this.update = function()
{
dotgrid.resize();
dotgrid.interface.update();
dotgrid.guide.update();
}
// File
@@ -189,10 +201,16 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
dotgrid.interface.update(true);
}
this.update = function()
this.resize = function()
{
let size = {width:step(window.innerWidth-90,15),height:step(window.innerHeight-120,15)}
if(size.width == dotgrid.tool.settings.size.width && size.height == dotgrid.tool.settings.size.height){
return;
}
console.log(`Resized: ${size.width}x${size.height}`)
dotgrid.tool.settings.size.width = size.width
dotgrid.tool.settings.size.height = size.height
@@ -204,8 +222,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
dotgrid.guide.resize(size);
dotgrid.interface.update();
dotgrid.guide.update();
document.title = `Dotgrid — ${size.width}x${size.height}`
}
@@ -230,7 +246,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
{
dotgrid.guide.update();
if(e.target !== this.picker.el){
if(e.target !== this.picker.input){
e.clipboardData.setData('text/source', dotgrid.tool.export(dotgrid.tool.layer()));
e.clipboardData.setData('text/plain', dotgrid.tool.path());
e.clipboardData.setData('text/html', dotgrid.renderer.to_svg());
@@ -245,7 +261,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
{
dotgrid.guide.update();
if(e.target !== this.picker.el){
if(e.target !== this.picker.input){
e.clipboardData.setData('text/plain', dotgrid.tool.export(dotgrid.tool.layer()));
e.clipboardData.setData('text/html', dotgrid.renderer.to_svg());
e.clipboardData.setData('text/svg+xml', dotgrid.renderer.to_svg());

20
desktop/sources/scripts/interface.js
View File

@@ -11,11 +11,13 @@ function Interface()
this.is_visible = true;
this.zoom = false;
this.start = function()
this.install = function(host)
{
document.getElementById("app").appendChild(this.el);
this.el.appendChild(dotgrid.picker.el);
host.appendChild(this.el);
}
this.start = function(host)
{
let html = ""
let options = {
cast:{
@@ -55,7 +57,6 @@ function Interface()
onmouseout="dotgrid.interface.out('${type}','${name}')"
onmouseup="dotgrid.interface.up('${type}','${name}')"
onmousedown="dotgrid.interface.down('${type}','${name}')"
onclick="dotgrid.interface.click('${type}','${name}')"
onmouseover="dotgrid.interface.over('${type}','${name}')"
viewBox="0 0 300 300"
class="icon ${type}">
@@ -68,6 +69,7 @@ function Interface()
}
this.menu_el.innerHTML = html
this.menu_el.appendChild(dotgrid.picker.el)
}
this.over = function(type,name)
@@ -96,14 +98,6 @@ function Interface()
this.update(true);
}
this.click = function(type,name)
{
// if(!dotgrid.tool[type]){ console.warn(`Unknown option(type): ${type}.${name}`,dotgrid.tool); return; }
// dotgrid.tool[type](name)
// this.update();
}
this.prev_operation = null;
this.update = function(force = false,id)

4
desktop/sources/scripts/lib/theme.js
View File

@@ -9,8 +9,8 @@ function Theme()
this.callback = null;
this.collection = {
noir: {meta:{}, data: { background: "#222", f_high: "#fff", f_med: "#777", f_low: "#444", f_inv: "#000", b_high: "#000", b_med: "#aaa", b_low: "#000", b_inv: "#aaa" }},
pale: {meta:{}, data: { background: "#e1e1e1", f_high: "#222", f_med: "#777", f_low: "#aaa", f_inv: "#000", b_high: "#000", b_med: "#aaa", b_low: "#ccc", b_inv: "#fff" }}
noir: {meta:{}, data: { background: "#222", f_high: "#fff", f_med: "#777", f_low: "#444", f_inv: "#fff", b_high: "#000", b_med: "#aaa", b_low: "#000", b_inv: "#000" }},
pale: {meta:{}, data: { background: "#e1e1e1", f_high: "#000", f_med: "#777", f_low: "#aaa", f_inv: "#000", b_high: "#000", b_med: "#aaa", b_low: "#ccc", b_inv: "#fff" }}
}
this.active = this.collection.noir;

69
desktop/sources/scripts/picker.js
View File

@@ -3,21 +3,26 @@
function Picker()
{
this.memory = "";
this.el = document.createElement("input");
this.el = document.createElement("div");
this.el.id = "picker"
this.input = document.createElement("input");
this.input.id = "picker_input"
this.original = null;
this.el.appendChild(this.input)
this.start = function()
{
this.el.setAttribute("placeholder",`${dotgrid.tool.style().color}`)
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.el.focus()
this.input.focus()
this.original = dotgrid.tool.style().color
this.el.value = ""
this.input.value = ""
}
this.stop = function()
@@ -28,27 +33,28 @@ function Picker()
catch(err){ console.log("No controller"); }
dotgrid.interface.el.className = ""
this.el.blur()
this.el.value = ""
this.input.blur()
this.input.value = ""
}
this.validate = function()
{
let parts = this.parse(this.el.value)
if(!is_color(this.input.value)){ return; }
if(parts.color){ this.set_color(parts.color); }
if(parts.size){ this.set_size(parts.size); }
let hex = `#${this.input.value}`;
this.set_color(hex);
dotgrid.guide.update();
try{ dotgrid.controller.set(); }
catch(err){ }
catch(err){ console.log("No controller"); }
dotgrid.interface.el.className = ""
this.el.blur()
this.el.value = ""
this.input.blur()
this.input.value = ""
setTimeout(() => { dotgrid.interface.update(true); }, 500)
setTimeout(() => { dotgrid.interface.update(true); }, 250)
}
this.set_color = function(color)
@@ -72,12 +78,14 @@ function Picker()
this.update = function()
{
let parts = this.parse(this.el.value)
if(!parts.color){ return; }
if(!is_color(this.input.value)){ return; }
dotgrid.tool.style().color = parts.color;
dotgrid.tool.style().fill = dotgrid.tool.style().fill != "none" ? parts.color : "none";
let hex = `#${this.input.value}`;
dotgrid.tool.style().color = hex;
dotgrid.tool.style().fill = dotgrid.tool.style().fill != "none" ? hex : "none";
dotgrid.guide.update();
dotgrid.interface.update(true);
}
this.listen = function(e)
@@ -97,36 +105,15 @@ function Picker()
this.update();
}
this.parse = function(value)
{
let parts = value.split(" ");
let color = null;
let size = null;
for(let id in parts){
let part = parts[id];
if(is_color(part) && !color){ color = part; }
if(is_size(part) && !size){ size = { width:parseInt(part.toLowerCase().split("x")[0]),height:parseInt(part.toLowerCase().split("x")[1]) }; }
}
return {color:color,size:size}
}
function is_size(val)
{
if(val.toLowerCase().indexOf("x") < 1){ return false; }
return true
}
function is_color(val)
{
if(val.length != 4 && val.length != 7){
if(val.length != 3 && val.length != 6){
return false
}
let re = /\#[0-9A-Fa-f]/g;
let re = /[0-9A-Fa-f]/g;
return re.test(val)
}
this.el.onkeyup = function(event){ dotgrid.picker.listen(event); };
this.input.onkeyup = function(event){ dotgrid.picker.listen(event); };
}