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

Improving export code

Browse Source
This commit is contained in:
Devine Lu Linvega 2018-05-11 08:46:50 +12:00
parent 20a7adfc91
commit 6bb3f9d965
5 changed files with 104 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,35 +14,11 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
this.block_x = block_x;
this.block_y = block_y;
this.svg_el = null;
this.layer_1 = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.layer_1.id = "layer_1"; this.layer_1.style.stroke = "black";
this.layer_2 = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.layer_2.id = "layer_2"; this.layer_2.style.stroke = "#999";
this.layer_3 = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.layer_3.id = "layer_3"; this.layer_3.style.stroke = "#ccc";
this.cursor = { pos:{x:0,y:0},translation:null,multi:false,updated:0 }
this.install = function()
{
document.getElementById("app").appendChild(this.guide.el);
// Vector
this.svg_el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
this.svg_el.id = "vector"
this.svg_el.setAttribute("class","vector");
this.svg_el.setAttribute("width",this.tool.settings.size.width+"px");
this.svg_el.setAttribute("height",this.tool.settings.size.height+"px");
this.svg_el.setAttribute("xmlns","http://www.w3.org/2000/svg");
this.svg_el.setAttribute("baseProfile","full");
this.svg_el.setAttribute("version","1.1");
this.svg_el.style.width = this.tool.settings.size.width;
this.svg_el.style.height = this.tool.settings.size.height;
this.svg_el.style.fill = "none";
this.svg_el.style.strokeWidth = this.tool.style().thickness;
this.svg_el.appendChild(this.layer_3);
this.svg_el.appendChild(this.layer_2);
this.svg_el.appendChild(this.layer_1);
this.theme.start();
this.tool.start();
@ -85,11 +61,11 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
this.controller.add("default","Effect","Thicker +5",() => { dotgrid.mod_thickness(5,true) },"]");
this.controller.add("default","Effect","Thinner -5",() => { dotgrid.mod_thickness(-5,true) },"[");
this.controller.add("default","Manual","Add Point",() => { dotgrid.tool.add_vertex(dotgrid.cursor.pos); dotgrid.draw() },"Enter");
this.controller.add("default","Manual","Move Up",() => { dotgrid.cursor.pos.y -= 15; dotgrid.draw() },"Up");
this.controller.add("default","Manual","Move Right",() => { dotgrid.cursor.pos.x -= 15; dotgrid.draw() },"Right");
this.controller.add("default","Manual","Move Down",() => { dotgrid.cursor.pos.y += 15; dotgrid.draw() },"Down");
this.controller.add("default","Manual","Move Left",() => { dotgrid.cursor.pos.x += 15; dotgrid.draw() },"Left");
this.controller.add("default","Manual","Add Point",() => { dotgrid.tool.add_vertex(dotgrid.cursor.pos); dotgrid.guide.refresh() },"Enter");
this.controller.add("default","Manual","Move Up",() => { dotgrid.cursor.pos.y -= 15; dotgrid.guide.refresh() },"Up");
this.controller.add("default","Manual","Move Right",() => { dotgrid.cursor.pos.x -= 15; dotgrid.guide.refresh() },"Right");
this.controller.add("default","Manual","Move Down",() => { dotgrid.cursor.pos.y += 15; dotgrid.guide.refresh() },"Down");
this.controller.add("default","Manual","Move Left",() => { dotgrid.cursor.pos.x += 15; dotgrid.guide.refresh() },"Left");
this.controller.add("default","Manual","Remove Point",() => { dotgrid.tool.remove_segments_at(dotgrid.cursor.pos); },"CmdOrCtrl+Backspace");
this.controller.add("default","Layers","Foreground",() => { dotgrid.tool.select_layer(0) },"CmdOrCtrl+1");
@ -146,16 +122,14 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
this.save = function()
{
this.draw();
var svg = dotgrid.svg_el.outerHTML;
dotgrid.guide.refresh();
dialog.showSaveDialog((fileName) => {
if (fileName === undefined){ return; }
fs.writeFile(fileName+".svg", svg);
fs.writeFile(fileName+".svg", dotgrid.render.to_svg());
fs.writeFile(fileName+'.png', dotgrid.render.buffer());
fs.writeFile(fileName+'.grid', dotgrid.tool.export());
dotgrid.draw()
dotgrid.guide.refresh()
});
}
@ -168,7 +142,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; }
dotgrid.tool.replace(JSON.parse(data.toString().trim()));
dotgrid.draw();
dotgrid.guide.refresh();
});
}
@ -241,14 +215,14 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
}
dotgrid.cursor.translation = null;
dotgrid.cursor.multi = null;
this.draw();
dotgrid.guide.refresh();
e.preventDefault();
return;
}
this.tool.add_vertex({x:pos.x * -1,y:pos.y});
dotgrid.cursor.translation = null;
this.draw();
dotgrid.guide.refresh();
e.preventDefault();
}
@ -272,7 +246,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
}
this.tool.style().thickness = Math.max(this.tool.style().thickness+mod,0);
this.draw();
dotgrid.guide.refresh();
}
this.mod_linecap_index = 1;
@ -282,7 +256,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
var a = ["butt","square","round"];
this.mod_linecap_index += 1;
this.tool.style().strokeLinecap = a[this.mod_linecap_index % a.length];
this.draw();
dotgrid.guide.refresh();
}
this.mod_linejoin_index = 1;
@ -292,20 +266,20 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
var a = ["miter","round","bevel"];
this.mod_linejoin_index += 1;
this.tool.style().strokeLinejoin = a[this.mod_linejoin_index % a.length];
this.draw();
dotgrid.guide.refresh();
}
this.mod_mirror = function()
{
this.tool.style().mirror_style += 1;
this.tool.style().mirror_style = this.tool.style().mirror_style > 7 ? 0 : this.tool.style().mirror_style;
this.draw();
dotgrid.guide.refresh();
}
this.mod_fill = function()
{
this.tool.style().fill = this.tool.style().fill == "none" ? this.tool.style().color : "none";
this.draw();
dotgrid.guide.refresh();
}
// Basics
@ -322,50 +296,13 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
this.grid_x = size.width/15
this.grid_y = size.height/15
this.svg_el.setAttribute("width",size.width+"px");
this.svg_el.setAttribute("height",size.height+"px");
this.grid_width = this.tool.settings.size.width/this.grid_x;
this.grid_height = this.tool.settings.size.height/this.grid_y;
dotgrid.guide.resize(size);
this.interface.update();
this.draw();
}
this.draw = function(exp = false)
{
var paths = this.tool.paths();
var d = this.tool.path();
this.layer_1.setAttribute("d",paths[0]);
this.layer_2.setAttribute("d",paths[1]);
this.layer_3.setAttribute("d",paths[2]);
this.svg_el.style.width = this.tool.settings.size.width;
this.svg_el.style.height = this.tool.settings.size.height;
this.layer_1.style.strokeWidth = this.tool.styles[0].thickness;
this.layer_1.style.strokeLinecap = this.tool.styles[0].strokeLinecap;
this.layer_1.style.strokeLinejoin = this.tool.styles[0].strokeLinejoin;
this.layer_1.style.stroke = this.tool.styles[0].color;
this.layer_1.style.fill = this.tool.styles[0].fill;
this.layer_2.style.strokeWidth = this.tool.styles[1].thickness;
this.layer_2.style.strokeLinecap = this.tool.styles[1].strokeLinecap;
this.layer_2.style.strokeLinejoin = this.tool.styles[1].strokeLinejoin;
this.layer_2.style.stroke = this.tool.styles[1].color;
this.layer_2.style.fill = this.tool.styles[1].fill;
this.layer_3.style.strokeWidth = this.tool.styles[2].thickness;
this.layer_3.style.strokeLinecap = this.tool.styles[2].strokeLinecap;
this.layer_3.style.strokeLinejoin = this.tool.styles[2].strokeLinejoin;
this.layer_3.style.stroke = this.tool.styles[2].color;
this.layer_3.style.fill = this.tool.styles[2].fill;
this.render.draw();
this.interface.update();
this.guide.refresh();
dotgrid.guide.refresh();
}
// Draw
@ -380,7 +317,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
this.history.clear();
this.tool.reset();
this.reset();
this.draw();
dotgrid.guide.refresh();
}
this.drag = function(e)
@ -395,38 +332,34 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
var reader = new FileReader();
reader.onload = function(e){
dotgrid.tool.replace(JSON.parse(e.target.result.toString().trim()));
dotgrid.draw();
dotgrid.guide.refresh();
};
reader.readAsText(file);
}
this.copy = function(e)
{
dotgrid.draw();
var svg = dotgrid.svg_el.outerHTML;
dotgrid.guide.refresh();
e.clipboardData.setData('text/source', dotgrid.tool.export(dotgrid.tool.layer()));
e.clipboardData.setData('text/plain', dotgrid.tool.path());
e.clipboardData.setData('text/html', svg);
e.clipboardData.setData('text/svg+xml', svg);
e.clipboardData.setData('text/html', dotgrid.render.to_svg());
e.clipboardData.setData('text/svg+xml', dotgrid.render.to_svg());
this.draw();
dotgrid.guide.refresh();
}
this.cut = function(e)
{
dotgrid.draw();
var svg = dotgrid.svg_el.outerHTML;
dotgrid.guide.refresh();
e.clipboardData.setData('text/plain', dotgrid.tool.export(dotgrid.tool.layer()));
e.clipboardData.setData('text/html', svg);
e.clipboardData.setData('text/svg+xml', svg);
e.clipboardData.setData('text/html', dotgrid.render.to_svg());
e.clipboardData.setData('text/svg+xml', dotgrid.render.to_svg());
dotgrid.tool.layers[dotgrid.tool.index] = [];
this.draw();
dotgrid.guide.refresh();
}
this.paste = function(e)
@ -437,7 +370,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
dotgrid.tool.import(data);
}
this.draw();
dotgrid.guide.refresh();
}
// Normalizers
@ -466,7 +399,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
window.addEventListener('resize', function(e)
{
dotgrid.draw()
dotgrid.guide.refresh()
}, false);
window.addEventListener('dragover',function(e)

3
desktop/sources/scripts/generator.js
View File

@ -36,7 +36,8 @@ function Generator(layer)
if(id == 0){
html += `M${vertex.x},${vertex.y} `
}
else if(type == "line"){
if(type == "line"){
html += `L${vertex.x},${vertex.y} `;
}
else if(type == "arc_c"){

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

@ -32,7 +32,7 @@ function Picker()
if(parts.color){ this.set_color(parts.color); }
if(parts.size){ this.set_size(parts.size); }
dotgrid.draw();
dotgrid.guide.refresh();
dotgrid.controller.set();
dotgrid.interface.el.className = ""
this.el.blur()
@ -55,7 +55,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.draw();
dotgrid.guide.refresh();
}
this.update = function()
@ -65,7 +65,7 @@ function Picker()
dotgrid.tool.style().color = parts.color;
dotgrid.tool.style().fill = dotgrid.tool.style().fill != "none" ? parts.color : "none";
dotgrid.draw();
dotgrid.guide.refresh();
}
this.listen = function(e)

52
desktop/sources/scripts/render.js
View File

@ -24,4 +24,56 @@ function Render()
return buf
}
this.to_svg = function()
{
/*
var svg_el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
this.svg_el.setAttribute("class","vector");
this.svg_el.setAttribute("width",this.tool.settings.size.width+"px");
this.svg_el.setAttribute("height",this.tool.settings.size.height+"px");
this.svg_el.setAttribute("xmlns","http://www.w3.org/2000/svg");
this.svg_el.setAttribute("baseProfile","full");
this.svg_el.setAttribute("version","1.1");
this.layer_1 = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.layer_1.id = "layer_1"; this.layer_1.style.stroke = "black";
this.layer_2 = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.layer_2.id = "layer_2"; this.layer_2.style.stroke = "#999";
this.layer_3 = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.layer_3.id = "layer_3"; this.layer_3.style.stroke = "#ccc";
this.svg_el.setAttribute("width",size.width+"px");
this.svg_el.setAttribute("height",size.height+"px");
this.svg_el.style.width = this.tool.settings.size.width;
this.svg_el.style.height = this.tool.settings.size.height;
this.svg_el.style.fill = "none";
this.svg_el.style.strokeWidth = this.tool.style().thickness;
this.svg_el.appendChild(this.layer_3);
this.svg_el.appendChild(this.layer_2);
this.svg_el.appendChild(this.layer_1);
this.layer_1.style.strokeWidth = this.tool.styles[0].thickness;
this.layer_1.style.strokeLinecap = this.tool.styles[0].strokeLinecap;
this.layer_1.style.strokeLinejoin = this.tool.styles[0].strokeLinejoin;
this.layer_1.style.stroke = this.tool.styles[0].color;
this.layer_1.style.fill = this.tool.styles[0].fill;
this.layer_2.style.strokeWidth = this.tool.styles[1].thickness;
this.layer_2.style.strokeLinecap = this.tool.styles[1].strokeLinecap;
this.layer_2.style.strokeLinejoin = this.tool.styles[1].strokeLinejoin;
this.layer_2.style.stroke = this.tool.styles[1].color;
this.layer_2.style.fill = this.tool.styles[1].fill;
this.layer_3.style.strokeWidth = this.tool.styles[2].thickness;
this.layer_3.style.strokeLinecap = this.tool.styles[2].strokeLinecap;
this.layer_3.style.strokeLinejoin = this.tool.styles[2].strokeLinejoin;
this.layer_3.style.stroke = this.tool.styles[2].color;
this.layer_3.style.fill = this.tool.styles[2].fill;
return svg_el.outerHTML;
*/
return "22"
}
}

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

@ -29,19 +29,19 @@ function Tool()
this.clear = function()
{
this.vertices = [];
dotgrid.draw();
dotgrid.guide.refresh();
}
this.undo = function()
{
this.layers = dotgrid.history.prev();
dotgrid.draw();
dotgrid.guide.refresh();
}
this.redo = function()
{
this.layers = dotgrid.history.next();
dotgrid.draw();
dotgrid.guide.refresh();
}
// I/O
@ -56,7 +56,7 @@ function Tool()
this.layers[this.index] = this.layers[this.index].concat(layer)
dotgrid.history.push(this.layers);
this.clear();
dotgrid.draw();
dotgrid.guide.refresh();
}
this.replace = function(dot)
@ -72,7 +72,7 @@ function Tool()
this.settings = dot.settings;
this.clear();
dotgrid.draw();
dotgrid.guide.refresh();
dotgrid.history.push(this.layers);
}
@ -84,7 +84,7 @@ function Tool()
this.layer().pop();
this.clear();
dotgrid.draw();
dotgrid.guide.refresh();
}
this.remove_segments_at = function(pos)
@ -102,7 +102,7 @@ function Tool()
}
}
this.clear();
dotgrid.draw();
dotgrid.guide.refresh();
}
this.add_vertex = function(pos)
@ -140,7 +140,7 @@ function Tool()
}
this.clear();
dotgrid.draw();
dotgrid.guide.refresh();
dotgrid.history.push(this.layers);
console.log(`Casted ${type} -> ${this.layer().length} elements`);
@ -177,132 +177,18 @@ function Tool()
return this.vertices.length >= this.reqs[type];
}
this.path = function(layer_id = 0, preview = null)
{
var layer = preview ? preview : this.layers[layer_id];
var html = "";
for(id in layer){
var segment = layer[id];
html += segment.type == "close" ? "Z " : this.render(segment,0);
// Horizontal Mirror
if(this.styles[layer_id].mirror_style == 1){
html += segment.type == "close" ? "Z " : this.render(segment,0,true,false);
}
// Vertical Mirror
if(this.styles[layer_id].mirror_style == 2){
html += segment.type == "close" ? "Z " : this.render(segment,0,false,true);
}
// Single-fold
if(this.styles[layer_id].mirror_style == 3){
html += segment.type == "close" ? "Z " : this.render(segment,180,false,false);
}
// Three-fold
if(this.styles[layer_id].mirror_style == 4){
html += segment.type == "close" ? "Z " : this.render(segment,120,false,false);
html += segment.type == "close" ? "Z " : this.render(segment,240,false,false);
}
// Four-fold
if(this.styles[layer_id].mirror_style == 5){
html += segment.type == "close" ? "Z " : this.render(segment,90,false,false);
html += segment.type == "close" ? "Z " : this.render(segment,180,false,false);
html += segment.type == "close" ? "Z " : this.render(segment,270,false,false);
}
// Five-folds
if(this.styles[layer_id].mirror_style == 6){
html += segment.type == "close" ? "Z " : this.render(segment,72,false,false);
html += segment.type == "close" ? "Z " : this.render(segment,72*2,false,false);
html += segment.type == "close" ? "Z " : this.render(segment,72*3,false,false);
html += segment.type == "close" ? "Z " : this.render(segment,72*4,false,false);
}
// Six-folds
if(this.styles[layer_id].mirror_style == 7){
html += segment.type == "close" ? "Z " : this.render(segment,60,false,false);
html += segment.type == "close" ? "Z " : this.render(segment,60*2,false,false);
html += segment.type == "close" ? "Z " : this.render(segment,60*3,false,false);
html += segment.type == "close" ? "Z " : this.render(segment,60*4,false,false);
html += segment.type == "close" ? "Z " : this.render(segment,60*5,false,false);
}
}
return html
}
this.paths = function()
{
return [this.path(0),this.path(1),this.path(2)]
var l1 = new Generator(dotgrid.tool.layers[0]).toString({x:0,y:0},1)
var l2 = new Generator(dotgrid.tool.layers[0]).toString({x:0,y:0},1)
var l3 = new Generator(dotgrid.tool.layers[0]).toString({x:0,y:0},1)
return [l1,l2,l3]
}
this.paths_mod = function(offset,scale) // Returns modded paths
this.path = function()
{
var a = []
var layers = copy(this.layers)
for(id in layers){
var layer = layers[id];
for(k1 in layer){
var seg = layer[k1];
for(k2 in seg.vertices){
seg.vertices[k2].x += offset.x
seg.vertices[k2].x *= scale
seg.vertices[k2].y += offset.y
seg.vertices[k2].y *= scale
}
}
a.push(this.path(id,layer))
}
return a
}
this.render = function(segment, angle = 0, mirror_x = false, mirror_y = false)
{
var type = segment.type;
var vertices = segment.vertices;
var html = ``;
var skip = 0;
for(id in vertices){
if(skip > 0){ skip -= 1; continue; }
var vertex = this.mirror_mod(vertices[id],angle,mirror_x,mirror_y);
var next = this.mirror_mod(vertices[parseInt(id)+1],angle,mirror_x,mirror_y)
var after_next = this.mirror_mod(vertices[parseInt(id)+2],angle,mirror_x,mirror_y)
if(id == 0){
html += `M${vertex.x},${vertex.y} `;
}
if(type == "line"){
html += `L${vertex.x},${vertex.y} `;
}
else if(type == "arc_c" && next){
html += `A${next.x - vertex.x},${next.y - vertex.y} 0 0,1 ${next.x},${next.y} `;
}
else if(type == "arc_r" && next){
html += `A${next.x - vertex.x},${next.y - vertex.y} 0 0,0 ${next.x},${next.y} `;
}
else if(type == "bezier" && next && after_next){
html += `Q${next.x},${next.y} ${after_next.x},${after_next.y} `;
skip = 1
}
}
return html
}
this.mirror_mod = function(vertex,angle = 0,mirror_x = false,mirror_y = false)
{
if(!vertex){ return null; }
if(mirror_x == true){
return {x:(dotgrid.tool.settings.size.width - vertex.x),y:vertex.y}
}
if(mirror_y == true){
return {x:vertex.x,y:(dotgrid.tool.settings.size.height - vertex.y)+(dotgrid.height/2)}
}
if(angle == 0){
return vertex;
}
return rotate_point(vertex.x,vertex.y,dotgrid.tool.settings.size.width/2,dotgrid.tool.settings.size.height/2,angle)
return new Generator(dotgrid.tool.layer()).toString({x:0,y:0},1)
}
this.translate = function(a,b)
@ -318,7 +204,7 @@ function Tool()
}
dotgrid.history.push(this.layers);
this.clear();
dotgrid.draw();
dotgrid.guide.refresh();
}
this.translate_multi = function(a,b)
@ -334,7 +220,7 @@ function Tool()
}
dotgrid.history.push(this.layers);
this.clear();
dotgrid.draw();
dotgrid.guide.refresh();
}
// Style
@ -361,7 +247,7 @@ function Tool()
{
this.index = clamp(id,0,2);
this.clear();
dotgrid.draw();
dotgrid.guide.refresh();
console.log(`layer:${this.index}`)
}