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

package/core/renderers/common/path_object.ts

@@ -1,272 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview An object that owns a block's rendering SVG elements.
- */
-
-/**
- * An object that owns a block's rendering SVG elements.
- * @class
- */
-import * as goog from '../../../closure/goog/goog.js';
-goog.declareModuleId('Blockly.blockRendering.PathObject');
-
-/* eslint-disable-next-line no-unused-vars */
-// Unused import preserved for side-effects. Remove if unneeded.
-// import '../../theme.js';
-
-import type {BlockSvg} from '../../block_svg.js';
-import type {Connection} from '../../connection.js';
-import type {BlockStyle} from '../../theme.js';
-import * as dom from '../../utils/dom.js';
-import {Svg} from '../../utils/svg.js';
-
-import type {ConstantProvider} from './constants.js';
-import type {IPathObject} from './i_path_object.js';
-
-
-/**
- * An object that handles creating and setting each of the SVG elements
- * used by the renderer.
- * @alias Blockly.blockRendering.PathObject
- */
-export class PathObject implements IPathObject {
-  svgRoot: AnyDuringMigration;
-  /** @internal */
-  svgPath: SVGElement;
-
-  /**
-   * Holds the cursors svg element when the cursor is attached to the block.
-   * This is null if there is no cursor on the block.
-   * @internal
-   */
-  // AnyDuringMigration because:  Type 'null' is not assignable to type
-  // 'SVGElement'.
-  cursorSvg: SVGElement = null as AnyDuringMigration;
-
-  /**
-   * Holds the markers svg element when the marker is attached to the block.
-   * This is null if there is no marker on the block.
-   * @internal
-   */
-  // AnyDuringMigration because:  Type 'null' is not assignable to type
-  // 'SVGElement'.
-  markerSvg: SVGElement = null as AnyDuringMigration;
-
-  /** @internal */
-  constants: ConstantProvider;
-  /** @internal */
-  style: BlockStyle;
-
-  /**
-   * @param root The root SVG element.
-   * @param style The style object to use for colouring.
-   * @param constants The renderer's constants.
-   * @internal
-   */
-  constructor(
-      root: SVGElement, style: BlockStyle, constants: ConstantProvider) {
-    this.constants = constants;
-    this.style = style;
-    this.svgRoot = root;
-
-    /** The primary path of the block. */
-    this.svgPath =
-        dom.createSvgElement(Svg.PATH, {'class': 'blocklyPath'}, this.svgRoot);
-  }
-
-  /**
-   * Set the path generated by the renderer onto the respective SVG element.
-   * @param pathString The path.
-   * @internal
-   */
-  setPath(pathString: string) {
-    this.svgPath.setAttribute('d', pathString);
-  }
-
-  /**
-   * Flip the SVG paths in RTL.
-   * @internal
-   */
-  flipRTL() {
-    // Mirror the block's path.
-    this.svgPath.setAttribute('transform', 'scale(-1 1)');
-  }
-
-  /**
-   * Add the cursor SVG to this block's SVG group.
-   * @param cursorSvg The SVG root of the cursor to be added to the block SVG
-   *     group.
-   * @internal
-   */
-  setCursorSvg(cursorSvg: SVGElement) {
-    if (!cursorSvg) {
-      // AnyDuringMigration because:  Type 'null' is not assignable to type
-      // 'SVGElement'.
-      this.cursorSvg = null as AnyDuringMigration;
-      return;
-    }
-
-    this.svgRoot.appendChild(cursorSvg);
-    this.cursorSvg = cursorSvg;
-  }
-
-  /**
-   * Add the marker SVG to this block's SVG group.
-   * @param markerSvg The SVG root of the marker to be added to the block SVG
-   *     group.
-   * @internal
-   */
-  setMarkerSvg(markerSvg: SVGElement) {
-    if (!markerSvg) {
-      // AnyDuringMigration because:  Type 'null' is not assignable to type
-      // 'SVGElement'.
-      this.markerSvg = null as AnyDuringMigration;
-      return;
-    }
-
-    if (this.cursorSvg) {
-      this.svgRoot.insertBefore(markerSvg, this.cursorSvg);
-    } else {
-      this.svgRoot.appendChild(markerSvg);
-    }
-    this.markerSvg = markerSvg;
-  }
-
-  /**
-   * Apply the stored colours to the block's path, taking into account whether
-   * the paths belong to a shadow block.
-   * @param block The source block.
-   * @internal
-   */
-  applyColour(block: BlockSvg) {
-    this.svgPath.setAttribute('stroke', this.style.colourTertiary);
-    this.svgPath.setAttribute('fill', this.style.colourPrimary);
-
-    this.updateShadow_(block.isShadow());
-    this.updateDisabled_(!block.isEnabled() || block.getInheritedDisabled());
-  }
-
-  /**
-   * Set the style.
-   * @param blockStyle The block style to use.
-   * @internal
-   */
-  setStyle(blockStyle: BlockStyle) {
-    this.style = blockStyle;
-  }
-
-  /**
-   * Add or remove the given CSS class on the path object's root SVG element.
-   * @param className The name of the class to add or remove
-   * @param add True if the class should be added.  False if it should be
-   *     removed.
-   */
-  protected setClass_(className: string, add: boolean) {
-    if (add) {
-      dom.addClass(this.svgRoot as Element, className);
-    } else {
-      dom.removeClass(this.svgRoot as Element, className);
-    }
-  }
-
-  /**
-   * Set whether the block shows a highlight or not.  Block highlighting is
-   * often used to visually mark blocks currently being executed.
-   * @param enable True if highlighted.
-   * @internal
-   */
-  updateHighlighted(enable: boolean) {
-    if (enable) {
-      this.svgPath.setAttribute(
-          'filter', 'url(#' + this.constants.embossFilterId + ')');
-    } else {
-      this.svgPath.setAttribute('filter', 'none');
-    }
-  }
-
-  /**
-   * Updates the look of the block to reflect a shadow state.
-   * @param shadow True if the block is a shadow block.
-   */
-  protected updateShadow_(shadow: boolean) {
-    if (shadow) {
-      this.svgPath.setAttribute('stroke', 'none');
-      this.svgPath.setAttribute('fill', this.style.colourSecondary);
-    }
-  }
-
-  /**
-   * Updates the look of the block to reflect a disabled state.
-   * @param disabled True if disabled.
-   */
-  protected updateDisabled_(disabled: boolean) {
-    this.setClass_('blocklyDisabled', disabled);
-    if (disabled) {
-      this.svgPath.setAttribute(
-          'fill', 'url(#' + this.constants.disabledPatternId + ')');
-    }
-  }
-
-  /**
-   * Add or remove styling showing that a block is selected.
-   * @param enable True if selection is enabled, false otherwise.
-   * @internal
-   */
-  updateSelected(enable: boolean) {
-    this.setClass_('blocklySelected', enable);
-  }
-
-  /**
-   * Add or remove styling showing that a block is dragged over a delete area.
-   * @param enable True if the block is being dragged over a delete area, false
-   *     otherwise.
-   * @internal
-   */
-  updateDraggingDelete(enable: boolean) {
-    this.setClass_('blocklyDraggingDelete', enable);
-  }
-
-  /**
-   * Add or remove styling showing that a block is an insertion marker.
-   * @param enable True if the block is an insertion marker, false otherwise.
-   * @internal
-   */
-  updateInsertionMarker(enable: boolean) {
-    this.setClass_('blocklyInsertionMarker', enable);
-  }
-
-  /**
-   * Add or remove styling showing that a block is movable.
-   * @param enable True if the block is movable, false otherwise.
-   * @internal
-   */
-  updateMovable(enable: boolean) {
-    this.setClass_('blocklyDraggable', enable);
-  }
-
-  /**
-   * Add or remove styling that shows that if the dragging block is dropped,
-   * this block will be replaced.  If a shadow block, it will disappear.
-   * Otherwise it will bump.
-   * @param enable True if styling should be added.
-   * @internal
-   */
-  updateReplacementFade(enable: boolean) {
-    this.setClass_('blocklyReplaceable', enable);
-  }
-
-  /**
-   * Add or remove styling that shows that if the dragging block is dropped,
-   * this block will be connected to the input.
-   * @param _conn The connection on the input to highlight.
-   * @param _enable True if styling should be added.
-   * @internal
-   */
-  updateShapeForInputHighlight(_conn: Connection, _enable: boolean) {}
-}
-// NOP

package/core/renderers/common/renderer.ts

@@ -1,271 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview Base renderer.
- */
-
-/**
- * Base renderer.
- * @class
- */
-import * as goog from '../../../closure/goog/goog.js';
-goog.declareModuleId('Blockly.blockRendering.Renderer');
-
-import type {Block} from '../../block.js';
-import type {BlockSvg} from '../../block_svg.js';
-import {Connection} from '../../connection.js';
-import {ConnectionType} from '../../connection_type.js';
-import {InsertionMarkerManager, PreviewType} from '../../insertion_marker_manager.js';
-import type {IRegistrable} from '../../interfaces/i_registrable.js';
-import type {Marker} from '../../keyboard_nav/marker.js';
-import type {RenderedConnection} from '../../rendered_connection.js';
-import type {BlockStyle, Theme} from '../../theme.js';
-import type {WorkspaceSvg} from '../../workspace_svg.js';
-
-import {ConstantProvider} from './constants.js';
-import * as debug from './debug.js';
-import {Debug} from './debugger.js';
-import {Drawer} from './drawer.js';
-import type {IPathObject} from './i_path_object.js';
-import {RenderInfo} from './info.js';
-import {MarkerSvg} from './marker_svg.js';
-import {PathObject} from './path_object.js';
-
-
-/**
- * The base class for a block renderer.
- * @alias Blockly.blockRendering.Renderer
- */
-export class Renderer implements IRegistrable {
-  /** The renderer's constant provider. */
-  protected constants_!: ConstantProvider;
-
-  /** @internal */
-  name: string;
-
-  /**
-   * Rendering constant overrides, passed in through options.
-   * @internal
-   */
-  overrides: object|null = null;
-
-  /**
-   * @param name The renderer name.
-   * @internal
-   */
-  constructor(name: string) {
-    this.name = name;
-  }
-
-  /**
-   * Gets the class name that identifies this renderer.
-   * @return The CSS class name.
-   * @internal
-   */
-  getClassName(): string {
-    return this.name + '-renderer';
-  }
-
-  /**
-   * Initialize the renderer.
-   * @param theme The workspace theme object.
-   * @param opt_rendererOverrides Rendering constant overrides.
-   * @internal
-   */
-  init(theme: Theme, opt_rendererOverrides?: object) {
-    this.constants_ = this.makeConstants_();
-    if (opt_rendererOverrides) {
-      this.overrides = opt_rendererOverrides;
-      Object.assign(this.constants_, opt_rendererOverrides);
-    }
-    this.constants_.setTheme(theme);
-    this.constants_.init();
-  }
-
-  /**
-   * Create any DOM elements that this renderer needs.
-   * @param svg The root of the workspace's SVG.
-   * @param theme The workspace theme object.
-   * @internal
-   */
-  createDom(svg: SVGElement, theme: Theme) {
-    this.constants_.createDom(
-        svg, this.name + '-' + theme.name,
-        '.' + this.getClassName() + '.' + theme.getClassName());
-  }
-
-  /**
-   * Refresh the renderer after a theme change.
-   * @param svg The root of the workspace's SVG.
-   * @param theme The workspace theme object.
-   * @internal
-   */
-  refreshDom(svg: SVGElement, theme: Theme) {
-    const previousConstants = this.getConstants();
-    previousConstants.dispose();
-    this.constants_ = this.makeConstants_();
-    if (this.overrides) {
-      Object.assign(this.constants_, this.overrides);
-    }
-    // Ensure the constant provider's random identifier does not change.
-    this.constants_.randomIdentifier = previousConstants.randomIdentifier;
-    this.constants_.setTheme(theme);
-    this.constants_.init();
-    this.createDom(svg, theme);
-  }
-
-  /**
-   * Dispose of this renderer.
-   * Delete all DOM elements that this renderer and its constants created.
-   * @internal
-   */
-  dispose() {
-    if (this.constants_) {
-      this.constants_.dispose();
-    }
-  }
-
-  /**
-   * Create a new instance of the renderer's constant provider.
-   * @return The constant provider.
-   */
-  protected makeConstants_(): ConstantProvider {
-    return new ConstantProvider();
-  }
-
-  /**
-   * Create a new instance of the renderer's render info object.
-   * @param block The block to measure.
-   * @return The render info object.
-   */
-  protected makeRenderInfo_(block: BlockSvg): RenderInfo {
-    return new RenderInfo(this, block);
-  }
-
-  /**
-   * Create a new instance of the renderer's drawer.
-   * @param block The block to render.
-   * @param info An object containing all information needed to render this
-   *     block.
-   * @return The drawer.
-   */
-  protected makeDrawer_(block: BlockSvg, info: RenderInfo): Drawer {
-    return new Drawer(block, info);
-  }
-
-  /**
-   * Create a new instance of the renderer's debugger.
-   * @return The renderer debugger.
-   * @suppress {strictModuleDepCheck} Debug renderer only included in
-   * playground.
-   */
-  protected makeDebugger_(): Debug {
-    return new Debug(this.getConstants());
-  }
-
-  /**
-   * Create a new instance of the renderer's marker drawer.
-   * @param workspace The workspace the marker belongs to.
-   * @param marker The marker.
-   * @return The object in charge of drawing the marker.
-   * @internal
-   */
-  makeMarkerDrawer(workspace: WorkspaceSvg, marker: Marker): MarkerSvg {
-    return new MarkerSvg(workspace, this.getConstants(), marker);
-  }
-
-  /**
-   * Create a new instance of a renderer path object.
-   * @param root The root SVG element.
-   * @param style The style object to use for colouring.
-   * @return The renderer path object.
-   * @internal
-   */
-  makePathObject(root: SVGElement, style: BlockStyle): IPathObject {
-    return new PathObject(root, style, (this.constants_));
-  }
-
-  /**
-   * Get the current renderer's constant provider.  We assume that when this is
-   * called, the renderer has already been initialized.
-   * @return The constant provider.
-   * @internal
-   */
-  getConstants(): ConstantProvider {
-    return this.constants_;
-  }
-
-  /**
-   * Determine whether or not to highlight a connection.
-   * @param _conn The connection to determine whether or not to highlight.
-   * @return True if we should highlight the connection.
-   * @internal
-   */
-  shouldHighlightConnection(_conn: Connection): boolean {
-    return true;
-  }
-
-  /**
-   * Checks if an orphaned block can connect to the "end" of the topBlock's
-   * block-clump. If the clump is a row the end is the last input. If the clump
-   * is a stack, the end is the last next connection. If the clump is neither,
-   * then this returns false.
-   * @param topBlock The top block of the block clump we want to try and connect
-   *     to.
-   * @param orphanBlock The orphan block that wants to find a home.
-   * @param localType The type of the connection being dragged.
-   * @return Whether there is a home for the orphan or not.
-   * @internal
-   */
-  orphanCanConnectAtEnd(
-      topBlock: BlockSvg, orphanBlock: BlockSvg, localType: number): boolean {
-    const orphanConnection = localType === ConnectionType.OUTPUT_VALUE ?
-        orphanBlock.outputConnection :
-        orphanBlock.previousConnection;
-    return !!Connection.getConnectionForOrphanedConnection(
-        topBlock as Block, orphanConnection as Connection);
-  }
-
-  /**
-   * Chooses a connection preview method based on the available connection, the
-   * current dragged connection, and the block being dragged.
-   * @param closest The available connection.
-   * @param local The connection currently being dragged.
-   * @param topBlock The block currently being dragged.
-   * @return The preview type to display.
-   * @internal
-   */
-  getConnectionPreviewMethod(
-      closest: RenderedConnection, local: RenderedConnection,
-      topBlock: BlockSvg): PreviewType {
-    if (local.type === ConnectionType.OUTPUT_VALUE ||
-        local.type === ConnectionType.PREVIOUS_STATEMENT) {
-      if (!closest.isConnected() ||
-          this.orphanCanConnectAtEnd(
-              topBlock, closest.targetBlock() as BlockSvg, local.type)) {
-        return InsertionMarkerManager.PREVIEW_TYPE.INSERTION_MARKER;
-      }
-      return InsertionMarkerManager.PREVIEW_TYPE.REPLACEMENT_FADE;
-    }
-
-    return InsertionMarkerManager.PREVIEW_TYPE.INSERTION_MARKER;
-  }
-
-  /**
-   * Render the block.
-   * @param block The block to render.
-   * @internal
-   */
-  render(block: BlockSvg) {
-    if (debug.isDebuggerEnabled() && !block.renderingDebugger) {
-      block.renderingDebugger = this.makeDebugger_();
-    }
-    const info = this.makeRenderInfo_(block);
-    info.measure();
-    this.makeDrawer_(block, info).draw();
-  }
-}

package/core/renderers/geras/constants.ts

@@ -1,61 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview An object that provides constants for rendering blocks in Geras
- * mode.
- */
-
-/**
- * An object that provides constants for rendering blocks in Geras
- * mode.
- * @class
- */
-import * as goog from '../../../closure/goog/goog.js';
-goog.declareModuleId('Blockly.geras.ConstantProvider');
-
-import {ConstantProvider as BaseConstantProvider} from '../common/constants.js';
-
-
-/**
- * An object that provides constants for rendering blocks in Geras mode.
- * @alias Blockly.geras.ConstantProvider
- */
-export class ConstantProvider extends BaseConstantProvider {
-  override FIELD_TEXT_BASELINE_CENTER = false;
-
-  // The dark/shadow path in classic rendering is the same as the normal block
-  // path, but translated down one and right one.
-  DARK_PATH_OFFSET = 1;
-
-  /**
-   * The maximum width of a bottom row that follows a statement input and has
-   * inputs inline.
-   */
-  MAX_BOTTOM_WIDTH = 30;
-  override STATEMENT_BOTTOM_SPACER: AnyDuringMigration;
-
-  /** @internal */
-  constructor() {
-    super();
-
-    this.STATEMENT_BOTTOM_SPACER = -this.NOTCH_HEIGHT / 2;
-  }
-
-  override getCSS_(selector: string) {
-    return super.getCSS_(selector)
-        .concat(/* eslint-enable indent */
-                [
-                  /* eslint-disable indent */
-                  // Insertion marker.
-                  selector + ' .blocklyInsertionMarker>.blocklyPathLight,',
-                  selector + ' .blocklyInsertionMarker>.blocklyPathDark {',
-                  'fill-opacity: ' + this.INSERTION_MARKER_OPACITY + ';',
-                  'stroke: none;',
-                  '}',
-                ]);
-  }
-}