fix centering behavior for blocks (#10482)

Author: riknoll

pxtblocks/builtins/functions.ts

@@ -292,7 +292,7 @@ export function initFunctions() {
             let newBlock = workspace.getBlockById(newBlockIds[0]) as Blockly.BlockSvg;
             newBlock.select();
             // Center on the new block so we know where it is
-            workspace.centerOnBlock(newBlock.id);
+            workspace.centerOnBlock(newBlock.id, true);
         }
 
         workspace.registerButtonCallback('CREATE_FUNCTION', function (button) {

pxtblocks/plugins/functions/blocks/functionDeclarationBlock.ts

@@ -104,15 +104,15 @@ const FUNCTION_DECLARATION_MIXIN: FunctionDeclarationMixin = {
                 const workspace = this.workspace;
 
                 if (workspace instanceof Blockly.WorkspaceSvg) {
-                    workspace.centerOnBlock(this.id);
+                    workspace.centerOnBlock(this.id, true);
                 }
                 newInput.fieldRow[0].showEditor();
             } else if (newInput.type == Blockly.inputs.inputTypes.VALUE) {
                 // Inspect the argument editor.
                 const target = newInput.connection!.targetBlock()!;
                 const workspace = target.workspace;
                 if (workspace instanceof Blockly.WorkspaceSvg) {
-                    workspace.centerOnBlock(target.id);
+                    workspace.centerOnBlock(target.id, true);
                 }
                 target.getField("TEXT")!.showEditor();
             }

pxtblocks/plugins/functions/extensions.ts

@@ -57,8 +57,9 @@ const contextMenuEditMixin = {
             callback: () => {
                 const functionName = this.getField("function_name")!.getText();
                 const definition = getDefinition(functionName, this.workspace);
-                if (definition && this.workspace instanceof Blockly.WorkspaceSvg)
-                    this.workspace.centerOnBlock(definition.id);
+                if (definition && this.workspace instanceof Blockly.WorkspaceSvg) {
+                    this.workspace.centerOnBlock(definition.id, true);
+                }
             },
         };
         menuOptions.push(gtdOption);

pxtblocks/plugins/functions/utils.ts

@@ -435,7 +435,7 @@ function createFunctionCallbackFactory_(workspace: Blockly.WorkspaceSvg) {
                 block.scheduleSnapAndBump();
             }
 
-            workspace.centerOnBlock(block.id);
+            workspace.centerOnBlock(block.id, true);
             Blockly.Events.setGroup(false);
 
             setTimeout(() => {

webapp/src/blocks.tsx

@@ -1181,22 +1181,73 @@ export class Editor extends toolboxeditor.ToolboxEditor {
                 if (brk) {
                     const b = this.editor.getBlockById(bid) as Blockly.BlockSvg;
                     b.setWarningText(brk ? brk.exceptionMessage : undefined, pxtblockly.PXT_WARNING_ID);
-                    // ensure highlight is in the screen when a breakpoint info is available
-                    // TODO: make warning mode look good
-                    // b.setHighlightWarning(brk && !!brk.exceptionMessage);
-                    const p = b.getRelativeToSurfaceXY();
-                    const c = b.getHeightWidth();
-                    const s = this.editor.scale;
-                    const m = this.editor.getMetrics();
-                    // don't center if block is still on the screen
-                    const marginx = 4;
-                    const marginy = 4;
-                    if (p.x * s < m.viewLeft + marginx
-                        || (p.x + c.width) * s > m.viewLeft + m.viewWidth - marginx
-                        || p.y * s < m.viewTop + marginy
-                        || (p.y + c.height) * s > m.viewTop + m.viewHeight - marginy) {
-                        // move the block towards the center
-                        this.editor.centerOnBlock(bid);
+
+                    // scroll the workspace so that the block is visible. if the block is too tall or too wide
+                    // to fit in the workspace view, then try to align it with the left/top edge of the block
+                    const xy = b.getRelativeToSurfaceXY();
+                    const scale = this.editor.scale;
+                    const metrics = this.editor.getMetrics();
+
+                    // this margin is in screen pixels
+                    const margin = 20;
+
+                    let scrollX = metrics.viewLeft;
+                    let scrollY = metrics.viewTop;
+
+                    const blockWidth = b.width * scale + margin * 2;
+                    const blockHeight = b.height * scale + margin * 2;
+
+                    // in RTL workspaces, the x coordinate for the block is the right side
+                    const blockLeftEdge = this.editor.RTL ? (xy.x - b.width) * scale - margin : xy.x * scale - margin;
+                    const blockRightEdge = blockLeftEdge + blockWidth;
+
+                    const blockTopEdge = xy.y * scale - margin;
+                    const blockBottomEdge = blockTopEdge + blockHeight;
+
+                    const viewBottom = metrics.viewTop + metrics.viewHeight;
+                    const viewRight = metrics.viewLeft + metrics.viewWidth;
+
+                    if (metrics.viewTop > blockTopEdge) {
+                        scrollY = blockTopEdge;
+                    }
+                    else if (viewBottom < blockBottomEdge) {
+                        if (blockHeight > metrics.viewHeight) {
+                            scrollY = blockTopEdge;
+                        }
+                        else {
+                            scrollY = blockBottomEdge - metrics.viewHeight;
+                        }
+                    }
+
+                    if (this.editor.RTL) {
+                        // for RTL, we want to align to the right edge
+                        if (viewRight < blockRightEdge) {
+                            scrollX = blockRightEdge - metrics.viewWidth;
+                        }
+                        else if (metrics.viewLeft > blockLeftEdge) {
+                            if (blockWidth > metrics.viewWidth) {
+                                scrollX = blockRightEdge - metrics.viewWidth;
+                            }
+                            else {
+                                scrollX = blockLeftEdge;
+                            }
+                        }
+                    }
+                    else if (metrics.viewLeft > blockLeftEdge) {
+                        scrollX = blockLeftEdge;
+                    }
+                    else if (viewRight < blockRightEdge) {
+                        if (blockWidth > metrics.viewWidth) {
+                            scrollX = blockLeftEdge;
+                        }
+                        else {
+                            scrollX = blockRightEdge - metrics.viewWidth;
+                        }
+                    }
+
+                    if (scrollX !== metrics.viewLeft || scrollY !== metrics.scrollTop) {
+                        // scroll coordinates are negative
+                        this.editor.scroll(-scrollX, -scrollY);
                     }
                 }
                 return true;

webapp/src/createFunction.tsx

@@ -87,7 +87,7 @@ export class CreateFunctionDialog extends data.Component<ISettingsProps, CreateF
         functionBeingEdited.domToMutation(initialMutation);
         functionBeingEdited.initSvg();
         functionBeingEdited.render();
-        functionEditorWorkspace.centerOnBlock(functionBeingEdited.id);
+        functionEditorWorkspace.centerOnBlock(functionBeingEdited.id, true);
 
         functionEditorWorkspace.addChangeListener(() => {
             const { functionBeingEdited } = this.state;