1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
import React = require('react');
import "./PhysicsSimulationBox.scss";
export interface IWedgeProps {
startHeight: number;
startWidth: number;
startLeft: number;
xMax: number;
yMax: number;
}
interface IState {
angleInRadians: number,
left: number,
coordinates: string,
}
export default class Wedge extends React.Component<IWedgeProps, IState> {
constructor(props: any) {
super(props)
this.state = {
angleInRadians: Math.atan(this.props.startHeight / this.props.startWidth),
left: this.props.startLeft,
coordinates: "",
}
}
color = "#deb887";
updateCoordinates() {
const coordinatePair1 =
Math.round(this.state.left) + "," + Math.round(this.props.yMax) + " ";
const coordinatePair2 =
Math.round(this.state.left + this.props.startWidth) +
"," +
Math.round(this.props.yMax) +
" ";
const coordinatePair3 =
Math.round(this.state.left) +
"," +
Math.round(this.props.yMax - this.props.startHeight);
const coord = coordinatePair1 + coordinatePair2 + coordinatePair3;
this.setState({coordinates: coord});
}
componentDidMount() {
this.updateCoordinates()
}
componentDidUpdate(prevProps: Readonly<IWedgeProps>, prevState: Readonly<IState>, snapshot?: any): void {
if (prevState.coordinates != this.state.coordinates) {
this.updateCoordinates();
}
if (prevProps.startHeight != this.props.startHeight || prevProps.startWidth != this.props.startWidth) {
this.setState({angleInRadians: Math.atan(this.props.startHeight / this.props.startWidth)});
}
}
render() {
return (
<div>
<div style={{ position: "absolute", left: "0", top: "0" }}>
<svg
width={this.props.xMax + "px"}
height={this.props.yMax + "px"}
>
<polygon points={this.state.coordinates} style={{ fill: "burlywood" }} />
</svg>
</div>
<p
style={{
position: "absolute",
zIndex: 500,
left: Math.round(this.state.left + this.props.startWidth - 80) + "px",
top: Math.round(this.props.yMax - 40) + "px",
}}
>
{Math.round(((this.state.angleInRadians * 180) / Math.PI) * 100) / 100}°
</p>
</div>
);
}
};
|
