Scope renderer to instance

This allows usage without global scope to attach a renderer to the VM. It also provides the ability to have multiple VMs/renderers to be used at once.

playground/playground.js

@@ -21,8 +21,12 @@ var loadProject = function () {
 
 window.onload = function() {
     // Lots of global variables to make debugging easier
+    // Instantiate the renderer and connect it to the VM.
+    var canvas = document.getElementById('scratch-stage');
+    window.renderer = new window.RenderWebGL(canvas);
+
     // Instantiate the VM worker.
-    var vm = new window.VirtualMachine();
+    var vm = new window.VirtualMachine(window.renderer);
     window.vm = vm;
 
     // Loading projects from the server.
@@ -37,10 +41,6 @@ window.onload = function() {
     });
     loadProject();
 
-    // Instantiate the renderer and connect it to the VM.
-    var canvas = document.getElementById('scratch-stage');
-    window.renderer = new window.RenderWebGL(canvas);
-
     // Instantiate scratch-blocks and attach it to the DOM.
     var toolbox = document.getElementById('toolbox');
     var workspace = window.Blockly.inject('blocks', {

src/engine/runtime.js

@@ -19,13 +19,20 @@ var defaultBlockPackages = {
 
 /**
  * Manages targets, scripts, and the sequencer.
+ * @param {!RenderWebGL} renderer Renderer for the VM
  */
-function Runtime () {
+function Runtime (renderer) {
     // Bind event emitter
     EventEmitter.call(this);
 
     // State for the runtime
 
+    /**
+     * Renderer
+     * @type {!RenderWebGL}
+     */
+    this.renderer = renderer;
+
     /**
      * Target management and storage.
      * @type {Array.<!Target>}
@@ -573,8 +580,8 @@ Runtime.prototype.getTargetForStage = function () {
  * Handle an animation frame from the main thread.
  */
 Runtime.prototype.animationFrame = function () {
-    if (self.renderer) {
+    if (this.renderer) {
-        self.renderer.draw();
+        this.renderer.draw();
     }
 };
 

src/index.js

@@ -10,8 +10,9 @@ var Blocks = require('./engine/blocks');
  * Handles connections between blocks, stage, and extensions.
  *
  * @author Andrew Sliwinski <ascii@media.mit.edu>
+ * @param {!RenderWebGL} renderer Renderer for the VM
  */
-function VirtualMachine () {
+function VirtualMachine (renderer) {
     var instance = this;
     // Bind event emitter and runtime to VM instance
     EventEmitter.call(instance);
@@ -19,7 +20,7 @@ function VirtualMachine () {
      * VM runtime, to store blocks, I/O devices, sprites/targets, etc.
      * @type {!Runtime}
      */
-    instance.runtime = new Runtime();
+    instance.runtime = new Runtime(renderer);
     /**
      * The "currently editing"/selected target ID for the VM.
      * Block events from any Blockly workspace are routed to this target.

src/io/mouse.js

@@ -28,8 +28,8 @@ Mouse.prototype.postData = function(data) {
 };
 
 Mouse.prototype._activateClickHats = function (x, y) {
-    if (self.renderer) {
+    if (this.runtime.renderer) {
-        var drawableID = self.renderer.pick(x, y);
+        var drawableID = this.runtime.renderer.pick(x, y);
         for (var i = 0; i < this.runtime.targets.length; i++) {
             var target = this.runtime.targets[i];
             if (target.hasOwnProperty('drawableID') &&

src/sprites/clone.js

@@ -21,10 +21,8 @@ function Clone(sprite, runtime) {
      * @type {?RenderWebGLWorker}
      */
     this.renderer = null;
-    // If this is not true, there is no renderer (e.g., running in a test env).
+    if (this.runtime) {
-    if (typeof self !== 'undefined' && self.renderer) {
+        this.renderer = this.runtime.renderer;
-        // Pull from `self.renderer`.
-        this.renderer = self.renderer;
     }
     /**
      * ID of the drawable for this clone returned by the renderer, if rendered.