CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-10 18:37:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Trashcan/Zoom Anchored to Top when Toolbox is on Bottom.

Browse Source
This commit is contained in:
Beka Westberg
2018-12-14 14:49:50 -08:00
parent b5146036e1
commit 9ee7319ac5
3 changed files with 53 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/inject.js
View File

@@ -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) {

22
core/trashcan.js
View File

@@ -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_ + ')');
};

76
core/zoom_controls.js
View File

@@ -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) {
</svg>
*/
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) {
</svg>
*/
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);