diff --git a/core/inject.js b/core/inject.js index 7b0dbddc7b..03ff273cc4 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,13 @@ 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); + 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.} + * 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.} 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; } };