fix: reenable reporting block values (#55)

* fix: reenable reporting block values

* fix: make reporter bubbles appear on the correct block

* fix: avoid error when attempting to report values of nonexistent blocks

src/block_reporting.js

@@ -0,0 +1,21 @@
+import * as Blockly from 'blockly/core';
+import {Colours} from '../core/colours.js';
+
+export function reportValue(id, value) {
+  const block = Blockly.getMainWorkspace().getBlockById(id) ||
+      Blockly.getMainWorkspace().getFlyout().getWorkspace().getBlockById(id);
+  if (!block) {
+    throw 'Tried to report value on block that does not exist.';
+  }
+  const field = block.inputList[0].fieldRow[0];
+  const contentDiv = Blockly.DropDownDiv.getContentDiv();
+  const valueReportBox = document.createElement('div');
+  valueReportBox.setAttribute('class', 'valueReportBox');
+  valueReportBox.innerText = value;
+  contentDiv.appendChild(valueReportBox);
+  Blockly.DropDownDiv.setColour(
+      Colours.valueReportBackground,
+      Colours.valueReportBorder
+  );
+  Blockly.DropDownDiv.showPositionedByBlock(field, block);
+}

src/checkable_continuous_flyout.js

@@ -74,6 +74,16 @@ export class CheckableContinuousFlyout extends ContinuousFlyout {
     super.show(flyoutDef);
   }
 
+  serializeBlock(block) {
+    const json = super.serializeBlock(block);
+    // Delete the serialized block's ID so that a new one is generated when it is
+    // placed on the workspace. Otherwise, the block on the workspace may be
+    // indistinguishable from the one in the flyout, which can cause reporter blocks
+    // to have their value dropdown shown in the wrong place.
+    delete json.id;
+    return json;
+  }
+
   clearOldCheckboxes() {
     for (const checkbox of this.checkboxes_.values()) {
       checkbox.svgRoot.remove();

src/index.js

@@ -32,6 +32,7 @@ import {CheckableContinuousFlyout} from './checkable_continuous_flyout.js';
 import './scratch_continuous_category.js';
 
 export * from 'blockly';
+export * from './block_reporting.js';
 export * from './categories.js';
 export * from './procedures.js';
 export * from '../core/colours.js';