From e2da465383b1a8b6d464dfe779a81dc4e5b04bc2 Mon Sep 17 00:00:00 2001
From: Richard Knoll <riknoll@microsoft.com>
Date: Mon, 7 Oct 2024 16:17:44 -0700
Subject: [PATCH] Add monkey patch to restore background to minecraft workspace

---
 pxtblocks/index.ts               |  1 +
 pxtblocks/loader.ts              |  3 --
 pxtblocks/monkeyPatches/grid.ts  | 72 ++++++++++++++++++++++++++++++++
 pxtblocks/monkeyPatches/index.ts |  2 +
 webapp/src/blocks.tsx            |  1 +
 5 files changed, 76 insertions(+), 3 deletions(-)
 create mode 100644 pxtblocks/monkeyPatches/grid.ts

diff --git a/pxtblocks/index.ts b/pxtblocks/index.ts
index 2bf22532bea5..51687440b96b 100644
--- a/pxtblocks/index.ts
+++ b/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";
diff --git a/pxtblocks/loader.ts b/pxtblocks/loader.ts
index 99560905267e..7104f37deb79 100644
--- a/pxtblocks/loader.ts
+++ b/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();
diff --git a/pxtblocks/monkeyPatches/grid.ts b/pxtblocks/monkeyPatches/grid.ts
new file mode 100644
index 000000000000..b264b28ed3f3
--- /dev/null
+++ b/pxtblocks/monkeyPatches/grid.ts
@@ -0,0 +1,72 @@
+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);
+        }
+
+        for (const patternId of patternsToRemove) {
+            gridPatternIds.splice(gridPatternIds.indexOf(patternId), 1);
+        }
+    }
+}
\ No newline at end of file
diff --git a/pxtblocks/monkeyPatches/index.ts b/pxtblocks/monkeyPatches/index.ts
index 2c8cd915735b..7c917faec006 100644
--- a/pxtblocks/monkeyPatches/index.ts
+++ b/pxtblocks/monkeyPatches/index.ts
@@ -1,5 +1,7 @@
 import { monkeyPatchBlockSvg } from "./blockSvg";
+import { monkeyPatchGrid } from "./grid";
 
 export function applyMonkeyPatches() {
     monkeyPatchBlockSvg();
+    monkeyPatchGrid();
 }
\ No newline at end of file
diff --git a/webapp/src/blocks.tsx b/webapp/src/blocks.tsx
index 5527f235e2e5..5d9d1aa81269 100644
--- a/webapp/src/blocks.tsx
+++ b/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