scratch-blocks 2.0.2 → 2.0.4

package/src/checkable_continuous_flyout.ts

@@ -1,68 +1,60 @@
 /**
- * @license
  * Copyright 2024 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-
-import * as Blockly from "blockly/core";
-import { ContinuousFlyout } from "@blockly/continuous-toolbox";
-import { CheckboxBubble } from "./checkbox_bubble";
-import { StatusIndicatorLabel } from "./status_indicator_label";
-import { STATUS_INDICATOR_LABEL_TYPE } from "./status_indicator_label_flyout_inflater";
+import { ContinuousFlyout } from '@blockly/continuous-toolbox'
+import * as Blockly from 'blockly/core'
+import { CheckboxBubble } from './checkbox_bubble'
+import { StatusIndicatorLabel } from './status_indicator_label'
+import { STATUS_INDICATOR_LABEL_TYPE } from './status_indicator_label_flyout_inflater'
 
 export class CheckableContinuousFlyout extends ContinuousFlyout {
   /**
    * Creates a new CheckableContinuousFlyout.
-   *
    * @param workspaceOptions Configuration options for the flyout workspace.
    */
   constructor(workspaceOptions: Blockly.Options) {
-    workspaceOptions.modalInputs = false;
-    super(workspaceOptions);
-    this.tabWidth_ = 0;
-    this.MARGIN = 12;
-    this.GAP_Y = 12;
+    workspaceOptions.modalInputs = false
+    super(workspaceOptions)
+    this.tabWidth_ = 0
+    this.MARGIN = 12
+    this.GAP_Y = 12
   }
 
   /**
    * Serializes a block to JSON in order to copy it to the main workspace.
-   *
    * @param block The block to serialize.
    * @returns A JSON representation of the block.
    */
   protected serializeBlock(block: Blockly.BlockSvg) {
-    const json = super.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;
+    delete json.id
+    return json
   }
 
   /**
    * Set the state of a checkbox by block ID.
-   *
    * @param blockId ID of the block whose checkbox should be set
    * @param value Value to set the checkbox to.
    */
   setCheckboxState(blockId: string, value: boolean) {
-    this.getWorkspace()
-      .getBlockById(blockId)
-      ?.getIcon("checkbox")
-      ?.setChecked(value);
+    this.getWorkspace().getBlockById(blockId)?.getIcon('checkbox')?.setChecked(value)
   }
 
   getFlyoutScale() {
-    return 0.675;
+    return 0.675
   }
 
   getWidth() {
-    return 250;
+    return 250
   }
 
   protected reflowInternal_() {
-    super.reflowInternal_();
+    super.reflowInternal_()
 
     if (this.RTL) {
       // The parent implementation assumes that the flyout grows to fit its
@@ -70,33 +62,24 @@ export class CheckableContinuousFlyout extends ContinuousFlyout {
       // flyout width is fixed (and blocks may exceed it), so re-adjust blocks
       // accordingly based on the actual fixed width.
       for (const item of this.getContents()) {
-        const oldX = item.getElement().getBoundingRectangle().left;
+        const oldX = item.getElement().getBoundingRectangle().left
         let newX =
-          this.getWidth() / this.workspace_.scale -
-          item.getElement().getBoundingRectangle().getWidth() -
-          this.MARGIN;
-        if (
-          "checkboxInFlyout" in item.getElement() &&
-          item.getElement().checkboxInFlyout
-        ) {
-          newX -= CheckboxBubble.CHECKBOX_SIZE + CheckboxBubble.CHECKBOX_MARGIN;
+          this.getWidth() / this.workspace_.scale - item.getElement().getBoundingRectangle().getWidth() - this.MARGIN
+        if ('checkboxInFlyout' in item.getElement() && item.getElement().checkboxInFlyout) {
+          newX -= CheckboxBubble.CHECKBOX_SIZE + CheckboxBubble.CHECKBOX_MARGIN
         }
-        item.getElement().moveBy(newX - oldX, 0);
+        item.getElement().moveBy(newX - oldX, 0)
       }
     }
   }
 
   /**
    * Validates that the given toolbox item represents a label.
-   *
    * @param item The toolbox item to check.
    * @returns True if the item represents a label in the flyout.
    */
   protected toolboxItemIsLabel(item: Blockly.FlyoutItem) {
-    return (
-      item.getType() === STATUS_INDICATOR_LABEL_TYPE ||
-      super.toolboxItemIsLabel(item)
-    );
+    return item.getType() === STATUS_INDICATOR_LABEL_TYPE || super.toolboxItemIsLabel(item)
   }
 
   /**
@@ -105,12 +88,12 @@ export class CheckableContinuousFlyout extends ContinuousFlyout {
   refreshStatusButtons() {
     for (const item of this.contents) {
       if (item.element instanceof StatusIndicatorLabel) {
-        item.element.refreshStatus();
+        item.element.refreshStatus()
       }
     }
   }
 
   scrollTo(position: number) {
-    super.scrollTo(Math.ceil(position));
+    super.scrollTo(Math.ceil(position))
   }
 }

package/src/checkbox_bubble.ts

@@ -1,256 +1,236 @@
 /**
- * @license
  * Copyright 2024 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-
-import * as Blockly from "blockly/core";
+import * as Blockly from 'blockly/core'
 
 /**
  * A checkbox shown next to reporter blocks in the flyout.
  */
-export class CheckboxBubble
-  implements Blockly.IBubble, Blockly.IRenderedElement
-{
+export class CheckboxBubble implements Blockly.IBubble, Blockly.IRenderedElement {
   /**
    * Size of a checkbox next to a variable reporter.
    */
-  static readonly CHECKBOX_SIZE = 25;
+  static readonly CHECKBOX_SIZE = 25
 
   /**
    * Amount of touchable padding around reporter checkboxes.
    */
-  static readonly CHECKBOX_TOUCH_PADDING = 12;
+  static readonly CHECKBOX_TOUCH_PADDING = 12
 
   /**
    * SVG path data for checkmark in checkbox.
    */
   static readonly CHECKMARK_PATH =
-    "M" +
+    'M' +
     CheckboxBubble.CHECKBOX_SIZE / 4 +
-    " " +
+    ' ' +
     CheckboxBubble.CHECKBOX_SIZE / 2 +
-    "L" +
+    'L' +
     (5 * CheckboxBubble.CHECKBOX_SIZE) / 12 +
-    " " +
+    ' ' +
     (2 * CheckboxBubble.CHECKBOX_SIZE) / 3 +
-    "L" +
+    'L' +
     (3 * CheckboxBubble.CHECKBOX_SIZE) / 4 +
-    " " +
-    CheckboxBubble.CHECKBOX_SIZE / 3;
+    ' ' +
+    CheckboxBubble.CHECKBOX_SIZE / 3
 
   /**
    * Size of the checkbox corner radius.
    */
-  static readonly CHECKBOX_CORNER_RADIUS = 5;
+  static readonly CHECKBOX_CORNER_RADIUS = 5
 
   /**
    * The margin around a checkbox.
    */
-  static readonly CHECKBOX_MARGIN = 12;
+  static readonly CHECKBOX_MARGIN = 12
 
   /**
    * Total additional width of a row that contains a checkbox.
    */
-  static readonly CHECKBOX_SPACE_X =
-    CheckboxBubble.CHECKBOX_SIZE + 2 * CheckboxBubble.CHECKBOX_MARGIN;
+  static readonly CHECKBOX_SPACE_X = CheckboxBubble.CHECKBOX_SIZE + 2 * CheckboxBubble.CHECKBOX_MARGIN
 
   /**
    * Root SVG element for this bubble.
    */
-  svgRoot: SVGGElement;
+  svgRoot: SVGGElement
 
   /**
    * Identifier for click handler, to allow unregistering during disposal.
    */
-  clickListener: Blockly.browserEvents.Data;
+  clickListener: Blockly.browserEvents.Data
 
   /**
    * Whether or not this bubble is displayed as checked. Note that the source of
    * truth is the Scratch VM.
    */
-  checked = false;
+  checked = false
 
   /**
    * The location of this bubble in workspace coordinates.
    */
-  location = new Blockly.utils.Coordinate(0, 0);
+  location = new Blockly.utils.Coordinate(0, 0)
 
   /**
    * Creates a new flyout checkbox bubble.
-   *
    * @param sourceBlock The block this bubble should be associated with.
    */
   constructor(private sourceBlock: Blockly.BlockSvg) {
     this.svgRoot = Blockly.utils.dom.createSvgElement(
       Blockly.utils.Svg.G,
       {},
-      this.sourceBlock.workspace.getBubbleCanvas()
-    );
+      this.sourceBlock.workspace.getBubbleCanvas(),
+    )
 
-    const touchMargin = CheckboxBubble.CHECKBOX_TOUCH_PADDING;
+    const touchMargin = CheckboxBubble.CHECKBOX_TOUCH_PADDING
     const checkboxGroup = Blockly.utils.dom.createSvgElement(
-      "g",
+      'g',
       {
-        fill: "transparent",
+        fill: 'transparent',
       },
-      null
-    );
+      null,
+    )
     Blockly.utils.dom.createSvgElement(
-      "rect",
+      'rect',
       {
-        class: "blocklyFlyoutCheckbox",
+        class: 'blocklyFlyoutCheckbox',
         height: CheckboxBubble.CHECKBOX_SIZE,
         width: CheckboxBubble.CHECKBOX_SIZE,
         rx: CheckboxBubble.CHECKBOX_CORNER_RADIUS,
         ry: CheckboxBubble.CHECKBOX_CORNER_RADIUS,
       },
-      checkboxGroup
-    );
+      checkboxGroup,
+    )
     Blockly.utils.dom.createSvgElement(
-      "path",
+      'path',
       {
-        class: "blocklyFlyoutCheckboxPath",
+        class: 'blocklyFlyoutCheckboxPath',
         d: CheckboxBubble.CHECKMARK_PATH,
       },
-      checkboxGroup
-    );
+      checkboxGroup,
+    )
     Blockly.utils.dom.createSvgElement(
-      "rect",
+      'rect',
       {
-        class: "blocklyTouchTargetBackground",
-        x: -touchMargin + "px",
-        y: -touchMargin + "px",
+        class: 'blocklyTouchTargetBackground',
+        x: -touchMargin + 'px',
+        y: -touchMargin + 'px',
         height: CheckboxBubble.CHECKBOX_SIZE + 2 * touchMargin,
         width: CheckboxBubble.CHECKBOX_SIZE + 2 * touchMargin,
       },
-      checkboxGroup
-    );
-    this.setChecked(this.isChecked(this.sourceBlock.id));
-
-    this.svgRoot.prepend(checkboxGroup);
-
-    this.clickListener = Blockly.browserEvents.bind(
-      this.svgRoot,
-      "pointerdown",
-      null,
-      (event: PointerEvent) => {
-        this.setChecked(!this.checked);
-        event.stopPropagation();
-        event.preventDefault();
-      }
-    );
-    this.updateLocation();
+      checkboxGroup,
+    )
+    this.setChecked(this.isChecked(this.sourceBlock.id))
+
+    this.svgRoot.prepend(checkboxGroup)
+
+    this.clickListener = Blockly.browserEvents.bind(this.svgRoot, 'pointerdown', null, (event: PointerEvent) => {
+      this.setChecked(!this.checked)
+      event.stopPropagation()
+      event.preventDefault()
+    })
+    this.updateLocation()
   }
 
   /**
    * Sets whether or not this bubble should be displayed in the checked state.
-   *
    * @param checked True if this bubble should be checked.
    */
   setChecked(checked: boolean) {
-    if (checked === this.checked) return;
+    if (checked === this.checked) return
 
-    this.checked = checked;
+    this.checked = checked
     if (this.checked) {
-      Blockly.utils.dom.addClass(this.svgRoot, "checked");
+      Blockly.utils.dom.addClass(this.svgRoot, 'checked')
     } else {
-      Blockly.utils.dom.removeClass(this.svgRoot, "checked");
+      Blockly.utils.dom.removeClass(this.svgRoot, 'checked')
     }
 
     Blockly.Events.fire(
-      new Blockly.Events.BlockChange(
-        this.sourceBlock,
-        "checkbox",
-        null,
-        !this.checked,
-        this.checked
-      )
-    );
+      new Blockly.Events.BlockChange(this.sourceBlock, 'checkbox', null, !this.checked, this.checked),
+    )
   }
 
   /**
    * Returns whether or not the specified block has its checkbox checked.
    *
    * This method is patched by scratch-gui to query the VM state.
-   *
    * @param blockId The ID of the block in question.
    * @returns True if the block's checkbox should be checked.
    */
   isChecked(blockId: string): boolean {
-    return false;
+    return false
   }
 
   /**
    * Returns whether this bubble is movable by the user.
-   *
    * @returns Always returns false.
    */
   isMovable(): boolean {
-    return false;
+    return false
   }
 
   /**
    * Returns the root SVG element for this bubble.
-   *
    * @returns The root SVG element.
    */
   getSvgRoot(): SVGGElement {
-    return this.svgRoot;
+    return this.svgRoot
   }
 
   /**
    * Recalculates this bubble's location, keeping it adjacent to its block.
    */
   updateLocation() {
-    const bounds = this.sourceBlock.getBoundingRectangle();
+    const bounds = this.sourceBlock.getBoundingRectangle()
     const x = this.sourceBlock.workspace.RTL
       ? bounds.right + CheckboxBubble.CHECKBOX_MARGIN
-      : bounds.left -
-        CheckboxBubble.CHECKBOX_MARGIN -
-        CheckboxBubble.CHECKBOX_SIZE;
-    const y =
-      bounds.top + (bounds.getHeight() - CheckboxBubble.CHECKBOX_SIZE) / 2;
-    this.moveTo(x, y);
+      : bounds.left - CheckboxBubble.CHECKBOX_MARGIN - CheckboxBubble.CHECKBOX_SIZE
+    const y = bounds.top + (bounds.getHeight() - CheckboxBubble.CHECKBOX_SIZE) / 2
+    this.moveTo(x, y)
   }
 
   /**
    * Moves this bubble to the specified location.
-   *
    * @param x The location on the X axis to move to.
    * @param y The location on the Y axis to move to.
    */
   moveTo(x: number, y: number) {
-    this.location.x = x;
-    this.location.y = y;
-    this.svgRoot.setAttribute("transform", `translate(${x}, ${y})`);
+    this.location.x = x
+    this.location.y = y
+    this.svgRoot.setAttribute('transform', `translate(${x}, ${y})`)
   }
 
   /**
    * Returns this bubble's location in workspace coordinates.
-   *
    * @returns The bubble's location.
    */
   getRelativeToSurfaceXY(): Blockly.utils.Coordinate {
-    return this.location;
+    return this.location
   }
 
   /**
    * Disposes of this checkbox bubble.
    */
   dispose() {
-    Blockly.utils.dom.removeNode(this.svgRoot);
-    Blockly.browserEvents.unbind(this.clickListener);
+    Blockly.utils.dom.removeNode(this.svgRoot)
+    Blockly.browserEvents.unbind(this.clickListener)
   }
 
-  /** See IFocusableNode.getFocusableElement. */
+  /**
+   * See IFocusableNode.getFocusableElement.
+   * @returns The SVG root element of this bubble.
+   */
   getFocusableElement(): HTMLElement | SVGElement {
-    return this.svgRoot;
+    return this.svgRoot
   }
 
-  /** See IFocusableNode.getFocusableTree. */
+  /**
+   * See IFocusableNode.getFocusableTree.
+   * @returns The workspace containing this bubble's source block.
+   */
   getFocusableTree(): Blockly.IFocusableTree {
-    return this.sourceBlock.workspace;
+    return this.sourceBlock.workspace
   }
 
   /** See IFocusableNode.onNodeFocus. */
@@ -259,9 +239,12 @@ export class CheckboxBubble
   /** See IFocusableNode.onNodeBlur. */
   onNodeBlur(): void {}
 
-  /** See IFocusableNode.canBeFocused. */
+  /**
+   * See IFocusableNode.canBeFocused.
+   * @returns Always true; this bubble can always receive focus.
+   */
   canBeFocused(): boolean {
-    return true;
+    return true
   }
 
   // These methods are required by the interfaces, but intentionally have no

package/src/colours.ts

@@ -1,5 +1,4 @@
 /**
- * @license
  * Visual Blocks Editor
  *
  * Copyright 2016 Massachusetts Institute of Technology
@@ -17,69 +16,68 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import * as Blockly from "blockly/core";
+import * as Blockly from 'blockly/core'
 
 const Colours = {
   // SVG colours: these must be specified in #RRGGBB style
   // To add an opacity, this must be specified as a separate property (for SVG fill-opacity)
-  text: "#FFFFFF",
-  workspace: "#F9F9F9",
-  toolboxHover: "#4C97FF",
-  toolboxSelected: "#e9eef2",
-  toolboxText: "#575E75",
-  toolbox: "#FFFFFF",
-  flyout: "#F9F9F9",
-  scrollbar: "#CECDCE",
-  scrollbarHover: "#CECDCE",
-  textField: "#FFFFFF",
-  textFieldText: "#575E75",
-  insertionMarker: "#000000",
+  text: '#FFFFFF',
+  workspace: '#F9F9F9',
+  toolboxHover: '#4C97FF',
+  toolboxSelected: '#e9eef2',
+  toolboxText: '#575E75',
+  toolbox: '#FFFFFF',
+  flyout: '#F9F9F9',
+  scrollbar: '#CECDCE',
+  scrollbarHover: '#CECDCE',
+  textField: '#FFFFFF',
+  textFieldText: '#575E75',
+  insertionMarker: '#000000',
   insertionMarkerOpacity: 0.2,
   dragShadowOpacity: 0.6,
-  stackGlow: "#FFF200",
+  stackGlow: '#FFF200',
   stackGlowSize: 4,
   stackGlowOpacity: 1,
-  replacementGlow: "#FFFFFF",
+  replacementGlow: '#FFFFFF',
   replacementGlowSize: 2,
   replacementGlowOpacity: 1,
-  colourPickerStroke: "#FFFFFF",
+  colourPickerStroke: '#FFFFFF',
   // CSS colours: support RGBA
-  fieldShadow: "rgba(0,0,0,0.1)",
-  dropDownShadow: "rgba(0, 0, 0, .3)",
-  numPadBackground: "#547AB2",
-  numPadBorder: "#435F91",
-  numPadActiveBackground: "#435F91",
-  numPadText: "white", // Do not use hex here, it cannot be inlined with data-uri SVG
-  valueReportBackground: "#FFFFFF",
-  valueReportBorder: "#AAAAAA",
-  contextualMenuHover: "rgba(77, 151, 255, .25)",
-  menuHover: "rgba(0, 0, 0, .2)",
-};
+  fieldShadow: 'rgba(0,0,0,0.1)',
+  dropDownShadow: 'rgba(0, 0, 0, .3)',
+  numPadBackground: '#547AB2',
+  numPadBorder: '#435F91',
+  numPadActiveBackground: '#435F91',
+  numPadText: 'white', // Do not use hex here, it cannot be inlined with data-uri SVG
+  valueReportBackground: '#FFFFFF',
+  valueReportBorder: '#AAAAAA',
+  contextualMenuHover: 'rgba(77, 151, 255, .25)',
+  menuHover: 'rgba(0, 0, 0, .2)',
+}
 
 /**
  * Converts the given colours to CSS variables.
- *
  * @param coloursObj A (potentially nested) object whose keys are colour names
  *     and values are CSS colours.
  * @param prefix A prefix to prepend to the CSS variables.
  * @returns A string containing CSS variable definitions for the colours.
  */
-function varify(coloursObj: Object, prefix = "--colour"): string {
+function varify(coloursObj: object, prefix = '--colour'): string {
   return Object.entries(coloursObj)
     .map(([key, colour]) => {
-      if (typeof colour === "string") {
-        return `${prefix}-${key}: ${colour};`;
+      if (typeof colour === 'string') {
+        return `${prefix}-${key}: ${colour};`
       } else {
-        return varify(colour, `${prefix}-${key}`);
+        return varify(colour, `${prefix}-${key}`)
       }
     })
-    .join("\n");
+    .join('\n')
 }
 
 const cssVariables = `:root {
   ${varify(Colours)}
-}`;
+}`
 
-Blockly.Css.register(cssVariables);
+Blockly.Css.register(cssVariables)
 
-export { Colours };
+export { Colours }