diff options
Diffstat (limited to 'src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx')
| -rw-r--r-- | src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx | 30 |
1 files changed, 18 insertions, 12 deletions
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx index 97f1d3f6c..35aeb59bf 100644 --- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx +++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationWeight.tsx @@ -126,6 +126,12 @@ export default class Weight extends React.Component<IWeightProps, IState> { @computed get draggable() { return !['Inclined Plane', 'Pendulum'].includes(this.props.simulationType) && this.props.simulationMode === 'Freeform'; } + @computed get panelHeight() { + return Math.max(800, this.props.panelHeight()) + 'px'; + } + @computed get panelWidth() { + return Math.max(1000, this.props.panelWidth()) + 'px'; + } epsilon = 0.0001; labelBackgroundColor = `rgba(255,255,255,0.5)`; @@ -782,7 +788,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { left: 0, top: 0, }}> - <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}> + <svg width={this.panelWidth} height={this.panelHeight}> {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(val => { const count = 10; const xPos1 = this.state.xPosition + this.props.radius + (val % 2 === 0 ? -20 : 20); @@ -804,7 +810,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { left: 0, top: 0, }}> - <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}> + <svg width={this.panelWidth} height={this.panelHeight}> <line x1={this.state.xPosition + this.props.radius} y1={this.state.yPosition + this.props.radius} x2={this.state.xPosition + this.props.radius} y2={this.props.yMin} stroke={'#deb887'} strokeWidth="10" /> </svg> </div> @@ -818,7 +824,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { left: 0, top: 0, }}> - <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}> + <svg width={this.panelWidth} height={this.panelHeight}> <circle cx={(this.props.xMax + this.props.xMin) / 2} cy={this.props.radius} r={this.props.radius * 1.5} fill={'#808080'} /> </svg> </div> @@ -832,7 +838,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { left: 0, top: 0, }}> - <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}> + <svg width={this.panelWidth} height={this.panelHeight}> <line x1={this.state.xPosition + this.props.radius} y1={this.state.yPosition + this.props.radius} @@ -862,7 +868,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { left: 0, top: 0, }}> - <svg width={this.props.panelWidth() + 'px'} height={this.props.panelHeight() + 'px'}> + <svg width={this.props.panelWidth() + 'px'} height={this.panelHeight}> <line x1={this.state.xPosition + this.props.radius} y1={this.state.yPosition + this.props.radius} @@ -897,7 +903,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { left: 0, top: 0, }}> - <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}> + <svg width={this.panelWidth} height={this.panelHeight}> <line x1={this.state.xPosition + this.props.radius} y1={this.state.yPosition + this.props.radius} @@ -918,7 +924,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { left: 0, top: 0, }}> - <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}> + <svg width={this.panelWidth} height={this.panelHeight}> <line x1={this.state.xPosition + this.props.radius} y1={this.state.yPosition + this.props.radius} x2={this.props.xMax / 2} y2={-5} stroke={'#deb887'} strokeWidth="10" /> </svg> {!this.state.dragging && ( @@ -949,7 +955,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { {this.props.simulationType == 'Inclined Plane' && ( <div> <div style={{ position: 'absolute', left: '0', top: '0' }}> - <svg width={this.props.xMax + 'px'} height={this.props.yMax + 'px'}> + <svg width={this.panelWidth} height={this.props.yMax + 'px'}> <polygon points={this.state.coordinates} style={{ fill: 'burlywood' }} /> </svg> </div> @@ -973,7 +979,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { left: 0, top: 0, }}> - <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}> + <svg width={this.panelWidth} height={this.panelHeight}> <defs> <marker id="accArrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth"> <path d="M0,0 L0,6 L9,3 z" fill="green" /> @@ -1014,7 +1020,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { left: 0, top: 0, }}> - <svg width={this.props.xMax + 'px'} height={this.props.panelHeight() + 'px'}> + <svg width={this.panelWidth} height={this.panelHeight}> <defs> <marker id="velArrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth"> <path d="M0,0 L0,6 L9,3 z" fill="blue" /> @@ -1082,7 +1088,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { left: this.props.xMin, top: this.props.yMin, }}> - <svg width={this.props.xMax - this.props.xMin + 'px'} height={this.props.panelHeight() + 'px'}> + <svg width={this.props.xMax - this.props.xMin + 'px'} height={this.panelHeight}> <defs> <marker id="forceArrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth"> <path d="M0,0 L0,6 L9,3 z" fill={color} /> @@ -1147,7 +1153,7 @@ export default class Weight extends React.Component<IWeightProps, IState> { left: this.props.xMin, top: this.props.yMin, }}> - <svg width={this.props.xMax - this.props.xMin + 'px'} height={this.props.panelHeight() + 'px'}> + <svg width={this.props.xMax - this.props.xMin + 'px'} height={this.panelHeight}> <defs> <marker id="forceArrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth"> <path d="M0,0 L0,6 L9,3 z" fill={color} /> |