blockly 7.20211209.2 → 8.0.0

package/core/icon.js

@@ -29,188 +29,197 @@ const {Svg} = goog.require('Blockly.utils.Svg');
 
 /**
  * Class for an icon.
- * @param {BlockSvg} block The block associated with this icon.
- * @constructor
  * @abstract
  * @alias Blockly.Icon
  */
-const Icon = function(block) {
+class Icon {
   /**
-   * The block this icon is attached to.
-   * @type {BlockSvg}
-   * @protected
+   * @param {BlockSvg} block The block associated with this icon.
    */
-  this.block_ = block;
+  constructor(block) {
+    /**
+     * The block this icon is attached to.
+     * @type {BlockSvg}
+     * @protected
+     */
+    this.block_ = block;
+
+    /**
+     * The icon SVG group.
+     * @type {?SVGGElement}
+     */
+    this.iconGroup_ = null;
+
+    /**
+     * Whether this icon gets hidden when the block is collapsed.
+     * @type {boolean}
+     */
+    this.collapseHidden = true;
+
+    /**
+     * Height and width of icons.
+     * @const
+     */
+    this.SIZE = 17;
+
+    /**
+     * Bubble UI (if visible).
+     * @type {?Bubble}
+     * @protected
+     */
+    this.bubble_ = null;
+
+    /**
+     * Absolute coordinate of icon's center.
+     * @type {?Coordinate}
+     * @protected
+     */
+    this.iconXY_ = null;
+  }
 
   /**
-   * The icon SVG group.
-   * @type {?SVGGElement}
+   * Create the icon on the block.
    */
-  this.iconGroup_ = null;
-};
-
-/**
- * Does this icon get hidden when the block is collapsed.
- */
-Icon.prototype.collapseHidden = true;
-
-/**
- * Height and width of icons.
- * @const
- */
-Icon.prototype.SIZE = 17;
-
-/**
- * Bubble UI (if visible).
- * @type {?Bubble}
- * @protected
- */
-Icon.prototype.bubble_ = null;
-
-/**
- * Absolute coordinate of icon's center.
- * @type {?Coordinate}
- * @protected
- */
-Icon.prototype.iconXY_ = null;
-
-/**
- * Create the icon on the block.
- */
-Icon.prototype.createIcon = function() {
-  if (this.iconGroup_) {
-    // Icon already exists.
-    return;
+  createIcon() {
+    if (this.iconGroup_) {
+      // Icon already exists.
+      return;
+    }
+    /* Here's the markup that will be generated:
+    <g class="blocklyIconGroup">
+      ...
+    </g>
+    */
+    this.iconGroup_ =
+        dom.createSvgElement(Svg.G, {'class': 'blocklyIconGroup'}, null);
+    if (this.block_.isInFlyout) {
+      dom.addClass(
+          /** @type {!Element} */ (this.iconGroup_),
+          'blocklyIconGroupReadonly');
+    }
+    this.drawIcon_(this.iconGroup_);
+
+    this.block_.getSvgRoot().appendChild(this.iconGroup_);
+    browserEvents.conditionalBind(
+        this.iconGroup_, 'mouseup', this, this.iconClick_);
+    this.updateEditable();
   }
-  /* Here's the markup that will be generated:
-  <g class="blocklyIconGroup">
-    ...
-  </g>
-  */
-  this.iconGroup_ =
-      dom.createSvgElement(Svg.G, {'class': 'blocklyIconGroup'}, null);
-  if (this.block_.isInFlyout) {
-    dom.addClass(
-        /** @type {!Element} */ (this.iconGroup_), 'blocklyIconGroupReadonly');
-  }
-  this.drawIcon_(this.iconGroup_);
-
-  this.block_.getSvgRoot().appendChild(this.iconGroup_);
-  browserEvents.conditionalBind(
-      this.iconGroup_, 'mouseup', this, this.iconClick_);
-  this.updateEditable();
-};
 
-/**
- * Dispose of this icon.
- */
-Icon.prototype.dispose = function() {
-  // Dispose of and unlink the icon.
-  dom.removeNode(this.iconGroup_);
-  this.iconGroup_ = null;
-  // Dispose of and unlink the bubble.
-  this.setVisible(false);
-  this.block_ = null;
-};
-
-/**
- * Add or remove the UI indicating if this icon may be clicked or not.
- */
-Icon.prototype.updateEditable = function() {
-  // No-op on the base class.
-};
+  /**
+   * Dispose of this icon.
+   */
+  dispose() {
+    // Dispose of and unlink the icon.
+    dom.removeNode(this.iconGroup_);
+    this.iconGroup_ = null;
+    // Dispose of and unlink the bubble.
+    this.setVisible(false);
+    this.block_ = null;
+  }
 
-/**
- * Is the associated bubble visible?
- * @return {boolean} True if the bubble is visible.
- */
-Icon.prototype.isVisible = function() {
-  return !!this.bubble_;
-};
+  /**
+   * Add or remove the UI indicating if this icon may be clicked or not.
+   */
+  updateEditable() {
+    // No-op on the base class.
+  }
 
-/**
- * Clicking on the icon toggles if the bubble is visible.
- * @param {!Event} e Mouse click event.
- * @protected
- */
-Icon.prototype.iconClick_ = function(e) {
-  if (this.block_.workspace.isDragging()) {
-    // Drag operation is concluding.  Don't open the editor.
-    return;
+  /**
+   * Is the associated bubble visible?
+   * @return {boolean} True if the bubble is visible.
+   */
+  isVisible() {
+    return !!this.bubble_;
   }
-  if (!this.block_.isInFlyout && !browserEvents.isRightButton(e)) {
-    this.setVisible(!this.isVisible());
+
+  /**
+   * Clicking on the icon toggles if the bubble is visible.
+   * @param {!Event} e Mouse click event.
+   * @protected
+   */
+  iconClick_(e) {
+    if (this.block_.workspace.isDragging()) {
+      // Drag operation is concluding.  Don't open the editor.
+      return;
+    }
+    if (!this.block_.isInFlyout && !browserEvents.isRightButton(e)) {
+      this.setVisible(!this.isVisible());
+    }
   }
-};
 
-/**
- * Change the colour of the associated bubble to match its block.
- */
-Icon.prototype.applyColour = function() {
-  if (this.isVisible()) {
-    this.bubble_.setColour(this.block_.style.colourPrimary);
+  /**
+   * Change the colour of the associated bubble to match its block.
+   */
+  applyColour() {
+    if (this.isVisible()) {
+      this.bubble_.setColour(this.block_.style.colourPrimary);
+    }
   }
-};
 
-/**
- * Notification that the icon has moved.  Update the arrow accordingly.
- * @param {!Coordinate} xy Absolute location in workspace coordinates.
- */
-Icon.prototype.setIconLocation = function(xy) {
-  this.iconXY_ = xy;
-  if (this.isVisible()) {
-    this.bubble_.setAnchorLocation(xy);
+  /**
+   * Notification that the icon has moved.  Update the arrow accordingly.
+   * @param {!Coordinate} xy Absolute location in workspace coordinates.
+   */
+  setIconLocation(xy) {
+    this.iconXY_ = xy;
+    if (this.isVisible()) {
+      this.bubble_.setAnchorLocation(xy);
+    }
   }
-};
 
-/**
- * Notification that the icon has moved, but we don't really know where.
- * Recompute the icon's location from scratch.
- */
-Icon.prototype.computeIconLocation = function() {
-  // Find coordinates for the centre of the icon and update the arrow.
-  const blockXY = this.block_.getRelativeToSurfaceXY();
-  const iconXY = svgMath.getRelativeXY(
-      /** @type {!SVGElement} */ (this.iconGroup_));
-  const newXY = new Coordinate(
-      blockXY.x + iconXY.x + this.SIZE / 2,
-      blockXY.y + iconXY.y + this.SIZE / 2);
-  if (!Coordinate.equals(this.getIconLocation(), newXY)) {
-    this.setIconLocation(newXY);
+  /**
+   * Notification that the icon has moved, but we don't really know where.
+   * Recompute the icon's location from scratch.
+   */
+  computeIconLocation() {
+    // Find coordinates for the centre of the icon and update the arrow.
+    const blockXY = this.block_.getRelativeToSurfaceXY();
+    const iconXY = svgMath.getRelativeXY(
+        /** @type {!SVGElement} */ (this.iconGroup_));
+    const newXY = new Coordinate(
+        blockXY.x + iconXY.x + this.SIZE / 2,
+        blockXY.y + iconXY.y + this.SIZE / 2);
+    if (!Coordinate.equals(this.getIconLocation(), newXY)) {
+      this.setIconLocation(newXY);
+    }
   }
-};
 
-/**
- * Returns the center of the block's icon relative to the surface.
- * @return {?Coordinate} Object with x and y properties in
- *     workspace coordinates.
- */
-Icon.prototype.getIconLocation = function() {
-  return this.iconXY_;
-};
+  /**
+   * Returns the center of the block's icon relative to the surface.
+   * @return {?Coordinate} Object with x and y properties in
+   *     workspace coordinates.
+   */
+  getIconLocation() {
+    return this.iconXY_;
+  }
 
-/**
- * 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 {!Size} Height and width.
- */
-// TODO (#2562): Remove getCorrectedSize.
-Icon.prototype.getCorrectedSize = function() {
-  return new Size(Icon.prototype.SIZE, Icon.prototype.SIZE - 2);
-};
+  /**
+   * 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 {!Size} Height and width.
+   */
+  getCorrectedSize() {
+    // TODO (#2562): Remove getCorrectedSize.
+    return new Size(this.SIZE, this.SIZE - 2);
+  }
 
-/**
- * Draw the icon.
- * @param {!Element} group The icon group.
- * @protected
- */
-Icon.prototype.drawIcon_;
+  /**
+   * Draw the icon.
+   * @param {!Element} _group The icon group.
+   * @protected
+   */
+  drawIcon_(_group) {
+    // No-op on base class.
+  }
 
-/**
- * Show or hide the icon.
- * @param {boolean} visible True if the icon should be visible.
- */
-Icon.prototype.setVisible;
+  /**
+   * Show or hide the icon.
+   * @param {boolean} _visible True if the icon should be visible.
+   */
+  setVisible(_visible) {
+    // No-op on base class
+  }
+}
 
 exports.Icon = Icon;

package/core/inject.js

@@ -24,11 +24,11 @@ const browserEvents = goog.require('Blockly.browserEvents');
 const bumpObjects = goog.require('Blockly.bumpObjects');
 const common = goog.require('Blockly.common');
 const dom = goog.require('Blockly.utils.dom');
+const dropDownDiv = goog.require('Blockly.dropDownDiv');
 const userAgent = goog.require('Blockly.utils.userAgent');
 const {BlockDragSurfaceSvg} = goog.require('Blockly.BlockDragSurfaceSvg');
 /* eslint-disable-next-line no-unused-vars */
 const {BlocklyOptions} = goog.requireType('Blockly.BlocklyOptions');
-const {DropDownDiv} = goog.require('Blockly.DropDownDiv');
 const {Grid} = goog.require('Blockly.Grid');
 const {Msg} = goog.require('Blockly.Msg');
 const {Options} = goog.require('Blockly.Options');
@@ -59,7 +59,8 @@ const inject = function(container, opt_options) {
   }
   const options =
       new Options(opt_options || (/** @type {!BlocklyOptions} */ ({})));
-  const subContainer = document.createElement('div');
+  const subContainer =
+      /** @type {!HTMLDivElement} */ (document.createElement('div'));
   subContainer.className = 'injectionDiv';
   subContainer.tabIndex = 0;
   aria.setState(subContainer, aria.State.LABEL, Msg['WORKSPACE_ARIA_LABEL']);
@@ -192,7 +193,7 @@ const createMainWorkspace = function(
   // The SVG is now fully assembled.
   common.svgResize(mainWorkspace);
   WidgetDiv.createDom();
-  DropDownDiv.createDom();
+  dropDownDiv.createDom();
   Tooltip.createDom();
   return mainWorkspace;
 };
@@ -274,7 +275,8 @@ const init = function(mainWorkspace) {
 // TODO (https://github.com/google/blockly/issues/1998) handle cases where there
 // are multiple workspaces and non-main workspaces are able to accept input.
 const onKeyDown = function(e) {
-  const mainWorkspace = common.getMainWorkspace();
+  const mainWorkspace =
+      /** @type {!WorkspaceSvg} */ (common.getMainWorkspace());
   if (!mainWorkspace) {
     return;
   }
@@ -337,7 +339,7 @@ const bindDocumentEvents = function() {
 /**
  * Load sounds for the given workspace.
  * @param {string} pathToMedia The path to the media directory.
- * @param {!Workspace} workspace The workspace to load sounds for.
+ * @param {!WorkspaceSvg} workspace The workspace to load sounds for.
  */
 const loadSounds = function(pathToMedia, workspace) {
   const audioMgr = workspace.getAudioManager();