diff --git a/core/flyout_vertical.js b/core/flyout_vertical.js index a09b3fb8e..2091d1321 100644 --- a/core/flyout_vertical.js +++ b/core/flyout_vertical.js @@ -10,43 +10,45 @@ */ 'use strict'; -goog.provide('Blockly.VerticalFlyout'); +goog.module('Blockly.VerticalFlyout'); +goog.module.declareLegacyNamespace(); +/* eslint-disable-next-line no-unused-vars */ +const Coordinate = goog.requireType('Blockly.utils.Coordinate'); +const DropDownDiv = goog.require('Blockly.DropDownDiv'); +const Flyout = goog.require('Blockly.Flyout'); +/* eslint-disable-next-line no-unused-vars */ +const Options = goog.requireType('Blockly.Options'); +const Rect = goog.require('Blockly.utils.Rect'); +const Scrollbar = goog.require('Blockly.Scrollbar'); +const WidgetDiv = goog.require('Blockly.WidgetDiv'); +const registry = goog.require('Blockly.registry'); +const {Position} = goog.require('Blockly.utils.toolbox'); +const {getScrollDeltaPixels} = goog.require('Blockly.utils'); +const {inherits} = goog.require('Blockly.utils.object'); /** @suppress {extraRequire} */ goog.require('Blockly.Block'); /** @suppress {extraRequire} */ goog.require('Blockly.constants'); -goog.require('Blockly.DropDownDiv'); -goog.require('Blockly.Flyout'); -goog.require('Blockly.registry'); -goog.require('Blockly.Scrollbar'); -goog.require('Blockly.utils'); -goog.require('Blockly.utils.object'); -goog.require('Blockly.utils.Rect'); -goog.require('Blockly.utils.toolbox'); -goog.require('Blockly.WidgetDiv'); - -goog.requireType('Blockly.Options'); -goog.requireType('Blockly.utils.Coordinate'); /** * Class for a flyout. - * @param {!Blockly.Options} workspaceOptions Dictionary of options for the + * @param {!Options} workspaceOptions Dictionary of options for the * workspace. - * @extends {Blockly.Flyout} + * @extends {Flyout} * @constructor */ -Blockly.VerticalFlyout = function(workspaceOptions) { - Blockly.VerticalFlyout.superClass_.constructor.call(this, workspaceOptions); +const VerticalFlyout = function(workspaceOptions) { + VerticalFlyout.superClass_.constructor.call(this, workspaceOptions); }; -Blockly.utils.object.inherits(Blockly.VerticalFlyout, Blockly.Flyout); +inherits(VerticalFlyout, Flyout); /** * The name of the vertical flyout in the registry. * @type {string} */ -Blockly.VerticalFlyout.registryName = 'verticalFlyout'; +VerticalFlyout.registryName = 'verticalFlyout'; /** * Sets the translation of the flyout to match the scrollbars. @@ -55,21 +57,22 @@ Blockly.VerticalFlyout.registryName = 'verticalFlyout'; * similar x property. * @protected */ -Blockly.VerticalFlyout.prototype.setMetrics_ = function(xyRatio) { +VerticalFlyout.prototype.setMetrics_ = function(xyRatio) { if (!this.isVisible()) { return; } - var metricsManager = this.workspace_.getMetricsManager(); - var scrollMetrics = metricsManager.getScrollMetrics(); - var viewMetrics = metricsManager.getViewMetrics(); - var absoluteMetrics = metricsManager.getAbsoluteMetrics(); + const metricsManager = this.workspace_.getMetricsManager(); + const scrollMetrics = metricsManager.getScrollMetrics(); + const viewMetrics = metricsManager.getViewMetrics(); + const absoluteMetrics = metricsManager.getAbsoluteMetrics(); if (typeof xyRatio.y == 'number') { this.workspace_.scrollY = -(scrollMetrics.top + - (scrollMetrics.height - viewMetrics.height) * xyRatio.y); + (scrollMetrics.height - viewMetrics.height) * xyRatio.y); } - this.workspace_.translate(this.workspace_.scrollX + absoluteMetrics.left, + this.workspace_.translate( + this.workspace_.scrollX + absoluteMetrics.left, this.workspace_.scrollY + absoluteMetrics.top); }; @@ -77,28 +80,28 @@ Blockly.VerticalFlyout.prototype.setMetrics_ = function(xyRatio) { * Calculates the x coordinate for the flyout position. * @return {number} X coordinate. */ -Blockly.VerticalFlyout.prototype.getX = function() { +VerticalFlyout.prototype.getX = function() { if (!this.isVisible()) { return 0; } - var metricsManager = this.targetWorkspace.getMetricsManager(); - var absoluteMetrics = metricsManager.getAbsoluteMetrics(); - var viewMetrics = metricsManager.getViewMetrics(); - var toolboxMetrics = metricsManager.getToolboxMetrics(); - var x = 0; + const metricsManager = this.targetWorkspace.getMetricsManager(); + const absoluteMetrics = metricsManager.getAbsoluteMetrics(); + const viewMetrics = metricsManager.getViewMetrics(); + const toolboxMetrics = metricsManager.getToolboxMetrics(); + let x = 0; // If this flyout is not the trashcan flyout (e.g. toolbox or mutator). if (this.targetWorkspace.toolboxPosition == this.toolboxPosition_) { // If there is a category toolbox. if (this.targetWorkspace.getToolbox()) { - if (this.toolboxPosition_ == Blockly.utils.toolbox.Position.LEFT) { + if (this.toolboxPosition_ == Position.LEFT) { x = toolboxMetrics.width; } else { x = viewMetrics.width - this.width_; } // Simple (flyout-only) toolbox. } else { - if (this.toolboxPosition_ == Blockly.utils.toolbox.Position.LEFT) { + if (this.toolboxPosition_ == Position.LEFT) { x = 0; } else { // The simple flyout does not cover the workspace. @@ -107,7 +110,7 @@ Blockly.VerticalFlyout.prototype.getX = function() { } // Trashcan flyout is opposite the main flyout. } else { - if (this.toolboxPosition_ == Blockly.utils.toolbox.Position.LEFT) { + if (this.toolboxPosition_ == Position.LEFT) { x = 0; } else { // Because the anchor point of the flyout is on the left, but we want @@ -125,7 +128,7 @@ Blockly.VerticalFlyout.prototype.getX = function() { * Calculates the y coordinate for the flyout position. * @return {number} Y coordinate. */ -Blockly.VerticalFlyout.prototype.getY = function() { +VerticalFlyout.prototype.getY = function() { // Y is always 0 since this is a vertical flyout. return 0; }; @@ -133,22 +136,22 @@ Blockly.VerticalFlyout.prototype.getY = function() { /** * Move the flyout to the edge of the workspace. */ -Blockly.VerticalFlyout.prototype.position = function() { +VerticalFlyout.prototype.position = function() { if (!this.isVisible() || !this.targetWorkspace.isVisible()) { return; } - var metricsManager = this.targetWorkspace.getMetricsManager(); - var targetWorkspaceViewMetrics = metricsManager.getViewMetrics(); + const metricsManager = this.targetWorkspace.getMetricsManager(); + const targetWorkspaceViewMetrics = metricsManager.getViewMetrics(); // Record the height for workspace metrics. this.height_ = targetWorkspaceViewMetrics.height; - var edgeWidth = this.width_ - this.CORNER_RADIUS; - var edgeHeight = targetWorkspaceViewMetrics.height - 2 * this.CORNER_RADIUS; + const edgeWidth = this.width_ - this.CORNER_RADIUS; + const edgeHeight = targetWorkspaceViewMetrics.height - 2 * this.CORNER_RADIUS; this.setBackgroundPath_(edgeWidth, edgeHeight); - var x = this.getX(); - var y = this.getY(); + const x = this.getX(); + const y = this.getY(); this.positionAt_(this.width_, this.height_, x, y); }; @@ -161,26 +164,24 @@ Blockly.VerticalFlyout.prototype.position = function() { * rounded corners. * @private */ -Blockly.VerticalFlyout.prototype.setBackgroundPath_ = function(width, height) { - var atRight = this.toolboxPosition_ == Blockly.utils.toolbox.Position.RIGHT; - var totalWidth = width + this.CORNER_RADIUS; +VerticalFlyout.prototype.setBackgroundPath_ = function(width, height) { + const atRight = this.toolboxPosition_ == Position.RIGHT; + const totalWidth = width + this.CORNER_RADIUS; // Decide whether to start on the left or right. - var path = ['M ' + (atRight ? totalWidth : 0) + ',0']; + const path = ['M ' + (atRight ? totalWidth : 0) + ',0']; // Top. path.push('h', atRight ? -width : width); // Rounded corner. - path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, - atRight ? 0 : 1, - atRight ? -this.CORNER_RADIUS : this.CORNER_RADIUS, - this.CORNER_RADIUS); + path.push( + 'a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, atRight ? 0 : 1, + atRight ? -this.CORNER_RADIUS : this.CORNER_RADIUS, this.CORNER_RADIUS); // Side closest to workspace. path.push('v', Math.max(0, height)); // Rounded corner. - path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, - atRight ? 0 : 1, - atRight ? this.CORNER_RADIUS : -this.CORNER_RADIUS, - this.CORNER_RADIUS); + path.push( + 'a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, atRight ? 0 : 1, + atRight ? this.CORNER_RADIUS : -this.CORNER_RADIUS, this.CORNER_RADIUS); // Bottom. path.push('h', atRight ? width : -width); path.push('z'); @@ -190,7 +191,7 @@ Blockly.VerticalFlyout.prototype.setBackgroundPath_ = function(width, height) { /** * Scroll the flyout to the top. */ -Blockly.VerticalFlyout.prototype.scrollToStart = function() { +VerticalFlyout.prototype.scrollToStart = function() { this.workspace_.scrollbar.setY(0); }; @@ -199,19 +200,19 @@ Blockly.VerticalFlyout.prototype.scrollToStart = function() { * @param {!Event} e Mouse wheel scroll event. * @protected */ -Blockly.VerticalFlyout.prototype.wheel_ = function(e) { - var scrollDelta = Blockly.utils.getScrollDeltaPixels(e); +VerticalFlyout.prototype.wheel_ = function(e) { + const scrollDelta = getScrollDeltaPixels(e); if (scrollDelta.y) { - var metricsManager = this.workspace_.getMetricsManager(); - var scrollMetrics = metricsManager.getScrollMetrics(); - var viewMetrics = metricsManager.getViewMetrics(); - var pos = (viewMetrics.top - scrollMetrics.top) + scrollDelta.y; + const metricsManager = this.workspace_.getMetricsManager(); + const scrollMetrics = metricsManager.getScrollMetrics(); + const viewMetrics = metricsManager.getViewMetrics(); + const pos = (viewMetrics.top - scrollMetrics.top) + scrollDelta.y; this.workspace_.scrollbar.setY(pos); // When the flyout moves from a wheel event, hide WidgetDiv and DropDownDiv. - Blockly.WidgetDiv.hide(); - Blockly.DropDownDiv.hideWithoutAnimation(); + WidgetDiv.hide(); + DropDownDiv.hideWithoutAnimation(); } // Don't scroll the page. @@ -226,30 +227,30 @@ Blockly.VerticalFlyout.prototype.wheel_ = function(e) { * @param {!Array} gaps The visible gaps between blocks. * @protected */ -Blockly.VerticalFlyout.prototype.layout_ = function(contents, gaps) { +VerticalFlyout.prototype.layout_ = function(contents, gaps) { this.workspace_.scale = this.targetWorkspace.scale; - var margin = this.MARGIN; - var cursorX = this.RTL ? margin : margin + this.tabWidth_; - var cursorY = margin; + const margin = this.MARGIN; + const cursorX = this.RTL ? margin : margin + this.tabWidth_; + let cursorY = margin; - for (var i = 0, item; (item = contents[i]); i++) { + for (let i = 0, item; (item = contents[i]); i++) { if (item.type == 'block') { - var block = item.block; - var allBlocks = block.getDescendants(false); - for (var j = 0, child; (child = allBlocks[j]); j++) { + const block = item.block; + const allBlocks = block.getDescendants(false); + for (let j = 0, child; (child = allBlocks[j]); j++) { // Mark blocks as being inside a flyout. This is used to detect and // prevent the closure of the flyout if the user right-clicks on such a // block. child.isInFlyout = true; } block.render(); - var root = block.getSvgRoot(); - var blockHW = block.getHeightWidth(); - var moveX = block.outputConnection ? cursorX - this.tabWidth_ : cursorX; + const root = block.getSvgRoot(); + const blockHW = block.getHeightWidth(); + const moveX = block.outputConnection ? cursorX - this.tabWidth_ : cursorX; block.moveBy(moveX, cursorY); - var rect = this.createRect_(block, - this.RTL ? moveX - blockHW.width : moveX, cursorY, blockHW, i); + const rect = this.createRect_( + block, this.RTL ? moveX - blockHW.width : moveX, cursorY, blockHW, i); this.addBlockListeners_(root, block, rect); @@ -265,19 +266,18 @@ Blockly.VerticalFlyout.prototype.layout_ = function(contents, gaps) { * Determine if a drag delta is toward the workspace, based on the position * and orientation of the flyout. This is used in determineDragIntention_ to * determine if a new block should be created or if the flyout should scroll. - * @param {!Blockly.utils.Coordinate} currentDragDeltaXY How far the pointer has + * @param {!Coordinate} currentDragDeltaXY How far the pointer has * moved from the position at mouse down, in pixel units. * @return {boolean} True if the drag is toward the workspace. * @package */ -Blockly.VerticalFlyout.prototype.isDragTowardWorkspace = function( - currentDragDeltaXY) { - var dx = currentDragDeltaXY.x; - var dy = currentDragDeltaXY.y; +VerticalFlyout.prototype.isDragTowardWorkspace = function(currentDragDeltaXY) { + const dx = currentDragDeltaXY.x; + const dy = currentDragDeltaXY.y; // Direction goes from -180 to 180, with 0 toward the right and 90 on top. - var dragDirection = Math.atan2(dy, dx) / Math.PI * 180; + const dragDirection = Math.atan2(dy, dx) / Math.PI * 180; - var range = this.dragAngleRange_; + const range = this.dragAngleRange_; // Check for left or right dragging. if ((dragDirection < range && dragDirection > -range) || (dragDirection < -180 + range || dragDirection > 180 - range)) { @@ -289,28 +289,28 @@ Blockly.VerticalFlyout.prototype.isDragTowardWorkspace = function( /** * Returns the bounding rectangle of the drag target area in pixel units * relative to viewport. - * @return {?Blockly.utils.Rect} The component's bounding box. Null if drag + * @return {?Rect} The component's bounding box. Null if drag * target area should be ignored. */ -Blockly.VerticalFlyout.prototype.getClientRect = function() { +VerticalFlyout.prototype.getClientRect = function() { if (!this.svgGroup_ || this.autoClose || !this.isVisible()) { // The bounding rectangle won't compute correctly if the flyout is closed // and auto-close flyouts aren't valid drag targets (or delete areas). return null; } - var flyoutRect = this.svgGroup_.getBoundingClientRect(); + const flyoutRect = this.svgGroup_.getBoundingClientRect(); // BIG_NUM is offscreen padding so that blocks dragged beyond the shown flyout // area are still deleted. Must be larger than the largest screen size, // but be smaller than half Number.MAX_SAFE_INTEGER (not available on IE). - var BIG_NUM = 1000000000; - var left = flyoutRect.left; + const BIG_NUM = 1000000000; + const left = flyoutRect.left; - if (this.toolboxPosition_ == Blockly.utils.toolbox.Position.LEFT) { - var width = flyoutRect.width; - return new Blockly.utils.Rect(-BIG_NUM, BIG_NUM, -BIG_NUM, left + width); + if (this.toolboxPosition_ == Position.LEFT) { + const width = flyoutRect.width; + return new Rect(-BIG_NUM, BIG_NUM, -BIG_NUM, left + width); } else { // Right - return new Blockly.utils.Rect(-BIG_NUM, BIG_NUM, left, BIG_NUM); + return new Rect(-BIG_NUM, BIG_NUM, left, BIG_NUM); } }; @@ -319,30 +319,30 @@ Blockly.VerticalFlyout.prototype.getClientRect = function() { * For RTL: Lay out the blocks and buttons to be right-aligned. * @protected */ -Blockly.VerticalFlyout.prototype.reflowInternal_ = function() { +VerticalFlyout.prototype.reflowInternal_ = function() { this.workspace_.scale = this.getFlyoutScale(); - var flyoutWidth = 0; - var blocks = this.workspace_.getTopBlocks(false); - for (var i = 0, block; (block = blocks[i]); i++) { - var width = block.getHeightWidth().width; + let flyoutWidth = 0; + const blocks = this.workspace_.getTopBlocks(false); + for (let i = 0, block; (block = blocks[i]); i++) { + let width = block.getHeightWidth().width; if (block.outputConnection) { width -= this.tabWidth_; } flyoutWidth = Math.max(flyoutWidth, width); } - for (var i = 0, button; (button = this.buttons_[i]); i++) { + for (let i = 0, button; (button = this.buttons_[i]); i++) { flyoutWidth = Math.max(flyoutWidth, button.width); } flyoutWidth += this.MARGIN * 1.5 + this.tabWidth_; flyoutWidth *= this.workspace_.scale; - flyoutWidth += Blockly.Scrollbar.scrollbarThickness; + flyoutWidth += Scrollbar.scrollbarThickness; if (this.width_ != flyoutWidth) { - for (var i = 0, block; (block = blocks[i]); i++) { + for (let i = 0, block; (block = blocks[i]); i++) { if (this.RTL) { // With the flyoutWidth known, right-align the blocks. - var oldX = block.getRelativeToSurfaceXY().x; - var newX = flyoutWidth / this.workspace_.scale - this.MARGIN; + const oldX = block.getRelativeToSurfaceXY().x; + let newX = flyoutWidth / this.workspace_.scale - this.MARGIN; if (!block.outputConnection) { newX -= this.tabWidth_; } @@ -354,22 +354,23 @@ Blockly.VerticalFlyout.prototype.reflowInternal_ = function() { } if (this.RTL) { // With the flyoutWidth known, right-align the buttons. - for (var i = 0, button; (button = this.buttons_[i]); i++) { - var y = button.getPosition().y; - var x = flyoutWidth / this.workspace_.scale - button.width - + for (let i = 0, button; (button = this.buttons_[i]); i++) { + const y = button.getPosition().y; + const x = flyoutWidth / this.workspace_.scale - button.width - this.MARGIN - this.tabWidth_; button.moveTo(x, y); } } if (this.targetWorkspace.toolboxPosition == this.toolboxPosition_ && - this.toolboxPosition_ == Blockly.utils.toolbox.Position.LEFT && + this.toolboxPosition_ == Position.LEFT && !this.targetWorkspace.getToolbox()) { // This flyout is a simple toolbox. Reposition the workspace so that (0,0) // is in the correct position relative to the new absolute edge (ie // toolbox edge). this.targetWorkspace.translate( - this.targetWorkspace.scrollX + flyoutWidth, this.targetWorkspace.scrollY); + this.targetWorkspace.scrollX + flyoutWidth, + this.targetWorkspace.scrollY); } // Record the width for workspace metrics and .position. @@ -379,5 +380,7 @@ Blockly.VerticalFlyout.prototype.reflowInternal_ = function() { } }; -Blockly.registry.register(Blockly.registry.Type.FLYOUTS_VERTICAL_TOOLBOX, - Blockly.registry.DEFAULT, Blockly.VerticalFlyout); +registry.register( + registry.Type.FLYOUTS_VERTICAL_TOOLBOX, registry.DEFAULT, VerticalFlyout); + +exports = VerticalFlyout; diff --git a/tests/deps.js b/tests/deps.js index a8a8146bc..8c37fdc45 100644 --- a/tests/deps.js +++ b/tests/deps.js @@ -64,7 +64,7 @@ goog.addDependency('../../core/field_variable.js', ['Blockly.FieldVariable'], [' goog.addDependency('../../core/flyout_base.js', ['Blockly.Flyout'], ['Blockly.Block', 'Blockly.ComponentManager', 'Blockly.DeleteArea', 'Blockly.Events', 'Blockly.Events.BlockCreate', 'Blockly.Events.VarCreate', 'Blockly.FlyoutMetricsManager', 'Blockly.Gesture', 'Blockly.IFlyout', 'Blockly.ScrollbarPair', 'Blockly.Tooltip', 'Blockly.Touch', 'Blockly.WorkspaceSvg', 'Blockly.Xml', 'Blockly.blockRendering', 'Blockly.browserEvents', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.Svg', 'Blockly.utils.dom', 'Blockly.utils.toolbox', 'Blockly.utils.xml']); goog.addDependency('../../core/flyout_button.js', ['Blockly.FlyoutButton'], ['Blockly.Css', 'Blockly.browserEvents', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.Svg', 'Blockly.utils.dom', 'Blockly.utils.style'], {'lang': 'es5'}); goog.addDependency('../../core/flyout_horizontal.js', ['Blockly.HorizontalFlyout'], ['Blockly.DropDownDiv', 'Blockly.Flyout', 'Blockly.Scrollbar', 'Blockly.WidgetDiv', 'Blockly.registry', 'Blockly.utils', 'Blockly.utils.Rect', 'Blockly.utils.object', 'Blockly.utils.toolbox'], {'lang': 'es6', 'module': 'goog'}); -goog.addDependency('../../core/flyout_vertical.js', ['Blockly.VerticalFlyout'], ['Blockly.Block', 'Blockly.DropDownDiv', 'Blockly.Flyout', 'Blockly.Scrollbar', 'Blockly.WidgetDiv', 'Blockly.constants', 'Blockly.registry', 'Blockly.utils', 'Blockly.utils.Rect', 'Blockly.utils.object', 'Blockly.utils.toolbox']); +goog.addDependency('../../core/flyout_vertical.js', ['Blockly.VerticalFlyout'], ['Blockly.Block', 'Blockly.DropDownDiv', 'Blockly.Flyout', 'Blockly.Scrollbar', 'Blockly.WidgetDiv', 'Blockly.constants', 'Blockly.registry', 'Blockly.utils', 'Blockly.utils.Rect', 'Blockly.utils.object', 'Blockly.utils.toolbox'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/generator.js', ['Blockly.Generator'], ['Blockly', 'Blockly.internalConstants', 'Blockly.utils.deprecation'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/gesture.js', ['Blockly.Gesture'], ['Blockly.BlockDragger', 'Blockly.BubbleDragger', 'Blockly.Events', 'Blockly.Events.Click', 'Blockly.Tooltip', 'Blockly.Touch', 'Blockly.Workspace', 'Blockly.WorkspaceDragger', 'Blockly.blockAnimations', 'Blockly.browserEvents', 'Blockly.internalConstants', 'Blockly.utils', 'Blockly.utils.Coordinate']); goog.addDependency('../../core/grid.js', ['Blockly.Grid'], ['Blockly.utils.Svg', 'Blockly.utils.dom', 'Blockly.utils.userAgent'], {'lang': 'es6', 'module': 'goog'});