diff options
Diffstat (limited to 'src/client/views/nodes/PhysicsSimulationApp.tsx')
| -rw-r--r-- | src/client/views/nodes/PhysicsSimulationApp.tsx | 461 |
1 files changed, 229 insertions, 232 deletions
diff --git a/src/client/views/nodes/PhysicsSimulationApp.tsx b/src/client/views/nodes/PhysicsSimulationApp.tsx index 414d61809..2277c7875 100644 --- a/src/client/views/nodes/PhysicsSimulationApp.tsx +++ b/src/client/views/nodes/PhysicsSimulationApp.tsx @@ -1,8 +1,8 @@ import React = require('react'); import "./PhysicsSimulationBox.scss"; -import { IForce, Weight } from "./PhysicsSimulationWeight"; -import {Wall, IWallProps } from "./PhysicsSimulationWall" -import {Wedge} from "./PhysicsSimulationWedge" +import Weight from "./PhysicsSimulationWeight"; +import Wall from "./PhysicsSimulationWall" +import Wedge from "./PhysicsSimulationWedge" import { props, any } from 'bluebird'; import { render } from 'react-dom'; @@ -329,235 +329,232 @@ export default class App extends React.Component<{}, IState> { render () { return ( - <p>Hello world!</p> - // <div> - // <div className="mechanicsSimulationContainer"> - // <div - // className="mechanicsSimulationContentContainer" - // onPointerMove={(e) => { - // // if (sketching) { - // // x1 = positionXDisplay + 50; - // // y1 = yMax - positionYDisplay - 2 * 50 + 5 + 50; - // // x2 = e.clientX; - // // y2 = e.clientY; - // // height = Math.abs(y1 - y2) + 120; - // // width = Math.abs(x1 - x2) + 120; - // // top = Math.min(y1, y2) - 60; - // // left = Math.min(x1, x2) - 60; - // // x1Updated = x1 - left; - // // x2Updated = x2 - left; - // // y1Updated = y1 - top; - // // y2Updated = y2 - top; - // // setCurrentForceSketch({ - // // top: top, - // // left: left, - // // width: width, - // // height: height, - // // x1: x1Updated, - // // y1: y1Updated, - // // x2: x2Updated, - // // y2: y2Updated, - // // weightX: positionXDisplay, - // // weightY: positionYDisplay, - // // }); - // // } - // }} - // onPointerDown={(e) => { - // // if (sketching && currentForceSketch) { - // // setSketching(false); - // // sketches = forceSketches; - // // sketches.push(currentForceSketch); - // // setForceSketches(sketches); - // // setCurrentForceSketch(null); - // // } - // }} - // > - // <div className="mechanicsSimulationButtonsAndElements"> - // <div className="mechanicsSimulationElements"> - // {/* {showForces && currentForceSketch && simulationPaused && ( - // <div - // style={{ - // position: "fixed", - // top: currentForceSketch.top, - // left: currentForceSketch.left, - // }} - // > - // <svg - // width={currentForceSketch.width + "px"} - // height={currentForceSketch.height + "px"} - // > - // <defs> - // <marker - // id="sketchArrow" - // markerWidth="10" - // markerHeight="10" - // refX="0" - // refY="2" - // orient="auto" - // markerUnits="strokeWidth" - // > - // <path d="M0,0 L0,4 L6,2 z" fill={color} /> - // </marker> - // </defs> - // <line - // x1={currentForceSketch.x1} - // y1={currentForceSketch.y1} - // x2={currentForceSketch.x2} - // y2={currentForceSketch.y2} - // stroke={color} - // strokeWidth="10" - // markerEnd="url(#sketchArrow)" - // /> - // </svg> - // </div> - // )} */} - // {/* {showForces && - // forceSketches.length > 0 && - // simulationPaused && - // forceSketches.map((element: PhysicsVectorTemplate, index) => { - // return ( - // <div - // key={index} - // style={{ - // position: "fixed", - // top: element.top + (positionYDisplay - element.weightY), - // left: - // element.left + (positionXDisplay - element.weightX), - // }} - // > - // <svg - // width={element.width + "px"} - // height={element.height + "px"} - // > - // <defs> - // <marker - // id="sketchArrow" - // markerWidth="10" - // markerHeight="10" - // refX="0" - // refY="2" - // orient="auto" - // markerUnits="strokeWidth" - // > - // <path d="M0,0 L0,4 L6,2 z" fill={color} /> - // </marker> - // </defs> - // <line - // x1={element.x1} - // y1={element.y1} - // x2={element.x2} - // y2={element.y2} - // stroke={color} - // strokeWidth="10" - // markerEnd="url(#sketchArrow)" - // onClick={() => { - // if (deleteMode) { - // deleteForce(element); - // } else { - // editForce(element); - // } - // }} - // /> - // </svg> - // </div> - // ); - // })} */} - // {weight && ( - // <Weight - // adjustPendulumAngle={adjustPendulumAngle} - // color={"red"} - // displayXPosition={positionXDisplay} - // displayXVelocity={velocityXDisplay} - // displayYPosition={positionYDisplay} - // displayYVelocity={velocityYDisplay} - // elasticCollisions={elasticCollisions} - // incrementTime={timer} - // mass={1} - // mode={mode} - // noMovement={noMovement} - // paused={simulationPaused} - // pendulum={pendulum} - // pendulumAngle={pendulumAngle} - // pendulumLength={pendulumLength} - // radius={50} - // reset={simulationReset} - // showForceMagnitudes={showForceMagnitudes} - // setSketching={setSketching} - // setDisplayXAcceleration={setAccelerationXDisplay} - // setDisplayXPosition={setPositionXDisplay} - // setDisplayXVelocity={setVelocityXDisplay} - // setDisplayYAcceleration={setAccelerationYDisplay} - // setDisplayYPosition={setPositionYDisplay} - // setDisplayYVelocity={setVelocityYDisplay} - // setPaused={setSimulationPaused} - // setPendulumAngle={setPendulumAngle} - // setPendulumLength={setPendulumLength} - // setStartPendulumAngle={setStartPendulumAngle} - // setUpdatedForces={setUpdatedForces} - // showAcceleration={showAcceleration} - // showForces={showForces} - // showVelocity={showVelocity} - // startForces={startForces} - // startPosX={startPosX} - // startPosY={startPosY} - // timestepSize={0.002} - // updateDisplay={displayChange} - // updatedForces={updatedForces} - // walls={wallPositions} - // wedge={wedge} - // wedgeHeight={wedgeHeight} - // wedgeWidth={wedgeWidth} - // coefficientOfKineticFriction={Number( - // coefficientOfKineticFriction - // )} - // /> - // )} - // {wedge && ( - // <Wedge - // startWidth={wedgeWidth} - // startHeight={wedgeHeight} - // startLeft={xMax * 0.5 - 200} - // /> - // )} - // </div> - // <div> - // {wallPositions.map((element, index) => { - // return ( - // <Wall - // key={index} - // length={element.length} - // xPos={element.xPos} - // yPos={element.yPos} - // angleInDegrees={element.angleInDegrees} - // /> - // ); - // })} - // </div> - // </div> - // </div> - // <div className="mechanicsSimulationEquationContainer"> - // <div className="mechanicsSimulationControls"> - // <div> - // {simulationPaused && ( - // <button onClick={() => { - // setSimulationPaused(false); - // }} >START</button> - // )} - // {!simulationPaused && ( - // <button onClick={() => { - // setSimulationPaused(true); - // }} >PAUSE</button> - // )} - // {simulationPaused && ( - // <button onClick={() => { - // setSimulationReset(!simulationReset); - // }} >RESET</button> - // )} - // </div> - // </div> - // </div> - // </div> - // </div> + <div> + <div className="mechanicsSimulationContainer"> + <div + className="mechanicsSimulationContentContainer" + onPointerMove={(e) => { + // if (sketching) { + // x1 = positionXDisplay + 50; + // y1 = yMax - positionYDisplay - 2 * 50 + 5 + 50; + // x2 = e.clientX; + // y2 = e.clientY; + // height = Math.abs(y1 - y2) + 120; + // width = Math.abs(x1 - x2) + 120; + // top = Math.min(y1, y2) - 60; + // left = Math.min(x1, x2) - 60; + // x1Updated = x1 - left; + // x2Updated = x2 - left; + // y1Updated = y1 - top; + // y2Updated = y2 - top; + // setCurrentForceSketch({ + // top: top, + // left: left, + // width: width, + // height: height, + // x1: x1Updated, + // y1: y1Updated, + // x2: x2Updated, + // y2: y2Updated, + // weightX: positionXDisplay, + // weightY: positionYDisplay, + // }); + // } + }} + onPointerDown={(e) => { + // if (sketching && currentForceSketch) { + // setSketching(false); + // sketches = forceSketches; + // sketches.push(currentForceSketch); + // setForceSketches(sketches); + // setCurrentForceSketch(null); + // } + }} + > + <div className="mechanicsSimulationButtonsAndElements"> + <div className="mechanicsSimulationElements"> + {/* {showForces && currentForceSketch && simulationPaused && ( + <div + style={{ + position: "fixed", + top: currentForceSketch.top, + left: currentForceSketch.left, + }} + > + <svg + width={currentForceSketch.width + "px"} + height={currentForceSketch.height + "px"} + > + <defs> + <marker + id="sketchArrow" + markerWidth="10" + markerHeight="10" + refX="0" + refY="2" + orient="auto" + markerUnits="strokeWidth" + > + <path d="M0,0 L0,4 L6,2 z" fill={color} /> + </marker> + </defs> + <line + x1={currentForceSketch.x1} + y1={currentForceSketch.y1} + x2={currentForceSketch.x2} + y2={currentForceSketch.y2} + stroke={color} + strokeWidth="10" + markerEnd="url(#sketchArrow)" + /> + </svg> + </div> + )} */} + {/* {showForces && + forceSketches.length > 0 && + simulationPaused && + forceSketches.map((element: PhysicsVectorTemplate, index) => { + return ( + <div + key={index} + style={{ + position: "fixed", + top: element.top + (positionYDisplay - element.weightY), + left: + element.left + (positionXDisplay - element.weightX), + }} + > + <svg + width={element.width + "px"} + height={element.height + "px"} + > + <defs> + <marker + id="sketchArrow" + markerWidth="10" + markerHeight="10" + refX="0" + refY="2" + orient="auto" + markerUnits="strokeWidth" + > + <path d="M0,0 L0,4 L6,2 z" fill={color} /> + </marker> + </defs> + <line + x1={element.x1} + y1={element.y1} + x2={element.x2} + y2={element.y2} + stroke={color} + strokeWidth="10" + markerEnd="url(#sketchArrow)" + onClick={() => { + if (deleteMode) { + deleteForce(element); + } else { + editForce(element); + } + }} + /> + </svg> + </div> + ); + })} */} + {/* {weight && ( + <Weight + adjustPendulumAngle={adjustPendulumAngle} + color={"red"} + displayXPosition={positionXDisplay} + displayXVelocity={velocityXDisplay} + displayYPosition={positionYDisplay} + displayYVelocity={velocityYDisplay} + elasticCollisions={elasticCollisions} + incrementTime={timer} + mass={1} + paused={simulationPaused} + pendulum={pendulum} + pendulumAngle={pendulumAngle} + pendulumLength={pendulumLength} + radius={50} + reset={simulationReset} + showForceMagnitudes={showForceMagnitudes} + setSketching={setSketching} + setDisplayXAcceleration={setAccelerationXDisplay} + setDisplayXPosition={setPositionXDisplay} + setDisplayXVelocity={setVelocityXDisplay} + setDisplayYAcceleration={setAccelerationYDisplay} + setDisplayYPosition={setPositionYDisplay} + setDisplayYVelocity={setVelocityYDisplay} + setPaused={setSimulationPaused} + setPendulumAngle={setPendulumAngle} + setPendulumLength={setPendulumLength} + setStartPendulumAngle={setStartPendulumAngle} + setUpdatedForces={setUpdatedForces} + showAcceleration={showAcceleration} + showForces={showForces} + showVelocity={showVelocity} + startForces={startForces} + startPosX={startPosX} + startPosY={startPosY} + timestepSize={0.002} + updateDisplay={displayChange} + updatedForces={updatedForces} + walls={wallPositions} + wedge={wedge} + wedgeHeight={wedgeHeight} + wedgeWidth={wedgeWidth} + coefficientOfKineticFriction={Number( + coefficientOfKineticFriction + )} + /> + )} */} + {this.state.wedge && ( + <Wedge + startWidth={this.state.wedgeWidth} + startHeight={this.state.wedgeHeight} + startLeft={this.xMax * 0.5 - 200} + /> + )} + </div> + <div> + {this.state.wallPositions.map((element, index) => { + return ( + <Wall + key={index} + length={element.length} + xPos={element.xPos} + yPos={element.yPos} + angleInDegrees={element.angleInDegrees} + /> + ); + })} + </div> + </div> + </div> + <div className="mechanicsSimulationEquationContainer"> + <div className="mechanicsSimulationControls"> + <div> + {this.state.simulationPaused && ( + <button onClick={() => { + this.setState({simulationPaused: false}); + }} >START</button> + )} + {!this.state.simulationPaused && ( + <button onClick={() => { + this.setState({simulationPaused: true}); + }} >PAUSE</button> + )} + {this.state.simulationPaused && ( + <button onClick={() => { + this.setState({simulationReset: !this.state.simulationReset}); + }} >RESET</button> + )} + </div> + </div> + </div> + </div> + </div> ); } } |