Skip to content

Commit 016abbf

Browse files
Lizard-13Lizard-13
committed
Add shape preview
* Dynamic dimension labels in function of the shape * Preview box, circle and edge * Prevent invalid properties values
1 parent 73feeb3 commit 016abbf

9 files changed

Lines changed: 359 additions & 71 deletions

File tree

‎Extensions/Physics2Behavior/JsExtension.js‎

Lines changed: 40 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -49,22 +49,26 @@ module.exports = {
4949
}
5050
if (propertyName === 'shapeDimensionA') {
5151
newValue = parseFloat(newValue);
52-
if (newValue < 0) newValue = 0;
52+
if (newValue !== newValue) return false;
5353
behaviorContent.shapeDimensionA = newValue;
5454
return true;
5555
}
5656
if (propertyName === 'shapeDimensionB') {
5757
newValue = parseFloat(newValue);
58-
if (newValue < 0) newValue = 0;
58+
if (newValue !== newValue) return false;
5959
behaviorContent.shapeDimensionB = newValue;
6060
return true;
6161
}
6262
if (propertyName === 'shapeOffsetX') {
63-
behaviorContent.shapeOffsetX = parseFloat(newValue);
63+
newValue = parseFloat(newValue);
64+
if (newValue !== newValue) return false;
65+
behaviorContent.shapeOffsetX = newValue;
6466
return true;
6567
}
6668
if (propertyName === 'shapeOffsetY') {
67-
behaviorContent.shapeOffsetY = parseFloat(newValue);
69+
newValue = parseFloat(newValue);
70+
if (newValue !== newValue) return false;
71+
behaviorContent.shapeOffsetY = newValue;
6872
return true;
6973
}
7074
if (propertyName === 'polygonOrigin') {
@@ -76,33 +80,37 @@ module.exports = {
7680
return true;
7781
}
7882
if (propertyName === 'density') {
79-
newValue = parseFloat(newValue);
80-
if (newValue < 0) newValue = 0;
81-
behaviorContent.density = newValue;
83+
behaviorContent.density = parseFloat(newValue);
8284
return true;
8385
}
8486
if (propertyName === 'friction') {
8587
newValue = parseFloat(newValue);
86-
if (newValue < 0) newValue = 0;
88+
if (newValue !== newValue) return false;
8789
behaviorContent.friction = newValue;
8890
return true;
8991
}
9092
if (propertyName === 'restitution') {
9193
newValue = parseFloat(newValue);
92-
if (newValue < 0) newValue = 0;
94+
if (newValue !== newValue) return false;
9395
behaviorContent.restitution = newValue;
9496
return true;
9597
}
9698
if (propertyName === 'linearDamping') {
97-
behaviorContent.linearDamping = parseFloat(newValue);
99+
newValue = parseFloat(newValue);
100+
if (newValue !== newValue) return false;
101+
behaviorContent.linearDamping = newValue;
98102
return true;
99103
}
100104
if (propertyName === 'angularDamping') {
101-
behaviorContent.angularDamping = parseFloat(newValue);
105+
newValue = parseFloat(newValue);
106+
if (newValue !== newValue) return false;
107+
behaviorContent.angularDamping = newValue;
102108
return true;
103109
}
104110
if (propertyName === 'gravityScale') {
105-
behaviorContent.gravityScale = parseFloat(newValue);
111+
newValue = parseFloat(newValue);
112+
if (newValue !== newValue) return false;
113+
behaviorContent.gravityScale = newValue;
106114
return true;
107115
}
108116
if (propertyName === 'layers') {
@@ -160,7 +168,7 @@ module.exports = {
160168
.addExtraInfo('Box')
161169
.addExtraInfo('Circle')
162170
.addExtraInfo('Edge')
163-
.addExtraInfo("Polygon")
171+
.addExtraInfo('Polygon')
164172
);
165173
behaviorProperties.set(
166174
'shapeDimensionA',
@@ -188,7 +196,7 @@ module.exports = {
188196
);
189197
behaviorProperties.set(
190198
'polygonOrigin',
191-
new gd.PropertyDescriptor(behaviorContent.polygonOrigin || "Center")
199+
new gd.PropertyDescriptor(behaviorContent.polygonOrigin || 'Center')
192200
.setType('Choice')
193201
.setLabel('Polygon Origin')
194202
.addExtraInfo('Center')
@@ -197,8 +205,9 @@ module.exports = {
197205
);
198206
behaviorProperties.set(
199207
'vertices',
200-
new gd.PropertyDescriptor(JSON.stringify(behaviorContent.vertices || []))
201-
.setLabel('Vertices')
208+
new gd.PropertyDescriptor(
209+
JSON.stringify(behaviorContent.vertices || [])
210+
).setLabel('Vertices')
202211
);
203212
behaviorProperties.set(
204213
'density',
@@ -239,14 +248,14 @@ module.exports = {
239248
behaviorProperties.set(
240249
'layers',
241250
new gd.PropertyDescriptor(behaviorContent.layers.toString(10))
242-
.setType('Number')
243-
.setLabel('Layers')
251+
.setType('Number')
252+
.setLabel('Layers')
244253
);
245254
behaviorProperties.set(
246255
'masks',
247256
new gd.PropertyDescriptor(behaviorContent.masks.toString(10))
248-
.setType('Number')
249-
.setLabel('Masks')
257+
.setType('Number')
258+
.setLabel('Masks')
250259
);
251260

252261
return behaviorProperties;
@@ -263,7 +272,7 @@ module.exports = {
263272
shapeDimensionB: 0,
264273
shapeOffsetX: 0,
265274
shapeOffsetY: 0,
266-
polygonOrigin: "Center",
275+
polygonOrigin: 'Center',
267276
vertices: [],
268277
density: 1.0,
269278
friction: 0.3,
@@ -283,23 +292,27 @@ module.exports = {
283292
newValue
284293
) {
285294
if (propertyName === 'gravityX') {
286-
sharedContent.gravityX = parseInt(newValue, 10);
295+
newValue = parseFloat(newValue);
296+
if (newValue !== newValue) return false;
297+
behaviorContent.gravityX = newValue;
287298
return true;
288299
}
289300
if (propertyName === 'gravityY') {
290-
sharedContent.gravityY = parseInt(newValue, 10);
301+
newValue = parseFloat(newValue);
302+
if (newValue !== newValue) return false;
303+
behaviorContent.gravityY = newValue;
291304
return true;
292305
}
293306
if (propertyName === 'scaleX') {
294307
newValue = parseInt(newValue, 10);
295-
if (newValue <= 0) newValue = 1;
296-
sharedContent.scaleX = newValue;
308+
if (newValue !== newValue) return false;
309+
behaviorContent.scaleX = newValue;
297310
return true;
298311
}
299312
if (propertyName === 'scaleY') {
300313
newValue = parseInt(newValue, 10);
301-
if (newValue <= 0) newValue = 1;
302-
sharedContent.scaleY = newValue;
314+
if (newValue !== newValue) return false;
315+
behaviorContent.scaleY = newValue;
303316
return true;
304317
}
305318

‎newIDE/app/src/BehaviorsEditor/Editors/Physics2Editor/PolygonEditor.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
11
// @flow
22
import * as React from 'react';
3-
import Checkbox from 'material-ui/Checkbox';
3+
import { Line } from '../../../UI/Grid';
44

5-
type Props = {||};
5+
type Vertice = {
6+
x: number,
7+
y: number,
8+
};
9+
10+
type Props = {|
11+
vertices: Array<Vertice>,
12+
|};
613

714
export default class PolygonEditor extends React.Component<Props> {
815
render() {
9-
return <Checkbox label={'Checky'} />;
16+
return <Line />;
1017
}
1118
}

‎newIDE/app/src/BehaviorsEditor/Editors/Physics2Editor/ShapePreview.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
// @flow
2+
import * as React from 'react';
3+
4+
type Vertice = {
5+
x: number,
6+
y: number,
7+
};
8+
9+
type Props = {|
10+
shape: string,
11+
dimensionA: number,
12+
dimensionB: number,
13+
offsetX: number,
14+
offsetY: number,
15+
polygonOrigin: string,
16+
vertices: Array<Vertice>,
17+
width: number,
18+
height: number,
19+
|};
20+
21+
type State = {|
22+
image: string,
23+
|};
24+
25+
export default class ShapePreview extends React.Component<Props, State> {
26+
27+
render() {
28+
29+
const {dimensionA, dimensionB, shape, offsetX, offsetY, width, height} = this.props;
30+
const fixedWidth = dimensionA > 0 ? dimensionA : width > 0 ? width : 1;
31+
const fixedHeight = dimensionB > 0 ? dimensionB : height > 0 ? height : 1;
32+
33+
return (
34+
<div>
35+
{shape === 'Box' && (
36+
<svg>
37+
<rect
38+
key={`boxShape`}
39+
fill="rgba(255,0,0,0.75)"
40+
strokeWidth={1}
41+
x={offsetX + width/2- fixedWidth/2}
42+
y={offsetY + height/2 - fixedHeight/2}
43+
width={fixedWidth}
44+
height={fixedHeight}
45+
/>
46+
</svg>
47+
)}
48+
{shape === 'Circle' && (
49+
<svg>
50+
<circle
51+
key={`boxShape`}
52+
fill="rgba(255,0,0,0.75)"
53+
strokeWidth={1}
54+
cx={offsetX + width/2}
55+
cy={offsetY + height/2}
56+
r={dimensionA > 0 ? dimensionA : (width + height) > 0 ? (width + height) / 4 : 1}
57+
/>
58+
</svg>
59+
)}
60+
{shape === 'Edge' && (
61+
<svg>
62+
<line
63+
key={`boxEdge`}
64+
stroke="rgba(255,0,0,0.75)"
65+
strokeWidth={2}
66+
x1={offsetX + width/2 - fixedWidth/2 * Math.cos(dimensionB*Math.PI/180)}
67+
y1={offsetY + height/2 - fixedWidth/2 * Math.sin(dimensionB*Math.PI/180)}
68+
x2={offsetX + width/2 + fixedWidth/2 * Math.cos(dimensionB*Math.PI/180)}
69+
y2={offsetY + height/2 + fixedWidth/2 * Math.sin(dimensionB*Math.PI/180)}
70+
/>
71+
</svg>
72+
)}
73+
</div>
74+
);
75+
}
76+
}

0 commit comments

Comments
 (0)