blockly 8.20220331.0-beta.0 → 9.0.0-beta.1

package/core/comment.js

@@ -1,448 +0,0 @@
-/**
- * @license
- * Copyright 2011 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview Object representing a code comment.
- */
-'use strict';
-
-/**
- * Object representing a code comment.
- * @class
- */
-goog.module('Blockly.Comment');
-
-const Css = goog.require('Blockly.Css');
-const browserEvents = goog.require('Blockly.browserEvents');
-const dom = goog.require('Blockly.utils.dom');
-const eventUtils = goog.require('Blockly.Events.utils');
-const userAgent = goog.require('Blockly.utils.userAgent');
-/* eslint-disable-next-line no-unused-vars */
-const {BlockSvg} = goog.requireType('Blockly.BlockSvg');
-/* eslint-disable-next-line no-unused-vars */
-const {Block} = goog.requireType('Blockly.Block');
-const {Bubble} = goog.require('Blockly.Bubble');
-/* eslint-disable-next-line no-unused-vars */
-const {Coordinate} = goog.requireType('Blockly.utils.Coordinate');
-const {Icon} = goog.require('Blockly.Icon');
-/* eslint-disable-next-line no-unused-vars */
-const {Size} = goog.requireType('Blockly.utils.Size');
-const {Svg} = goog.require('Blockly.utils.Svg');
-/* eslint-disable-next-line no-unused-vars */
-const {WorkspaceSvg} = goog.requireType('Blockly.WorkspaceSvg');
-/** @suppress {extraRequire} */
-goog.require('Blockly.Events.BlockChange');
-/** @suppress {extraRequire} */
-goog.require('Blockly.Events.BubbleOpen');
-/** @suppress {extraRequire} */
-goog.require('Blockly.Warning');
-
-
-/**
- * Class for a comment.
- * @extends {Icon}
- * @alias Blockly.Comment
- */
-class Comment extends Icon {
-  /**
-   * @param {!BlockSvg} block The block associated with this comment.
-   */
-  constructor(block) {
-    super(block);
-
-    /**
-     * The model for this comment.
-     * @type {!Block.CommentModel}
-     * @private
-     */
-    this.model_ = block.commentModel;
-    // If someone creates the comment directly instead of calling
-    // block.setCommentText we want to make sure the text is non-null;
-    this.model_.text = this.model_.text || '';
-
-    /**
-     * The model's text value at the start of an edit.
-     * Used to tell if an event should be fired at the end of an edit.
-     * @type {?string}
-     * @private
-     */
-    this.cachedText_ = '';
-
-    /**
-     * Mouse up event data.
-     * @type {?browserEvents.Data}
-     * @private
-     */
-    this.onMouseUpWrapper_ = null;
-
-    /**
-     * Wheel event data.
-     * @type {?browserEvents.Data}
-     * @private
-     */
-    this.onWheelWrapper_ = null;
-
-    /**
-     * Change event data.
-     * @type {?browserEvents.Data}
-     * @private
-     */
-    this.onChangeWrapper_ = null;
-
-    /**
-     * Input event data.
-     * @type {?browserEvents.Data}
-     * @private
-     */
-    this.onInputWrapper_ = null;
-
-    /**
-     * The SVG element that contains the text edit area, or null if not created.
-     * @type {?SVGForeignObjectElement}
-     * @private
-     */
-    this.foreignObject_ = null;
-
-    /**
-     * The editable text area, or null if not created.
-     * @type {?Element}
-     * @private
-     */
-    this.textarea_ = null;
-
-    /**
-     * The top-level node of the comment text, or null if not created.
-     * @type {?SVGTextElement}
-     * @private
-     */
-    this.paragraphElement_ = null;
-
-    this.createIcon();
-  }
-
-  /**
-   * Draw the comment icon.
-   * @param {!Element} group The icon group.
-   * @protected
-   */
-  drawIcon_(group) {
-    // Circle.
-    dom.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.
-    dom.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',
-        },
-        group);
-    // Dot of question mark.
-    dom.createSvgElement(
-        Svg.RECT, {
-          'class': 'blocklyIconSymbol',
-          'x': '6.8',
-          'y': '10.78',
-          'height': '2',
-          'width': '2',
-        },
-        group);
-  }
-
-  /**
-   * Create the editor for the comment's bubble.
-   * @return {!SVGElement} The top-level node of the editor.
-   * @private
-   */
-  createEditor_() {
-    /* Create the editor.  Here's the markup that will be generated in
-     * editable mode:
-      <foreignObject x="8" y="8" width="164" height="164">
-        <body xmlns="http://www.w3.org/1999/xhtml" class="blocklyMinimalBody">
-          <textarea xmlns="http://www.w3.org/1999/xhtml"
-              class="blocklyCommentTextarea"
-              style="height: 164px; width: 164px;"></textarea>
-        </body>
-      </foreignObject>
-     * For non-editable mode see Warning.textToDom_.
-     */
-
-    this.foreignObject_ = dom.createSvgElement(
-        Svg.FOREIGNOBJECT, {'x': Bubble.BORDER_WIDTH, 'y': Bubble.BORDER_WIDTH},
-        null);
-
-    const body = document.createElementNS(dom.HTML_NS, 'body');
-    body.setAttribute('xmlns', dom.HTML_NS);
-    body.className = 'blocklyMinimalBody';
-
-    this.textarea_ = document.createElementNS(dom.HTML_NS, 'textarea');
-    const textarea = this.textarea_;
-    textarea.className = 'blocklyCommentTextarea';
-    textarea.setAttribute('dir', this.block_.RTL ? 'RTL' : 'LTR');
-    textarea.value = this.model_.text;
-    this.resizeTextarea_();
-
-    body.appendChild(textarea);
-    this.foreignObject_.appendChild(body);
-
-    // 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_ = browserEvents.conditionalBind(
-        textarea, 'mouseup', this, this.startEdit_, true, true);
-    // Don't zoom with mousewheel.
-    this.onWheelWrapper_ =
-        browserEvents.conditionalBind(textarea, 'wheel', this, function(e) {
-          e.stopPropagation();
-        });
-    this.onChangeWrapper_ = browserEvents.conditionalBind(
-        textarea, 'change', this,
-        /**
-         * @this {Comment}
-         * @param {Event} _e Unused event parameter.
-         */
-        function(_e) {
-          if (this.cachedText_ !== this.model_.text) {
-            eventUtils.fire(new (eventUtils.get(eventUtils.BLOCK_CHANGE))(
-                this.block_, 'comment', null, this.cachedText_,
-                this.model_.text));
-          }
-        });
-    this.onInputWrapper_ = browserEvents.conditionalBind(
-        textarea, 'input', this,
-        /**
-         * @this {Comment}
-         * @param {Event} _e Unused event parameter.
-         */
-        function(_e) {
-          this.model_.text = textarea.value;
-        });
-
-    setTimeout(textarea.focus.bind(textarea), 0);
-
-    return this.foreignObject_;
-  }
-
-  /**
-   * Add or remove editability of the comment.
-   * @override
-   */
-  updateEditable() {
-    super.updateEditable();
-    if (this.isVisible()) {
-      // Recreate the bubble with the correct UI.
-      this.disposeBubble_();
-      this.createBubble_();
-    }
-  }
-
-  /**
-   * Callback function triggered when the bubble has resized.
-   * Resize the text area accordingly.
-   * @private
-   */
-  onBubbleResize_() {
-    if (!this.isVisible()) {
-      return;
-    }
-    this.model_.size = this.bubble_.getBubbleSize();
-    this.resizeTextarea_();
-  }
-
-  /**
-   * Resizes the text area to match the size defined on the model (which is
-   * the size of the bubble).
-   * @private
-   */
-  resizeTextarea_() {
-    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';
-    this.textarea_.style.height = (heightMinusBorder - 4) + 'px';
-  }
-
-  /**
-   * Show or hide the comment bubble.
-   * @param {boolean} visible True if the bubble should be visible.
-   */
-  setVisible(visible) {
-    if (visible === this.isVisible()) {
-      return;
-    }
-    eventUtils.fire(new (eventUtils.get(eventUtils.BUBBLE_OPEN))(
-        this.block_, visible, 'comment'));
-    this.model_.pinned = visible;
-    if (visible) {
-      this.createBubble_();
-    } else {
-      this.disposeBubble_();
-    }
-  }
-
-  /**
-   * Show the bubble. Handles deciding if it should be editable or not.
-   * @private
-   */
-  createBubble_() {
-    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.
-      this.createNonEditableBubble_();
-    } else {
-      this.createEditableBubble_();
-    }
-  }
-
-  /**
-   * Show an editable bubble.
-   * @private
-   */
-  createEditableBubble_() {
-    this.bubble_ = new Bubble(
-        /** @type {!WorkspaceSvg} */ (this.block_.workspace),
-        this.createEditor_(), this.block_.pathObject.svgPath,
-        /** @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));
-    this.applyColour();
-  }
-
-  /**
-   * Show a non-editable bubble.
-   * @private
-   * @suppress {checkTypes} Suppress `this` type mismatch.
-   */
-  createNonEditableBubble_() {
-    // TODO (#2917): It would be great if the comment could support line breaks.
-    this.paragraphElement_ = Bubble.textToDom(this.block_.getCommentText());
-    this.bubble_ = Bubble.createNonEditableBubble(
-        this.paragraphElement_, /** @type {!BlockSvg} */ (this.block_),
-        /** @type {!Coordinate} */ (this.iconXY_));
-    this.applyColour();
-  }
-
-  /**
-   * Dispose of the bubble.
-   * @private
-   * @suppress {checkTypes} Suppress `this` type mismatch.
-   */
-  disposeBubble_() {
-    if (this.onMouseUpWrapper_) {
-      browserEvents.unbind(this.onMouseUpWrapper_);
-      this.onMouseUpWrapper_ = null;
-    }
-    if (this.onWheelWrapper_) {
-      browserEvents.unbind(this.onWheelWrapper_);
-      this.onWheelWrapper_ = null;
-    }
-    if (this.onChangeWrapper_) {
-      browserEvents.unbind(this.onChangeWrapper_);
-      this.onChangeWrapper_ = null;
-    }
-    if (this.onInputWrapper_) {
-      browserEvents.unbind(this.onInputWrapper_);
-      this.onInputWrapper_ = null;
-    }
-    this.bubble_.dispose();
-    this.bubble_ = null;
-    this.textarea_ = null;
-    this.foreignObject_ = null;
-    this.paragraphElement_ = null;
-  }
-
-  /**
-   * Callback fired when an edit starts.
-   *
-   * Bring the comment to the top of the stack when clicked on. Also cache the
-   * current text so it can be used to fire a change event.
-   * @param {!Event} _e Mouse up event.
-   * @private
-   */
-  startEdit_(_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.
-      this.textarea_.focus();
-    }
-
-    this.cachedText_ = this.model_.text;
-  }
-
-  /**
-   * Get the dimensions of this comment's bubble.
-   * @return {Size} Object with width and height properties.
-   */
-  getBubbleSize() {
-    return this.model_.size;
-  }
-
-  /**
-   * Size this comment's bubble.
-   * @param {number} width Width of the bubble.
-   * @param {number} height Height of the bubble.
-   */
-  setBubbleSize(width, height) {
-    if (this.bubble_) {
-      this.bubble_.setBubbleSize(width, height);
-    } else {
-      this.model_.size.width = width;
-      this.model_.size.height = height;
-    }
-  }
-
-  /**
-   * Update the comment's view to match the model.
-   * @package
-   */
-  updateText() {
-    if (this.textarea_) {
-      this.textarea_.value = this.model_.text;
-    } else if (this.paragraphElement_) {
-      // Non-Editable mode.
-      // TODO (#2917): If 2917 gets added this will probably need to be updated.
-      this.paragraphElement_.firstChild.textContent = this.model_.text;
-    }
-  }
-
-  /**
-   * Dispose of this comment.
-   *
-   * If you want to receive a comment "delete" event (newValue: null), then this
-   * should not be called directly. Instead call block.setCommentText(null);
-   */
-  dispose() {
-    this.block_.comment = null;
-    Icon.prototype.dispose.call(this);
-  }
-}
-
-/**
- * CSS for block comment.  See css.js for use.
- */
-Css.register(`
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-`);
-
-exports.Comment = Comment;

package/core/common.js

@@ -1,265 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview Common functions used both internally and externally, but which
- * must not be at the top level to avoid circular dependencies.
- */
-'use strict';
-
-/**
- * Common functions used both internally and externally, but which
- * must not be at the top level to avoid circular dependencies.
- * @namespace Blockly.common
- */
-goog.module('Blockly.common');
-
-/* eslint-disable-next-line no-unused-vars */
-const {BlockDefinition, Blocks} = goog.require('Blockly.blocks');
-/* eslint-disable-next-line no-unused-vars */
-const {Connection} = goog.requireType('Blockly.Connection');
-/* eslint-disable-next-line no-unused-vars */
-const {ICopyable} = goog.requireType('Blockly.ICopyable');
-/* eslint-disable-next-line no-unused-vars */
-const {Block} = goog.requireType('Blockly.Block');
-/* eslint-disable-next-line no-unused-vars */
-const {WorkspaceSvg} = goog.requireType('Blockly.WorkspaceSvg');
-/* eslint-disable-next-line no-unused-vars */
-const {Workspace} = goog.requireType('Blockly.Workspace');
-
-
-/**
- * The main workspace most recently used.
- * Set by Blockly.WorkspaceSvg.prototype.markFocused
- * @type {!Workspace}
- */
-let mainWorkspace;
-
-/**
- * Returns the last used top level workspace (based on focus).  Try not to use
- * this function, particularly if there are multiple Blockly instances on a
- * page.
- * @return {!Workspace} The main workspace.
- * @alias Blockly.common.getMainWorkspace
- */
-const getMainWorkspace = function() {
-  return mainWorkspace;
-};
-exports.getMainWorkspace = getMainWorkspace;
-
-/**
- * Sets last used main workspace.
- * @param {!Workspace} workspace The most recently used top level workspace.
- * @alias Blockly.common.setMainWorkspace
- */
-const setMainWorkspace = function(workspace) {
-  mainWorkspace = workspace;
-};
-exports.setMainWorkspace = setMainWorkspace;
-
-/**
- * Currently selected block.
- * @type {?ICopyable}
- */
-let selected = null;
-
-/**
- * Returns the currently selected block.
- * @return {?ICopyable} The currently selected block.
- * @alias Blockly.common.getSelected
- */
-const getSelected = function() {
-  return selected;
-};
-exports.getSelected = getSelected;
-
-/**
- * Sets the currently selected block. This function does not visually mark the
- * block as selected or fire the required events. If you wish to
- * programmatically select a block, use `BlockSvg#select`.
- * @param {?ICopyable} newSelection The newly selected block.
- * @alias Blockly.common.setSelected
- * @package
- */
-const setSelected = function(newSelection) {
-  selected = newSelection;
-};
-exports.setSelected = setSelected;
-
-/**
- * Container element in which to render the WidgetDiv, DropDownDiv and Tooltip.
- * @type {?Element}
- */
-let parentContainer;
-
-/**
- * Get the container element in which to render the WidgetDiv, DropDownDiv and\
- * Tooltip.
- * @return {?Element} The parent container.
- * @alias Blockly.common.getParentContainer
- */
-const getParentContainer = function() {
-  return parentContainer;
-};
-exports.getParentContainer = getParentContainer;
-
-/**
- * Set the parent container.  This is the container element that the WidgetDiv,
- * DropDownDiv, and Tooltip are rendered into the first time `Blockly.inject`
- * is called.
- * This method is a NOP if called after the first ``Blockly.inject``.
- * @param {!Element} newParent The container element.
- * @alias Blockly.common.setParentContainer
- */
-const setParentContainer = function(newParent) {
-  parentContainer = newParent;
-};
-exports.setParentContainer = setParentContainer;
-
-/**
- * Size the SVG image to completely fill its container. Call this when the view
- * actually changes sizes (e.g. on a window resize/device orientation change).
- * See workspace.resizeContents to resize the workspace when the contents
- * change (e.g. when a block is added or removed).
- * Record the height/width of the SVG image.
- * @param {!WorkspaceSvg} workspace Any workspace in the SVG.
- * @alias Blockly.common.svgResize
- */
-const svgResize = function(workspace) {
-  let mainWorkspace = workspace;
-  while (mainWorkspace.options.parentWorkspace) {
-    mainWorkspace = mainWorkspace.options.parentWorkspace;
-  }
-  const svg = mainWorkspace.getParentSvg();
-  const cachedSize = mainWorkspace.getCachedParentSvgSize();
-  const div = svg.parentNode;
-  if (!div) {
-    // Workspace deleted, or something.
-    return;
-  }
-  const width = div.offsetWidth;
-  const height = div.offsetHeight;
-  if (cachedSize.width !== width) {
-    svg.setAttribute('width', width + 'px');
-    mainWorkspace.setCachedParentSvgSize(width, null);
-  }
-  if (cachedSize.height !== height) {
-    svg.setAttribute('height', height + 'px');
-    mainWorkspace.setCachedParentSvgSize(null, height);
-  }
-  mainWorkspace.resize();
-};
-exports.svgResize = svgResize;
-
-/**
- * All of the connections on blocks that are currently being dragged.
- * @type {!Array<!Connection>}
- */
-exports.draggingConnections = [];
-
-/**
- * Get a map of all the block's descendants mapping their type to the number of
- *    children with that type.
- * @param {!Block} block The block to map.
- * @param {boolean=} opt_stripFollowing Optionally ignore all following
- *    statements (blocks that are not inside a value or statement input
- *    of the block).
- * @return {!Object} Map of types to type counts for descendants of the bock.
- * @alias Blockly.common.getBlockTypeCounts
- */
-const getBlockTypeCounts = function(block, opt_stripFollowing) {
-  const typeCountsMap = Object.create(null);
-  const descendants = block.getDescendants(true);
-  if (opt_stripFollowing) {
-    const nextBlock = block.getNextBlock();
-    if (nextBlock) {
-      const index = descendants.indexOf(nextBlock);
-      descendants.splice(index, descendants.length - index);
-    }
-  }
-  for (let i = 0, checkBlock; (checkBlock = descendants[i]); i++) {
-    if (typeCountsMap[checkBlock.type]) {
-      typeCountsMap[checkBlock.type]++;
-    } else {
-      typeCountsMap[checkBlock.type] = 1;
-    }
-  }
-  return typeCountsMap;
-};
-exports.getBlockTypeCounts = getBlockTypeCounts;
-
-/**
- * Helper function for defining a block from JSON.  The resulting function has
- * the correct value of jsonDef at the point in code where jsonInit is called.
- * @param {!Object} jsonDef The JSON definition of a block.
- * @return {function()} A function that calls jsonInit with the correct value
- *     of jsonDef.
- */
-const jsonInitFactory = function(jsonDef) {
-  return /** @this {Block} */ function() {
-    this.jsonInit(jsonDef);
-  };
-};
-
-/**
- * Define blocks from an array of JSON block definitions, as might be generated
- * by the Blockly Developer Tools.
- * @param {!Array<!Object>} jsonArray An array of JSON block definitions.
- * @alias Blockly.common.defineBlocksWithJsonArray
- */
-const defineBlocksWithJsonArray = function(jsonArray) {
-  defineBlocks(createBlockDefinitionsFromJsonArray(jsonArray));
-};
-exports.defineBlocksWithJsonArray = defineBlocksWithJsonArray;
-
-/**
- * Define blocks from an array of JSON block definitions, as might be generated
- * by the Blockly Developer Tools.
- * @param {!Array<!Object>} jsonArray An array of JSON block definitions.
- * @return {!Object<string, !BlockDefinition>} A map of the block
- *     definitions created.
- * @alias Blockly.common.defineBlocksWithJsonArray
- */
-const createBlockDefinitionsFromJsonArray = function(jsonArray) {
-  const /** @type {!Object<string,!BlockDefinition>} */ blocks = {};
-  for (let i = 0; i < jsonArray.length; i++) {
-    const elem = jsonArray[i];
-    if (!elem) {
-      console.warn(`Block definition #${i} in JSON array is ${elem}. Skipping`);
-      continue;
-    }
-    const type = elem.type;
-    if (!type) {
-      console.warn(
-          `Block definition #${i} in JSON array is missing a type attribute. ` +
-          'Skipping.');
-      continue;
-    }
-    blocks[type] = {init: jsonInitFactory(elem)};
-  }
-  return blocks;
-};
-exports.createBlockDefinitionsFromJsonArray =
-    createBlockDefinitionsFromJsonArray;
-
-/**
- * Add the specified block definitions to the block definitions
- * dictionary (Blockly.Blocks).
- * @param {!Object<string,!BlockDefinition>} blocks A map of block
- *     type names to block definitions.
- * @alias Blockly.common.defineBlocks
- */
-const defineBlocks = function(blocks) {
-  // Iterate over own enumerable properties.
-  for (const type of Object.keys(blocks)) {
-    const definition = blocks[type];
-    if (type in Blocks) {
-      console.warn(`Block definiton "${type}" overwrites previous definition.`);
-    }
-    Blocks[type] = definition;
-  }
-};
-exports.defineBlocks = defineBlocks;