blockly 8.0.5 → 9.0.0-beta.0

package/core/flyout_button.js

@@ -1,356 +0,0 @@
-/**
- * @license
- * Copyright 2016 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview Class for a button in the flyout.
- */
-'use strict';
-
-/**
- * Class for a button in the flyout.
- * @class
- */
-goog.module('Blockly.FlyoutButton');
-
-const Css = goog.require('Blockly.Css');
-const browserEvents = goog.require('Blockly.browserEvents');
-const dom = goog.require('Blockly.utils.dom');
-const style = goog.require('Blockly.utils.style');
-/* eslint-disable-next-line no-unused-vars */
-const toolbox = goog.requireType('Blockly.utils.toolbox');
-const parsing = goog.require('Blockly.utils.parsing');
-const {Coordinate} = goog.require('Blockly.utils.Coordinate');
-const {Svg} = goog.require('Blockly.utils.Svg');
-/* eslint-disable-next-line no-unused-vars */
-const {WorkspaceSvg} = goog.requireType('Blockly.WorkspaceSvg');
-
-
-/**
- * Class for a button or label in the flyout.
- * @alias Blockly.FlyoutButton
- */
-class FlyoutButton {
-  /**
-   * @param {!WorkspaceSvg} workspace The workspace in which to place this
-   *     button.
-   * @param {!WorkspaceSvg} targetWorkspace The flyout's target workspace.
-   * @param {!toolbox.ButtonOrLabelInfo} json
-   *    The JSON specifying the label/button.
-   * @param {boolean} isLabel Whether this button should be styled as a label.
-   * @package
-   */
-  constructor(workspace, targetWorkspace, json, isLabel) {
-    /**
-     * @type {!WorkspaceSvg}
-     * @private
-     */
-    this.workspace_ = workspace;
-
-    /**
-     * @type {!WorkspaceSvg}
-     * @private
-     */
-    this.targetWorkspace_ = targetWorkspace;
-
-    /**
-     * @type {string}
-     * @private
-     */
-    this.text_ = json['text'];
-
-    /**
-     * @type {!Coordinate}
-     * @private
-     */
-    this.position_ = new Coordinate(0, 0);
-
-    /**
-     * Whether this button should be styled as a label.
-     * Labels behave the same as buttons, but are styled differently.
-     * @type {boolean}
-     * @private
-     */
-    this.isLabel_ = isLabel;
-
-    /**
-     * The key to the function called when this button is clicked.
-     * @type {string}
-     * @private
-     */
-    this.callbackKey_ = json['callbackKey'] ||
-        /* Check the lower case version too to satisfy IE */
-        json['callbackkey'];
-
-    /**
-     * If specified, a CSS class to add to this button.
-     * @type {?string}
-     * @private
-     */
-    this.cssClass_ = json['web-class'] || null;
-
-    /**
-     * Mouse up event data.
-     * @type {?browserEvents.Data}
-     * @private
-     */
-    this.onMouseUpWrapper_ = null;
-
-    /**
-     * The JSON specifying the label / button.
-     * @type {!toolbox.ButtonOrLabelInfo}
-     */
-    this.info = json;
-
-    /**
-     * The width of the button's rect.
-     * @type {number}
-     */
-    this.width = 0;
-
-    /**
-     * The height of the button's rect.
-     * @type {number}
-     */
-    this.height = 0;
-
-    /**
-     * The root SVG group for the button or label.
-     * @type {?SVGGElement}
-     * @private
-     */
-    this.svgGroup_ = null;
-
-    /**
-     * The SVG element with the text of the label or button.
-     * @type {?SVGTextElement}
-     * @private
-     */
-    this.svgText_ = null;
-  }
-
-  /**
-   * Create the button elements.
-   * @return {!SVGElement} The button's SVG group.
-   */
-  createDom() {
-    let cssClass = this.isLabel_ ? 'blocklyFlyoutLabel' : 'blocklyFlyoutButton';
-    if (this.cssClass_) {
-      cssClass += ' ' + this.cssClass_;
-    }
-
-    this.svgGroup_ = dom.createSvgElement(
-        Svg.G, {'class': cssClass}, this.workspace_.getCanvas());
-
-    let shadow;
-    if (!this.isLabel_) {
-      // Shadow rectangle (light source does not mirror in RTL).
-      shadow = dom.createSvgElement(
-          Svg.RECT, {
-            'class': 'blocklyFlyoutButtonShadow',
-            'rx': 4,
-            'ry': 4,
-            'x': 1,
-            'y': 1,
-          },
-          this.svgGroup_);
-    }
-    // Background rectangle.
-    const rect = dom.createSvgElement(
-        Svg.RECT, {
-          'class': this.isLabel_ ? 'blocklyFlyoutLabelBackground' :
-                                   'blocklyFlyoutButtonBackground',
-          'rx': 4,
-          'ry': 4,
-        },
-        this.svgGroup_);
-
-    const svgText = dom.createSvgElement(
-        Svg.TEXT, {
-          'class': this.isLabel_ ? 'blocklyFlyoutLabelText' : 'blocklyText',
-          'x': 0,
-          'y': 0,
-          'text-anchor': 'middle',
-        },
-        this.svgGroup_);
-    let text = parsing.replaceMessageReferences(this.text_);
-    if (this.workspace_.RTL) {
-      // Force text to be RTL by adding an RLM.
-      text += '\u200F';
-    }
-    svgText.textContent = text;
-    if (this.isLabel_) {
-      this.svgText_ = svgText;
-      this.workspace_.getThemeManager().subscribe(
-          this.svgText_, 'flyoutForegroundColour', 'fill');
-    }
-
-    const fontSize = style.getComputedStyle(svgText, 'fontSize');
-    const fontWeight = style.getComputedStyle(svgText, 'fontWeight');
-    const fontFamily = style.getComputedStyle(svgText, 'fontFamily');
-    this.width = dom.getFastTextWidthWithSizeString(
-        svgText, fontSize, fontWeight, fontFamily);
-    const fontMetrics =
-        dom.measureFontMetrics(text, fontSize, fontWeight, fontFamily);
-    this.height = fontMetrics.height;
-
-    if (!this.isLabel_) {
-      this.width += 2 * FlyoutButton.TEXT_MARGIN_X;
-      this.height += 2 * FlyoutButton.TEXT_MARGIN_Y;
-      shadow.setAttribute('width', this.width);
-      shadow.setAttribute('height', this.height);
-    }
-    rect.setAttribute('width', this.width);
-    rect.setAttribute('height', this.height);
-
-    svgText.setAttribute('x', this.width / 2);
-    svgText.setAttribute(
-        'y', this.height / 2 - fontMetrics.height / 2 + fontMetrics.baseline);
-
-    this.updateTransform_();
-
-    this.onMouseUpWrapper_ = browserEvents.conditionalBind(
-        this.svgGroup_, 'mouseup', this, this.onMouseUp_);
-    return this.svgGroup_;
-  }
-
-  /**
-   * Correctly position the flyout button and make it visible.
-   */
-  show() {
-    this.updateTransform_();
-    this.svgGroup_.setAttribute('display', 'block');
-  }
-
-  /**
-   * Update SVG attributes to match internal state.
-   * @private
-   */
-  updateTransform_() {
-    this.svgGroup_.setAttribute(
-        'transform',
-        'translate(' + this.position_.x + ',' + this.position_.y + ')');
-  }
-
-  /**
-   * Move the button to the given x, y coordinates.
-   * @param {number} x The new x coordinate.
-   * @param {number} y The new y coordinate.
-   */
-  moveTo(x, y) {
-    this.position_.x = x;
-    this.position_.y = y;
-    this.updateTransform_();
-  }
-
-  /**
-   * @return {boolean} Whether or not the button is a label.
-   */
-  isLabel() {
-    return this.isLabel_;
-  }
-
-  /**
-   * Location of the button.
-   * @return {!Coordinate} x, y coordinates.
-   * @package
-   */
-  getPosition() {
-    return this.position_;
-  }
-
-  /**
-   * @return {string} Text of the button.
-   */
-  getButtonText() {
-    return this.text_;
-  }
-
-  /**
-   * Get the button's target workspace.
-   * @return {!WorkspaceSvg} The target workspace of the flyout where this
-   *     button resides.
-   */
-  getTargetWorkspace() {
-    return this.targetWorkspace_;
-  }
-
-  /**
-   * Dispose of this button.
-   */
-  dispose() {
-    if (this.onMouseUpWrapper_) {
-      browserEvents.unbind(this.onMouseUpWrapper_);
-    }
-    if (this.svgGroup_) {
-      dom.removeNode(this.svgGroup_);
-    }
-    if (this.svgText_) {
-      this.workspace_.getThemeManager().unsubscribe(this.svgText_);
-    }
-  }
-
-  /**
-   * Do something when the button is clicked.
-   * @param {!Event} e Mouse up event.
-   * @private
-   */
-  onMouseUp_(e) {
-    const gesture = this.targetWorkspace_.getGesture(e);
-    if (gesture) {
-      gesture.cancel();
-    }
-
-    if (this.isLabel_ && this.callbackKey_) {
-      console.warn(
-          'Labels should not have callbacks. Label text: ' + this.text_);
-    } else if (
-        !this.isLabel_ &&
-        !(this.callbackKey_ &&
-          this.targetWorkspace_.getButtonCallback(this.callbackKey_))) {
-      console.warn('Buttons should have callbacks. Button text: ' + this.text_);
-    } else if (!this.isLabel_) {
-      this.targetWorkspace_.getButtonCallback(this.callbackKey_)(this);
-    }
-  }
-}
-
-/**
- * The horizontal margin around the text in the button.
- */
-FlyoutButton.TEXT_MARGIN_X = 5;
-
-/**
- * The vertical margin around the text in the button.
- */
-FlyoutButton.TEXT_MARGIN_Y = 2;
-
-/**
- * CSS for buttons and labels. See css.js for use.
- */
-Css.register(`
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-`);
-
-exports.FlyoutButton = FlyoutButton;

package/core/grid.js

@@ -1,226 +0,0 @@
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview Object for configuring and updating a workspace grid in
- * Blockly.
- */
-'use strict';
-
-/**
- * Object for configuring and updating a workspace grid in
- * Blockly.
- * @class
- */
-goog.module('Blockly.Grid');
-
-const dom = goog.require('Blockly.utils.dom');
-const userAgent = goog.require('Blockly.utils.userAgent');
-const {Svg} = goog.require('Blockly.utils.Svg');
-
-
-/**
- * Class for a workspace's grid.
- * @alias Blockly.Grid
- */
-class Grid {
-  /**
-   * @param {!SVGElement} pattern The grid's SVG pattern, created during
-   *     injection.
-   * @param {!Object} options A dictionary of normalized options for the grid.
-   *     See grid documentation:
-   *     https://developers.google.com/blockly/guides/configure/web/grid
-   */
-  constructor(pattern, options) {
-    /**
-     * The scale of the grid, used to set stroke width on grid lines.
-     * This should always be the same as the workspace scale.
-     * @type {number}
-     * @private
-     */
-    this.scale_ = 1;
-
-    /**
-     * The grid's SVG pattern, created during injection.
-     * @type {!SVGElement}
-     * @private
-     */
-    this.gridPattern_ = pattern;
-
-    /**
-     * The spacing of the grid lines (in px).
-     * @type {number}
-     * @private
-     */
-    this.spacing_ = options['spacing'];
-
-    /**
-     * How long the grid lines should be (in px).
-     * @type {number}
-     * @private
-     */
-    this.length_ = options['length'];
-
-    /**
-     * The horizontal grid line, if it exists.
-     * @type {SVGElement}
-     * @private
-     */
-    this.line1_ = /** @type {SVGElement} */ (pattern.firstChild);
-
-    /**
-     * The vertical grid line, if it exists.
-     * @type {SVGElement}
-     * @private
-     */
-    this.line2_ =
-        this.line1_ && (/** @type {SVGElement} */ (this.line1_.nextSibling));
-
-    /**
-     * Whether blocks should snap to the grid.
-     * @type {boolean}
-     * @private
-     */
-    this.snapToGrid_ = options['snap'];
-  }
-
-  /**
-   * Dispose of this grid and unlink from the DOM.
-   * @package
-   * @suppress {checkTypes}
-   */
-  dispose() {
-    this.gridPattern_ = null;
-  }
-
-  /**
-   * Whether blocks should snap to the grid, based on the initial configuration.
-   * @return {boolean} True if blocks should snap, false otherwise.
-   * @package
-   */
-  shouldSnap() {
-    return this.snapToGrid_;
-  }
-
-  /**
-   * Get the spacing of the grid points (in px).
-   * @return {number} The spacing of the grid points.
-   * @package
-   */
-  getSpacing() {
-    return this.spacing_;
-  }
-
-  /**
-   * Get the ID of the pattern element, which should be randomized to avoid
-   * conflicts with other Blockly instances on the page.
-   * @return {string} The pattern ID.
-   * @package
-   */
-  getPatternId() {
-    return this.gridPattern_.id;
-  }
-
-  /**
-   * Update the grid with a new scale.
-   * @param {number} scale The new workspace scale.
-   * @package
-   */
-  update(scale) {
-    this.scale_ = scale;
-    // MSIE freaks if it sees a 0x0 pattern, so set empty patterns to 100x100.
-    const safeSpacing = (this.spacing_ * scale) || 100;
-
-    this.gridPattern_.setAttribute('width', safeSpacing);
-    this.gridPattern_.setAttribute('height', safeSpacing);
-
-    let half = Math.floor(this.spacing_ / 2) + 0.5;
-    let start = half - this.length_ / 2;
-    let end = half + this.length_ / 2;
-
-    half *= scale;
-    start *= scale;
-    end *= scale;
-
-    this.setLineAttributes_(this.line1_, scale, start, end, half, half);
-    this.setLineAttributes_(this.line2_, scale, half, half, start, end);
-  }
-
-  /**
-   * Set the attributes on one of the lines in the grid.  Use this to update the
-   * length and stroke width of the grid lines.
-   * @param {SVGElement} line Which line to update.
-   * @param {number} width The new stroke size (in px).
-   * @param {number} x1 The new x start position of the line (in px).
-   * @param {number} x2 The new x end position of the line (in px).
-   * @param {number} y1 The new y start position of the line (in px).
-   * @param {number} y2 The new y end position of the line (in px).
-   * @private
-   */
-  setLineAttributes_(line, width, x1, x2, y1, y2) {
-    if (line) {
-      line.setAttribute('stroke-width', width);
-      line.setAttribute('x1', x1);
-      line.setAttribute('y1', y1);
-      line.setAttribute('x2', x2);
-      line.setAttribute('y2', y2);
-    }
-  }
-
-  /**
-   * Move the grid to a new x and y position, and make sure that change is
-   * visible.
-   * @param {number} x The new x position of the grid (in px).
-   * @param {number} y The new y position of the grid (in px).
-   * @package
-   */
-  moveTo(x, y) {
-    this.gridPattern_.setAttribute('x', x);
-    this.gridPattern_.setAttribute('y', y);
-
-    if (userAgent.IE || userAgent.EDGE) {
-      // IE/Edge doesn't notice that the x/y offsets have changed.
-      // Force an update.
-      this.update(this.scale_);
-    }
-  }
-
-  /**
-   * Create the DOM for the grid described by options.
-   * @param {string} rnd A random ID to append to the pattern's ID.
-   * @param {!Object} gridOptions The object containing grid configuration.
-   * @param {!SVGElement} defs The root SVG element for this workspace's defs.
-   * @return {!SVGElement} The SVG element for the grid pattern.
-   * @package
-   */
-  static createDom(rnd, gridOptions, defs) {
-    /*
-      <pattern id="blocklyGridPattern837493" patternUnits="userSpaceOnUse">
-        <rect stroke="#888" />
-        <rect stroke="#888" />
-      </pattern>
-    */
-    const gridPattern = dom.createSvgElement(
-        Svg.PATTERN,
-        {'id': 'blocklyGridPattern' + rnd, 'patternUnits': 'userSpaceOnUse'},
-        defs);
-    if (gridOptions['length'] > 0 && gridOptions['spacing'] > 0) {
-      dom.createSvgElement(
-          Svg.LINE, {'stroke': gridOptions['colour']}, gridPattern);
-      if (gridOptions['length'] > 1) {
-        dom.createSvgElement(
-            Svg.LINE, {'stroke': gridOptions['colour']}, gridPattern);
-      }
-      // x1, y1, x1, x2 properties will be set later in update.
-    } else {
-      // Edge 16 doesn't handle empty patterns
-      dom.createSvgElement(Svg.LINE, {}, gridPattern);
-    }
-    return gridPattern;
-  }
-}
-
-exports.Grid = Grid;