Skip to content

fix: Improve block placement when inserting from flyout via keyboard #10318

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gonfunko merged 2 commits into from
Aug 25, 2026
Merged

fix: Improve block placement when inserting from flyout via keyboard #10318

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6318583
fix: Improve block placement when inserting from flyout via keyboard
gonfunko Aug 24, 2026
cfab8a4
chore: Remove unused variables
gonfunko Aug 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 29 additions & 22 deletions packages/blockly/core/dragging/block_drag_strategy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,8 +149,12 @@ export class BlockDragStrategy implements IDragStrategy {

if (this.moveMode !== MoveMode.CONSTRAINED) return;
const workspace = newBlock.workspace;
const initialY = this.WORKSPACE_MARGIN;
const initialX = this.WORKSPACE_MARGIN;
const metrics = workspace.getMetricsManager().getViewMetrics(true);
const initialY = metrics.top + this.WORKSPACE_MARGIN;
const initialX = workspace.RTL
? metrics.left + metrics.width - this.WORKSPACE_MARGIN
: metrics.left + this.WORKSPACE_MARGIN;

// How far apart the new block should be placed horizontally from an
// existing one.
const xSpacing = 80;
Expand All @@ -172,12 +176,7 @@ export class BlockDragStrategy implements IDragStrategy {
);
});

const toolboxWidth = workspace.getToolbox()?.getWidth();
const workspaceWidth =
workspace.getParentSvg().clientWidth - (toolboxWidth ?? 0);
const workspaceHeight = workspace.getParentSvg().clientHeight;
const {height: newBlockHeight, width: newBlockWidth} =
newBlock.getHeightWidth();
const newBlockWidth = newBlock.getHeightWidth().width;

const getNextIntersectingBlock = function (
newBlockRect: Rect,
Expand All @@ -198,31 +197,39 @@ export class BlockDragStrategy implements IDragStrategy {
// Make the initial movement of shifting the block to its best possible
// position.
let boundingRect = newBlock.getBoundingRectangle();
newBlock.moveBy(cursorX - boundingRect.left, cursorY - boundingRect.top, [
'cleanup',
]);
newBlock.moveBy(
workspace.RTL
? cursorX - boundingRect.right
: cursorX - boundingRect.left,
cursorY - boundingRect.top,
['cleanup'],
);

boundingRect = newBlock.getBoundingRectangle();
let conflictingRect = getNextIntersectingBlock(boundingRect);
while (conflictingRect != null) {
const newCursorX =
conflictingRect.left + conflictingRect.getWidth() + xSpacing;
const newCursorX = workspace.RTL
? conflictingRect.left - xSpacing
: conflictingRect.right + xSpacing;
const newCursorY =
conflictingRect.top + conflictingRect.getHeight() + minBlockHeight;
if (newCursorX + newBlockWidth <= workspaceWidth) {
if (
workspace.RTL
? newCursorX - newBlockWidth >= metrics.left
: newCursorX + newBlockWidth <= metrics.left + metrics.width
) {
cursorX = newCursorX;
} else if (newCursorY + newBlockHeight <= workspaceHeight) {
cursorY = newCursorY;
cursorX = initialX;
} else {
// Off screen, but new blocks will be selected which will scroll them
// into view.
cursorY = newCursorY;
cursorX = initialX;
}
newBlock.moveBy(cursorX - boundingRect.left, cursorY - boundingRect.top, [
'cleanup',
]);
newBlock.moveBy(
workspace.RTL
? cursorX - boundingRect.right
: cursorX - boundingRect.left,
cursorY - boundingRect.top,
['cleanup'],
);
boundingRect = newBlock.getBoundingRectangle();
conflictingRect = getNextIntersectingBlock(boundingRect);
}
Expand Down