diff --git a/desktop/sources/index.html b/desktop/sources/index.html
index 4c715cd..3dc3481 100644
--- a/desktop/sources/index.html
+++ b/desktop/sources/index.html
@@ -4,14 +4,15 @@
-
+
+
@@ -23,7 +24,7 @@
const {dialog,app} = require('electron').remote;
const fs = require('fs');
- dotgrid = new Dotgrid(300,300,20,20,4,4, 10,"square","#000000");
+ dotgrid = new Dotgrid(300,300,20,20,4,4);
dotgrid.install();
diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js
index bf9aa34..0915597 100644
--- a/desktop/sources/scripts/dotgrid.js
+++ b/desktop/sources/scripts/dotgrid.js
@@ -1,4 +1,4 @@
-function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000")
+function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
{
this.controller = new Controller();
this.theme = new Theme();
@@ -17,9 +17,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000")
this.block_x = block_x;
this.block_y = block_y;
- this.color = color;
- this.offset = new Pos(0,0);
-
// Dotgrid
this.element = document.createElement("div");
this.element.id = "dotgrid";
@@ -80,7 +77,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000")
this.svg_el.style.width = this.width;
this.svg_el.style.height = this.height;
- this.svg_el.style.stroke = this.color;
this.svg_el.style.fill = "none";
this.svg_el.style.strokeWidth = this.tool.style().thickness;
this.element.appendChild(this.svg_el);
@@ -267,7 +263,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000")
this.mouse_down = function(e)
{
- var pos = this.position_in_grid(new Pos(e.clientX+5,e.clientY-5)); pos = this.position_on_grid(pos);
+ var pos = this.position_in_grid({x:e.clientX+5,y:e.clientY-5}); pos = this.position_on_grid(pos);
if(e.altKey){ dotgrid.tool.remove_segments_at(pos); return; }
if(dotgrid.tool.vertex_at(pos)){ console.log("Begin translation"); dotgrid.translation = {from:pos,to:pos}; return; }
@@ -286,14 +282,14 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000")
if(o == "linejoin"){ this.mod_linejoin(); }
if(o == "mirror"){ this.mod_mirror(); }
if(o == "color"){ setTimeout(()=>{ this.picker.start(); }, 100) }
- if(o == "depth"){ this.toggle_layer(); }
+ if(o == "depth"){ this.tool.select_next_layer(); }
e.preventDefault();
}
this.mouse_move = function(e)
{
- var pos = this.position_in_grid(new Pos(e.clientX+5,e.clientY-5)); pos = this.position_on_grid(pos);
+ var pos = this.position_in_grid({x:e.clientX+5,y:e.clientY-5}); pos = this.position_on_grid(pos);
if(dotgrid.translation && (Math.abs(dotgrid.translation.from.x) != Math.abs(pos.x) || Math.abs(dotgrid.translation.from.y) != Math.abs(pos.y))){ dotgrid.translation.to = pos; }
@@ -305,7 +301,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000")
this.mouse_up = function(e)
{
- var pos = this.position_in_grid(new Pos(e.clientX+5,e.clientY-5)); pos = this.position_on_grid(pos);
+ var pos = this.position_in_grid({x:e.clientX+5,y:e.clientY-5}); pos = this.position_on_grid(pos);
if(e.altKey){ return; }
@@ -327,7 +323,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000")
this.mouse_alt = function(e)
{
- var pos = this.position_in_grid(new Pos(e.clientX+5,e.clientY-5)); pos = this.position_on_grid(pos);
+ var pos = this.position_in_grid({x:e.clientX+5,y:e.clientY-5}); pos = this.position_on_grid(pos);
dotgrid.tool.remove_segments_at(pos);
e.preventDefault();
setTimeout(() => { dotgrid.tool.clear(); },150);
@@ -409,13 +405,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000")
this.draw();
}
- this.toggle_layer = function()
- {
- var index = this.tool.index;
- index = index >= 2 ? 0 : index+1;
- this.tool.select_layer(index);
- }
-
this.set_size = function(size = {width:300,height:300},interface = true)
{
var win = require('electron').remote.getCurrentWindow();
@@ -523,7 +512,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000")
this.history.clear();
this.tool.reset();
this.reset();
- this.color = "#000000"
this.draw();
}
@@ -589,7 +577,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000")
this.position_in_grid = function(pos)
{
- return new Pos((window.innerWidth/2) - (this.width/2) - pos.x,pos.y - (30+10))
+ return {x:(window.innerWidth/2) - (this.width/2) - pos.x,y:pos.y - (30+10)}
}
this.position_on_grid = function(pos)
@@ -603,7 +591,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000")
x = 50
y = -50
}
- return new Pos(x,y);
+ return {x:x,y:y};
}
}
diff --git a/desktop/sources/scripts/pos.js b/desktop/sources/scripts/pos.js
deleted file mode 100644
index dfaaa79..0000000
--- a/desktop/sources/scripts/pos.js
+++ /dev/null
@@ -1,47 +0,0 @@
-function Pos(x,y)
-{
- this.__serialized_name__ = ".";
- this.x = x;
- this.y = y;
-
- this.toString = function()
- {
- return x+","+y;
- }
-
- this.sub = function(pos2)
- {
- return new Pos(this.x - pos2.x,this.y - pos2.y)
- }
-
- this.add = function(pos2)
- {
- return new Pos(this.x + pos2.x,this.y + pos2.y)
- }
-
- this.is_equal = function(pos2)
- {
- return Math.abs(pos2.x) == Math.abs(this.x) && Math.abs(pos2.y) == Math.abs(this.y);
- }
-
- this.scale = function(a)
- {
- return new Pos(this.x*a,this.y*a)
- }
-
- this.mirror = function(x = -1,y = 1)
- {
- return new Pos(this.x * x,this.y * y);
- }
-
- this.clamp = function(min,max)
- {
- return new Pos(clamp(this.x,min,max),clamp(this.y,min,max));
- }
-
- function clamp(v, min, max) { return v < min ? min : v > max ? max : v; }
-}
-
-// This is ugly, but Pos.__serialized_name__ == ".";
-// Let's keep the character count low.
-window["."] = Pos;
\ No newline at end of file
diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js
index 6b79008..770c146 100644
--- a/desktop/sources/scripts/tool.js
+++ b/desktop/sources/scripts/tool.js
@@ -24,22 +24,53 @@ function Tool()
this.index = 0;
}
- this.style = function()
+ this.clear = function()
{
- if(!this.styles[this.index]){
- this.styles[this.index] = [];
- }
- return this.styles[this.index];
+ this.verteces = [];
+ dotgrid.preview();
+ dotgrid.draw();
}
- this.layer = function()
+ this.undo = function()
{
- if(!this.layers[this.index]){
- this.layers[this.index] = [];
- }
- return this.layers[this.index];
+ this.layers = dotgrid.history.prev();
+ dotgrid.draw();
}
+ this.redo = function()
+ {
+ this.layers = dotgrid.history.next();
+ dotgrid.draw();
+ }
+
+ // I/O
+
+ this.export = function(target = {layers:this.layers,styles:this.styles})
+ {
+ return JSON.stringify(copy(target), null, 2);
+ }
+
+ this.import = function(layer)
+ {
+ this.layers[this.index] = this.layers[this.index].concat(layer)
+ dotgrid.history.push(this.layers);
+ this.clear();
+ dotgrid.draw();
+ }
+
+ this.replace = function(dot)
+ {
+ if(!dot.layers || dot.layers.length != 3){ console.log("Incompatible version"); return; }
+
+ this.layers = dot.layers;
+ this.styles = dot.styles;
+ this.clear();
+ dotgrid.draw();
+ dotgrid.history.push(this.layers);
+ }
+
+ // EDIT
+
this.remove_segment = function()
{
if(this.verteces.length > 0){ this.clear(); return; }
@@ -198,47 +229,24 @@ function Tool()
dotgrid.draw();
}
- this.clear = function()
+ // Style
+
+ this.style = function()
{
- this.verteces = [];
- dotgrid.preview();
- dotgrid.draw();
+ if(!this.styles[this.index]){
+ this.styles[this.index] = [];
+ }
+ return this.styles[this.index];
}
- this.undo = function()
- {
- this.layers = dotgrid.history.prev();
- dotgrid.draw();
- }
+ // Layers
- this.redo = function()
+ this.layer = function()
{
- this.layers = dotgrid.history.next();
- dotgrid.draw();
- }
-
- this.export = function(target = {layers:this.layers,styles:this.styles})
- {
- return JSON.stringify(copy(target), null, 2);
- }
-
- this.replace = function(dot)
- {
- if(!dot.layers || dot.layers.length != 3){ console.log("Incompatible version"); return; }
-
- this.layers = dot.layers;
- this.styles = dot.styles;
- this.clear();
- dotgrid.draw();
- dotgrid.history.push(this.layers);
- }
-
- this.import = function(layer)
- {
- this.layers[this.index] = this.layers[this.index].concat(layer)
- dotgrid.history.push(this.layers);
- this.clear();
- dotgrid.draw();
+ if(!this.layers[this.index]){
+ this.layers[this.index] = [];
+ }
+ return this.layers[this.index];
}
this.select_layer = function(id)