diff --git a/example/SlicerViewer.js b/example/SlicerViewer.js index c678e60..7b6c9ee 100644 --- a/example/SlicerViewer.js +++ b/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 (
@@ -29,17 +49,81 @@ export default class SlicerViewer extends React.Component { height={settings.dimensionsY} fill="lightGrey" /> - {intersectionPoints.map(({ x, y }, i) => )} - {shape && shape.closedShapes.map((closedShape, i) => ( + {render.renderIntersectionPoints && intersectionPoints.map(({ x, y }, i) => ( + + ))} + {render.renderShape1 && shape && shape.closedShapes.map((closedShape, i) => ( `${x} ${y}`).join(' ')} fill="rgba(255, 0, 0, 0.5)" /> ))} + {slice && slice.parts.map((slicePart, i) => ( + + {render.renderShape2 && } + {render.renderOuterLine && } + {render.renderInnerLine && slicePart.innerLines.map((innerLine, i) => ( + + ))} + {render.renderFill && } + + ))} - +
+ +

Layer: {layer}

+

+

+

+

+

+

+
); } } + +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 ( + + ); + } +} diff --git a/example/main.css b/example/main.css index 1e8fb3e..918c8c5 100644 --- a/example/main.css +++ b/example/main.css @@ -12,10 +12,10 @@ height: 100%; } -svg, input { +svg, #controls { position: absolute; } -input { +input[type=range] { width: 100%; }