scratch-blocks 1.1.206 → 2.0.0-beta.1

package/blockly-rc/core/rendered_connection.ts

@@ -0,0 +1,571 @@
+/**
+ * @license
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Components for creating connections between blocks.
+ *
+ * @class
+ */
+// Former goog.module ID: Blockly.RenderedConnection
+
+import type {Block} from './block.js';
+import type {BlockSvg} from './block_svg.js';
+import * as common from './common.js';
+import {config} from './config.js';
+import {Connection} from './connection.js';
+import type {ConnectionDB} from './connection_db.js';
+import {ConnectionType} from './connection_type.js';
+import * as eventUtils from './events/utils.js';
+import {hasBubble} from './interfaces/i_has_bubble.js';
+import * as internalConstants from './internal_constants.js';
+import {Coordinate} from './utils/coordinate.js';
+
+/** Maximum randomness in workspace units for bumping a block. */
+const BUMP_RANDOMNESS = 10;
+
+/**
+ * Class for a connection between blocks that may be rendered on screen.
+ */
+export class RenderedConnection extends Connection {
+  // TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
+  sourceBlock_!: BlockSvg;
+  private readonly db: ConnectionDB;
+  private readonly dbOpposite: ConnectionDB;
+  private readonly offsetInBlock: Coordinate;
+  private trackedState: TrackedState;
+  private highlighted: boolean = false;
+
+  /** Connection this connection connects to.  Null if not connected. */
+  override targetConnection: RenderedConnection | null = null;
+
+  /**
+   * @param source The block establishing this connection.
+   * @param type The type of the connection.
+   */
+  constructor(source: BlockSvg, type: number) {
+    super(source, type);
+
+    /**
+     * Connection database for connections of this type on the current
+     * workspace.
+     */
+    this.db = source.workspace.connectionDBList[type];
+
+    /**
+     * Connection database for connections compatible with this type on the
+     * current workspace.
+     */
+    this.dbOpposite =
+      source.workspace.connectionDBList[internalConstants.OPPOSITE_TYPE[type]];
+
+    /** Workspace units, (0, 0) is top left of block. */
+    this.offsetInBlock = new Coordinate(0, 0);
+
+    /** Describes the state of this connection's tracked-ness. */
+    this.trackedState = RenderedConnection.TrackedState.WILL_TRACK;
+  }
+
+  /**
+   * Dispose of this connection. Remove it from the database (if it is
+   * tracked) and call the super-function to deal with connected blocks.
+   *
+   * @internal
+   */
+  override dispose() {
+    super.dispose();
+    if (this.trackedState === RenderedConnection.TrackedState.TRACKED) {
+      this.db.removeConnection(this, this.y);
+    }
+    this.sourceBlock_.pathObject.removeConnectionHighlight?.(this);
+  }
+
+  /**
+   * Get the source block for this connection.
+   *
+   * @returns The source block.
+   */
+  override getSourceBlock(): BlockSvg {
+    return super.getSourceBlock() as BlockSvg;
+  }
+
+  /**
+   * Returns the block that this connection connects to.
+   *
+   * @returns The connected block or null if none is connected.
+   */
+  override targetBlock(): BlockSvg | null {
+    return super.targetBlock() as BlockSvg;
+  }
+
+  /**
+   * Returns the distance between this connection and another connection in
+   * workspace units.
+   *
+   * @param otherConnection The other connection to measure the distance to.
+   * @returns The distance between connections, in workspace units.
+   */
+  distanceFrom(otherConnection: Connection): number {
+    const xDiff = this.x - otherConnection.x;
+    const yDiff = this.y - otherConnection.y;
+    return Math.sqrt(xDiff * xDiff + yDiff * yDiff);
+  }
+
+  /**
+   * Move the block(s) belonging to the connection to a point where they don't
+   * visually interfere with the specified connection.
+   *
+   * @param staticConnection The connection to move away from.
+   * @internal
+   */
+  bumpAwayFrom(staticConnection: RenderedConnection) {
+    if (this.sourceBlock_.workspace.isDragging()) {
+      // Don't move blocks around while the user is doing the same.
+      return;
+    }
+    // Move the root block.
+    let rootBlock = this.sourceBlock_.getRootBlock();
+    if (rootBlock.isInFlyout) {
+      // Don't move blocks around in a flyout.
+      return;
+    }
+    let reverse = false;
+    if (!rootBlock.isMovable()) {
+      // Can't bump an uneditable block away.
+      // Check to see if the other block is movable.
+      rootBlock = staticConnection.getSourceBlock().getRootBlock();
+      if (!rootBlock.isMovable()) {
+        return;
+      }
+      // Swap the connections and move the 'static' connection instead.
+      /* eslint-disable-next-line @typescript-eslint/no-this-alias */
+      staticConnection = this;
+      reverse = true;
+    }
+    // Raise it to the top for extra visibility.
+    const selected = common.getSelected() == rootBlock;
+    selected || rootBlock.addSelect();
+    let dx =
+      staticConnection.x +
+      config.snapRadius +
+      Math.floor(Math.random() * BUMP_RANDOMNESS) -
+      this.x;
+    let dy =
+      staticConnection.y +
+      config.snapRadius +
+      Math.floor(Math.random() * BUMP_RANDOMNESS) -
+      this.y;
+    if (reverse) {
+      // When reversing a bump due to an uneditable block, bump up.
+      dy = -dy;
+    }
+    if (rootBlock.RTL) {
+      dx =
+        staticConnection.x -
+        config.snapRadius -
+        Math.floor(Math.random() * BUMP_RANDOMNESS) -
+        this.x;
+    }
+    rootBlock.moveBy(dx, dy, ['bump']);
+    selected || rootBlock.removeSelect();
+  }
+
+  /**
+   * Change the connection's coordinates.
+   *
+   * @param x New absolute x coordinate, in workspace coordinates.
+   * @param y New absolute y coordinate, in workspace coordinates.
+   * @returns True if the position of the connection in the connection db
+   *     was updated.
+   */
+  moveTo(x: number, y: number): boolean {
+    // TODO(#6922): Readd this optimization.
+    // const moved = this.x !== x || this.y !== y;
+    const moved = true;
+    let updated = false;
+
+    if (this.trackedState === RenderedConnection.TrackedState.WILL_TRACK) {
+      this.db.addConnection(this, y);
+      this.trackedState = RenderedConnection.TrackedState.TRACKED;
+      updated = true;
+    } else if (
+      this.trackedState === RenderedConnection.TrackedState.TRACKED &&
+      moved
+    ) {
+      this.db.removeConnection(this, this.y);
+      this.db.addConnection(this, y);
+      updated = true;
+    }
+
+    this.x = x;
+    this.y = y;
+
+    return updated;
+  }
+
+  /**
+   * Change the connection's coordinates.
+   *
+   * @param dx Change to x coordinate, in workspace units.
+   * @param dy Change to y coordinate, in workspace units.
+   * @returns True if the position of the connection in the connection db
+   *     was updated.
+   */
+  moveBy(dx: number, dy: number): boolean {
+    return this.moveTo(this.x + dx, this.y + dy);
+  }
+
+  /**
+   * Move this connection to the location given by its offset within the block
+   * and the location of the block's top left corner.
+   *
+   * @param blockTL The location of the top left corner of the block, in
+   *     workspace coordinates.
+   * @returns True if the position of the connection in the connection db
+   *     was updated.
+   */
+  moveToOffset(blockTL: Coordinate): boolean {
+    return this.moveTo(
+      blockTL.x + this.offsetInBlock.x,
+      blockTL.y + this.offsetInBlock.y,
+    );
+  }
+
+  /**
+   * Set the offset of this connection relative to the top left of its block.
+   *
+   * @param x The new relative x, in workspace units.
+   * @param y The new relative y, in workspace units.
+   */
+  setOffsetInBlock(x: number, y: number) {
+    this.offsetInBlock.x = x;
+    this.offsetInBlock.y = y;
+  }
+
+  /**
+   * Get the offset of this connection relative to the top left of its block.
+   *
+   * @returns The offset of the connection.
+   */
+  getOffsetInBlock(): Coordinate {
+    return this.offsetInBlock;
+  }
+
+  /**
+   * Moves the blocks on either side of this connection right next to
+   * each other, based on their local offsets, not global positions.
+   *
+   * @internal
+   */
+  tightenEfficiently() {
+    const target = this.targetConnection;
+    const block = this.targetBlock();
+    if (!target || !block) return;
+    const offset = Coordinate.difference(
+      this.offsetInBlock,
+      target.offsetInBlock,
+    );
+    block.translate(offset.x, offset.y);
+  }
+
+  /**
+   * Find the closest compatible connection to this connection.
+   * All parameters are in workspace units.
+   *
+   * @param maxLimit The maximum radius to another connection.
+   * @param dxy Offset between this connection's location in the database and
+   *     the current location (as a result of dragging).
+   * @returns Contains two properties: 'connection' which is either another
+   *     connection or null, and 'radius' which is the distance.
+   */
+  closest(
+    maxLimit: number,
+    dxy: Coordinate,
+  ): {connection: RenderedConnection | null; radius: number} {
+    return this.dbOpposite.searchForClosest(this, maxLimit, dxy);
+  }
+
+  /** Add highlighting around this connection. */
+  highlight() {
+    this.highlighted = true;
+    this.getSourceBlock().queueRender();
+  }
+
+  /** Remove the highlighting around this connection. */
+  unhighlight() {
+    this.highlighted = false;
+    this.getSourceBlock().queueRender();
+  }
+
+  /** Returns true if this connection is highlighted, false otherwise. */
+  isHighlighted(): boolean {
+    return this.highlighted;
+  }
+
+  /**
+   * Set whether this connections is tracked in the database or not.
+   *
+   * @param doTracking If true, start tracking. If false, stop tracking.
+   * @internal
+   */
+  setTracking(doTracking: boolean) {
+    if (
+      (doTracking &&
+        this.trackedState === RenderedConnection.TrackedState.TRACKED) ||
+      (!doTracking &&
+        this.trackedState === RenderedConnection.TrackedState.UNTRACKED)
+    ) {
+      return;
+    }
+    if (this.sourceBlock_.isInFlyout) {
+      // Don't bother maintaining a database of connections in a flyout.
+      return;
+    }
+    if (doTracking) {
+      this.db.addConnection(this, this.y);
+      this.trackedState = RenderedConnection.TrackedState.TRACKED;
+      return;
+    }
+    if (this.trackedState === RenderedConnection.TrackedState.TRACKED) {
+      this.db.removeConnection(this, this.y);
+    }
+    this.trackedState = RenderedConnection.TrackedState.UNTRACKED;
+  }
+
+  /**
+   * Stop tracking this connection, as well as all down-stream connections on
+   * any block attached to this connection. This happens when a block is
+   * collapsed.
+   *
+   * Also closes down-stream icons/bubbles.
+   *
+   * @internal
+   */
+  stopTrackingAll() {
+    this.setTracking(false);
+    if (this.targetConnection) {
+      const blocks = this.targetBlock()!.getDescendants(false);
+      for (let i = 0; i < blocks.length; i++) {
+        const block = blocks[i];
+        // Stop tracking connections of all children.
+        const connections = block.getConnections_(true);
+        for (let j = 0; j < connections.length; j++) {
+          connections[j].setTracking(false);
+        }
+        // Close all bubbles of all children.
+        for (const icon of block.getIcons()) {
+          if (hasBubble(icon)) icon.setBubbleVisible(false);
+        }
+      }
+    }
+  }
+
+  /**
+   * Start tracking this connection, as well as all down-stream connections on
+   * any block attached to this connection. This happens when a block is
+   * expanded.
+   *
+   * @returns List of blocks to render.
+   */
+  startTrackingAll(): Block[] {
+    this.setTracking(true);
+    // All blocks that are not tracked must start tracking before any
+    // rendering takes place, since rendering requires knowing the dimensions
+    // of lower blocks. Also, since rendering a block renders all its parents,
+    // we only need to render the leaf nodes.
+    let renderList: Block[] = [];
+    if (
+      this.type !== ConnectionType.INPUT_VALUE &&
+      this.type !== ConnectionType.NEXT_STATEMENT
+    ) {
+      // Only spider down.
+      return renderList;
+    }
+    const block = this.targetBlock();
+    if (block) {
+      let connections;
+      if (block.isCollapsed()) {
+        // This block should only be partially revealed since it is collapsed.
+        connections = [];
+        block.outputConnection && connections.push(block.outputConnection);
+        block.nextConnection && connections.push(block.nextConnection);
+        block.previousConnection && connections.push(block.previousConnection);
+      } else {
+        // Show all connections of this block.
+        connections = block.getConnections_(true);
+      }
+      for (let i = 0; i < connections.length; i++) {
+        renderList.push(...connections[i].startTrackingAll());
+      }
+      if (!renderList.length) {
+        // Leaf block.
+        renderList = [block];
+      }
+    }
+    return renderList;
+  }
+
+  /**
+   * Behaviour after a connection attempt fails.
+   * Bumps this connection away from the other connection. Called when an
+   * attempted connection fails.
+   *
+   * @param otherConnection Connection that this connection failed to connect
+   *     to.
+   * @internal
+   */
+  override onFailedConnect(otherConnection: Connection) {
+    const block = this.getSourceBlock();
+    if (eventUtils.getRecordUndo()) {
+      const group = eventUtils.getGroup();
+      setTimeout(
+        function (this: RenderedConnection) {
+          if (!block.isDisposed() && !block.getParent()) {
+            eventUtils.setGroup(group);
+            this.bumpAwayFrom(otherConnection as RenderedConnection);
+            eventUtils.setGroup(false);
+          }
+        }.bind(this),
+        config.bumpDelay,
+      );
+    }
+  }
+
+  /**
+   * Disconnect two blocks that are connected by this connection.
+   *
+   * @param setParent Whether to set the parent of the disconnected block or
+   *     not, defaults to true.
+   *     If you do not set the parent, ensure that a subsequent action does,
+   *     otherwise the view and model will be out of sync.
+   */
+  override disconnectInternal(setParent = true) {
+    const {parentConnection, childConnection} =
+      this.getParentAndChildConnections();
+    if (!parentConnection || !childConnection) return;
+    const existingGroup = eventUtils.getGroup();
+    if (!existingGroup) eventUtils.setGroup(true);
+
+    const parent = parentConnection.getSourceBlock() as BlockSvg;
+    const child = childConnection.getSourceBlock() as BlockSvg;
+    super.disconnectInternal(setParent);
+
+    parent.queueRender();
+    child.updateDisabled();
+    child.queueRender();
+    // Reset visibility, since the child is now a top block.
+    child.getSvgRoot().style.display = 'block';
+
+    eventUtils.setGroup(existingGroup);
+  }
+
+  /**
+   * Respawn the shadow block if there was one connected to the this connection.
+   * Render/rerender blocks as needed.
+   */
+  protected override respawnShadow_() {
+    super.respawnShadow_();
+    const blockShadow = this.targetBlock();
+    if (!blockShadow) {
+      return;
+    }
+    blockShadow.initSvg();
+    blockShadow.queueRender();
+  }
+
+  /**
+   * Find all nearby compatible connections to this connection.
+   * Type checking does not apply, since this function is used for bumping.
+   *
+   * @param maxLimit The maximum radius to another connection, in workspace
+   *     units.
+   * @returns List of connections.
+   * @internal
+   */
+  override neighbours(maxLimit: number): RenderedConnection[] {
+    return this.dbOpposite.getNeighbours(this, maxLimit);
+  }
+
+  /**
+   * Connect two connections together.  This is the connection on the superior
+   * block.  Rerender blocks as needed.
+   *
+   * @param childConnection Connection on inferior block.
+   */
+  protected override connect_(childConnection: Connection) {
+    super.connect_(childConnection);
+
+    const renderedChildConnection = childConnection as RenderedConnection;
+
+    const parentBlock = this.getSourceBlock();
+    const childBlock = renderedChildConnection.getSourceBlock();
+
+    parentBlock.updateDisabled();
+    childBlock.updateDisabled();
+    childBlock.queueRender();
+
+    // The input the child block is connected to (if any).
+    const parentInput = parentBlock.getInputWithBlock(childBlock);
+    if (parentInput) {
+      const visible = parentInput.isVisible();
+      childBlock.getSvgRoot().style.display = visible ? 'block' : 'none';
+    }
+  }
+
+  /**
+   * Function to be called when this connection's compatible types have changed.
+   */
+  protected override onCheckChanged_() {
+    // The new value type may not be compatible with the existing connection.
+    if (
+      this.isConnected() &&
+      (!this.targetConnection ||
+        !this.getConnectionChecker().canConnect(
+          this,
+          this.targetConnection,
+          false,
+        ))
+    ) {
+      const child = this.isSuperior() ? this.targetBlock() : this.sourceBlock_;
+      child!.unplug();
+    }
+  }
+
+  /**
+   * Change a connection's compatibility.
+   * Rerender blocks as needed.
+   *
+   * @param check Compatible value type or list of value types. Null if all
+   *     types are compatible.
+   * @returns The connection being modified (to allow chaining).
+   */
+  override setCheck(check: string | string[] | null): RenderedConnection {
+    super.setCheck(check);
+    this.sourceBlock_.queueRender();
+    return this;
+  }
+}
+
+export namespace RenderedConnection {
+  /**
+   * Enum for different kinds of tracked states.
+   *
+   * WILL_TRACK means that this connection will add itself to
+   * the db on the next moveTo call it receives.
+   *
+   * UNTRACKED means that this connection will not add
+   * itself to the database until setTracking(true) is explicitly called.
+   *
+   * TRACKED means that this connection is currently being tracked.
+   */
+  export enum TrackedState {
+    WILL_TRACK = -1,
+    UNTRACKED = 0,
+    TRACKED = 1,
+  }
+}
+
+export type TrackedState = RenderedConnection.TrackedState;
+export const TrackedState = RenderedConnection.TrackedState;

package/blockly-rc/core/renderers/common/block_rendering.ts

@@ -0,0 +1,120 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Former goog.module ID: Blockly.blockRendering
+
+import * as registry from '../../registry.js';
+import type {Theme} from '../../theme.js';
+import {Measurable} from '../measurables/base.js';
+import {BottomRow} from '../measurables/bottom_row.js';
+import {Connection} from '../measurables/connection.js';
+import {ExternalValueInput} from '../measurables/external_value_input.js';
+import {Field} from '../measurables/field.js';
+import {Hat} from '../measurables/hat.js';
+import {Icon} from '../measurables/icon.js';
+import {InRowSpacer} from '../measurables/in_row_spacer.js';
+import {InlineInput} from '../measurables/inline_input.js';
+import {InputConnection} from '../measurables/input_connection.js';
+import {InputRow} from '../measurables/input_row.js';
+import {JaggedEdge} from '../measurables/jagged_edge.js';
+import {NextConnection} from '../measurables/next_connection.js';
+import {OutputConnection} from '../measurables/output_connection.js';
+import {PreviousConnection} from '../measurables/previous_connection.js';
+import {RoundCorner} from '../measurables/round_corner.js';
+import {Row} from '../measurables/row.js';
+import {SpacerRow} from '../measurables/spacer_row.js';
+import {SquareCorner} from '../measurables/square_corner.js';
+import {StatementInput} from '../measurables/statement_input.js';
+import {TopRow} from '../measurables/top_row.js';
+import {Types} from '../measurables/types.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';
+import {Renderer} from './renderer.js';
+
+/**
+ * Registers a new renderer.
+ *
+ * @param name The name of the renderer.
+ * @param rendererClass The new renderer class to register.
+ * @throws {Error} if a renderer with the same name has already been registered.
+ */
+export function register(name: string, rendererClass: Function) {
+  registry.register(registry.Type.RENDERER, name, rendererClass);
+}
+
+/**
+ * Unregisters the renderer registered with the given name.
+ *
+ * @param name The name of the renderer.
+ */
+export function unregister(name: string) {
+  registry.unregister(registry.Type.RENDERER, name);
+}
+
+/**
+ * Initialize anything needed for rendering (constants, etc).
+ *
+ * @param name Name of the renderer to initialize.
+ * @param theme The workspace theme object.
+ * @param opt_rendererOverrides Rendering constant overrides.
+ * @returns The new instance of a renderer.
+ *     Already initialized.
+ * @internal
+ */
+export function init(
+  name: string,
+  theme: Theme,
+  opt_rendererOverrides?: {[rendererConstant: string]: any},
+): Renderer {
+  const rendererClass = registry.getClass(registry.Type.RENDERER, name);
+  const renderer = new rendererClass!(name);
+  renderer.init(theme, opt_rendererOverrides);
+  return renderer;
+}
+export {BottomRow};
+export {Connection};
+export {Drawer};
+export {ExternalValueInput};
+export {Field};
+export {Hat};
+export {Icon};
+export {InRowSpacer};
+export {InlineInput};
+export {InputConnection};
+export {InputRow};
+export {IPathObject};
+export {JaggedEdge};
+export {MarkerSvg};
+export {Measurable};
+export {NextConnection};
+export {OutputConnection};
+export {PathObject};
+export {PreviousConnection};
+export {Renderer};
+export {RenderInfo};
+export {RoundCorner};
+export {Row};
+export {SpacerRow};
+export {SquareCorner};
+export {StatementInput};
+export {TopRow};
+export {Types};
+
+export {
+  OutsideCorners,
+  InsideCorners,
+  StartHat,
+  Notch,
+  PuzzleTab,
+  JaggedTeeth,
+  BaseShape,
+  DynamicShape,
+  ConstantProvider,
+} from './constants.js';