Merge pull request #5190 from gonfunko/flyout_horizontal

Migrate core/flyout_horizontal.js to goog.module syntax
2026-01-10 18:37:09 +01:00 · 2021-07-23 13:07:04 -07:00
parent 2dd7d4c8b4 35673a79e1
commit 5421bc353c
2 changed files with 111 additions and 102 deletions
--- 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<number>} 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;
--- 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']);