From acd3a00f4a2b3faaa36af31fe14ee8ae265679dd Mon Sep 17 00:00:00 2001 From: Rachel Fenichel Date: Fri, 22 Sep 2017 16:07:32 -0700 Subject: [PATCH] Unify code for positioning the widget div (#1334) * New widget div functions, used in context menu code * Make all widget div positioning functions use the same argument order * Use new widget div functions for fields * share code for measuring menu size * Get rid of positionMenu * Update copyright date * Rebuild blockly_uncompressed because there's a new require in town --- blockly_uncompressed.js | 12 +++-- core/contextmenu.js | 41 +++++++--------- core/field.js | 19 ++++--- core/field_colour.js | 39 ++++----------- core/field_date.js | 39 ++++----------- core/field_dropdown.js | 69 +++++++++++++------------- core/ui_menu_utils.js | 67 +++++++++++++++++++++++++ core/utils.js | 21 ++++++++ core/widgetdiv.js | 106 ++++++++++++++++++++++++++++++++++++++-- 9 files changed, 283 insertions(+), 130 deletions(-) create mode 100644 core/ui_menu_utils.js diff --git a/blockly_uncompressed.js b/blockly_uncompressed.js index fac0e7d96..6cee84375 100644 --- a/blockly_uncompressed.js +++ b/blockly_uncompressed.js @@ -42,7 +42,7 @@ goog.addDependency("../../../" + dir + "/core/block.js", ['Blockly.Block'], ['Bl goog.addDependency("../../../" + dir + "/core/block_drag_surface.js", ['Blockly.BlockDragSurfaceSvg'], ['Blockly.utils', 'goog.asserts', 'goog.math.Coordinate']); goog.addDependency("../../../" + dir + "/core/block_dragger.js", ['Blockly.BlockDragger'], ['Blockly.DraggedConnectionManager', 'goog.math.Coordinate', 'goog.asserts']); goog.addDependency("../../../" + dir + "/core/block_render_svg.js", ['Blockly.BlockSvg.render'], ['Blockly.BlockSvg', 'goog.userAgent']); -goog.addDependency("../../../" + dir + "/core/block_svg.js", ['Blockly.BlockSvg'], ['Blockly.Block', 'Blockly.ContextMenu', 'Blockly.Grid', 'Blockly.RenderedConnection', 'Blockly.Touch', 'Blockly.utils', 'goog.Timer', 'goog.asserts', 'goog.dom', 'goog.math.Coordinate', 'goog.userAgent']); +goog.addDependency("../../../" + dir + "/core/block_svg.js", ['Blockly.BlockSvg'], ['Blockly.Block', 'Blockly.ContextMenu', 'Blockly.Grid', 'Blockly.RenderedConnection', 'Blockly.Tooltip', 'Blockly.Touch', 'Blockly.utils', 'goog.Timer', 'goog.asserts', 'goog.dom', 'goog.math.Coordinate', 'goog.userAgent']); goog.addDependency("../../../" + dir + "/core/blockly.js", ['Blockly'], ['Blockly.BlockSvg.render', 'Blockly.Events', 'Blockly.FieldAngle', 'Blockly.FieldCheckbox', 'Blockly.FieldColour', 'Blockly.FieldDropdown', 'Blockly.FieldImage', 'Blockly.FieldTextInput', 'Blockly.FieldNumber', 'Blockly.FieldVariable', 'Blockly.Generator', 'Blockly.Msg', 'Blockly.Procedures', 'Blockly.Toolbox', 'Blockly.Touch', 'Blockly.WidgetDiv', 'Blockly.WorkspaceSvg', 'Blockly.constants', 'Blockly.inject', 'Blockly.utils', 'goog.color', 'goog.userAgent']); goog.addDependency("../../../" + dir + "/core/blocks.js", ['Blockly.Blocks'], []); goog.addDependency("../../../" + dir + "/core/bubble.js", ['Blockly.Bubble'], ['Blockly.Touch', 'Blockly.Workspace', 'goog.dom', 'goog.math', 'goog.math.Coordinate', 'goog.userAgent']); @@ -50,7 +50,7 @@ goog.addDependency("../../../" + dir + "/core/comment.js", ['Blockly.Comment'], goog.addDependency("../../../" + dir + "/core/connection.js", ['Blockly.Connection'], ['goog.asserts', 'goog.dom']); goog.addDependency("../../../" + dir + "/core/connection_db.js", ['Blockly.ConnectionDB'], ['Blockly.Connection']); goog.addDependency("../../../" + dir + "/core/constants.js", ['Blockly.constants'], []); -goog.addDependency("../../../" + dir + "/core/contextmenu.js", ['Blockly.ContextMenu'], ['goog.dom', 'goog.events', 'goog.style', 'goog.ui.Menu', 'goog.ui.MenuItem']); +goog.addDependency("../../../" + dir + "/core/contextmenu.js", ['Blockly.ContextMenu'], ['Blockly.utils', 'Blockly.utils.uiMenu', 'goog.dom', 'goog.events', 'goog.style', 'goog.ui.Menu', 'goog.ui.MenuItem']); goog.addDependency("../../../" + dir + "/core/css.js", ['Blockly.Css'], []); goog.addDependency("../../../" + dir + "/core/dragged_connection_manager.js", ['Blockly.DraggedConnectionManager'], ['Blockly.RenderedConnection', 'goog.math.Coordinate']); goog.addDependency("../../../" + dir + "/core/events.js", ['Blockly.Events'], ['goog.array', 'goog.math.Coordinate']); @@ -58,9 +58,9 @@ goog.addDependency("../../../" + dir + "/core/extensions.js", ['Blockly.Extensio goog.addDependency("../../../" + dir + "/core/field.js", ['Blockly.Field'], ['Blockly.Gesture', 'goog.asserts', 'goog.dom', 'goog.math.Size', 'goog.style', 'goog.userAgent']); goog.addDependency("../../../" + dir + "/core/field_angle.js", ['Blockly.FieldAngle'], ['Blockly.FieldTextInput', 'goog.math', 'goog.userAgent']); goog.addDependency("../../../" + dir + "/core/field_checkbox.js", ['Blockly.FieldCheckbox'], ['Blockly.Field']); -goog.addDependency("../../../" + dir + "/core/field_colour.js", ['Blockly.FieldColour'], ['Blockly.Field', 'goog.dom', 'goog.events', 'goog.style', 'goog.ui.ColorPicker']); -goog.addDependency("../../../" + dir + "/core/field_date.js", ['Blockly.FieldDate'], ['Blockly.Field', 'goog.date', 'goog.dom', 'goog.events', 'goog.i18n.DateTimeSymbols', 'goog.i18n.DateTimeSymbols_he', 'goog.style', 'goog.ui.DatePicker']); -goog.addDependency("../../../" + dir + "/core/field_dropdown.js", ['Blockly.FieldDropdown'], ['Blockly.Field', 'goog.dom', 'goog.events', 'goog.style', 'goog.ui.Menu', 'goog.ui.MenuItem', 'goog.userAgent']); +goog.addDependency("../../../" + dir + "/core/field_colour.js", ['Blockly.FieldColour'], ['Blockly.Field', 'Blockly.utils', 'goog.dom', 'goog.events', 'goog.style', 'goog.ui.ColorPicker']); +goog.addDependency("../../../" + dir + "/core/field_date.js", ['Blockly.FieldDate'], ['Blockly.Field', 'Blockly.utils', 'goog.date', 'goog.dom', 'goog.events', 'goog.i18n.DateTimeSymbols', 'goog.i18n.DateTimeSymbols_he', 'goog.style', 'goog.ui.DatePicker']); +goog.addDependency("../../../" + dir + "/core/field_dropdown.js", ['Blockly.FieldDropdown'], ['Blockly.Field', 'Blockly.utils', 'Blockly.utils.uiMenu', 'goog.dom', 'goog.events', 'goog.style', 'goog.ui.Menu', 'goog.ui.MenuItem', 'goog.userAgent']); goog.addDependency("../../../" + dir + "/core/field_image.js", ['Blockly.FieldImage'], ['Blockly.Field', 'goog.dom', 'goog.math.Size', 'goog.userAgent']); goog.addDependency("../../../" + dir + "/core/field_label.js", ['Blockly.FieldLabel'], ['Blockly.Field', 'Blockly.Tooltip', 'goog.dom', 'goog.math.Size']); goog.addDependency("../../../" + dir + "/core/field_number.js", ['Blockly.FieldNumber'], ['Blockly.FieldTextInput', 'goog.math']); @@ -88,6 +88,7 @@ goog.addDependency("../../../" + dir + "/core/toolbox.js", ['Blockly.Toolbox'], goog.addDependency("../../../" + dir + "/core/tooltip.js", ['Blockly.Tooltip'], ['goog.dom', 'goog.dom.TagName']); goog.addDependency("../../../" + dir + "/core/touch.js", ['Blockly.Touch'], ['goog.events', 'goog.events.BrowserFeature', 'goog.string']); goog.addDependency("../../../" + dir + "/core/trashcan.js", ['Blockly.Trashcan'], ['goog.Timer', 'goog.dom', 'goog.math', 'goog.math.Rect']); +goog.addDependency("../../../" + dir + "/core/ui_menu_utils.js", ['Blockly.utils.uiMenu'], []); goog.addDependency("../../../" + dir + "/core/utils.js", ['Blockly.utils'], ['Blockly.Touch', 'goog.dom', 'goog.events.BrowserFeature', 'goog.math.Coordinate', 'goog.userAgent']); goog.addDependency("../../../" + dir + "/core/variable_map.js", ['Blockly.VariableMap'], []); goog.addDependency("../../../" + dir + "/core/variable_model.js", ['Blockly.VariableModel'], ['goog.string']); @@ -1729,6 +1730,7 @@ goog.require('Blockly.ZoomControls'); goog.require('Blockly.constants'); goog.require('Blockly.inject'); goog.require('Blockly.utils'); +goog.require('Blockly.utils.uiMenu'); delete this.BLOCKLY_DIR; delete this.BLOCKLY_BOOT; diff --git a/core/contextmenu.js b/core/contextmenu.js index 08dd5de85..fa9a47696 100644 --- a/core/contextmenu.js +++ b/core/contextmenu.js @@ -30,6 +30,9 @@ */ goog.provide('Blockly.ContextMenu'); +goog.require('Blockly.utils'); +goog.require('Blockly.utils.uiMenu'); + goog.require('goog.dom'); goog.require('goog.events'); goog.require('goog.style'); @@ -115,37 +118,29 @@ Blockly.ContextMenu.populate_ = function(options, rtl) { * @private */ Blockly.ContextMenu.position_ = function(menu, e, rtl) { - // Record windowSize and scrollOffset before adding menu. - var windowSize = goog.dom.getViewportSize(); - var scrollOffset = goog.style.getViewportPageOffset(document); + // Record windowSize and scrollOffset before adding menu. + var viewportBBox = Blockly.utils.getViewportBBox(); + // This one is just a point, but we'll pretend that it's a rect so we can use + // some helper functions. + var anchorBBox = { + top: e.clientY + viewportBBox.top, + bottom: e.clientY + viewportBBox.top, + left: e.clientX + viewportBBox.left, + right: e.clientX + viewportBBox.left + }; Blockly.ContextMenu.createWidget_(menu); - var menuDom = menu.getElement(); - // Record menuSize after adding menu. - var menuSize = goog.style.getSize(menuDom); + var menuSize = Blockly.utils.uiMenu.getSize(menu); - // Position the menu. - var x = e.clientX + scrollOffset.x; - var y = e.clientY + scrollOffset.y; - // Flip menu vertically if off the bottom. - if (e.clientY + menuSize.height >= windowSize.height) { - y -= menuSize.height; - } - // Flip menu horizontally if off the edge. if (rtl) { - if (menuSize.width >= e.clientX) { - x += menuSize.width; - } - } else { - if (e.clientX + menuSize.width >= windowSize.width) { - x -= menuSize.width; - } + Blockly.utils.uiMenu.adjustBBoxesForRTL(viewportBBox, anchorBBox, menuSize); } - Blockly.WidgetDiv.position(x, y, windowSize, scrollOffset, rtl); + + Blockly.WidgetDiv.positionWithAnchor(viewportBBox, anchorBBox, menuSize, rtl); // Calling menuDom.focus() has to wait until after the menu has been placed // correctly. Otherwise it will cause a page scroll to get the misplaced menu // in view. See issue #1329. - menuDom.focus(); + menu.getElement().focus(); }; /** diff --git a/core/field.js b/core/field.js index aab0fc8e9..13bdbd74f 100644 --- a/core/field.js +++ b/core/field.js @@ -405,16 +405,23 @@ Blockly.Field.prototype.getSize = function() { }; /** - * Returns the height and width of the field, - * accounting for the workspace scaling. - * @return {!goog.math.Size} Height and width. + * Returns the bounding box of the rendered field, accounting for workspace + * scaling. + * @return {!Object} An object with top, bottom, left, and right in pixels + * relative to the top left corner of the page (window coordinates). * @private */ Blockly.Field.prototype.getScaledBBox_ = function() { var bBox = this.borderRect_.getBBox(); - // Create new object, as getBBox can return an uneditable SVGRect in IE. - return new goog.math.Size(bBox.width * this.sourceBlock_.workspace.scale, - bBox.height * this.sourceBlock_.workspace.scale); + var scaledHeight = bBox.height * this.sourceBlock_.workspace.scale; + var scaledWidth = bBox.width * this.sourceBlock_.workspace.scale; + var xy = this.getAbsoluteXY_(); + return { + top: xy.y, + bottom: xy.y + scaledHeight, + left: xy.x, + right: xy.x + scaledWidth + }; }; /** diff --git a/core/field_colour.js b/core/field_colour.js index 1d4766cc1..c7d26d0a9 100644 --- a/core/field_colour.js +++ b/core/field_colour.js @@ -27,6 +27,8 @@ goog.provide('Blockly.FieldColour'); goog.require('Blockly.Field'); +goog.require('Blockly.utils'); + goog.require('goog.dom'); goog.require('goog.events'); goog.require('goog.style'); @@ -167,38 +169,17 @@ Blockly.FieldColour.prototype.showEditor_ = function() { Blockly.WidgetDiv.show(this, this.sourceBlock_.RTL, Blockly.FieldColour.widgetDispose_); - // Position the palette to line up with the field. - // Record windowSize and scrollOffset before adding the palette. - var windowSize = goog.dom.getViewportSize(); - var scrollOffset = goog.style.getViewportPageOffset(document); - var xy = this.getAbsoluteXY_(); - var borderBBox = this.getScaledBBox_(); - // Record paletteSize after adding the palette. + // Record viewport dimensions before adding the widget. + var viewportBBox = Blockly.utils.getViewportBBox(); + var anchorBBox = this.getScaledBBox_(); + + // Create and add the colour picker, then record the size. var picker = this.createWidget_(); var paletteSize = goog.style.getSize(picker.getElement()); - // Flip the palette vertically if off the bottom. - if (xy.y + paletteSize.height + borderBBox.height >= - windowSize.height + scrollOffset.y) { - xy.y -= paletteSize.height - 1; - } else { - xy.y += borderBBox.height - 1; - } - if (this.sourceBlock_.RTL) { - xy.x += borderBBox.width; - xy.x -= paletteSize.width; - // Don't go offscreen left. - if (xy.x < scrollOffset.x) { - xy.x = scrollOffset.x; - } - } else { - // Don't go offscreen right. - if (xy.x > windowSize.width + scrollOffset.x - paletteSize.width) { - xy.x = windowSize.width + scrollOffset.x - paletteSize.width; - } - } - Blockly.WidgetDiv.position(xy.x, xy.y, windowSize, scrollOffset, - this.sourceBlock_.RTL); + // Position the picker to line up with the field. + Blockly.WidgetDiv.positionWithAnchor(viewportBBox, anchorBBox, paletteSize, + this.sourceBlock_.RTL); // Configure event handler. var thisField = this; diff --git a/core/field_date.js b/core/field_date.js index afa5de221..8d3c601b8 100644 --- a/core/field_date.js +++ b/core/field_date.js @@ -27,6 +27,8 @@ goog.provide('Blockly.FieldDate'); goog.require('Blockly.Field'); +goog.require('Blockly.utils'); + goog.require('goog.date'); goog.require('goog.dom'); goog.require('goog.events'); @@ -102,38 +104,17 @@ Blockly.FieldDate.prototype.showEditor_ = function() { Blockly.WidgetDiv.show(this, this.sourceBlock_.RTL, Blockly.FieldDate.widgetDispose_); - // Position the picker to line up with the field. - // Record windowSize and scrollOffset before adding the picker. - var windowSize = goog.dom.getViewportSize(); - var scrollOffset = goog.style.getViewportPageOffset(document); - var xy = this.getAbsoluteXY_(); - var borderBBox = this.getScaledBBox_(); + // Record viewport dimensions before adding the picker. + var viewportBBox = Blockly.utils.getViewportBBox(); + var anchorBBox = this.getScaledBBox_(); + + // Create and add the date picker, then record the size. var picker = this.createWidget_(); - // Record pickerSize after adding the date picker. var pickerSize = goog.style.getSize(picker.getElement()); - // Flip the picker vertically if off the bottom. - if (xy.y + pickerSize.height + borderBBox.height >= - windowSize.height + scrollOffset.y) { - xy.y -= pickerSize.height - 1; - } else { - xy.y += borderBBox.height - 1; - } - if (this.sourceBlock_.RTL) { - xy.x += borderBBox.width; - xy.x -= pickerSize.width; - // Don't go offscreen left. - if (xy.x < scrollOffset.x) { - xy.x = scrollOffset.x; - } - } else { - // Don't go offscreen right. - if (xy.x > windowSize.width + scrollOffset.x - pickerSize.width) { - xy.x = windowSize.width + scrollOffset.x - pickerSize.width; - } - } - Blockly.WidgetDiv.position(xy.x, xy.y, windowSize, scrollOffset, - this.sourceBlock_.RTL); + // Position the picker to line up with the field. + Blockly.WidgetDiv.positionWithAnchor(viewportBBox, anchorBBox, pickerSize, + this.sourceBlock_.RTL); // Configure event handler. var thisField = this; diff --git a/core/field_dropdown.js b/core/field_dropdown.js index 96dcf52cf..75a6adb94 100644 --- a/core/field_dropdown.js +++ b/core/field_dropdown.js @@ -29,6 +29,9 @@ goog.provide('Blockly.FieldDropdown'); goog.require('Blockly.Field'); +goog.require('Blockly.utils'); +goog.require('Blockly.utils.uiMenu'); + goog.require('goog.dom'); goog.require('goog.events'); goog.require('goog.style'); @@ -231,44 +234,23 @@ Blockly.FieldDropdown.prototype.createMenu_ = function() { * @private */ Blockly.FieldDropdown.prototype.positionMenu_ = function(menu) { - // Record windowSize and scrollOffset before adding menu. - var windowSize = goog.dom.getViewportSize(); - var scrollOffset = goog.style.getViewportPageOffset(document); - var xy = this.getAbsoluteXY_(); - var borderBBox = this.getScaledBBox_(); + // Record viewport dimensions before adding the dropdown. + var viewportBBox = Blockly.utils.getViewportBBox(); + var anchorBBox = this.getAnchorDimensions_(); this.createWidget_(menu); - var menuDom = menu.getElement(); - // Record menuSize after adding menu. - var menuSize = goog.style.getSize(menuDom); - // Recalculate height for the total content, not only box height. - menuSize.height = menuDom.scrollHeight; + var menuSize = Blockly.utils.uiMenu.getSize(menu); - // Position the menu. - // Flip menu vertically if off the bottom. - if (xy.y + menuSize.height + borderBBox.height >= - windowSize.height + scrollOffset.y) { - xy.y -= menuSize.height + 2; - } else { - xy.y += borderBBox.height; - } if (this.sourceBlock_.RTL) { - xy.x += borderBBox.width; - xy.x += Blockly.FieldDropdown.CHECKMARK_OVERHANG; - // Don't go offscreen left. - if (xy.x < scrollOffset.x + menuSize.width) { - xy.x = scrollOffset.x + menuSize.width; - } - } else { - xy.x -= Blockly.FieldDropdown.CHECKMARK_OVERHANG; - // Don't go offscreen right. - if (xy.x > windowSize.width + scrollOffset.x - menuSize.width) { - xy.x = windowSize.width + scrollOffset.x - menuSize.width; - } + Blockly.utils.uiMenu.adjustBBoxesForRTL(viewportBBox, anchorBBox, menuSize); } - Blockly.WidgetDiv.position(xy.x, xy.y, windowSize, scrollOffset, - this.sourceBlock_.RTL); - menuDom.focus(); + // Position the menu. + Blockly.WidgetDiv.positionWithAnchor(viewportBBox, anchorBBox, menuSize, + this.sourceBlock_.RTL); + // Calling menuDom.focus() has to wait until after the menu has been placed + // correctly. Otherwise it will cause a page scroll to get the misplaced menu + // in view. See issue #1329. + menu.getElement().focus(); }; /** @@ -284,6 +266,27 @@ Blockly.FieldDropdown.prototype.createWidget_ = function(menu) { menu.setAllowAutoFocus(true); }; +/** + * Returns the coordinates of the anchor rectangle for the widget div. + * On a FieldDropdown we take the top-left corner of the field, then adjust for + * the size of the checkmark that is displayed next to the currently selected + * item. This means that the item text will be positioned directly under the + * field text, rather than offset slightly. + * @returns {!Object} The bounding rectangle of the anchor, in window + * coordinates. + * @private + */ +Blockly.FieldDropdown.prototype.getAnchorDimensions_ = function() { + var boundingBox = this.getScaledBBox_(); + if (this.sourceBlock_.RTL) { + boundingBox.right += Blockly.FieldDropdown.CHECKMARK_OVERHANG; + } else { + boundingBox.left -= Blockly.FieldDropdown.CHECKMARK_OVERHANG; + } + + return boundingBox; +}; + /** * Handle the selection of an item in the dropdown menu. * @param {!goog.ui.Menu} menu The Menu component clicked. diff --git a/core/ui_menu_utils.js b/core/ui_menu_utils.js new file mode 100644 index 000000000..740873b33 --- /dev/null +++ b/core/ui_menu_utils.js @@ -0,0 +1,67 @@ +/** + * @license + * Visual Blocks Editor + * + * Copyright 2017 Google Inc. + * https://developers.google.com/blockly/ + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * @fileoverview Utility methods for working with the closure menu (goog.ui.menu). + * @author fenichel@google.com (Rachel Fenichel) + */ +'use strict'; + +/** + * @name Blockly.utils.uiMenu + * @namespace + **/ +goog.provide('Blockly.utils.uiMenu'); + +/** + * Get the size of a rendered goog.ui.Menu. + * @param {!goog.ui.Menu} menu The menu to measure. + * @return {!goog.math.Size} Object with width and height properties. + * @package + */ +Blockly.utils.uiMenu.getSize = function(menu) { + var menuDom = menu.getElement(); + var menuSize = goog.style.getSize(menuDom); + // Recalculate height for the total content, not only box height. + menuSize.height = menuDom.scrollHeight; + return menuSize; +}; + +/** + * Adjust the bounding boxes used to position the widget div to deal with RTL + * goog.ui.Menu positioning. In RTL mode the menu renders down and to the left + * of its start point, instead of down and to the right. Adjusting all of the + * bounding boxes accordingly allows us to use the same code for all widgets. + * This function in-place modifies the provided bounding boxes. + * @param {!Object} viewportBBox The bounding rectangle of the current viewport, + * in window coordinates. + * @param {!Object} anchorBBox The bounding rectangle of the anchor, in window + * coordinates. + * @param {!goog.math.Size} menuSize The size of the menu that is inside the + * widget div, in window coordinates. + * @package + */ +Blockly.utils.uiMenu.adjustBBoxesForRTL = function(viewportBBox, anchorBBox, + menuSize) { + anchorBBox.left += menuSize.width; + anchorBBox.right += menuSize.width; + viewportBBox.left += menuSize.width; + viewportBBox.right += menuSize.width; +}; diff --git a/core/utils.js b/core/utils.js index 73a2411d2..62c150ea3 100644 --- a/core/utils.js +++ b/core/utils.js @@ -917,3 +917,24 @@ Blockly.utils.setCssTransform = function(node, transform) { node.style['transform'] = transform; node.style['-webkit-transform'] = transform; }; + +/** + * Get the position of the current viewport in window coordinates. This takes + * scroll into account. + * @return {!Object} an object containing window width, height, and scroll + * position in window coordinates. + * @package + */ +Blockly.utils.getViewportBBox = function() { + // Pixels. + var windowSize = goog.dom.getViewportSize(); + // Pixels, in window coordinates. + var scrollOffset = goog.style.getViewportPageOffset(document); + return { + right: windowSize.width + scrollOffset.x, + bottom: windowSize.height + scrollOffset.y, + top: scrollOffset.y, + left: scrollOffset.x + }; +}; + diff --git a/core/widgetdiv.js b/core/widgetdiv.js index c2a9a6537..005690a0c 100644 --- a/core/widgetdiv.js +++ b/core/widgetdiv.js @@ -127,8 +127,8 @@ Blockly.WidgetDiv.hideIfOwner = function(oldOwner) { /** * Position the widget at a given location. Prevent the widget from going * offscreen top or left (right in RTL). - * @param {number} anchorX Horizontal location (window coorditates, not body). - * @param {number} anchorY Vertical location (window coorditates, not body). + * @param {number} anchorX Horizontal location (window coordinates, not body). + * @param {number} anchorY Vertical location (window coordinates, not body). * @param {!goog.math.Size} windowSize Height/width of window. * @param {!goog.math.Coordinate} scrollOffset X/y of window scrollbars. * @param {boolean} rtl True if RTL, false if LTR. @@ -150,7 +150,103 @@ Blockly.WidgetDiv.position = function(anchorX, anchorY, windowSize, anchorX = scrollOffset.x; } } - Blockly.WidgetDiv.DIV.style.left = anchorX + 'px'; - Blockly.WidgetDiv.DIV.style.top = anchorY + 'px'; - Blockly.WidgetDiv.DIV.style.height = windowSize.height + 'px'; + Blockly.WidgetDiv.positionInternal_(anchorX, anchorY, windowSize.height); +}; + +/** + * Set the widget div's position and height. This function does nothing clever: + * it will not ensure that your widget div ends up in the visible window. + * @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'; +}; + +/** + * Position the widget div based on an anchor rectangle. + * 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 {!Object} viewportBBox The bounding rectangle of the current viewport, + * in window coordinates. + * @param {!Object} anchorBBox The bounding rectangle of the anchor, in window + * coordinates. + * @param {!goog.math.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); + + Blockly.WidgetDiv.positionInternal_(x, y, widgetSize.height); +}; + +/** + * Calculate an x position (in window coordinates) such that the widget will not + * be offscreen on the right or left. + * @param {!Object} viewportBBox The bounding rectangle of the current viewport, + * in window coordinates. + * @param {!Object} anchorBBox The bounding rectangle of the anchor, in window + * coordinates. + * @param {goog.math.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) { + if (rtl) { + // Try to align the right side of the field and the right side of the widget. + var widgetLeft = anchorBBox.right - widgetSize.width; + // Don't go offscreen left. + var 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 the widget. + // Don't go offscreen right. + var 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); + } +}; + +/** + * Calculate a y position (in window coordinates) such that the widget will not + * be offscreen on the top or bottom. + * @param {!Object} viewportBBox The bounding rectangle of the current viewport, + * in window coordinates. + * @param {!Object} anchorBBox The bounding rectangle of the anchor, in window + * coordinates. + * @param {goog.math.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) { + // 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. + return anchorBBox.top - widgetSize.height; + // The widget could go off the top of the window, but it would also go off + // the bottom. The window is just too small. + } else { + // The top of the widget is at the bottom of the field. + return anchorBBox.bottom; + } };