update slicer viewer

example/SlicerViewer.js

@@ -1,25 +1,45 @@
 import React from 'react';
+import { PRECISION } from '../src/constants.js';
+import {ReactSVGPanZoom} from 'react-svg-pan-zoom';
 
 export default class SlicerViewer extends React.Component {
   state = {
-    slice: 0
+    layer: 0,
+    render: {
+      renderIntersectionPoints: false,
+      renderShape1: false,
+      renderShape2: true,
+      renderOuterLine: true,
+      renderInnerLine: true,
+      renderFill: true
+    }
   };
 
   changeSlider = (event) => {
     this.setState({
-      ...this.state,
-      slice: parseInt(event.target.value)
+      layer: parseInt(event.target.value)
+    });
+  };
+
+  onControl = (event) => {
+    const section = event.target.value;
+    this.setState({
+      render: {
+        ...this.state.render,
+        [section]: !this.state.render[section]
+      }
     });
   };
 
   render() {
-    const { slice } = this.state;
-    const { layerIntersectionPoints, settings, layerShapes } = this.props;
+    const { layer, render } = this.state;
+    const { layerIntersectionPoints, settings, layerShapes, slices } = this.props;
 
     const numLayers = settings.dimensionsZ / settings.layerHeight;
 
-    const intersectionPoints = layerIntersectionPoints[slice + 1];
-    const shape = layerShapes[slice];
+    const intersectionPoints = layerIntersectionPoints[layer + 1];
+    const shape = layerShapes[layer];
+    const slice = slices[layer];
 
     return (
       <div>
@@ -29,17 +49,81 @@ export default class SlicerViewer extends React.Component {
             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) => (
+          {render.renderIntersectionPoints && intersectionPoints.map(({ x, y }, i) => (
+            <circle key={i} cx={x} cy={y} r="0.3"/>
+          ))}
+          {render.renderShape1 && shape && shape.closedShapes.map((closedShape, i) => (
             <polygon
               key={i}
               points={closedShape.map(({ x, y }) => `${x} ${y}`).join(' ')}
               fill="rgba(255, 0, 0, 0.5)"
             />
           ))}
+          {slice && slice.parts.map((slicePart, i) => (
+            <g key={i}>
+              {render.renderShape2 && <ClipperShapeSVG
+                shape={slicePart.shape}
+                scale={PRECISION}
+                color="rgba(0, 0, 0, 0.5)"
+                fill
+              />}
+              {render.renderOuterLine && <ClipperShapeSVG
+                shape={slicePart.outerLine}
+                scale={1.0}
+                color="blue"
+                strokeWidth={settings.nozzleDiameter * 0.9}
+              />}
+              {render.renderInnerLine && slicePart.innerLines.map((innerLine, i) => (
+                <ClipperShapeSVG
+                  key={i}
+                  shape={innerLine}
+                  scale={1.0}
+                  color="red"
+                  strokeWidth={settings.nozzleDiameter * 0.9}
+                />
+              ))}
+              {render.renderFill && <ClipperShapeSVG
+                shape={slicePart.fill}
+                scale={1.0}
+                color="yellow"
+                strokeWidth={settings.nozzleDiameter * 0.9}
+              />}
+            </g>
+          ))}
         </svg>
-        <input onChange={this.changeSlider} value={slice} type="range" min="0" max={numLayers} />
+        <div id="controls">
+          <input onChange={this.changeSlider} value={layer} type="range" min="0" max={numLayers} />
+          <p>Layer: {layer}</p>
+          <p><label><input type="checkbox" value="renderIntersectionPoints" onChange={this.onControl} checked={render.renderIntersectionPoints} />Render Intersection Points</label></p>
+          <p><label><input type="checkbox" value="renderShape1" onChange={this.onControl} checked={render.renderShape1} />Render Shape 1</label></p>
+          <p><label><input type="checkbox" value="renderShape2" onChange={this.onControl} checked={render.renderShape2} />Render Shape 2</label></p>
+          <p><label><input type="checkbox" value="renderOuterLine" onChange={this.onControl} checked={render.renderOuterLine} />Render Out Line</label></p>
+          <p><label><input type="checkbox" value="renderInnerLine" onChange={this.onControl} checked={render.renderInnerLine} />Render Inner Lines</label></p>
+          <p><label><input type="checkbox" value="renderFill" onChange={this.onControl} checked={render.renderFill} />Render Fill</label></p>
+        </div>
       </div>
     );
   }
 }
+
+class ClipperShapeSVG extends React.Component {
+  render() {
+    const { shape, color = 'black', strokeWidth, scale, fill } = this.props;
+
+    const data = shape.paths.map(path => {
+      const pathData = path.map(({ X, Y }, i) => `${i === 0 ? 'M' : 'L '}${X * scale} ${Y * scale}`);
+      if (shape.closed) pathData.push('Z');
+      return pathData.join(' ');
+    }).join(' ');
+
+    return (
+      <path
+        d={data}
+        strokeWidth={typeof strokeWidth === 'number' ? strokeWidth : 1.0}
+        vectorEffect={typeof strokeWidth === 'number' ? 'none' : 'non-scaling-stroke'}
+        fill={fill ? color : 'none'}
+        stroke={!fill ? color : 'none'}
+      />
+    );
+  }
+}

example/main.css

@@ -12,10 +12,10 @@
   height: 100%;
 }
 
-svg, input {
+svg, #controls {
   position: absolute;
 }
 
-input {
+input[type=range] {
   width: 100%;
 }