From d38ccc1fd72ff40e6991a7f698e5c775b9aef2b2 Mon Sep 17 00:00:00 2001
From: MiroslavDionisiev <miroslav@scratch.org>
Date: Wed, 11 Jun 2025 10:41:32 +0300
Subject: [PATCH 1/2] feat: [UEPR-268] change canvas svg to rgenerate when
 containing container resizes

---
 core/inject.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/core/inject.js b/core/inject.js
index 7b0dbddc7b..91147afdb0 100644
--- a/core/inject.js
+++ b/core/inject.js
@@ -71,7 +71,7 @@ Blockly.inject = function(container, opt_options) {
 
   var workspace = Blockly.createMainWorkspace_(svg, options, blockDragSurface,
       workspaceDragSurface);
-  Blockly.init_(workspace);
+  Blockly.init_(workspace, subContainer);
   Blockly.mainWorkspace = workspace;
 
   Blockly.svgResize(workspace);
@@ -347,9 +347,10 @@ Blockly.createMainWorkspace_ = function(svg, options, blockDragSurface, workspac
 /**
  * Initialize Blockly with various handlers.
  * @param {!Blockly.Workspace} mainWorkspace Newly created main workspace.
+ * @param {!Element} container Containing element.
  * @private
  */
-Blockly.init_ = function(mainWorkspace) {
+Blockly.init_ = function(mainWorkspace, container) {
   var options = mainWorkspace.options;
   var svg = mainWorkspace.getParentSvg();
 
@@ -361,13 +362,12 @@ Blockly.init_ = function(mainWorkspace) {
         }
       });
 
-  var workspaceResizeHandler = Blockly.bindEventWithChecks_(window, 'resize',
-      null,
-      function() {
-        Blockly.hideChaffOnResize(true);
-        Blockly.svgResize(mainWorkspace);
-      });
-  mainWorkspace.setResizeHandlerWrapper(workspaceResizeHandler);
+  const resizeObserver = new ResizeObserver(() => {
+    Blockly.hideChaffOnResize(true);
+    Blockly.svgResize(mainWorkspace);
+  });
+
+  resizeObserver.observe(container);
 
   Blockly.inject.bindDocumentEvents_();
 

From 1005084cb048355a7bd797e25fdee801b25eeb43 Mon Sep 17 00:00:00 2001
From: MiroslavDionisiev <miroslav@scratch.org>
Date: Tue, 17 Jun 2025 12:43:41 +0300
Subject: [PATCH 2/2] feat: [UEPR-268] clear resize observer

---
 core/inject.js        |  1 +
 core/workspace_svg.js | 22 +++++++++++-----------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/core/inject.js b/core/inject.js
index 91147afdb0..03ff273cc4 100644
--- a/core/inject.js
+++ b/core/inject.js
@@ -368,6 +368,7 @@ Blockly.init_ = function(mainWorkspace, container) {
   });
 
   resizeObserver.observe(container);
+  mainWorkspace.setResizeObserver(resizeObserver);
 
   Blockly.inject.bindDocumentEvents_();
 
diff --git a/core/workspace_svg.js b/core/workspace_svg.js
index e358f6ec93..5eb687cfae 100644
--- a/core/workspace_svg.js
+++ b/core/workspace_svg.js
@@ -119,11 +119,10 @@ Blockly.WorkspaceSvg = function(options, opt_blockDragSurface, opt_wsDragSurface
 goog.inherits(Blockly.WorkspaceSvg, Blockly.Workspace);
 
 /**
- * A wrapper function called when a resize event occurs.
- * You can pass the result to `unbindEvent_`.
- * @type {Array.<!Array>}
+ * Save resize observer of the canvas in order to unobserve later in dispose
+ * @type {ResizeObserver}
  */
-Blockly.WorkspaceSvg.prototype.resizeHandlerWrapper_ = null;
+Blockly.WorkspaceSvg.prototype.resizeObserver_ = null;
 
 /**
  * The render status of an SVG workspace.
@@ -408,11 +407,11 @@ Blockly.WorkspaceSvg.prototype.getInjectionDiv = function() {
 };
 
 /**
- * Save resize handler data so we can delete it later in dispose.
- * @param {!Array.<!Array>} handler Data that can be passed to unbindEvent_.
+ * Save resize observer so we can delete it later in dispose.
+ * @param {ResizeObserver} observer Data to unobserve.
  */
-Blockly.WorkspaceSvg.prototype.setResizeHandlerWrapper = function(handler) {
-  this.resizeHandlerWrapper_ = handler;
+Blockly.WorkspaceSvg.prototype.setResizeObserver = function(observer) {
+  this.resizeObserver_ = observer;
 };
 
 /**
@@ -547,9 +546,10 @@ Blockly.WorkspaceSvg.prototype.dispose = function() {
     // SVG is injected into (i.e. injectionDiv).
     goog.dom.removeNode(this.getParentSvg().parentNode);
   }
-  if (this.resizeHandlerWrapper_) {
-    Blockly.unbindEvent_(this.resizeHandlerWrapper_);
-    this.resizeHandlerWrapper_ = null;
+
+  if (this.resizeObserver_) {
+    this.resizeObserver_.disconnect();
+    this.resizeObserver_ = null;
   }
 };