mirror of
https://github.com/4ian/GDevelop.git
synced 2025-10-15 10:19:04 +00:00
[WIP] Add preview of collision mask polygons
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@@ -22,6 +22,7 @@ export default class SetupGridDialog extends Component {
|
||||
const actions = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={false}
|
||||
onClick={this.props.onCancel}
|
||||
/>,
|
||||
<FlatButton
|
||||
|
Reference in New Issue
Block a user