JuliusHerrmann/simulation_react
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

gif now works too

Browse Source
This commit is contained in:
JuliusHerrmann 2022-01-08 17:22:29 +01:00
parent 4042f232ff
commit 8e20c7a480
2 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/Simulation/visualizations/GIFGenerator.jsx
View File

@ -27,7 +27,7 @@ class GIFGenerator extends React.Component {
workers: 2, workers: 2,
quality: 10, quality: 10,
repeat: this.state.loop? 0 : -1, repeat: this.state.loop? 0 : -1,
background: this.state.background background: this.state.background,
}); });
//set download trigger //set download trigger
@ -45,37 +45,46 @@ class GIFGenerator extends React.Component {
setTimeout(() => URL.revokeObjectURL(link.href), 7000); setTimeout(() => URL.revokeObjectURL(link.href), 7000);
}.bind(this)); }.bind(this));
let stepBefore = this.state.step;
//clear playing animation //clear playing animation
clearInterval(this.animationId); clearInterval(this.animationId);
this.props.setState({step: 0}, () => { this.props.setState({step: 0}, () => {
this.animationId = setInterval(this.grabImageAndNextStep.bind(null, gif, stepBefore,this.state.duration * 1000 / this.props.animationLength), 1); this.animationId = setInterval(this.grabImageAndNextStep.bind(null, gif, this.state.duration * 1000 / this.props.animationLength), 1);
this.props.setState({playing: true}); this.props.setState({playing: true});
}); });
}); });
} }
grabImageAndNextStep = (gif, stepBefore, delay) => { grabImageAndNextStep = (gif, delay) => {
//check if we are at the end //check if we are at the end
if (this.props.state.step >= this.props.animationLength) { if (this.state.step > this.props.animationLength) {
//add last frame and finish
this.props.visualizeOneStep();
clearInterval(this.animationId); clearInterval(this.animationId);
//add last frame and finish
//mock slider
this.visualizeStep(this.state.step);
gif.addFrame(document.querySelectorAll("canvas")[2], gif.addFrame(document.querySelectorAll("canvas")[2],
{copy: true, delay: delay}); {copy: true, delay: delay});
//reset animation //reset animation
this.props.setState({playing: false}); this.props.setState({playing: false, step: 0 });
this.props.setState({step: stepBefore}); this.props.visualizeSpecificStep({target: {value: 0}});
this.props.visualizeOneStep(false);
gif.render(); gif.render();
return; return;
} }
this.props.visualizeOneStep(); //mock slider
this.visualizeStep(this.state.step);
//select the canvas (this is a bit hacky but ey it works) //select the canvas (this is a bit hacky but ey it works)
gif.addFrame(document.querySelectorAll("canvas")[2], gif.addFrame(document.querySelectorAll("canvas")[2],
{copy: true, delay: delay}); {copy: true, delay: delay});
this.setState({step: this.state.step + 1});
}
//visualize one step... mocking the slider
visualizeStep = (i) => {
//the object is created to simulate a slider movement
this.props.visualizeSpecificStep({target: {value: i}});
} }
getButtonText = () => { getButtonText = () => {

6
src/Simulation/visualizations/Graph.jsx
View File

@ -187,8 +187,8 @@ class Graph extends React.Component {
} }
finishAnimation() { finishAnimation() {
clearInterval(this.animationId); //clearInterval(this.animationId);
this.setState({playing: false, step: this.props.animationLength}); //this.setState({playing: false, step: this.props.animationLength});
} }
visualizeSpecificStep = (e) => { visualizeSpecificStep = (e) => {
@ -218,7 +218,7 @@ class Graph extends React.Component {
{close => ( {close => (
<div className="modal"> <div className="modal">
<button className="close" onClick={() => {close()}} >&times;</button> <button className="close" onClick={() => {close()}} >&times;</button>
<GIFGenerator setState={this.setState.bind(this)} state={this.state} visualizeOneStep={this.visualizeOneStep} animationLength={this.props.animationLength}/> <GIFGenerator setState={this.setState.bind(this)} state={this.state} visualizeSpecificStep={this.visualizeSpecificStep} animationLength={this.props.animationLength}/>
</div> </div>
)} )}
</Popup> </Popup>