Merge pull request #5098 from gonfunko/comment

Migrate core/comment.js to goog.module syntax
2026-01-10 02:17:09 +01:00 · 2021-07-20 09:47:32 -07:00
parent 514f744a6f 52bde51784
commit 784c1c86a3
2 changed files with 98 additions and 110 deletions
--- a/core/comment.js
+++ b/core/comment.js
@@ -10,43 +10,43 @@
 */
 'use strict';

-goog.provide('Blockly.Comment');
+goog.module('Blockly.Comment');
+goog.module.declareLegacyNamespace();

-goog.require('Blockly.browserEvents');
-goog.require('Blockly.Bubble');
-goog.require('Blockly.Css');
-goog.require('Blockly.Events');
+const Block = goog.requireType('Blockly.Block');
+const BlockSvg = goog.requireType('Blockly.BlockSvg');
+const Bubble = goog.require('Blockly.Bubble');
+const Coordinate = goog.requireType('Blockly.utils.Coordinate');
+const Events = goog.require('Blockly.Events');
+const Icon = goog.require('Blockly.Icon');
+const Size = goog.requireType('Blockly.utils.Size');
+const Svg = goog.require('Blockly.utils.Svg');
+const WorkspaceSvg = goog.requireType('Blockly.WorkspaceSvg');
+const userAgent = goog.require('Blockly.utils.userAgent');
+const {conditionalBind, Data, unbind} = goog.require('Blockly.browserEvents');
+const {createSvgElement, HTML_NS} = goog.require('Blockly.utils.dom');
+const {inherits} = goog.require('Blockly.utils.object');
+const {register} = goog.require('Blockly.Css');
 /** @suppress {extraRequire} */
 goog.require('Blockly.Events.BlockChange');
 /** @suppress {extraRequire} */
 goog.require('Blockly.Events.BubbleOpen');
-goog.require('Blockly.Icon');
-goog.require('Blockly.utils.dom');
-goog.require('Blockly.utils.object');
-goog.require('Blockly.utils.Svg');
-goog.require('Blockly.utils.userAgent');
 /** @suppress {extraRequire} */
 goog.require('Blockly.Warning');

-goog.requireType('Blockly.Block');
-goog.requireType('Blockly.BlockSvg');
-goog.requireType('Blockly.utils.Coordinate');
-goog.requireType('Blockly.utils.Size');
-goog.requireType('Blockly.WorkspaceSvg');
-

 /**
 * Class for a comment.
- * @param {!Blockly.Block} block The block associated with this comment.
- * @extends {Blockly.Icon}
+ * @param {!Block} block The block associated with this comment.
+ * @extends {Icon}
 * @constructor
 */
-Blockly.Comment = function(block) {
-  Blockly.Comment.superClass_.constructor.call(this, block);
+const Comment = function(block) {
+  Comment.superClass_.constructor.call(this, block);

  /**
   * The model for this comment.
-   * @type {!Blockly.Block.CommentModel}
+   * @type {!Block.CommentModel}
   * @private
   */
  this.model_ = block.commentModel;
@@ -64,62 +64,60 @@ Blockly.Comment = function(block) {

  /**
   * Mouse up event data.
-   * @type {?Blockly.browserEvents.Data}
+   * @type {?Data}
   * @private
   */
  this.onMouseUpWrapper_ = null;

  /**
   * Wheel event data.
-   * @type {?Blockly.browserEvents.Data}
+   * @type {?Data}
   * @private
   */
  this.onWheelWrapper_ = null;

  /**
   * Change event data.
-   * @type {?Blockly.browserEvents.Data}
+   * @type {?Data}
   * @private
   */
  this.onChangeWrapper_ = null;

  /**
   * Input event data.
-   * @type {?Blockly.browserEvents.Data}
+   * @type {?Data}
   * @private
   */
  this.onInputWrapper_ = null;

  this.createIcon();
 };
-Blockly.utils.object.inherits(Blockly.Comment, Blockly.Icon);
+inherits(Comment, Icon);

 /**
 * Draw the comment icon.
 * @param {!Element} group The icon group.
 * @protected
 */
-Blockly.Comment.prototype.drawIcon_ = function(group) {
+Comment.prototype.drawIcon_ = function(group) {
  // Circle.
-  Blockly.utils.dom.createSvgElement(
-      Blockly.utils.Svg.CIRCLE,
-      {'class': 'blocklyIconShape', 'r': '8', 'cx': '8', 'cy': '8'},
+  createSvgElement(
+      Svg.CIRCLE, {'class': 'blocklyIconShape', 'r': '8', 'cx': '8', 'cy': '8'},
      group);
  // Can't use a real '?' text character since different browsers and operating
  // systems render it differently.
  // Body of question mark.
-  Blockly.utils.dom.createSvgElement(
-      Blockly.utils.Svg.PATH,
-      {
+  createSvgElement(
+      Svg.PATH, {
        'class': 'blocklyIconSymbol',
        'd': 'm6.8,10h2c0.003,-0.617 0.271,-0.962 0.633,-1.266 2.875,-2.405' +
-          '0.607,-5.534 -3.765,-3.874v1.7c3.12,-1.657 3.698,0.118 2.336,1.25' +
-          '-1.201,0.998 -1.201,1.528 -1.204,2.19z'},
+            '0.607,-5.534 -3.765,-3.874v1.7c3.12,-1.657 3.698,0.118 2.336,1.25' +
+            '-1.201,0.998 -1.201,1.528 -1.204,2.19z'
+      },
      group);
  // Dot of question mark.
-  Blockly.utils.dom.createSvgElement(
-      Blockly.utils.Svg.RECT,
-      {
+  createSvgElement(
+      Svg.RECT, {
        'class': 'blocklyIconSymbol',
        'x': '6.8',
        'y': '10.78',
@@ -134,7 +132,7 @@ Blockly.Comment.prototype.drawIcon_ = function(group) {
 * @return {!SVGElement} The top-level node of the editor.
 * @private
 */
-Blockly.Comment.prototype.createEditor_ = function() {
+Comment.prototype.createEditor_ = function() {
  /* Create the editor.  Here's the markup that will be generated in
   * editable mode:
    <foreignObject x="8" y="8" width="164" height="164">
@@ -147,18 +145,16 @@ Blockly.Comment.prototype.createEditor_ = function() {
   * For non-editable mode see Warning.textToDom_.
   */

-  this.foreignObject_ = Blockly.utils.dom.createSvgElement(
-      Blockly.utils.Svg.FOREIGNOBJECT,
-      {'x': Blockly.Bubble.BORDER_WIDTH, 'y': Blockly.Bubble.BORDER_WIDTH},
+  this.foreignObject_ = createSvgElement(
+      Svg.FOREIGNOBJECT, {'x': Bubble.BORDER_WIDTH, 'y': Bubble.BORDER_WIDTH},
      null);

-  var body = document.createElementNS(Blockly.utils.dom.HTML_NS, 'body');
-  body.setAttribute('xmlns', Blockly.utils.dom.HTML_NS);
+  const body = document.createElementNS(HTML_NS, 'body');
+  body.setAttribute('xmlns', HTML_NS);
  body.className = 'blocklyMinimalBody';

-  this.textarea_ = document.createElementNS(
-      Blockly.utils.dom.HTML_NS, 'textarea');
-  var textarea = this.textarea_;
+  this.textarea_ = document.createElementNS(HTML_NS, 'textarea');
+  const textarea = this.textarea_;
  textarea.className = 'blocklyCommentTextarea';
  textarea.setAttribute('dir', this.block_.RTL ? 'RTL' : 'LTR');
  textarea.value = this.model_.text;
@@ -170,26 +166,23 @@ Blockly.Comment.prototype.createEditor_ = function() {
  // Ideally this would be hooked to the focus event for the comment.
  // However doing so in Firefox swallows the cursor for unknown reasons.
  // So this is hooked to mouseup instead.  No big deal.
-  this.onMouseUpWrapper_ = Blockly.browserEvents.conditionalBind(
-      textarea, 'mouseup', this, this.startEdit_, true, true);
+  this.onMouseUpWrapper_ =
+      conditionalBind(textarea, 'mouseup', this, this.startEdit_, true, true);
  // Don't zoom with mousewheel.
-  this.onWheelWrapper_ = Blockly.browserEvents.conditionalBind(
-      textarea, 'wheel', this, function(e) {
-        e.stopPropagation();
-      });
-  this.onChangeWrapper_ = Blockly.browserEvents.conditionalBind(
-      textarea, 'change', this, function(_e) {
+  this.onWheelWrapper_ = conditionalBind(textarea, 'wheel', this, function(e) {
+    e.stopPropagation();
+  });
+  this.onChangeWrapper_ =
+      conditionalBind(textarea, 'change', this, function(_e) {
        if (this.cachedText_ != this.model_.text) {
-          Blockly.Events.fire(
-              new (Blockly.Events.get(Blockly.Events.BLOCK_CHANGE))(
-                  this.block_, 'comment', null, this.cachedText_,
-                  this.model_.text));
+          Events.fire(new (Events.get(Events.BLOCK_CHANGE))(
+              this.block_, 'comment', null, this.cachedText_,
+              this.model_.text));
        }
      });
-  this.onInputWrapper_ = Blockly.browserEvents.conditionalBind(
-      textarea, 'input', this, function(_e) {
-        this.model_.text = textarea.value;
-      });
+  this.onInputWrapper_ = conditionalBind(textarea, 'input', this, function(_e) {
+    this.model_.text = textarea.value;
+  });

  setTimeout(textarea.focus.bind(textarea), 0);

@@ -200,8 +193,8 @@ Blockly.Comment.prototype.createEditor_ = function() {
 * Add or remove editability of the comment.
 * @override
 */
-Blockly.Comment.prototype.updateEditable = function() {
-  Blockly.Comment.superClass_.updateEditable.call(this);
+Comment.prototype.updateEditable = function() {
+  Comment.superClass_.updateEditable.call(this);
  if (this.isVisible()) {
    // Recreate the bubble with the correct UI.
    this.disposeBubble_();
@@ -214,7 +207,7 @@ Blockly.Comment.prototype.updateEditable = function() {
 * Resize the text area accordingly.
 * @private
 */
-Blockly.Comment.prototype.onBubbleResize_ = function() {
+Comment.prototype.onBubbleResize_ = function() {
  if (!this.isVisible()) {
    return;
  }
@@ -227,11 +220,11 @@ Blockly.Comment.prototype.onBubbleResize_ = function() {
 * the size of the bubble).
 * @private
 */
-Blockly.Comment.prototype.resizeTextarea_ = function() {
-  var size = this.model_.size;
-  var doubleBorderWidth = 2 * Blockly.Bubble.BORDER_WIDTH;
-  var widthMinusBorder = size.width - doubleBorderWidth;
-  var heightMinusBorder = size.height - doubleBorderWidth;
+Comment.prototype.resizeTextarea_ = function() {
+  const size = this.model_.size;
+  const doubleBorderWidth = 2 * Bubble.BORDER_WIDTH;
+  const widthMinusBorder = size.width - doubleBorderWidth;
+  const heightMinusBorder = size.height - doubleBorderWidth;
  this.foreignObject_.setAttribute('width', widthMinusBorder);
  this.foreignObject_.setAttribute('height', heightMinusBorder);
  this.textarea_.style.width = (widthMinusBorder - 4) + 'px';
@@ -242,12 +235,12 @@ Blockly.Comment.prototype.resizeTextarea_ = function() {
 * Show or hide the comment bubble.
 * @param {boolean} visible True if the bubble should be visible.
 */
-Blockly.Comment.prototype.setVisible = function(visible) {
+Comment.prototype.setVisible = function(visible) {
  if (visible == this.isVisible()) {
    return;
  }
-  Blockly.Events.fire(new (Blockly.Events.get(Blockly.Events.BUBBLE_OPEN))(
-      this.block_, visible, 'comment'));
+  Events.fire(
+      new (Events.get(Events.BUBBLE_OPEN))(this.block_, visible, 'comment'));
  this.model_.pinned = visible;
  if (visible) {
    this.createBubble_();
@@ -260,8 +253,8 @@ Blockly.Comment.prototype.setVisible = function(visible) {
 * Show the bubble. Handles deciding if it should be editable or not.
 * @private
 */
-Blockly.Comment.prototype.createBubble_ = function() {
-  if (!this.block_.isEditable() || Blockly.utils.userAgent.IE) {
+Comment.prototype.createBubble_ = function() {
+  if (!this.block_.isEditable() || userAgent.IE) {
    // MSIE does not support foreignobject; textareas are impossible.
    // https://docs.microsoft.com/en-us/openspecs/ie_standards/ms-svg/56e6e04c-7c8c-44dd-8100-bd745ee42034
    // Always treat comments in IE as uneditable.
@@ -275,12 +268,12 @@ Blockly.Comment.prototype.createBubble_ = function() {
 * Show an editable bubble.
 * @private
 */
-Blockly.Comment.prototype.createEditableBubble_ = function() {
-  this.bubble_ = new Blockly.Bubble(
-      /** @type {!Blockly.WorkspaceSvg} */ (this.block_.workspace),
+Comment.prototype.createEditableBubble_ = function() {
+  this.bubble_ = new Bubble(
+      /** @type {!WorkspaceSvg} */ (this.block_.workspace),
      this.createEditor_(), this.block_.pathObject.svgPath,
-      /** @type {!Blockly.utils.Coordinate} */ (this.iconXY_),
-      this.model_.size.width, this.model_.size.height);
+      /** @type {!Coordinate} */ (this.iconXY_), this.model_.size.width,
+      this.model_.size.height);
  // Expose this comment's block's ID on its top-level SVG group.
  this.bubble_.setSvgId(this.block_.id);
  this.bubble_.registerResizeEvent(this.onBubbleResize_.bind(this));
@@ -292,12 +285,12 @@ Blockly.Comment.prototype.createEditableBubble_ = function() {
 * @private
 * @suppress {checkTypes} Suppress `this` type mismatch.
 */
-Blockly.Comment.prototype.createNonEditableBubble_ = function() {
+Comment.prototype.createNonEditableBubble_ = function() {
  // TODO (#2917): It would be great if the comment could support line breaks.
-  this.paragraphElement_ = Blockly.Bubble.textToDom(this.block_.getCommentText());
-  this.bubble_ = Blockly.Bubble.createNonEditableBubble(
-      this.paragraphElement_, /** @type {!Blockly.BlockSvg} */ (this.block_),
-      /** @type {!Blockly.utils.Coordinate} */ (this.iconXY_));
+  this.paragraphElement_ = Bubble.textToDom(this.block_.getCommentText());
+  this.bubble_ = Bubble.createNonEditableBubble(
+      this.paragraphElement_, /** @type {!BlockSvg} */ (this.block_),
+      /** @type {!Coordinate} */ (this.iconXY_));
  this.applyColour();
 };

@@ -306,21 +299,21 @@ Blockly.Comment.prototype.createNonEditableBubble_ = function() {
 * @private
 * @suppress {checkTypes} Suppress `this` type mismatch.
 */
-Blockly.Comment.prototype.disposeBubble_ = function() {
+Comment.prototype.disposeBubble_ = function() {
  if (this.onMouseUpWrapper_) {
-    Blockly.browserEvents.unbind(this.onMouseUpWrapper_);
+    unbind(this.onMouseUpWrapper_);
    this.onMouseUpWrapper_ = null;
  }
  if (this.onWheelWrapper_) {
-    Blockly.browserEvents.unbind(this.onWheelWrapper_);
+    unbind(this.onWheelWrapper_);
    this.onWheelWrapper_ = null;
  }
  if (this.onChangeWrapper_) {
-    Blockly.browserEvents.unbind(this.onChangeWrapper_);
+    unbind(this.onChangeWrapper_);
    this.onChangeWrapper_ = null;
  }
  if (this.onInputWrapper_) {
-    Blockly.browserEvents.unbind(this.onInputWrapper_);
+    unbind(this.onInputWrapper_);
    this.onInputWrapper_ = null;
  }
  this.bubble_.dispose();
@@ -338,7 +331,7 @@ Blockly.Comment.prototype.disposeBubble_ = function() {
 * @param {!Event} _e Mouse up event.
 * @private
 */
-Blockly.Comment.prototype.startEdit_ = function(_e) {
+Comment.prototype.startEdit_ = function(_e) {
  if (this.bubble_.promote()) {
    // Since the act of moving this node within the DOM causes a loss of focus,
    // we need to reapply the focus.
@@ -350,9 +343,9 @@ Blockly.Comment.prototype.startEdit_ = function(_e) {

 /**
 * Get the dimensions of this comment's bubble.
- * @return {Blockly.utils.Size} Object with width and height properties.
+ * @return {Size} Object with width and height properties.
 */
-Blockly.Comment.prototype.getBubbleSize = function() {
+Comment.prototype.getBubbleSize = function() {
  return this.model_.size;
 };

@@ -361,7 +354,7 @@ Blockly.Comment.prototype.getBubbleSize = function() {
 * @param {number} width Width of the bubble.
 * @param {number} height Height of the bubble.
 */
-Blockly.Comment.prototype.setBubbleSize = function(width, height) {
+Comment.prototype.setBubbleSize = function(width, height) {
  if (this.bubble_) {
    this.bubble_.setBubbleSize(width, height);
  } else {
@@ -374,7 +367,7 @@ Blockly.Comment.prototype.setBubbleSize = function(width, height) {
 * Update the comment's view to match the model.
 * @package
 */
-Blockly.Comment.prototype.updateText = function() {
+Comment.prototype.updateText = function() {
  if (this.textarea_) {
    this.textarea_.value = this.model_.text;
  } else if (this.paragraphElement_) {
@@ -390,25 +383,20 @@ Blockly.Comment.prototype.updateText = function() {
 * If you want to receive a comment "delete" event (newValue: null), then this
 * should not be called directly. Instead call block.setCommentText(null);
 */
-Blockly.Comment.prototype.dispose = function() {
+Comment.prototype.dispose = function() {
  this.block_.comment = null;
-  Blockly.Icon.prototype.dispose.call(this);
+  Icon.prototype.dispose.call(this);
 };

 /**
 * CSS for block comment.  See css.js for use.
 */
-Blockly.Css.register([
+register([
  /* eslint-disable indent */
-  '.blocklyCommentTextarea {',
-    'background-color: #fef49c;',
-    'border: 0;',
-    'outline: 0;',
-    'margin: 0;',
-    'padding: 3px;',
-    'resize: none;',
-    'display: block;',
-    'text-overflow: hidden;',
-  '}'
+  '.blocklyCommentTextarea {', 'background-color: #fef49c;', 'border: 0;',
+  'outline: 0;', 'margin: 0;', 'padding: 3px;', 'resize: none;',
+  'display: block;', 'text-overflow: hidden;', '}'
  /* eslint-enable indent */
 ]);
+
+exports = Comment;
--- a/tests/deps.js
+++ b/tests/deps.js
@@ -17,7 +17,7 @@ goog.addDependency('../../core/blocks.js', ['Blockly.Blocks'], [], {'lang': 'es6
 goog.addDependency('../../core/browser_events.js', ['Blockly.browserEvents'], ['Blockly.Touch', 'Blockly.utils.global']);
 goog.addDependency('../../core/bubble.js', ['Blockly.Bubble'], ['Blockly.IBubble', 'Blockly.Scrollbar', 'Blockly.Touch', 'Blockly.Workspace', 'Blockly.browserEvents', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.Size', 'Blockly.utils.Svg', 'Blockly.utils.dom', 'Blockly.utils.math', 'Blockly.utils.userAgent']);
 goog.addDependency('../../core/bubble_dragger.js', ['Blockly.BubbleDragger'], ['Blockly.Bubble', 'Blockly.ComponentManager', 'Blockly.Events', 'Blockly.Events.CommentMove', 'Blockly.constants', 'Blockly.utils', 'Blockly.utils.Coordinate'], {'lang': 'es6', 'module': 'goog'});
-goog.addDependency('../../core/comment.js', ['Blockly.Comment'], ['Blockly.Bubble', 'Blockly.Css', 'Blockly.Events', 'Blockly.Events.BlockChange', 'Blockly.Events.BubbleOpen', 'Blockly.Icon', 'Blockly.Warning', 'Blockly.browserEvents', 'Blockly.utils.Svg', 'Blockly.utils.dom', 'Blockly.utils.object', 'Blockly.utils.userAgent']);
+goog.addDependency('../../core/comment.js', ['Blockly.Comment'], ['Blockly.Bubble', 'Blockly.Css', 'Blockly.Events', 'Blockly.Events.BlockChange', 'Blockly.Events.BubbleOpen', 'Blockly.Icon', 'Blockly.Warning', 'Blockly.browserEvents', 'Blockly.utils.Svg', 'Blockly.utils.dom', 'Blockly.utils.object', 'Blockly.utils.userAgent'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/component_manager.js', ['Blockly.ComponentManager'], [], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/connection.js', ['Blockly.Connection'], ['Blockly.Events', 'Blockly.Events.BlockMove', 'Blockly.IASTNodeLocationWithBlock', 'Blockly.Xml', 'Blockly.connectionTypes', 'Blockly.constants', 'Blockly.utils.deprecation']);
 goog.addDependency('../../core/connection_checker.js', ['Blockly.ConnectionChecker'], ['Blockly.Connection', 'Blockly.IConnectionChecker', 'Blockly.connectionTypes', 'Blockly.constants', 'Blockly.registry'], {'lang': 'es6', 'module': 'goog'});