release: Merge branch 'develop' into rc/v11.0.0

Author: maribethb

core/block.ts

@@ -675,6 +675,17 @@ export class Block implements IASTNodeLocation {
     return block;
   }
 
+  /**
+   * Returns this block if it is a shadow block, or the first non-shadow parent.
+   *
+   * @internal
+   */
+  getFirstNonShadowBlock(): this {
+    if (!this.isShadow()) return this;
+    // We can assert the parent is non-null because shadows must have parents.
+    return this.getParent()!.getFirstNonShadowBlock();
+  }
+
   /**
    * Find all the blocks that are directly nested inside this one.
    * Includes value and statement inputs, as well as any following statement.

core/block_animations.ts

@@ -42,15 +42,11 @@ export function disposeUiEffect(block: BlockSvg) {
   // Deeply clone the current block.
   const clone: SVGGElement = svgGroup.cloneNode(true) as SVGGElement;
   clone.setAttribute('transform', 'translate(' + xy.x + ',' + xy.y + ')');
-  if (workspace.isDragging()) {
-    workspace.getLayerManager()?.moveToDragLayer({
-      getSvgRoot: () => {
-        return clone;
-      },
-    });
-  } else {
-    workspace.getLayerManager()?.getBlockLayer().appendChild(clone);
-  }
+  workspace.getLayerManager()?.appendToAnimationLayer({
+    getSvgRoot: () => {
+      return clone;
+    },
+  });
   const cloneRect = {
     'x': xy.x,
     'y': xy.y,

core/block_svg.ts

@@ -208,7 +208,7 @@ export class BlockSvg
       icon.updateEditable();
     }
     this.applyColour();
-    this.pathObject.updateMovable(this.isMovable());
+    this.pathObject.updateMovable(this.isMovable() || this.isInFlyout);
     const svg = this.getSvgRoot();
     if (!this.workspace.options.readOnly && svg) {
       browserEvents.conditionalBind(

core/bubbles/textinput_bubble.ts

@@ -143,7 +143,7 @@ export class TextInputBubble extends Bubble {
 
   /** Binds events to the text area element. */
   private bindTextAreaEvents(textArea: HTMLTextAreaElement) {
-    // Don't zoom with mousewheel.
+    // Don't zoom with mousewheel; let it scroll instead.
     browserEvents.conditionalBind(textArea, 'wheel', this, (e: Event) => {
       e.stopPropagation();
     });
@@ -198,19 +198,12 @@ export class TextInputBubble extends Bubble {
     const heightMinusBorder = size.height - Bubble.DOUBLE_BORDER;
     this.inputRoot.setAttribute('width', `${widthMinusBorder}`);
     this.inputRoot.setAttribute('height', `${heightMinusBorder}`);
-    this.textArea.style.width = `${widthMinusBorder - 4}px`;
-    this.textArea.style.height = `${heightMinusBorder - 4}px`;
 
+    this.resizeGroup.setAttribute('y', `${heightMinusBorder}`);
     if (this.workspace.RTL) {
-      this.resizeGroup.setAttribute(
-        'transform',
-        `translate(${Bubble.DOUBLE_BORDER}, ${heightMinusBorder}) scale(-1 1)`,
-      );
+      this.resizeGroup.setAttribute('x', `${-Bubble.DOUBLE_BORDER}`);
     } else {
-      this.resizeGroup.setAttribute(
-        'transform',
-        `translate(${widthMinusBorder}, ${heightMinusBorder})`,
-      );
+      this.resizeGroup.setAttribute('x', `${widthMinusBorder}`);
     }
 
     super.setSize(size, relayout);
@@ -310,11 +303,12 @@ Css.register(`
 .blocklyTextInputBubble .blocklyTextarea {
   background-color: var(--commentFillColour);
   border: 0;
+  box-sizing: border-box;
   display: block;
-  margin: 0;
   outline: 0;
-  padding: 3px;
+  padding: 5px;
   resize: none;
-  text-overflow: hidden;
+  width: 100%;
+  height: 100%;
 }
 `);

core/clipboard/block_paster.ts

@@ -30,11 +30,21 @@ export class BlockPaster implements IPaster<BlockCopyData, BlockSvg> {
       copyData.blockState['y'] = coordinate.y;
     }
 
+    // After appending the block to the workspace, it will be bumped from its neighbors
+    // However, the algorithm for deciding where to paste a block depends on
+    // the starting position of the copied block, so we'll pass those coordinates along
+    const initialCoordinates =
+      coordinate ||
+      new Coordinate(
+        copyData.blockState['x'] || 0,
+        copyData.blockState['y'] || 0,
+      );
+
     eventUtils.disable();
     let block;
     try {
       block = append(copyData.blockState, workspace) as BlockSvg;
-      moveBlockToNotConflict(block);
+      moveBlockToNotConflict(block, initialCoordinates);
     } finally {
       eventUtils.enable();
     }
@@ -56,12 +66,20 @@ export class BlockPaster implements IPaster<BlockCopyData, BlockSvg> {
  * Exported for testing.
  *
  * @param block The block to move to an unambiguous location.
+ * @param originalPosition The initial coordinate to start searching from,
+ *    likely the position of the copied block.
  * @internal
  */
-export function moveBlockToNotConflict(block: BlockSvg) {
+export function moveBlockToNotConflict(
+  block: BlockSvg,
+  originalPosition: Coordinate,
+) {
   const workspace = block.workspace;
   const snapRadius = config.snapRadius;
-  const coord = block.getRelativeToSurfaceXY();
+  const bumpOffset = Coordinate.difference(
+    originalPosition,
+    block.getRelativeToSurfaceXY(),
+  );
   const offset = new Coordinate(0, 0);
   // getRelativeToSurfaceXY is really expensive, so we want to cache this.
   const otherCoords = workspace
@@ -70,8 +88,11 @@ export function moveBlockToNotConflict(block: BlockSvg) {
     .map((b) => b.getRelativeToSurfaceXY());
 
   while (
-    blockOverlapsOtherExactly(Coordinate.sum(coord, offset), otherCoords) ||
-    blockIsInSnapRadius(block, offset, snapRadius)
+    blockOverlapsOtherExactly(
+      Coordinate.sum(originalPosition, offset),
+      otherCoords,
+    ) ||
+    blockIsInSnapRadius(block, Coordinate.sum(bumpOffset, offset), snapRadius)
   ) {
     if (workspace.RTL) {
       offset.translate(-snapRadius, snapRadius * 2);
@@ -80,7 +101,7 @@ export function moveBlockToNotConflict(block: BlockSvg) {
     }
   }
 
-  block!.moveTo(Coordinate.sum(coord, offset));
+  block!.moveTo(Coordinate.sum(originalPosition, offset));
 }
 
 /**

core/comments/comment_view.ts

@@ -286,9 +286,12 @@ export class CommentView implements IRenderedElement {
     return this.svgRoot;
   }
 
-  /** Returns the current size of the comment in workspace units. */
+  /**
+   * Returns the current size of the comment in workspace units.
+   * Respects collapsing.
+   */
   getSize(): Size {
-    return this.size;
+    return this.collapsed ? this.topBarBackground.getBBox() : this.size;
   }
 
   /**
@@ -401,8 +404,6 @@ export class CommentView implements IRenderedElement {
     if (this.workspace.RTL) {
       this.foreignObject.setAttribute('x', `${-size.width}`);
     }
-    this.textArea.style.width = `${size.width}px`;
-    this.textArea.style.height = `${size.height}px`;
   }
 
   /**
@@ -773,14 +774,13 @@ css.register(`
 .blocklyComment .blocklyTextarea {
   background-color: var(--commentFillColour);
   border: 1px solid var(--commentBorderColour);
+  box-sizing: border-box;
+  display: block;
   outline: 0;
+  padding: 5px;
   resize: none;
-  overflow: hidden;
-  box-sizing: border-box;
-  padding: 8px;
   width: 100%;
   height: 100%;
-  display: block;
 }
 
 .blocklyReadonly.blocklyComment .blocklyTextarea {
@@ -810,6 +810,7 @@ css.register(`
 }
 
 .blocklyCommentTopbarBackground {
+  cursor: grab;
   fill: var(--commentBorderColour);
   height: 24px;
 }

core/comments/rendered_workspace_comment.ts

@@ -66,6 +66,15 @@ export class RenderedWorkspaceComment
       this,
       this.startGesture,
     );
+    // Don't zoom with mousewheel; let it scroll instead.
+    browserEvents.conditionalBind(
+      this.view.getSvgRoot(),
+      'wheel',
+      this,
+      (e: Event) => {
+        e.stopPropagation();
+      },
+    );
   }
 
   /**
@@ -120,11 +129,31 @@ export class RenderedWorkspaceComment
     return this.view.getSvgRoot();
   }
 
-  /** Returns the bounding rectangle of this comment in workspace coordinates. */
+  /**
+   * Returns the comment's size in workspace units.
+   * Does not respect collapsing.
+   */
+  getSize(): Size {
+    return super.getSize();
+  }
+
+  /**
+   * Returns the bounding rectangle of this comment in workspace coordinates.
+   * Respects collapsing.
+   */
   getBoundingRectangle(): Rect {
     const loc = this.getRelativeToSurfaceXY();
-    const size = this.getSize();
-    return new Rect(loc.y, loc.y + size.height, loc.x, loc.x + size.width);
+    const size = this.view?.getSize() ?? this.getSize();
+    let left;
+    let right;
+    if (this.workspace.RTL) {
+      left = loc.x - size.width;
+      right = loc.x;
+    } else {
+      left = loc.x;
+      right = loc.x + size.width;
+    }
+    return new Rect(loc.y, loc.y + size.height, left, right);
   }
 
   /** Move the comment by the given amounts in workspace coordinates. */
@@ -138,7 +167,6 @@ export class RenderedWorkspaceComment
   override moveTo(location: Coordinate, reason?: string[] | undefined): void {
     super.moveTo(location, reason);
     this.view.moveTo(location);
-    this.snapToGrid();
   }
 
   /**
@@ -209,7 +237,6 @@ export class RenderedWorkspaceComment
 
   /** Ends the drag on the comment. */
   endDrag(): void {
-    this.snapToGrid();
     this.dragStrategy.endDrag();
   }
 

core/css.ts

@@ -500,7 +500,7 @@ input[type=number] {
   margin-right: -24px;
 }
 
-.blocklyBlockDragSurface {
+.blocklyBlockDragSurface, .blocklyAnimationLayer {
   position: absolute;
   top: 0;
   left: 0;

core/dragging/block_drag_strategy.ts

@@ -55,24 +55,15 @@ export class BlockDragStrategy implements IDragStrategy {
 
   private dragging = false;
 
-  /**
-   * If this is a shadow block, the offset between this block and the parent
-   * block, to add to the drag location. In workspace units.
-   */
-  private dragOffset = new Coordinate(0, 0);
-
   constructor(private block: BlockSvg) {
     this.workspace = block.workspace;
   }
 
   /** Returns true if the block is currently movable. False otherwise. */
   isMovable(): boolean {
-    if (this.block.isShadow()) {
-      return this.block.getParent()?.isMovable() ?? false;
-    }
-
     return (
       this.block.isOwnMovable() &&
+      !this.block.isShadow() &&
       !this.block.isDeadOrDying() &&
       !this.workspace.options.readOnly &&
       // We never drag blocks in the flyout, only create new blocks that are
@@ -86,11 +77,6 @@ export class BlockDragStrategy implements IDragStrategy {
    * from any parent blocks.
    */
   startDrag(e?: PointerEvent): void {
-    if (this.block.isShadow()) {
-      this.startDraggingShadow(e);
-      return;
-    }
-
     this.dragging = true;
     if (!eventUtils.getGroup()) {
       eventUtils.setGroup(true);
@@ -120,22 +106,6 @@ export class BlockDragStrategy implements IDragStrategy {
     this.workspace.getLayerManager()?.moveToDragLayer(this.block);
   }
 
-  /** Starts a drag on a shadow, recording the drag offset. */
-  private startDraggingShadow(e?: PointerEvent) {
-    const parent = this.block.getParent();
-    if (!parent) {
-      throw new Error(
-        'Tried to drag a shadow block with no parent. ' +
-          'Shadow blocks should always have parents.',
-      );
-    }
-    this.dragOffset = Coordinate.difference(
-      parent.getRelativeToSurfaceXY(),
-      this.block.getRelativeToSurfaceXY(),
-    );
-    parent.startDrag(e);
-  }
-
   /**
    * Whether or not we should disconnect the block when a drag is started.
    *
@@ -204,11 +174,6 @@ export class BlockDragStrategy implements IDragStrategy {
 
   /** Moves the block and updates any connection previews. */
   drag(newLoc: Coordinate): void {
-    if (this.block.isShadow()) {
-      this.block.getParent()?.drag(Coordinate.sum(newLoc, this.dragOffset));
-      return;
-    }
-
     this.block.moveDuringDrag(newLoc);
     this.updateConnectionPreview(
       this.block,
@@ -352,12 +317,7 @@ export class BlockDragStrategy implements IDragStrategy {
    * Cleans up any state at the end of the drag. Applies any pending
    * connections.
    */
-  endDrag(e?: PointerEvent): void {
-    if (this.block.isShadow()) {
-      this.block.getParent()?.endDrag(e);
-      return;
-    }
-
+  endDrag(): void {
     this.fireDragEndEvent();
     this.fireMoveEvent();
 
@@ -413,11 +373,6 @@ export class BlockDragStrategy implements IDragStrategy {
    * including reconnecting connections.
    */
   revertDrag(): void {
-    if (this.block.isShadow()) {
-      this.block.getParent()?.revertDrag();
-      return;
-    }
-
     this.startChildConn?.connect(this.block.nextConnection);
     if (this.startParentConn) {
       switch (this.startParentConn.type) {