Copied inital test-code from old repo

b8642216 · Julian Frosch · b8642216 · b8642216 · b8642216 · b8642216
Commit b8642216 authored Jan 11, 2016 by Julian Frosch
--- a/.gitignore
+++ b/.gitignore
+/node_modules
--- a/README.md
+++ b/README.md
+# SVG-test-app for node.js and electron
+This is a test-application written with node.js and electron as a possible alternative to the Java-approach for "BezLinApp".
+
+## How to start
+Before starting, npm is required.
+
+In order to test the program, clone the repo, cd into it's directory and run 
+```
+npm install
+```
+
+This will download the dependencies and create a folder *node_modules/* with their data.
+Next you can run
+```
+npm start
+```
+or
+```
+electron .
+```
+to start the application!
+
+## Using the test-app
+You will see the window with a *Hello World!*-Greeting and some text on the left and the developer-tools on the right.
+You can just drag an SVG-File (example-file is in the res/-folder) directly onto the "Drag your SVG-File here!"-Text on the left side. Once done, the program will read the data of the 2nd path in your file (may get an error warning if there is no such data... duh) and show the parsed data in the "console" on the right side :)
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Hello World!</title>
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+    We are using node <script>document.write(process.versions.node)</script>,
+    Chrome <script>document.write(process.versions.chrome)</script>,
+    and Electron <script>document.write(process.versions.electron)</script>.
+
+    <div id="svgHolder" class="holder">
+      Drag your svg-file here!
+    </div>
+
+    <p class="output"></p>
+
+    <script>window.$ = window.jQuery = require('./js/jquery.min.js');</script>
+    <script src="./js/script.js"></script>
+  </body>
+</html>
--- a/js/jquery.min.js
+++ b/js/jquery.min.js
--- a/js/parser/svg-parser.js
+++ b/js/parser/svg-parser.js
+var method = SVGParser.prototype;
+
+// empty constructor
+function SVGParser() {
+}
+
+/**
+  This function takes a path and a callback-function as parameters.
+  It then tries to open the file and parse it as an SVG file in order to extract
+  all paths and their "d"-attribute and then parse it into an array of commands.
+
+  It will call the callback with an array of all paths with the following structure:
+  result = [path1, path2, path3, ...];
+  where the paths are themselves arrays of commands:
+  path1 = [command1,command2, ...];
+  and the commands are arrays with their respective values:
+  command1 = [command, value, value, ...];
+  An example could look like this:
+  [[["m", 96, 363], ["C", 407, 189, 587, 328, 587, 328]], [...], ...]
+*/
+method.getSVGPaths = function(path, callback) {
+  var fs = require('fs'),
+    xml2js = require('xml2js'),
+    parse = require('parse-svg-path');
+
+  var parser = new xml2js.Parser();
+  fs.readFile(path, function(err, data) {
+      if (err) {
+        callback(err, null);
+      } else {
+        parser.parseString(data, function (err, result) {
+            if (err) {
+              callback(err, null);
+            } else {
+              var data = [];
+
+              var paths = result.svg.g[0].path;
+              for (var i = 0; i < paths.length; i++) {
+                var pathData = paths[i].$.d;
+                //console.dir(pathData);
+
+                var parsedPath = parse(pathData);
+                data.push(parsedPath);
+                //console.dir(parsedPath);
+                //console.log('Done');
+              }
+              callback(null, data);
+            }
+        });
+      }
+  });
+}
+
+module.exports = SVGParser;
--- a/js/script.js
+++ b/js/script.js
+$(function(){
+  // We have a portion in our GUI where the user can drop the SVG-file
+  var svgHolder = document.getElementById('svgHolder');
+  svgHolder.ondragover = function () {
+    return false;
+  };
+  svgHolder.ondragleave = svgHolder.ondragend = function () {
+    return false;
+  };
+  // When the user drops the file
+  svgHolder.ondrop = function (e) {
+    e.preventDefault();
+    var file = e.dataTransfer.files[0];
+    // TODO: check for filetype (maybe via regex)
+    
+    // TODO: remove
+    console.log('File you dragged here is', file.path);
+
+    var SVGParser = require("./js/parser/svg-parser.js");
+
+    var svgParser = new SVGParser();
+    var data = svgParser.getSVGPaths(file.path, function(err, result) {
+      if (err) {
+        console.log(err);
+      } else {
+        // Do something with the result
+        console.log("Data fetched, printing:");
+        console.dir(result);
+      }
+    });
+
+  };
+});
--- a/main.js
+++ b/main.js
+const electron = require('electron');
+const app = electron.app;  // Module to control application life.
+const BrowserWindow = electron.BrowserWindow;  // Module to create native browser window.
+
+// Report crashes to our server.
+electron.crashReporter.start();
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+var mainWindow = null;
+
+// Quit when all windows are closed.
+app.on('window-all-closed', function() {
+  // On OS X it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform != 'darwin') {
+    app.quit();
+  }
+});
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+app.on('ready', function() {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({width: 800, height: 600});
+
+  // and load the index.html of the app.
+  mainWindow.loadURL('file://' + __dirname + '/index.html');
+
+  // Open the DevTools.
+  mainWindow.webContents.openDevTools();
+
+  // Emitted when the window is closed.
+  mainWindow.on('closed', function() {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    mainWindow = null;
+  });
+});
--- a/package.json
+++ b/package.json
+{
+	"name"		:	"BezLinApp",
+	"version"	:	"0.1.0",
+	"main"		:	"main.js",
+	"dependencies": {
+		"xml2js" : "^0.4.15",
+		"parse-svg-path" : "^0.1.1"
+	},
+  "devDependencies": {
+    "electron-prebuilt": "^0.36.3"
+  },
+	"scripts": {
+		"start" : "electron main.js"
+	}
+}
--- a/res/test_plain.svg
+++ b/res/test_plain.svg
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="744.09448819"
+   height="1052.3622047"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="test_plain.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.98994949"
+     inkscape:cx="332.16833"
+     inkscape:cy="340.28752"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1600"
+     inkscape:window-height="873"
+     inkscape:window-x="1920"
+     inkscape:window-y="300"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 96.974644,363.43815 C 407.09148,189.69191 587.90878,328.08281 587.90878,328.08281"
+       id="path3805"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 58.588848,588.70216 C 333.35034,443.2402 364.66507,384.65135 538.41131,478.59554 c 173.74623,93.94418 173.74623,93.94418 173.74623,93.94418"
+       id="path3807"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 40.406102,887.70732 c 0,0 23.233508,-203.04066 275.771648,-219.2031 252.53813,-16.16245 211.12188,-8.08122 295.97469,104.04571 84.85282,112.12693 -215.16249,203.04066 -215.16249,203.04066"
+       id="path3809"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 345.47217,599.81384 c 42.42641,-31.31473 153.54319,-115.15739 117.1777,-42.4264 -36.3655,72.73098 -117.1777,42.4264 -117.1777,42.4264 z"
+       id="path3811"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>