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

package/core/flyout_button.ts

@@ -1,292 +0,0 @@
-/**
- * @license
- * Copyright 2016 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview Class for a button in the flyout.
- */
-
-/**
- * Class for a button in the flyout.
- * @class
- */
-import * as goog from '../closure/goog/goog.js';
-goog.declareModuleId('Blockly.FlyoutButton');
-
-import * as browserEvents from './browser_events.js';
-import * as Css from './css.js';
-import {Coordinate} from './utils/coordinate.js';
-import * as dom from './utils/dom.js';
-import * as parsing from './utils/parsing.js';
-import * as style from './utils/style.js';
-import {Svg} from './utils/svg.js';
-import type * as toolbox from './utils/toolbox.js';
-import type {WorkspaceSvg} from './workspace_svg.js';
-
-
-/**
- * Class for a button or label in the flyout.
- * @alias Blockly.FlyoutButton
- */
-export class FlyoutButton {
-  /** The horizontal margin around the text in the button. */
-  static TEXT_MARGIN_X = 5;
-
-  /** The vertical margin around the text in the button. */
-  static TEXT_MARGIN_Y = 2;
-  private readonly text_: string;
-  private readonly position_: Coordinate;
-  private readonly callbackKey_: string;
-  private readonly cssClass_: string|null;
-
-  /** Mouse up event data. */
-  private onMouseUpWrapper_: browserEvents.Data|null = null;
-  info: toolbox.ButtonOrLabelInfo;
-
-  /** The width of the button's rect. */
-  width = 0;
-
-  /** The height of the button's rect. */
-  height = 0;
-
-  /** The root SVG group for the button or label. */
-  private svgGroup_: SVGGElement|null = null;
-
-  /** The SVG element with the text of the label or button. */
-  private svgText_: SVGTextElement|null = null;
-
-  /**
-   * @param workspace The workspace in which to place this button.
-   * @param targetWorkspace The flyout's target workspace.
-   * @param json The JSON specifying the label/button.
-   * @param isLabel_ Whether this button should be styled as a label.
-   * @internal
-   */
-  constructor(
-      private readonly workspace: WorkspaceSvg,
-      private readonly targetWorkspace: WorkspaceSvg,
-      json: toolbox.ButtonOrLabelInfo, private readonly isLabel_: boolean) {
-    this.text_ = json['text'];
-
-    this.position_ = new Coordinate(0, 0);
-
-    /** The key to the function called when this button is clicked. */
-    this.callbackKey_ =
-        (json as
-         AnyDuringMigration)['callbackKey'] || /* Check the lower case version
-                                                   too to satisfy IE */
-        (json as AnyDuringMigration)['callbackkey'];
-
-    /** If specified, a CSS class to add to this button. */
-    this.cssClass_ = (json as AnyDuringMigration)['web-class'] || null;
-
-    /** The JSON specifying the label / button. */
-    this.info = json;
-  }
-
-  /**
-   * Create the button elements.
-   * @return The button's SVG group.
-   */
-  createDom(): SVGElement {
-    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.toString());
-      shadow?.setAttribute('height', this.height.toString());
-    }
-    rect.setAttribute('width', this.width.toString());
-    rect.setAttribute('height', this.height.toString());
-
-    svgText.setAttribute('x', (this.width / 2).toString());
-    svgText.setAttribute(
-        'y',
-        (this.height / 2 - fontMetrics.height / 2 + fontMetrics.baseline)
-            .toString());
-
-    this.updateTransform_();
-
-    // AnyDuringMigration because:  Argument of type 'SVGGElement | null' is not
-    // assignable to parameter of type 'EventTarget'.
-    this.onMouseUpWrapper_ = browserEvents.conditionalBind(
-        this.svgGroup_ as AnyDuringMigration, '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 x The new x coordinate.
-   * @param y The new y coordinate.
-   */
-  moveTo(x: number, y: number) {
-    this.position_.x = x;
-    this.position_.y = y;
-    this.updateTransform_();
-  }
-
-  /** @return Whether or not the button is a label. */
-  isLabel(): boolean {
-    return this.isLabel_;
-  }
-
-  /**
-   * Location of the button.
-   * @return x, y coordinates.
-   * @internal
-   */
-  getPosition(): Coordinate {
-    return this.position_;
-  }
-
-  /** @return Text of the button. */
-  getButtonText(): string {
-    return this.text_;
-  }
-
-  /**
-   * Get the button's target workspace.
-   * @return The target workspace of the flyout where this button resides.
-   */
-  getTargetWorkspace(): WorkspaceSvg {
-    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 e Mouse up event.
-   */
-  private onMouseUp_(e: Event) {
-    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_) {
-      const callback =
-          this.targetWorkspace.getButtonCallback(this.callbackKey_);
-      if (callback) {
-        callback(this);
-      }
-    }
-  }
-}
-
-/** 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;
-}
-`);

package/core/flyout_horizontal.ts

@@ -1,381 +0,0 @@
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview Horizontal flyout tray containing blocks which may be created.
- */
-
-/**
- * Horizontal flyout tray containing blocks which may be created.
- * @class
- */
-import * as goog from '../closure/goog/goog.js';
-goog.declareModuleId('Blockly.HorizontalFlyout');
-
-import * as browserEvents from './browser_events.js';
-import * as dropDownDiv from './dropdowndiv.js';
-import {Flyout, FlyoutItem} from './flyout_base.js';
-import type {FlyoutButton} from './flyout_button.js';
-import type {Options} from './options.js';
-import * as registry from './registry.js';
-import {Scrollbar} from './scrollbar.js';
-import type {Coordinate} from './utils/coordinate.js';
-import {Rect} from './utils/rect.js';
-import * as toolbox from './utils/toolbox.js';
-import * as WidgetDiv from './widgetdiv.js';
-
-
-/**
- * Class for a flyout.
- * @alias Blockly.HorizontalFlyout
- */
-export class HorizontalFlyout extends Flyout {
-  override horizontalLayout = true;
-  // Record the width for workspace metrics.
-  override width_: AnyDuringMigration;
-
-  // Record the height for workspace metrics and .position.
-  override height_: AnyDuringMigration;
-
-  /** @param workspaceOptions Dictionary of options for the workspace. */
-  constructor(workspaceOptions: Options) {
-    super(workspaceOptions);
-  }
-
-  /**
-   * Sets the translation of the flyout to match the scrollbars.
-   * @param xyRatio Contains a y property which is a float between 0 and 1
-   *     specifying the degree of scrolling and a similar x property.
-   */
-  protected override setMetrics_(xyRatio: {x: number, y: number}) {
-    if (!this.isVisible()) {
-      return;
-    }
-
-    const metricsManager = this.workspace_.getMetricsManager();
-    const scrollMetrics = metricsManager.getScrollMetrics();
-    const viewMetrics = metricsManager.getViewMetrics();
-    const absoluteMetrics = metricsManager.getAbsoluteMetrics();
-
-    if (typeof xyRatio.x === 'number') {
-      this.workspace_.scrollX =
-          -(scrollMetrics.left +
-            (scrollMetrics.width - viewMetrics.width) * xyRatio.x);
-    }
-
-    this.workspace_.translate(
-        this.workspace_.scrollX + absoluteMetrics.left,
-        this.workspace_.scrollY + absoluteMetrics.top);
-  }
-
-  /**
-   * Calculates the x coordinate for the flyout position.
-   * @return X coordinate.
-   */
-  override getX(): number {
-    // X is always 0 since this is a horizontal flyout.
-    return 0;
-  }
-
-  /**
-   * Calculates the y coordinate for the flyout position.
-   * @return Y coordinate.
-   */
-  override getY(): number {
-    if (!this.isVisible()) {
-      return 0;
-    }
-    const metricsManager = this.targetWorkspace!.getMetricsManager();
-    const absoluteMetrics = metricsManager.getAbsoluteMetrics();
-    const viewMetrics = metricsManager.getViewMetrics();
-    const toolboxMetrics = metricsManager.getToolboxMetrics();
-
-    let y = 0;
-    const atTop = this.toolboxPosition_ === toolbox.Position.TOP;
-    // If this flyout is not the trashcan flyout (e.g. toolbox or mutator).
-    // Trashcan flyout is opposite the main flyout.
-    if (this.targetWorkspace!.toolboxPosition === this.toolboxPosition_) {
-      // If there is a category toolbox.
-      // Simple (flyout-only) toolbox.
-      if (this.targetWorkspace!.getToolbox()) {
-        if (atTop) {
-          y = toolboxMetrics.height;
-        } else {
-          y = viewMetrics.height - this.height_;
-        }
-      } else {
-        if (atTop) {
-          y = 0;
-        } else {
-          // The simple flyout does not cover the workspace.
-          y = viewMetrics.height;
-        }
-      }
-    } else {
-      if (atTop) {
-        y = 0;
-      } else {
-        // Because the anchor point of the flyout is on the top, but we want
-        // to align the bottom edge of the flyout with the bottom edge of the
-        // blocklyDiv, we calculate the full height of the div minus the height
-        // of the flyout.
-        y = viewMetrics.height + absoluteMetrics.top - this.height_;
-      }
-    }
-
-    return y;
-  }
-
-  /** Move the flyout to the edge of the workspace. */
-  override position() {
-    if (!this.isVisible() || !this.targetWorkspace!.isVisible()) {
-      return;
-    }
-    const metricsManager = this.targetWorkspace!.getMetricsManager();
-    const targetWorkspaceViewMetrics = metricsManager.getViewMetrics();
-    this.width_ = targetWorkspaceViewMetrics.width;
-
-    const edgeWidth = targetWorkspaceViewMetrics.width - 2 * this.CORNER_RADIUS;
-    const edgeHeight = this.height_ - this.CORNER_RADIUS;
-    this.setBackgroundPath_(edgeWidth, edgeHeight);
-
-    const x = this.getX();
-    const y = this.getY();
-
-    this.positionAt_(this.width_, this.height_, x, y);
-  }
-
-  /**
-   * Create and set the path for the visible boundaries of the flyout.
-   * @param width The width of the flyout, not including the rounded corners.
-   * @param height The height of the flyout, not including rounded corners.
-   */
-  private setBackgroundPath_(width: number, height: number) {
-    const atTop = this.toolboxPosition_ === toolbox.Position.TOP;
-    // Start at top left.
-    const path: (string|number)[] = ['M 0,' + (atTop ? 0 : this.CORNER_RADIUS)];
-
-    if (atTop) {
-      // Top.
-      path.push('h', width + 2 * this.CORNER_RADIUS);
-      // Right.
-      path.push('v', height);
-      // Bottom.
-      path.push(
-          'a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, 1,
-          -this.CORNER_RADIUS, this.CORNER_RADIUS);
-      path.push('h', -width);
-      // Left.
-      path.push(
-          'a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, 1,
-          -this.CORNER_RADIUS, -this.CORNER_RADIUS);
-      path.push('z');
-    } else {
-      // Top.
-      path.push(
-          'a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, 1,
-          this.CORNER_RADIUS, -this.CORNER_RADIUS);
-      path.push('h', width);
-      // Right.
-      path.push(
-          'a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, 1,
-          this.CORNER_RADIUS, this.CORNER_RADIUS);
-      path.push('v', height);
-      // Bottom.
-      path.push('h', -width - 2 * this.CORNER_RADIUS);
-      // Left.
-      path.push('z');
-    }
-    this.svgBackground_!.setAttribute('d', path.join(' '));
-  }
-
-  /** Scroll the flyout to the top. */
-  override scrollToStart() {
-    this.workspace_.scrollbar.setX(this.RTL ? Infinity : 0);
-  }
-
-  /**
-   * Scroll the flyout.
-   * @param e Mouse wheel scroll event.
-   */
-  protected override wheel_(e: WheelEvent) {
-    const scrollDelta = browserEvents.getScrollDeltaPixels(e);
-    const delta = scrollDelta.x || scrollDelta.y;
-
-    if (delta) {
-      const metricsManager = this.workspace_.getMetricsManager();
-      const scrollMetrics = metricsManager.getScrollMetrics();
-      const viewMetrics = metricsManager.getViewMetrics();
-
-      const pos = viewMetrics.left - scrollMetrics.left + delta;
-      this.workspace_.scrollbar.setX(pos);
-      // When the flyout moves from a wheel event, hide WidgetDiv and
-      // dropDownDiv.
-      WidgetDiv.hide();
-      dropDownDiv.hideWithoutAnimation();
-    }
-    // Don't scroll the page.
-    e.preventDefault();
-    // Don't propagate mousewheel event (zooming).
-    e.stopPropagation();
-  }
-
-  /**
-   * Lay out the blocks in the flyout.
-   * @param contents The blocks and buttons to lay out.
-   * @param gaps The visible gaps between blocks.
-   */
-  protected override layout_(contents: FlyoutItem[], gaps: number[]) {
-    this.workspace_.scale = this.targetWorkspace!.scale;
-    const margin = this.MARGIN;
-    let cursorX = margin + this.tabWidth_;
-    const cursorY = margin;
-    if (this.RTL) {
-      contents = contents.reverse();
-    }
-
-    for (let i = 0, item; item = contents[i]; i++) {
-      if (item.type === 'block') {
-        const block = item.block;
-        const allBlocks = block!.getDescendants(false);
-        for (let j = 0, child; child = allBlocks[j]; j++) {
-          // Mark blocks as being inside a flyout.  This is used to detect and
-          // prevent the closure of the flyout if the user right-clicks on such
-          // a block.
-          child.isInFlyout = true;
-        }
-        block!.render();
-        const root = block!.getSvgRoot();
-        const blockHW = block!.getHeightWidth();
-        // Figure out where to place the block.
-        const tab = block!.outputConnection ? this.tabWidth_ : 0;
-        let moveX;
-        if (this.RTL) {
-          moveX = cursorX + blockHW.width;
-        } else {
-          moveX = cursorX - tab;
-        }
-        block!.moveBy(moveX, cursorY);
-
-        // AnyDuringMigration because:  Argument of type 'BlockSvg | undefined'
-        // is not assignable to parameter of type 'BlockSvg'.
-        const rect = this.createRect_(
-            block as AnyDuringMigration, moveX, cursorY, blockHW, i);
-        cursorX += blockHW.width + gaps[i];
-
-        // AnyDuringMigration because:  Argument of type 'BlockSvg | undefined'
-        // is not assignable to parameter of type 'BlockSvg'.
-        this.addBlockListeners_(root, block as AnyDuringMigration, rect);
-      } else if (item.type === 'button') {
-        const button = item.button as FlyoutButton;
-        this.initFlyoutButton_(button, cursorX, cursorY);
-        cursorX += button.width + gaps[i];
-      }
-    }
-  }
-
-  /**
-   * Determine if a drag delta is toward the workspace, based on the position
-   * and orientation of the flyout. This is used in determineDragIntention_ to
-   * determine if a new block should be created or if the flyout should scroll.
-   * @param currentDragDeltaXY How far the pointer has moved from the position
-   *     at mouse down, in pixel units.
-   * @return True if the drag is toward the workspace.
-   * @internal
-   */
-  override isDragTowardWorkspace(currentDragDeltaXY: Coordinate): boolean {
-    const dx = currentDragDeltaXY.x;
-    const dy = currentDragDeltaXY.y;
-    // Direction goes from -180 to 180, with 0 toward the right and 90 on top.
-    const dragDirection = Math.atan2(dy, dx) / Math.PI * 180;
-
-    const range = this.dragAngleRange_;
-    // Check for up or down dragging.
-    if (dragDirection < 90 + range && dragDirection > 90 - range ||
-        dragDirection > -90 - range && dragDirection < -90 + range) {
-      return true;
-    }
-    return false;
-  }
-
-  /**
-   * Returns the bounding rectangle of the drag target area in pixel units
-   * relative to viewport.
-   * @return The component's bounding box. Null if drag target area should be
-   *     ignored.
-   */
-  override getClientRect(): Rect|null {
-    if (!this.svgGroup_ || this.autoClose || !this.isVisible()) {
-      // The bounding rectangle won't compute correctly if the flyout is closed
-      // and auto-close flyouts aren't valid drag targets (or delete areas).
-      return null;
-    }
-
-    const flyoutRect = this.svgGroup_.getBoundingClientRect();
-    // BIG_NUM is offscreen padding so that blocks dragged beyond the shown
-    // flyout area are still deleted.  Must be larger than the largest screen
-    // size, but be smaller than half Number.MAX_SAFE_INTEGER (not available on
-    // IE).
-    const BIG_NUM = 1000000000;
-    const top = flyoutRect.top;
-
-    if (this.toolboxPosition_ === toolbox.Position.TOP) {
-      const height = flyoutRect.height;
-      return new Rect(-BIG_NUM, top + height, -BIG_NUM, BIG_NUM);
-    } else {  // Bottom.
-      return new Rect(top, BIG_NUM, -BIG_NUM, BIG_NUM);
-    }
-  }
-
-  /**
-   * Compute height of flyout.  toolbox.Position mat under each block.
-   * For RTL: Lay out the blocks right-aligned.
-   */
-  protected override reflowInternal_() {
-    this.workspace_.scale = this.getFlyoutScale();
-    let flyoutHeight = 0;
-    const blocks = this.workspace_.getTopBlocks(false);
-    for (let i = 0, block; block = blocks[i]; i++) {
-      flyoutHeight = Math.max(flyoutHeight, block.getHeightWidth().height);
-    }
-    const buttons = this.buttons_;
-    for (let i = 0, button; button = buttons[i]; i++) {
-      flyoutHeight = Math.max(flyoutHeight, button.height);
-    }
-    flyoutHeight += this.MARGIN * 1.5;
-    flyoutHeight *= this.workspace_.scale;
-    flyoutHeight += Scrollbar.scrollbarThickness;
-
-    if (this.height_ !== flyoutHeight) {
-      for (let i = 0, block; block = blocks[i]; i++) {
-        if (this.rectMap_.has(block)) {
-          // AnyDuringMigration because:  Argument of type 'SVGElement |
-          // undefined' is not assignable to parameter of type 'SVGElement'.
-          this.moveRectToBlock_(
-              this.rectMap_.get(block) as AnyDuringMigration, block);
-        }
-      }
-
-      if (this.targetWorkspace!.toolboxPosition === this.toolboxPosition_ &&
-          this.toolboxPosition_ === toolbox.Position.TOP &&
-          !this.targetWorkspace!.getToolbox()) {
-        // This flyout is a simple toolbox. Reposition the workspace so that
-        // (0,0) is in the correct position relative to the new absolute edge
-        // (ie toolbox edge).
-        this.targetWorkspace!.translate(
-            this.targetWorkspace!.scrollX,
-            this.targetWorkspace!.scrollY + flyoutHeight);
-      }
-      this.height_ = flyoutHeight;
-      this.position();
-      this.targetWorkspace!.recordDragTargets();
-    }
-  }
-}
-
-registry.register(
-    registry.Type.FLYOUTS_HORIZONTAL_TOOLBOX, registry.DEFAULT,
-    HorizontalFlyout);