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

package/core/comment.ts

@@ -1,398 +0,0 @@
-/**
- * @license
- * Copyright 2011 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview Object representing a code comment.
- */
-
-/**
- * Object representing a code comment.
- * @class
- */
-import * as goog from '../closure/goog/goog.js';
-goog.declareModuleId('Blockly.Comment');
-
-/* eslint-disable-next-line no-unused-vars */
-// Unused import preserved for side-effects. Remove if unneeded.
-// import './block.js';
-/* eslint-disable-next-line no-unused-vars */
-// Unused import preserved for side-effects. Remove if unneeded.
-// import './workspace_svg.js';
-// Unused import preserved for side-effects. Remove if unneeded.
-import './events/events_block_change.js';
-// Unused import preserved for side-effects. Remove if unneeded.
-import './events/events_bubble_open.js';
-// Unused import preserved for side-effects. Remove if unneeded.
-// import './warning.js';
-
-import type {CommentModel} from './block.js';
-import type {BlockSvg} from './block_svg.js';
-import * as browserEvents from './browser_events.js';
-import {Bubble} from './bubble.js';
-import * as Css from './css.js';
-import * as eventUtils from './events/utils.js';
-import {Icon} from './icon.js';
-import type {Coordinate} from './utils/coordinate.js';
-import * as dom from './utils/dom.js';
-import type {Size} from './utils/size.js';
-import {Svg} from './utils/svg.js';
-import * as userAgent from './utils/useragent.js';
-
-
-/**
- * Class for a comment.
- * @alias Blockly.Comment
- */
-export class Comment extends Icon {
-  private readonly model_: CommentModel;
-
-  /**
-   * 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.
-   */
-  private cachedText_: string|null = '';
-
-  /** Mouse up event data. */
-  private onMouseUpWrapper_: browserEvents.Data|null = null;
-
-  /** Wheel event data. */
-  private onWheelWrapper_: browserEvents.Data|null = null;
-
-  /** Change event data. */
-  private onChangeWrapper_: browserEvents.Data|null = null;
-
-  /** Input event data. */
-  private onInputWrapper_: browserEvents.Data|null = null;
-
-  /**
-   * The SVG element that contains the text edit area, or null if not created.
-   */
-  private foreignObject_: SVGForeignObjectElement|null = null;
-
-  /** The editable text area, or null if not created. */
-  private textarea_: HTMLTextAreaElement|null = null;
-
-  /** The top-level node of the comment text, or null if not created. */
-  private paragraphElement_: SVGTextElement|null = null;
-  override bubble_: AnyDuringMigration;
-
-  /** @param block The block associated with this comment. */
-  constructor(block: BlockSvg) {
-    super(block);
-
-    /** The model for this comment. */
-    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 ?? '';
-
-    this.createIcon();
-  }
-
-  /**
-   * Draw the comment icon.
-   * @param group The icon group.
-   */
-  protected override drawIcon_(group: Element) {
-    // 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 The top-level node of the editor.
-   */
-  private createEditor_(): SVGElement {
-    /* 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});
-
-    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') as
-        HTMLTextAreaElement;
-    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: Event) {
-          e.stopPropagation();
-        });
-    this.onChangeWrapper_ = browserEvents.conditionalBind(
-        textarea, 'change', this,
-        /** @param _e Unused event parameter. */
-        function(this: Comment, _e: Event) {
-          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,
-        /** @param _e Unused event parameter. */
-        function(this: Comment, _e: Event) {
-          this.model_.text = textarea.value;
-        });
-
-    setTimeout(textarea.focus.bind(textarea), 0);
-
-    // AnyDuringMigration because:  Type 'SVGForeignObjectElement | null' is not
-    // assignable to type 'SVGElement'.
-    return this.foreignObject_ as AnyDuringMigration;
-  }
-
-  /** 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;
-    // AnyDuringMigration because:  Argument of type 'number' is not assignable
-    // to parameter of type 'string'.
-    this.foreignObject_!.setAttribute(
-        'width', widthMinusBorder as AnyDuringMigration);
-    // AnyDuringMigration because:  Argument of type 'number' is not assignable
-    // to parameter of type 'string'.
-    this.foreignObject_!.setAttribute(
-        'height', heightMinusBorder as AnyDuringMigration);
-    this.textarea_!.style.width = widthMinusBorder - 4 + 'px';
-    this.textarea_!.style.height = heightMinusBorder - 4 + 'px';
-  }
-
-  /**
-   * Show or hide the comment bubble.
-   * @param visible True if the bubble should be visible.
-   */
-  override setVisible(visible: boolean) {
-    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(
-        this.block_.workspace, this.createEditor_(),
-        this.block_.pathObject.svgPath, (this.iconXY_ as Coordinate),
-        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.
-   * @suppress {checkTypes} Suppress `this` type mismatch.
-   */
-  private createNonEditableBubble_() {
-    // TODO (#2917): It would be great if the comment could support line breaks.
-    this.paragraphElement_ = Bubble.textToDom(this.model_.text ?? '');
-    this.bubble_ = Bubble.createNonEditableBubble(
-        this.paragraphElement_, (this.block_), this.iconXY_ as Coordinate);
-    this.applyColour();
-  }
-
-  /**
-   * Dispose of the bubble.
-   * @suppress {checkTypes} Suppress `this` type mismatch.
-   */
-  private 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 _e Mouse up event.
-   */
-  private startEdit_(_e: Event) {
-    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 Object with width and height properties.
-   */
-  getBubbleSize(): Size {
-    return this.model_.size;
-  }
-
-  /**
-   * Size this comment's bubble.
-   * @param width Width of the bubble.
-   * @param height Height of the bubble.
-   */
-  setBubbleSize(width: number, height: number) {
-    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.
-   * @internal
-   */
-  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);
-   */
-  override dispose() {
-    this.block_.comment = null;
-    super.dispose();
-  }
-}
-
-/** 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;
-}
-`);

package/core/common.ts

@@ -1,288 +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.
- */
-
-/**
- * Common functions used both internally and externally, but which
- * must not be at the top level to avoid circular dependencies.
- * @namespace Blockly.common
- */
-import * as goog from '../closure/goog/goog.js';
-goog.declareModuleId('Blockly.common');
-
-/* eslint-disable-next-line no-unused-vars */
-import type {Block} from './block.js';
-import {BlockDefinition, Blocks} from './blocks.js';
-import type {Connection} from './connection.js';
-import type {ICopyable} from './interfaces/i_copyable.js';
-import type {Workspace} from './workspace.js';
-import type {WorkspaceSvg} from './workspace_svg.js';
-
-
-/** Database of all workspaces. */
-const WorkspaceDB_ = Object.create(null);
-
-
-/**
- * Find the workspace with the specified ID.
- * @param id ID of workspace to find.
- * @return The sought after workspace or null if not found.
- */
-export function getWorkspaceById(id: string): Workspace|null {
-  return WorkspaceDB_[id] || null;
-}
-
-/**
- * Find all workspaces.
- * @return Array of workspaces.
- */
-export function getAllWorkspaces(): Workspace[] {
-  const workspaces = [];
-  for (const workspaceId in WorkspaceDB_) {
-    workspaces.push(WorkspaceDB_[workspaceId]);
-  }
-  return workspaces;
-}
-
-export function registerWorkspace(workspace: Workspace) {
-  WorkspaceDB_[workspace.id] = workspace;
-}
-
-export function unregisterWorkpace(workspace: Workspace) {
-  delete WorkspaceDB_[workspace.id];
-}
-
-/**
- * The main workspace most recently used.
- * Set by Blockly.WorkspaceSvg.prototype.markFocused
- */
-let mainWorkspace: Workspace;
-
-/**
- * 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 The main workspace.
- * @alias Blockly.common.getMainWorkspace
- */
-export function getMainWorkspace(): Workspace {
-  return mainWorkspace;
-}
-
-/**
- * Sets last used main workspace.
- * @param workspace The most recently used top level workspace.
- * @alias Blockly.common.setMainWorkspace
- */
-export function setMainWorkspace(workspace: Workspace) {
-  mainWorkspace = workspace;
-}
-
-/**
- * Currently selected copyable object.
- */
-let selected: ICopyable|null = null;
-
-/**
- * Returns the currently selected copyable object.
- * @alias Blockly.common.getSelected
- */
-export function getSelected(): ICopyable|null {
-  return selected;
-}
-
-/**
- * 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 newSelection The newly selected block.
- * @alias Blockly.common.setSelected
- * @internal
- */
-export function setSelected(newSelection: ICopyable|null) {
-  selected = newSelection;
-}
-
-/**
- * Container element in which to render the WidgetDiv, DropDownDiv and Tooltip.
- */
-let parentContainer: Element|null;
-
-/**
- * Get the container element in which to render the WidgetDiv, DropDownDiv and\
- * Tooltip.
- * @return The parent container.
- * @alias Blockly.common.getParentContainer
- */
-export function getParentContainer(): Element|null {
-  return parentContainer;
-}
-
-/**
- * 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 newParent The container element.
- * @alias Blockly.common.setParentContainer
- */
-export function setParentContainer(newParent: Element) {
-  parentContainer = newParent;
-}
-
-/**
- * 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 workspace Any workspace in the SVG.
- * @alias Blockly.common.svgResize
- */
-export function svgResize(workspace: WorkspaceSvg) {
-  let mainWorkspace = workspace;
-  while (mainWorkspace.options.parentWorkspace) {
-    mainWorkspace = mainWorkspace.options.parentWorkspace;
-  }
-  const svg = mainWorkspace.getParentSvg();
-  const cachedSize = mainWorkspace.getCachedParentSvgSize();
-  const div = svg.parentElement;
-  if (!(div instanceof HTMLElement)) {
-    // 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();
-}
-
-/**
- * All of the connections on blocks that are currently being dragged.
- */
-export const draggingConnections: Connection[] = [];
-
-/**
- * Get a map of all the block's descendants mapping their type to the number of
- *    children with that type.
- * @param block The block to map.
- * @param opt_stripFollowing Optionally ignore all following
- *    statements (blocks that are not inside a value or statement input
- *    of the block).
- * @return Map of types to type counts for descendants of the bock.
- * @alias Blockly.common.getBlockTypeCounts
- */
-export function getBlockTypeCounts(
-    block: Block, opt_stripFollowing?: boolean): AnyDuringMigration {
-  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;
-}
-
-/**
- * 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 jsonDef The JSON definition of a block.
- * @return A function that calls jsonInit with the correct value
- *     of jsonDef.
- */
-function jsonInitFactory(jsonDef: AnyDuringMigration): () => void {
-  return function(this: Block) {
-    this.jsonInit(jsonDef);
-  };
-}
-
-/**
- * Define blocks from an array of JSON block definitions, as might be generated
- * by the Blockly Developer Tools.
- * @param jsonArray An array of JSON block definitions.
- * @alias Blockly.common.defineBlocksWithJsonArray
- */
-export function defineBlocksWithJsonArray(jsonArray: AnyDuringMigration[]) {
-  TEST_ONLY.defineBlocksWithJsonArrayInternal(jsonArray);
-}
-
-/**
- * Private version of defineBlocksWithJsonArray for stubbing in tests.
- */
-function defineBlocksWithJsonArrayInternal(jsonArray: AnyDuringMigration[]) {
-  defineBlocks(createBlockDefinitionsFromJsonArray(jsonArray));
-}
-
-/**
- * Define blocks from an array of JSON block definitions, as might be generated
- * by the Blockly Developer Tools.
- * @param jsonArray An array of JSON block definitions.
- * @return A map of the block
- *     definitions created.
- * @alias Blockly.common.defineBlocksWithJsonArray
- */
-export function createBlockDefinitionsFromJsonArray(
-    jsonArray: AnyDuringMigration[]): {[key: string]: BlockDefinition} {
-  const blocks: {[key: string]: BlockDefinition} = {};
-  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;
-}
-
-/**
- * Add the specified block definitions to the block definitions
- * dictionary (Blockly.Blocks).
- * @param blocks A map of block
- *     type names to block definitions.
- * @alias Blockly.common.defineBlocks
- */
-export function defineBlocks(blocks: {[key: string]: BlockDefinition}) {
-  // 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;
-  }
-}
-
-export const TEST_ONLY = {defineBlocksWithJsonArrayInternal};