diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..1cf4606
Binary files /dev/null and b/favicon.ico differ
diff --git a/main.html b/main.html
index cffdcc2..33134cb 100644
--- a/main.html
+++ b/main.html
@@ -3,7 +3,7 @@
Epicycles
-
+
@@ -20,7 +20,7 @@
-
Drag or browse for a file!
+
Drag or browse for a SVG file!
diff --git a/main.js b/main.js
index f131046..b106821 100644
--- a/main.js
+++ b/main.js
@@ -100,11 +100,8 @@ document.querySelectorAll("#clickFile input")[0].onchange = function() {
return;
}
var reader = new FileReader();
- reader.onload = function() {
- var el = document.createElement("div");
- el.innerHTML = reader.result;
- svg = Array.from(el.getElementsByTagName("path")).map(a=>a.getAttribute("d").replace(/(\n|\t)/g,"")).map(a=>a[0].toUpperCase() + a.substring(1)).reduce((a,b)=>a.concat(b));
- var [paths, range] = processSVG(svg);
+ reader.onload = function() {
+ var [paths, range] = processSVG(reader.result);
var oneSet = {
"name": file.name.replace(".svg","").substring(0,15),
"color": graphColors[Math.floor(Math.random()*graphColors.length)],
@@ -121,11 +118,9 @@ document.querySelectorAll("#clickFile input")[0].onchange = function() {
}
function fileDrop(e) {
-
e.preventDefault();
document.getElementById("setCont").className = "";
if(!e.dataTransfer.items) return;
- console.log(e.dataTransfer.items)
var diff = allSets.length;
for (var i = 0; i < e.dataTransfer.items.length; i++) {
var thisItem = e.dataTransfer.items[i];
@@ -140,10 +135,7 @@ function fileDrop(e) {
}
var reader = new FileReader();
reader.onload = function() {
- var el = document.createElement("div");
- el.innerHTML = reader.result;
- svg = Array.from(el.getElementsByTagName("path")).map(a=>a.getAttribute("d").replace(/(\n|\t)/g,"")).reduce((a,b)=>a.concat(b));
- var [paths, range] = processSVG(svg);
+ var [paths, range] = processSVG(reader.result);
var oneSet = {
"name": file.name.replace(".svg",""),
"color": graphColors[Math.floor(Math.random()*graphColors.length)],
@@ -915,8 +907,10 @@ function processSVG(svg) {
"Q": 2, "C": 3, "T": 1, "S": 2,
"A": 3
};
- var allPaths = svg.replace(/z/gi,"").split(/(?=M)/gi);
- console.log(allPaths.length);
+ var el = document.createElement("div");
+ el.innerHTML = svg;
+ var allPaths = Array.from(el.getElementsByTagName("path")).map(a=>a.getAttribute("d").replace(/(\n|\t)/g,"")).map(a=>a[0].toUpperCase() + a.substring(1)).reduce((a,b)=>a.concat(b));
+ allPaths = allPaths.replace(/z/gi,"").split(/(?=M)/gi);
var lastPoint = [0,0];
for(var k = 0; k < allPaths.length; k++) {
var processed = [];
@@ -931,12 +925,8 @@ function processSVG(svg) {
values = values[0].map((a,i)=>[a, (values[1][i]||0)]);
if(command.toUpperCase() === "V") values.reverse();
} else {
- alert("The A path command in the SVG is not supported! Please modify or change the SVG file to not contain the A command.")
- /*values = [
- values.filter((a,i)=>i%7===0||i%4===1),
- values.filter((a,i)=>i%7===2||i%7===3||i%7===4),
- values.filter((a,i)=>i%7===5||i%7===6)
- ].map(a=>a.map(b=>parseFloat(b)));*/
+ alert("The A path command in the SVG is not supported! Please modify or change the SVG file to not contain the A command.");
+ return [];
}
var len = commLength[command.toUpperCase()];
if(values.length !== len) {
@@ -947,7 +937,6 @@ function processSVG(svg) {
commList.push([command].concat(values));
}
}
- console.log([commList, k]);
for(var i = 0; i < commList.length; i++) {
var command = commList[i][0];
@@ -960,7 +949,6 @@ function processSVG(svg) {
var offset = relOff(arrOp(lastPoint, "*", rel), points);
if(command === "M") {
lastPoint = offset[0];
- console.log(lastPoint);
} else if(command === "T" || command === "S") {
var lastSet = processed[processed.length-1] || [lastPoint];
var len = lastSet.length;
@@ -980,9 +968,28 @@ function processSVG(svg) {
}
}
- if(k === 0) console.log(processed);
allPaths[k] = processed;
}
+
+ var polyPaths = Array.from(el.getElementsByTagName("polygon")).map(a=>a.getAttribute("points").replace(/(\n|\t)/g,"")).concat(
+ Array.from(el.getElementsByTagName("polyline")).map(a=>a.getAttribute("points").replace(/(\n|\t)/g,"")));
+ for(var k = 0; k < polyPaths.length; k++) {
+ var processed = [];
+ var values = polyPaths[k].match(/(-)?([0-9]+)(\.([0-9])+)?/gi);
+ values = [values.filter((a,i)=>i%2===0),values.filter((a,i)=>i%2===1)].map(a=>a.map(b=>parseFloat(b)));
+ values = values[0].map((a,i)=>[a, (values[1][i]||0)]);
+ for(var i = 0; i < values.length-1; i++) processed.push([values[i], values[i+1]]);
+ allPaths.push(processed);
+ }
+
+ var linePaths = Array.from(el.getElementsByTagName("line"));
+ for(var k = 0; k < linePaths.length; k++) {
+ var path = linePaths[k];
+ var line = [[parseFloat(path.getAttribute("x1")), parseFloat(path.getAttribute("y1"))],
+ [parseFloat(path.getAttribute("x2")), parseFloat(path.getAttribute("y2"))]];
+ allPaths.push([line].concat([line.slice().reverse()]));
+ }
+
var flat = allPaths.reduce((a,b)=>a.concat(b)).reduce((a,b)=>a.concat(b));
flat = flat[0].map((a,i)=>flat.map(b=>b[i]));
var range = [Math.max.apply(null, flat[0]), Math.max.apply(null, flat[1])];