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

Improved theme support

Browse Source
This commit is contained in:
Devine Lu Linvega
2018-09-12 13:20:31 +12:00
parent 81687281d5
commit a0ede91554
13 changed files with 150 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
desktop/sources/scripts/cursor.js
View File

@@ -27,8 +27,8 @@ function Cursor()
this.translate(this.pos,this.pos,e.shiftKey)
}
dotgrid.guide.refresh();
dotgrid.interface.refresh();
dotgrid.guide.update();
dotgrid.interface.update();
e.preventDefault();
}
@@ -44,10 +44,10 @@ function Cursor()
}
if(this.last_pos.x != this.pos.x || this.last_pos.y != this.pos.y){
dotgrid.guide.refresh();
dotgrid.guide.update();
}
dotgrid.interface.refresh();
dotgrid.interface.update();
e.preventDefault();
this.last_pos = this.pos;
@@ -69,8 +69,8 @@ function Cursor()
this.translate();
dotgrid.interface.refresh();
dotgrid.guide.refresh();
dotgrid.interface.update();
dotgrid.guide.update();
e.preventDefault();
}

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

@@ -21,6 +21,11 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
{
document.getElementById("app").appendChild(this.guide.el);
this.theme.install(document.body,this.update);
}
this.start = function()
{
this.theme.start();
this.tool.start();
this.guide.start();
@@ -59,7 +64,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
fs.readFile(paths[0], 'utf-8', (err, data) => {
if(err){ alert("An error ocurred reading the file :" + err.message); return; }
this.tool.replace(JSON.parse(data.toString().trim()));
this.guide.refresh();
this.guide.update();
});
}
@@ -73,7 +78,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
if (fileName === undefined){ return; }
fileName = fileName.substr(-5,5) != ".grid" ? fileName+".grid" : fileName;
fs.writeFileSync(fileName, content);
dotgrid.guide.refresh()
dotgrid.guide.update()
});
}
@@ -115,7 +120,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
if (fileName === undefined){ return; }
fileName = fileName.substr(-4,4) != ".svg" ? fileName+".svg" : fileName;
fs.writeFileSync(fileName, content);
this.guide.refresh()
this.guide.update()
});
}
@@ -151,8 +156,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
dotgrid.guide.resize(size);
this.interface.refresh();
dotgrid.guide.refresh();
this.interface.update();
dotgrid.guide.update();
}
this.set_zoom = function(scale)
@@ -172,7 +177,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
this.reset = function()
{
this.tool.clear();
this.refresh();
this.update();
}
this.clear = function()
@@ -180,11 +185,11 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
this.history.clear();
this.tool.reset();
this.reset();
dotgrid.guide.refresh();
dotgrid.interface.refresh(true);
dotgrid.guide.update();
dotgrid.interface.update(true);
}
this.refresh = function()
this.update = function()
{
let size = {width:step(window.innerWidth-90,15),height:step(window.innerHeight-120,15)}
@@ -199,8 +204,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
dotgrid.guide.resize(size);
dotgrid.interface.refresh();
dotgrid.guide.refresh();
dotgrid.interface.update();
dotgrid.guide.update();
document.title = `Dotgrid — ${size.width}x${size.height}`
}
@@ -216,14 +221,14 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
let reader = new FileReader();
reader.onload = function(e){
dotgrid.tool.replace(JSON.parse(e.target.result.toString().trim()));
dotgrid.guide.refresh();
dotgrid.guide.update();
};
reader.readAsText(file);
}
this.copy = function(e)
{
dotgrid.guide.refresh();
dotgrid.guide.update();
if(e.target !== this.picker.el){
e.clipboardData.setData('text/source', dotgrid.tool.export(dotgrid.tool.layer()));
@@ -233,12 +238,12 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
e.preventDefault();
}
dotgrid.guide.refresh();
dotgrid.guide.update();
}
this.cut = function(e)
{
dotgrid.guide.refresh();
dotgrid.guide.update();
if(e.target !== this.picker.el){
e.clipboardData.setData('text/plain', dotgrid.tool.export(dotgrid.tool.layer()));
@@ -248,7 +253,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
e.preventDefault();
}
dotgrid.guide.refresh();
dotgrid.guide.update();
}
this.paste = function(e)
@@ -262,13 +267,13 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
e.preventDefault();
}
dotgrid.guide.refresh();
dotgrid.guide.update();
}
}
window.addEventListener('resize', function(e)
{
dotgrid.refresh();
dotgrid.update();
}, false);
window.addEventListener('dragover',function(e)

8
desktop/sources/scripts/guide.js
View File

@@ -15,10 +15,10 @@ function Guide()
this.start = function()
{
this.clear();
this.refresh();
this.update();
}
this.refresh = function(force = false)
this.update = function(force = false)
{
this.clear();
@@ -45,7 +45,7 @@ function Guide()
this.toggle = function()
{
this.show_extras = this.show_extras ? false : true;
this.refresh()
this.update()
}
this.resize = function(size)
@@ -56,7 +56,7 @@ function Guide()
this.el.style.width = (size.width+offset)+"px";
this.el.style.height = (size.height+(offset*2))+"px";
this.refresh();
this.update();
}
this.draw_handles = function()

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

@@ -85,7 +85,7 @@ function Interface()
{
if(!dotgrid.tool[type]){ console.warn(`Unknown option(type): ${type}.${name}`,dotgrid.tool); return; }
this.refresh(true);
this.update(true);
}
this.down = function(type,name)
@@ -93,7 +93,7 @@ function Interface()
if(!dotgrid.tool[type]){ console.warn(`Unknown option(type): ${type}.${name}`,dotgrid.tool); return; }
dotgrid.tool[type](name)
this.refresh(true);
this.update(true);
}
this.click = function(type,name)
@@ -101,12 +101,12 @@ function Interface()
// if(!dotgrid.tool[type]){ console.warn(`Unknown option(type): ${type}.${name}`,dotgrid.tool); return; }
// dotgrid.tool[type](name)
// this.refresh();
// this.update();
}
this.prev_operation = null;
this.refresh = function(force = false,id)
this.update = function(force = false,id)
{
if(this.prev_operation == dotgrid.cursor.operation && force == false){ return; }

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

@@ -2,22 +2,31 @@
function Theme()
{
let app = this;
let theme = this;
this.el = document.createElement("style");
this.el.type = 'text/css';
this.default = {meta:{}, data: { background: "#222", f_high: "#fff", f_med: "#777", f_low: "#444", f_inv: "#000", b_high: "#000", b_med: "#affec7", b_low: "#000", b_inv: "#affec7" }}
this.active = this.default;
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" }}
}
this.active = this.collection.noir;
this.install = function(host = document.body,callback)
{
host.appendChild(this.el)
this.callback = callback;
}
this.start = function()
{
this.load(localStorage.theme ? localStorage.theme : this.default, this.default);
window.addEventListener('dragover',this.drag_enter);
window.addEventListener('drop', this.drag);
document.head.appendChild(this.el)
this.load(localStorage.theme ? localStorage.theme : this.collection.noir, this.collection.noir);
}
this.load = function(t, fall_back)
this.load = function(t, fall_back = this.collection.noir)
{
let theme = is_json(t) ? JSON.parse(t).data : t.data;
@@ -43,15 +52,38 @@ function Theme()
}`;
this.active = theme;
this.el.textContent = css;
this.el.innerHTML = css;
localStorage.setItem("theme", JSON.stringify({data: theme}));
if(this.callback){
this.callback();
}
}
this.reset = function()
{
this.load(this.default);
this.load(this.collection.noir);
}
// Defaults
this.pale = function()
{
this.load(this.collection.pale)
}
this.noir = function()
{
this.load(this.collection.noir)
}
this.invert = function()
{
this.load(this.active.background == this.collection.noir.data.background ? this.collection.pale : this.collection.noir)
}
// Drag
this.drag_enter = function(e)
{
e.stopPropagation();
@@ -70,19 +102,13 @@ function Theme()
let reader = new FileReader();
reader.onload = function(e){
app.load(e.target.result);
theme.load(e.target.result);
};
reader.readAsText(file);
}
function is_json(text)
{
try{
JSON.parse(text);
return true;
}
catch (error){
return false;
}
}
window.addEventListener('dragover',this.drag_enter);
window.addEventListener('drop', this.drag);
function is_json(text){ try{ JSON.parse(text); return true; } catch (error){ return false; } }
}

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

@@ -39,7 +39,7 @@ function Picker()
if(parts.color){ this.set_color(parts.color); }
if(parts.size){ this.set_size(parts.size); }
dotgrid.guide.refresh();
dotgrid.guide.update();
try{ dotgrid.controller.set(); }
catch(err){ }
@@ -48,7 +48,7 @@ function Picker()
this.el.blur()
this.el.value = ""
setTimeout(() => { dotgrid.interface.refresh(true); }, 500)
setTimeout(() => { dotgrid.interface.update(true); }, 500)
}
this.set_color = function(color)
@@ -67,7 +67,7 @@ function Picker()
if(!this.original){ return; }
dotgrid.tool.style().color = this.original;
dotgrid.tool.style().fill = dotgrid.tool.style().fill != "none" ? this.original : "none";
dotgrid.guide.refresh();
dotgrid.guide.update();
}
this.update = function()
@@ -77,7 +77,7 @@ function Picker()
dotgrid.tool.style().color = parts.color;
dotgrid.tool.style().fill = dotgrid.tool.style().fill != "none" ? parts.color : "none";
dotgrid.guide.refresh();
dotgrid.guide.update();
}
this.listen = function(e)

8
desktop/sources/scripts/renderer.js
View File

@@ -17,7 +17,7 @@ function Renderer()
this.svg_el.appendChild(this.layer_2);
this.svg_el.appendChild(this.layer_1);
this.refresh = function()
this.update = function()
{
this.svg_el.setAttribute("width",(dotgrid.tool.settings.size.width-(5))+"px");
this.svg_el.setAttribute("height",(dotgrid.tool.settings.size.height+(10))+"px");
@@ -54,7 +54,7 @@ function Renderer()
{
if(!dialog){ return this.to_png_web(size); }
this.refresh();
this.update();
let xml = new XMLSerializer().serializeToString(this.svg_el);
let svg64 = btoa(xml);
@@ -85,7 +85,7 @@ function Renderer()
this.to_png_web = function(size)
{
if(dotgrid.tool.length() < 1){ console.warn('Nothing to render'); return; }
this.refresh();
this.update();
let xml = new XMLSerializer().serializeToString(this.svg_el);
let svg64 = btoa(xml);
@@ -110,7 +110,7 @@ function Renderer()
this.to_svg = function()
{
this.refresh();
this.update();
return this.svg_el.outerHTML;
}

46
desktop/sources/scripts/tool.js
View File

@@ -30,22 +30,22 @@ function Tool()
this.clear = function()
{
this.vertices = [];
dotgrid.guide.refresh();
dotgrid.interface.refresh(true);
dotgrid.guide.update();
dotgrid.interface.update(true);
}
this.undo = function()
{
this.layers = dotgrid.history.prev();
dotgrid.guide.refresh();
dotgrid.interface.refresh(true);
dotgrid.guide.update();
dotgrid.interface.update(true);
}
this.redo = function()
{
this.layers = dotgrid.history.next();
dotgrid.guide.refresh();
dotgrid.interface.refresh(true);
dotgrid.guide.update();
dotgrid.interface.update(true);
}
this.length = function()
@@ -65,8 +65,8 @@ function Tool()
this.layers[this.index] = this.layers[this.index].concat(layer)
dotgrid.history.push(this.layers);
this.clear();
dotgrid.guide.refresh();
dotgrid.interface.refresh(true);
dotgrid.guide.update();
dotgrid.interface.update(true);
}
this.replace = function(dot)
@@ -85,8 +85,8 @@ function Tool()
this.settings = dot.settings;
this.clear();
dotgrid.guide.refresh();
dotgrid.interface.refresh(true);
dotgrid.guide.update();
dotgrid.interface.update(true);
dotgrid.history.push(this.layers);
}
@@ -98,8 +98,8 @@ function Tool()
this.layer().pop();
this.clear();
dotgrid.guide.refresh();
dotgrid.interface.refresh(true);
dotgrid.guide.update();
dotgrid.interface.update(true);
}
this.remove_segments_at = function(pos)
@@ -117,15 +117,15 @@ function Tool()
}
}
this.clear();
dotgrid.guide.refresh();
dotgrid.interface.refresh(true);
dotgrid.guide.update();
dotgrid.interface.update(true);
}
this.add_vertex = function(pos)
{
pos = {x:Math.abs(pos.x),y:Math.abs(pos.y)}
this.vertices.push(pos);
dotgrid.interface.refresh(true);
dotgrid.interface.update(true);
}
this.vertex_at = function(pos)
@@ -159,8 +159,8 @@ function Tool()
dotgrid.history.push(this.layers);
this.clear();
dotgrid.guide.refresh();
dotgrid.interface.refresh(true);
dotgrid.guide.update();
dotgrid.interface.update(true);
console.log(`Casted ${type} -> ${this.layer().length} elements`);
}
@@ -191,8 +191,8 @@ function Tool()
else{
console.warn("Unknown",type)
}
dotgrid.interface.refresh(true);
dotgrid.guide.refresh();
dotgrid.interface.update(true);
dotgrid.guide.update();
}
this.misc = function(type)
@@ -270,7 +270,7 @@ function Tool()
}
dotgrid.history.push(this.layers);
this.clear();
dotgrid.guide.refresh();
dotgrid.guide.update();
}
this.translate_multi = function(a,b)
@@ -286,7 +286,7 @@ function Tool()
}
dotgrid.history.push(this.layers);
this.clear();
dotgrid.guide.refresh();
dotgrid.guide.update();
}
// Style
@@ -313,8 +313,8 @@ function Tool()
{
this.index = clamp(id,0,2);
this.clear();
dotgrid.guide.refresh();
dotgrid.interface.refresh(true);
dotgrid.guide.update();
dotgrid.interface.update(true);
console.log(`layer:${this.index}`)
}