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

Merge pull request #2185 from BeksOmega/fixes/Issue2035

Browse Source 
Trashcan/Zoom Anchored to Top when Toolbox is on Bottom.
This commit is contained in:
Rachel Fenichel
2019-01-08 10:29:07 -08:00
committed by GitHub
parent 2cce50db7b d2277f0c4b
commit fe514b1006
3 changed files with 77 additions and 73 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) {

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

117
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_ + ')');
};
@@ -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:
<svg id="svg837493">
<clippath id="blocklyZoomoutClipPath837493">
<rect width="32" height="32" y="77"></rect>
</clippath>
<image width="96" height="124" x="-64" y="-15" xlink:href="media/sprites.png"
/* This markup will be generated and added to the .svgGroup_:
<g class="blocklyZoom">
<clipPath id="blocklyZoomoutClipPath837493">
<rect width="32" height="32></rect>
</clipPath>
<image width="96" height="124" x="-64" y="-92" xlink:href="media/sprites.png"
clip-path="url(#blocklyZoomoutClipPath837493)"></image>
</svg>
</g>
*/
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:
<svg id="svg837493">
<clippath id="blocklyZoominClipPath837493">
<rect width="32" height="32" y="43"></rect>
</clippath>
<image width="96" height="124" x="-32" y="-49" xlink:href="media/sprites.png"
/* This markup will be generated and added to the .svgGroup_:
<g class="blocklyZoom">
<clipPath id="blocklyZoominClipPath837493">
<rect width="32" height="32"></rect>
</clipPath>
<image width="96" height="124" x="-32" y="-92" xlink:href="media/sprites.png"
clip-path="url(#blocklyZoominClipPath837493)"></image>
</svg>
</g>
*/
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:
<svg id="svg837493">
<clippath id="blocklyZoomresetClipPath837493">
/* This markup will be generated and added to the .svgGroup_:
<g class="blocklyZoom">
<clipPath id="blocklyZoomresetClipPath837493">
<rect width="32" height="32"></rect>
</clippath>
<image width="96" height="124" y="-92" xlink:href="media/sprites.png"
</clipPath>
<image width="96" height="124" x="-32" y="-92" xlink:href="media/sprites.png"
clip-path="url(#blocklyZoomresetClipPath837493)"></image>
</svg>
</g>
*/
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);