blockly 8.0.5 → 9.0.0-beta.0

package/core/flyout_button.d.ts

@@ -0,0 +1,81 @@
+/**
+ * @license
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Coordinate } from './utils/coordinate.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 declare class FlyoutButton {
+    private readonly workspace;
+    private readonly targetWorkspace;
+    private readonly isLabel_;
+    /** The horizontal margin around the text in the button. */
+    static TEXT_MARGIN_X: number;
+    /** The vertical margin around the text in the button. */
+    static TEXT_MARGIN_Y: number;
+    private readonly text_;
+    private readonly position_;
+    private readonly callbackKey_;
+    private readonly cssClass_;
+    /** Mouse up event data. */
+    private onMouseUpWrapper_;
+    info: toolbox.ButtonOrLabelInfo;
+    /** The width of the button's rect. */
+    width: number;
+    /** The height of the button's rect. */
+    height: number;
+    /** The root SVG group for the button or label. */
+    private svgGroup_;
+    /** The SVG element with the text of the label or button. */
+    private svgText_;
+    /**
+     * @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(workspace: WorkspaceSvg, targetWorkspace: WorkspaceSvg, json: toolbox.ButtonOrLabelInfo, isLabel_: boolean);
+    /**
+     * Create the button elements.
+     * @return The button's SVG group.
+     */
+    createDom(): SVGElement;
+    /** Correctly position the flyout button and make it visible. */
+    show(): void;
+    /** Update SVG attributes to match internal state. */
+    private updateTransform_;
+    /**
+     * 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): void;
+    /** @return Whether or not the button is a label. */
+    isLabel(): boolean;
+    /**
+     * Location of the button.
+     * @return x, y coordinates.
+     * @internal
+     */
+    getPosition(): Coordinate;
+    /** @return Text of the button. */
+    getButtonText(): string;
+    /**
+     * Get the button's target workspace.
+     * @return The target workspace of the flyout where this button resides.
+     */
+    getTargetWorkspace(): WorkspaceSvg;
+    /** Dispose of this button. */
+    dispose(): void;
+    /**
+     * Do something when the button is clicked.
+     * @param e Mouse up event.
+     */
+    private onMouseUp_;
+}

package/core/flyout_button.ts

@@ -0,0 +1,292 @@
+/**
+ * @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.d.ts

@@ -0,0 +1,82 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Flyout, FlyoutItem } from './flyout_base.js';
+import type { Options } from './options.js';
+import type { Coordinate } from './utils/coordinate.js';
+import { Rect } from './utils/rect.js';
+/**
+ * Class for a flyout.
+ * @alias Blockly.HorizontalFlyout
+ */
+export declare class HorizontalFlyout extends Flyout {
+    horizontalLayout: boolean;
+    width_: any;
+    height_: any;
+    /** @param workspaceOptions Dictionary of options for the workspace. */
+    constructor(workspaceOptions: Options);
+    /**
+     * 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 setMetrics_(xyRatio: {
+        x: number;
+        y: number;
+    }): void;
+    /**
+     * Calculates the x coordinate for the flyout position.
+     * @return X coordinate.
+     */
+    getX(): number;
+    /**
+     * Calculates the y coordinate for the flyout position.
+     * @return Y coordinate.
+     */
+    getY(): number;
+    /** Move the flyout to the edge of the workspace. */
+    position(): void;
+    /**
+     * 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_;
+    /** Scroll the flyout to the top. */
+    scrollToStart(): void;
+    /**
+     * Scroll the flyout.
+     * @param e Mouse wheel scroll event.
+     */
+    protected wheel_(e: WheelEvent): void;
+    /**
+     * Lay out the blocks in the flyout.
+     * @param contents The blocks and buttons to lay out.
+     * @param gaps The visible gaps between blocks.
+     */
+    protected layout_(contents: FlyoutItem[], gaps: number[]): void;
+    /**
+     * 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
+     */
+    isDragTowardWorkspace(currentDragDeltaXY: Coordinate): boolean;
+    /**
+     * 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.
+     */
+    getClientRect(): Rect | null;
+    /**
+     * Compute height of flyout.  toolbox.Position mat under each block.
+     * For RTL: Lay out the blocks right-aligned.
+     */
+    protected reflowInternal_(): void;
+}