Use goog.math.Coordinate instead of separate X and Y properties.

This commit is contained in:
Neil Fraser
2016-04-19 21:14:23 -07:00
parent 6d58f7959f
commit 7e96a60da7
6 changed files with 49 additions and 63 deletions

View File

@@ -853,8 +853,8 @@ Blockly.BlockSvg.prototype.onMouseMove_ = function(e) {
// Drag all the nested bubbles.
for (var i = 0; i < this.draggedBubbles_.length; i++) {
var commentData = this.draggedBubbles_[i];
commentData.bubble.setIconLocation(commentData.x + dx,
commentData.y + dy);
commentData.bubble.setIconLocation(
new goog.math.Coordinate(commentData.x + dx, commentData.y + dy));
}
// Check to see if any of this block's connections are within range of

View File

@@ -34,18 +34,17 @@ goog.require('goog.userAgent');
/**
* Class for UI bubble.
* @param {!Blockly.Workspace} workspace The workspace on which to draw the
* @param {!Blockly.WorkspaceSvg} workspace The workspace on which to draw the
* bubble.
* @param {!Element} content SVG content for the bubble.
* @param {Element} shape SVG element to avoid eclipsing.
* @param {number} anchorX Absolute horizontal position of bubbles anchor point.
* @param {number} anchorY Absolute vertical position of bubbles anchor point.
* @param {!goog.math.Coodinate} anchorXY Absolute position of bubble's anchor
* point.
* @param {?number} bubbleWidth Width of bubble, or null if not resizable.
* @param {?number} bubbleHeight Height of bubble, or null if not resizable.
* @constructor
*/
Blockly.Bubble = function(workspace, content, shape,
anchorX, anchorY,
Blockly.Bubble = function(workspace, content, shape, anchorXY,
bubbleWidth, bubbleHeight) {
this.workspace_ = workspace;
this.content_ = content;
@@ -60,7 +59,7 @@ Blockly.Bubble = function(workspace, content, shape,
var canvas = workspace.getBubbleCanvas();
canvas.appendChild(this.createDom_(content, !!(bubbleWidth && bubbleHeight)));
this.setAnchorLocation(anchorX, anchorY);
this.setAnchorLocation(anchorXY);
if (!bubbleWidth || !bubbleHeight) {
var bBox = /** @type {SVGLocatable} */ (this.content_).getBBox();
bubbleWidth = bBox.width + 2 * Blockly.Bubble.BORDER_WIDTH;
@@ -145,16 +144,11 @@ Blockly.Bubble.unbindDragEvents_ = function() {
Blockly.Bubble.prototype.rendered_ = false;
/**
* Absolute X coordinate of anchor point.
* Absolute coordinate of anchor point.
* @type {goog.math.Coordinate}
* @private
*/
Blockly.Bubble.prototype.anchorX_ = 0;
/**
* Absolute Y coordinate of anchor point.
* @private
*/
Blockly.Bubble.prototype.anchorY_ = 0;
Blockly.Bubble.prototype.anchorXY_ = null;
/**
* Relative X coordinate of bubble with respect to the anchor's centre.
@@ -360,12 +354,10 @@ Blockly.Bubble.prototype.promote_ = function() {
/**
* Notification that the anchor has moved.
* Update the arrow and bubble accordingly.
* @param {number} x Absolute horizontal location.
* @param {number} y Absolute vertical location.
* @param {!goog.math.Coordinate} xy Absolute location.
*/
Blockly.Bubble.prototype.setAnchorLocation = function(x, y) {
this.anchorX_ = x;
this.anchorY_ = y;
Blockly.Bubble.prototype.setAnchorLocation = function(xy) {
this.anchorXY_ = xy;
if (this.rendered_) {
this.positionBubble_();
}
@@ -383,31 +375,32 @@ Blockly.Bubble.prototype.layoutBubble_ = function() {
var metrics = this.workspace_.getMetrics();
metrics.viewWidth /= this.workspace_.scale;
metrics.viewLeft /= this.workspace_.scale;
var anchorX = this.anchorXY_.x;
if (this.workspace_.RTL) {
if (this.anchorX_ - metrics.viewLeft - relativeLeft - this.width_ <
if (anchorX - metrics.viewLeft - relativeLeft - this.width_ <
Blockly.Scrollbar.scrollbarThickness) {
// Slide the bubble right until it is onscreen.
relativeLeft = this.anchorX_ - metrics.viewLeft - this.width_ -
relativeLeft = anchorX - metrics.viewLeft - this.width_ -
Blockly.Scrollbar.scrollbarThickness;
} else if (this.anchorX_ - metrics.viewLeft - relativeLeft >
} else if (anchorX - metrics.viewLeft - relativeLeft >
metrics.viewWidth) {
// Slide the bubble left until it is onscreen.
relativeLeft = this.anchorX_ - metrics.viewLeft - metrics.viewWidth;
relativeLeft = anchorX - metrics.viewLeft - metrics.viewWidth;
}
} else {
if (this.anchorX_ + relativeLeft < metrics.viewLeft) {
if (anchorX + relativeLeft < metrics.viewLeft) {
// Slide the bubble right until it is onscreen.
relativeLeft = metrics.viewLeft - this.anchorX_;
relativeLeft = metrics.viewLeft - anchorX;
} else if (metrics.viewLeft + metrics.viewWidth <
this.anchorX_ + relativeLeft + this.width_ +
anchorX + relativeLeft + this.width_ +
Blockly.BlockSvg.SEP_SPACE_X +
Blockly.Scrollbar.scrollbarThickness) {
// Slide the bubble left until it is onscreen.
relativeLeft = metrics.viewLeft + metrics.viewWidth - this.anchorX_ -
relativeLeft = metrics.viewLeft + metrics.viewWidth - anchorX -
this.width_ - Blockly.Scrollbar.scrollbarThickness;
}
}
if (this.anchorY_ + relativeTop < metrics.viewTop) {
if (this.anchorXY_.y + relativeTop < metrics.viewTop) {
// Slide the bubble below the block.
var bBox = /** @type {SVGLocatable} */ (this.shape_).getBBox();
relativeTop = bBox.height;
@@ -421,13 +414,13 @@ Blockly.Bubble.prototype.layoutBubble_ = function() {
* @private
*/
Blockly.Bubble.prototype.positionBubble_ = function() {
var left;
var left = this.anchorXY_.x;
if (this.workspace_.RTL) {
left = this.anchorX_ - this.relativeLeft_ - this.width_;
left -= this.relativeLeft_ + this.width_;
} else {
left = this.anchorX_ + this.relativeLeft_;
left += this.relativeLeft_;
}
var top = this.relativeTop_ + this.anchorY_;
var top = this.relativeTop_ + this.anchorXY_.y;
this.bubbleGroup_.setAttribute('transform',
'translate(' + left + ',' + top + ')');
};

View File

@@ -180,10 +180,9 @@ Blockly.Comment.prototype.setVisible = function(visible) {
if (visible) {
// Create the bubble.
this.bubble_ = new Blockly.Bubble(
/** @type {!Blockly.Workspace} */ (this.block_.workspace),
/** @type {!Blockly.WorkspaceSvg} */ (this.block_.workspace),
this.createEditor_(), this.block_.svgPath_,
this.iconX_, this.iconY_,
this.width_, this.height_);
this.iconXY_, this.width_, this.height_);
this.bubble_.registerResizeEvent(this, this.resizeBubble_);
this.updateColour();
} else {

View File

@@ -27,6 +27,7 @@
goog.provide('Blockly.Icon');
goog.require('goog.dom');
goog.require('goog.math.Coordinate');
/**
@@ -56,16 +57,11 @@ Blockly.Icon.prototype.SIZE = 17;
Blockly.Icon.prototype.bubble_ = null;
/**
* Absolute X coordinate of icon's center.
* Absolute coordinate of icon's center.
* @type {goog.math.Coordinate}
* @private
*/
Blockly.Icon.prototype.iconX_ = 0;
/**
* Absolute Y coordinate of icon's centre.
* @private
*/
Blockly.Icon.prototype.iconY_ = 0;
Blockly.Icon.prototype.iconXY_ = null;
/**
* Create the icon on the block.
@@ -176,14 +172,12 @@ Blockly.Icon.prototype.renderIcon = function(cursorX) {
/**
* Notification that the icon has moved. Update the arrow accordingly.
* @param {number} x Absolute horizontal location.
* @param {number} y Absolute vertical location.
* @param {!goog.math.Coordinate} xy Absolute location.
*/
Blockly.Icon.prototype.setIconLocation = function(x, y) {
this.iconX_ = x;
this.iconY_ = y;
Blockly.Icon.prototype.setIconLocation = function(xy) {
this.iconXY_ = xy;
if (this.isVisible()) {
this.bubble_.setAnchorLocation(x, y);
this.bubble_.setAnchorLocation(xy);
}
};
@@ -195,17 +189,18 @@ Blockly.Icon.prototype.computeIconLocation = function() {
// Find coordinates for the centre of the icon and update the arrow.
var blockXY = this.block_.getRelativeToSurfaceXY();
var iconXY = Blockly.getRelativeXY_(this.iconGroup_);
var newX = blockXY.x + iconXY.x + this.SIZE / 2;
var newY = blockXY.y + iconXY.y + this.SIZE / 2;
if (newX !== this.iconX_ || newY !== this.iconY_) {
this.setIconLocation(newX, newY);
var newXY = new goog.math.Coordinate(
blockXY.x + iconXY.x + this.SIZE / 2,
blockXY.y + iconXY.y + this.SIZE / 2);
if (!goog.math.Coordinate.equals(this.getIconLocation(), newXY)) {
this.setIconLocation(newXY);
}
};
/**
* Returns the center of the block's icon relative to the surface.
* @return {!Object} Object with x and y properties.
* @return {!goog.math.Coordinate} Object with x and y properties.
*/
Blockly.Icon.prototype.getIconLocation = function() {
return {x: this.iconX_, y: this.iconY_};
return this.iconXY_;
};

View File

@@ -202,9 +202,9 @@ Blockly.Mutator.prototype.setVisible = function(visible) {
new Blockly.Events.Ui(this.block_, 'mutatorOpen', !visible, visible));
if (visible) {
// Create the bubble.
this.bubble_ = new Blockly.Bubble(this.block_.workspace,
this.createEditor_(), this.block_.svgPath_,
this.iconX_, this.iconY_, null, null);
this.bubble_ = new Blockly.Bubble(
/** @type {!Blockly.WorkspaceSvg} */ (this.block_.workspace),
this.createEditor_(), this.block_.svgPath_, this.iconXY_, null, null);
var tree = this.workspace_.options.languageTree;
if (tree) {
this.workspace_.flyout_.init(this.workspace_);

View File

@@ -111,9 +111,8 @@ Blockly.Warning.prototype.setVisible = function(visible) {
// Create the bubble to display all warnings.
var paragraph = Blockly.Warning.textToDom_(this.getText());
this.bubble_ = new Blockly.Bubble(
/** @type {!Blockly.Workspace} */ (this.block_.workspace),
paragraph, this.block_.svgPath_,
this.iconX_, this.iconY_, null, null);
/** @type {!Blockly.WorkspaceSvg} */ (this.block_.workspace),
paragraph, this.block_.svgPath_, this.iconXY_, null, null);
if (this.block_.RTL) {
// Right-align the paragraph.
// This cannot be done until the bubble is rendered on screen.