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

added resizing of the window

Browse Source
This commit is contained in:
cantbesure1
2017-11-12 12:14:00 -08:00
parent e3ac3c6185
commit 5f7e5952fb
8 changed files with 115 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
sources/scripts/dotgrid.js
View File

@@ -20,6 +20,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.element.style.width = this.width;
this.element.style.height = this.height;
this.wrapper = document.createElement("div");
this.wrapper.id = "wrapper";
this.grid_width = this.width/this.grid_x;
this.grid_height = this.height/this.grid_y;
@@ -45,13 +48,15 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.segments = [];
this.interface = document.createElement("div");
this.interface.id = "interface";
this.scale = 1
this.install = function()
{
document.body.appendChild(this.element);
document.body.appendChild(this.interface);
document.body.appendChild(this.guide.el);
document.body.appendChild(this.render.el);
document.body.appendChild(this.wrapper);
this.wrapper.appendChild(this.element);
this.wrapper.appendChild(this.interface);
this.element.appendChild(this.guide.el);
this.wrapper.appendChild(this.render.el);
// Cursors
this.cursor = document.createElement("div");
@@ -127,10 +132,10 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
var pos = this.position_in_grid(new Pos(e.clientX,e.clientY));
pos = this.position_on_grid(pos);
this.cursor.style.left = -pos.x + 10;
this.cursor.style.top = pos.y + 10;
this.cursor.style.left = Math.floor(-(pos.x-this.grid_width));
this.cursor.style.top = Math.floor(pos.y+this.grid_height);
this.cursor_coord.className = -pos.x > 150 ? "fl left" : "fl"
this.cursor_coord.textContent = parseInt(-pos.x/10)+","+parseInt(pos.y/10);
this.cursor_coord.textContent = parseInt(-pos.x/this.grid_width)+","+parseInt(pos.y/this.grid_height);
}
this.mouse_up = function(e)
@@ -141,9 +146,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
if(e.altKey){ dotgrid.delete_at(pos); return; }
if(pos.x>0) return;
if(from === null){ this.set_from(pos); }
else if(to === null){ this.set_to(pos); }
else{ this.set_end(pos); }
if(from === null){ this.set_from(pos.scale(1/this.scale)); }
else if(to === null){ this.set_to(pos.scale(1/this.scale)); }
else{ this.set_end(pos.scale(1/this.scale)); }
this.draw();
}
@@ -153,22 +158,22 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
{
from = pos;
cursor_from.style.left = -pos.x + 10;
cursor_from.style.top = pos.y + 10;
cursor_from.style.left = Math.floor(-pos.x*this.scale + this.grid_width);
cursor_from.style.top = Math.floor(pos.y*this.scale + this.grid_height);
}
this.set_to = function(pos)
{
cursor_to.style.left = -pos.x + 10;
cursor_to.style.top = pos.y + 10;
cursor_to.style.left = Math.floor(-pos.x*this.scale + this.grid_width);
cursor_to.style.top = Math.floor(pos.y*this.scale + this.grid_height);
to = pos;
}
this.set_end = function(pos)
{
cursor_end.style.left = -pos.x + 10;
cursor_end.style.top = pos.y + 10;
cursor_end.style.left = Math.floor(-pos.x*this.scale + this.grid_width);
cursor_end.style.top = Math.floor(pos.y*this.scale + this.grid_height);
end = pos;
}
@@ -242,7 +247,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.draw();
}
this.draw = function()
this.draw = function(exp = false)
{
var d = "";
var prev = "";
@@ -258,29 +263,31 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
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;
this.svg_el.style.strokeWidth = this.thickness*this.scale;
this.svg_el.style.fill = this.fill ? "black" : "none";
//console.log(this.svg_el)
// Draw Mirror
if(this.mirror_index == 1){
this.mirror_path.setAttribute("d",d);
this.mirror_path.setAttribute("transform","translate("+(300 - (this.offset.x))+","+(this.offset.y)+"),scale(-1,1)")
this.mirror_path.setAttribute("transform","translate("+(this.width - (this.offset.x*this.scale))+","+(this.offset.y*this.scale)+"),scale(-1,1)")
}
else if(this.mirror_index == 2){
this.mirror_path.setAttribute("d",d);
this.mirror_path.setAttribute("transform","translate("+((this.offset.x))+","+(300 - (this.offset.y))+"),scale(1,-1)")
this.mirror_path.setAttribute("transform","translate("+((this.offset.x*this.scale))+","+(this.height - (this.offset.y*this.scale))+"),scale(1,-1)")
}
else if(this.mirror_index == 3){
this.mirror_path.setAttribute("d",d);
this.mirror_path.setAttribute("transform","translate("+(300 -(this.offset.x))+","+(300 - (this.offset.y))+"),scale(-1,-1)")
this.mirror_path.setAttribute("transform","translate("+(this.width -(this.offset.x*this.scale))+","+(this.height - (this.offset.y*this.scale))+"),scale(-1,-1)")
}
else{
this.mirror_path.setAttribute("d",'M0,0');
this.mirror_path.setAttribute("transform","")
}
this.offset_el.setAttribute("transform","translate("+(this.offset.x)+","+(this.offset.y)+")")
this.offset_el.setAttribute("transform","translate("+(this.offset.x*this.scale)+","+(this.offset.y*this.scale)+")")
this.render.draw();
this.update_interface();
@@ -377,10 +384,15 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.export = function()
{
if(this.segments.length == 0){ return; }
this.scale = 1
this.width = 300
this.height = 300
this.draw()
var svg = this.svg_el.outerHTML
dialog.showSaveDialog((fileName) => {
if (fileName === undefined){ return; }
fs.writeFile(fileName+".svg", dotgrid.svg_el.outerHTML, (err) => {
fs.writeFile(fileName+".svg", svg, (err) => {
if(err){ alert("An error ocurred creating the file "+ err.message); return; }
});
fs.writeFile(fileName+'.png', dotgrid.render.buffer());
@@ -437,13 +449,13 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.position_in_grid = function(pos)
{
return new Pos((window.innerWidth/2) - (this.width/2) - pos.x,pos.y - 50)
return new Pos((window.innerWidth/2) - (this.width/2) - pos.x,pos.y - (30+10*(this.scale)))
}
this.position_on_grid = function(pos) // rounds the mouse position to the nearest cell, and limits the coords to within the box
{
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
y = Math.round(pos.y/this.grid_height)*this.grid_height
off = (x<-this.width || x>0 || y>this.height || y<0)
if(off) { // change position so the cursor will not be seen
x = 50
@@ -451,6 +463,36 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
}
return new Pos(x,y);
}
this.resize = function()
{
this.scale = Math.min((window.innerWidth-90)/300,(window.innerHeight-100)/320)
this.width = dotgrid.scale*300
this.height = dotgrid.scale*300
this.element.style.width = this.width
this.element.style.height = this.height
this.element.style.padding = Math.floor(10*this.scale)+"px"
this.svg_el.setAttribute("width",this.width+"px");
this.svg_el.setAttribute("height",this.height+"px");
this.grid_width = dotgrid.width/dotgrid.grid_x;
this.grid_height = dotgrid.height/dotgrid.grid_y;
this.guide.update()
//cursor updates
if(from) {
cursor_from.style.left = Math.floor(-from.x*this.scale + this.grid_width);
cursor_from.style.top = Math.floor(from.y*this.scale + this.grid_height);
}
if(to) {
cursor_to.style.left = Math.floor(-to.x*this.scale + this.grid_width);
cursor_to.style.top = Math.floor(to.y*this.scale + this.grid_height);
}
if(end) {
cursor_end.style.left = Math.floor(-end.x*this.scale + this.grid_width);
cursor_end.style.top = Math.floor(end.y*this.scale + this.grid_height);
}
}
}
window.addEventListener('dragover',function(e)
@@ -460,6 +502,12 @@ window.addEventListener('dragover',function(e)
e.dataTransfer.dropEffect = 'copy';
});
window.addEventListener('resize', function(e)
{
dotgrid.resize()
dotgrid.draw()
}, false);
window.addEventListener('drop', function(e)
{
e.preventDefault();