From c2b5c10a338884d9489425a321b1f8a2c2faf89f Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Mon, 17 Oct 2016 16:06:57 -0400
Subject: [PATCH] Move animate timer to Stage component

And use instanceOf for the vm prop type
---
 src/containers/blocks.js |  3 ++-
 src/containers/gui.js    |  2 --
 src/containers/stage.js  | 23 ++++++++++++++++++-----
 src/lib/vm-manager.js    | 15 +--------------
 4 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/containers/blocks.js b/src/containers/blocks.js
index 5a6993c43..968ebaed6 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 ba398cdd6..9940c5868 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 aafe19892..2e2184e72 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 4216b2876..db521c99f 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);
-- 
GitLab