diff options
Diffstat (limited to 'src')
4 files changed, 49 insertions, 50 deletions
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx index 5b9d8f415..1e817a22d 100644 --- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx +++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx @@ -1,11 +1,11 @@ import "./PhysicsSimulationBox.scss"; -import { FieldView, FieldViewProps } from './FieldView'; +import { FieldView, FieldViewProps } from './../FieldView'; import React = require('react'); -import { ViewBoxAnnotatableComponent } from '../DocComponent'; +import { ViewBoxAnnotatableComponent } from '../../DocComponent'; import { observer } from 'mobx-react'; import "./PhysicsSimulationBox.scss"; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { CheckBox } from "../search/CheckBox"; +import { CheckBox } from "../../search/CheckBox"; import PauseIcon from "@mui/icons-material/Pause"; import PlayArrowIcon from "@mui/icons-material/PlayArrow"; import ReplayIcon from "@mui/icons-material/Replay"; @@ -31,12 +31,12 @@ import { Stack, } from "@mui/material"; import Typography from "@mui/material/Typography"; -import "./App.scss"; +import "./PhysicsSimulationBox.scss"; import { InputField } from "./PhysicsSimulationInputField"; import questions from "./PhysicsSimulationQuestions.json"; import tutorials from "./PhysicsSimulationTutorial.json"; -import { IWallProps, Wall } from "./Wall"; -import { IForce, Weight } from "./Weight"; +import { IWallProps, Wall } from "./PhysicsSimulationWall"; +import { IForce, Weight } from "./PhysicsSimulationWeight"; interface VectorTemplate { top: number; left: number; @@ -2471,4 +2471,5 @@ export default class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<Fi </p> </div> </div> - }
\ No newline at end of file + } +}
\ No newline at end of file diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx index 91b0ad84c..aa2d1c2cc 100644 --- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx +++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationInputField.tsx @@ -1,12 +1,13 @@ -import { useState, useEffect } from "react"; import { TextField, InputAdornment } from "@mui/material"; - +import { Doc } from '../../../../fields/Doc'; +import React = require('react'); import TaskAltIcon from "@mui/icons-material/TaskAlt"; import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"; export interface IInputProps { label?: JSX.Element; lowerBound: number; - changeValue: (val: number) => any; + dataDoc: doc; + prop: string; step: number; unit: string; upperBound: number; @@ -21,36 +22,34 @@ export interface IInputProps { labelWidth?: string; } -export const InputField = (props: IInputProps) => { - const { - changeValue, - correctValue, - effect, - label, - lowerBound, - mode, - radianEquivalent, - showIcon, - small, - step, - unit, - upperBound, - value, - update, - labelWidth, - } = props; - let epsilon: number = 0.01; +interface IState { + tempValue: number, + tempRadianValue: number, +} - let width = small ? "6em" : "7em"; - let margin = small ? "0px" : "10px"; +export default class InputField extends React.Component<IInputProps, , IState> { + constructor(props: any) { + super(props) + this.state = { + tempValue: this.props.mode != "Freeform" && !this.props.showIcon ? 0 : this.props.value, + tempRadianValue: this.props.mode != "Freeform" && !this.props.showIcon ? 0 : (Number(this.props.value) * Math.PI) / 180 + } + } + + epsilon: number = 0; + width: string = "6em"; + margin: string = "6em"; + componentDidMount() { + this.epsilon = 0.01; + this.width = this.props.small ? "6em" : "7em"; + this.margin = this.props.small ? "0px" : "10px"; + } + + + componentDidUpdate(prevProps: Readonly<IInputProps>, prevState: Readonly<IState>, snapshot?: any): void { + } - const [tempValue, setTempValue] = useState<any>( - mode != "Freeform" && !showIcon ? 0 : value - ); - const [tempRadianValue, setTempRadianValue] = useState( - mode != "Freeform" && !showIcon ? 0 : (Number(value) * Math.PI) / 180 - ); useEffect(() => { if (mode == "Freeform") { @@ -60,24 +59,23 @@ export const InputField = (props: IInputProps) => { } }, [value]); - const externalUpdate = () => { - changeValue(Number(value)); + externalUpdate = () => { setTempValue(Number(value)); setTempRadianValue((Number(value) * Math.PI) / 180); }; useEffect(() => { - externalUpdate(); + this.externalUpdate(); }, [update]); - const onChange = (event: React.ChangeEvent<HTMLInputElement>) => { + onChange = (event: React.ChangeEvent<HTMLInputElement>) => { let value = event.target.value == "" ? 0 : Number(event.target.value); - if (value > upperBound) { - value = upperBound; - } else if (value < lowerBound) { - value = lowerBound; + if (value > this.props.upperBound) { + value = this.props.upperBound; + } else if (value < this.props.lowerBound) { + value = this.props.lowerBound; } - changeValue(value); + this.props.dataDoc[this.props.prop] = value setTempValue(event.target.value == "" ? event.target.value : value); setTempRadianValue((value * Math.PI) / 180); if (effect) { @@ -85,14 +83,14 @@ export const InputField = (props: IInputProps) => { } }; - const onChangeRadianValue = (event: React.ChangeEvent<HTMLInputElement>) => { + onChangeRadianValue = (event: React.ChangeEvent<HTMLInputElement>) => { let value = event.target.value === "" ? 0 : Number(event.target.value); if (value > 2 * Math.PI) { value = 2 * Math.PI; } else if (value < 0) { value = 0; } - changeValue((value * 180) / Math.PI); + this.props.dataDoc[this.props.prop] = (value * 180) / Math.PI setTempValue((value * 180) / Math.PI); setTempRadianValue(value); if (effect) { diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWall.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWall.tsx index 9283e8d46..6e60ad85c 100644 --- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWall.tsx +++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWall.tsx @@ -11,7 +11,7 @@ export interface IWallProps { angleInDegrees: number; } -export default class App extends React.Component<IWallProps> { +export default class Wall extends React.Component<IWallProps> { constructor(props: any) { super(props) diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx index 3feec1ecb..deecb03de 100644 --- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx +++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx @@ -1,7 +1,7 @@ import { Doc } from '../../../../fields/Doc'; import React = require('react'); import { IWallProps } from "./PhysicsSimulationWall"; -import "./PhysicsSimulationWeight.scss"; +import "./PhysicsSimulationBox.scss"; export interface IForce { description: string; |