Debugger tool (#4717)

* Add ability to set/remove debugger statements in jseditor

* made highlights darker, and only on current block being executed

* restructure ast2blocklist config and add debugger block for conversion

* Update status block behavior

* Add debug block and its behavior

* Update code2block unit test

Author: ebeetles

js/activity.js

@@ -253,6 +253,7 @@ class Activity {
 
         this.firstTimeUser = false;
         this.beginnerMode = false;
+        this.runMode = "normal";
 
         // Flag to disable keyboard during loading of MB
         this.keyboardEnableFlag;
@@ -1497,6 +1498,7 @@ class Activity {
          * @param env {specifies environment}
          */
         const doFastButton = (activity, env) => {
+            activity.runMode = "normal";
             activity._doFastButton(env);
         };
 
@@ -1732,6 +1734,7 @@ class Activity {
          * Runs Music Blocks at a slower rate
          */
         const doSlowButton = (activity) => {
+            activity.runMode = "slow";
             activity._doSlowButton();
         };
 
@@ -1758,6 +1761,7 @@ class Activity {
          * Runs music blocks step by step
          */
         const doStepButton = (activity) => {
+            activity.runMode = "step";
             activity._doStepButton();
         };
 

js/block.js

@@ -2846,6 +2846,8 @@ class Block {
                     if (!that.blocks.getLongPressStatus() && !that.blocks.stageClick) {
                         topBlk = that.blocks.findTopBlock(thisBlock);
 
+                        that.activity.runMode = "click";
+                        that.activity.logo.turtleDelay = that.activity.DEFAULTDELAY;
                         that.activity.logo.synth.resume();
 
                         if (that.activity.turtles.running()) {
@@ -2863,6 +2865,8 @@ class Block {
                 if (!that.blocks.getLongPressStatus() && !that.blocks.stageClick) {
                     topBlk = that.blocks.findTopBlock(thisBlock);
 
+                    that.activity.runMode = "click";
+                    that.activity.logo.turtleDelay = that.activity.DEFAULTDELAY;
                     that.activity.logo.synth.resume();
 
                     if (that.activity.turtles.running()) {

js/blocks.js

@@ -2144,6 +2144,12 @@ class Blocks {
             this.isBlockMoving = false;
             this.adjustExpandableClampBlock();
             this.activity.refreshCanvas();
+
+            if (this.activity.turtles.running()) {
+                this.activity.logo.doStopTurtles();
+                const stopBtn = document.getElementById("stop");
+                if (stopBtn) stopBtn.style.color = "white";
+            }
         };
 
         /**
@@ -6960,16 +6966,24 @@ class Blocks {
                     }
                 }
 
-                if (typeof value === "string") {
+                // Comprehensive safety check for all value types
+                if (value === null || value === undefined) {
+                    this.blockList[blk].text.text = "";
+                } else if (typeof value === "string") {
                     if (value.length > 6) {
                         value = value.substr(0, 5) + "...";
                     }
-
                     this.blockList[blk].text.text = value;
                 } else if (name === "divide") {
                     this.blockList[blk].text.text = mixedNumber(value);
                 } else {
-                    this.blockList[blk].text.text = value.toString();
+                    // Safe toString conversion
+                    try {
+                        this.blockList[blk].text.text = value.toString();
+                    } catch (error) {
+                        console.warn("Error converting value to string:", value, error);
+                        this.blockList[blk].text.text = "";
+                    }
                 }
 
                 this.blockList[blk].container.updateCache();

js/blocks/ExtrasBlocks.js

@@ -13,7 +13,7 @@
    global
    _, last, FlowBlock, ValueBlock, LeftBlock, NOINPUTERRORMSG,
    NANERRORMSG, mixedNumber, TONEBPM, DEFAULTDELAY, Singer,
-   StackClampBlock, platformColor
+   StackClampBlock, platformColor, StatusMatrix
 */
 
 /* exported setupExtrasBlocks */
@@ -840,6 +840,51 @@ function setupExtrasBlocks(activity) {
         }
     }
 
+    /**
+     * Represents a DebuggerBlock.
+     * Extends FlowBlock.
+     * @class
+     * @extends FlowBlock
+     */
+    class DebuggerBlock extends FlowBlock {
+        /**
+         * Creates an instance of DebuggerBlock.
+         */
+        constructor() {
+            super("debugger", _("debugger"));
+            this.setPalette("extras", activity);
+            this.setHelpString([
+                _("The Debug block adds a debug point in your code. When reached, execution will pause and you can inspect variables."),
+                "documentation",
+                "",
+                "debugger"
+            ]);
+
+            this.formBlock({
+                name: _("debugger")
+            });
+        }
+
+        /**
+         * Handles the flow of the DebuggerBlock.
+         * @param {Array} args - The arguments passed to the block.
+         * @param {Logo} logo - The Logo interpreter instance.
+         * @param {number} turtle - The turtle associated with the block.
+         * @param {Block} blk - The block instance.
+         */
+        flow(args, logo, turtle, blk) {
+            const mode = activity.runMode;
+
+            // Only run debugger statement if normal playmode (final product)
+            // All other run methods are for debugging only and should be used as such
+            if (mode !== "slow" && mode !== "step" && mode !== "click") {
+                return;
+            }
+            // Stop all turtles and pause execution
+            activity.logo.turtleDelay = -1;
+        }
+    }
+
     new SaveABCBlock().setup(activity);
     new SaveLilypondBlock().setup(activity);
     new SaveSVGBlock().setup(activity);
@@ -855,6 +900,7 @@ function setupExtrasBlocks(activity) {
     new WaitBlock().setup(activity);
     new CommentBlock().setup(activity);
     new PrintBlock().setup(activity);
+    new DebuggerBlock().setup(activity);
     // NOP blocks
     new NOPValueBlock().setup(activity);
     new NOPOneArgMathBlock().setup(activity);

js/blocks/WidgetBlocks.js

@@ -1545,22 +1545,6 @@ function setupWidgetBlocks(activity) {
             ]);
 
             this.formBlock({ name: _("status"), canCollapse: true });
-            this.makeMacro((x, y) => [
-                [0, "status", x, y, [null, 1, 11]],
-                [1, "hidden", 0, 0, [0, 10]],
-                [2, "print", 0, 0, [10, 3, 4]],
-                [3, "beatvalue", 0, 0, [2]],
-                [4, "print", 0, 0, [2, 5, 6]],
-                [5, "measurevalue", 0, 0, [4]],
-                [6, "print", 0, 0, [4, 7, 8]],
-                [7, "elapsednotes", 0, 0, [6]],
-                [8, "print", 0, 0, [6, 9, null]],
-                [9, "bpmfactor", 0, 0, [8]],
-                [10, "print", 0, 0, [1, 12, 2]],
-                [11, "hiddennoflow", 0, 0, [0, null]],
-                [12, ["outputtools", { value: "letter class" }], 0, 0, [10, 13]],
-                [13, "currentpitch", 0, 0, [12]]
-            ]);
         }
 
         /**

js/js-export/__tests__/ast2blocklist.test.js

@@ -1153,16 +1153,16 @@ describe("AST2BlockList Class", () => {
             [25, ["text", { "value": "action" }], 0, 0, [24]],
             [26, "drift", 0, 0, [24, 27, null]],
             [27, "onbeatdo", 0, 0, [26, 28, 29, 30]],
-            [28, ["namedbox", { "value": "BEATCOUNT" }], 0, 0, [27]],
+            [28, "nopValueBlock", 0, 0, [27]],
             [29, ["text", { "value": "action" }], 0, 0, [27]],
             [30, "onbeatdo", 0, 0, [27, 31, 32, 33]],
-            [31, ["namedbox", { "value": "MEASURECOUNT" }], 0, 0, [30]],
+            [31, "nopValueBlock", 0, 0, [30]],
             [32, ["text", { "value": "action" }], 0, 0, [30]],
             [33, "onbeatdo", 0, 0, [30, 34, 35, 36]],
-            [34, ["namedbox", { "value": "BPM" }], 0, 0, [33]],
+            [34, "nopValueBlock", 0, 0, [33]],
             [35, ["text", { "value": "action" }], 0, 0, [33]],
             [36, "onbeatdo", 0, 0, [33, 37, 38, 39]],
-            [37, ["namedbox", { "value": "BEATFACTOR" }], 0, 0, [36]],
+            [37, "beatfactor", 0, 0, [36]],
             [38, ["text", { "value": "action" }], 0, 0, [36]],
             [39, "everybeatdonew", 0, 0, [36, 40, 41]],
             [40, ["text", { "value": "action" }], 0, 0, [39]],

js/js-export/ast2blocklist.js

@@ -73,6 +73,7 @@ class AST2BlockList {
             for (let body of AST.body) {
                 _createNodeAndAddToTree(body, root);
             }
+            console.log(JSON.stringify(root["children"], null, 2));
             return root["children"];
 
             //
@@ -137,6 +138,14 @@ class AST2BlockList {
                         }
                     }
                     if (matched) {
+                        // If there's no name property but there is a name_map, try to get the name from the map
+                        if (entry.name_map) {
+                            const calleePropertyName = _getPropertyValue(bodyAST, "expression.argument.callee.property.name");
+                            if (calleePropertyName && entry.name_map[calleePropertyName]) {
+                                console.log(entry.name_map[calleePropertyName]);
+                                entry.name = entry.name_map[calleePropertyName];
+                            }
+                        }
                         return entry;
                     }
                 }
@@ -294,7 +303,7 @@ class AST2BlockList {
             function _propertyOf(block) {
                 const block_name = Array.isArray(block[1]) ? block[1][0] : block[1];
                 for (const entry of config.body_blocks) {
-                    if ("name" in entry && entry.name === block_name) {
+                    if (("name" in entry && entry.name === block_name) || ("name_map" in entry && Object.values(entry.name_map).includes(block_name))) {
                         // Use default_connections if blocklist_connections is not specified
                         const connections = {
                             count: entry.blocklist_connections ? entry.blocklist_connections.length : config.default_connections.length
@@ -315,7 +324,7 @@ class AST2BlockList {
 
                         const secondChildIndex = connectionsArray.indexOf("second_child");
                         if (secondChildIndex !== -1) connections.second_child = secondChildIndex;
-
+                        
                         // Use default_vspaces if not specified in the block
                         const vspaces = entry.default_vspaces || config.default_vspaces || { body: 1 };
                         return "body" in vspaces ? {
@@ -506,6 +515,14 @@ class AST2BlockList {
                     if (entry.name === block_name) {
                         blockConfig = entry;
                         break;
+                    } else if (entry.name_map) {
+                        for (const name in entry.name_map) {
+                            if (block_name === entry.name_map[name]) {
+                                blockConfig = entry;
+                                console.log(entry);
+                                console.log(block_name);
+                            }
+                        }
                     }
                 }
 
@@ -609,6 +626,9 @@ class AST2BlockList {
                     connections[0] = parentBlockNumber;
                     block.push(connections);
                     vspaces = _addValueArgsToBlockList(arg.arguments, blockList, blockNumber);
+                    if (arg.arguments.length === 0) {
+                        vspaces += 1;
+                    }
                 } else {
                     throw new Error(`Unsupported value argument: ${arg}`);
                 }