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
|
import React from "react";
import { useState, useEffect, useCallback } from "react";
import "./PhysicsSimulationBox.scss";
export interface IWedgeProps {
startHeight: number;
startWidth: number;
startLeft: 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(window.innerHeight * 0.8) + " ";
const coordinatePair2 =
Math.round(this.state.left + this.props.startWidth) +
"," +
Math.round(window.innerHeight * 0.8) +
" ";
const coordinatePair3 =
Math.round(this.state.left) +
"," +
Math.round(window.innerHeight * 0.8 - 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 {
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", zIndex: -5 }}>
<svg
width={window.innerWidth * 0.7 + "px"}
height={window.innerHeight * 0.8 + "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(window.innerHeight * 0.8 - 40) + "px",
}}
>
{Math.round(((this.state.angleInRadians * 180) / Math.PI) * 100) / 100}°
</p>
</div>
);
}
};
|
