Fix JS Editor bugs for some number, graphics, pen blocks (#2758)

* let to const

* Fix cases for random, oneOf, and distance blocks

* Fix reference errors in getters

* Add graphics and pen getters to interface list

* Add random, one of, and distance to JS Export documentation

.eslintrc.json

@@ -7,7 +7,7 @@
   },
   "extends": ["eslint:recommended", "prettier"],
   "rules": {
-    "no-console": "warn",
+    // "no-console": "warn",
     "no-mixed-spaces-and-tabs": "warn",
     // "no-unused-vars": "warn",
     // "no-use-before-define": "error",

.github/linters/.eslintrc.yml

@@ -3,7 +3,7 @@
   "env": { "es6": true, "browser": true, "node": true },
   "extends": ["eslint:recommended"],
   "rules": {
-      "no-console": "warn",
+      # "no-console": "warn",
       "no-mixed-spaces-and-tabs": "warn",
       # "no-unused-vars": "warn",
       # "no-use-before-define": "error",

js/js-export/ASTutils.js

@@ -175,7 +175,7 @@ class ASTUtils {
      * @returns {Object} Abstract Syntax Tree of if/if-else block
      */
     static _getIfAST(args, ifFlow, elseFlow, iteratorNum) {
-        let AST = {
+        const AST = {
             type: "IfStatement",
             test: ASTUtils._getArgsAST(args)[0],
             consequent: {
@@ -300,8 +300,8 @@ class ASTUtils {
      * @returns {Object} Abstract Syntax Tree of increment assignment statement
      */
     static _getIncrementStmntAST(args, isIncrement) {
-        let identifier = args[0].split("_")[1];
-        let arg = ASTUtils._getArgsAST([args[1]])[0];
+        const identifier = args[0].split("_")[1];
+        const arg = ASTUtils._getArgsAST([args[1]])[0];
 
         return {
             type: "ExpressionStatement",
@@ -502,7 +502,7 @@ class ASTUtils {
                 return getCallExpAST(mathOps[methodName][1], args);
             }
         } else {
-            return getCallExpAST(methodName, args);
+            return getCallExpAST(JSInterface.getMethodName(methodName), args);
         }
     }
 
@@ -516,8 +516,8 @@ class ASTUtils {
     static _getArgsAST(args) {
         if (args === undefined || args === null) return [];
 
-        let ASTs = [];
-        for (let arg of args) {
+        const ASTs = [];
+        for (const arg of args) {
             if (arg === null) {
                 ASTs.push({
                     type: "Literal",
@@ -535,7 +535,7 @@ class ASTUtils {
                 }
             } else {
                 if (typeof arg === "string" && arg.split("_").length > 1) {
-                    let [type, argVal] = arg.split("_");
+                    const [type, argVal] = arg.split("_");
                     if (type === "bool") {
                         ASTs.push({
                             type: "Literal",
@@ -570,7 +570,7 @@ class ASTUtils {
      * @returns {Object} - Abstract Syntax Tree of method call
      */
     static _getMethodCallClampAST(methodName, args, flows, iteratorNum) {
-        let AST = ASTUtils._getMethodCallAST(methodName, args);
+        const AST = ASTUtils._getMethodCallAST(methodName, args);
 
         AST["expression"]["argument"]["arguments"].push({
             type: "ArrowFunctionExpression",
@@ -614,8 +614,8 @@ class ASTUtils {
     static _getBlockAST(flows, iterMax) {
         if (flows === undefined || flows === null) return [];
 
-        let ASTs = [];
-        for (let flow of flows) {
+        const ASTs = [];
+        for (const flow of flows) {
             if (flow[0] === "if") {
                 ASTs.push(ASTUtils._getIfAST(flow[1], flow[2], iterMax));
             } else if (flow[0] === "ifthenelse") {
@@ -640,7 +640,7 @@ class ASTUtils {
                     cases: ASTUtils._getBlockAST(flow[2], iterMax)
                 });
             } else if (flow[0] === "case") {
-                let AST = {
+                const AST = {
                     type: "SwitchCase",
                     test: ASTUtils._getArgsAST(flow[1])[0],
                     consequent: [
@@ -651,8 +651,8 @@ class ASTUtils {
                     ]
                 };
 
-                let flowASTs = ASTUtils._getBlockAST(flow[2], iterMax);
-                for (let i in flowASTs) {
+                const flowASTs = ASTUtils._getBlockAST(flow[2], iterMax);
+                for (const i in flowASTs) {
                     AST["consequent"].splice(i, 0, flowASTs[i]);
                 }
 
@@ -670,7 +670,7 @@ class ASTUtils {
             } else if (flow[0] === "decrementOne") {
                 ASTs.push(ASTUtils._getIncrementStmntAST([flow[1][0], 1], false));
             } else if (flow[0].split("_").length > 1) {
-                let [instruction, idName] = flow[0].split("_");
+                const [instruction, idName] = flow[0].split("_");
                 if (instruction === "storein2") {
                     ASTs.push({
                         type: "VariableDeclaration",
@@ -718,10 +718,10 @@ class ASTUtils {
      * @returns {Object} mouse Abstract Syntax Tree for the tree
      */
     static getMethodAST(methodName, tree) {
-        let AST = ASTUtils._getMethodDefAST(methodName);
+        const AST = ASTUtils._getMethodDefAST(methodName);
 
-        let ASTs = ASTUtils._getBlockAST(tree);
-        for (let i in ASTs) {
+        const ASTs = ASTUtils._getBlockAST(tree);
+        for (const i in ASTs) {
             AST["declarations"][0]["init"]["body"]["body"].splice(i, 0, ASTs[i]);
         }
 
@@ -736,10 +736,10 @@ class ASTUtils {
      * @returns {Object} mouse Abstract Syntax Tree for the tree
      */
     static getMouseAST(tree) {
-        let AST = JSON.parse(JSON.stringify(ASTUtils._mouseAST));
+        const AST = JSON.parse(JSON.stringify(ASTUtils._mouseAST));
 
-        let ASTs = ASTUtils._getBlockAST(tree);
-        for (let i in ASTs) {
+        const ASTs = ASTUtils._getBlockAST(tree);
+        for (const i in ASTs) {
             AST["expression"]["arguments"][0]["body"]["body"].splice(i, 0, ASTs[i]);
         }
 

js/js-export/export.js

@@ -320,19 +320,19 @@ class MusicBlocks {
     // ================================ PEN ===================================
 
     get PENSIZE() {
-        return this.turtle.stroke;
+        return this.turtle.painter.stroke;
     }
 
     get COLOR() {
-        return this.turtle.color;
+        return this.turtle.painter.color;
     }
 
     get SHADE() {
-        return this.turtle.value;
+        return this.turtle.painter.value;
     }
 
     get GREY() {
-        return this.turtle.chroma;
+        return this.turtle.painter.chroma;
     }
 
     // ============================== RHYTHM ==================================

js/js-export/generate.js

@@ -58,7 +58,7 @@ class JSGenerate {
 
         blocks.findStacks();
 
-        for (let blk of blocks.stackList) {
+        for (const blk of blocks.stackList) {
             if (blocks.blockList[blk].name === "start" && !blocks.blockList[blk].trash) {
                 JSGenerate.startBlocks.push(blk);
             } else if (blocks.blockList[blk].name === "action" && !blocks.blockList[blk].trash) {
@@ -95,7 +95,7 @@ class JSGenerate {
                     argLen -= 2;
                 }
 
-                let args = [];
+                const args = [];
                 for (let i = 1; i <= argLen; i++) {
                     let arg = blocks.blockList[blk.connections[i]];
                     if (arg === undefined) {
@@ -156,7 +156,7 @@ class JSGenerate {
                         tree.push([nextBlk.name]);
                     }
 
-                    let args = ParseArg(nextBlk);
+                    const args = ParseArg(nextBlk);
                     last(tree).push(args.length === 0 ? null : args);
 
                     if (nextBlk.protoblock.style === "clamp") {
@@ -180,11 +180,11 @@ class JSGenerate {
             return tree;
         }
 
-        for (let blk of JSGenerate.startBlocks) {
+        for (const blk of JSGenerate.startBlocks) {
             JSGenerate.startTrees.push(GenerateStackTree(blocks.blockList[blk], []));
         }
 
-        for (let blk of JSGenerate.actionBlocks) {
+        for (const blk of JSGenerate.actionBlocks) {
             let actionName = blocks.blockList[blocks.blockList[blk].connections[1]].value;
             if (actionName === null || actionName === undefined) continue;
 
@@ -217,7 +217,7 @@ class JSGenerate {
                 if (args === null || args.length === 0) return "none";
 
                 let str = "(";
-                for (let arg of args) {
+                for (const arg of args) {
                     if (arg === null) {
                         str += "null";
                     } else if (typeof arg === "object") {
@@ -233,7 +233,7 @@ class JSGenerate {
 
             if (level === undefined) level = 0;
 
-            for (let i of tree) {
+            for (const i of tree) {
                 let spaces = "";
                 for (let j = 0; j < 4 * level; j++) spaces += " ";
                 console.log(
@@ -255,7 +255,7 @@ class JSGenerate {
         if (JSGenerate.startTrees.length === 0) {
             console.log("%cno start trees generated", "color: tomato");
         } else {
-            for (let tree of JSGenerate.startTrees) {
+            for (const tree of JSGenerate.startTrees) {
                 console.log(
                     "\n   " + "%c START ",
                     "background: navy; color: white; font-weight: bold"
@@ -268,7 +268,7 @@ class JSGenerate {
         if (JSGenerate.startTrees.length === 0) {
             console.log("%cno action trees generated", "color: tomato");
         } else {
-            for (let tree of JSGenerate.actionTrees) {
+            for (const tree of JSGenerate.actionTrees) {
                 console.log(
                     "\n   " + "%c ACTION ",
                     "background: green; color: white; font-weight: bold"
@@ -300,7 +300,7 @@ class JSGenerate {
                 );
             }
 
-            let offset = JSGenerate.actionTrees.length;
+            const offset = JSGenerate.actionTrees.length;
             for (let i = 0; i < JSGenerate.startTrees.length; i++) {
                 JSGenerate.AST["body"].splice(
                     i + offset,
@@ -323,7 +323,7 @@ class JSGenerate {
         }
 
         if (JSGenerate.generateFailed) {
-            let AST = JSON.parse(JSON.stringify(ASTUtils.BAREBONE_AST));
+            const AST = JSON.parse(JSON.stringify(ASTUtils.BAREBONE_AST));
             AST["body"].splice(0, 0, ASTUtils.getMouseAST([]));
             JSGenerate.code = astring.generate(AST);
         }

js/js-export/interface.js

@@ -110,7 +110,16 @@ class JSInterface {
         currentmode: "CURRENTMODE",
         modelength: "MODELENGTH",
         // Volume blocks
-        notevolumefactor: "MASTERVOLUME"
+        notevolumefactor: "MASTERVOLUME",
+        // Graphics blocks
+        x: "X",
+        y: "Y",
+        heading: "HEADING",
+        // Pen blocks
+        pensize: "PENSIZE",
+        color: "COLOR",
+        shade: "SHADE",
+        grey: "GREY"
     };
 
     /**

js/js-export/samples/sample.js

@@ -178,6 +178,13 @@ set relative volume         : setRelativeVolume(value, flow)
 set drum                    : setDrum(drum, flow)
 map pitch to drum           : mapPitchToDrum(drum, flow)
 
+    // Number
+// use MathUtility.funcName(...) instead of mouse.funcName(...) for these
+
+random                      : doRandom(lowerLimit, upperLimit)
+one of                      : doOneOf(value_1, value_2)
+distance                    : doCalculateDistance(x_1, y_1, x_2, y_2)
+
     // Pen
 draw filled polygon         : fillShape(flow)
 draw hollow lines           : hollowLine(flow)