Update Flyout metrics and implement adjustable margin for scrollbars. (#4763)

core/flyout_base.js

@@ -196,7 +196,7 @@ Blockly.Flyout.prototype.GAP_Y = Blockly.Flyout.prototype.MARGIN * 3;
  * @type {number}
  * @const
  */
-Blockly.Flyout.prototype.SCROLLBAR_PADDING = 2;
+Blockly.Flyout.prototype.SCROLLBAR_MARGIN = 2.5;
 
 /**
  * Width of flyout.
@@ -273,7 +273,7 @@ Blockly.Flyout.prototype.init = function(targetWorkspace) {
 
   this.workspace_.scrollbar = new Blockly.ScrollbarPair(
       this.workspace_, this.horizontalLayout, !this.horizontalLayout,
-      'blocklyFlyoutScrollbar');
+      'blocklyFlyoutScrollbar', this.SCROLLBAR_MARGIN);
 
   this.hide();
 

core/metrics_manager.js

@@ -556,42 +556,3 @@ Blockly.FlyoutMetricsManager.prototype.getScrollMetrics = function(
     left: 0,
   };
 };
-
-/**
- * @override
- */
-Blockly.FlyoutMetricsManager.prototype.getViewMetrics = function(
-    opt_getWorkspaceCoordinates) {
-  var svgMetrics = this.getSvgMetrics();
-  var scale = opt_getWorkspaceCoordinates ? this.workspace_.scale : 1;
-  if (this.flyout_.horizontalLayout) {
-    var viewWidth = svgMetrics.width - 2 * this.flyout_.SCROLLBAR_PADDING;
-    var viewHeight = svgMetrics.height - this.flyout_.SCROLLBAR_PADDING;
-  } else {
-    var viewWidth = svgMetrics.width - this.flyout_.SCROLLBAR_PADDING;
-    var viewHeight = svgMetrics.height - 2 * this.flyout_.SCROLLBAR_PADDING;
-  }
-  return {
-    height: viewHeight / scale,
-    width: viewWidth / scale,
-    top: -this.workspace_.scrollY / scale,
-    left: -this.workspace_.scrollX / scale,
-  };
-};
-
-/**
- * @override
- */
-Blockly.FlyoutMetricsManager.prototype.getAbsoluteMetrics = function() {
-  var scrollbarPadding = this.flyout_.SCROLLBAR_PADDING;
-
-  if (this.flyout_.horizontalLayout) {
-    // The viewWidth is svgWidth - 2 * scrollbarPadding. We want to put half
-    // of that padding to the left of the blocks.
-    return {top: 0, left: scrollbarPadding};
-  } else {
-    // The viewHeight is svgHeight - 2 * scrollbarPadding. We want to put half
-    // of that padding to the top of the blocks.
-    return {top: scrollbarPadding, left: 0};
-  }
-};

core/scrollbar.js

@@ -38,10 +38,11 @@ goog.requireType('Blockly.WorkspaceSvg');
  * @param {boolean=} addVertical Whether to add a vertical scrollbar. Defaults
  *    to true.
  * @param {string=} opt_class A class to be applied to these scrollbars.
+ * @param {number=} opt_margin The margin to apply to these scrollbars.
  * @constructor
  */
 Blockly.ScrollbarPair = function(
-    workspace, addHorizontal, addVertical, opt_class) {
+    workspace, addHorizontal, addVertical, opt_class, opt_margin) {
   /**
    * The workspace this scrollbar pair is bound to.
    * @type {!Blockly.WorkspaceSvg}
@@ -55,11 +56,11 @@ Blockly.ScrollbarPair = function(
 
   if (addHorizontal) {
     this.hScroll = new Blockly.Scrollbar(
-        workspace, true, isPair, opt_class);
+        workspace, true, isPair, opt_class, opt_margin);
   }
   if (addVertical ) {
     this.vScroll = new Blockly.Scrollbar(
-        workspace, false, isPair, opt_class);
+        workspace, false, isPair, opt_class, opt_margin);
   }
 
   if (isPair) {
@@ -335,9 +336,11 @@ Blockly.ScrollbarPair.prototype.resizeView = function(hostMetrics) {
  * @param {boolean} horizontal True if horizontal, false if vertical.
  * @param {boolean=} opt_pair True if scrollbar is part of a horiz/vert pair.
  * @param {string=} opt_class A class to be applied to this scrollbar.
+ * @param {number=} opt_margin The margin to apply to this scrollbar.
  * @constructor
  */
-Blockly.Scrollbar = function(workspace, horizontal, opt_pair, opt_class) {
+Blockly.Scrollbar = function(
+    workspace, horizontal, opt_pair, opt_class, opt_margin) {
   /**
    * The workspace this scrollbar is bound to.
    * @type {!Blockly.WorkspaceSvg}
@@ -356,6 +359,15 @@ Blockly.Scrollbar = function(workspace, horizontal, opt_pair, opt_class) {
    * @private
    */
   this.horizontal_ = horizontal;
+  /**
+   * Margin around the scrollbar (between the scrollbar and the edge of the
+   * viewport in pixels).
+   * @type {number}
+   * @const
+   * @private
+   */
+  this.margin_ = (opt_margin !== undefined) ?
+      opt_margin : Blockly.Scrollbar.DEFAULT_SCROLLBAR_MARGIN;
   /**
    * Previously recorded metrics from the workspace.
    * @type {?Blockly.utils.Metrics}
@@ -474,12 +486,13 @@ if (Blockly.Touch.TOUCH_ENABLED) {
 }
 
 /**
- * Margin around the scrollbar (between the scrollbar and the edge of the
- * viewport in pixels).
+ * Default margin around the scrollbar (between the scrollbar and the edge of
+ * the viewport in pixels).
  * @type {number}
  * @const
+ * @package
  */
-Blockly.Scrollbar.SCROLLBAR_MARGIN = 0.5;
+Blockly.Scrollbar.DEFAULT_SCROLLBAR_MARGIN = 0.5;
 
 
 /**
@@ -692,7 +705,7 @@ Blockly.Scrollbar.prototype.resizeHorizontal_ = function(hostMetrics) {
  *     the required dimensions, possibly fetched from the host object.
  */
 Blockly.Scrollbar.prototype.resizeViewHorizontal = function(hostMetrics) {
-  var viewSize = hostMetrics.viewWidth - Blockly.Scrollbar.SCROLLBAR_MARGIN * 2;
+  var viewSize = hostMetrics.viewWidth - this.margin_ * 2;
   if (this.pair_) {
     // Shorten the scrollbar to make room for the corner square.
     viewSize -= Blockly.Scrollbar.scrollbarThickness;
@@ -700,14 +713,14 @@ Blockly.Scrollbar.prototype.resizeViewHorizontal = function(hostMetrics) {
   this.setScrollbarLength_(Math.max(0, viewSize));
 
   var xCoordinate =
-      hostMetrics.absoluteLeft + Blockly.Scrollbar.SCROLLBAR_MARGIN;
+      hostMetrics.absoluteLeft + this.margin_;
   if (this.pair_ && this.workspace_.RTL) {
     xCoordinate += Blockly.Scrollbar.scrollbarThickness;
   }
 
   // Horizontal toolbar should always be just above the bottom of the workspace.
   var yCoordinate = hostMetrics.absoluteTop + hostMetrics.viewHeight -
-      Blockly.Scrollbar.scrollbarThickness - Blockly.Scrollbar.SCROLLBAR_MARGIN;
+      Blockly.Scrollbar.scrollbarThickness - this.margin_;
   this.setPosition(xCoordinate, yCoordinate);
 
   // If the view has been resized, a content resize will also be necessary.  The
@@ -789,7 +802,7 @@ Blockly.Scrollbar.prototype.resizeVertical_ = function(hostMetrics) {
  *     the required dimensions, possibly fetched from the host object.
  */
 Blockly.Scrollbar.prototype.resizeViewVertical = function(hostMetrics) {
-  var viewSize = hostMetrics.viewHeight - Blockly.Scrollbar.SCROLLBAR_MARGIN * 2;
+  var viewSize = hostMetrics.viewHeight - this.margin_ * 2;
   if (this.pair_) {
     // Shorten the scrollbar to make room for the corner square.
     viewSize -= Blockly.Scrollbar.scrollbarThickness;
@@ -797,12 +810,11 @@ Blockly.Scrollbar.prototype.resizeViewVertical = function(hostMetrics) {
   this.setScrollbarLength_(Math.max(0, viewSize));
 
   var xCoordinate = this.workspace_.RTL ?
-      hostMetrics.absoluteLeft + Blockly.Scrollbar.SCROLLBAR_MARGIN :
+      hostMetrics.absoluteLeft + this.margin_ :
       hostMetrics.absoluteLeft + hostMetrics.viewWidth -
-      Blockly.Scrollbar.scrollbarThickness - Blockly.Scrollbar.SCROLLBAR_MARGIN;
+      Blockly.Scrollbar.scrollbarThickness - this.margin_;
 
-  var yCoordinate =
-      hostMetrics.absoluteTop + Blockly.Scrollbar.SCROLLBAR_MARGIN;
+  var yCoordinate = hostMetrics.absoluteTop + this.margin_;
   this.setPosition(xCoordinate, yCoordinate);
 
   // If the view has been resized, a content resize will also be necessary.  The