[WIP] Add preview of collision mask polygons

This commit is contained in:
Florian Rival
2018-03-30 22:01:21 +02:00
parent 54d7d284c8
commit 4ccbc1b958
2 changed files with 30 additions and 15 deletions

View File

@@ -1,40 +1,54 @@
// @flow
import React from 'react';
import { mapVector } from '../../../../Utils/MapFor';
import Measure from 'react-measure';
const styles = {
container: {
position: 'relative',
},
svg: {
width: '100%',
height: '100%',
},
};
type Props = {|
polygons: gdVectorPolygon2d,
imageWidth: number,
imageHeight: number,
|};
export default class CollisionMasksPreview extends React.Component<
Props,
void
> {
render() {
const { polygons } = this.props;
return (
<div style={styles.container}>
<svg>
{mapVector(polygons, polygon => {
const vertices = polygon.getVertices();
return mapVector(vertices, vertex => (
<circle
cx={vertex.get_x()}
cy={vertex.get_y()}
r="3"
fill="blue"
/>
));
})}
</svg>
</div>
<svg
width={this.props.imageWidth}
height={this.props.imageHeight}
style={styles.svg}
>
{mapVector(polygons, (polygon, i) => {
const vertices = polygon.getVertices();
return (
<polygon
fill="rgba(255,0,0,0.2)"
stroke="rgba(255,0,0,0.5)"
strokeWidth={1}
fileRule="evenodd"
points={mapVector(
vertices,
(vertex, j) => `${vertex.get_x()},${vertex.get_y()}`
).join(' ')}
/>
);
})}
</svg>
);
}
}

View File

@@ -22,6 +22,7 @@ export default class SetupGridDialog extends Component {
const actions = [
<FlatButton
label="Cancel"
primary={false}
onClick={this.props.onCancel}
/>,
<FlatButton