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

Minor cleanup

Browse Source
This commit is contained in:
Devine Lu Linvega 2018-03-07 16:08:34 +13:00
parent c8fa730db9
commit 9721cdd49d
4 changed files with 65 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
desktop/sources/index.html
View File

@ -4,14 +4,15 @@
<script type="text/javascript" src="scripts/lib/controller.js"></script>
<script type="text/javascript" src="scripts/lib/history.js"></script>
<script type="text/javascript" src="scripts/pos.js"></script>
<script type="text/javascript" src="scripts/dotgrid.js"></script>
<script type="text/javascript" src="scripts/guide.js"></script>
<script type="text/javascript" src="scripts/render.js"></script>
<script type="text/javascript" src="scripts/interface.js"></script>
<script type="text/javascript" src="scripts/tool.js"></script>
<script type="text/javascript" src="scripts/keyboard.js"></script>
<script type="text/javascript" src="scripts/picker.js"></script>
<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"/>
@ -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();
</script>

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

@ -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};
}
}

47
desktop/sources/scripts/pos.js
View File

@ -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;

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

@ -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)