Move blockListener to blocks.js; combine flyout listener

playground/playground.js

@@ -20,9 +20,10 @@ window.onload = function() {
     });
     window.workspace = workspace;
 
-    // @todo: Also bind to flyout events.
     // Block events.
     workspace.addChangeListener(vm.blockListener);
+    var flyoutWorkspace = workspace.toolbox_.flyout_.workspace_;
+    flyoutWorkspace.addChangeListener(vm.flyoutBlockListener);
 
     var explorer = document.getElementById('blockexplorer');
     workspace.addChangeListener(function() {

src/engine/blocks.js

@@ -1,3 +1,5 @@
+var adapter = require('./adapter');
+
 /**
  * @fileoverview
  * Store and mutate the VM block representation,
@@ -80,6 +82,70 @@ Blocks.prototype.getOpcode = function (id) {
 
 // ---------------------------------------------------------------------
 
+/**
+ * Create event listener for blocks. Handles validation and serves as a generic
+ * adapter between the blocks and the runtime interface.
+ * @param {boolean} isFlyout If true, create a listener for flyout events.
+ * @param {?Runtime} opt_runtime Optional runtime to forward click events to.
+ * @return {Function} A generated listener to attach to Blockly instance.
+ */
+
+Blocks.prototype.generateBlockListener = function (isFlyout, opt_runtime) {
+    /**
+     * The actual generated block listener.
+     * @param {Object} Blockly "block" event
+     */
+    var instance = this;
+    return function (e) {
+        // Validate event
+        if (typeof e !== 'object') return;
+        if (typeof e.blockId !== 'string') return;
+
+        // UI event: clicked stacks toggle in the runtime.
+        if (e.element === 'stackclick') {
+            if (opt_runtime) {
+                opt_runtime.toggleStack(e.blockId);
+            }
+            return;
+        }
+
+        // Block create/update/destroy
+        switch (e.type) {
+        case 'create':
+            var newBlocks = adapter(e);
+            // A create event can create many blocks. Add them all.
+            for (var i = 0; i < newBlocks.length; i++) {
+                instance.createBlock(newBlocks[i], isFlyout);
+            }
+            break;
+        case 'change':
+            instance.changeBlock({
+                id: e.blockId,
+                element: e.element,
+                name: e.name,
+                value: e.newValue
+            });
+            break;
+        case 'move':
+            instance.moveBlock({
+                id: e.blockId,
+                oldParent: e.oldParentId,
+                oldInput: e.oldInputName,
+                newParent: e.newParentId,
+                newInput: e.newInputName
+            });
+            break;
+        case 'delete':
+            instance.deleteBlock({
+                id: e.blockId
+            });
+            break;
+        }
+    };
+};
+
+// ---------------------------------------------------------------------
+
 /**
  * Block management: create blocks and stacks from a `create` event
  * @param {!Object} block Blockly create event to be processed

src/index.js

@@ -3,7 +3,6 @@ var util = require('util');
 
 var Blocks = require('./engine/blocks');
 var Runtime = require('./engine/runtime');
-var adapter = require('./engine/adapter');
 
 /**
  * Handles connections between blocks, stage, and extensions.
@@ -20,83 +19,15 @@ function VirtualMachine () {
     instance.runtime = new Runtime(instance.blocks);
 
     /**
-     * Event listener for blocks. Handles validation and serves as a generic
+     * Event listeners for scratch-blocks.
-     * adapter between the blocks and the runtime interface.
-     *
-     * @param {Object} Blockly "block" event
      */
-    instance.blockListener = function (e) {
+    instance.blockListener = (
-        // Validate event
+        instance.blocks.generateBlockListener(false, instance.runtime)
-        if (typeof e !== 'object') return;
+    );
-        if (typeof e.blockId !== 'string') return;
 
-        // UI event: clicked stacks toggle in the runtime.
+    instance.flyoutBlockListener = (
-        if (e.element === 'stackclick') {
+        instance.blocks.generateBlockListener(true, instance.runtime)
-            instance.runtime.toggleStack(e.blockId);
+    );
-            return;
-        }
-
-        // Block create/update/destroy
-        switch (e.type) {
-        case 'create':
-            var newBlocks = adapter(e);
-            // A create event can create many blocks. Add them all.
-            for (var i = 0; i < newBlocks.length; i++) {
-                instance.blocks.createBlock(newBlocks[i], false);
-            }
-            break;
-        case 'change':
-            instance.blocks.changeBlock({
-                id: e.blockId,
-                element: e.element,
-                name: e.name,
-                value: e.newValue
-            });
-            break;
-        case 'move':
-            instance.blocks.moveBlock({
-                id: e.blockId,
-                oldParent: e.oldParentId,
-                oldInput: e.oldInputName,
-                newParent: e.newParentId,
-                newInput: e.newInputName
-            });
-            break;
-        case 'delete':
-            instance.blocks.deleteBlock({
-                id: e.blockId
-            });
-            break;
-        }
-    };
-
-    instance.flyoutBlockListener = function (e) {
-        switch (e.type) {
-        case 'create':
-            var newBlocks = adapter(e);
-            // A create event can create many blocks. Add them all.
-            for (var i = 0; i < newBlocks.length; i++) {
-                instance.blocks.createBlock(newBlocks[i], true);
-            }
-            break;
-        case 'change':
-            instance.blocks.changeBlock({
-                id: e.blockId,
-                element: e.element,
-                name: e.name,
-                value: e.newValue
-            });
-            break;
-        case 'delete':
-            instance.blocks.deleteBlock({
-                id: e.blockId
-            });
-            break;
-        case 'stackclick':
-            instance.runtime.toggleStack(e.blockId);
-            break;
-        }
-    };
 }
 
 /**