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..50732ec9c 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 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_; }; /** @@ -299,7 +301,7 @@ Blockly.Trashcan.prototype.dispose = function() { */ Blockly.Trashcan.prototype.position = function() { // Not yet initialized. - if (!this.bottom_) { + if (!this.verticalSpacing_) { return; } var metrics = this.workspace_.getMetrics(); @@ -323,12 +325,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..19995be1d 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_ + ')'); }; @@ -184,33 +193,28 @@ Blockly.ZoomControls.prototype.createZoomOutSvg_ = function(rnd) { */ 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); @@ -243,21 +247,17 @@ Blockly.ZoomControls.prototype.createZoomInSvg_ = function(rnd) { */ 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 +265,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); @@ -300,16 +300,13 @@ Blockly.ZoomControls.prototype.createZoomResetSvg_ = function(rnd) { */ 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 +316,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);