fix: fix the color of procedure argument blocks (#216)

src/renderer/path_object.js

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Blockly from "blockly/core";
+
+/**
+ * An object that handles creating and setting each of the SVG elements
+ * used by the renderer.
+ */
+export class PathObject extends Blockly.zelos.PathObject {
+  /**
+   * Apply the stored colours to the block's path, taking into account whether
+   * the paths belong to a shadow block.
+   *
+   * @param {!Blockly.BlockSvg} block The source block.
+   */
+  applyColour(block) {
+    super.applyColour(block);
+
+    // These blocks are special in that, while they are technically shadow
+    // blocks when contained in a procedure definition/prototype, their parent
+    // (the sample procedure caller block embedded in the definition block) is
+    // also a shadow, so they need to use normal block colors in order to
+    // provide contrast with it.
+    if (
+      block.type === "argument_reporter_string_number" ||
+      block.type === "argument_reporter_boolean"
+    ) {
+      this.svgPath.setAttribute("fill", this.style.colourPrimary);
+    }
+  }
+}

src/renderer/renderer.js

@@ -8,20 +8,61 @@ import * as Blockly from "blockly/core";
 import { Drawer } from "./drawer.js";
 import { RenderInfo } from "./render_info.js";
 import { ConstantProvider } from "./constants.js";
+import { PathObject } from "./path_object.js";
 
+/**
+ * Custom renderer for Scratch-style blocks.
+ */
 export class ScratchRenderer extends Blockly.zelos.Renderer {
+  /**
+   * Create a new instance of the renderer's drawer.
+   *
+   * @param {!Blockly.BlockSvg} block The block to render.
+   * @param info {!Blockly.blockRendering.RenderInfo} An object containing all
+   *     information needed to render this block.
+   * @returns {!Drawer} The drawer.
+   */
   makeDrawer_(block, info) {
     return new Drawer(block, info);
   }
 
+  /**
+   * Create a new instance of the renderer's render info object.
+   *
+   * @param {!Blockly.BlockSvg} block The block to measure.
+   * @returns {!RenderInfo} The render info object.
+   */
   makeRenderInfo_(block) {
     return new RenderInfo(this, block);
   }
 
+  /**
+   * Create a new instance of the renderer's constant provider.
+   *
+   * @returns {!ConstantProvider} The constant provider.
+   */
   makeConstants_() {
     return new ConstantProvider();
   }
 
+  /**
+   * Create a new instance of a renderer path object.
+   *
+   * @param {!SVGElement} root The root SVG element.
+   * @param {!Blockly.BlockStyle} style The style object to use for colouring.
+   * @returns {!PathObject} The renderer path object.
+   */
+  makePathObject(root, style) {
+    return new PathObject(root, style, this.getConstants());
+  }
+
+  /**
+   * Determine whether or not to highlight a connection.
+   *
+   * @param {!Blockly.RenderedConnection} connection The connection to determine
+   *     whether or not to highlight.
+   * @returns {boolean} True if we should highlight the connection.
+   */
   shouldHighlightConnection(connection) {
     return (
       connection.type === Blockly.ConnectionType.INPUT_VALUE &&