Fixing x positioning of blocks with output connections in vertical flyout.

This commit is contained in:
kozbial
2019-09-10 14:33:27 -07:00
parent f0dd5d8954
commit b26f50ab8d
3 changed files with 34 additions and 18 deletions

View File

@@ -34,8 +34,10 @@ goog.require('Blockly.FlyoutButton');
goog.require('Blockly.FlyoutCursor');
goog.require('Blockly.Gesture');
goog.require('Blockly.MarkerCursor');
goog.require('Blockly.Scrollbar');
goog.require('Blockly.Tooltip');
goog.require('Blockly.Touch');
goog.require('Blockly.blockRendering');
goog.require('Blockly.utils');
goog.require('Blockly.utils.Coordinate');
goog.require('Blockly.utils.dom');
@@ -109,6 +111,13 @@ Blockly.Flyout = function(workspaceOptions) {
* @private
*/
this.permanentlyDisabled_ = [];
/**
* Width of output tab.
* @type {number}
* @const
*/
this.tabWidth_ = Blockly.blockRendering.getConstants().TAB_WIDTH;
};
/**

View File

@@ -29,6 +29,8 @@ goog.provide('Blockly.HorizontalFlyout');
goog.require('Blockly.Block');
goog.require('Blockly.Flyout');
goog.require('Blockly.FlyoutButton');
goog.require('Blockly.Scrollbar');
goog.require('Blockly.WidgetDiv');
goog.require('Blockly.utils');
goog.require('Blockly.utils.object');
goog.require('Blockly.utils.Rect');
@@ -269,17 +271,17 @@ Blockly.HorizontalFlyout.prototype.wheel_ = function(e) {
Blockly.HorizontalFlyout.prototype.layout_ = function(contents, gaps) {
this.workspace_.scale = this.targetWorkspace_.scale;
var margin = this.MARGIN;
var cursorX = this.RTL ? margin : margin + Blockly.BlockSvg.TAB_WIDTH;
var cursorX = margin + this.tabWidth_;
var cursorY = margin;
if (this.RTL) {
contents = contents.reverse();
}
for (var i = 0, item; item = contents[i]; i++) {
for (var i = 0, item; (item = contents[i]); i++) {
if (item.type == 'block') {
var block = item.block;
var allBlocks = block.getDescendants(false);
for (var j = 0, child; child = allBlocks[j]; j++) {
for (var j = 0, child; (child = allBlocks[j]); j++) {
// Mark blocks as being inside a flyout. This is used to detect and
// prevent the closure of the flyout if the user right-clicks on such a
// block.
@@ -290,11 +292,11 @@ Blockly.HorizontalFlyout.prototype.layout_ = function(contents, gaps) {
var blockHW = block.getHeightWidth();
// Figure out where to place the block.
var tab = block.outputConnection ? Blockly.BlockSvg.TAB_WIDTH : 0;
var tab = block.outputConnection ? this.tabWidth_ : 0;
if (this.RTL) {
var moveX = cursorX + blockHW.width;
} else {
var moveX = cursorX + tab;
var moveX = cursorX - tab;
}
block.moveBy(moveX, cursorY);
@@ -367,7 +369,7 @@ Blockly.HorizontalFlyout.prototype.reflowInternal_ = function() {
this.workspace_.scale = this.targetWorkspace_.scale;
var flyoutHeight = 0;
var blocks = this.workspace_.getTopBlocks(false);
for (var i = 0, block; block = blocks[i]; i++) {
for (var i = 0, block; (block = blocks[i]); i++) {
flyoutHeight = Math.max(flyoutHeight, block.getHeightWidth().height);
}
flyoutHeight += this.MARGIN * 1.5;
@@ -375,7 +377,7 @@ Blockly.HorizontalFlyout.prototype.reflowInternal_ = function() {
flyoutHeight += Blockly.Scrollbar.scrollbarThickness;
if (this.height_ != flyoutHeight) {
for (var i = 0, block; block = blocks[i]; i++) {
for (var i = 0, block; (block = blocks[i]); i++) {
if (block.flyoutRect_) {
this.moveRectToBlock_(block.flyoutRect_, block);
}

View File

@@ -29,6 +29,8 @@ goog.provide('Blockly.VerticalFlyout');
goog.require('Blockly.Block');
goog.require('Blockly.Flyout');
goog.require('Blockly.FlyoutButton');
goog.require('Blockly.Scrollbar');
goog.require('Blockly.WidgetDiv');
goog.require('Blockly.utils');
goog.require('Blockly.utils.object');
goog.require('Blockly.utils.Rect');
@@ -256,7 +258,7 @@ Blockly.VerticalFlyout.prototype.wheel_ = function(e) {
Blockly.VerticalFlyout.prototype.layout_ = function(contents, gaps) {
this.workspace_.scale = this.targetWorkspace_.scale;
var margin = this.MARGIN;
var cursorX = this.RTL ? margin : margin + Blockly.BlockSvg.TAB_WIDTH;
var cursorX = this.RTL ? margin : margin + this.tabWidth_;
var cursorY = margin;
for (var i = 0, item; item = contents[i]; i++) {
@@ -272,10 +274,11 @@ Blockly.VerticalFlyout.prototype.layout_ = function(contents, gaps) {
block.render();
var root = block.getSvgRoot();
var blockHW = block.getHeightWidth();
block.moveBy(cursorX, cursorY);
var moveX = block.outputConnection ? cursorX - this.tabWidth_ : cursorX;
block.moveBy(moveX, cursorY);
var rect = this.createRect_(block,
this.RTL ? cursorX - blockHW.width : cursorX, cursorY, blockHW, i);
this.RTL ? moveX - blockHW.width : moveX, cursorY, blockHW, i);
this.addBlockListeners_(root, block, rect);
@@ -369,17 +372,17 @@ Blockly.VerticalFlyout.prototype.reflowInternal_ = function() {
this.workspace_.scale = this.targetWorkspace_.scale;
var flyoutWidth = 0;
var blocks = this.workspace_.getTopBlocks(false);
for (var i = 0, block; block = blocks[i]; i++) {
for (var i = 0, block; (block = blocks[i]); i++) {
var width = block.getHeightWidth().width;
if (block.outputConnection) {
width -= Blockly.BlockSvg.TAB_WIDTH;
width -= this.tabWidth_;
}
flyoutWidth = Math.max(flyoutWidth, width);
}
for (var i = 0, button; button = this.buttons_[i]; i++) {
for (var i = 0, button; (button = this.buttons_[i]); i++) {
flyoutWidth = Math.max(flyoutWidth, button.width);
}
flyoutWidth += this.MARGIN * 1.5 + Blockly.BlockSvg.TAB_WIDTH;
flyoutWidth += this.MARGIN * 1.5 + this.tabWidth_;
flyoutWidth *= this.workspace_.scale;
flyoutWidth += Blockly.Scrollbar.scrollbarThickness;
@@ -388,8 +391,10 @@ Blockly.VerticalFlyout.prototype.reflowInternal_ = function() {
if (this.RTL) {
// With the flyoutWidth known, right-align the blocks.
var oldX = block.getRelativeToSurfaceXY().x;
var newX = flyoutWidth / this.workspace_.scale - this.MARGIN -
Blockly.BlockSvg.TAB_WIDTH;
var newX = flyoutWidth / this.workspace_.scale - this.MARGIN;
if (!block.outputConnection) {
newX -= this.tabWidth_;
}
block.moveBy(newX - oldX, 0);
}
if (block.flyoutRect_) {
@@ -398,10 +403,10 @@ Blockly.VerticalFlyout.prototype.reflowInternal_ = function() {
}
if (this.RTL) {
// With the flyoutWidth known, right-align the buttons.
for (var i = 0, button; button = this.buttons_[i]; i++) {
for (var i = 0, button; (button = this.buttons_[i]); i++) {
var y = button.getPosition().y;
var x = flyoutWidth / this.workspace_.scale - button.width -
this.MARGIN - Blockly.BlockSvg.TAB_WIDTH;
this.MARGIN - this.tabWidth_;
button.moveTo(x, y);
}
}