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

How about a ton of upgrades

Browse Source
This commit is contained in:
Devine Lu Linvega 2017-11-22 11:58:07 +13:00
parent 03c7c93bcd
commit cc62e5522b
7 changed files with 69 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -31,6 +31,7 @@ Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved
- `/` Toggle linecap.
- `space` Mirror.
- `escape` Remove control points.
- `~` Double canvas size.
- `ctrl+n` New canvas.
- `ctrl+s` Export canvas.

2
main.js
View File

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

8
sources/links/main.css
View File

@ -2,7 +2,7 @@ body { background:#fff; padding: 5px; font-family: 'input_mono_regular'; -webkit
#app { display: flex; flex-direction: column; align-items: center;}
#wrapper { padding: 25px; padding-bottom: 15px; background: inherit;-webkit-app-region: drag;}
#dotgrid { margin:0px auto; position:relative; overflow: hidden; padding:10px;-webkit-app-region: no-drag; width:310px !important; height:310px !important; }
#dotgrid { margin:0px auto; position:relative; overflow: hidden; padding:10px;-webkit-app-region: no-drag; width:310px; height:310px; }
#cursor { opacity: 1; transition: all 50ms; width:8px; height:8px; position:absolute; z-index:25; border-radius:5px; border:1px solid black;}
#cursor_coord { font-size:10px; z-index: 10000; margin-left:15px; margin-top:-2px;}
#cursor_coord.left { margin-left:-110px; text-align: right; width:100px; }
@ -17,10 +17,10 @@ body { background:#fff; padding: 5px; font-family: 'input_mono_regular'; -webkit
.icon { width:25px; height:25px; margin-right:5px; opacity: 1}
.icon:hover { cursor: pointer; opacity: 1 }
svg.vector { z-index: 1000;position: relative; left:10px; top:10px; width:300px !important; height:300px !important; }
svg.vector { z-index: 1000;position: relative; left:10px; top:10px; width:300px; height:300px; }
#dotgrid #guide { opacity: 0; transition: all 500ms; }
#dotgrid #widgets { opacity: 0; transition: all 150ms; }
#dotgrid #guide { opacity: 0; }
#dotgrid #widgets { opacity: 0; }
#dotgrid:hover #guide { opacity: 1 }
#dotgrid:hover #widgets { opacity: 1 }

77
sources/scripts/dotgrid.js
View File

@ -109,7 +109,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.guide.start();
this.interface.start();
this.resize();
dotgrid.set_size({width:300,height:300})
this.draw();
}
@ -226,7 +226,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.set_from = function(pos)
{
from = pos.mirror().clamp(0,300).mirror();
from = pos.mirror().clamp(0,this.width).mirror();
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);
@ -234,7 +234,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.set_to = function(pos)
{
to = pos.mirror().clamp(0,300).mirror();
to = pos.mirror().clamp(0,this.width).mirror();
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);
@ -242,7 +242,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.set_end = function(pos)
{
end = pos.mirror().clamp(0,300).mirror();
end = pos.mirror().clamp(0,this.width).mirror();
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);
@ -323,6 +323,33 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.draw();
}
this.zoom = false;
this.toggle_zoom = function()
{
dotgrid.set_size(!dotgrid.zoom ? {width:600,height:600} : {width:300,height:300})
dotgrid.zoom = dotgrid.zoom ? false : true;
}
this.set_size = function(size = {width:300,height:300})
{
var win = require('electron').remote.getCurrentWindow();
win.setSize(size.width+100,size.height+120);
this.width = size.width
this.height = size.height
this.element.style.width = size.width+10
this.element.style.height = size.height+10
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");
dotgrid.guide.resize(size);
this.interface.update();
this.draw();
}
this.draw = function(exp = false)
{
var d = "";
@ -464,14 +491,10 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
{
if(this.segments.length == 0){ return; }
this.scale = 1
this.width = 300
this.height = 300
this.draw()
var svg = this.svg_el.outerHTML
dotgrid.resize()
dialog.showSaveDialog((fileName) => {
dotgrid.resize()
if (fileName === undefined){ return; }
fs.writeFile(fileName+".svg", svg, (err) => {
if(err){ alert("An error ocurred creating the file "+ err.message); return; }
@ -487,7 +510,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.width = 300;
this.height = 300;
dotgrid.resize();
dialog.showOpenDialog({
openFile: true,
openDirectory: false,
@ -497,7 +519,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
{ name: "All Files", extensions: ["*"] }
]
}, (filePaths) => {
dotgrid.resize();
if (filePaths === undefined || filePaths.length === 0)
return;
fs.readFile(filePaths[0], (err, data) => {
@ -506,7 +527,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
return;
}
dotgrid.serializer.deserialize(JSON.parse(data.toString().trim()));
dotgrid.resize();
dotgrid.draw();
});
});
@ -548,7 +568,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
}
this.serializer.deserialize(data);
this.resize();
this.draw();
}
@ -562,6 +581,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.position_on_grid = function(pos)
{
pos.y = pos.y - 7.5
pos.x = pos.x + 7.5
x = Math.round(pos.x/this.grid_width)*this.grid_width
y = Math.round(pos.y/this.grid_height)*this.grid_height
off = (x<-this.width || x>0 || y>this.height || y<0)
@ -572,37 +592,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
return new Pos(x,y);
}
this.resize = function()
{
return;
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);
}
}
// To Clean
this.from = function()
@ -630,7 +619,6 @@ window.addEventListener('dragover',function(e)
window.addEventListener('resize', function(e)
{
dotgrid.resize()
dotgrid.draw()
}, false);
@ -660,7 +648,6 @@ window.addEventListener('drop', function(e)
reader.onload = function(e){
var o = JSON.parse(e.target.result);
dotgrid.serializer.deserialize(o);
dotgrid.resize();
dotgrid.draw();
};
reader.readAsText(file);

23
sources/scripts/guide.js
View File

@ -15,6 +15,12 @@ function Guide()
this.widgets.style.height = "320px";
this.start = function()
{
this.clear();
this.draw();
}
this.draw = function()
{
for (var x = dotgrid.grid_x; x >= 0; x--) {
for (var y = dotgrid.grid_y; y >= 0; y--) {
@ -27,8 +33,24 @@ function Guide()
}
}
this.resize = function(size)
{
this.el.width = (size.width+40)*2;
this.el.height = (size.height+40)*2;
this.el.style.width = (size.width+40)+"px";
this.el.style.height = (size.height+40)+"px";
this.widgets.width = (size.width+20)*2;
this.widgets.height = (size.height+20)*2;
this.widgets.style.width = (size.width+20)+"px";
this.widgets.style.height = (size.height+20)+"px";
this.update();
}
this.clear = function()
{
this.el.getContext('2d').clearRect(0, 0, 1280, 1280);
this.widgets.getContext('2d').clearRect(0, 0, 1280, 1280);
}
@ -51,6 +73,7 @@ function Guide()
if(dotgrid.translation){
this.draw_translation();
}
this.draw();
}
this.draw_marker = function(pos,radius = 1,step)

6
sources/scripts/keyboard.js
View File

@ -2,6 +2,12 @@ function Keyboard()
{
this.listen = function(e)
{
// zoom
if(e.key == "~" || e.keyCode == 192){
dotgrid.toggle_zoom();
return;
}
// save
if(e.key == "s" && (e.ctrlKey || e.metaKey)){
dotgrid.export();

4
sources/scripts/render.js
View File

@ -3,7 +3,7 @@ function Render()
this.el = document.createElement("canvas"); this.el.id = "render";
this.img = document.createElement("img");
this.el.width = 512; this.el.height = 512;
this.el.width = 1280; this.el.height = 1280;
this.draw = function()
{
@ -13,7 +13,7 @@ function Render()
var image64 = b64Start + svg64;
this.img.src = image64;
this.el.getContext('2d').clearRect(0, 0, 1280, 1280);
this.el.getContext('2d').drawImage(this.img, 0, 0, 512, 512);
this.el.getContext('2d').drawImage(this.img, 0, 0, 1280, 1280);
}
this.buffer = function()