Skip to content
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

Jump to bottom

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

Merged
merged 1 commit into from
Apr 9, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions core/flyout_base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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();

Expand Down
39 changes: 0 additions & 39 deletions core/metrics_manager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
}
};
42 changes: 27 additions & 15 deletions core/scrollbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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) {
Expand Down Expand Up @@ -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}
Expand All @@ -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}
Expand Down Expand Up @@ -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;


/**
Expand Down Expand Up @@ -692,22 +705,22 @@ 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;
}
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
Expand Down Expand Up @@ -789,20 +802,19 @@ 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;
}
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
Expand Down