implement better viewer as example

example/SlicerViewer.js

@@ -0,0 +1,45 @@
+import React from 'react';
+
+export default class SlicerViewer extends React.Component {
+	state = {
+		slice: 0
+	};
+
+	changeSlider = (event) => {
+		this.setState({
+			...this.state,
+			slice: parseInt(event.target.value)
+		});
+	};
+
+	render() {
+		const { slice } = this.state;
+		const { layerIntersectionPoints, settings, layerShapes } = this.props;
+
+		const numLayers = settings.dimensionsZ / settings.layerHeight;
+
+		const intersectionPoints = layerIntersectionPoints[slice + 1];
+		const shape = layerShapes[slice];
+
+		return (
+			<div>
+				<svg viewBox={`-20 -20 ${settings.dimensionsX + 40} ${settings.dimensionsX + 40}`}>
+					<rect
+						width={settings.dimensionsX}
+						height={settings.dimensionsY}
+						fill="lightGrey"
+					/>
+					{intersectionPoints.map(({ x, y }, i) => <circle key={i} cx={x} cy={y} r="0.3"/>)}
+					{shape && shape.closedShapes.map((closedShape, i) => (
+						<polygon
+							key={i}
+							points={closedShape.map(({ x, y }) => `${x} ${y}`).join(' ')}
+							fill="rgba(255, 0, 0, 0.5)"
+						/>
+					))}
+				</svg>
+				<input onChange={this.changeSlider} value={slice} type="range" min="0" max={numLayers} />
+			</div>
+		);
+	}
+}

example/app.js

@@ -1,16 +1,24 @@
 import THREE from 'three.js';
-import * as SLICER from 'src/index';
+import React from 'react';
+import ReactDOM, { render } from 'react-dom';
+import * as SLICER from 'src/index.js';
+import generateRawData from './generateRawData.js';
+import SlicerViewer from './SlicerViewer.js';
 
 const settings = new SLICER.Settings({
 	...SLICER.printerSettings['ultimaker2go'],
 	...SLICER.userSettings
 });
 
-const geometry = new THREE.TorusGeometry(20, 10, 30, 30);
+const geometry = new THREE.TorusGeometry(20, 10, 30, 30).clone();
+geometry.applyMatrix(new THREE.Matrix4().setPosition(new THREE.Vector3(60, 0, 60)));
+geometry.mergeVertices();
+geometry.computeFaceNormals();
 
-const slicer = new SLICER.Slicer();
+const rawData = generateRawData(geometry, settings);
 
-slicer.setGeometry(geometry);
+render(<SlicerViewer
-slicer.slice(settings).then(gcode => {
+	layerIntersectionPoints={rawData.layerIntersectionPoints}
-	document.getElementById('gcode').innerHTML = gcode.replace(/(?:\r\n|\r|\n)/g, '<br />');
+	layerShapes={rawData.layerShapes}
-});
+	settings={settings.config}
+/>, document.getElementById('container'));

example/generateRawData.js

@@ -0,0 +1,54 @@
+import calculateLayersIntersections from 'src/sliceActions/calculateLayersIntersections.js';
+import createLines from 'src/sliceActions/createLines.js';
+import generateInfills from 'src/sliceActions/generateInfills.js';
+import generateInnerLines from 'src/sliceActions/generateInnerLines.js';
+import generateSupport from 'src/sliceActions/generateSupport.js';
+import intersectionsToShapes from 'src/sliceActions/intersectionsToShapes.js';
+import addBrim from 'src/sliceActions/addBrim.js';
+import optimizePaths from 'src/sliceActions/optimizePaths.js';
+import shapesToSlices from 'src/sliceActions/shapesToSlices.js';
+import slicesToGCode from 'src/sliceActions/slicesToGCode.js';
+import applyPrecision from 'src/sliceActions/applyPrecision.js';
+import removePrecision from 'src/sliceActions/removePrecision.js';
+
+export default function generateRawData(geometry, settings) {
+	const rawData = {};
+
+	const lines = createLines(geometry, settings);
+
+	const {
+	  layerIntersectionIndexes,
+	  layerIntersectionPoints
+	} = calculateLayersIntersections(lines, settings);
+
+	rawData.layerIntersectionPoints = layerIntersectionPoints
+		.map(intersectionPoints => intersectionPoints.map(intersectionPoint => intersectionPoint.clone()));
+
+	const layerShapes = intersectionsToShapes(layerIntersectionIndexes, layerIntersectionPoints, lines, settings);
+
+	rawData.layerShapes = layerShapes
+		.map(({ closedShapes, openShapes }) => ({
+			closedShapes: closedShapes.map(closedShape => closedShape.map(vector => vector.clone())),
+			openShapes: openShapes.map(openShape => openShape.map(vector => vector.clone()))
+		}));
+
+
+	applyPrecision(layerShapes);
+
+	const slices = shapesToSlices(layerShapes, settings);
+
+	generateInnerLines(slices, settings);
+	generateInfills(slices, settings);
+	generateSupport(slices, settings);
+	addBrim(slices, settings);
+	optimizePaths(slices, settings);
+	removePrecision(slices);
+
+	rawData.slices = slices;
+
+	const gcode = slicesToGCode(slices, settings);
+
+	rawData.gcode = gcode;
+
+	return rawData;
+}

example/index.html

@@ -13,6 +13,8 @@
 		<script type="text/javascript" src="../jspm_packages/system.js"></script>
 		<script type="text/javascript" src="../jspm.config.js"></script>
 
+		<link href="main.css" rel="stylesheet"/>
+
 		<script type="text/javascript">
 			System.import('example/app.js');
 		</script>
@@ -21,7 +23,7 @@
 
 	<body>
 
-	<p id="gcode"></p>
+	<div id="container"></div>
 
 	</body>
 </html>

example/main.css

@@ -0,0 +1,21 @@
+* {
+	margin: 0;
+	padding: 0;
+}
+
+#container {
+	position: relative;
+}
+
+#container, svg {
+	width: 100%;
+	height: 100%;
+}
+
+svg, input {
+	position: absolute;
+}
+
+input {
+	width: 100%;
+}

jspm.config.js

@@ -2,6 +2,7 @@ SystemJS.config({
   paths: {
     "github:": "jspm_packages/github/",
     "npm:": "jspm_packages/npm/",
+    "example/": "example/",
     "slicer/": "src/"
   },
   browserConfig: {
@@ -11,11 +12,107 @@ SystemJS.config({
     "map": {
       "babel-runtime": "npm:babel-runtime@5.8.38",
       "core-js": "npm:core-js@1.2.7",
-      "plugin-babel": "npm:systemjs-plugin-babel@0.0.12"
+      "plugin-babel": "npm:systemjs-plugin-babel@0.0.12",
+      "react": "npm:react@15.3.2",
+      "domain": "github:jspm/nodelibs-domain@0.2.0-alpha",
+      "zlib": "github:jspm/nodelibs-zlib@0.2.0-alpha",
+      "https": "github:jspm/nodelibs-https@0.2.0-alpha",
+      "react-dom": "npm:react-dom@15.3.2",
+      "babel-plugin-transform-react-jsx": "npm:babel-plugin-transform-react-jsx@6.8.0"
     },
     "packages": {
       "npm:babel-runtime@5.8.38": {
         "map": {}
+      },
+      "npm:react@15.3.2": {
+        "map": {
+          "object-assign": "npm:object-assign@4.1.0",
+          "loose-envify": "npm:loose-envify@1.2.0",
+          "fbjs": "npm:fbjs@0.8.5"
+        }
+      },
+      "npm:fbjs@0.8.5": {
+        "map": {
+          "loose-envify": "npm:loose-envify@1.2.0",
+          "object-assign": "npm:object-assign@4.1.0",
+          "promise": "npm:promise@7.1.1",
+          "isomorphic-fetch": "npm:isomorphic-fetch@2.2.1",
+          "ua-parser-js": "npm:ua-parser-js@0.7.10",
+          "immutable": "npm:immutable@3.8.1",
+          "core-js": "npm:core-js@1.2.7"
+        }
+      },
+      "npm:loose-envify@1.2.0": {
+        "map": {
+          "js-tokens": "npm:js-tokens@1.0.3"
+        }
+      },
+      "npm:promise@7.1.1": {
+        "map": {
+          "asap": "npm:asap@2.0.5"
+        }
+      },
+      "npm:isomorphic-fetch@2.2.1": {
+        "map": {
+          "whatwg-fetch": "npm:whatwg-fetch@1.0.0",
+          "node-fetch": "npm:node-fetch@1.6.3"
+        }
+      },
+      "npm:node-fetch@1.6.3": {
+        "map": {
+          "encoding": "npm:encoding@0.1.12",
+          "is-stream": "npm:is-stream@1.1.0"
+        }
+      },
+      "npm:encoding@0.1.12": {
+        "map": {
+          "iconv-lite": "npm:iconv-lite@0.4.13"
+        }
+      },
+      "github:jspm/nodelibs-domain@0.2.0-alpha": {
+        "map": {
+          "domain-browserify": "npm:domain-browser@1.1.7"
+        }
+      },
+      "github:jspm/nodelibs-zlib@0.2.0-alpha": {
+        "map": {
+          "zlib-browserify": "npm:browserify-zlib@0.1.4"
+        }
+      },
+      "npm:browserify-zlib@0.1.4": {
+        "map": {
+          "readable-stream": "npm:readable-stream@2.1.5",
+          "pako": "npm:pako@0.2.9"
+        }
+      },
+      "npm:babel-plugin-transform-react-jsx@6.8.0": {
+        "map": {
+          "babel-helper-builder-react-jsx": "npm:babel-helper-builder-react-jsx@6.9.0",
+          "babel-plugin-syntax-jsx": "npm:babel-plugin-syntax-jsx@6.13.0",
+          "babel-runtime": "npm:babel-runtime@6.11.6"
+        }
+      },
+      "npm:babel-helper-builder-react-jsx@6.9.0": {
+        "map": {
+          "babel-runtime": "npm:babel-runtime@6.11.6",
+          "esutils": "npm:esutils@2.0.2",
+          "babel-types": "npm:babel-types@6.16.0",
+          "lodash": "npm:lodash@4.16.4"
+        }
+      },
+      "npm:babel-runtime@6.11.6": {
+        "map": {
+          "core-js": "npm:core-js@2.4.1",
+          "regenerator-runtime": "npm:regenerator-runtime@0.9.5"
+        }
+      },
+      "npm:babel-types@6.16.0": {
+        "map": {
+          "lodash": "npm:lodash@4.16.4",
+          "babel-runtime": "npm:babel-runtime@6.11.6",
+          "esutils": "npm:esutils@2.0.2",
+          "to-fast-properties": "npm:to-fast-properties@1.0.2"
+        }
       }
     }
   },
@@ -23,6 +120,21 @@ SystemJS.config({
   packages: {
     "slicer": {
       "main": "index.js"
+    },
+    "example": {
+      "main": "example/index.js",
+      "format": "esm",
+      "meta": {
+        "*.js": {
+          "loader": "plugin-babel",
+          "babelOptions": {
+            "stage1": true,
+            "plugins": [
+              "babel-plugin-transform-react-jsx"
+            ]
+          }
+        }
+      }
     }
   },
   map: {
@@ -91,12 +203,12 @@ SystemJS.config({
     },
     "github:jspm/nodelibs-http@0.2.0-alpha": {
       "map": {
-        "http-browserify": "npm:stream-http@2.3.1"
+        "http-browserify": "npm:stream-http@2.4.0"
       }
     },
     "npm:stream-browserify@2.0.1": {
       "map": {
-        "inherits": "npm:inherits@2.0.1",
+        "inherits": "npm:inherits@2.0.3",
         "readable-stream": "npm:readable-stream@2.1.5"
       }
     },
@@ -107,18 +219,9 @@ SystemJS.config({
     },
     "npm:buffer@4.9.1": {
       "map": {
-        "base64-js": "npm:base64-js@1.1.2",
+        "base64-js": "npm:base64-js@1.2.0",
         "isarray": "npm:isarray@1.0.0",
-        "ieee754": "npm:ieee754@1.1.6"
+        "ieee754": "npm:ieee754@1.1.8"
-      }
-    },
-    "npm:stream-http@2.3.1": {
-      "map": {
-        "inherits": "npm:inherits@2.0.1",
-        "readable-stream": "npm:readable-stream@2.1.5",
-        "builtin-status-codes": "npm:builtin-status-codes@2.0.0",
-        "to-arraybuffer": "npm:to-arraybuffer@1.0.1",
-        "xtend": "npm:xtend@4.0.1"
       }
     },
     "npm:url@0.11.0": {
@@ -130,7 +233,7 @@ SystemJS.config({
     "npm:readable-stream@2.1.5": {
       "map": {
         "string_decoder": "npm:string_decoder@0.10.31",
-        "inherits": "npm:inherits@2.0.1",
+        "inherits": "npm:inherits@2.0.3",
         "isarray": "npm:isarray@1.0.0",
         "buffer-shims": "npm:buffer-shims@1.0.0",
         "core-util-is": "npm:core-util-is@1.0.2",
@@ -140,11 +243,11 @@ SystemJS.config({
     },
     "npm:crypto-browserify@3.11.0": {
       "map": {
-        "inherits": "npm:inherits@2.0.1",
+        "inherits": "npm:inherits@2.0.3",
         "browserify-cipher": "npm:browserify-cipher@1.0.0",
         "create-hash": "npm:create-hash@1.1.2",
         "browserify-sign": "npm:browserify-sign@4.0.0",
-        "pbkdf2": "npm:pbkdf2@3.0.4",
+        "pbkdf2": "npm:pbkdf2@3.0.9",
         "public-encrypt": "npm:public-encrypt@4.0.0",
         "randombytes": "npm:randombytes@2.0.3",
         "diffie-hellman": "npm:diffie-hellman@5.0.2",
@@ -155,19 +258,19 @@ SystemJS.config({
     "npm:browserify-sign@4.0.0": {
       "map": {
         "create-hash": "npm:create-hash@1.1.2",
-        "inherits": "npm:inherits@2.0.1",
+        "inherits": "npm:inherits@2.0.3",
         "create-hmac": "npm:create-hmac@1.1.4",
         "parse-asn1": "npm:parse-asn1@5.0.0",
-        "elliptic": "npm:elliptic@6.3.1",
+        "elliptic": "npm:elliptic@6.3.2",
         "bn.js": "npm:bn.js@4.11.6",
         "browserify-rsa": "npm:browserify-rsa@4.0.1"
       }
     },
     "npm:create-hash@1.1.2": {
       "map": {
-        "inherits": "npm:inherits@2.0.1",
+        "inherits": "npm:inherits@2.0.3",
         "ripemd160": "npm:ripemd160@1.0.1",
-        "cipher-base": "npm:cipher-base@1.0.2",
+        "cipher-base": "npm:cipher-base@1.0.3",
         "sha.js": "npm:sha.js@2.4.5"
       }
     },
@@ -180,11 +283,6 @@ SystemJS.config({
         "browserify-rsa": "npm:browserify-rsa@4.0.1"
       }
     },
-    "npm:pbkdf2@3.0.4": {
-      "map": {
-        "create-hmac": "npm:create-hmac@1.1.4"
-      }
-    },
     "npm:diffie-hellman@5.0.2": {
       "map": {
         "randombytes": "npm:randombytes@2.0.3",
@@ -195,7 +293,7 @@ SystemJS.config({
     "npm:create-hmac@1.1.4": {
       "map": {
         "create-hash": "npm:create-hash@1.1.2",
-        "inherits": "npm:inherits@2.0.1"
+        "inherits": "npm:inherits@2.0.3"
       }
     },
     "npm:browserify-cipher@1.0.0": {
@@ -207,23 +305,23 @@ SystemJS.config({
     },
     "npm:create-ecdh@4.0.0": {
       "map": {
-        "elliptic": "npm:elliptic@6.3.1",
+        "elliptic": "npm:elliptic@6.3.2",
         "bn.js": "npm:bn.js@4.11.6"
       }
     },
     "npm:parse-asn1@5.0.0": {
       "map": {
         "create-hash": "npm:create-hash@1.1.2",
-        "pbkdf2": "npm:pbkdf2@3.0.4",
+        "pbkdf2": "npm:pbkdf2@3.0.9",
         "browserify-aes": "npm:browserify-aes@1.0.6",
         "evp_bytestokey": "npm:evp_bytestokey@1.0.0",
-        "asn1.js": "npm:asn1.js@4.8.0"
+        "asn1.js": "npm:asn1.js@4.8.1"
       }
     },
     "npm:browserify-des@1.0.0": {
       "map": {
-        "inherits": "npm:inherits@2.0.1",
+        "inherits": "npm:inherits@2.0.3",
-        "cipher-base": "npm:cipher-base@1.0.2",
+        "cipher-base": "npm:cipher-base@1.0.3",
         "des.js": "npm:des.js@1.0.0"
       }
     },
@@ -236,27 +334,14 @@ SystemJS.config({
       "map": {
         "create-hash": "npm:create-hash@1.1.2",
         "evp_bytestokey": "npm:evp_bytestokey@1.0.0",
-        "inherits": "npm:inherits@2.0.1",
+        "inherits": "npm:inherits@2.0.3",
-        "cipher-base": "npm:cipher-base@1.0.2",
+        "cipher-base": "npm:cipher-base@1.0.3",
         "buffer-xor": "npm:buffer-xor@1.0.3"
       }
     },
-    "npm:elliptic@6.3.1": {
-      "map": {
-        "bn.js": "npm:bn.js@4.11.6",
-        "inherits": "npm:inherits@2.0.1",
-        "hash.js": "npm:hash.js@1.0.3",
-        "brorand": "npm:brorand@1.0.5"
-      }
-    },
-    "npm:cipher-base@1.0.2": {
-      "map": {
-        "inherits": "npm:inherits@2.0.1"
-      }
-    },
     "npm:sha.js@2.4.5": {
       "map": {
-        "inherits": "npm:inherits@2.0.1"
+        "inherits": "npm:inherits@2.0.3"
       }
     },
     "npm:browserify-rsa@4.0.1": {
@@ -268,31 +353,58 @@ SystemJS.config({
     "npm:miller-rabin@4.0.0": {
       "map": {
         "bn.js": "npm:bn.js@4.11.6",
-        "brorand": "npm:brorand@1.0.5"
+        "brorand": "npm:brorand@1.0.6"
       }
     },
     "npm:des.js@1.0.0": {
       "map": {
-        "inherits": "npm:inherits@2.0.1",
+        "inherits": "npm:inherits@2.0.3",
-        "minimalistic-assert": "npm:minimalistic-assert@1.0.0"
-      }
-    },
-    "npm:asn1.js@4.8.0": {
-      "map": {
-        "bn.js": "npm:bn.js@4.11.6",
-        "inherits": "npm:inherits@2.0.1",
         "minimalistic-assert": "npm:minimalistic-assert@1.0.0"
       }
     },
     "npm:hash.js@1.0.3": {
       "map": {
-        "inherits": "npm:inherits@2.0.1"
+        "inherits": "npm:inherits@2.0.3"
       }
     },
     "github:jspm/nodelibs-os@0.2.0-alpha": {
       "map": {
         "os-browserify": "npm:os-browserify@0.2.1"
       }
+    },
+    "npm:pbkdf2@3.0.9": {
+      "map": {
+        "create-hmac": "npm:create-hmac@1.1.4"
+      }
+    },
+    "npm:elliptic@6.3.2": {
+      "map": {
+        "bn.js": "npm:bn.js@4.11.6",
+        "inherits": "npm:inherits@2.0.3",
+        "brorand": "npm:brorand@1.0.6",
+        "hash.js": "npm:hash.js@1.0.3"
+      }
+    },
+    "npm:cipher-base@1.0.3": {
+      "map": {
+        "inherits": "npm:inherits@2.0.3"
+      }
+    },
+    "npm:asn1.js@4.8.1": {
+      "map": {
+        "bn.js": "npm:bn.js@4.11.6",
+        "inherits": "npm:inherits@2.0.3",
+        "minimalistic-assert": "npm:minimalistic-assert@1.0.0"
+      }
+    },
+    "npm:stream-http@2.4.0": {
+      "map": {
+        "inherits": "npm:inherits@2.0.3",
+        "readable-stream": "npm:readable-stream@2.1.5",
+        "to-arraybuffer": "npm:to-arraybuffer@1.0.1",
+        "builtin-status-codes": "npm:builtin-status-codes@2.0.0",
+        "xtend": "npm:xtend@4.0.1"
+      }
     }
   }
 });

package.json

@@ -12,9 +12,15 @@
       "worker": "github:casperlamboo/plugin-worker@master"
     },
     "devDependencies": {
+      "babel-plugin-transform-react-jsx": "npm:babel-plugin-transform-react-jsx@^6.8.0",
       "babel-runtime": "npm:babel-runtime@^5.1.13",
       "core-js": "npm:core-js@^1.2.0",
-      "plugin-babel": "npm:systemjs-plugin-babel@^0.0.12"
+      "domain": "github:jspm/nodelibs-domain@^0.2.0-alpha",
+      "https": "github:jspm/nodelibs-https@^0.2.0-alpha",
+      "plugin-babel": "npm:systemjs-plugin-babel@^0.0.12",
+      "react": "npm:react@^15.3.2",
+      "react-dom": "npm:react-dom@^15.3.2",
+      "zlib": "github:jspm/nodelibs-zlib@^0.2.0-alpha"
     },
     "peerDependencies": {
       "assert": "github:jspm/nodelibs-assert@^0.2.0-alpha",
@@ -44,10 +50,25 @@
           "core-js": "^1.2.0"
         }
       },
-      "npm:inherits@2.0.1": {
+      "npm:browserify-zlib@0.1.4": {
+        "dependencies": {
+          "readable-stream": "^2.0.2",
+          "pako": "~0.2.0"
+        },
+        "map": {
+          "_stream_transform": "readable-stream/transform"
+        }
+      },
+      "npm:inherits@2.0.3": {
         "ignore": [
           "test.js"
         ]
+      },
+      "npm:lodash@4.16.4": {
+        "map": {
+          "buffer": "@empty",
+          "process": "@empty"
+        }
       }
     }
   },