From 39c030d6c2e4b21ece84444a737d925f201a9368 Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Tue, 28 Aug 2018 12:53:13 -0400 Subject: [PATCH] more svg features, favicon --- favicon.ico | Bin 0 -> 15086 bytes main.html | 4 ++-- main.js | 51 +++++++++++++++++++++++++++++---------------------- 3 files changed, 31 insertions(+), 24 deletions(-) create mode 100644 favicon.ico diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..1cf4606834160f5f409afc7a5e4d14e33d5f7ccf GIT binary patch literal 15086 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 B$OQlZ literal 0 HcmV?d00001 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])];