Blockly 12 + keyboard nav plugin update

package.json

@@ -50,7 +50,6 @@
     "built/tests/blocksrunner.js",
     "built/tests/blockssetup.js",
     "scripts/patchUglifyify.js",
-    "scripts/patchBlocklyFieldColour.js",
     "docfiles",
     "theme",
     "common-docs",
@@ -62,9 +61,9 @@
     "npm": ">=8.0.0"
   },
   "dependencies": {
-    "@blockly/field-colour": "5.0.12",
-    "@blockly/keyboard-experiment": "0.0.7",
-    "@blockly/plugin-workspace-search": "9.1.0",
+    "@blockly/field-colour": "6.0.0",
+    "@blockly/keyboard-experiment": "0.0.9",
+    "@blockly/plugin-workspace-search": "10.0.0",
     "@crowdin/crowdin-api-client": "^1.33.0",
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@microsoft/applicationinsights-web": "^2.8.11",
@@ -73,7 +72,7 @@
     "@zip.js/zip.js": "2.4.20",
     "adm-zip": "^0.5.12",
     "axios": "^1.6.8",
-    "blockly": "12.0.0-beta.4",
+    "blockly": "12.0.1-beta.1",
     "browserify": "17.0.0",
     "chai": "^3.5.0",
     "chalk": "^4.1.2",
@@ -160,10 +159,10 @@
       "source-map": "0.4.4"
     },
     "@blockly/field-colour": {
-      "blockly": "^12.0.0-beta.4"
+      "blockly": "^12.0.1-beta.1"
     },
     "@blockly/plugin-workspace-search": {
-      "blockly": "^12.0.0-beta.4"
+      "blockly": "^12.0.1-beta.1"
     }
   },
   "scripts": {
@@ -183,6 +182,6 @@
     "update": "gulp update",
     "watch-streamer": "cd docs/static/streamer && tsc -t es6 --watch",
     "prepare": "node ./scripts/npm-prepare.js",
-    "postinstall": "node ./scripts/patchUglifyify.js && node ./scripts/patchBlocklyFieldColour.js"
+    "postinstall": "node ./scripts/patchUglifyify.js"
   }
 }

pxtblocks/copyPaste.ts

@@ -30,33 +30,31 @@ export function initCopyPaste() {
 function registerCopy() {
     const copyShortcut: Blockly.ShortcutRegistry.KeyboardShortcut = {
         name: Blockly.ShortcutItems.names.COPY,
-        preconditionFn(workspace) {
-            return oldCopy.preconditionFn(workspace);
+        preconditionFn(workspace, scope) {
+            return oldCopy.preconditionFn(workspace, scope);
         },
         callback: copy,
-        // the registered shortcut from blockly isn't an array, it's some sort
-        // of serialized object so we have to convert it back to an array
-        keyCodes: [oldCopy.keyCodes[0], oldCopy.keyCodes[1], oldCopy.keyCodes[2]],
+        keyCodes: oldCopy.keyCodes,
     };
     Blockly.ShortcutRegistry.registry.register(copyShortcut);
 }
 
 function registerCut() {
     const cutShortcut: Blockly.ShortcutRegistry.KeyboardShortcut = {
         name: Blockly.ShortcutItems.names.CUT,
-        preconditionFn(workspace) {
-            return oldCut.preconditionFn(workspace);
+        preconditionFn(workspace, scope) {
+            return oldCut.preconditionFn(workspace, scope);
         },
-        callback(workspace, e, shortcut) {
+        callback(workspace, e, shortcut, scope) {
             const handler = getCopyPasteHandlers()?.cut;
 
             if (handler) {
                 return handler(workspace, e);
             }
 
-            return oldCut.callback(workspace, e, shortcut);
+            return oldCut.callback(workspace, e, shortcut, scope);
         },
-        keyCodes: [oldCut.keyCodes[0], oldCut.keyCodes[1], oldCut.keyCodes[2]],
+        keyCodes: oldCut.keyCodes,
     };
 
     Blockly.ShortcutRegistry.registry.register(cutShortcut);
@@ -65,11 +63,11 @@ function registerCut() {
 function registerPaste() {
     const pasteShortcut: Blockly.ShortcutRegistry.KeyboardShortcut = {
         name: Blockly.ShortcutItems.names.PASTE,
-        preconditionFn(workspace) {
-            return oldPaste.preconditionFn(workspace);
+        preconditionFn(workspace, scope) {
+            return oldPaste.preconditionFn(workspace, scope);
         },
         callback: paste,
-        keyCodes: [oldPaste.keyCodes[0], oldPaste.keyCodes[1], oldPaste.keyCodes[2]],
+        keyCodes: oldPaste.keyCodes,
     };
 
     Blockly.ShortcutRegistry.registry.register(pasteShortcut);
@@ -168,22 +166,22 @@ function registerPasteContextMenu() {
     Blockly.ContextMenuRegistry.registry.register(pasteOption);
 }
 
-const copy = (workspace: Blockly.WorkspaceSvg, e: Event, shortcut?: Blockly.ShortcutRegistry.KeyboardShortcut) => {
+const copy = (workspace: Blockly.WorkspaceSvg, e: Event, shortcut?: Blockly.ShortcutRegistry.KeyboardShortcut, scope?: Blockly.ContextMenuRegistry.Scope) => {
     const handler = getCopyPasteHandlers()?.copy;
 
     if (handler) {
         return handler(workspace, e);
     }
 
-    return oldCopy.callback(workspace, e, shortcut);
+    return oldCopy.callback(workspace, e, shortcut, scope);
 }
 
-const paste = (workspace: Blockly.WorkspaceSvg, e: Event, shortcut?: Blockly.ShortcutRegistry.KeyboardShortcut) => {
+const paste = (workspace: Blockly.WorkspaceSvg, e: Event, shortcut?: Blockly.ShortcutRegistry.KeyboardShortcut, scope?: Blockly.ContextMenuRegistry.Scope) => {
     const handler = getCopyPasteHandlers()?.paste;
 
     if (handler) {
         return handler(workspace, e);
     }
 
-    return oldPaste.callback(workspace, e, shortcut);
+    return oldPaste.callback(workspace, e, shortcut, scope);
 }

pxtblocks/fields/field_ledmatrix.ts

@@ -77,6 +77,9 @@ export class FieldLedMatrix extends FieldMatrix implements FieldCustom {
             this.scale = 0.85;
         else if (Math.max(this.numMatrixCols, this.numMatrixRows) > 10)
             this.scale = 0.9;
+
+        this.size_.height = this.scale * Number(this.numMatrixRows) * (FieldLedMatrix.CELL_WIDTH + FieldLedMatrix.CELL_VERTICAL_MARGIN) + FieldLedMatrix.CELL_VERTICAL_MARGIN * 2 + FieldLedMatrix.BOTTOM_MARGIN + this.getXAxisHeight()
+        this.size_.width = this.scale * Number(this.numMatrixCols) * (FieldLedMatrix.CELL_WIDTH + FieldLedMatrix.CELL_HORIZONTAL_MARGIN) + FieldLedMatrix.CELL_HORIZONTAL_MARGIN + this.getYAxisWidth();
     }
 
     protected getCellToggled(x: number, y: number): boolean {
@@ -94,8 +97,12 @@ export class FieldLedMatrix extends FieldMatrix implements FieldCustom {
     showEditor_() {
         this.selected = [0, 0];
         this.focusCell(0, 0);
-        this.matrixSvg.focus();
-        this.attachEventHandlersToMatrix();
+        this.returnEphemeralFocusFn = Blockly.getFocusManager().takeEphemeralFocus(this.matrixSvg);
+        this.addKeyboardFocusHandlers();
+    }
+
+    onNodeBlur() {
+        this.returnEphemeralFocus();
     }
 
     private initMatrix() {
@@ -146,7 +153,10 @@ export class FieldLedMatrix extends FieldMatrix implements FieldCustom {
                 }
             }
 
-            this.fieldGroup_.replaceChild(this.matrixSvg, this.fieldGroup_.firstChild);
+            this.fieldGroup_.classList.add("blocklyFieldLedMatrixGroup");
+            this.fieldGroup_.append(this.matrixSvg);
+
+            this.attachEventHandlersToMatrix();
         }
     }
 
@@ -217,9 +227,7 @@ export class FieldLedMatrix extends FieldMatrix implements FieldCustom {
 
             ev.stopPropagation();
             ev.preventDefault();
-            // Clear event listeners and selection used for keyboard navigation.
-            this.removeKeyboardFocusHandlers();
-            this.clearCellSelection();
+            this.returnEphemeralFocus();
         }, false));
     }
 
@@ -291,9 +299,6 @@ export class FieldLedMatrix extends FieldMatrix implements FieldCustom {
             this.initMatrix();
         }
 
-        // The height and width must be set by the render function
-        this.size_.height = this.scale * Number(this.numMatrixRows) * (FieldLedMatrix.CELL_WIDTH + FieldLedMatrix.CELL_VERTICAL_MARGIN) + FieldLedMatrix.CELL_VERTICAL_MARGIN * 2 + FieldLedMatrix.BOTTOM_MARGIN + this.getXAxisHeight()
-        this.size_.width = this.scale * Number(this.numMatrixCols) * (FieldLedMatrix.CELL_WIDTH + FieldLedMatrix.CELL_HORIZONTAL_MARGIN) + FieldLedMatrix.CELL_HORIZONTAL_MARGIN + this.getYAxisWidth();
     }
 
     // The return value of this function is inserted in the code
@@ -373,3 +378,22 @@ function removeQuotes(str: string) {
     }
     return str;
 }
+
+// Override the hover stroke which doesn't make sense here.
+// Restate the keyboard nav stroke more specifically than the field hover override.
+Blockly.Css.register(`
+.pxt-renderer.classic-theme .blocklyDraggable:not(.blocklyDisabled) .blocklyFieldLedMatrixGroup.blocklyEditableField:not(.blocklyEditing):hover>rect {
+    stroke: none;
+}
+.pxt-renderer.classic-theme .blocklyDraggable:not(.blocklyDisabled) .blocklyFieldLedMatrixGroup.blocklyActiveFocus.blocklyEditableField:not(.blocklyEditing):hover>rect {
+    stroke: var(--blockly-active-node-color);
+    stroke-width: var(--blockly-selection-width);
+}
+.pxt-renderer.classic-theme .blocklyDraggable:not(.blocklyDisabled) .blocklyFieldLedMatrixGroup.blocklyPassiveFocus.blocklyEditableField:not(.blocklyEditing):hover>rect {
+    stroke: var(--blockly-active-node-color);
+    stroke-dasharray: 5px 3px;
+    stroke-width: var(--blockly-selection-width);
+}
+.blocklyFieldLedMatrixGroup > .blocklyFieldRect {
+    fill: none !important;
+}`);

pxtblocks/fields/field_matrix.ts

@@ -23,6 +23,7 @@ export abstract class FieldMatrix extends Blockly.Field {
     protected abstract numMatrixCols: number;
     protected abstract numMatrixRows: number;
     protected abstract clearSelectionOnBlur: boolean;
+    protected returnEphemeralFocusFn: Blockly.ReturnEphemeralFocus | undefined = undefined;
 
     protected createMatrixDisplay({
         cellWidth,
@@ -157,6 +158,7 @@ export abstract class FieldMatrix extends Blockly.Field {
                 }
                 case "Escape": {
                     (this.sourceBlock_.workspace as Blockly.WorkspaceSvg).markFocused();
+                    this.returnEphemeralFocus();
                     return;
                 }
                 default: {
@@ -208,11 +210,15 @@ export abstract class FieldMatrix extends Blockly.Field {
         this.cells.forEach(cell => cell.forEach(cell => cell.nextElementSibling.firstElementChild.classList.remove("focusedTwoTone", "focused")));
     }
 
-    protected attachEventHandlersToMatrix() {
+    protected addKeyboardFocusHandlers() {
         if (this.sourceBlock_.isInFlyout) return;
 
         this.addKeyDownHandler();
         this.addBlurHandler();
+    }
+
+    protected attachEventHandlersToMatrix() {
+        if (this.sourceBlock_.isInFlyout) return;
 
         for (let x = 0; x < this.numMatrixCols; ++x) {
             for (let y = 0; y < this.numMatrixRows; ++y) {
@@ -221,12 +227,21 @@ export abstract class FieldMatrix extends Blockly.Field {
         }
     }
 
+    protected returnEphemeralFocus() {
+        if (this.returnEphemeralFocusFn) {
+            this.returnEphemeralFocusFn();
+            this.returnEphemeralFocusFn = undefined;
+        }
+    }
+
     protected removeKeyboardFocusHandlers() {
         if (this.keyDownBinding) {
             Blockly.browserEvents.unbind(this.keyDownBinding)
+            this.keyDownBinding = undefined;
         }
         if (this.blurBinding) {
             Blockly.browserEvents.unbind(this.blurBinding)
+            this.blurBinding = undefined;
         }
     }
 

pxtblocks/fields/field_melodySandbox.ts

@@ -85,6 +85,7 @@ export class FieldCustomMelody<U extends FieldCustomOptions> extends FieldMatrix
         this.gallery = new pxtmelody.MelodyGallery();
         this.renderEditor(contentDiv);
 
+        this.addKeyboardFocusHandlers();
         this.attachEventHandlersToMatrix();
         this.matrixFocusBind = Blockly.browserEvents.bind(this.matrixSvg, 'focus', this, this.handleMatrixFocus.bind(this));
         this.tabKeyBind = Blockly.browserEvents.bind(contentDiv, 'keydown', this, this.handleTabKey.bind(this));
@@ -157,6 +158,7 @@ export class FieldCustomMelody<U extends FieldCustomOptions> extends FieldMatrix
         if (!this.invalidString) {
             this.size_.width = FieldCustomMelody.MUSIC_ICON_WIDTH + (FieldCustomMelody.COLOR_BLOCK_WIDTH + FieldCustomMelody.COLOR_BLOCK_SPACING) * this.numMatrixCols;
         }
+        this.size_.height = 34;
         this.sourceBlock_.setColour("#ffffff");
     }
 
@@ -236,10 +238,13 @@ export class FieldCustomMelody<U extends FieldCustomOptions> extends FieldMatrix
             this.gallery.stopMelody();
         }
         if (this.matrixFocusBind) {
-            Blockly.browserEvents.unbind(this.matrixFocusBind)
+            Blockly.browserEvents.unbind(this.matrixFocusBind);
+            this.matrixFocusBind = undefined;
         }
         if (this.tabKeyBind) {
-            Blockly.browserEvents.unbind(this.tabKeyBind)
+            Blockly.browserEvents.unbind(this.tabKeyBind);
+            this.tabKeyBind = undefined;
+
         }
         this.clearCellSelection();
         this.removeKeyboardFocusHandlers();
@@ -712,6 +717,10 @@ export class FieldCustomMelody<U extends FieldCustomOptions> extends FieldMatrix
         this.gallery.hide();
         this.lastFocusableElement = this.doneButton;
     }
+
+    isFullBlockField(): boolean {
+        return true;
+    }
 }
 
 export interface ButtonGroup {

pxtblocks/fields/field_note.ts

@@ -334,7 +334,7 @@ export class FieldNote extends Blockly.FieldNumber implements FieldCustom {
         }
 
         Blockly.DropDownDiv.setColour(this.primaryColour, this.borderColour);
-        Blockly.DropDownDiv.showPositionedByBlock(this, this.sourceBlock_ as Blockly.BlockSvg, () => this.onHide());
+        Blockly.DropDownDiv.showPositionedByBlock(this, this.sourceBlock_ as Blockly.BlockSvg, () => this.onHide(), undefined, false);
 
 
         this.htmlInput_.addEventListener("keydown", this.keyHandler);

pxtblocks/fields/field_textdropdown.ts

@@ -1,7 +1,7 @@
 /// <reference path="../../built/pxtlib.d.ts" />
 
 import * as Blockly from "blockly";
-import { clearDropDownDiv, FieldCustom, FieldCustomOptions } from "./field_utils";
+import { clearDropDownDiv, FieldCustom, FieldCustomOptions, isImageProperties } from "./field_utils";
 
 export interface FieldTextDropdownOptions extends FieldCustomOptions {
     values?: string;
@@ -140,11 +140,11 @@ export class BaseFieldTextDropdown extends Blockly.FieldTextInput {
         for (let i = 0; i < options.length; i++) {
             const [label, value] = options[i];
             const content = (() => {
-                if (typeof label === 'object') {
+                if (isImageProperties(label)) {
                     // Convert ImageProperties to an HTMLImageElement.
-                    const image = new Image(label['width'], label['height']);
-                    image.src = label['src'];
-                    image.alt = label['alt'] || '';
+                    const image = new Image(label.width, label.height);
+                    image.src = label.src;
+                    image.alt = label.alt;
                     return image;
                 }
                 return label;
@@ -189,7 +189,7 @@ export class BaseFieldTextDropdown extends Blockly.FieldTextInput {
 
         this.dropDownOpen_ = true;
 
-        Blockly.DropDownDiv.showPositionedByField(this, this.dropdownDispose_.bind(this));
+        Blockly.DropDownDiv.showPositionedByField(this, this.dropdownDispose_.bind(this), undefined, false);
 
         this.dropdownKeydownHandler = this.dropdownKeydownListener.bind(this);
         this.menu_.getElement().addEventListener('keydown', this.dropdownKeydownHandler);
@@ -308,7 +308,7 @@ function validateOptions(options: Blockly.MenuOption[]) {
         } else if (
             tuple[0] &&
             typeof tuple[0] !== 'string' &&
-            typeof tuple[0].src !== 'string'
+            !isImageProperties(tuple[0])
         ) {
             foundError = true;
             pxt.error(

pxtblocks/fields/field_utils.ts

@@ -699,4 +699,25 @@ function inflateJRes(jres: pxt.Map<pxt.JRes | string>): pxt.Map<pxt.JRes> {
 export function clearDropDownDiv() {
     Blockly.DropDownDiv.clearContent();
     Blockly.DropDownDiv.getContentDiv().style.height = "";
+}
+
+/**
+ * Returns whether or not an object conforms to the ImageProperties interface.
+ *
+ * @param obj The object to test.
+ * @returns True if the object conforms to ImageProperties, otherwise false.
+ */
+export function isImageProperties(obj: any): obj is Blockly.ImageProperties {
+  return (
+    obj &&
+    typeof obj === 'object' &&
+    'src' in obj &&
+    typeof obj.src === 'string' &&
+    'alt' in obj &&
+    typeof obj.alt === 'string' &&
+    'width' in obj &&
+    typeof obj.width === 'number' &&
+    'height' in obj &&
+    typeof obj.height === 'number'
+  );
 }