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

Progress on new serialization, and multi vertex edit.(incomplete)

Browse Source
This commit is contained in:
Devine Lu Linvega 2018-02-06 12:39:25 +13:00
parent ba1376e821
commit 7a977cec7a
7 changed files with 106 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
main.js
View File

@ -32,6 +32,7 @@ app.on('ready', () =>
app.win = new BrowserWindow({width: 400, height: 420, minWidth: 400, minHeight: 420, backgroundColor:"#000", frame:false, autoHideMenuBar: true, icon: __dirname + '/icon.ico'})
app.win.loadURL(`file://${__dirname}/sources/index.html`);
app.win.toggleDevTools();
app.win.on('closed', () => {
win = null

2
sources/index.html
View File

@ -14,6 +14,8 @@
<script type="text/javascript" src="scripts/render.js"></script>
<script type="text/javascript" src="scripts/serializer.js"></script>
<script type="text/javascript" src="scripts/interface.js"></script>
<script type="text/javascript" src="scripts/project.js"></script>
<script type="text/javascript" src="scripts/tool.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"/>

21
sources/scripts/dotgrid.js
View File

@ -4,6 +4,11 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.theme = new Theme();
this.interface = new Interface();
this.history = new History();
this.guide = new Guide();
this.render = new Render();
this.serializer = new Serializer();
this.project = new Project();
this.tool = new Tool();
this.width = width;
this.height = height;
@ -41,14 +46,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.svg_el = null;
this.mirror_el = null;
this.mirror = false;
this.fill = false;
this.guide = new Guide();
this.render = new Render();
this.serializer = new Serializer();
this.path = document.createElementNS("http://www.w3.org/2000/svg", "path");
this.segments = [];
this.scale = 1;
@ -150,14 +149,14 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.controller.add("default","Edit","Paste",() => { document.execCommand('paste'); },"CmdOrCtrl+V");
this.controller.add("default","Edit","Undo",() => { dotgrid.undo(); },"CmdOrCtrl+Z");
this.controller.add("default","Edit","Redo",() => { dotgrid.redo(); },"CmdOrCtrl+Shift+Z");
this.controller.add("default","Edit","Delete",() => { dotgrid.delete(); },"Backspace");
this.controller.add("default","Edit","Delete",() => { dotgrid.tool.remove_segment(); },"Backspace");
this.controller.add("default","Edit","Move Up",() => { dotgrid.mod_move(new Pos(0,-15)); },"Up");
this.controller.add("default","Edit","Move Down",() => { dotgrid.mod_move(new Pos(0,15)); },"Down");
this.controller.add("default","Edit","Move Left",() => { dotgrid.mod_move(new Pos(-15,0)); },"Left");
this.controller.add("default","Edit","Move Right",() => { dotgrid.mod_move(new Pos(15,0)); },"Right");
this.controller.add("default","Edit","Deselect",() => { dotgrid.reset(); },"Esc");
this.controller.add("default","Stroke","Line",() => { dotgrid.draw_line(); },"A");
this.controller.add("default","Stroke","Line",() => { dotgrid.tool.cast("line"); },"A");
this.controller.add("default","Stroke","Arc",() => { dotgrid.draw_arc("0,1"); },"S");
this.controller.add("default","Stroke","Arc Rev",() => { dotgrid.draw_arc("0,0"); },"D");
this.controller.add("default","Stroke","Bezier",() => { dotgrid.draw_bezier(); },"F");
@ -358,6 +357,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
dotgrid.reset();
}
// Cursor
this.translation = null;
@ -417,8 +417,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
}
dotgrid.translation = null;
this.add_point(pos);
this.tool.add_vertex({x:pos.x * -1,y:pos.y});
this.draw();
}
@ -622,7 +621,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
prev = segment;
}
this.path.setAttribute("d",d);
this.path.setAttribute("d",this.tool.path());
this.svg_el.style.width = this.width;
this.svg_el.style.height = this.height;

21
sources/scripts/guide.js
View File

@ -68,15 +68,8 @@ function Guide()
{
this.clear();
var handles = [];
for(id in dotgrid.segments){
var segment = dotgrid.segments[id];
handles = handles.concat(segment.handles())
}
for(id in handles){
var handle = handles[id];
this.draw_handle(handle,4);
for(id in dotgrid.tool.verteces){
this.draw_vertex(dotgrid.tool.verteces[id]);
}
// Translations
@ -86,6 +79,16 @@ function Guide()
this.draw();
}
this.draw_vertex = function(pos, radius = 5)
{
var ctx = this.el.getContext('2d');
ctx.beginPath();
ctx.arc((pos.x * 2)+30, (pos.y * 2)+30, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = "red";
ctx.fill();
ctx.closePath();
}
this.draw_marker = function(pos,radius = 1,step)
{
var ctx = this.el.getContext('2d');

31
sources/scripts/interface.js
View File

@ -3,30 +3,33 @@ function Interface()
this.el = document.createElement("div");
this.el.id = "interface";
this.is_visible = true;
this.zoom = false;
this.start = function()
{
document.getElementById("app").appendChild(this.el);
// Interface
var html = ""
var path_arr = [
var tools = [
["line","line","M60,60 L240,240",""],
["arc_c","arc clockwise","M60,60 A180,180 0 0,1 240,240",""],
["arc_r","arc reverse","M60,60 A180,180 0 0,0 240,240",""],
["bezier","bezier","M60,60 Q60,150 150,150 Q240,150 240,240 ",""],
["bezier","bezier","M60,60 Q60,150 150,150 Q240,150 240,240",""],
["close","close","M60,60 A180,180 0 0,1 240,240 M60,60 A180,180 0 0,0 240,240",""],
["thickness","thickness","M60,60 L240,240","stroke-dasharray: 30,15"],
["linecap","linecap","M60,60 L240,240 M240,180 L240,240 M180,240 L240,240"],
["linejoin","linejoin","M60,60 L120,120 L180,120 M120,180 L180,180 L240,240"],
["mirror","mirror","M60,60 L240,240 M180,120 L210,90 M120,180 L90,210 "],
["fill","fill","M60,60 L60,150 L150,150 L240,150 L240,240 Z "],
["mirror","mirror","M60,60 L240,240 M180,120 L210,90 M120,180 L90,210"],
["fill","fill","M60,60 L60,150 L150,150 L240,150 L240,240 Z"],
["export","export","M150,50 L50,150 L150,250 L250,150 L150,50 Z"]
]
path_arr.forEach(function(a) {
html += '<svg id="'+a[0]+'" ar="'+a[0]+'" title="hello" viewBox="0 0 300 300" class="icon" style="'+a[3]+'"><path class="icon_path" d="'+a[2]+'" stroke-linecap: round; stroke-width="12px" fill="none" /><rect ar="'+a[0]+'" width="300" height="300" opacity="0"><title>'+a[1]+'</title></rect></svg>'
}, this);
for(id in tools){
var tool = tools[id];
html += `<svg id="${tool[0]}" ar="${tool[0]}" title="${tool[1]}" viewBox="0 0 300 300" class="icon" style="${tool[3]}"><path class="icon_path" d="${tool[2]}" stroke-linecap: round; stroke-width="12px" fill="none" /><rect ar="${tool[0]}" width="300" height="300" opacity="0"><title>${tool[1]}</title></rect></svg>`
}
this.el.innerHTML = html
}
@ -38,31 +41,27 @@ function Interface()
document.getElementById("arc_c").className.baseVal = !dotgrid.from() || !dotgrid.to() ? "icon inactive" : "icon";
document.getElementById("arc_r").className.baseVal = !dotgrid.from() || !dotgrid.to() ? "icon inactive" : "icon";
document.getElementById("bezier").className.baseVal = !dotgrid.from() || !dotgrid.to() || !dotgrid.end() ? "icon inactive" : "icon";
document.getElementById("close").className.baseVal = dotgrid.segments.length < 1 || (prev && prev.name == "close") ? "icon inactive" : "icon";
document.getElementById("thickness").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
document.getElementById("linecap").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
document.getElementById("linejoin").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
document.getElementById("mirror").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
document.getElementById("fill").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
document.getElementById("close").className.baseVal = dotgrid.segments.length < 1 || (prev && prev.name == "close") ? "icon inactive" : "icon";
document.getElementById("export").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
}
this.update_size = function()
{
var size = this.zoom ? {width:600,height:600} : {width:300,height:300};
dotgrid.set_size(size,this.is_visible);
}
this.is_visible = true;
this.zoom = false;
this.toggle = function()
{
this.is_visible = this.is_visible ? false : true;
this.el.className = this.is_visible ? "visible" : "hidden";
this.update_size();
}

5
sources/scripts/project.js Normal file
View File

@ -0,0 +1,5 @@
function Project()
{
this.layers = [];
}

61
sources/scripts/tool.js Normal file
View File

@ -0,0 +1,61 @@
function Tool()
{
this.layer = 0;
this.layers = [];
this.verteces = [];
this.remove_segment = function()
{
this.layers[this.layer].pop();
this.clear();
dotgrid.draw();
}
this.add_vertex = function(pos)
{
this.verteces.push(pos);
console.log(this.verteces);
}
this.cast = function(type)
{
if(!this.layers[this.layer]){ this.layers[this.layer] = []; }
this.layers[this.layer].push({type:type,verteces:this.verteces.slice()})
this.clear();
dotgrid.draw();
console.log(`Casted ${type}+${this.layers[this.layer].length}`);
}
this.path = function()
{
var html = "";
for(id in this.layers[this.layer]){
var segment = this.layers[this.layer][id];
html += this.render(segment);
}
return html
}
this.render = function(segment)
{
var type = segment.type;
var verteces = segment.verteces;
var html = `M${verteces[0].x},${verteces[0].y} `;
for(id in verteces){
if(id == 0){ continue; }
var vertex = verteces[id];
html += `L${vertex.x},${vertex.y} `;
}
return html
}
this.clear = function()
{
this.verteces = [];
}
}