diff --git a/core/icon.js b/core/icon.js index c5f3477cd..69ff3ef37 100644 --- a/core/icon.js +++ b/core/icon.js @@ -10,29 +10,31 @@ */ 'use strict'; -goog.provide('Blockly.Icon'); +goog.module('Blockly.Icon'); +goog.module.declareLegacyNamespace(); -goog.require('Blockly.browserEvents'); -goog.require('Blockly.utils'); -goog.require('Blockly.utils.Coordinate'); -goog.require('Blockly.utils.dom'); -goog.require('Blockly.utils.Size'); -goog.require('Blockly.utils.Svg'); - -goog.requireType('Blockly.BlockSvg'); -goog.requireType('Blockly.Bubble'); +/* eslint-disable-next-line no-unused-vars */ +const BlockSvg = goog.requireType('Blockly.BlockSvg'); +/* eslint-disable-next-line no-unused-vars */ +const Bubble = goog.requireType('Blockly.Bubble'); +const Coordinate = goog.require('Blockly.utils.Coordinate'); +const Size = goog.require('Blockly.utils.Size'); +const Svg = goog.require('Blockly.utils.Svg'); +const browserEvents = goog.require('Blockly.browserEvents'); +const dom = goog.require('Blockly.utils.dom'); +const {getRelativeXY, isRightButton} = goog.require('Blockly.utils'); /** * Class for an icon. - * @param {Blockly.BlockSvg} block The block associated with this icon. + * @param {BlockSvg} block The block associated with this icon. * @constructor * @abstract */ -Blockly.Icon = function(block) { +const Icon = function(block) { /** * The block this icon is attached to. - * @type {Blockly.BlockSvg} + * @type {BlockSvg} * @protected */ this.block_ = block; @@ -47,31 +49,32 @@ Blockly.Icon = function(block) { /** * Does this icon get hidden when the block is collapsed. */ -Blockly.Icon.prototype.collapseHidden = true; +Icon.prototype.collapseHidden = true; /** * Height and width of icons. + * @const */ -Blockly.Icon.prototype.SIZE = 17; +Icon.prototype.SIZE = 17; /** * Bubble UI (if visible). - * @type {?Blockly.Bubble} + * @type {?Bubble} * @protected */ -Blockly.Icon.prototype.bubble_ = null; +Icon.prototype.bubble_ = null; /** * Absolute coordinate of icon's center. - * @type {?Blockly.utils.Coordinate} + * @type {?Coordinate} * @protected */ -Blockly.Icon.prototype.iconXY_ = null; +Icon.prototype.iconXY_ = null; /** * Create the icon on the block. */ -Blockly.Icon.prototype.createIcon = function() { +Icon.prototype.createIcon = function() { if (this.iconGroup_) { // Icon already exists. return; @@ -81,17 +84,16 @@ Blockly.Icon.prototype.createIcon = function() { ... */ - this.iconGroup_ = Blockly.utils.dom.createSvgElement( - Blockly.utils.Svg.G, - {'class': 'blocklyIconGroup'}, null); + this.iconGroup_ = + dom.createSvgElement(Svg.G, {'class': 'blocklyIconGroup'}, null); if (this.block_.isInFlyout) { - Blockly.utils.dom.addClass( + dom.addClass( /** @type {!Element} */ (this.iconGroup_), 'blocklyIconGroupReadonly'); } this.drawIcon_(this.iconGroup_); this.block_.getSvgRoot().appendChild(this.iconGroup_); - Blockly.browserEvents.conditionalBind( + browserEvents.conditionalBind( this.iconGroup_, 'mouseup', this, this.iconClick_); this.updateEditable(); }; @@ -99,9 +101,9 @@ Blockly.Icon.prototype.createIcon = function() { /** * Dispose of this icon. */ -Blockly.Icon.prototype.dispose = function() { +Icon.prototype.dispose = function() { // Dispose of and unlink the icon. - Blockly.utils.dom.removeNode(this.iconGroup_); + dom.removeNode(this.iconGroup_); this.iconGroup_ = null; // Dispose of and unlink the bubble. this.setVisible(false); @@ -111,7 +113,7 @@ Blockly.Icon.prototype.dispose = function() { /** * Add or remove the UI indicating if this icon may be clicked or not. */ -Blockly.Icon.prototype.updateEditable = function() { +Icon.prototype.updateEditable = function() { // No-op on the base class. }; @@ -119,7 +121,7 @@ Blockly.Icon.prototype.updateEditable = function() { * Is the associated bubble visible? * @return {boolean} True if the bubble is visible. */ -Blockly.Icon.prototype.isVisible = function() { +Icon.prototype.isVisible = function() { return !!this.bubble_; }; @@ -128,12 +130,12 @@ Blockly.Icon.prototype.isVisible = function() { * @param {!Event} e Mouse click event. * @protected */ -Blockly.Icon.prototype.iconClick_ = function(e) { +Icon.prototype.iconClick_ = function(e) { if (this.block_.workspace.isDragging()) { // Drag operation is concluding. Don't open the editor. return; } - if (!this.block_.isInFlyout && !Blockly.utils.isRightButton(e)) { + if (!this.block_.isInFlyout && !isRightButton(e)) { this.setVisible(!this.isVisible()); } }; @@ -141,7 +143,7 @@ Blockly.Icon.prototype.iconClick_ = function(e) { /** * Change the colour of the associated bubble to match its block. */ -Blockly.Icon.prototype.applyColour = function() { +Icon.prototype.applyColour = function() { if (this.isVisible()) { this.bubble_.setColour(this.block_.style.colourPrimary); } @@ -149,9 +151,9 @@ Blockly.Icon.prototype.applyColour = function() { /** * Notification that the icon has moved. Update the arrow accordingly. - * @param {!Blockly.utils.Coordinate} xy Absolute location in workspace coordinates. + * @param {!Coordinate} xy Absolute location in workspace coordinates. */ -Blockly.Icon.prototype.setIconLocation = function(xy) { +Icon.prototype.setIconLocation = function(xy) { this.iconXY_ = xy; if (this.isVisible()) { this.bubble_.setAnchorLocation(xy); @@ -162,25 +164,25 @@ Blockly.Icon.prototype.setIconLocation = function(xy) { * Notification that the icon has moved, but we don't really know where. * Recompute the icon's location from scratch. */ -Blockly.Icon.prototype.computeIconLocation = function() { +Icon.prototype.computeIconLocation = function() { // Find coordinates for the centre of the icon and update the arrow. - var blockXY = this.block_.getRelativeToSurfaceXY(); - var iconXY = Blockly.utils.getRelativeXY( + const blockXY = this.block_.getRelativeToSurfaceXY(); + const iconXY = getRelativeXY( /** @type {!SVGElement} */ (this.iconGroup_)); - var newXY = new Blockly.utils.Coordinate( + const newXY = new Coordinate( blockXY.x + iconXY.x + this.SIZE / 2, blockXY.y + iconXY.y + this.SIZE / 2); - if (!Blockly.utils.Coordinate.equals(this.getIconLocation(), newXY)) { + if (!Coordinate.equals(this.getIconLocation(), newXY)) { this.setIconLocation(newXY); } }; /** * Returns the center of the block's icon relative to the surface. - * @return {?Blockly.utils.Coordinate} Object with x and y properties in + * @return {?Coordinate} Object with x and y properties in * workspace coordinates. */ -Blockly.Icon.prototype.getIconLocation = function() { +Icon.prototype.getIconLocation = function() { return this.iconXY_; }; @@ -188,12 +190,11 @@ Blockly.Icon.prototype.getIconLocation = function() { * Get the size of the icon as used for rendering. * This differs from the actual size of the icon, because it bulges slightly * out of its row rather than increasing the height of its row. - * @return {!Blockly.utils.Size} Height and width. + * @return {!Size} Height and width. */ // TODO (#2562): Remove getCorrectedSize. -Blockly.Icon.prototype.getCorrectedSize = function() { - return new Blockly.utils.Size( - Blockly.Icon.prototype.SIZE, Blockly.Icon.prototype.SIZE - 2); +Icon.prototype.getCorrectedSize = function() { + return new Size(Icon.prototype.SIZE, Icon.prototype.SIZE - 2); }; /** @@ -201,10 +202,12 @@ Blockly.Icon.prototype.getCorrectedSize = function() { * @param {!Element} group The icon group. * @protected */ -Blockly.Icon.prototype.drawIcon_; +Icon.prototype.drawIcon_; /** * Show or hide the icon. * @param {boolean} visible True if the icon should be visible. */ -Blockly.Icon.prototype.setVisible; +Icon.prototype.setVisible; + +exports = Icon; diff --git a/tests/deps.js b/tests/deps.js index 932910c7e..de575339f 100644 --- a/tests/deps.js +++ b/tests/deps.js @@ -68,7 +68,7 @@ goog.addDependency('../../core/flyout_vertical.js', ['Blockly.VerticalFlyout'], 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'}); -goog.addDependency('../../core/icon.js', ['Blockly.Icon'], ['Blockly.browserEvents', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.Size', 'Blockly.utils.Svg', 'Blockly.utils.dom']); +goog.addDependency('../../core/icon.js', ['Blockly.Icon'], ['Blockly.browserEvents', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.Size', 'Blockly.utils.Svg', 'Blockly.utils.dom'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/inject.js', ['Blockly.inject'], ['Blockly.BlockDragSurfaceSvg', 'Blockly.Css', 'Blockly.DropDownDiv', 'Blockly.Events', 'Blockly.Grid', 'Blockly.Msg', 'Blockly.Options', 'Blockly.ScrollbarPair', 'Blockly.Tooltip', 'Blockly.WidgetDiv', 'Blockly.Workspace', 'Blockly.WorkspaceDragSurfaceSvg', 'Blockly.WorkspaceSvg', 'Blockly.browserEvents', 'Blockly.utils', 'Blockly.utils.Svg', 'Blockly.utils.aria', 'Blockly.utils.dom', 'Blockly.utils.math', 'Blockly.utils.userAgent']); goog.addDependency('../../core/input.js', ['Blockly.Input'], ['Blockly.Connection', 'Blockly.FieldLabel', 'Blockly.fieldRegistry', 'Blockly.inputTypes'], {'lang': 'es5'}); goog.addDependency('../../core/input_types.js', ['Blockly.inputTypes'], ['Blockly.connectionTypes']);