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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
desktop/sources/index.html
View File

@ -21,6 +21,7 @@
<link rel="stylesheet" type="text/css" href="links/reset.css"/>
<link rel="stylesheet" type="text/css" href="links/fonts.css"/>
<link rel="stylesheet" type="text/css" href="links/main.css"/>
<link rel="stylesheet" type="text/css" href="links/theme.css"/>
<title>Dotgrid(Icon)</title>
</head>
<body>
@ -47,14 +48,6 @@
dotgrid.controller.add("default","File","Render(.png)",() => { dotgrid.render(); },"CmdOrCtrl+R");
dotgrid.controller.add("default","File","Export(.svg)",() => { dotgrid.export(); },"CmdOrCtrl+E");
dotgrid.controller.add("default","Edit","Copy",() => { document.execCommand('copy'); },"CmdOrCtrl+C");
dotgrid.controller.add("default","Edit","Cut",() => { document.execCommand('cut'); },"CmdOrCtrl+X");
dotgrid.controller.add("default","Edit","Paste",() => { document.execCommand('paste'); },"CmdOrCtrl+V");
dotgrid.controller.add("default","Edit","Undo",() => { dotgrid.tool.undo(); },"CmdOrCtrl+Z");
dotgrid.controller.add("default","Edit","Redo",() => { dotgrid.tool.redo(); },"CmdOrCtrl+Shift+Z");
dotgrid.controller.add("default","Edit","Delete",() => { dotgrid.tool.remove_segment(); },"Backspace");
dotgrid.controller.add("default","Edit","Deselect",() => { dotgrid.tool.clear(); },"Esc");
dotgrid.controller.add("default","Stroke","Line",() => { dotgrid.tool.cast("line"); },"A");
dotgrid.controller.add("default","Stroke","Arc",() => { dotgrid.tool.cast("arc_c"); },"S"); // 0,1
dotgrid.controller.add("default","Stroke","Arc Rev",() => { dotgrid.tool.cast("arc_r")},"D"); // 0,0
@ -71,12 +64,13 @@
dotgrid.controller.add("default","Effect","Thicker +5",() => { dotgrid.tool.toggle("thickness",5) },"]");
dotgrid.controller.add("default","Effect","Thinner -5",() => { dotgrid.tool.toggle("thickness",-5) },"[");
dotgrid.controller.add("default","Manual","Add Point",() => { dotgrid.tool.add_vertex(dotgrid.cursor.pos); dotgrid.guide.refresh() },"Enter");
dotgrid.controller.add("default","Manual","Move Up",() => { dotgrid.cursor.pos.y -= 15; dotgrid.guide.refresh() },"Up");
dotgrid.controller.add("default","Manual","Move Right",() => { dotgrid.cursor.pos.x -= 15; dotgrid.guide.refresh() },"Right");
dotgrid.controller.add("default","Manual","Move Down",() => { dotgrid.cursor.pos.y += 15; dotgrid.guide.refresh() },"Down");
dotgrid.controller.add("default","Manual","Move Left",() => { dotgrid.cursor.pos.x += 15; dotgrid.guide.refresh() },"Left");
dotgrid.controller.add("default","Manual","Remove Point",() => { dotgrid.tool.remove_segments_at(dotgrid.cursor.pos); },"CmdOrCtrl+Backspace");
dotgrid.controller.add("default","Manual","Add Point",() => { dotgrid.tool.add_vertex(dotgrid.cursor.pos); dotgrid.guide.update() },"Enter");
dotgrid.controller.add("default","Manual","Move Up",() => { dotgrid.cursor.pos.y -= 15; dotgrid.guide.update() },"Up");
dotgrid.controller.add("default","Manual","Move Right",() => { dotgrid.cursor.pos.x += 15; dotgrid.guide.update() },"Right");
dotgrid.controller.add("default","Manual","Move Down",() => { dotgrid.cursor.pos.y += 15; dotgrid.guide.update() },"Down");
dotgrid.controller.add("default","Manual","Move Left",() => { dotgrid.cursor.pos.x -= 15; dotgrid.guide.update() },"Left");
dotgrid.controller.add("default","Manual","Remove Point",() => { dotgrid.tool.remove_segments_at(dotgrid.cursor.pos); },"Shift+Backspace");
dotgrid.controller.add("default","Manual","Remove Segment",() => { dotgrid.tool.remove_segment(); },"Backspace");
dotgrid.controller.add("default","Layers","Foreground",() => { dotgrid.tool.select_layer(0) },"CmdOrCtrl+1");
dotgrid.controller.add("default","Layers","Middleground",() => { dotgrid.tool.select_layer(1) },"CmdOrCtrl+2");
@ -85,6 +79,11 @@
dotgrid.controller.add("default","View","Tools",() => { dotgrid.interface.toggle(); },"U");
dotgrid.controller.add("default","View","Grid",() => { dotgrid.guide.toggle(); },"H");
dotgrid.controller.add("default","Theme","Noir",() => { dotgrid.theme.noir(); },"CmdOrCtrl+Shift+1");
dotgrid.controller.add("default","Theme","Pale",() => { dotgrid.theme.pale(); },"CmdOrCtrl+Shift+2");
dotgrid.controller.add("default","Theme","Invert",() => { dotgrid.theme.invert(); },"CmdOrCtrl+Shift+I");
dotgrid.controller.add("default","Theme","Install",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Themes'); });
dotgrid.controller.add("picker","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,");
dotgrid.controller.add("picker","*","Fullscreen",() => { app.toggle_fullscreen(); },"CmdOrCtrl+Enter");
dotgrid.controller.add("picker","*","Hide",() => { app.toggle_visible(); },"CmdOrCtrl+H");
@ -106,6 +105,7 @@
dotgrid.controller.commit();
dotgrid.install();
dotgrid.start();
</script>
</div>
</body>

23
desktop/sources/links/main.css
View File

@ -13,33 +13,20 @@ body { padding: 0px; font-family: 'input_mono_regular'; -webkit-user-select: non
#interface.hidden { bottom:10px;opacity: 0 }
#interface.visible { bottom:20px; opacity: 1 }
#interface #menu { opacity: 1; position: absolute; top:0px; transition: all 250ms; z-index: 900; overflow: hidden; height:30px; width:100%;}
#interface #menu svg.icon { width:30px; height:30px; margin-right:-9px; opacity: 0.7 }
#interface #menu svg.icon { width:30px; height:30px; margin-right:-9px; opacity: 0.6 }
#interface #menu svg.icon.inactive { opacity: 0.2 }
#interface #menu svg.icon:hover { cursor: pointer; opacity: 1.0 }
#interface #menu svg.icon:last-child { margin-right: 0; }
#interface #menu svg.icon path { fill:none; stroke-linecap: round; stroke-linejoin: round; stroke-width:12px; }
#interface #menu svg.icon.source { float:right; margin-left:-2px; margin-right:0px; }
#interface #menu svg.icon#option_color { opacity: 1.0 }
#interface #menu svg.icon#option_color:hover { opacity: 0.8 }
#interface #picker { background:red; position: absolute; line-height: 30px; z-index: 0; width:250px; top:5px; opacity: 0; transition: all 250ms; padding-left:2.5px;}
#interface #color_path { transition: all 500ms; fill:red; }
#interface.picker #menu { opacity: 0; top:-5px; z-index: 0 }
#interface.picker #picker { opacity: 1; top:0px; z-index: 900 }
#app.web #interface #menu #option_open { display: none; }
/* Web Specific */
/* Theme Overrides */
:root { --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"; }
body { background:var(--background) !important; }
#picker { background:var(--background) !important; color:var(--f_high) !important; }
.fh { color:var(--f_high) !important; stroke:var(--f_high) !important; }
.fm { color:var(--f_med) !important ; stroke:var(--f_med) !important; }
.fl { color:var(--f_low) !important ; stroke:var(--f_low) !important; }
.f_inv { color:var(--f_inv) !important ; stroke:var(--f_inv) !important; }
.f_inv { color:var(--f_inv) !important ; stroke:var(--f_inv) !important; }
.bh { background:var(--b_high) !important; }
.bm { background:var(--b_med) !important ; }
.bl { background:var(--b_low) !important ; }
.b_inv { background:var(--b_inv) !important ; ; }
.icon { color:var(--f_high) !important; stroke:var(--f_high) !important; }
#app.web #interface #menu #option_open { display: none; }

12
desktop/sources/links/theme.css Normal file
View File

@ -0,0 +1,12 @@
body { background:var(--background) !important; }
#picker { background:var(--background) !important; color:var(--f_high) !important; }
.fh { color:var(--f_high) !important; stroke:var(--f_high) !important; }
.fm { color:var(--f_med) !important ; stroke:var(--f_med) !important; }
.fl { color:var(--f_low) !important ; stroke:var(--f_low) !important; }
.f_inv { color:var(--f_inv) !important ; stroke:var(--f_inv) !important; }
.f_inv { color:var(--f_inv) !important ; stroke:var(--f_inv) !important; }
.bh { background:var(--b_high) !important; }
.bm { background:var(--b_med) !important ; }
.bl { background:var(--b_low) !important ; }
.b_inv { background:var(--b_inv) !important ; ; }
.icon { color:var(--f_high) !important; stroke:var(--f_high) !important; }

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}`)
}

2
index.html
View File

@ -23,6 +23,7 @@
<link rel="stylesheet" type="text/css" href="desktop/sources/links/reset.css"/>
<link rel="stylesheet" type="text/css" href="desktop/sources/links/fonts.css"/>
<link rel="stylesheet" type="text/css" href="desktop/sources/links/main.css"/>
<link rel="stylesheet" type="text/css" href="desktop/sources/links/theme.css"/>
<title>Dotgrid(Icon)</title>
</head>
<body>
@ -31,6 +32,7 @@
let dialog = null;
dotgrid = new Dotgrid(300,300,20,20,4,4);
dotgrid.install();
dotgrid.start();
document.getElementById("app").className = "web";
</script>
</div>

2
web/events.js
View File

@ -31,4 +31,6 @@ document.onkeyup = (e) =>
if(ch == "{"){ dotgrid.tool.toggle("thickness",-1); e.preventDefault(); }
if(ch == "]"){ dotgrid.tool.toggle("thickness",5); e.preventDefault(); }
if(ch == "["){ dotgrid.tool.toggle("thickness",-5); e.preventDefault(); }
if(ch == "i"){ dotgrid.theme.invert(); e.preventDefault(); }
}