diff --git a/src/containers/blocks.js b/src/containers/blocks.js index 5a6993c43c7da42ef65e9053a257d32bc7d89680..968ebaed6b14e1c04f9754339abf767607952a5f 100644 --- a/src/containers/blocks.js +++ b/src/containers/blocks.js @@ -2,6 +2,7 @@ const bindAll = require('lodash.bindall'); const defaultsDeep = require('lodash.defaultsdeep'); const React = require('react'); const ScratchBlocks = require('scratch-blocks'); +const VM = require('scratch-vm'); const BlocksComponent = require('../components/blocks'); @@ -96,7 +97,7 @@ Blocks.propTypes = { dragShadowOpacity: React.PropTypes.number }) }), - vm: React.PropTypes.object + vm: React.PropTypes.instanceOf(VM).isRequired }; Blocks.defaultOptions = { diff --git a/src/containers/gui.js b/src/containers/gui.js index ba398cdd68c3e2e95efa7686b4857cf0fce0bfe0..9940c5868abb6d8863fda97e8378195531868d0d 100644 --- a/src/containers/gui.js +++ b/src/containers/gui.js @@ -19,12 +19,10 @@ class GUI extends React.Component { this.vmManager.attachKeyboardEvents(); this.props.vm.loadProject(this.props.projectData); this.props.vm.start(); - this.vmManager.startAnimation(); } componentWillUnmount () { this.vmManager.detachKeyboardEvents(); this.props.vm.stopAll(); - this.vmManager.stopAnimation(); } componentWillReceiveProps (nextProps) { if (this.props.projectData !== nextProps.projectData) { diff --git a/src/containers/stage.js b/src/containers/stage.js index aafe19892056c6bc24db68ea4ca29f77a411573c..2e2184e72f8f0807e3877ac271545686c5a1830e 100644 --- a/src/containers/stage.js +++ b/src/containers/stage.js @@ -1,6 +1,7 @@ const bindAll = require('lodash.bindall'); const React = require('react'); const Renderer = require('scratch-render'); +const VM = require('scratch-vm'); const StageComponent = require('../components/stage'); @@ -12,16 +13,21 @@ class Stage extends React.Component { 'detachMouseEvents', 'onMouseUp', 'onMouseMove', - 'onMouseDown' + 'onMouseDown', + 'animate', + 'startAnimation', + 'stopAnimation' ]); } componentDidMount () { this.renderer = new Renderer(this.canvas); this.props.vm.attachRenderer(this.renderer); this.attachMouseEvents(this.canvas); + this.startAnimation(); } componentWillUnmount () { this.detachMouseEvents(this.canvas); + this.stopAnimation(); } attachMouseEvents (canvas) { document.addEventListener('mousemove', this.onMouseMove); @@ -67,6 +73,16 @@ class Stage extends React.Component { this.props.vm.postIOData('mouse', data); e.preventDefault(); } + startAnimation () { + this.animationFrame = requestAnimationFrame(this.animate); + } + stopAnimation () { + cancelAnimationFrame(this.animationFrame); + } + animate () { + this.props.vm.animationFrame(); + this.animationFrame = requestAnimationFrame(this.animate); + } render () { return ( <StageComponent canvasRef={canvas => this.canvas = canvas} /> @@ -75,10 +91,7 @@ class Stage extends React.Component { } Stage.propTypes = { - vm: React.PropTypes.shape({ - attachRenderer: React.PropTypes.func, - postIOData: React.PropTypes.func - }).isRequired + vm: React.PropTypes.instanceOf(VM).isRequired }; module.exports = Stage; diff --git a/src/lib/vm-manager.js b/src/lib/vm-manager.js index 4216b2876d1d6bd684a8e81e48b374e68cdeb203..db521c99f50a134ead4ad455c6470ec889d5045b 100644 --- a/src/lib/vm-manager.js +++ b/src/lib/vm-manager.js @@ -6,23 +6,10 @@ class VMManager { 'attachKeyboardEvents', 'detachKeyboardEvents', 'onKeyDown', - 'onKeyUp', - 'animate', - 'startAnimation', - 'stopAnimation' + 'onKeyUp' ]); this.vm = vm; } - startAnimation () { - this.animationFrame = requestAnimationFrame(this.animate); - } - stopAnimation () { - cancelAnimationFrame(this.animationFrame); - } - animate () { - this.vm.animationFrame(); - this.animationFrame = requestAnimationFrame(this.animate); - } attachKeyboardEvents () { // Feed keyboard events as VM I/O events. document.addEventListener('keydown', this.onKeyDown);