diff --git a/core/contextmenu.js b/core/contextmenu.js index cc02adc25..cc91ebcb1 100644 --- a/core/contextmenu.js +++ b/core/contextmenu.js @@ -174,7 +174,10 @@ const position_ = function(menu, e, rtl) { * @private */ const createWidget_ = function(menu) { - const div = WidgetDiv.DIV; + const div = WidgetDiv.getDiv(); + if (!div) { + throw Error('Attempting to create a context menu when widget div is null'); + } menu.render(div); const menuDom = menu.getElement(); dom.addClass( diff --git a/core/field_multilineinput.js b/core/field_multilineinput.js index eee4f58c4..31df9a6fc 100644 --- a/core/field_multilineinput.js +++ b/core/field_multilineinput.js @@ -330,7 +330,7 @@ FieldMultilineInput.prototype.showEditor_ = function(_opt_e, opt_quietInput) { * @protected */ FieldMultilineInput.prototype.widgetCreate_ = function() { - const div = WidgetDiv.DIV; + const div = WidgetDiv.getDiv(); const scale = this.workspace_.getScale(); const htmlInput = diff --git a/core/field_textinput.js b/core/field_textinput.js index 4b80e411b..a682cb2ff 100644 --- a/core/field_textinput.js +++ b/core/field_textinput.js @@ -341,7 +341,7 @@ FieldTextInput.prototype.showInlineEditor_ = function(quietInput) { */ FieldTextInput.prototype.widgetCreate_ = function() { Events.setGroup(true); - const div = WidgetDiv.DIV; + const div = WidgetDiv.getDiv(); dom.addClass(this.getClickTarget_(), 'editing'); @@ -406,7 +406,7 @@ FieldTextInput.prototype.widgetDispose_ = function() { // Actual disposal. this.unbindInputEvents_(); - const style = WidgetDiv.DIV.style; + const style = WidgetDiv.getDiv().style; style.width = 'auto'; style.height = 'auto'; style.fontSize = ''; @@ -509,7 +509,7 @@ FieldTextInput.prototype.setEditorValue_ = function(newValue) { * @protected */ FieldTextInput.prototype.resizeEditor_ = function() { - const div = WidgetDiv.DIV; + const div = WidgetDiv.getDiv(); const bBox = this.getScaledBBox(); div.style.width = bBox.right - bBox.left + 'px'; div.style.height = bBox.bottom - bBox.top + 'px'; diff --git a/core/widgetdiv.js b/core/widgetdiv.js index 106dce645..c3bd46cca 100644 --- a/core/widgetdiv.js +++ b/core/widgetdiv.js @@ -16,131 +16,168 @@ * @name Blockly.WidgetDiv * @namespace */ -goog.provide('Blockly.WidgetDiv'); +goog.module('Blockly.WidgetDiv'); +goog.module.declareLegacyNamespace(); -goog.require('Blockly.common'); -goog.require('Blockly.utils.dom'); - -goog.requireType('Blockly.utils.Rect'); -goog.requireType('Blockly.utils.Size'); -goog.requireType('Blockly.WorkspaceSvg'); +/* eslint-disable-next-line no-unused-vars */ +const Rect = goog.requireType('Blockly.utils.Rect'); +/* eslint-disable-next-line no-unused-vars */ +const Size = goog.requireType('Blockly.utils.Size'); +/* eslint-disable-next-line no-unused-vars */ +const WorkspaceSvg = goog.requireType('Blockly.WorkspaceSvg'); +const common = goog.require('Blockly.common'); +const deprecation = goog.require('Blockly.utils.deprecation'); +const dom = goog.require('Blockly.utils.dom'); /** * The object currently using this container. * @type {Object} - * @private */ -Blockly.WidgetDiv.owner_ = null; +let owner = null; /** * Optional cleanup function set by whichever object uses the widget. * @type {Function} - * @private */ -Blockly.WidgetDiv.dispose_ = null; +let dispose = null; /** * A class name representing the current owner's workspace renderer. * @type {string} - * @private */ -Blockly.WidgetDiv.rendererClassName_ = ''; +let rendererClassName = ''; /** * A class name representing the current owner's workspace theme. * @type {string} - * @private */ -Blockly.WidgetDiv.themeClassName_ = ''; +let themeClassName = ''; + +/** + * The HTML container for popup overlays (e.g. editor widgets). + * @type {?Element} + */ +let DIV; +/** @deprecated September 2021 */ +exports.DIV = DIV; + +/** + * Returns the HTML container for editor widgets. + * @return {?Element} The editor widget container. + */ +const getDiv = function() { + return DIV; +}; +exports.getDiv = getDiv; + +/** + * Allows unit tests to reset the div. + * @param {?Element} newDiv The new value for the DIV field. + */ +const testOnly_setDiv = function(newDiv) { + DIV = newDiv; +}; +exports.testOnly_setDiv = testOnly_setDiv; + +Object.defineProperties(exports, { + DIV: { + get: function() { + deprecation.warn( + 'Blockly.WidgetDiv.DIV', 'September 2021', 'September 2022', + 'Blockly.WidgetDiv.getDiv()'); + return getDiv(); + } + } +}); /** * Create the widget div and inject it onto the page. */ -Blockly.WidgetDiv.createDom = function() { - if (Blockly.WidgetDiv.DIV) { +const createDom = function() { + if (DIV) { return; // Already created. } - /** - * The HTML container for popup overlays (e.g. editor widgets). - * @type {!Element} - */ - Blockly.WidgetDiv.DIV = document.createElement('div'); - Blockly.WidgetDiv.DIV.className = 'blocklyWidgetDiv'; - var container = Blockly.common.getParentContainer() || document.body; - container.appendChild(Blockly.WidgetDiv.DIV); + + DIV = document.createElement('div'); + DIV.className = 'blocklyWidgetDiv'; + const container = common.getParentContainer() || document.body; + container.appendChild(DIV); }; +exports.createDom = createDom; /** * Initialize and display the widget div. Close the old one if needed. * @param {!Object} newOwner The object that will be using this container. * @param {boolean} rtl Right-to-left (true) or left-to-right (false). - * @param {Function} dispose Optional cleanup function to be run when the + * @param {Function} newDispose Optional cleanup function to be run when the * widget is closed. */ -Blockly.WidgetDiv.show = function(newOwner, rtl, dispose) { - Blockly.WidgetDiv.hide(); - Blockly.WidgetDiv.owner_ = newOwner; - Blockly.WidgetDiv.dispose_ = dispose; - var div = Blockly.WidgetDiv.DIV; +const show = function(newOwner, rtl, newDispose) { + hide(); + owner = newOwner; + dispose = newDispose; + const div = DIV; div.style.direction = rtl ? 'rtl' : 'ltr'; div.style.display = 'block'; - var mainWorkspace = - /** @type {!Blockly.WorkspaceSvg} */ (Blockly.common.getMainWorkspace()); - Blockly.WidgetDiv.rendererClassName_ = - mainWorkspace.getRenderer().getClassName(); - Blockly.WidgetDiv.themeClassName_ = mainWorkspace.getTheme().getClassName(); - Blockly.utils.dom.addClass(div, Blockly.WidgetDiv.rendererClassName_); - Blockly.utils.dom.addClass(div, Blockly.WidgetDiv.themeClassName_); + const mainWorkspace = + /** @type {!WorkspaceSvg} */ (common.getMainWorkspace()); + rendererClassName = mainWorkspace.getRenderer().getClassName(); + themeClassName = mainWorkspace.getTheme().getClassName(); + dom.addClass(div, rendererClassName); + dom.addClass(div, themeClassName); }; +exports.show = show; /** * Destroy the widget and hide the div. */ -Blockly.WidgetDiv.hide = function() { - if (!Blockly.WidgetDiv.isVisible()) { +const hide = function() { + if (!isVisible()) { return; } - Blockly.WidgetDiv.owner_ = null; + owner = null; - var div = Blockly.WidgetDiv.DIV; + const div = DIV; div.style.display = 'none'; div.style.left = ''; div.style.top = ''; - Blockly.WidgetDiv.dispose_ && Blockly.WidgetDiv.dispose_(); - Blockly.WidgetDiv.dispose_ = null; + dispose && dispose(); + dispose = null; div.textContent = ''; - if (Blockly.WidgetDiv.rendererClassName_) { - Blockly.utils.dom.removeClass(div, Blockly.WidgetDiv.rendererClassName_); - Blockly.WidgetDiv.rendererClassName_ = ''; + if (rendererClassName) { + dom.removeClass(div, rendererClassName); + rendererClassName = ''; } - if (Blockly.WidgetDiv.themeClassName_) { - Blockly.utils.dom.removeClass(div, Blockly.WidgetDiv.themeClassName_); - Blockly.WidgetDiv.themeClassName_ = ''; + if (themeClassName) { + dom.removeClass(div, themeClassName); + themeClassName = ''; } - (/** @type {!Blockly.WorkspaceSvg} */ ( - Blockly.common.getMainWorkspace())).markFocused(); + (/** @type {!WorkspaceSvg} */ (common.getMainWorkspace())).markFocused(); }; +exports.hide = hide; /** * Is the container visible? * @return {boolean} True if visible. */ -Blockly.WidgetDiv.isVisible = function() { - return !!Blockly.WidgetDiv.owner_; +const isVisible = function() { + return !!owner; }; +exports.isVisible = isVisible; /** * Destroy the widget and hide the div if it is being used by the specified * object. * @param {!Object} oldOwner The object that was using this container. */ -Blockly.WidgetDiv.hideIfOwner = function(oldOwner) { - if (Blockly.WidgetDiv.owner_ == oldOwner) { - Blockly.WidgetDiv.hide(); +const hideIfOwner = function(oldOwner) { + if (owner == oldOwner) { + hide(); } }; +exports.hideIfOwner = hideIfOwner; /** * Set the widget div's position and height. This function does nothing clever: @@ -148,12 +185,11 @@ Blockly.WidgetDiv.hideIfOwner = function(oldOwner) { * @param {number} x Horizontal location (window coordinates, not body). * @param {number} y Vertical location (window coordinates, not body). * @param {number} height The height of the widget div (pixels). - * @private */ -Blockly.WidgetDiv.positionInternal_ = function(x, y, height) { - Blockly.WidgetDiv.DIV.style.left = x + 'px'; - Blockly.WidgetDiv.DIV.style.top = y + 'px'; - Blockly.WidgetDiv.DIV.style.height = height + 'px'; +const positionInternal = function(x, y, height) { + DIV.style.left = x + 'px'; + DIV.style.top = y + 'px'; + DIV.style.height = height + 'px'; }; /** @@ -161,56 +197,53 @@ Blockly.WidgetDiv.positionInternal_ = function(x, y, height) { * The widget should be placed adjacent to but not overlapping the anchor * rectangle. The preferred position is directly below and aligned to the left * (LTR) or right (RTL) side of the anchor. - * @param {!Blockly.utils.Rect} viewportBBox The bounding rectangle of the + * @param {!Rect} viewportBBox The bounding rectangle of the * current viewport, in window coordinates. - * @param {!Blockly.utils.Rect} anchorBBox The bounding rectangle of the anchor, + * @param {!Rect} anchorBBox The bounding rectangle of the anchor, * in window coordinates. - * @param {!Blockly.utils.Size} widgetSize The size of the widget that is inside + * @param {!Size} widgetSize The size of the widget that is inside * the widget div, in window coordinates. * @param {boolean} rtl Whether the workspace is in RTL mode. This determines * horizontal alignment. - * @package */ -Blockly.WidgetDiv.positionWithAnchor = function(viewportBBox, anchorBBox, - widgetSize, rtl) { - var y = Blockly.WidgetDiv.calculateY_(viewportBBox, anchorBBox, widgetSize); - var x = Blockly.WidgetDiv.calculateX_(viewportBBox, anchorBBox, widgetSize, - rtl); +const positionWithAnchor = function(viewportBBox, anchorBBox, widgetSize, rtl) { + const y = calculateY(viewportBBox, anchorBBox, widgetSize); + const x = calculateX(viewportBBox, anchorBBox, widgetSize, rtl); if (y < 0) { - Blockly.WidgetDiv.positionInternal_(x, 0, widgetSize.height + y); + positionInternal(x, 0, widgetSize.height + y); } else { - Blockly.WidgetDiv.positionInternal_(x, y, widgetSize.height); + positionInternal(x, y, widgetSize.height); } }; +/** @package */ +exports.positionWithAnchor = positionWithAnchor; /** * Calculate an x position (in window coordinates) such that the widget will not * be offscreen on the right or left. - * @param {!Blockly.utils.Rect} viewportBBox The bounding rectangle of the + * @param {!Rect} viewportBBox The bounding rectangle of the * current viewport, in window coordinates. - * @param {!Blockly.utils.Rect} anchorBBox The bounding rectangle of the anchor, + * @param {!Rect} anchorBBox The bounding rectangle of the anchor, * in window coordinates. - * @param {!Blockly.utils.Size} widgetSize The dimensions of the widget inside + * @param {!Size} widgetSize The dimensions of the widget inside * the widget div. * @param {boolean} rtl Whether the Blockly workspace is in RTL mode. * @return {number} A valid x-coordinate for the top left corner of the widget * div, in window coordinates. - * @private */ -Blockly.WidgetDiv.calculateX_ = function(viewportBBox, anchorBBox, widgetSize, - rtl) { +const calculateX = function(viewportBBox, anchorBBox, widgetSize, rtl) { if (rtl) { // Try to align the right side of the field and the right side of widget. - var widgetLeft = anchorBBox.right - widgetSize.width; + const widgetLeft = anchorBBox.right - widgetSize.width; // Don't go offscreen left. - var x = Math.max(widgetLeft, viewportBBox.left); + const x = Math.max(widgetLeft, viewportBBox.left); // But really don't go offscreen right: return Math.min(x, viewportBBox.right - widgetSize.width); } else { // Try to align the left side of the field and the left side of widget. // Don't go offscreen right. - var x = Math.min(anchorBBox.left, viewportBBox.right - widgetSize.width); + const x = Math.min(anchorBBox.left, viewportBBox.right - widgetSize.width); // But left is more important, because that's where the text is. return Math.max(x, viewportBBox.left); } @@ -219,17 +252,16 @@ Blockly.WidgetDiv.calculateX_ = function(viewportBBox, anchorBBox, widgetSize, /** * Calculate a y position (in window coordinates) such that the widget will not * be offscreen on the top or bottom. - * @param {!Blockly.utils.Rect} viewportBBox The bounding rectangle of the + * @param {!Rect} viewportBBox The bounding rectangle of the * current viewport, in window coordinates. - * @param {!Blockly.utils.Rect} anchorBBox The bounding rectangle of the anchor, + * @param {!Rect} anchorBBox The bounding rectangle of the anchor, * in window coordinates. - * @param {!Blockly.utils.Size} widgetSize The dimensions of the widget inside + * @param {!Size} widgetSize The dimensions of the widget inside * the widget div. * @return {number} A valid y-coordinate for the top left corner of the widget * div, in window coordinates. - * @private */ -Blockly.WidgetDiv.calculateY_ = function(viewportBBox, anchorBBox, widgetSize) { +const calculateY = function(viewportBBox, anchorBBox, widgetSize) { // Flip the widget vertically if off the bottom. if (anchorBBox.bottom + widgetSize.height >= viewportBBox.bottom) { // The bottom of the widget is at the top of the field. diff --git a/demos/custom-fields/pitch/field_pitch.js b/demos/custom-fields/pitch/field_pitch.js index d36bc3ee8..522461cef 100644 --- a/demos/custom-fields/pitch/field_pitch.js +++ b/demos/custom-fields/pitch/field_pitch.js @@ -68,7 +68,7 @@ CustomFields.FieldPitch.NOTES = 'C3 D3 E3 F3 G3 A3 B3 C4 D4 E4 F4 G4 A4'.split(/ CustomFields.FieldPitch.prototype.showEditor_ = function() { CustomFields.FieldPitch.superClass_.showEditor_.call(this); - var div = Blockly.WidgetDiv.DIV; + var div = Blockly.WidgetDiv.getDiv(); if (!div.firstChild) { // Mobile interface uses Blockly.prompt. return; diff --git a/tests/deps.js b/tests/deps.js index ad8c0479c..3fbb04372 100644 --- a/tests/deps.js +++ b/tests/deps.js @@ -216,7 +216,7 @@ goog.addDependency('../../core/variable_model.js', ['Blockly.VariableModel'], [' goog.addDependency('../../core/variables.js', ['Blockly.Variables'], ['Blockly.Blocks', 'Blockly.Msg', 'Blockly.VariableModel', 'Blockly.Xml', 'Blockly.utils.xml'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/variables_dynamic.js', ['Blockly.VariablesDynamic'], ['Blockly.Blocks', 'Blockly.Msg', 'Blockly.VariableModel', 'Blockly.Variables', 'Blockly.utils.xml'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/warning.js', ['Blockly.Warning'], ['Blockly.Bubble', 'Blockly.Events', 'Blockly.Events.BubbleOpen', 'Blockly.Icon', 'Blockly.utils.Svg', 'Blockly.utils.dom', 'Blockly.utils.object'], {'lang': 'es6', 'module': 'goog'}); -goog.addDependency('../../core/widgetdiv.js', ['Blockly.WidgetDiv'], ['Blockly.common', 'Blockly.utils.dom']); +goog.addDependency('../../core/widgetdiv.js', ['Blockly.WidgetDiv'], ['Blockly.common', 'Blockly.utils.deprecation', 'Blockly.utils.dom'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/workspace.js', ['Blockly.Workspace'], ['Blockly.ConnectionChecker', 'Blockly.Events', 'Blockly.Options', 'Blockly.VariableMap', 'Blockly.registry', 'Blockly.utils', 'Blockly.utils.math'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/workspace_audio.js', ['Blockly.WorkspaceAudio'], ['Blockly.internalConstants', 'Blockly.utils.global', 'Blockly.utils.userAgent'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/workspace_comment.js', ['Blockly.WorkspaceComment'], ['Blockly.Events', 'Blockly.Events.CommentChange', 'Blockly.Events.CommentCreate', 'Blockly.Events.CommentDelete', 'Blockly.Events.CommentMove', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.xml'], {'lang': 'es6', 'module': 'goog'}); diff --git a/tests/mocha/field_textinput_test.js b/tests/mocha/field_textinput_test.js index 1a1c1ed2a..c777134c3 100644 --- a/tests/mocha/field_textinput_test.js +++ b/tests/mocha/field_textinput_test.js @@ -168,7 +168,7 @@ suite('Text Input Fields', function() { }; field.clickTarget_ = document.createElement('div'); Blockly.mainWorkspace = workspace; - Blockly.WidgetDiv.DIV = document.createElement('div'); + Blockly.WidgetDiv.createDom(); this.stub = sinon.stub(field, 'resizeEditor_'); }; diff --git a/tests/mocha/test_helpers.js b/tests/mocha/test_helpers.js index 106991955..aa27dd66a 100644 --- a/tests/mocha/test_helpers.js +++ b/tests/mocha/test_helpers.js @@ -240,6 +240,8 @@ function sharedTestTeardown() { for (let i = 0; i < messages.length; i++) { delete Blockly.Msg[messages[i]]; } + + Blockly.WidgetDiv.testOnly_setDiv(null); } } diff --git a/tests/mocha/widget_div_test.js b/tests/mocha/widget_div_test.js index 84571dd59..31d0620e7 100644 --- a/tests/mocha/widget_div_test.js +++ b/tests/mocha/widget_div_test.js @@ -40,7 +40,7 @@ suite('WidgetDiv', function() { anchorBBox, rtl, expectedX, expectedY, expectedHeight) { Blockly.WidgetDiv.positionWithAnchor( this.viewportBBox, anchorBBox, this.widgetSize, rtl); - var style = Blockly.WidgetDiv.DIV.style; + var style = Blockly.WidgetDiv.getDiv().style; chai.assert.equal(style.left, expectedX + 'px', 'Left'); chai.assert.equal(style.top, expectedY + 'px', 'Top'); chai.assert.equal(style.height, expectedHeight + 'px', 'Height');