Scroll to highlighted procedure

Previously the blocks editor would only highlight a procedure block
when the "Highlight Definition" context menu item was chosen. This
version will also scroll the workspace so that the definition block is
visually centered in the workspace when possible, with a constraint
that the top-left coordinate must appear on the screen.

Fixes #984

Change-Id: If8c06825b285ad7008cbf6f7e7948392be12c0c0

appinventor/blocklyeditor/src/blocks/procedures.js

@@ -843,7 +843,20 @@ Blockly.Blocks['procedures_callnoreturn'] = {
     var workspace = this.workspace;
     option.callback = function() {
       var def = Blockly.Procedures.getDefinition(name, workspace);
-      def && def.select();
+      if (def) {
+        def.select();
+
+        // Attempt to center the definition block, but preserve a minimum X, Y position so that
+        // the definition of the block always appears on screen for visually large procedures
+        var xy = def.getRelativeToSurfaceXY();
+        var wh = def.getHeightWidth();
+        var metrics = def.workspace.getMetrics();
+        var minTop = xy.y - metrics.contentTop;
+        var minLeft = xy.x - metrics.contentLeft;
+        var midX = minLeft + (wh.width - metrics.viewWidth) / 2;
+        var midY = minTop + (wh.height - metrics.viewHeight) / 2;
+        def.workspace.scrollbar.set(Math.min(minLeft, midX), Math.min(minTop, midY));
+      }
     };
     options.push(option);
   },