diff --git a/core/inject.js b/core/inject.js
index 2792f54e1..921a15753 100644
--- a/core/inject.js
+++ b/core/inject.js
@@ -345,12 +345,12 @@ Blockly.init_ = function(mainWorkspace) {
}
}
- var bottom = Blockly.Scrollbar.scrollbarThickness;
+ var verticalSpacing = Blockly.Scrollbar.scrollbarThickness;
if (options.hasTrashcan) {
- bottom = mainWorkspace.trashcan.init(bottom);
+ verticalSpacing = mainWorkspace.trashcan.init(verticalSpacing);
}
if (options.zoomOptions && options.zoomOptions.controls) {
- mainWorkspace.zoomControls_.init(bottom);
+ mainWorkspace.zoomControls_.init(verticalSpacing);
}
if (options.hasScrollbars) {
diff --git a/core/trashcan.js b/core/trashcan.js
index 7d3f22355..340500ba6 100644
--- a/core/trashcan.js
+++ b/core/trashcan.js
@@ -265,19 +265,21 @@ Blockly.Trashcan.prototype.createDom = function() {
/**
* Initialize the trash can.
- * @param {number} bottom Distance from workspace bottom to bottom of trashcan.
- * @return {number} Distance from workspace bottom to the top of trashcan.
+ * @param {number} verticalSpacing Vertical distance from workspace edge to the
+ * same edge of the trashcan.
+ * @return {number} Vertical distance from workspace edge to the opposite
+ * edge of the trashcan.
*/
-Blockly.Trashcan.prototype.init = function(bottom) {
+Blockly.Trashcan.prototype.init = function(verticalSpacing) {
if (this.workspace_.options.maxTrashcanContents > 0) {
Blockly.utils.insertAfter(this.flyout_.createDom('svg'),
this.workspace_.getParentSvg());
this.flyout_.init(this.workspace_);
}
- this.bottom_ = this.MARGIN_BOTTOM_ + bottom;
+ this.verticalSpacing_ = this.MARGIN_BOTTOM_ + verticalSpacing;
this.setOpen_(false);
- return this.bottom_ + this.BODY_HEIGHT_ + this.LID_HEIGHT_;
+ return this.verticalSpacing_ + this.BODY_HEIGHT_ + this.LID_HEIGHT_;
};
/**
@@ -295,11 +297,14 @@ Blockly.Trashcan.prototype.dispose = function() {
};
/**
- * Move the trash can to the bottom-right corner.
+ * Position the trashcan.
+ * It is positioned in the upper corner when the toolbox is on bottom, and the
+ * bottom corner for all other toolbox positions. It is on the right in LTR,
+ * and left in RTL.
*/
Blockly.Trashcan.prototype.position = function() {
// Not yet initialized.
- if (!this.bottom_) {
+ if (!this.verticalSpacing_) {
return;
}
var metrics = this.workspace_.getMetrics();
@@ -323,12 +328,14 @@ Blockly.Trashcan.prototype.position = function() {
this.left_ -= metrics.flyoutWidth;
}
}
- this.top_ = metrics.viewHeight + metrics.absoluteTop -
- (this.BODY_HEIGHT_ + this.LID_HEIGHT_) - this.bottom_;
if (metrics.toolboxPosition == Blockly.TOOLBOX_AT_BOTTOM) {
- this.top_ -= metrics.flyoutHeight;
+ this.top_ = this.verticalSpacing_;
+ } else {
+ this.top_ = metrics.viewHeight + metrics.absoluteTop -
+ (this.BODY_HEIGHT_ + this.LID_HEIGHT_) - this.verticalSpacing_;
}
+
this.svgGroup_.setAttribute('transform',
'translate(' + this.left_ + ',' + this.top_ + ')');
};
diff --git a/core/zoom_controls.js b/core/zoom_controls.js
index 3ca9d05a1..5ba858a37 100644
--- a/core/zoom_controls.js
+++ b/core/zoom_controls.js
@@ -94,7 +94,7 @@ Blockly.ZoomControls.prototype.top_ = 0;
*/
Blockly.ZoomControls.prototype.createDom = function() {
this.svgGroup_ =
- Blockly.utils.createSvgElement('g', {'class': 'blocklyZoom'}, null);
+ Blockly.utils.createSvgElement('g', {}, null);
// Each filter/pattern needs a unique ID for the case of multiple Blockly
// instances on a page. Browser behaviour becomes undefined otherwise.
@@ -108,12 +108,14 @@ Blockly.ZoomControls.prototype.createDom = function() {
/**
* Initialize the zoom controls.
- * @param {number} bottom Distance from workspace bottom to bottom of controls.
- * @return {number} Distance from workspace bottom to the top of controls.
+ * @param {number} verticalSpacing Vertical distances from workspace edge to the
+ * same edge of the controls.
+ * @return {number} Vertical distance from workspace edge to the opposite
+ * edge of the controls.
*/
-Blockly.ZoomControls.prototype.init = function(bottom) {
- this.bottom_ = this.MARGIN_BOTTOM_ + bottom;
- return this.bottom_ + this.HEIGHT_;
+Blockly.ZoomControls.prototype.init = function(verticalSpacing) {
+ this.verticalSpacing_ = this.MARGIN_BOTTOM_ + verticalSpacing;
+ return this.verticalSpacing_ + this.HEIGHT_;
};
/**
@@ -133,7 +135,7 @@ Blockly.ZoomControls.prototype.dispose = function() {
*/
Blockly.ZoomControls.prototype.position = function() {
// Not yet initialized.
- if (!this.bottom_) {
+ if (!this.verticalSpacing_) {
return;
}
var metrics = this.workspace_.getMetrics();
@@ -157,11 +159,18 @@ Blockly.ZoomControls.prototype.position = function() {
this.left_ -= metrics.flyoutWidth;
}
}
- this.top_ = metrics.viewHeight + metrics.absoluteTop -
- this.HEIGHT_ - this.bottom_;
+
if (metrics.toolboxPosition == Blockly.TOOLBOX_AT_BOTTOM) {
- this.top_ -= metrics.flyoutHeight;
+ this.top_ = this.verticalSpacing_;
+ this.zoomInGroup_.setAttribute('transform', 'translate(0, 34)');
+ this.zoomResetGroup_.setAttribute('transform', 'translate(0, 77)');
+ } else {
+ this.top_ = metrics.viewHeight + metrics.absoluteTop -
+ this.HEIGHT_ - this.verticalSpacing_;
+ this.zoomInGroup_.setAttribute('transform', 'translate(0, 43)');
+ this.zoomOutGroup_.setAttribute('transform', 'translate(0, 77)');
}
+
this.svgGroup_.setAttribute('transform',
'translate(' + this.left_ + ',' + this.top_ + ')');
};
@@ -174,43 +183,38 @@ Blockly.ZoomControls.prototype.position = function() {
* @private
*/
Blockly.ZoomControls.prototype.createZoomOutSvg_ = function(rnd) {
- /* This markup will be generated and added to the "blocklyZoom" group:
-
+
*/
var ws = this.workspace_;
-
- var svgHolder = Blockly.utils.createSvgElement('svg',
- {
- "id": "svg" + rnd
- },
- this.svgGroup_);
-
+ this.zoomOutGroup_ = Blockly.utils.createSvgElement('g',
+ {'class': 'blocklyZoom'}, this.svgGroup_);
var clip = Blockly.utils.createSvgElement('clipPath',
{
'id': 'blocklyZoomoutClipPath' + rnd
},
- svgHolder);
+ this.zoomOutGroup_);
Blockly.utils.createSvgElement('rect',
{
'width': 32,
'height': 32,
- 'y': 77
},
clip);
var zoomoutSvg = Blockly.utils.createSvgElement('image',
{
'width': Blockly.SPRITE.width,
- 'height': Blockly.SPRITE.height, 'x': -64,
- 'y': -15,
+ 'height': Blockly.SPRITE.height,
+ 'x': -64,
+ 'y': -92,
'clip-path': 'url(#blocklyZoomoutClipPath' + rnd + ')'
},
- svgHolder);
+ this.zoomOutGroup_);
zoomoutSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
ws.options.pathToMedia + Blockly.SPRITE.url);
@@ -232,32 +236,27 @@ Blockly.ZoomControls.prototype.createZoomOutSvg_ = function(rnd) {
* @private
*/
Blockly.ZoomControls.prototype.createZoomInSvg_ = function(rnd) {
- /* This markup will be generated and added to the "blocklyZoom" group:
-
+
*/
-
var ws = this.workspace_;
- var svgHolder = Blockly.utils.createSvgElement('svg',
- {
- "id": "svg" + rnd
- },
- this.svgGroup_);
+ this.zoomInGroup_ = Blockly.utils.createSvgElement('g',
+ {'class': 'blocklyZoom'}, this.svgGroup_);
var clip = Blockly.utils.createSvgElement('clipPath',
{
'id': 'blocklyZoominClipPath' + rnd
},
- svgHolder);
+ this.zoomInGroup_);
Blockly.utils.createSvgElement('rect',
{
'width': 32,
'height': 32,
- 'y': 43
},
clip);
var zoominSvg = Blockly.utils.createSvgElement('image',
@@ -265,10 +264,10 @@ Blockly.ZoomControls.prototype.createZoomInSvg_ = function(rnd) {
'width': Blockly.SPRITE.width,
'height': Blockly.SPRITE.height,
'x': -32,
- 'y': -49,
+ 'y': -92,
'clip-path': 'url(#blocklyZoominClipPath' + rnd + ')'
},
- svgHolder);
+ this.zoomInGroup_);
zoominSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
ws.options.pathToMedia + Blockly.SPRITE.url);
@@ -290,26 +289,23 @@ Blockly.ZoomControls.prototype.createZoomInSvg_ = function(rnd) {
* @private
*/
Blockly.ZoomControls.prototype.createZoomResetSvg_ = function(rnd) {
- /* This markup will be generated and added to the "blocklyZoom" group:
-
+
*/
var ws = this.workspace_;
- var svgHolder = Blockly.utils.createSvgElement('svg',
- {
- "id": "svg" + rnd
- },
- this.svgGroup_);
+ this.zoomResetGroup_ = Blockly.utils.createSvgElement('g',
+ {'class': 'blocklyZoom'}, this.svgGroup_);
var clip = Blockly.utils.createSvgElement('clipPath',
{
'id': 'blocklyZoomresetClipPath' + rnd
},
- svgHolder);
+ this.zoomResetGroup_);
Blockly.utils.createSvgElement('rect',
{
'width': 32,
@@ -319,10 +315,11 @@ Blockly.ZoomControls.prototype.createZoomResetSvg_ = function(rnd) {
var zoomresetSvg = Blockly.utils.createSvgElement('image',
{
'width': Blockly.SPRITE.width,
- 'height': Blockly.SPRITE.height, 'y': -92,
+ 'height': Blockly.SPRITE.height,
+ 'y': -92,
'clip-path': 'url(#blocklyZoomresetClipPath' + rnd + ')'
},
- svgHolder);
+ this.zoomResetGroup_);
zoomresetSvg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href',
ws.options.pathToMedia + Blockly.SPRITE.url);