scratch-blocks 2.0.0-beta.1 → 2.0.0-spork.1

package/blockly-rc/core/bubbles/textinput_bubble.ts

@@ -1,344 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import {Bubble} from './bubble.js';
-import {Coordinate} from '../utils/coordinate.js';
-import * as Css from '../css.js';
-import * as dom from '../utils/dom.js';
-import {Rect} from '../utils/rect.js';
-import {Size} from '../utils/size.js';
-import {Svg} from '../utils/svg.js';
-import * as touch from '../touch.js';
-import {WorkspaceSvg} from '../workspace_svg.js';
-import {browserEvents} from '../utils.js';
-
-/**
- * A bubble that displays editable text. It can also be resized by the user.
- * Used by the comment icon.
- */
-export class TextInputBubble extends Bubble {
-  /** The root of the elements specific to the text element. */
-  private inputRoot: SVGForeignObjectElement;
-
-  /** The text input area element. */
-  private textArea: HTMLTextAreaElement;
-
-  /** The group containing the lines indicating the bubble is resizable. */
-  private resizeGroup: SVGGElement;
-
-  /**
-   * Event data associated with the listener for pointer up events on the
-   * resize group.
-   */
-  private resizePointerUpListener: browserEvents.Data | null = null;
-
-  /**
-   * Event data associated with the listener for pointer move events on the
-   * resize group.
-   */
-  private resizePointerMoveListener: browserEvents.Data | null = null;
-
-  /** Functions listening for changes to the text of this bubble. */
-  private textChangeListeners: (() => void)[] = [];
-
-  /** Functions listening for changes to the size of this bubble. */
-  private sizeChangeListeners: (() => void)[] = [];
-
-  /** Functions listening for changes to the location of this bubble. */
-  private locationChangeListeners: (() => void)[] = [];
-
-  /** The text of this bubble. */
-  private text = '';
-
-  /** The default size of this bubble, including borders. */
-  private readonly DEFAULT_SIZE = new Size(
-    160 + Bubble.DOUBLE_BORDER,
-    80 + Bubble.DOUBLE_BORDER,
-  );
-
-  /** The minimum size of this bubble, including borders. */
-  private readonly MIN_SIZE = new Size(
-    45 + Bubble.DOUBLE_BORDER,
-    20 + Bubble.DOUBLE_BORDER,
-  );
-
-  /**
-   * @param workspace The workspace this bubble belongs to.
-   * @param anchor The anchor location of the thing this bubble is attached to.
-   *     The tail of the bubble will point to this location.
-   * @param ownerRect An optional rect we don't want the bubble to overlap with
-   *     when automatically positioning.
-   */
-  constructor(
-    public readonly workspace: WorkspaceSvg,
-    protected anchor: Coordinate,
-    protected ownerRect?: Rect,
-  ) {
-    super(workspace, anchor, ownerRect);
-    dom.addClass(this.svgRoot, 'blocklyTextInputBubble');
-    ({inputRoot: this.inputRoot, textArea: this.textArea} = this.createEditor(
-      this.contentContainer,
-    ));
-    this.resizeGroup = this.createResizeHandle(this.svgRoot, workspace);
-    this.setSize(this.DEFAULT_SIZE, true);
-  }
-
-  /** @returns the text of this bubble. */
-  getText(): string {
-    return this.text;
-  }
-
-  /** Sets the text of this bubble. Calls change listeners. */
-  setText(text: string) {
-    this.text = text;
-    this.textArea.value = text;
-    this.onTextChange();
-  }
-
-  /** Adds a change listener to be notified when this bubble's text changes. */
-  addTextChangeListener(listener: () => void) {
-    this.textChangeListeners.push(listener);
-  }
-
-  /** Adds a change listener to be notified when this bubble's size changes. */
-  addSizeChangeListener(listener: () => void) {
-    this.sizeChangeListeners.push(listener);
-  }
-
-  /** Adds a change listener to be notified when this bubble's location changes. */
-  addLocationChangeListener(listener: () => void) {
-    this.locationChangeListeners.push(listener);
-  }
-
-  /** Creates the editor UI for this bubble. */
-  private createEditor(container: SVGGElement): {
-    inputRoot: SVGForeignObjectElement;
-    textArea: HTMLTextAreaElement;
-  } {
-    const inputRoot = dom.createSvgElement(
-      Svg.FOREIGNOBJECT,
-      {
-        'x': Bubble.BORDER_WIDTH,
-        'y': Bubble.BORDER_WIDTH,
-      },
-      container,
-    );
-
-    const body = document.createElementNS(dom.HTML_NS, 'body');
-    body.setAttribute('xmlns', dom.HTML_NS);
-    body.className = 'blocklyMinimalBody';
-
-    const textArea = document.createElementNS(
-      dom.HTML_NS,
-      'textarea',
-    ) as HTMLTextAreaElement;
-    textArea.className = 'blocklyTextarea blocklyText';
-    textArea.setAttribute('dir', this.workspace.RTL ? 'RTL' : 'LTR');
-
-    body.appendChild(textArea);
-    inputRoot.appendChild(body);
-
-    this.bindTextAreaEvents(textArea);
-    setTimeout(() => {
-      textArea.focus();
-    }, 0);
-
-    return {inputRoot, textArea};
-  }
-
-  /** Binds events to the text area element. */
-  private bindTextAreaEvents(textArea: HTMLTextAreaElement) {
-    // Don't zoom with mousewheel; let it scroll instead.
-    browserEvents.conditionalBind(textArea, 'wheel', this, (e: Event) => {
-      e.stopPropagation();
-    });
-
-    browserEvents.conditionalBind(
-      textArea,
-      'focus',
-      this,
-      this.onStartEdit,
-      true,
-    );
-    browserEvents.conditionalBind(textArea, 'change', this, this.onTextChange);
-  }
-
-  /** Creates the resize handler elements and binds events to them. */
-  private createResizeHandle(
-    container: SVGGElement,
-    workspace: WorkspaceSvg,
-  ): SVGGElement {
-    const resizeHandle = dom.createSvgElement(
-      Svg.IMAGE,
-      {
-        'class': 'blocklyResizeHandle',
-        'href': `${workspace.options.pathToMedia}resize-handle.svg`,
-      },
-      container,
-    );
-
-    browserEvents.conditionalBind(
-      resizeHandle,
-      'pointerdown',
-      this,
-      this.onResizePointerDown,
-    );
-
-    return resizeHandle;
-  }
-
-  /**
-   * Sets the size of this bubble, including the border.
-   *
-   * @param size Sets the size of this bubble, including the border.
-   * @param relayout If true, reposition the bubble from scratch so that it is
-   *     optimally visible. If false, reposition it so it maintains the same
-   *     position relative to the anchor.
-   */
-  setSize(size: Size, relayout = false) {
-    size.width = Math.max(size.width, this.MIN_SIZE.width);
-    size.height = Math.max(size.height, this.MIN_SIZE.height);
-
-    const widthMinusBorder = size.width - Bubble.DOUBLE_BORDER;
-    const heightMinusBorder = size.height - Bubble.DOUBLE_BORDER;
-    this.inputRoot.setAttribute('width', `${widthMinusBorder}`);
-    this.inputRoot.setAttribute('height', `${heightMinusBorder}`);
-
-    this.resizeGroup.setAttribute('y', `${heightMinusBorder}`);
-    if (this.workspace.RTL) {
-      this.resizeGroup.setAttribute('x', `${-Bubble.DOUBLE_BORDER}`);
-    } else {
-      this.resizeGroup.setAttribute('x', `${widthMinusBorder}`);
-    }
-
-    super.setSize(size, relayout);
-    this.onSizeChange();
-  }
-
-  /** @returns the size of this bubble. */
-  getSize(): Size {
-    // Overridden to be public.
-    return super.getSize();
-  }
-
-  override moveDuringDrag(newLoc: Coordinate) {
-    super.moveDuringDrag(newLoc);
-    this.onLocationChange();
-  }
-
-  override setPositionRelativeToAnchor(left: number, top: number) {
-    super.setPositionRelativeToAnchor(left, top);
-    this.onLocationChange();
-  }
-
-  protected override positionByRect(rect = new Rect(0, 0, 0, 0)) {
-    super.positionByRect(rect);
-    this.onLocationChange();
-  }
-
-  /** Handles mouse down events on the resize target. */
-  private onResizePointerDown(e: PointerEvent) {
-    this.bringToFront();
-    if (browserEvents.isRightButton(e)) {
-      e.stopPropagation();
-      return;
-    }
-
-    this.workspace.startDrag(
-      e,
-      new Coordinate(
-        this.workspace.RTL ? -this.getSize().width : this.getSize().width,
-        this.getSize().height,
-      ),
-    );
-
-    this.resizePointerUpListener = browserEvents.conditionalBind(
-      document,
-      'pointerup',
-      this,
-      this.onResizePointerUp,
-    );
-    this.resizePointerMoveListener = browserEvents.conditionalBind(
-      document,
-      'pointermove',
-      this,
-      this.onResizePointerMove,
-    );
-    this.workspace.hideChaff();
-    // This event has been handled.  No need to bubble up to the document.
-    e.stopPropagation();
-  }
-
-  /** Handles pointer up events on the resize target. */
-  private onResizePointerUp(_e: PointerEvent) {
-    touch.clearTouchIdentifier();
-    if (this.resizePointerUpListener) {
-      browserEvents.unbind(this.resizePointerUpListener);
-      this.resizePointerUpListener = null;
-    }
-    if (this.resizePointerMoveListener) {
-      browserEvents.unbind(this.resizePointerMoveListener);
-      this.resizePointerMoveListener = null;
-    }
-  }
-
-  /** Handles pointer move events on the resize target. */
-  private onResizePointerMove(e: PointerEvent) {
-    const delta = this.workspace.moveDrag(e);
-    this.setSize(
-      new Size(this.workspace.RTL ? -delta.x : delta.x, delta.y),
-      false,
-    );
-    this.onSizeChange();
-  }
-
-  /**
-   * Handles starting an edit of the text area. Brings the bubble to the front.
-   */
-  private onStartEdit() {
-    if (this.bringToFront()) {
-      // Since the act of moving this node within the DOM causes a loss of
-      // focus, we need to reapply the focus.
-      this.textArea.focus();
-    }
-  }
-
-  /** Handles a text change event for the text area. Calls event listeners. */
-  private onTextChange() {
-    this.text = this.textArea.value;
-    for (const listener of this.textChangeListeners) {
-      listener();
-    }
-  }
-
-  /** Handles a size change event for the text area. Calls event listeners. */
-  private onSizeChange() {
-    for (const listener of this.sizeChangeListeners) {
-      listener();
-    }
-  }
-
-  /** Handles a location change event for the text area. Calls event listeners. */
-  private onLocationChange() {
-    for (const listener of this.locationChangeListeners) {
-      listener();
-    }
-  }
-}
-
-Css.register(`
-.blocklyTextInputBubble .blocklyTextarea {
-  background-color: var(--commentFillColour);
-  border: 0;
-  box-sizing: border-box;
-  display: block;
-  outline: 0;
-  padding: 5px;
-  resize: none;
-  width: 100%;
-  height: 100%;
-}
-`);

package/blockly-rc/core/bubbles.ts

@@ -1,12 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import {Bubble} from './bubbles/bubble.js';
-import {TextBubble} from './bubbles/text_bubble.js';
-import {TextInputBubble} from './bubbles/textinput_bubble.js';
-import {MiniWorkspaceBubble} from './bubbles/mini_workspace_bubble.js';
-
-export {Bubble, TextBubble, TextInputBubble, MiniWorkspaceBubble};

package/blockly-rc/core/bump_objects.ts

@@ -1,192 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// Former goog.module ID: Blockly.bumpObjects
-
-import {RenderedWorkspaceComment} from './comments/rendered_workspace_comment.js';
-import type {Abstract} from './events/events_abstract.js';
-import type {BlockCreate} from './events/events_block_create.js';
-import type {BlockMove} from './events/events_block_move.js';
-import type {CommentCreate} from './events/events_comment_create.js';
-import type {CommentMove} from './events/events_comment_move.js';
-import type {CommentResize} from './events/events_comment_resize.js';
-import type {ViewportChange} from './events/events_viewport.js';
-import * as eventUtils from './events/utils.js';
-import type {IBoundedElement} from './interfaces/i_bounded_element.js';
-import type {ContainerRegion} from './metrics_manager.js';
-import * as mathUtils from './utils/math.js';
-import type {WorkspaceSvg} from './workspace_svg.js';
-
-/**
- * Bumps the given object that has passed out of bounds.
- *
- * @param workspace The workspace containing the object.
- * @param bounds The region to bump an object into. For example, pass
- *     ScrollMetrics to bump a block into the scrollable region of the
- *     workspace, or pass ViewMetrics to bump a block into the visible region of
- *     the workspace. This should be specified in workspace coordinates.
- * @param object The object to bump.
- * @returns True if object was bumped.
- */
-function bumpObjectIntoBounds(
-  workspace: WorkspaceSvg,
-  bounds: ContainerRegion,
-  object: IBoundedElement,
-): boolean {
-  // Compute new top/left position for object.
-  const objectMetrics = object.getBoundingRectangle();
-  const height = objectMetrics.bottom - objectMetrics.top;
-  const width = objectMetrics.right - objectMetrics.left;
-
-  const topClamp = bounds.top;
-  const boundsBottom = bounds.top + bounds.height;
-  const bottomClamp = boundsBottom - height;
-  // If the object is taller than the workspace we want to
-  // top-align the block
-  const newYPosition = mathUtils.clamp(
-    topClamp,
-    objectMetrics.top,
-    bottomClamp,
-  );
-  const deltaY = newYPosition - objectMetrics.top;
-
-  // Note: Even in RTL mode the "anchor" of the object is the
-  // top-left corner of the object.
-  let leftClamp = bounds.left;
-  const boundsRight = bounds.left + bounds.width;
-  let rightClamp = boundsRight - width;
-  if (workspace.RTL) {
-    // If the object is wider than the workspace and we're in RTL
-    // mode we want to right-align the block, which means setting
-    // the left clamp to match.
-    leftClamp = Math.min(rightClamp, leftClamp);
-  } else {
-    // If the object is wider than the workspace and we're in LTR
-    // mode we want to left-align the block, which means setting
-    // the right clamp to match.
-    rightClamp = Math.max(leftClamp, rightClamp);
-  }
-  const newXPosition = mathUtils.clamp(
-    leftClamp,
-    objectMetrics.left,
-    rightClamp,
-  );
-  const deltaX = newXPosition - objectMetrics.left;
-
-  if (deltaX || deltaY) {
-    object.moveBy(deltaX, deltaY, ['inbounds']);
-    return true;
-  }
-  return false;
-}
-export const bumpIntoBounds = bumpObjectIntoBounds;
-
-/**
- * Creates a handler for bumping objects when they cross fixed bounds.
- *
- * @param workspace The workspace to handle.
- * @returns The event handler.
- */
-export function bumpIntoBoundsHandler(
-  workspace: WorkspaceSvg,
-): (p1: Abstract) => void {
-  return (e) => {
-    const metricsManager = workspace.getMetricsManager();
-    if (!metricsManager.hasFixedEdges() || workspace.isDragging()) {
-      return;
-    }
-
-    if (eventUtils.BUMP_EVENTS.includes(e.type ?? '')) {
-      const scrollMetricsInWsCoords = metricsManager.getScrollMetrics(true);
-
-      // Triggered by move/create event
-      const object = extractObjectFromEvent(
-        workspace,
-        e as eventUtils.BumpEvent,
-      );
-      if (!object) {
-        return;
-      }
-      // Handle undo.
-      const existingGroup = eventUtils.getGroup() || false;
-      eventUtils.setGroup(e.group);
-
-      const wasBumped = bumpObjectIntoBounds(
-        workspace,
-        scrollMetricsInWsCoords,
-        object as IBoundedElement,
-      );
-
-      if (wasBumped && !e.group) {
-        console.warn(
-          'Moved object in bounds but there was no' +
-            ' event group. This may break undo.',
-        );
-      }
-      eventUtils.setGroup(existingGroup);
-    } else if (e.type === eventUtils.VIEWPORT_CHANGE) {
-      const viewportEvent = e as ViewportChange;
-      if (
-        viewportEvent.scale &&
-        viewportEvent.oldScale &&
-        viewportEvent.scale > viewportEvent.oldScale
-      ) {
-        bumpTopObjectsIntoBounds(workspace);
-      }
-    }
-  };
-}
-
-/**
- * Extracts the object from the given event.
- *
- * @param workspace The workspace the event originated
- *    from.
- * @param e An event containing an object.
- * @returns The extracted
- *    object.
- */
-function extractObjectFromEvent(
-  workspace: WorkspaceSvg,
-  e: eventUtils.BumpEvent,
-): IBoundedElement | null {
-  let object = null;
-  switch (e.type) {
-    case eventUtils.BLOCK_CREATE:
-    case eventUtils.BLOCK_MOVE:
-      object = workspace.getBlockById((e as BlockCreate | BlockMove).blockId!);
-      if (object) {
-        object = object.getRootBlock();
-      }
-      break;
-    case eventUtils.COMMENT_CREATE:
-    case eventUtils.COMMENT_MOVE:
-    case eventUtils.COMMENT_RESIZE:
-      object = workspace.getCommentById(
-        (e as CommentCreate | CommentMove | CommentResize).commentId!,
-      ) as RenderedWorkspaceComment;
-      break;
-  }
-  return object;
-}
-
-/**
- * Bumps the top objects in the given workspace into bounds.
- *
- * @param workspace The workspace.
- */
-export function bumpTopObjectsIntoBounds(workspace: WorkspaceSvg) {
-  const metricsManager = workspace.getMetricsManager();
-  if (!metricsManager.hasFixedEdges() || workspace.isDragging()) {
-    return;
-  }
-
-  const scrollMetricsInWsCoords = metricsManager.getScrollMetrics(true);
-  const topBlocks = workspace.getTopBoundedElements();
-  for (let i = 0, block; (block = topBlocks[i]); i++) {
-    bumpObjectIntoBounds(workspace, scrollMetricsInWsCoords, block);
-  }
-}

package/blockly-rc/core/button_flyout_inflater.ts

@@ -1,63 +0,0 @@
-/**
- * @license
- * Copyright 2024 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import type {IFlyoutInflater} from './interfaces/i_flyout_inflater.js';
-import type {IBoundedElement} from './interfaces/i_bounded_element.js';
-import type {WorkspaceSvg} from './workspace_svg.js';
-import {FlyoutButton} from './flyout_button.js';
-import {ButtonOrLabelInfo} from './utils/toolbox.js';
-import * as registry from './registry.js';
-
-/**
- * Class responsible for creating buttons for flyouts.
- */
-export class ButtonFlyoutInflater implements IFlyoutInflater {
-  /**
-   * Inflates a flyout button from the given state and adds it to the flyout.
-   *
-   * @param state A JSON representation of a flyout button.
-   * @param flyoutWorkspace The workspace to create the button on.
-   * @returns A newly created FlyoutButton.
-   */
-  load(state: Object, flyoutWorkspace: WorkspaceSvg): IBoundedElement {
-    const button = new FlyoutButton(
-      flyoutWorkspace,
-      flyoutWorkspace.targetWorkspace!,
-      state as ButtonOrLabelInfo,
-      false,
-    );
-    button.show();
-    return button;
-  }
-
-  /**
-   * Returns the amount of space that should follow this button.
-   *
-   * @param state A JSON representation of a flyout button.
-   * @param defaultGap The default spacing for flyout items.
-   * @returns The amount of space that should follow this button.
-   */
-  gapForElement(state: Object, defaultGap: number): number {
-    return defaultGap;
-  }
-
-  /**
-   * Disposes of the given button.
-   *
-   * @param element The flyout button to dispose of.
-   */
-  disposeElement(element: IBoundedElement): void {
-    if (element instanceof FlyoutButton) {
-      element.dispose();
-    }
-  }
-}
-
-registry.register(
-  registry.Type.FLYOUT_INFLATER,
-  'button',
-  ButtonFlyoutInflater,
-);