From 7e96a60da79e218802d4b3533e60aecdbe90e312 Mon Sep 17 00:00:00 2001 From: Neil Fraser Date: Tue, 19 Apr 2016 21:14:23 -0700 Subject: [PATCH] Use goog.math.Coordinate instead of separate X and Y properties. --- core/block_svg.js | 4 ++-- core/bubble.js | 57 +++++++++++++++++++++-------------------------- core/comment.js | 5 ++--- core/icon.js | 35 +++++++++++++---------------- core/mutator.js | 6 ++--- core/warning.js | 5 ++--- 6 files changed, 49 insertions(+), 63 deletions(-) diff --git a/core/block_svg.js b/core/block_svg.js index e5d191b1a..b2fab52cb 100644 --- a/core/block_svg.js +++ b/core/block_svg.js @@ -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 diff --git a/core/bubble.js b/core/bubble.js index 144ff05a2..b5a99f40b 100644 --- a/core/bubble.js +++ b/core/bubble.js @@ -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 + ')'); }; diff --git a/core/comment.js b/core/comment.js index 06c9bae77..d1e4363bf 100644 --- a/core/comment.js +++ b/core/comment.js @@ -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 { diff --git a/core/icon.js b/core/icon.js index 5793a5b7a..9d2cbeaad 100644 --- a/core/icon.js +++ b/core/icon.js @@ -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_; }; diff --git a/core/mutator.js b/core/mutator.js index ba7c5c27a..a53babfd9 100644 --- a/core/mutator.js +++ b/core/mutator.js @@ -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_); diff --git a/core/warning.js b/core/warning.js index 4ec8bf771..bffbf06df 100644 --- a/core/warning.js +++ b/core/warning.js @@ -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.