How about a ton of upgrades
This commit is contained in:
parent
03c7c93bcd
commit
cc62e5522b
@ -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
2
main.js
@ -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`)
|
||||
|
||||
|
@ -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 }
|
||||
|
||||
|
@ -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);
|
||||
|
@ -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)
|
||||
|
@ -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();
|
||||
|
@ -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()
|
||||
|
Loading…
Reference in New Issue
Block a user