scratch-blocks 2.1.4 → 2.1.6

package/src/context_menu_items.ts

@@ -4,26 +4,38 @@
  */
 import * as Blockly from 'blockly/core'
 
+type ActionRegistryItem = Extract<Blockly.ContextMenuRegistry.RegistryItem, { callback: unknown }>
+
+function isActionRegistryItem(item: Blockly.ContextMenuRegistry.RegistryItem): item is ActionRegistryItem {
+  return 'callback' in item && 'displayText' in item && 'preconditionFn' in item
+}
+
 /**
  * Registers a block delete option that ignores shadows in the block count.
  */
 export function registerDeleteBlock() {
   const deleteOption = {
     displayText(scope: Blockly.ContextMenuRegistry.Scope) {
-      const descendantCount = getDeletableBlocksInStack(scope.block!).length
+      if (!scope.block) {
+        return Blockly.Msg.DELETE_BLOCK
+      }
+      const descendantCount = getDeletableBlocksInStack(scope.block).length
       return descendantCount === 1
         ? Blockly.Msg.DELETE_BLOCK
         : Blockly.Msg.DELETE_X_BLOCKS.replace('%1', `${descendantCount}`)
     },
     preconditionFn(scope: Blockly.ContextMenuRegistry.Scope) {
-      if (!scope.block!.isInFlyout && scope.block!.isDeletable()) {
+      if (scope.block && !scope.block.isInFlyout && scope.block.isDeletable()) {
         return 'enabled'
       }
       return 'hidden'
     },
     callback(scope: Blockly.ContextMenuRegistry.Scope) {
+      if (!scope.block) {
+        return
+      }
       Blockly.Events.setGroup(true)
-      scope.block!.dispose(true, true)
+      scope.block.dispose(true, true)
       Blockly.Events.setGroup(false)
     },
     scopeType: Blockly.ContextMenuRegistry.ScopeType.BLOCK,
@@ -33,17 +45,18 @@ export function registerDeleteBlock() {
   Blockly.ContextMenuRegistry.registry.register(deleteOption)
 }
 
-function getDeletableBlocksInStack(block: Blockly.BlockSvg): Blockly.BlockSvg[] {
+function getDeletableBlocksInStack(block: Blockly.Block): Blockly.Block[] {
   let descendants = block.getDescendants(false).filter(isDeletable)
-  if (block.getNextBlock()) {
+  const nextBlock = block.getNextBlock()
+  if (nextBlock) {
     // Next blocks are not deleted.
-    const nextDescendants = block.getNextBlock()!.getDescendants(false).filter(isDeletable)
+    const nextDescendants = nextBlock.getDescendants(false).filter(isDeletable)
     descendants = descendants.filter((b) => !nextDescendants.includes(b))
   }
   return descendants
 }
 
-function isDeletable(block: Blockly.BlockSvg): boolean {
+function isDeletable(block: Blockly.Block): boolean {
   return block.isDeletable() && !block.isShadow()
 }
 
@@ -101,8 +114,8 @@ export function registerDeleteAll() {
  * @param workspace to delete all blocks from.
  * @returns list of blocks to delete.
  */
-function getDeletableBlocksInWorkspace(workspace: Blockly.WorkspaceSvg): Blockly.BlockSvg[] {
-  return workspace.getTopBlocks(true).flatMap((b: Blockly.BlockSvg) => b.getDescendants(false).filter(isDeletable))
+function getDeletableBlocksInWorkspace(workspace: Blockly.Workspace): Blockly.Block[] {
+  return workspace.getTopBlocks(true).flatMap((b) => b.getDescendants(false).filter(isDeletable))
 }
 
 /**
@@ -111,7 +124,7 @@ function getDeletableBlocksInWorkspace(workspace: Blockly.WorkspaceSvg): Blockly
  * @param eventGroup Event group ID with which all delete events should be
  *     associated.  If not specified, create a new group.
  */
-function deleteNext(deleteList: Blockly.BlockSvg[], eventGroup?: string) {
+function deleteNext(deleteList: Blockly.Block[], eventGroup?: string) {
   const DELAY = 10
   if (eventGroup) {
     Blockly.Events.setGroup(eventGroup)
@@ -122,8 +135,12 @@ function deleteNext(deleteList: Blockly.BlockSvg[], eventGroup?: string) {
   const block = deleteList.shift()
   if (block) {
     if (!block.isDeadOrDying()) {
-      block.dispose(false, true)
-      setTimeout(deleteNext, DELAY, deleteList, eventGroup)
+      if (block instanceof Blockly.BlockSvg) {
+        block.dispose(false, true)
+      } else {
+        block.dispose(false)
+      }
+      setTimeout(() => deleteNext(deleteList, eventGroup), DELAY)
     } else {
       deleteNext(deleteList, eventGroup)
     }
@@ -136,10 +153,18 @@ function deleteNext(deleteList: Blockly.BlockSvg[], eventGroup?: string) {
  * all subsequent blocks in the stack.
  */
 export function registerDuplicateBlock() {
-  const original = Blockly.ContextMenuRegistry.registry.getItem('blockDuplicate')!
-  const duplicateOption = {
-    displayText: original.displayText!,
-    preconditionFn: original.preconditionFn!,
+  const original = Blockly.ContextMenuRegistry.registry.getItem('blockDuplicate')
+  if (!original) {
+    console.error('[context_menu_items] Missing required blockDuplicate menu item')
+    return
+  }
+  if (!isActionRegistryItem(original)) {
+    console.error('[context_menu_items] Expected blockDuplicate to be an action item')
+    return
+  }
+  const duplicateOption: ActionRegistryItem = {
+    displayText: original.displayText,
+    preconditionFn: original.preconditionFn,
     callback(scope: Blockly.ContextMenuRegistry.Scope) {
       if (!scope.block) return
       const data = scope.block.toCopyData(true)

package/src/data_category.ts

@@ -440,7 +440,11 @@ function addBlock(
           ${secondValueField}
         </block>
       </xml>`
-    const block = Blockly.utils.xml.textToDom(blockText).firstElementChild!
+    const block = Blockly.utils.xml.textToDom(blockText).firstElementChild
+    if (!block) {
+      console.error(`[data_category/addBlock] Failed to create block XML for type ${blockType}`)
+      return
+    }
     xmlList.push(block)
   }
 }
@@ -456,7 +460,7 @@ function generateVariableFieldXml(
   opt_name?: string,
 ): string {
   const field = document.createElement('field')
-  field.setAttribute('name', opt_name || 'VARIABLE')
+  field.setAttribute('name', opt_name ?? 'VARIABLE')
   field.setAttribute('id', variableModel.getId())
   field.setAttribute('variabletype', variableModel.getType())
   field.textContent = variableModel.getName()
@@ -503,6 +507,10 @@ function createValue(valueName: string, type: string, value: string): string {
  */
 function addSep(xmlList: Element[]) {
   const sepText = `<xml><sep gap="36"/></xml>`
-  const sep = Blockly.utils.xml.textToDom(sepText).firstElementChild!
+  const sep = Blockly.utils.xml.textToDom(sepText).firstElementChild
+  if (!sep) {
+    console.error('[data_category/addSep] Failed to create separator XML')
+    return
+  }
   xmlList.push(sep)
 }

package/src/events/events_block_comment_base.ts

@@ -33,7 +33,11 @@ export class BlockCommentBase extends Blockly.Events.Abstract {
     }
   }
 
-  static fromJson(json: BlockCommentBaseJson, workspace: Blockly.Workspace, event?: any): BlockCommentBase {
+  static fromJson(
+    json: BlockCommentBaseJson,
+    workspace: Blockly.Workspace,
+    event?: Blockly.Events.Abstract,
+  ): BlockCommentBase {
     const newEvent = super.fromJson(json, workspace, event ?? new BlockCommentBase()) as BlockCommentBase
     newEvent.commentId = json.commentId
     newEvent.blockId = json.blockId

package/src/events/events_block_comment_change.ts

@@ -29,7 +29,11 @@ class BlockCommentChange extends BlockCommentBase {
     }
   }
 
-  static fromJson(json: BlockCommentChangeJson, workspace: Blockly.Workspace, event?: any): BlockCommentChange {
+  static fromJson(
+    json: BlockCommentChangeJson,
+    workspace: Blockly.Workspace,
+    event?: Blockly.Events.Abstract,
+  ): BlockCommentChange {
     const newEvent = super.fromJson(json, workspace, event ?? new BlockCommentChange()) as BlockCommentChange
     newEvent.newContents_ = json.newContents
     newEvent.oldContents_ = json.oldContents

package/src/events/events_block_comment_collapse.ts

@@ -22,7 +22,11 @@ class BlockCommentCollapse extends BlockCommentBase {
     }
   }
 
-  static fromJson(json: BlockCommentCollapseJson, workspace: Blockly.Workspace, event?: any): BlockCommentCollapse {
+  static fromJson(
+    json: BlockCommentCollapseJson,
+    workspace: Blockly.Workspace,
+    event?: Blockly.Events.Abstract,
+  ): BlockCommentCollapse {
     const newEvent = super.fromJson(json, workspace, event ?? new BlockCommentCollapse()) as BlockCommentCollapse
     newEvent.newCollapsed = json.collapsed
 
@@ -41,7 +45,7 @@ class BlockCommentCollapse extends BlockCommentBase {
       console.warn('BlockCommentCollapse.run: comment icon not found', block.id)
       return
     }
-    comment.setBubbleVisible(forward ? !this.newCollapsed : this.newCollapsed)
+    void comment.setBubbleVisible(forward ? !this.newCollapsed : this.newCollapsed)
   }
 }
 

package/src/events/events_block_comment_create.ts

@@ -41,7 +41,11 @@ class BlockCommentCreate extends BlockCommentBase {
     }
   }
 
-  static fromJson(json: BlockCommentCreateJson, workspace: Blockly.Workspace, event?: any): BlockCommentCreate {
+  static fromJson(
+    json: BlockCommentCreateJson,
+    workspace: Blockly.Workspace,
+    event?: Blockly.Events.Abstract,
+  ): BlockCommentCreate {
     const newEvent = super.fromJson(json, workspace, event ?? new BlockCommentCreate()) as BlockCommentCreate
     newEvent.json = {
       x: json.x,

package/src/events/events_block_comment_move.ts

@@ -29,7 +29,11 @@ class BlockCommentMove extends BlockCommentBase {
     }
   }
 
-  static fromJson(json: BlockCommentMoveJson, workspace: Blockly.Workspace, event?: any): BlockCommentMove {
+  static fromJson(
+    json: BlockCommentMoveJson,
+    workspace: Blockly.Workspace,
+    event?: Blockly.Events.Abstract,
+  ): BlockCommentMove {
     const newEvent = super.fromJson(json, workspace, event ?? new BlockCommentMove()) as BlockCommentMove
     newEvent.newCoordinate_ = new Blockly.utils.Coordinate(json.newCoordinate.x, json.newCoordinate.y)
     newEvent.oldCoordinate_ = new Blockly.utils.Coordinate(json.oldCoordinate.x, json.oldCoordinate.y)
@@ -39,7 +43,7 @@ class BlockCommentMove extends BlockCommentBase {
 
   run(forward: boolean) {
     const workspace = this.getEventWorkspace_()
-    const block = workspace?.getBlockById(this.blockId)
+    const block = workspace.getBlockById(this.blockId)
     const comment = block?.getIcon(Blockly.icons.IconType.COMMENT)
     comment?.setBubbleLocation(forward ? this.newCoordinate_ : this.oldCoordinate_)
   }

package/src/events/events_block_comment_resize.ts

@@ -31,7 +31,11 @@ class BlockCommentResize extends BlockCommentBase {
     }
   }
 
-  static fromJson(json: BlockCommentResizeJson, workspace: Blockly.Workspace, event?: any): BlockCommentResize {
+  static fromJson(
+    json: BlockCommentResizeJson,
+    workspace: Blockly.Workspace,
+    event?: Blockly.Events.Abstract,
+  ): BlockCommentResize {
     const newEvent = super.fromJson(json, workspace, event ?? new BlockCommentResize()) as BlockCommentResize
     newEvent.newSize = new Blockly.utils.Size(json.newSize.width, json.newSize.height)
     newEvent.oldSize = new Blockly.utils.Size(json.oldSize.width, json.oldSize.height)
@@ -41,7 +45,7 @@ class BlockCommentResize extends BlockCommentBase {
 
   run(forward: boolean) {
     const workspace = this.getEventWorkspace_()
-    const block = workspace?.getBlockById(this.blockId)
+    const block = workspace.getBlockById(this.blockId)
     const comment = block?.getIcon(Blockly.icons.IconType.COMMENT)
     comment?.setBubbleSize(forward ? this.newSize : this.oldSize)
   }

package/src/events/events_block_drag_end.ts

@@ -24,7 +24,11 @@ export class BlockDragEnd extends Blockly.Events.BlockBase {
     }
   }
 
-  static fromJson(json: BlockDragEndJson, workspace: Blockly.Workspace, event?: any): BlockDragEnd {
+  static fromJson(
+    json: BlockDragEndJson,
+    workspace: Blockly.Workspace,
+    event?: Blockly.Events.Abstract,
+  ): BlockDragEnd {
     const newEvent = super.fromJson(json, workspace, event ?? new BlockDragEnd()) as BlockDragEnd
     newEvent.isOutside = json.isOutside
     newEvent.xml = Blockly.utils.xml.textToDom(json.xml)

package/src/events/events_block_drag_outside.ts

@@ -21,7 +21,11 @@ export class BlockDragOutside extends Blockly.Events.BlockBase {
     }
   }
 
-  static fromJson(json: BlockDragOutsideJson, workspace: Blockly.Workspace, event?: any): BlockDragOutside {
+  static fromJson(
+    json: BlockDragOutsideJson,
+    workspace: Blockly.Workspace,
+    event?: Blockly.Events.Abstract,
+  ): BlockDragOutside {
     const newEvent = super.fromJson(json, workspace, event ?? new BlockDragOutside()) as BlockDragOutside
     newEvent.isOutside = json.isOutside
 

package/src/events/events_scratch_variable_create.ts

@@ -25,7 +25,11 @@ class ScratchVariableCreate extends Blockly.Events.VarCreate {
     }
   }
 
-  static fromJson(json: ScratchVariableCreateJson, workspace: Blockly.Workspace, event?: any): ScratchVariableCreate {
+  static fromJson(
+    json: ScratchVariableCreateJson,
+    workspace: Blockly.Workspace,
+    event?: Blockly.Events.Abstract,
+  ): ScratchVariableCreate {
     const newEvent = super.fromJson(json, workspace, event ?? new ScratchVariableCreate()) as ScratchVariableCreate
     newEvent.isLocal = json.isLocal
     newEvent.isCloud = json.isCloud

package/src/fields/field_colour_slider.ts

@@ -96,7 +96,7 @@ export class FieldColourSlider extends FieldColour {
           stops.push(Blockly.utils.colour.hsvToHex(this.hue_, this.saturation_, (255 * n) / 360))
           break
         default:
-          throw new Error('Unknown channel for colour sliders: ' + channel)
+          throw new Error(`Unknown channel for colour sliders: ${String(channel)}`)
       }
     }
     return stops
@@ -198,9 +198,7 @@ export class FieldColourSlider extends FieldColour {
           break
       }
       const colour = Blockly.utils.colour.hsvToHex(this.hue_, this.saturation_, this.brightness_)
-      if (colour !== null) {
-        this.setValue(colour, true)
-      }
+      this.setValue(colour, true)
     }
   }
 
@@ -279,7 +277,7 @@ export class FieldColourSlider extends FieldColour {
         button,
         'click',
         this,
-        this.activateEyedropperInternal_,
+        this.activateEyedropperInternal_.bind(this),
       )
     }
 

package/src/fields/field_matrix.ts

@@ -210,7 +210,7 @@ class FieldMatrix extends Blockly.Field<string> {
       this.arrow_.setAttributeNS(
         'http://www.w3.org/1999/xlink',
         'xlink:href',
-        this.getConstants()!.FIELD_DROPDOWN_SVG_ARROW_DATAURI,
+        this.getConstants()?.FIELD_DROPDOWN_SVG_ARROW_DATAURI ?? '',
       )
       this.arrow_.style.cursor = 'default'
     }
@@ -241,7 +241,7 @@ class FieldMatrix extends Blockly.Field<string> {
     } else if (this.borderRect_) {
       this.borderRect_.setAttribute(
         'fill',
-        'colourQuaternary' in style ? `${style.colourQuaternary}` : style.colourTertiary,
+        'colourQuaternary' in style ? String(style.colourQuaternary) : style.colourTertiary,
       )
     }
 
@@ -299,17 +299,22 @@ class FieldMatrix extends Blockly.Field<string> {
 
     Blockly.DropDownDiv.showPositionedByBlock(this, sourceBlock, this.dropdownDispose_.bind(this))
 
-    this.matrixTouchWrapper_ = Blockly.browserEvents.bind(this.matrixStage_, 'mousedown', this, this.onMouseDown)
-    this.clearButtonWrapper_ = Blockly.browserEvents.bind(clearButton, 'click', this, this.clearMatrix_)
-    this.fillButtonWrapper_ = Blockly.browserEvents.bind(fillButton, 'click', this, this.fillMatrix_)
+    this.matrixTouchWrapper_ = Blockly.browserEvents.bind(
+      this.matrixStage_,
+      'mousedown',
+      this,
+      this.onMouseDown.bind(this),
+    )
+    this.clearButtonWrapper_ = Blockly.browserEvents.bind(clearButton, 'click', this, this.clearMatrix_.bind(this))
+    this.fillButtonWrapper_ = Blockly.browserEvents.bind(fillButton, 'click', this, this.fillMatrix_.bind(this))
 
     // Update the matrix for the current value
     this.updateMatrix_()
   }
 
   dropdownDispose_() {
-    const sourceBlock = this.getSourceBlock()!
-    if (sourceBlock.isShadow()) {
+    const sourceBlock = this.getSourceBlock()
+    if (sourceBlock?.isShadow()) {
       sourceBlock.setStyle(this.originalStyle)
     }
     this.updateMatrix_()
@@ -355,10 +360,12 @@ class FieldMatrix extends Blockly.Field<string> {
    * Redraw the matrix with the current value.
    */
   private updateMatrix_() {
-    const matrix = this.getValue()!
-    const sourceBlock = this.getSourceBlock()! as Blockly.BlockSvg
+    const matrix = this.getValue()
+    if (!matrix) return
+    const sourceBlock = this.getSourceBlock() as Blockly.BlockSvg | null
+    if (!sourceBlock) return
     for (let i = 0; i < matrix.length; i++) {
-      if (matrix[i] === LEDState.OFF) {
+      if ((matrix[i] as LEDState) === LEDState.OFF) {
         this.fillMatrixNode_(this.ledButtons_, i, sourceBlock.getColourTertiary())
         this.fillMatrixNode_(this.ledThumbNodes_, i, sourceBlock.getColourSecondary())
       } else {
@@ -393,13 +400,14 @@ class FieldMatrix extends Blockly.Field<string> {
    * @param fill The fill colour in '#rrggbb' format.
    */
   fillMatrixNode_(node: SVGElement[], index: number, fill: string) {
-    if (!node?.[index] || !fill) return
+    if (!node[index] || !fill) return
     node[index].setAttribute('fill', fill)
   }
 
   setLEDNode_(led: number, state: LEDState) {
     if (led < 0 || led > 24) return
-    const oldMatrix = this.getValue()!
+    const oldMatrix = this.getValue()
+    if (!oldMatrix) return
     const newMatrix = oldMatrix.substr(0, led) + state + oldMatrix.substr(led + 1)
     this.setValue(newMatrix)
   }
@@ -416,7 +424,9 @@ class FieldMatrix extends Blockly.Field<string> {
 
   toggleLEDNode_(led: number) {
     if (led < 0 || led > 24) return
-    if (this.getValue()!.charAt(led) === LEDState.OFF) {
+    const value = this.getValue()
+    if (!value) return
+    if ((value.charAt(led) as LEDState) === LEDState.OFF) {
       this.setLEDNode_(led, LEDState.ON)
     } else {
       this.setLEDNode_(led, LEDState.OFF)
@@ -428,11 +438,17 @@ class FieldMatrix extends Blockly.Field<string> {
    * @param e Mouse event.
    */
   onMouseDown(e: PointerEvent) {
-    this.matrixMoveWrapper_ = Blockly.browserEvents.bind(document.body, 'mousemove', this, this.onMouseMove)
-    this.matrixReleaseWrapper_ = Blockly.browserEvents.bind(document.body, 'mouseup', this, this.onMouseUp)
+    this.matrixMoveWrapper_ = Blockly.browserEvents.bind(
+      document.body,
+      'mousemove',
+      this,
+      this.onMouseMove.bind(this),
+    )
+    this.matrixReleaseWrapper_ = Blockly.browserEvents.bind(document.body, 'mouseup', this, this.onMouseUp.bind(this))
     const ledHit = this.checkForLED_(e)
     if (ledHit > -1) {
-      if (this.getValue()!.charAt(ledHit) === LEDState.OFF) {
+      const value = this.getValue()
+      if (value && (value.charAt(ledHit) as LEDState) === LEDState.OFF) {
         this.paintStyle_ = PaintStyle.FILL
       } else {
         this.paintStyle_ = PaintStyle.CLEAR
@@ -470,7 +486,7 @@ class FieldMatrix extends Blockly.Field<string> {
       if (led < 0) return
       if (this.paintStyle_ === PaintStyle.CLEAR) {
         this.clearLEDNode_(led)
-      } else if (this.paintStyle_ === PaintStyle.FILL) {
+      } else {
         this.fillLEDNode_(led)
       }
     }

package/src/fields/field_note.ts

@@ -284,6 +284,12 @@ export class FieldNote extends Blockly.FieldTextInput {
    */
   showEditor_(event: PointerEvent, quietInput = false) {
     super.showEditor_(event, quietInput, false)
+    const parentBlock = this.getSourceBlock()?.getParent() as Blockly.BlockSvg | undefined
+    if (!parentBlock) {
+      throw new Error('[field_note] Missing parent block for note field editor')
+    }
+    const parentColour = parentBlock.getColour()
+    const parentTertiary = parentBlock.getColourTertiary()
 
     // Build the SVG DOM.
     const div = Blockly.DropDownDiv.getContentDiv()
@@ -314,9 +320,21 @@ export class FieldNote extends Blockly.FieldTextInput {
     // Add three piano octaves, so we can animate moving up or down an octave.
     // Only the middle octave gets bound to events.
     this.keySVGs_ = []
-    this.addPianoOctave_(-this.fieldEditorWidth_ + FieldNote.EDGE_PADDING, whiteKeyGroup, blackKeyGroup, null)
-    this.addPianoOctave_(0, whiteKeyGroup, blackKeyGroup, this.keySVGs_)
-    this.addPianoOctave_(this.fieldEditorWidth_ - FieldNote.EDGE_PADDING, whiteKeyGroup, blackKeyGroup, null)
+    this.addPianoOctave_(
+      -this.fieldEditorWidth_ + FieldNote.EDGE_PADDING,
+      whiteKeyGroup,
+      blackKeyGroup,
+      null,
+      parentBlock,
+    )
+    this.addPianoOctave_(0, whiteKeyGroup, blackKeyGroup, this.keySVGs_, parentBlock)
+    this.addPianoOctave_(
+      this.fieldEditorWidth_ - FieldNote.EDGE_PADDING,
+      whiteKeyGroup,
+      blackKeyGroup,
+      null,
+      parentBlock,
+    )
 
     // Note name indicator at the top of the field
     this.noteNameText_ = Blockly.utils.dom.createSvgElement(
@@ -341,7 +359,7 @@ export class FieldNote extends Blockly.FieldTextInput {
     Blockly.utils.dom.createSvgElement(
       'line',
       {
-        stroke: (this.sourceBlock_!.getParent() as Blockly.BlockSvg).getColourTertiary(),
+        stroke: parentTertiary,
         x1: 0,
         y1: FieldNote.TOP_MENU_HEIGHT,
         x2: this.fieldEditorWidth_,
@@ -365,11 +383,12 @@ export class FieldNote extends Blockly.FieldTextInput {
     )
 
     // Octave buttons
-    const octaveDownButton = this.addOctaveButton_(0, true, svg)
+    const octaveDownButton = this.addOctaveButton_(0, true, svg, parentBlock)
     const octaveUpButton = this.addOctaveButton_(
       this.fieldEditorWidth_ + FieldNote.INSET * 2 - FieldNote.OCTAVE_BUTTON_SIZE,
       false,
       svg,
+      parentBlock,
     )
 
     this.octaveDownMouseDownWrapper_ = Blockly.browserEvents.bind(octaveDownButton, 'mousedown', this, () => {
@@ -379,8 +398,9 @@ export class FieldNote extends Blockly.FieldTextInput {
       this.changeOctaveBy_(1)
     })
     const sourceBlock = this.getSourceBlock() as Blockly.BlockSvg
-    Blockly.DropDownDiv.setColour(sourceBlock.getParent()!.getColour(), sourceBlock.getParent()!.getColourTertiary())
-    Blockly.DropDownDiv.showPositionedByBlock(this, sourceBlock)
+    const dropdownAnchor = this as unknown as Blockly.Field<string | null>
+    Blockly.DropDownDiv.setColour(parentColour, parentTertiary)
+    Blockly.DropDownDiv.showPositionedByBlock(dropdownAnchor, sourceBlock)
 
     this.updateSelection_()
   }
@@ -391,14 +411,17 @@ export class FieldNote extends Blockly.FieldTextInput {
    * @param whiteKeyGroup The group for all white piano keys.
    * @param blackKeyGroup The group for all black piano keys.
    * @param keySVGarray An array containing all the key SVGs.
+   * @param parentBlock The validated parent block providing styling.
    */
   private addPianoOctave_(
     x: number,
     whiteKeyGroup: SVGElement,
     blackKeyGroup: SVGElement,
     keySVGarray: SVGElement[] | null,
+    parentBlock: Blockly.BlockSvg,
   ) {
     let xIncrement, width, height, fill, stroke, group
+    const parentTertiary = parentBlock.getColourTertiary()
     x += FieldNote.EDGE_PADDING / 2
     const y = FieldNote.TOP_MENU_HEIGHT
     for (let i = 0; i < FieldNote.KEY_INFO.length; i++) {
@@ -417,7 +440,7 @@ export class FieldNote extends Blockly.FieldTextInput {
         width = FieldNote.WHITE_KEY_WIDTH
         height = FieldNote.WHITE_KEY_HEIGHT
         fill = FieldNote.WHITE_KEY_COLOR
-        stroke = (this.sourceBlock_!.getParent() as Blockly.BlockSvg).getColourTertiary()
+        stroke = parentTertiary
         group = whiteKeyGroup
       }
       const attr = {
@@ -435,8 +458,18 @@ export class FieldNote extends Blockly.FieldTextInput {
         keySVG.setAttribute('data-name', `${FieldNote.KEY_INFO[i].name}`)
         keySVG.setAttribute('data-isBlack', `${FieldNote.KEY_INFO[i].isBlack}`)
 
-        this.mouseDownWrappers_[i] = Blockly.browserEvents.bind(keySVG, 'mousedown', this, this.onMouseDownOnKey_)
-        this.mouseEnterWrappers_[i] = Blockly.browserEvents.bind(keySVG, 'mouseenter', this, this.onMouseEnter_)
+        this.mouseDownWrappers_[i] = Blockly.browserEvents.bind(
+          keySVG,
+          'mousedown',
+          this,
+          this.onMouseDownOnKey_.bind(this),
+        )
+        this.mouseEnterWrappers_[i] = Blockly.browserEvents.bind(
+          keySVG,
+          'mouseenter',
+          this,
+          this.onMouseEnter_.bind(this),
+        )
       }
     }
   }
@@ -502,10 +535,12 @@ export class FieldNote extends Blockly.FieldTextInput {
    * @param x The x position of the button.
    * @param flipped If true, the icon should be flipped.
    * @param svg The svg element to add the buttons to.
+   * @param parentBlock The validated parent block providing styling.
    * @returns A group containing the button SVG elements.
    */
-  private addOctaveButton_(x: number, flipped: boolean, svg: SVGElement): SVGElement {
+  private addOctaveButton_(x: number, flipped: boolean, svg: SVGElement, parentBlock: Blockly.BlockSvg): SVGElement {
     const group = Blockly.utils.dom.createSvgElement('g', {}, svg)
+    const parentTertiary = parentBlock.getColourTertiary()
     const imageSize = FieldNote.OCTAVE_BUTTON_SIZE
     const arrow = Blockly.utils.dom.createSvgElement(
       'image',
@@ -525,7 +560,7 @@ export class FieldNote extends Blockly.FieldTextInput {
     Blockly.utils.dom.createSvgElement(
       'line',
       {
-        stroke: (this.sourceBlock_!.getParent() as Blockly.BlockSvg).getColourTertiary(),
+        stroke: parentTertiary,
         x1: x - FieldNote.INSET,
         y1: 0,
         x2: x - FieldNote.INSET,
@@ -588,7 +623,7 @@ export class FieldNote extends Blockly.FieldTextInput {
    */
   private onMouseDownOnKey_(e: PointerEvent) {
     this.mouseIsDown_ = true
-    this.mouseUpWrapper_ = Blockly.browserEvents.bind(document.body, 'mouseup', this, this.onMouseUp_)
+    this.mouseUpWrapper_ = Blockly.browserEvents.bind(document.body, 'mouseup', this, this.onMouseUp_.bind(this))
     this.selectNoteWithMouseEvent_(e)
   }
 
@@ -628,18 +663,19 @@ export class FieldNote extends Blockly.FieldTextInput {
    * Play a note, by calling the externally overriden play note function.
    */
   private playNoteInternal_() {
-    if (FieldNote.playNote_) {
-      FieldNote.playNote_(Number(this.getValue()!), 'Music')
+    const noteNum = this.getValue()
+    if (FieldNote.playNote_ && noteNum !== null) {
+      FieldNote.playNote_(Number(noteNum), 'Music')
     }
   }
 
   /**
    * Function to play a musical note corresponding to the key selected.
    * Overridden externally.
-   * @param noteNum the MIDI note number to play.
-   * @param id An id to select a scratch extension to play the note.
+   * @param _noteNum the MIDI note number to play.
+   * @param _id An id to select a scratch extension to play the note.
    */
-  static playNote_ = function (noteNum: number, id: string) {
+  static playNote_: ((noteNum: number, id: string) => void) | null = function (_noteNum: number, _id: string) {
     return
   }
 
@@ -739,7 +775,7 @@ export class FieldNote extends Blockly.FieldTextInput {
         this.noteNameText_.textContent = noteName + ' (' + Math.floor(noteNum) + ')'
       }
       // Update the low and high C note names
-      const lowCNum = (this.displayedOctave_ ?? 0) * 12
+      const lowCNum = this.displayedOctave_ * 12
       if (this.lowCText_) this.lowCText_.textContent = 'C(' + lowCNum + ')'
       if (this.highCText_) this.highCText_.textContent = 'C(' + (lowCNum + 12) + ')'
     }
@@ -750,7 +786,7 @@ export class FieldNote extends Blockly.FieldTextInput {
    * @param text The user's text.
    * @returns A string representing a valid note number, or null if invalid.
    */
-  doClassValidation_(text: string): string | null {
+  doClassValidation_(text: string | null): string | null {
     if (text === null) {
       return null
     }