From 574ecc14663e9a5529866764e957261ea9677667 Mon Sep 17 00:00:00 2001 From: kozbial Date: Wed, 7 Apr 2021 10:34:07 -0700 Subject: [PATCH] Update Flyout metrics and implement adjustable margin for scrollbars. --- core/flyout_base.js | 4 ++-- core/metrics_manager.js | 39 -------------------------------------- core/scrollbar.js | 42 ++++++++++++++++++++++++++--------------- 3 files changed, 29 insertions(+), 56 deletions(-) diff --git a/core/flyout_base.js b/core/flyout_base.js index 1e3bdad0bcd..971ca891426 100644 --- a/core/flyout_base.js +++ b/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(); diff --git a/core/metrics_manager.js b/core/metrics_manager.js index 0f2975d0bdc..5c420ae37e4 100644 --- a/core/metrics_manager.js +++ b/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}; - } -}; diff --git a/core/scrollbar.js b/core/scrollbar.js index d722471becd..341d1fdfdfe 100644 --- a/core/scrollbar.js +++ b/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