2018-03-07 03:08:34 +00:00
|
|
|
function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
|
2016-12-31 15:00:57 +00:00
|
|
|
{
|
2018-08-17 19:58:01 +00:00
|
|
|
this.controller = null;
|
2017-11-07 02:10:09 +00:00
|
|
|
this.theme = new Theme();
|
2017-11-14 21:11:09 +00:00
|
|
|
this.interface = new Interface();
|
2018-01-31 09:10:48 +00:00
|
|
|
this.history = new History();
|
2018-02-05 23:39:25 +00:00
|
|
|
this.guide = new Guide();
|
2018-05-10 22:06:03 +00:00
|
|
|
this.renderer = new Renderer();
|
2018-02-05 23:39:25 +00:00
|
|
|
this.tool = new Tool();
|
2018-03-07 00:50:41 +00:00
|
|
|
this.picker = new Picker();
|
2018-08-02 22:57:35 +00:00
|
|
|
this.cursor = new Cursor();
|
2017-11-07 02:10:09 +00:00
|
|
|
|
2016-12-31 17:18:01 +00:00
|
|
|
this.grid_x = grid_x;
|
|
|
|
this.grid_y = grid_y;
|
2016-12-31 20:37:13 +00:00
|
|
|
this.block_x = block_x;
|
|
|
|
this.block_y = block_y;
|
2016-12-31 21:35:14 +00:00
|
|
|
|
2016-12-31 15:00:57 +00:00
|
|
|
this.install = function()
|
2018-07-08 00:15:35 +00:00
|
|
|
{
|
2018-05-08 09:05:19 +00:00
|
|
|
document.getElementById("app").appendChild(this.guide.el);
|
2017-11-05 00:52:05 +00:00
|
|
|
|
2017-11-07 02:10:09 +00:00
|
|
|
this.theme.start();
|
2018-03-06 22:57:52 +00:00
|
|
|
this.tool.start();
|
2017-11-09 19:47:06 +00:00
|
|
|
this.guide.start();
|
2017-11-14 21:11:09 +00:00
|
|
|
this.interface.start();
|
2018-01-12 08:09:26 +00:00
|
|
|
|
2018-08-02 22:57:35 +00:00
|
|
|
document.addEventListener('mousedown', function(e){ dotgrid.cursor.down(e); }, false);
|
|
|
|
document.addEventListener('mousemove', function(e){ dotgrid.cursor.move(e); }, false);
|
|
|
|
document.addEventListener('contextmenu', function(e){ dotgrid.cursor.alt(e); }, false);
|
|
|
|
document.addEventListener('mouseup', function(e){ dotgrid.cursor.up(e);}, false);
|
2018-07-26 06:56:06 +00:00
|
|
|
document.addEventListener('copy', function(e){ dotgrid.copy(e); }, false);
|
|
|
|
document.addEventListener('cut', function(e){ dotgrid.cut(e); }, false);
|
|
|
|
document.addEventListener('paste', function(e){ dotgrid.paste(e); }, false);
|
2018-01-12 03:22:50 +00:00
|
|
|
window.addEventListener('drop', dotgrid.drag);
|
2018-07-26 06:56:06 +00:00
|
|
|
|
2018-01-31 09:10:48 +00:00
|
|
|
this.new();
|
2016-12-31 17:18:01 +00:00
|
|
|
}
|
|
|
|
|
2018-05-07 05:03:35 +00:00
|
|
|
// File
|
2018-01-12 08:46:09 +00:00
|
|
|
|
2018-01-12 08:09:26 +00:00
|
|
|
this.new = function()
|
|
|
|
{
|
2018-07-18 00:52:23 +00:00
|
|
|
this.set_zoom(1.0)
|
2018-05-07 04:51:58 +00:00
|
|
|
this.set_size({width:300,height:300})
|
2018-02-06 03:27:48 +00:00
|
|
|
this.history.push(this.tool.layers);
|
2018-05-07 05:03:35 +00:00
|
|
|
this.clear();
|
2018-01-12 08:09:26 +00:00
|
|
|
}
|
|
|
|
|
2018-05-10 21:57:14 +00:00
|
|
|
this.open = function()
|
|
|
|
{
|
|
|
|
var paths = dialog.showOpenDialog({properties: ['openFile'],filters:[{name:"Dotgrid Image",extensions:["dot","grid"]}]});
|
|
|
|
|
|
|
|
if(!paths){ console.log("Nothing to load"); return; }
|
|
|
|
|
|
|
|
fs.readFile(paths[0], 'utf-8', (err, data) => {
|
|
|
|
if(err){ alert("An error ocurred reading the file :" + err.message); return; }
|
2018-05-10 22:06:03 +00:00
|
|
|
this.tool.replace(JSON.parse(data.toString().trim()));
|
|
|
|
this.guide.refresh();
|
2018-05-10 21:57:14 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-05-10 22:37:10 +00:00
|
|
|
this.save = function(content = this.tool.export())
|
2018-01-12 08:09:26 +00:00
|
|
|
{
|
2018-08-04 03:55:08 +00:00
|
|
|
if(dotgrid.tool.length() < 1){ console.log("Nothing to save"); return; }
|
|
|
|
|
2018-07-08 00:15:35 +00:00
|
|
|
dialog.showSaveDialog({
|
|
|
|
title:"Save to .grid",
|
|
|
|
filters: [{name: "Dotgrid", extensions: ["grid", "dot"]}]
|
|
|
|
},(fileName) => {
|
2018-01-12 08:09:26 +00:00
|
|
|
if (fileName === undefined){ return; }
|
2018-05-16 20:58:31 +00:00
|
|
|
fileName = fileName.substr(-5,5) != ".grid" ? fileName+".grid" : fileName;
|
|
|
|
fs.writeFileSync(fileName, content);
|
2018-05-10 22:06:03 +00:00
|
|
|
this.guide.refresh()
|
2018-01-12 08:09:26 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-05-16 22:53:29 +00:00
|
|
|
this.render = function(content = this.renderer.to_png({width:dotgrid.tool.settings.size.width*2,height:dotgrid.tool.settings.size.height*2}), ready = null, size = null)
|
2018-01-12 08:09:26 +00:00
|
|
|
{
|
2018-05-10 22:37:10 +00:00
|
|
|
if(!ready){return; }
|
2018-08-04 03:55:08 +00:00
|
|
|
if(dotgrid.tool.length() < 1){ console.log("Nothing to render"); return; }
|
2018-05-10 22:37:10 +00:00
|
|
|
|
2018-05-10 21:57:14 +00:00
|
|
|
dialog.showSaveDialog({title:"Render to .png"},(fileName) => {
|
|
|
|
if (fileName === undefined){ return; }
|
2018-05-16 20:58:31 +00:00
|
|
|
fileName = fileName.substr(-4,4) != ".png" ? fileName+".png" : fileName;
|
2018-05-10 23:08:51 +00:00
|
|
|
console.log(`Rendered ${size.width}x${size.height}`)
|
2018-05-16 20:58:31 +00:00
|
|
|
fs.writeFileSync(fileName, ready);
|
2018-05-10 21:57:14 +00:00
|
|
|
});
|
|
|
|
}
|
2018-01-12 08:09:26 +00:00
|
|
|
|
2018-05-10 22:37:10 +00:00
|
|
|
this.export = function(content = this.renderer.to_svg())
|
2018-05-10 21:57:14 +00:00
|
|
|
{
|
2018-08-04 03:55:08 +00:00
|
|
|
if(dotgrid.tool.length() < 1){ console.log("Nothing to export"); return; }
|
|
|
|
|
2018-05-10 22:06:03 +00:00
|
|
|
dialog.showSaveDialog({title:"Export to .svg"},(fileName) => {
|
2018-05-10 21:57:14 +00:00
|
|
|
if (fileName === undefined){ return; }
|
2018-05-16 20:58:31 +00:00
|
|
|
fileName = fileName.substr(-4,4) != ".svg" ? fileName+".svg" : fileName;
|
|
|
|
fs.writeFileSync(fileName, content);
|
2018-05-10 22:06:03 +00:00
|
|
|
this.guide.refresh()
|
2018-01-12 08:09:26 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-05-07 05:03:35 +00:00
|
|
|
// Basics
|
2018-07-08 00:15:35 +00:00
|
|
|
|
|
|
|
this.set_size = function(size = {width:300,height:300},interface = true,scale = 1)
|
2017-11-21 22:58:07 +00:00
|
|
|
{
|
2018-08-03 01:48:16 +00:00
|
|
|
size = { width:clamp(step(size.width,15),105,1080),height:clamp(step(size.height,15),120,1080)}
|
2018-05-06 23:15:23 +00:00
|
|
|
|
2018-05-07 22:47:09 +00:00
|
|
|
this.tool.settings.size.width = size.width
|
|
|
|
this.tool.settings.size.height = size.height
|
2018-05-10 08:01:31 +00:00
|
|
|
|
2018-08-17 19:58:01 +00:00
|
|
|
try{
|
|
|
|
var win = require('electron').remote.getCurrentWindow();
|
|
|
|
win.setSize((size.width+100)*scale,(size.height+100+(interface ? 10 : 0))*scale,true);
|
|
|
|
}
|
|
|
|
catch(err){
|
|
|
|
console.log("No window")
|
|
|
|
}
|
|
|
|
|
2017-11-21 22:58:07 +00:00
|
|
|
this.grid_x = size.width/15
|
|
|
|
this.grid_y = size.height/15
|
2018-05-07 04:24:01 +00:00
|
|
|
|
2018-05-07 22:47:09 +00:00
|
|
|
this.grid_width = this.tool.settings.size.width/this.grid_x;
|
|
|
|
this.grid_height = this.tool.settings.size.height/this.grid_y;
|
2018-05-07 04:51:58 +00:00
|
|
|
|
2017-11-21 22:58:07 +00:00
|
|
|
dotgrid.guide.resize(size);
|
2018-05-10 21:13:01 +00:00
|
|
|
|
|
|
|
this.interface.refresh();
|
2018-05-10 20:46:50 +00:00
|
|
|
dotgrid.guide.refresh();
|
2017-11-04 23:59:11 +00:00
|
|
|
}
|
|
|
|
|
2018-05-12 21:50:19 +00:00
|
|
|
this.set_zoom = function(scale)
|
|
|
|
{
|
|
|
|
this.set_size({width:this.tool.settings.size.width,height:this.tool.settings.size.height},true,scale)
|
2018-08-17 19:58:01 +00:00
|
|
|
|
|
|
|
try{
|
|
|
|
webFrame.setZoomFactor(scale)
|
|
|
|
}
|
|
|
|
catch(err){
|
|
|
|
console.log("Cannot zoom")
|
|
|
|
}
|
2018-05-12 21:50:19 +00:00
|
|
|
}
|
|
|
|
|
2016-12-31 17:18:01 +00:00
|
|
|
// Draw
|
2018-07-08 00:15:35 +00:00
|
|
|
|
2016-12-31 17:37:10 +00:00
|
|
|
this.reset = function()
|
2016-12-31 17:18:01 +00:00
|
|
|
{
|
2018-02-06 19:16:01 +00:00
|
|
|
this.tool.clear();
|
2018-08-17 19:58:01 +00:00
|
|
|
this.refresh();
|
2016-12-31 17:18:01 +00:00
|
|
|
}
|
|
|
|
|
2017-11-07 21:40:13 +00:00
|
|
|
this.clear = function()
|
|
|
|
{
|
2018-02-04 21:09:46 +00:00
|
|
|
this.history.clear();
|
2018-02-06 19:16:01 +00:00
|
|
|
this.tool.reset();
|
2017-11-07 21:40:13 +00:00
|
|
|
this.reset();
|
2018-05-10 20:46:50 +00:00
|
|
|
dotgrid.guide.refresh();
|
2018-05-10 21:47:09 +00:00
|
|
|
dotgrid.interface.refresh(true);
|
2017-11-07 21:40:13 +00:00
|
|
|
}
|
|
|
|
|
2018-08-17 19:58:01 +00:00
|
|
|
this.refresh = function()
|
|
|
|
{
|
|
|
|
var size = {width:step(window.innerWidth-90,15),height:step(window.innerHeight-120,15)}
|
|
|
|
|
|
|
|
dotgrid.tool.settings.size.width = size.width
|
|
|
|
dotgrid.tool.settings.size.height = size.height
|
|
|
|
|
|
|
|
dotgrid.grid_x = size.width/15
|
|
|
|
dotgrid.grid_y = size.height/15
|
|
|
|
|
|
|
|
dotgrid.grid_width = dotgrid.tool.settings.size.width/dotgrid.grid_x;
|
|
|
|
dotgrid.grid_height = dotgrid.tool.settings.size.height/dotgrid.grid_y;
|
|
|
|
|
|
|
|
dotgrid.guide.resize(size);
|
|
|
|
|
|
|
|
dotgrid.interface.refresh();
|
|
|
|
dotgrid.guide.refresh();
|
|
|
|
}
|
|
|
|
|
2018-01-12 03:22:50 +00:00
|
|
|
this.drag = function(e)
|
|
|
|
{
|
|
|
|
e.preventDefault();
|
|
|
|
e.stopPropagation();
|
2018-07-08 00:15:35 +00:00
|
|
|
|
2018-01-12 03:22:50 +00:00
|
|
|
var file = e.dataTransfer.files[0];
|
|
|
|
|
2018-04-09 04:50:52 +00:00
|
|
|
if(!file.path || file.path.indexOf(".dot") < 0 && file.path.indexOf(".grid") < 0){ console.log("Dotgrid","Not a dot file"); return; }
|
2018-01-12 03:22:50 +00:00
|
|
|
|
|
|
|
var reader = new FileReader();
|
|
|
|
reader.onload = function(e){
|
2018-02-07 20:34:17 +00:00
|
|
|
dotgrid.tool.replace(JSON.parse(e.target.result.toString().trim()));
|
2018-05-10 20:46:50 +00:00
|
|
|
dotgrid.guide.refresh();
|
2018-01-12 03:22:50 +00:00
|
|
|
};
|
|
|
|
reader.readAsText(file);
|
|
|
|
}
|
|
|
|
|
2017-11-21 21:24:25 +00:00
|
|
|
this.copy = function(e)
|
|
|
|
{
|
2018-05-10 20:46:50 +00:00
|
|
|
dotgrid.guide.refresh();
|
2018-01-13 20:11:57 +00:00
|
|
|
|
2018-07-26 08:40:06 +00:00
|
|
|
if(e.target !== this.picker.el){
|
2018-07-26 06:56:06 +00:00
|
|
|
e.clipboardData.setData('text/source', dotgrid.tool.export(dotgrid.tool.layer()));
|
|
|
|
e.clipboardData.setData('text/plain', dotgrid.tool.path());
|
|
|
|
e.clipboardData.setData('text/html', dotgrid.renderer.to_svg());
|
|
|
|
e.clipboardData.setData('text/svg+xml', dotgrid.renderer.to_svg());
|
|
|
|
e.preventDefault();
|
|
|
|
}
|
2018-02-07 06:44:18 +00:00
|
|
|
|
2018-05-10 20:46:50 +00:00
|
|
|
dotgrid.guide.refresh();
|
2018-02-07 06:44:18 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
this.cut = function(e)
|
|
|
|
{
|
2018-05-10 20:46:50 +00:00
|
|
|
dotgrid.guide.refresh();
|
2018-02-07 06:44:18 +00:00
|
|
|
|
2018-07-26 08:40:06 +00:00
|
|
|
if(e.target !== this.picker.el){
|
2018-07-26 06:56:06 +00:00
|
|
|
e.clipboardData.setData('text/plain', dotgrid.tool.export(dotgrid.tool.layer()));
|
|
|
|
e.clipboardData.setData('text/html', dotgrid.renderer.to_svg());
|
|
|
|
e.clipboardData.setData('text/svg+xml', dotgrid.renderer.to_svg());
|
|
|
|
dotgrid.tool.layers[dotgrid.tool.index] = [];
|
|
|
|
e.preventDefault();
|
|
|
|
}
|
2018-02-07 06:44:18 +00:00
|
|
|
|
2018-05-10 20:46:50 +00:00
|
|
|
dotgrid.guide.refresh();
|
2017-11-21 21:24:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
this.paste = function(e)
|
|
|
|
{
|
2018-07-26 08:40:06 +00:00
|
|
|
if(e.target !== this.picker.el){
|
2018-07-26 06:56:06 +00:00
|
|
|
var data = e.clipboardData.getData("text/source");
|
|
|
|
if (is_json(data)) {
|
|
|
|
data = JSON.parse(data.trim());
|
|
|
|
dotgrid.tool.import(data);
|
|
|
|
}
|
|
|
|
e.preventDefault();
|
2018-05-08 01:32:06 +00:00
|
|
|
}
|
2018-07-08 00:15:35 +00:00
|
|
|
|
2018-05-10 20:46:50 +00:00
|
|
|
dotgrid.guide.refresh();
|
2017-11-21 21:24:25 +00:00
|
|
|
}
|
2017-11-06 04:35:29 +00:00
|
|
|
}
|
2017-11-07 02:10:09 +00:00
|
|
|
|
2017-11-12 21:47:34 +00:00
|
|
|
window.addEventListener('resize', function(e)
|
|
|
|
{
|
2018-08-17 19:58:01 +00:00
|
|
|
dotgrid.refresh();
|
2017-11-12 21:47:34 +00:00
|
|
|
}, false);
|
|
|
|
|
2018-01-12 03:22:50 +00:00
|
|
|
window.addEventListener('dragover',function(e)
|
2017-11-07 02:10:09 +00:00
|
|
|
{
|
|
|
|
e.stopPropagation();
|
2018-01-12 03:22:50 +00:00
|
|
|
e.preventDefault();
|
|
|
|
e.dataTransfer.dropEffect = 'copy';
|
2018-01-13 20:11:57 +00:00
|
|
|
});
|
2018-03-21 07:10:09 +00:00
|
|
|
|
|
|
|
String.prototype.capitalize = function()
|
|
|
|
{
|
|
|
|
return this.charAt(0).toUpperCase() + this.slice(1).toLowerCase();
|
2018-05-09 07:22:00 +00:00
|
|
|
}
|
2018-07-18 00:52:23 +00:00
|
|
|
|
|
|
|
function is_json(text){ try{ JSON.parse(text);return true; } catch(error){ return false; }}
|
|
|
|
function pos_is_equal(a,b){ return a && b && a.x == b.x && a.y == b.y }
|
|
|
|
function clamp(v, min, max) { return v < min ? min : v > max ? max : v; }
|
2018-08-02 22:57:35 +00:00
|
|
|
function step(v,s){ return Math.round(v/s) * s; }
|