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

Improved save/load

Browse Source
This commit is contained in:
Devine Lu Linvega
2018-01-12 16:22:50 +13:00
parent 47151452b4
commit 06968a57d2
4 changed files with 114 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
sources/scripts/dotgrid.js
View File

@@ -51,9 +51,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.scale = 1
this.install = function()
{
document.body.appendChild(this.theme.el);
{
document.getElementById("app").appendChild(this.wrapper);
this.wrapper.appendChild(this.element);
this.element.appendChild(this.guide.el);
@@ -88,7 +86,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
// Vector
this.svg_el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
this.svg_el.setAttribute("class","vector fh");
this.svg_el.setAttribute("class","vector");
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");
@@ -104,7 +102,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
// Preview
this.preview_el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
this.preview_el.id = "preview"
this.preview_el.setAttribute("class","vector fh");
this.preview_el.setAttribute("class","vector");
this.preview_el.setAttribute("width",this.width+"px");
this.preview_el.setAttribute("height",this.height+"px");
this.preview_el.setAttribute("xmlns","http://www.w3.org/2000/svg");
@@ -127,7 +125,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.guide.start();
this.interface.start();
dotgrid.set_size({width:300,height:300})
window.addEventListener('drop', dotgrid.drag);
dotgrid.set_size({width:300,height:300});
this.draw();
}
@@ -534,73 +534,63 @@ 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.draw()
this.draw();
// Override fill color
if(dotgrid.fill){ dotgrid.svg_el.style.fill = "black" }
if(dotgrid.fill){ dotgrid.svg_el.style.fill = "black"; dotgrid.render.draw(); }
var svg = this.svg_el.outerHTML
var svg = dotgrid.svg_el.outerHTML;
dialog.showSaveDialog((fileName) => {
if (fileName === undefined){ return; }
fs.writeFile(fileName+".svg", svg, (err) => {
if(err){ alert("An error ocurred creating the file "+ err.message); return; }
});
fs.writeFile(fileName+".svg", svg);
fs.writeFile(fileName+'.png', dotgrid.render.buffer());
fs.writeFile(fileName+'.dot', JSON.stringify(dotgrid.serializer.serialize()));
dotgrid.draw()
});
}
this.load = function()
this.open = function()
{
this.scale = 1;
this.width = 300;
this.height = 300;
var paths = dialog.showOpenDialog({properties: ['openFile'],filters:[{name:"Dotgrid Image",extensions:["dot"]}]});
dialog.showOpenDialog({
openFile: true,
openDirectory: false,
multiSelections: false,
filters: [
{ name: "Dotgrid Image", extensions: ["dot"] },
{ name: "All Files", extensions: ["*"] }
]
}, (filePaths) => {
if (filePaths === undefined || filePaths.length === 0)
return;
fs.readFile(filePaths[0], (err, data) => {
if (err) {
alert("An error ocurred creating the file " + err.message);
return;
}
dotgrid.serializer.deserialize(JSON.parse(data.toString().trim()));
dotgrid.draw();
});
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; }
dotgrid.serializer.deserialize(JSON.parse(data.toString().trim()));
dotgrid.draw();
});
}
this.drag = function(e)
{
e.preventDefault();
e.stopPropagation();
var file = e.dataTransfer.files[0];
if(!file.name || !file.name.indexOf(".dot") < 0){ console.log("Dotgrid","Not a dot file"); return; }
var reader = new FileReader();
reader.onload = function(e){
dotgrid.serializer.deserialize(JSON.parse(e.target.result.toString().trim()));
dotgrid.draw();
};
reader.readAsText(file);
}
this.copy = function(e)
{
if(this.segments.length == 0){ return; }
this.scale = 1
this.width = 300
this.height = 300
this.draw()
this.draw();
var svg = this.svg_el.outerHTML
e.clipboardData.items.add(JSON.stringify(this.serializer.serialize()), "text/plain");
e.clipboardData.items.add(svg, "text/html");
e.clipboardData.items.add(svg, "text/svg+xml");
// Right now, the following doesn't work and breaks "text/plain".
// This seems to be a bug in Chromium as others around the web complain, too.
/*
e.clipboardData.items.add(new File([new Blob([svg], { type: "image/svg+xml" } )], "image.svg"));
e.clipboardData.items.add(new File([new Blob([Uint8Array.from(dotgrid.render.buffer()).buffer], { type: "image/png" } ) ], "image.png"));
*/
e.preventDefault();
}
@@ -658,51 +648,14 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
}
}
window.addEventListener('dragover',function(e)
{
e.preventDefault();
e.stopPropagation();
e.dataTransfer.dropEffect = 'copy';
});
window.addEventListener('resize', function(e)
{
dotgrid.draw()
}, false);
window.addEventListener('drop', function(e)
window.addEventListener('dragover',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) {
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);
continue;
}
if(file.name.indexOf(".dot") > -1) {
var path = file.path;
var reader = new FileReader();
reader.onload = function(e){
var o = JSON.parse(e.target.result);
dotgrid.serializer.deserialize(o);
dotgrid.draw();
};
reader.readAsText(file);
continue;
}
console.log("skipped",file);
return;
}
});
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
});

6
sources/scripts/keyboard.js
View File

@@ -11,24 +11,28 @@ function Keyboard()
// save
if(e.key == "s" && (e.ctrlKey || e.metaKey)){
e.preventDefault();
dotgrid.export();
return;
}
// open
if(e.key == "o" && (e.ctrlKey || e.metaKey)){
dotgrid.load();
e.preventDefault();
dotgrid.open();
return;
}
// undo
if(e.key == "z" && (e.ctrlKey || e.metaKey)){
e.preventDefault();
dotgrid.erase();
return;
}
// new
if(e.key == "n" && (e.ctrlKey || e.metaKey)){
e.preventDefault();
dotgrid.clear();
return;
}

90
sources/scripts/theme.js
View File

@@ -1,70 +1,60 @@
function Theme()
{
this.el = document.createElement("style");
this.active = null;
this.default = { background: "#222", f_high: "#fff", f_med: "#777", f_low: "#444", f_inv: "#affec7", b_high: "#000", b_med: "#affec7", b_low: "#000", b_inv: "#affec7" }
this.el.type = 'text/css';
this.default = { background: "#222", f_high: "#fff", f_med: "#777", f_low: "#444", f_inv: "#000", b_high: "#000", b_med: "#affec7", b_low: "#000", b_inv: "#affec7" }
this.active = this.default;
this.start = function()
{
if(localStorage.theme && is_json(localStorage.theme)){
console.log("Theme","Found in localStorage")
this.install(JSON.parse(localStorage.theme));
}
else{
console.log("Theme","Creating new")
this.install(this.default);
}
this.load(localStorage.theme ? localStorage.theme : this.default);
document.head.appendChild(this.el)
window.addEventListener('drop', dotgrid.theme.drag);
}
this.save = function()
this.load = function(t)
{
localStorage.setItem("theme", JSON.stringify(this.active));
console.log("Theme","Saved");
}
var theme = is_json(t) ? JSON.parse(t) : t;
this.load = function(theme_str)
{
if(is_json(theme_str)){
this.install(JSON.parse(theme_str));
}
console.log("Theme","Loaded");
}
if(!theme.background){ return; }
this.install = function(theme)
{
var html = "";
var css = `
:root {
--background: ${theme.background};
--f_high: ${theme.f_high};
--f_med: ${theme.f_med};
--f_low: ${theme.f_low};
--f_inv: ${theme.f_inv};
--b_high: ${theme.b_high};
--b_med: ${theme.b_med};
--b_low: ${theme.b_low};
--b_inv: ${theme.b_inv};
}`;
this.active = theme;
html += "body { background:"+theme.background+" !important }\n";
html += ".fh { color:"+theme.f_high+" !important; stroke:"+theme.f_high+" !important }\n";
html += ".fm { color:"+theme.f_med+" !important ; stroke:"+theme.f_med+" !important }\n";
html += ".fl { color:"+theme.f_low+" !important ; stroke:"+theme.f_low+" !important }\n";
html += ".f_inv { color:"+theme.f_inv+" !important ; stroke:"+theme.f_inv+" !important }\n";
html += ".f_inv { color:"+theme.f_inv+" !important ; stroke:"+theme.f_inv+" !important }\n";
html += ".bh { background:"+theme.b_high+" !important; fill:"+theme.b_high+" !important }\n";
html += ".bm { background:"+theme.b_med+" !important ; fill:"+theme.b_med+" !important }\n";
html += ".bl { background:"+theme.b_low+" !important ; fill:"+theme.b_low+" !important }\n";
html += ".b_inv { background:"+theme.b_inv+" !important ; fill:"+theme.b_inv+" !important }\n";
html += ".icon { color:"+theme.f_high+" !important; stroke:"+theme.f_high+" !important }\n";
html += "#dotgrid svg.vector { fill:"+theme.f_high+" }\n";
html += "#dotgrid #preview { stroke:"+theme.f_low+" !important} \n";
html += "#dotgrid #cursor { border-color:"+theme.f_med+"}\n";
html += "#dotgrid #cursor_from { background:"+theme.f_low+"; border-color:"+theme.f_low+"}\n";
html += "#dotgrid #cursor_to { background:"+theme.f_low+"; border-color:"+theme.f_low+"}\n";
html += "#dotgrid #cursor_end { background:"+theme.f_low+"; border-color:"+theme.f_low+"}\n";
this.el.innerHTML = html;
this.save();
this.el.textContent = css;
localStorage.setItem("theme", JSON.stringify(theme));
}
this.reset = function()
{
console.log("Theme","reset");
this.install(this.default);
this.load(this.default);
}
this.drag = function(e)
{
e.preventDefault();
e.stopPropagation();
var file = e.dataTransfer.files[0];
if(!file.name || !file.name.indexOf(".thm") < 0){ console.log("Theme","Not a theme"); return; }
var reader = new FileReader();
reader.onload = function(e){
dotgrid.theme.load(e.target.result);
};
reader.readAsText(file);
}
function is_json(text)