pointvec/sources/scripts/dotgrid.js

434 lines
12 KiB
JavaScript
Raw Normal View History

2016-12-31 16:35:14 -05:00
function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,linecap = "round", color = "#000000")
2016-12-31 10:00:57 -05:00
{
2017-11-06 21:10:09 -05:00
this.theme = new Theme();
2016-12-31 10:00:57 -05:00
this.width = width;
this.height = height;
2016-12-31 12:18:01 -05:00
this.grid_x = grid_x;
this.grid_y = grid_y;
2016-12-31 15:37:13 -05:00
this.block_x = block_x;
this.block_y = block_y;
2016-12-31 16:35:14 -05:00
this.thickness = thickness;
this.linecap = linecap;
this.color = color;
2017-11-05 19:18:57 -05:00
this.offset = new Pos(0,0);
2016-12-31 16:35:14 -05:00
2017-11-05 20:10:37 -05:00
// Dotgrid
this.element = document.createElement("div");
this.element.id = "dotgrid";
this.element.style.width = this.width;
this.element.style.height = this.height;
2016-12-31 10:00:57 -05:00
2016-12-31 12:18:01 -05:00
this.grid_width = this.width/this.grid_x;
this.grid_height = this.height/this.grid_y;
2016-12-31 12:37:10 -05:00
var cursor = null;
var cursor_from = null;
var cursor_to = null;
2017-11-04 19:59:11 -04:00
var cursor_end = null;
2016-12-31 12:18:01 -05:00
var from = null;
var to = null;
2017-11-04 19:59:11 -04:00
var end = null;
this.svg_el = null;
2017-11-05 14:53:59 -05:00
this.mirror_el = null;
this.mirror = false;
2017-11-05 20:10:37 -05:00
this.fill = false;
2017-11-04 19:59:11 -04:00
this.path = document.createElementNS("http://www.w3.org/2000/svg", "path");
this.segments = [];
this.interface = document.createElement("div");
this.interface.id = "interface";
2016-12-31 12:18:01 -05:00
2016-12-31 10:00:57 -05:00
this.install = function()
{
document.body.appendChild(this.element);
2017-11-04 19:59:11 -04:00
document.body.appendChild(this.interface);
2016-12-31 12:18:01 -05:00
// Markers
2017-11-04 19:59:11 -04:00
for (var x = this.grid_x; x >= 0; x--) {
for (var y = this.grid_y; y >= 0; y--) {
2016-12-31 12:18:01 -05:00
var marker = document.createElement("div");
2017-11-06 21:10:09 -05:00
marker.setAttribute("class",(x % this.block_x == 0 && y % this.block_y == 0 ? "marker bm" : "marker bl"));
2017-11-04 19:59:11 -04:00
marker.style.left = parseInt(x * this.grid_width + (this.grid_width/2)) +5;
marker.style.top = parseInt(y * this.grid_height + (this.grid_height/2)) +5;
2016-12-31 12:18:01 -05:00
this.element.appendChild(marker);
}
}
// Cursors
this.cursor = document.createElement("div");
this.cursor.id = "cursor";
this.element.appendChild(this.cursor);
2016-12-31 12:37:10 -05:00
cursor_from = document.createElement("div");
cursor_from.id = "cursor_from";
this.element.appendChild(cursor_from);
2016-12-31 12:18:01 -05:00
2016-12-31 12:37:10 -05:00
cursor_to = document.createElement("div");
cursor_to.id = "cursor_to";
this.element.appendChild(cursor_to);
2016-12-31 12:18:01 -05:00
2017-11-04 19:59:11 -04:00
cursor_end = document.createElement("div");
cursor_end.id = "cursor_end";
this.element.appendChild(cursor_end);
2017-11-05 19:18:57 -05:00
this.offset_el = document.createElementNS("http://www.w3.org/2000/svg", "g");
2017-11-05 14:53:59 -05:00
this.mirror_el = document.createElementNS("http://www.w3.org/2000/svg", "g");
this.mirror_path = document.createElementNS("http://www.w3.org/2000/svg", "path");
2016-12-31 12:18:01 -05:00
// Vector
2017-11-04 19:59:11 -04:00
this.svg_el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
2017-11-06 21:10:09 -05:00
this.svg_el.setAttribute("class","vector fh");
2017-11-04 19:59:11 -04:00
this.svg_el.setAttribute("width",this.width+"px");
this.svg_el.setAttribute("height",this.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.width;
this.svg_el.style.height = this.height;
this.svg_el.style.stroke = this.color;
this.svg_el.style.strokeWidth = this.thickness;
2017-11-06 21:41:41 -05:00
this.svg_el.style.fill = this.fill ? "black" : "none !important";
2017-11-04 19:59:11 -04:00
this.svg_el.style.strokeLinecap = this.linecap;
this.element.appendChild(this.svg_el);
2017-11-05 19:18:57 -05:00
2017-11-05 23:35:29 -05:00
this.offset_el.appendChild(this.path)
2017-11-05 19:18:57 -05:00
this.svg_el.appendChild(this.offset_el);
2017-11-05 14:53:59 -05:00
this.svg_el.appendChild(this.mirror_el);
this.mirror_el.appendChild(this.mirror_path);
2017-11-04 20:52:05 -04:00
2017-11-05 23:35:29 -05:00
this.draw();
2017-11-06 21:10:09 -05:00
this.theme.start();
2016-12-31 12:18:01 -05:00
}
// Cursor
this.mouse_down = function(e)
{
2017-11-04 20:52:05 -04:00
var o = e.target.getAttribute("data-operation");
if(!o){ return; }
if(o == "line"){ this.draw_line(); }
if(o == "arc_c"){ this.draw_arc("0,1"); }
2017-11-05 00:58:53 -04:00
if(o == "arc_r"){ this.draw_arc("0,0"); }
if(o == "bezier"){ this.draw_bezier(); }
2017-11-05 14:38:14 -05:00
if(o == "close"){ this.draw_close(); }
2017-11-05 14:53:59 -05:00
if(o == "mirror"){ this.mirror = this.mirror == true ? false : true; this.draw(); }
2017-11-04 20:52:05 -04:00
if(o == "export"){ this.export(); }
2016-12-31 12:18:01 -05:00
}
this.mouse_move = function(e)
{
2017-11-07 06:04:47 -05:00
var pos = this.position_in_grid(new Pos(e.clientX,e.clientY));
pos = this.position_on_grid(pos);
2016-12-31 12:18:01 -05:00
2017-11-07 06:04:47 -05:00
this.cursor.style.left = -pos.x + 10;
this.cursor.style.top = pos.y + 10;
2016-12-31 12:18:01 -05:00
}
this.mouse_up = function(e)
{
2017-11-07 06:04:47 -05:00
var pos = this.position_in_grid(new Pos(e.clientX,e.clientY));
pos = this.position_on_grid(pos);
if(pos.x>0) return;
2017-11-05 23:35:29 -05:00
2016-12-31 13:29:31 -05:00
if(from === null){ this.set_from(pos); }
else if(to === null){ this.set_to(pos); }
2017-11-04 19:59:11 -04:00
else{ this.set_end(pos); }
this.draw();
2016-12-31 12:18:01 -05:00
}
// Setters
this.set_from = function(pos)
{
from = pos;
2017-11-07 06:04:47 -05:00
cursor_from.style.left = -pos.x + 10;
cursor_from.style.top = pos.y + 10;
2016-12-31 12:18:01 -05:00
}
this.set_to = function(pos)
{
2017-11-07 06:04:47 -05:00
cursor_to.style.left = -pos.x + 10;
cursor_to.style.top = pos.y + 10;
2016-12-31 12:18:01 -05:00
to = pos;
}
2017-11-04 19:59:11 -04:00
this.set_end = function(pos)
{
2017-11-07 06:04:47 -05:00
cursor_end.style.left = -pos.x + 10;
cursor_end.style.top = pos.y + 10;
2017-11-04 19:59:11 -04:00
end = pos;
}
this.mod_thickness = function(mod)
{
2017-11-07 01:59:45 -05:00
this.thickness = Math.max(this.thickness+mod,0);
2017-11-04 19:59:11 -04:00
this.draw();
}
this.mod_linecap_index = 1;
this.mod_linecap = function(mod)
{
var a = ["butt","square","round"];
this.mod_linecap_index += 1;
this.linecap = a[this.mod_linecap_index % a.length];
this.draw();
}
2017-11-07 06:04:47 -05:00
this.mod_move = function(move)
2017-11-04 19:59:11 -04:00
{
2017-11-05 19:18:57 -05:00
if(!to && !end && from){
2017-11-07 06:04:47 -05:00
this.set_from(new Pos(from.x-(move.x),from.y+(move.y)))
2017-11-04 20:52:05 -04:00
this.draw();
return;
}
2017-11-05 19:18:57 -05:00
if(!end && to){
2017-11-07 06:04:47 -05:00
this.set_to(new Pos(to.x-(move.x),to.y+(move.y)))
2017-11-04 20:52:05 -04:00
this.draw();
return;
2017-11-04 19:59:11 -04:00
}
2017-11-05 19:18:57 -05:00
if(end){
2017-11-07 06:04:47 -05:00
this.set_end(new Pos(end.x-(move.x),end.y+(move.y)))
2017-11-05 19:18:57 -05:00
this.draw();
2017-11-05 23:35:29 -05:00
return;
2017-11-05 19:18:57 -05:00
}
// Move offset
2017-11-07 06:04:47 -05:00
this.offset = this.offset.add(new Pos(move.x,move.y));
2017-11-04 19:59:11 -04:00
this.draw();
}
2017-11-05 20:10:37 -05:00
this.toggle_fill = function()
{
dotgrid.fill = dotgrid.fill ? false : true;
this.draw();
}
2017-11-04 19:59:11 -04:00
this.draw = function()
{
var d = "";
var prev = "";
for(id in this.segments){
var segment = this.segments[id];
d += segment.to_segment(prev)+" ";
prev = segment;
}
this.path.setAttribute("d",d);
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.strokeLinecap = this.linecap;
this.svg_el.style.strokeWidth = this.thickness;
2017-11-05 20:10:37 -05:00
this.svg_el.style.fill = this.fill ? "black" : "none";
2017-11-04 19:59:11 -04:00
2017-11-05 14:53:59 -05:00
this.mirror_path.setAttribute("d",this.mirror ? d : '');
2017-11-05 19:18:57 -05:00
this.mirror_path.setAttribute("transform","translate("+(300 - (this.offset.x))+","+(this.offset.y)+"),scale(-1,1)")
this.offset_el.setAttribute("transform","translate("+(this.offset.x)+","+(this.offset.y)+")")
2017-11-05 14:53:59 -05:00
2017-11-04 19:59:11 -04:00
this.update_interface();
}
2016-12-31 12:18:01 -05:00
// Draw
2017-11-04 20:52:05 -04:00
this.draw_line = function()
2016-12-31 12:37:10 -05:00
{
2017-11-06 21:41:41 -05:00
if(from === null || to === null){ return; }
2017-11-05 19:18:57 -05:00
2017-11-07 06:04:47 -05:00
to = new Pos(to.x * -1, to.y).sub(this.offset)
from = new Pos(from.x * -1,from.y).sub(this.offset)
end = end ? new Pos(end.x * -1,end.y).sub(this.offset) : null;
2017-11-05 19:18:57 -05:00
2017-11-06 21:41:41 -05:00
this.segments.push(new Path_Line(from,to,end));
2016-12-31 12:18:01 -05:00
2017-11-06 21:41:41 -05:00
this.draw();
reset();
2016-12-31 12:18:01 -05:00
}
2016-12-31 13:16:00 -05:00
this.draw_arc = function(orientation)
2016-12-31 12:18:01 -05:00
{
2016-12-31 13:29:31 -05:00
if(from === null || to === null){ return; }
2017-11-07 06:04:47 -05:00
to = new Pos(to.x * -1, to.y).sub(this.offset)
from = new Pos(from.x * -1,from.y).sub(this.offset)
2017-11-07 06:25:14 -05:00
end = end ? new Pos(end.x * -1,end.y).sub(this.offset) : null;
2017-11-06 00:45:41 -05:00
2017-11-06 21:41:41 -05:00
this.segments.push(new Path_Arc(from,to,orientation,end));
2017-11-04 19:59:11 -04:00
this.draw();
reset();
}
this.draw_bezier = function()
{
2017-11-06 00:45:41 -05:00
if(from === null || to === null || end === null){ return; }
2017-11-04 19:59:11 -04:00
2017-11-07 06:04:47 -05:00
to = new Pos(to.x * -1, to.y).sub(this.offset)
from = new Pos(from.x * -1,from.y).sub(this.offset)
end = new Pos(end.x * -1,end.y).sub(this.offset)
2017-11-06 21:41:41 -05:00
this.segments.push(new Path_Bezier(from,to,end));
2017-01-04 12:48:08 -05:00
2017-11-04 19:59:11 -04:00
this.draw();
2017-01-04 12:48:08 -05:00
reset();
}
2017-11-05 00:33:04 -04:00
this.draw_close = function()
{
if(this.segments.length == 0){ return; }
2017-11-05 14:38:14 -05:00
if(this.segments[this.segments.length-1].name == "close"){ return; }
2017-11-05 00:33:04 -04:00
this.segments.push(new Path_Close());
2017-11-05 23:35:29 -05:00
2017-11-05 00:33:04 -04:00
this.draw();
reset();
}
2016-12-31 12:37:10 -05:00
this.reset = function()
{
reset();
}
2016-12-31 12:47:37 -05:00
2016-12-31 12:18:01 -05:00
function reset()
{
from = null;
to = null;
2017-11-04 19:59:11 -04:00
end = null;
2016-12-31 12:37:10 -05:00
cursor_from.style.left = -100;
cursor_from.style.top = -100;
cursor_to.style.left = -100;
cursor_to.style.top = -100;
2017-11-04 19:59:11 -04:00
cursor_end.style.left = -100;
cursor_end.style.top = -100;
2016-12-31 12:18:01 -05:00
}
2016-12-31 12:47:37 -05:00
this.erase = function()
{
2017-11-05 14:15:31 -05:00
if(from || to || end){
this.reset();
}
else{
2017-11-05 23:35:29 -05:00
this.segments.pop();
2017-11-05 14:15:31 -05:00
}
2017-11-04 19:59:11 -04:00
this.draw();
2016-12-31 12:47:37 -05:00
}
2016-12-31 15:47:40 -05:00
this.export = function()
{
2017-11-05 00:33:04 -04:00
if(this.segments.length == 0){ return; }
2017-11-05 23:35:29 -05:00
2017-11-04 21:06:00 -04:00
dialog.showSaveDialog((fileName) => {
if (fileName === undefined){ return; }
fs.writeFile(fileName+".svg", dotgrid.svg_el.outerHTML, (err) => {
if(err){ alert("An error ocurred creating the file "+ err.message); return; }
});
2017-11-05 23:35:29 -05:00
});
2017-11-04 19:59:11 -04:00
}
this.update_interface = function()
{
var html = "";
2017-11-04 20:52:05 -04:00
if(from && to){
2017-11-05 20:10:37 -05:00
html += "<img data-operation='line' title='line (d)' src='media/icons/line.svg' class='icon'/>";
html += "<img data-operation='arc_c' title='arc clockwise (s)' src='media/icons/arc_clockwise.svg' class='icon'/>";
html += "<img data-operation='arc_r' title='arc reverse (a)' src='media/icons/arc_reverse.svg' class='icon'/>";
2017-11-04 20:52:05 -04:00
}
else{
2017-11-05 20:10:37 -05:00
html += "<img title='line (d)' src='media/icons/line.svg' class='icon inactive'/>";
html += "<img title='arc clockwise (s)' src='media/icons/arc_clockwise.svg' class='icon inactive'/>";
html += "<img title='arc reverse (a)' src='media/icons/arc_reverse.svg' class='icon inactive'/>";
2017-11-04 20:52:05 -04:00
}
2017-11-04 19:59:11 -04:00
2017-11-04 20:52:05 -04:00
if(from && to && end){
2017-11-05 23:35:29 -05:00
html += "<img data-operation='bezier' title='bezier (f)' src='media/icons/bezier.svg' class='icon'/>";
2017-11-04 20:52:05 -04:00
}
else{
2017-11-05 20:10:37 -05:00
html += "<img title='bezier (f)' src='media/icons/bezier.svg' class='icon inactive'/>";
2017-11-04 20:52:05 -04:00
}
2017-11-04 19:59:11 -04:00
2017-11-05 14:38:14 -05:00
if(this.segments.length > 0 && this.segments[this.segments.length-1].name != "close"){
2017-11-05 20:10:37 -05:00
html += "<img data-operation='close (r)' title='close' src='media/icons/close.svg' class='icon'/>";
2017-11-05 14:38:14 -05:00
}
else{
2017-11-05 20:10:37 -05:00
html += "<img title='close (r)' src='media/icons/close.svg' class='icon inactive'/>";
2017-11-05 14:38:14 -05:00
}
2017-11-05 14:53:59 -05:00
if(this.segments.length > 0 && !this.mirror){
2017-11-05 20:10:37 -05:00
html += "<img data-operation='mirror' title='mirror (space)' src='media/icons/mirror.svg' class='icon' style='margin-left:35px'/>";
2017-11-05 14:53:59 -05:00
}
else{
2017-11-05 20:10:37 -05:00
html += "<img data-operation='mirror' title='mirror (space)' src='media/icons/mirror.svg' class='icon inactive' style='margin-left:35px'/>";
2017-11-05 14:53:59 -05:00
}
2017-11-04 20:52:05 -04:00
if(this.segments.length > 0){
2017-11-05 20:10:37 -05:00
html += "<img data-operation='export' title='export (e)' src='media/icons/export.svg' class='icon right'/>";
2017-11-04 20:52:05 -04:00
}
else{
2017-11-05 20:10:37 -05:00
html += "<img title='export (e)' src='media/icons/export.svg' class='icon right inactive'/>";
2017-11-04 20:52:05 -04:00
}
2017-11-05 23:35:29 -05:00
2017-11-04 19:59:11 -04:00
this.interface.innerHTML = html;
2016-12-31 15:47:40 -05:00
}
2016-12-31 12:18:01 -05:00
// Normalizers
2017-11-07 06:04:47 -05:00
this.position_in_grid = function(pos)
2016-12-31 12:18:01 -05:00
{
2017-11-07 06:04:47 -05:00
return new Pos((window.innerWidth/2) - (this.width/2) - pos.x,pos.y - 50)
2016-12-31 12:18:01 -05:00
}
2017-11-07 06:04:47 -05:00
this.position_on_grid = function(pos) // rounds the mouse position to the nearest cell, and limits the coords to within the box
2016-12-31 12:18:01 -05:00
{
2017-11-07 06:04:47 -05:00
x = Math.round(pos.x/this.grid_width)*this.grid_width
y = Math.round(pos.y/this.grid_height)*this.grid_height+this.grid_height
2017-11-07 01:55:51 -05:00
off = (x<-this.width || x>0 || y>this.height || y<0)
if(off) { // change position so the cursor will not be seen
x = 50
y = -50
}
2017-11-07 06:04:47 -05:00
return new Pos(x,y);
2016-12-31 10:00:57 -05:00
}
2017-11-06 21:10:09 -05:00
2017-11-05 23:35:29 -05:00
}
2017-11-06 21:10:09 -05:00
window.addEventListener('dragover',function(e)
{
e.preventDefault();
e.stopPropagation();
e.dataTransfer.dropEffect = 'copy';
});
window.addEventListener('drop', function(e)
{
e.preventDefault();
e.stopPropagation();
var files = e.dataTransfer.files;
for(file_id in files){
var file = files[file_id];
if(file.name.indexOf(".thm") == -1){ console.log("skipped",file); continue; }
var path = file.path;
var reader = new FileReader();
reader.onload = function(e){
var o = JSON.parse(e.target.result);
dotgrid.theme.install(o);
};
reader.readAsText(file);
return;
}
});