scratch-blocks 2.1.5 → 2.1.6

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
     }

package/src/fields/field_textinput_removable.ts

@@ -35,19 +35,28 @@ export class FieldTextInputRemovable extends Blockly.FieldTextInput {
   showEditor_() {
     // Wait for our parent block to render so we can examine its metrics to
     // calculate rounded corners on the editor as needed.
-    Blockly.renderManagement.finishQueuedRenders().then(() => {
+    void Blockly.renderManagement.finishQueuedRenders().then(() => {
       super.showEditor_()
 
-      const div = Blockly.WidgetDiv.getDiv()!
+      const div = Blockly.WidgetDiv.getDiv()
+      if (!div) {
+        console.error('[field_textinput_removable] Missing WidgetDiv for removable text input')
+        return
+      }
+      if (!this.sourceBlock_) {
+        console.error('[field_textinput_removable] Missing source block for removable text input')
+        return
+      }
+
       div.className += ' removableTextInput'
       const removeButton = document.createElement('img')
       removeButton.className = 'blocklyTextRemoveIcon'
-      removeButton.setAttribute('src', this.sourceBlock_!.workspace.options.pathToMedia + 'icons/remove.svg')
+      removeButton.setAttribute('src', this.sourceBlock_.workspace.options.pathToMedia + 'icons/remove.svg')
       this.removeButtonMouseWrapper_ = Blockly.browserEvents.bind(
         removeButton,
         'mousedown',
         this,
-        this.removeCallback_,
+        this.removeCallback_.bind(this),
       )
       div.appendChild(removeButton)
     })

package/src/fields/field_variable_getter.ts

@@ -70,8 +70,13 @@ class FieldVariableGetter extends Blockly.FieldLabel {
    */
   doValueUpdate_(newVariableId: string) {
     super.doValueUpdate_(newVariableId)
-    const workspace = this.getSourceBlock()!.workspace
-    this.variable = Blockly.Variables.getVariable(workspace, newVariableId)
+    const sourceBlock = this.getSourceBlock()
+    if (!sourceBlock) {
+      console.error('[field_variable_getter] Missing source block in doValueUpdate_')
+      this.variable = null
+      return
+    }
+    this.variable = Blockly.Variables.getVariable(sourceBlock.workspace, newVariableId)
   }
 
   /**
@@ -92,13 +97,22 @@ class FieldVariableGetter extends Blockly.FieldLabel {
   }
 
   fromXml(element: Element) {
-    this.setValue(element.getAttribute('id')!)
+    const id = element.getAttribute('id')
+    if (!id) {
+      console.error('[field_variable_getter] Missing variable id in XML')
+      return
+    }
+    this.setValue(id)
   }
 
   toXml(element: Element): Element {
-    element.setAttribute('id', this.variable!.getId())
-    element.setAttribute('variabletype', this.variable!.getType())
-    element.textContent = this.variable!.getName()
+    if (!this.variable) {
+      console.error('[field_variable_getter] Missing variable in toXml')
+      return element
+    }
+    element.setAttribute('id', this.variable.getId())
+    element.setAttribute('variabletype', this.variable.getType())
+    element.textContent = this.variable.getName()
     return element
   }
 }

package/src/fields/field_vertical_separator.ts

@@ -73,7 +73,11 @@ class FieldVerticalSeparator extends Blockly.Field {
    * @package
    */
   setLineHeight(newHeight: number) {
-    this.lineElement!.setAttribute('y2', `${newHeight}`)
+    if (!this.lineElement) {
+      console.error('[field_vertical_separator] Missing lineElement in setLineHeight')
+      return
+    }
+    this.lineElement.setAttribute('y2', `${newHeight}`)
   }
 
   /**

package/src/fields/scratch_field_angle.ts

@@ -47,17 +47,17 @@ class ScratchFieldAngle extends Blockly.FieldNumber {
   /**
    * Opaque identifier used to unbind event listener in dispose().
    */
-  private mouseDownWrapper_!: Blockly.browserEvents.Data
+  private mouseDownWrapper_?: Blockly.browserEvents.Data
 
   /**
    * Opaque identifier used to unbind event listener in dispose().
    */
-  private mouseMoveWrapper!: Blockly.browserEvents.Data
+  private mouseMoveWrapper?: Blockly.browserEvents.Data
 
   /**
    * Opaque identifier used to unbind event listener in dispose().
    */
-  private mouseUpWrapper!: Blockly.browserEvents.Data
+  private mouseUpWrapper?: Blockly.browserEvents.Data
 
   /**
    * Round angles to the nearest 15 degrees when using mouse.
@@ -164,6 +164,14 @@ class ScratchFieldAngle extends Blockly.FieldNumber {
     Blockly.DropDownDiv.hideWithoutAnimation()
     Blockly.DropDownDiv.clearContent()
     const div = Blockly.DropDownDiv.getContentDiv()
+    const sourceBlock = this.getSourceBlock()
+    if (!(sourceBlock instanceof Blockly.BlockSvg)) {
+      throw new Error('[scratch_field_angle] Missing source BlockSvg for showEditor_')
+    }
+    const parentBlock = sourceBlock.getParent()
+    if (!parentBlock) {
+      throw new Error('[scratch_field_angle] Missing parent block for showEditor_')
+    }
     // Build the SVG DOM.
     const svg = Blockly.utils.dom.createSvgElement(
       'svg',
@@ -183,8 +191,8 @@ class ScratchFieldAngle extends Blockly.FieldNumber {
         cx: this.HALF,
         cy: this.HALF,
         r: this.RADIUS,
-        fill: (this.getSourceBlock()!.getParent() as Blockly.BlockSvg).getColourSecondary(),
-        stroke: (this.getSourceBlock()!.getParent() as Blockly.BlockSvg).getColourTertiary(),
+        fill: parentBlock.getColourSecondary(),
+        stroke: parentBlock.getColourTertiary(),
         class: 'blocklyAngleCircle',
       },
       svg,
@@ -268,13 +276,10 @@ class ScratchFieldAngle extends Blockly.FieldNumber {
       Blockly.getMainWorkspace().options.pathToMedia + this.ARROW_SVG_PATH,
     )
 
-    Blockly.DropDownDiv.setColour(
-      (this.getSourceBlock()!.getParent() as Blockly.BlockSvg).getColour(),
-      (this.getSourceBlock()!.getParent() as Blockly.BlockSvg).getColourTertiary(),
-    )
-    Blockly.DropDownDiv.showPositionedByBlock(this, this.getSourceBlock() as Blockly.BlockSvg)
+    Blockly.DropDownDiv.setColour(parentBlock.getColour(), parentBlock.getColourTertiary())
+    Blockly.DropDownDiv.showPositionedByBlock(this as Blockly.Field<string | number | null>, sourceBlock)
 
-    this.mouseDownWrapper_ = Blockly.browserEvents.bind(this.handle, 'mousedown', this, this.onMouseDown)
+    this.mouseDownWrapper_ = Blockly.browserEvents.bind(this.handle, 'mousedown', this, this.onMouseDown.bind(this))
 
     this.updateGraph()
   }
@@ -283,16 +288,20 @@ class ScratchFieldAngle extends Blockly.FieldNumber {
    * Set the angle to match the mouse's position.
    */
   onMouseDown() {
-    this.mouseMoveWrapper = Blockly.browserEvents.bind(document.body, 'mousemove', this, this.onMouseMove)
-    this.mouseUpWrapper = Blockly.browserEvents.bind(document.body, 'mouseup', this, this.onMouseUp)
+    this.mouseMoveWrapper = Blockly.browserEvents.bind(document.body, 'mousemove', this, this.onMouseMove.bind(this))
+    this.mouseUpWrapper = Blockly.browserEvents.bind(document.body, 'mouseup', this, this.onMouseUp.bind(this))
   }
 
   /**
    * Set the angle to match the mouse's position.
    */
   onMouseUp() {
-    Blockly.browserEvents.unbind(this.mouseMoveWrapper)
-    Blockly.browserEvents.unbind(this.mouseUpWrapper)
+    if (this.mouseMoveWrapper) {
+      Blockly.browserEvents.unbind(this.mouseMoveWrapper)
+    }
+    if (this.mouseUpWrapper) {
+      Blockly.browserEvents.unbind(this.mouseUpWrapper)
+    }
   }
 
   /**
@@ -301,7 +310,9 @@ class ScratchFieldAngle extends Blockly.FieldNumber {
    */
   onMouseMove(e: PointerEvent) {
     e.preventDefault()
-    const bBox = this.gauge!.ownerSVGElement!.getBoundingClientRect()
+    const ownerSvg = this.gauge?.ownerSVGElement
+    if (!ownerSvg) return
+    const bBox = ownerSvg.getBoundingClientRect()
     const dx = e.clientX - bBox.left - this.HALF
     const dy = e.clientY - bBox.top - this.HALF
     let angle = Math.atan(-dy / dx)
@@ -383,12 +394,12 @@ class ScratchFieldAngle extends Blockly.FieldNumber {
       } else {
         imageRotation = -angleDegrees
       }
-      this.arrow!.setAttribute('transform', 'rotate(' + imageRotation + ')')
+      this.arrow?.setAttribute('transform', 'rotate(' + imageRotation + ')')
     }
     this.gauge.setAttribute('d', path.join(''))
-    this.line!.setAttribute('x2', `${x2}`)
-    this.line!.setAttribute('y2', `${y2}`)
-    this.handle!.setAttribute('transform', 'translate(' + x2 + ',' + y2 + ')')
+    this.line?.setAttribute('x2', `${x2}`)
+    this.line?.setAttribute('y2', `${y2}`)
+    this.handle?.setAttribute('transform', 'translate(' + x2 + ',' + y2 + ')')
   }
 
   /**
@@ -396,7 +407,7 @@ class ScratchFieldAngle extends Blockly.FieldNumber {
    * @param text The user's text.
    * @returns A string representing a valid angle, or null if invalid.
    */
-  doClassValidation_(text: string): number | null {
+  doClassValidation_(text: string | null): number | null {
     if (text === null) {
       return null
     }

package/src/fields/scratch_field_dropdown.ts

@@ -17,14 +17,18 @@ class ScratchFieldDropdown extends Blockly.FieldDropdown {
     } else if (this.borderRect_) {
       this.borderRect_.setAttribute(
         'fill',
-        'colourQuaternary' in style ? `${style.colourQuaternary}` : style.colourTertiary,
+        'colourQuaternary' in style ? String(style.colourQuaternary) : style.colourTertiary,
       )
     }
   }
 
   dropdownDispose_() {
     super.dropdownDispose_()
-    const sourceBlock = this.getSourceBlock()!
+    const sourceBlock = this.getSourceBlock()
+    if (!sourceBlock) {
+      console.error('[scratch_field_dropdown] Missing source block in dropdownDispose_')
+      return
+    }
     if (sourceBlock.isShadow()) {
       sourceBlock.setStyle(this.originalStyle)
     }

package/src/fields/scratch_field_number.ts

@@ -110,14 +110,14 @@ class ScratchFieldNumber extends Blockly.FieldTextInput {
    * appropriate.
    * @param e The triggering pointer event.
    */
-  showEditor_(e: PointerEvent) {
+  showEditor_(e?: PointerEvent) {
     // Do not focus on mobile devices so we can show the num-pad
     const showNumPad = e?.pointerType === 'touch'
     super.showEditor_(e, showNumPad)
 
     // Show a numeric keypad in the drop-down on touch
     if (showNumPad) {
-      this.htmlInput_!.select()
+      this.htmlInput_?.select()
       this.showNumPad_()
     }
   }
@@ -148,7 +148,10 @@ class ScratchFieldNumber extends Blockly.FieldTextInput {
 
     // Set colour and size of drop-down
     const sourceBlock = this.getSourceBlock() as Blockly.BlockSvg
-    Blockly.DropDownDiv.setColour(sourceBlock.getParent()!.getColour(), sourceBlock.getColourTertiary())
+    const parentBlock = sourceBlock.getParent()
+    if (parentBlock) {
+      Blockly.DropDownDiv.setColour(parentBlock.getColour(), sourceBlock.getColourTertiary())
+    }
     contentDiv.style.width = ScratchFieldNumber.DROPDOWN_WIDTH + 'px'
 
     this.position_()
@@ -176,7 +179,7 @@ class ScratchFieldNumber extends Blockly.FieldTextInput {
     Blockly.DropDownDiv.setBoundsElement(sourceBlock.workspace.getParentSvg().parentElement)
     Blockly.DropDownDiv.show(
       this,
-      this.getSourceBlock()!.RTL,
+      sourceBlock.RTL,
       primaryX,
       primaryY,
       secondaryX,
@@ -193,8 +196,9 @@ class ScratchFieldNumber extends Blockly.FieldTextInput {
    */
   private addButtons_(contentDiv: Element) {
     const sourceBlock = this.getSourceBlock() as Blockly.BlockSvg
-    const buttonColour = sourceBlock.getParent()!.getColour()
-    const buttonBorderColour = sourceBlock.getParent()!.getColourTertiary()
+    const parent = sourceBlock.getParent()
+    const buttonColour = parent?.getColour() ?? sourceBlock.getColour()
+    const buttonBorderColour = parent?.getColourTertiary() ?? sourceBlock.getColourTertiary()
 
     // Add numeric keypad buttons
     const buttons = ScratchFieldNumber.NUMPAD_BUTTONS
@@ -248,10 +252,12 @@ class ScratchFieldNumber extends Blockly.FieldTextInput {
     // String of the button (e.g., '7')
     const spliceValue = (e.target as HTMLElement).innerText
     // Old value of the text field
-    const oldValue = this.htmlInput_!.value
+    const htmlInput = this.htmlInput_
+    if (!htmlInput) return
+    const oldValue = htmlInput.value
     // Determine the selected portion of the text field
-    const selectionStart = this.htmlInput_!.selectionStart ?? 0
-    const selectionEnd = this.htmlInput_!.selectionEnd ?? 0
+    const selectionStart = htmlInput.selectionStart ?? 0
+    const selectionEnd = htmlInput.selectionEnd ?? 0
 
     // Splice in the new value
     const newValue = oldValue.slice(0, selectionStart) + spliceValue + oldValue.slice(selectionEnd)
@@ -273,10 +279,12 @@ class ScratchFieldNumber extends Blockly.FieldTextInput {
    */
   numPadEraseButtonTouch(e: PointerEvent) {
     // Old value of the text field
-    const oldValue = this.htmlInput_!.value
+    const htmlInput = this.htmlInput_
+    if (!htmlInput) return
+    const oldValue = htmlInput.value
     // Determine what is selected to erase (if anything)
-    let selectionStart = this.htmlInput_!.selectionStart ?? 0
-    const selectionEnd = this.htmlInput_!.selectionEnd ?? 0
+    let selectionStart = htmlInput.selectionStart ?? 0
+    const selectionEnd = htmlInput.selectionEnd ?? 0
 
     // If selection is zero-length, shift start to the left 1 character
     if (selectionStart == selectionEnd) {
@@ -303,7 +311,8 @@ class ScratchFieldNumber extends Blockly.FieldTextInput {
   private updateDisplay_(newValue: string, newSelection: number) {
     this.setEditorValue_(newValue)
     // Resize and scroll the text field appropriately
-    const htmlInput = this.htmlInput_!
+    const htmlInput = this.htmlInput_
+    if (!htmlInput) return
     htmlInput.setSelectionRange(newSelection, newSelection)
     htmlInput.scrollLeft = htmlInput.scrollWidth
   }