diff --git a/core/flyout_horizontal.js b/core/flyout_horizontal.js index 66e9ff18e..7f1ad72fd 100644 --- a/core/flyout_horizontal.js +++ b/core/flyout_horizontal.js @@ -10,36 +10,36 @@ */ 'use strict'; -goog.provide('Blockly.HorizontalFlyout'); +goog.module('Blockly.HorizontalFlyout'); +goog.module.declareLegacyNamespace(); -/** @suppress {extraRequire} */ -goog.require('Blockly.Block'); -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'); +/* 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'); /** * 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.HorizontalFlyout = function(workspaceOptions) { - Blockly.HorizontalFlyout.superClass_.constructor.call(this, workspaceOptions); +const HorizontalFlyout = function(workspaceOptions) { + HorizontalFlyout.superClass_.constructor.call(this, workspaceOptions); this.horizontalLayout = true; }; -Blockly.utils.object.inherits(Blockly.HorizontalFlyout, Blockly.Flyout); +inherits(HorizontalFlyout, Flyout); /** * Sets the translation of the flyout to match the scrollbars. @@ -48,23 +48,24 @@ Blockly.utils.object.inherits(Blockly.HorizontalFlyout, Blockly.Flyout); * similar x property. * @protected */ -Blockly.HorizontalFlyout.prototype.setMetrics_ = function(xyRatio) { +HorizontalFlyout.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.x == 'number') { this.workspace_.scrollX = -(scrollMetrics.left + - (scrollMetrics.width - viewMetrics.width) * xyRatio.x); + (scrollMetrics.width - viewMetrics.width) * xyRatio.x); } - this.workspace_.translate(this.workspace_.scrollX + absoluteMetrics.left, + this.workspace_.translate( + this.workspace_.scrollX + absoluteMetrics.left, this.workspace_.scrollY + absoluteMetrics.top); }; @@ -72,7 +73,7 @@ Blockly.HorizontalFlyout.prototype.setMetrics_ = function(xyRatio) { * Calculates the x coordinate for the flyout position. * @return {number} X coordinate. */ -Blockly.HorizontalFlyout.prototype.getX = function() { +HorizontalFlyout.prototype.getX = function() { // X is always 0 since this is a horizontal flyout. return 0; }; @@ -81,17 +82,17 @@ Blockly.HorizontalFlyout.prototype.getX = function() { * Calculates the y coordinate for the flyout position. * @return {number} Y coordinate. */ -Blockly.HorizontalFlyout.prototype.getY = function() { +HorizontalFlyout.prototype.getY = function() { if (!this.isVisible()) { return 0; } - var metricsManager = this.targetWorkspace.getMetricsManager(); - var absoluteMetrics = metricsManager.getAbsoluteMetrics(); - var viewMetrics = metricsManager.getViewMetrics(); - var toolboxMetrics = metricsManager.getToolboxMetrics(); + const metricsManager = this.targetWorkspace.getMetricsManager(); + const absoluteMetrics = metricsManager.getAbsoluteMetrics(); + const viewMetrics = metricsManager.getViewMetrics(); + const toolboxMetrics = metricsManager.getToolboxMetrics(); - var y = 0; - var atTop = this.toolboxPosition_ == Blockly.utils.toolbox.Position.TOP; + let y = 0; + const atTop = this.toolboxPosition_ == Position.TOP; // 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. @@ -129,22 +130,22 @@ Blockly.HorizontalFlyout.prototype.getY = function() { /** * Move the flyout to the edge of the workspace. */ -Blockly.HorizontalFlyout.prototype.position = function() { +HorizontalFlyout.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 width for workspace metrics. this.width_ = targetWorkspaceViewMetrics.width; - var edgeWidth = targetWorkspaceViewMetrics.width - 2 * this.CORNER_RADIUS; - var edgeHeight = this.height_ - this.CORNER_RADIUS; + const edgeWidth = targetWorkspaceViewMetrics.width - 2 * this.CORNER_RADIUS; + const edgeHeight = this.height_ - 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); }; @@ -157,11 +158,10 @@ Blockly.HorizontalFlyout.prototype.position = function() { * rounded corners. * @private */ -Blockly.HorizontalFlyout.prototype.setBackgroundPath_ = function( - width, height) { - var atTop = this.toolboxPosition_ == Blockly.utils.toolbox.Position.TOP; +HorizontalFlyout.prototype.setBackgroundPath_ = function(width, height) { + const atTop = this.toolboxPosition_ == Position.TOP; // Start at top left. - var path = ['M 0,' + (atTop ? 0 : this.CORNER_RADIUS)]; + const path = ['M 0,' + (atTop ? 0 : this.CORNER_RADIUS)]; if (atTop) { // Top. @@ -169,20 +169,24 @@ Blockly.HorizontalFlyout.prototype.setBackgroundPath_ = function( // Right. path.push('v', height); // Bottom. - path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, 1, + path.push( + 'a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, 1, -this.CORNER_RADIUS, this.CORNER_RADIUS); path.push('h', -width); // Left. - path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, 1, + path.push( + 'a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, 1, -this.CORNER_RADIUS, -this.CORNER_RADIUS); path.push('z'); } else { // Top. - path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, 1, + path.push( + 'a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, 1, this.CORNER_RADIUS, -this.CORNER_RADIUS); path.push('h', width); // Right. - path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, 1, + path.push( + 'a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, 1, this.CORNER_RADIUS, this.CORNER_RADIUS); path.push('v', height); // Bottom. @@ -196,7 +200,7 @@ Blockly.HorizontalFlyout.prototype.setBackgroundPath_ = function( /** * Scroll the flyout to the top. */ -Blockly.HorizontalFlyout.prototype.scrollToStart = function() { +HorizontalFlyout.prototype.scrollToStart = function() { this.workspace_.scrollbar.setX(this.RTL ? Infinity : 0); }; @@ -205,20 +209,20 @@ Blockly.HorizontalFlyout.prototype.scrollToStart = function() { * @param {!Event} e Mouse wheel scroll event. * @protected */ -Blockly.HorizontalFlyout.prototype.wheel_ = function(e) { - var scrollDelta = Blockly.utils.getScrollDeltaPixels(e); - var delta = scrollDelta.x || scrollDelta.y; +HorizontalFlyout.prototype.wheel_ = function(e) { + const scrollDelta = getScrollDeltaPixels(e); + const delta = scrollDelta.x || scrollDelta.y; if (delta) { - var metricsManager = this.workspace_.getMetricsManager(); - var scrollMetrics = metricsManager.getScrollMetrics(); - var viewMetrics = metricsManager.getViewMetrics(); + const metricsManager = this.workspace_.getMetricsManager(); + const scrollMetrics = metricsManager.getScrollMetrics(); + const viewMetrics = metricsManager.getViewMetrics(); - var pos = (viewMetrics.left - scrollMetrics.left) + delta; + const pos = (viewMetrics.left - scrollMetrics.left) + delta; this.workspace_.scrollbar.setX(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. @@ -233,39 +237,40 @@ Blockly.HorizontalFlyout.prototype.wheel_ = function(e) { * @param {!Array} gaps The visible gaps between blocks. * @protected */ -Blockly.HorizontalFlyout.prototype.layout_ = function(contents, gaps) { +HorizontalFlyout.prototype.layout_ = function(contents, gaps) { this.workspace_.scale = this.targetWorkspace.scale; - var margin = this.MARGIN; - var cursorX = margin + this.tabWidth_; - var cursorY = margin; + const margin = this.MARGIN; + let cursorX = margin + this.tabWidth_; + const cursorY = margin; if (this.RTL) { contents = contents.reverse(); } - 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(); + const root = block.getSvgRoot(); + const blockHW = block.getHeightWidth(); // Figure out where to place the block. - var tab = block.outputConnection ? this.tabWidth_ : 0; + const tab = block.outputConnection ? this.tabWidth_ : 0; + let moveX; if (this.RTL) { - var moveX = cursorX + blockHW.width; + moveX = cursorX + blockHW.width; } else { - var moveX = cursorX - tab; + moveX = cursorX - tab; } block.moveBy(moveX, cursorY); - var rect = this.createRect_(block, moveX, cursorY, blockHW, i); + const rect = this.createRect_(block, moveX, cursorY, blockHW, i); cursorX += (blockHW.width + gaps[i]); this.addBlockListeners_(root, block, rect); @@ -280,19 +285,19 @@ Blockly.HorizontalFlyout.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.HorizontalFlyout.prototype.isDragTowardWorkspace = function( +HorizontalFlyout.prototype.isDragTowardWorkspace = function( currentDragDeltaXY) { - var dx = currentDragDeltaXY.x; - var dy = currentDragDeltaXY.y; + 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 up or down dragging. if ((dragDirection < 90 + range && dragDirection > 90 - range) || (dragDirection > -90 - range && dragDirection < -90 + range)) { @@ -304,28 +309,28 @@ Blockly.HorizontalFlyout.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.HorizontalFlyout.prototype.getClientRect = function() { +HorizontalFlyout.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 top = flyoutRect.top; + const BIG_NUM = 1000000000; + const top = flyoutRect.top; - if (this.toolboxPosition_ == Blockly.utils.toolbox.Position.TOP) { - var height = flyoutRect.height; - return new Blockly.utils.Rect(-BIG_NUM, top + height, -BIG_NUM, BIG_NUM); + if (this.toolboxPosition_ == Position.TOP) { + const height = flyoutRect.height; + return new Rect(-BIG_NUM, top + height, -BIG_NUM, BIG_NUM); } else { // Bottom. - return new Blockly.utils.Rect(top, BIG_NUM, -BIG_NUM, BIG_NUM); + return new Rect(top, BIG_NUM, -BIG_NUM, BIG_NUM); } }; @@ -334,36 +339,37 @@ Blockly.HorizontalFlyout.prototype.getClientRect = function() { * For RTL: Lay out the blocks right-aligned. * @protected */ -Blockly.HorizontalFlyout.prototype.reflowInternal_ = function() { +HorizontalFlyout.prototype.reflowInternal_ = function() { this.workspace_.scale = this.getFlyoutScale(); - var flyoutHeight = 0; - var blocks = this.workspace_.getTopBlocks(false); - for (var i = 0, block; (block = blocks[i]); i++) { + let flyoutHeight = 0; + const blocks = this.workspace_.getTopBlocks(false); + for (let i = 0, block; (block = blocks[i]); i++) { flyoutHeight = Math.max(flyoutHeight, block.getHeightWidth().height); } - var buttons = this.buttons_; - for (var i = 0, button; (button = buttons[i]); i++) { + const buttons = this.buttons_; + for (let i = 0, button; (button = buttons[i]); i++) { flyoutHeight = Math.max(flyoutHeight, button.height); } flyoutHeight += this.MARGIN * 1.5; flyoutHeight *= this.workspace_.scale; - flyoutHeight += Blockly.Scrollbar.scrollbarThickness; + flyoutHeight += Scrollbar.scrollbarThickness; if (this.height_ != flyoutHeight) { - for (var i = 0, block; (block = blocks[i]); i++) { + for (let i = 0, block; (block = blocks[i]); i++) { if (block.flyoutRect_) { this.moveRectToBlock_(block.flyoutRect_, block); } } if (this.targetWorkspace.toolboxPosition == this.toolboxPosition_ && - this.toolboxPosition_ == Blockly.utils.toolbox.Position.TOP && + this.toolboxPosition_ == Position.TOP && !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, this.targetWorkspace.scrollY + flyoutHeight); + this.targetWorkspace.scrollX, + this.targetWorkspace.scrollY + flyoutHeight); } // Record the height for workspace metrics and .position. @@ -373,5 +379,8 @@ Blockly.HorizontalFlyout.prototype.reflowInternal_ = function() { } }; -Blockly.registry.register(Blockly.registry.Type.FLYOUTS_HORIZONTAL_TOOLBOX, - Blockly.registry.DEFAULT, Blockly.HorizontalFlyout); +registry.register( + registry.Type.FLYOUTS_HORIZONTAL_TOOLBOX, registry.DEFAULT, + HorizontalFlyout); + +exports = HorizontalFlyout; diff --git a/tests/deps.js b/tests/deps.js index e3090ff34..49377e285 100644 --- a/tests/deps.js +++ b/tests/deps.js @@ -63,7 +63,7 @@ goog.addDependency('../../core/field_textinput.js', ['Blockly.FieldTextInput'], goog.addDependency('../../core/field_variable.js', ['Blockly.FieldVariable'], ['Blockly.Events.BlockChange', 'Blockly.FieldDropdown', 'Blockly.Msg', 'Blockly.VariableModel', 'Blockly.Variables', 'Blockly.Xml', 'Blockly.fieldRegistry', 'Blockly.internalConstants', 'Blockly.utils', 'Blockly.utils.Size', 'Blockly.utils.object'], {'lang': 'es6', 'module': 'goog'}); 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.Block', 'Blockly.DropDownDiv', 'Blockly.Flyout', 'Blockly.Scrollbar', 'Blockly.WidgetDiv', 'Blockly.registry', 'Blockly.utils', 'Blockly.utils.Rect', 'Blockly.utils.object', 'Blockly.utils.toolbox']); +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/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']);