add add monitor action

src/engine/blocks.js

@@ -292,6 +292,21 @@ class Blocks {
             block.isMonitored = args.value;
             if (optRuntime && wasMonitored && !block.isMonitored) {
                 optRuntime.removeMonitors([{id: block.id}]);
+            } else if (optRuntime && !wasMonitored && block.isMonitored) {
+                optRuntime.addMonitors(
+                    // Ensure that value is not undefined, since React requires it
+                    [{
+                        // @todo(dd) this will collide if multiple sprites use same block
+                        id: block.id,
+                        category: 'data',
+                        // @todo(dd) how to handle translation here?
+                        label: block.opcode,
+                        value: '',
+                        x: 0,
+                        // @todo(dd) place below the last monitor instead
+                        y: 0
+                    }]
+                );
             }
             break;
         }

src/engine/execute.js

@@ -87,7 +87,6 @@ const execute = function (sequencer, thread) {
         } else {
             // In a non-hat, report the value visually if necessary if
             // at the top of the thread stack.
-
             if (typeof resolvedValue !== 'undefined' && thread.atStackTop()) {
                 if (thread.showVisualReport) {
                     runtime.visualReport(currentBlockId, resolvedValue);
@@ -95,15 +94,8 @@ const execute = function (sequencer, thread) {
 
                 if (thread.updateMonitor) {
                     runtime.updateMonitors([{
-                        // @todo(dd) this will collide if multiple sprites use same block
                         id: currentBlockId,
-                        category: 'data',
-                        // @todo(dd) how to handle translation here?
-                        label: blockContainer.getOpcode(blockContainer.getBlock(currentBlockId)),
-                        value: String(resolvedValue),
-                        x: 0,
-                        // @todo(dd) place below the last monitor instead
-                        y: 0
+                        value: String(resolvedValue)
                     }]);
                 }
             }

src/engine/runtime.js

@@ -249,6 +249,14 @@ class Runtime extends EventEmitter {
         return 'MONITORS_REMOVED';
     }
 
+    /**
+     * Event name for monitors added.
+     * @const {string}
+     */
+    static get MONITORS_ADDED () {
+        return 'MONITORS_ADDED';
+    }
+
     /**
      * How rapidly we try to step threads by default, in ms.
      */
@@ -881,6 +889,14 @@ class Runtime extends EventEmitter {
         this.emit(Runtime.MONITORS_REMOVED, monitors);
     }
 
+    /**
+     * Emit a monitor update which adds if it doesn't already exist the given monitors.
+     * @param {!Array} monitors Array of monitors to add.
+     */
+    addMonitors (monitors) {
+        this.emit(Runtime.MONITORS_ADDED, monitors);
+    }
+
     /**
      * Get a target by its id.
      * @param {string} targetId Id of target to find.

src/virtual-machine.js

@@ -61,6 +61,9 @@ class VirtualMachine extends EventEmitter {
         instance.runtime.on(Runtime.MONITORS_REMOVED, monitorList => {
             instance.emit(Runtime.MONITORS_REMOVED, monitorList);
         });
+        instance.runtime.on(Runtime.MONITORS_ADDED, monitorList => {
+            instance.emit(Runtime.MONITORS_ADDED, monitorList);
+        });
 
         this.blockListener = this.blockListener.bind(this);
         this.flyoutBlockListener = this.flyoutBlockListener.bind(this);