Add monkey patch to restore background to minecraft workspace (#10220)

* Add monkey patch to restore background to minecraft workspace

* also scale image

pxtblocks/index.ts

@@ -20,6 +20,7 @@ export * from "./diff";
 export * from "./legacyMutations";
 export * from "./blockDragger";
 export * from "./workspaceSearch";
+export * from "./monkeyPatches";
 
 import * as contextMenu from "./contextMenu";
 import * as external from "./external";

pxtblocks/loader.ts

@@ -22,7 +22,6 @@ import { initVariables } from "./builtins/variables";
 import { initOnStart } from "./builtins/misc";
 import { initContextMenu } from "./contextMenu";
 import { renderCodeCard } from "./codecardRenderer";
-import { applyMonkeyPatches } from "./monkeyPatches";
 import { FieldDropdown } from "./fields/field_dropdown";
 import { setDraggableShadowBlocks, setDuplicateOnDragStrategy } from "./plugins/duplicateOnDrag";
 
@@ -588,8 +587,6 @@ function init(blockInfo: pxtc.BlocksInfo) {
     if (blocklyInitialized) return;
     blocklyInitialized = true;
 
-    applyMonkeyPatches();
-
     initFieldEditors();
     initContextMenu();
     initOnStart();

pxtblocks/monkeyPatches/grid.ts

@@ -0,0 +1,73 @@
+import * as Blockly from "blockly";
+
+interface ExtendedGridOptions extends Blockly.Options.GridOptions {
+    image?: {
+        path: string;
+        width: string;
+        height: string;
+        opacity: number;
+    }
+}
+
+export function monkeyPatchGrid() {
+    const options = pxt.appTarget.appTheme.blocklyOptions?.grid as ExtendedGridOptions;
+
+    if (!options?.image?.path) return;
+
+    const gridPatternIds: string[] = [];
+
+    Blockly.Grid.createDom = function (rnd: string, gridOptions: Blockly.Options.GridOptions, defs: SVGElement) {
+        const id = "blocklyGridPattern" + rnd;
+
+        const gridPattern = Blockly.utils.dom.createSvgElement(
+            Blockly.utils.Svg.PATTERN,
+            {
+                id,
+                patternUnits: "userSpaceOnUse",
+                width: options.image.width,
+                height: options.image.height
+            },
+            defs,
+        );
+
+        gridPatternIds.push(id)
+
+        const image = Blockly.utils.dom.createSvgElement(
+            Blockly.utils.Svg.IMAGE,
+            {
+                width: options.image.width,
+                height: options.image.height,
+                opacity: options.image.opacity
+            },
+            gridPattern
+        );
+
+        image.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", options.image.path)
+
+        return gridPattern;
+    }
+
+    const oldGridUpdate = Blockly.Grid.prototype.update;
+
+    Blockly.Grid.prototype.update = function (this: Blockly.Grid, scale: number) {
+        oldGridUpdate.call(this, scale);
+
+        const patternsToRemove: string[] = [];
+        for (const patternId of gridPatternIds) {
+            const imagePattern = document.getElementById(patternId) as unknown as SVGPatternElement;
+
+            if (!imagePattern) {
+                patternsToRemove.push(patternId);
+                continue;
+            }
+
+            imagePattern.setAttribute("width", options.image.width);
+            imagePattern.setAttribute("height", options.image.height);
+            imagePattern.setAttribute('patternTransform', 'scale(' + scale + ')');
+        }
+
+        for (const patternId of patternsToRemove) {
+            gridPatternIds.splice(gridPatternIds.indexOf(patternId), 1);
+        }
+    }
+}

pxtblocks/monkeyPatches/index.ts

@@ -1,5 +1,7 @@
 import { monkeyPatchBlockSvg } from "./blockSvg";
+import { monkeyPatchGrid } from "./grid";
 
 export function applyMonkeyPatches() {
     monkeyPatchBlockSvg();
+    monkeyPatchGrid();
 }

webapp/src/blocks.tsx

@@ -1003,6 +1003,7 @@ export class Editor extends toolboxeditor.ToolboxEditor {
     loadBlocklyAsync() {
         if (!this._loadBlocklyPromise) {
             pxt.perf.measureStart("loadBlockly")
+            pxtblockly.applyMonkeyPatches();
             this._loadBlocklyPromise = pxt.BrowserUtils.loadBlocklyAsync()
                 .then(() => {
                     // Initialize the "Make a function" button