scratchfoundation/scratch-blocks
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-blocks.git synced 2025-08-28 22:10:31 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

position toolbox

Browse source
This commit is contained in:
Rachel Fenichel 2016-02-12 10:57:33 -08:00
parent 02160ec6b5
commit 3462a5a2c1
7 changed files with 88 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

35
core/flyout.js
View file

@ -62,6 +62,11 @@ Blockly.Flyout = function(workspaceOptions) {
*/ */
this.horizontalLayout_ = workspaceOptions.horizontalLayout; this.horizontalLayout_ = workspaceOptions.horizontalLayout;
this.atStart_ = workspaceOptions.toolboxAtStart;
this.atRight_ = !this.horizontalLayout_ &&
((this.RTL && this.atStart_) || (!this.RTL && !this.atStart_));
/** /**
* Opaque data that can be passed to Blockly.unbindEvent_. * Opaque data that can be passed to Blockly.unbindEvent_.
* @type {!Array.<!Array>} * @type {!Array.<!Array>}
@ -263,7 +268,7 @@ Blockly.Flyout.prototype.setMetrics_ = function(xyRatio) {
this.workspace_.scrollY = this.workspace_.scrollY =
-metrics.contentHeight * xyRatio.y - metrics.contentTop; -metrics.contentHeight * xyRatio.y - metrics.contentTop;
} else if (this.horizontalLayout_ && goog.isNumber(xyRatio.x)) { } else if (this.horizontalLayout_ && goog.isNumber(xyRatio.x)) {
if (this.RTL) { if (this.atRight_) {
this.workspace_.scrollX = this.workspace_.scrollX =
-metrics.contentWidth * xyRatio.x + metrics.contentLeft; -metrics.contentWidth * xyRatio.x + metrics.contentLeft;
} else { } else {
@ -293,7 +298,7 @@ Blockly.Flyout.prototype.position = function() {
} }
var edgeWidth = this.horizontalLayout_ ? metrics.viewWidth : this.width_; var edgeWidth = this.horizontalLayout_ ? metrics.viewWidth : this.width_;
edgeWidth -= this.CORNER_RADIUS; edgeWidth -= this.CORNER_RADIUS;
if (this.RTL) { if (this.atRight_) {
edgeWidth *= -1; edgeWidth *= -1;
} }
@ -301,7 +306,7 @@ Blockly.Flyout.prototype.position = function() {
this.horizontalLayout_ ? this.height_ + this.verticalOffset_ : metrics.viewHeight); this.horizontalLayout_ ? this.height_ + this.verticalOffset_ : metrics.viewHeight);
var x = metrics.absoluteLeft; var x = metrics.absoluteLeft;
if (this.RTL) { if (this.atRight_) {
x += metrics.viewWidth; x += metrics.viewWidth;
x -= this.width_; x -= this.width_;
} }
@ -332,20 +337,20 @@ Blockly.Flyout.prototype.position = function() {
*/ */
Blockly.Flyout.prototype.setBackgroundPath_ = function(width, height) { Blockly.Flyout.prototype.setBackgroundPath_ = function(width, height) {
// Decide whether to start on the left or right. // Decide whether to start on the left or right.
var path = ['M ' + (this.RTL ? this.width_ : 0) + ',0']; var path = ['M ' + (this.atRight_ ? this.width_ : 0) + ',0'];
// Top. // Top.
path.push('h', width); path.push('h', width);
// Rounded corner. // Rounded corner.
path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0,
this.RTL ? 0 : 1, this.atRight_ ? 0 : 1,
this.RTL ? -this.CORNER_RADIUS : this.CORNER_RADIUS, this.atRight_ ? -this.CORNER_RADIUS : this.CORNER_RADIUS,
this.CORNER_RADIUS); this.CORNER_RADIUS);
// Side closest to workspace. // Side closest to workspace.
path.push('v', Math.max(0, height - this.CORNER_RADIUS * 2)); path.push('v', Math.max(0, height - this.CORNER_RADIUS * 2));
// Rounded corner. // Rounded corner.
path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0,
this.RTL ? 0 : 1, this.atRight_ ? 0 : 1,
this.RTL ? this.CORNER_RADIUS : -this.CORNER_RADIUS, this.atRight_ ? this.CORNER_RADIUS : -this.CORNER_RADIUS,
this.CORNER_RADIUS); this.CORNER_RADIUS);
// Bottom. // Bottom.
path.push('h', -width); path.push('h', -width);
@ -464,7 +469,7 @@ Blockly.Flyout.prototype.show = function(xmlList) {
// Lay out the blocks. // Lay out the blocks.
var cursorX = margin / this.workspace_.scale + Blockly.BlockSvg.TAB_WIDTH; var cursorX = margin / this.workspace_.scale + Blockly.BlockSvg.TAB_WIDTH;
if (this.RTL) { if (this.atRight_) {
cursorX = this.width_ - cursorX; cursorX = this.width_ - cursorX;
} }
var cursorY = margin; var cursorY = margin;
@ -481,7 +486,7 @@ Blockly.Flyout.prototype.show = function(xmlList) {
var blockHW = block.getHeightWidth(); var blockHW = block.getHeightWidth();
block.moveBy(cursorX, cursorY); block.moveBy(cursorX, cursorY);
if (this.horizontalLayout_) { if (this.horizontalLayout_) {
if (this.RTL) { if (this.atRight_) {
cursorX -= (blockHW.width + gaps[i]); cursorX -= (blockHW.width + gaps[i]);
} else { } else {
cursorX += blockHW.width + gaps[i]; cursorX += blockHW.width + gaps[i];
@ -690,7 +695,7 @@ Blockly.Flyout.prototype.createBlockFunc_ = function(originBlock) {
} }
var xyOld = Blockly.getSvgXY_(svgRootOld, workspace); var xyOld = Blockly.getSvgXY_(svgRootOld, workspace);
// Scale the scroll (getSvgXY_ did not do this). // Scale the scroll (getSvgXY_ did not do this).
if (flyout.RTL) { if (this.atRight_) {
var width = workspace.getMetrics().viewWidth - flyout.width_; var width = workspace.getMetrics().viewWidth - flyout.width_;
xyOld.x += width / workspace.scale - width; xyOld.x += width / workspace.scale - width;
} else { } else {
@ -756,7 +761,7 @@ Blockly.Flyout.prototype.getRect = function() {
return new goog.math.Rect(-BIG_NUM, y, BIG_NUM * 2, return new goog.math.Rect(-BIG_NUM, y, BIG_NUM * 2,
BIG_NUM + this.height_ * scale); BIG_NUM + this.height_ * scale);
} else { } else {
if (!this.RTL) { if (!this.atRight_) {
x -= BIG_NUM; x -= BIG_NUM;
} }
return new goog.math.Rect(x, -BIG_NUM, BIG_NUM + this.width_ * scale, return new goog.math.Rect(x, -BIG_NUM, BIG_NUM + this.width_ * scale,
@ -817,7 +822,7 @@ Blockly.Flyout.prototype.reflowHorizontal = function() {
var blockXY = block.getRelativeToSurfaceXY(); var blockXY = block.getRelativeToSurfaceXY();
block.flyoutRect_.setAttribute('y', blockXY.y); block.flyoutRect_.setAttribute('y', blockXY.y);
block.flyoutRect_.setAttribute('x', block.flyoutRect_.setAttribute('x',
this.RTL ? blockXY.x - blockHW.width + tab : blockXY.x - tab); this.atRight_? blockXY.x - blockHW.width + tab : blockXY.x - tab);
} }
} }
// Record the width for .getMetrics_ and .position. // Record the width for .getMetrics_ and .position.
@ -847,7 +852,7 @@ Blockly.Flyout.prototype.reflowVertical = function() {
if (this.width_ != flyoutWidth) { if (this.width_ != flyoutWidth) {
for (var x = 0, block; block = blocks[x]; x++) { for (var x = 0, block; block = blocks[x]; x++) {
var blockHW = block.getHeightWidth(); var blockHW = block.getHeightWidth();
if (this.RTL) { if (this.atRight_) {
// With the flyoutWidth known, right-align the blocks. // With the flyoutWidth known, right-align the blocks.
var oldX = block.getRelativeToSurfaceXY().x; var oldX = block.getRelativeToSurfaceXY().x;
var dx = flyoutWidth - margin; var dx = flyoutWidth - margin;
@ -862,7 +867,7 @@ Blockly.Flyout.prototype.reflowVertical = function() {
var tab = block.outputConnection ? Blockly.BlockSvg.TAB_WIDTH : 0; var tab = block.outputConnection ? Blockly.BlockSvg.TAB_WIDTH : 0;
var blockXY = block.getRelativeToSurfaceXY(); var blockXY = block.getRelativeToSurfaceXY();
block.flyoutRect_.setAttribute('x', block.flyoutRect_.setAttribute('x',
this.RTL ? blockXY.x - blockHW.width + tab : blockXY.x - tab); this.atRight_ ? blockXY.x - blockHW.width + tab : blockXY.x - tab);
block.flyoutRect_.setAttribute('y', blockXY.y); block.flyoutRect_.setAttribute('y', blockXY.y);
} }
} }

17
core/inject.js
View file

@ -125,10 +125,16 @@ Blockly.parseOptions_ = function(options) {
if (hasSounds === undefined) { if (hasSounds === undefined) {
hasSounds = true; hasSounds = true;
} }
var horizontalLayout = options['horizontalLayout']; }
if (horizontalLayout === undefined) { var horizontalLayout = options['horizontalLayout'];
horizontalLayout = false; if (horizontalLayout === undefined) {
} horizontalLayout = false;
}
var toolboxPosition = options['toolboxPosition'];
if (toolboxPosition === 'end') {
var toolboxAtStart = false;
} else {
var toolboxAtStart = true;
} }
var hasScrollbars = options['scrollbars']; var hasScrollbars = options['scrollbars'];
if (hasScrollbars === undefined) { if (hasScrollbars === undefined) {
@ -210,7 +216,8 @@ Blockly.parseOptions_ = function(options) {
gridOptions: gridOptions, gridOptions: gridOptions,
zoomOptions: zoomOptions, zoomOptions: zoomOptions,
enableRealtime: enableRealtime, enableRealtime: enableRealtime,
realtimeOptions: realtimeOptions realtimeOptions: realtimeOptions,
toolboxAtStart: toolboxAtStart
}; };
}; };

23
core/toolbox.js
View file

@ -66,16 +66,22 @@ Blockly.Toolbox = function(workspace) {
*/ */
this.horizontalLayout_ = workspace.options.horizontalLayout; this.horizontalLayout_ = workspace.options.horizontalLayout;
this.atRight_ = !this.horizontalLayout_ &&
((workspace.RTL && workspace.atStart_) || (!workspace.RTL && !workspace.atStart_));
if (this.horizontalLayout_) { if (this.horizontalLayout_) {
this.CONFIG_['cssTreeRow'] = this.CONFIG_['cssTreeRow'] =
this.CONFIG_['cssTreeRow'] this.CONFIG_['cssTreeRow']
+ (workspace.RTL ? ' blocklyHorizontalTreeRtl' : ' blocklyHorizontalTree'); + (this.atRight_ ? ' blocklyHorizontalTreeRtl' : ' blocklyHorizontalTree');
Blockly.Toolbox.TreeSeparator.CONFIG_['cssTreeRow'] = Blockly.Toolbox.TreeSeparator.CONFIG_['cssTreeRow'] =
'blocklyTreeSeparatorHorizontal' 'blocklyTreeSeparatorHorizontal'
+ (workspace.RTL ? ' blocklyHorizontalTreeRtl' : ' blocklyHorizontalTree'); + (this.atRight_ ? ' blocklyHorizontalTreeRtl' : ' blocklyHorizontalTree');
this.CONFIG_['cssTreeIcon'] = ''; this.CONFIG_['cssTreeIcon'] = '';
} }
this.atStart_ = workspace.options.toolboxAtStart;
}; };
/** /**
@ -149,7 +155,8 @@ Blockly.Toolbox.prototype.init = function() {
disabledPatternId: workspace.options.disabledPatternId, disabledPatternId: workspace.options.disabledPatternId,
parentWorkspace: workspace, parentWorkspace: workspace,
RTL: workspace.RTL, RTL: workspace.RTL,
horizontalLayout: workspace.horizontalLayout horizontalLayout: workspace.horizontalLayout,
toolboxAtStart: this.atStart_
}; };
/** /**
@ -162,7 +169,7 @@ Blockly.Toolbox.prototype.init = function() {
this.CONFIG_['cleardotPath'] = workspace.options.pathToMedia + '1x1.gif'; this.CONFIG_['cleardotPath'] = workspace.options.pathToMedia + '1x1.gif';
this.CONFIG_['cssCollapsedFolderIcon'] = this.CONFIG_['cssCollapsedFolderIcon'] =
'blocklyTreeIconClosed' + (workspace.RTL ? 'Rtl' : 'Ltr'); 'blocklyTreeIconClosed' + (this.atRight_ ? 'Rtl' : 'Ltr');
var tree = new Blockly.Toolbox.TreeControl(this, this.CONFIG_); var tree = new Blockly.Toolbox.TreeControl(this, this.CONFIG_);
this.tree_ = tree; this.tree_ = tree;
tree.setShowRootNode(false); tree.setShowRootNode(false);
@ -199,7 +206,7 @@ Blockly.Toolbox.prototype.position = function() {
var svgPosition = goog.style.getPageOffset(svg); var svgPosition = goog.style.getPageOffset(svg);
var svgSize = Blockly.svgSize(svg); var svgSize = Blockly.svgSize(svg);
if (!this.horizontalLayout_) { if (!this.horizontalLayout_) {
if (this.workspace_.RTL) { // Right if (this.atRight_) { // Right
treeDiv.style.left = treeDiv.style.left =
(svgPosition.x + svgSize.width - treeDiv.offsetWidth) + 'px'; (svgPosition.x + svgSize.width - treeDiv.offsetWidth) + 'px';
} else { // Left } else { // Left
@ -208,7 +215,7 @@ Blockly.Toolbox.prototype.position = function() {
treeDiv.style.height = svgSize.height + 'px'; treeDiv.style.height = svgSize.height + 'px';
treeDiv.style.top = svgPosition.y + 'px'; treeDiv.style.top = svgPosition.y + 'px';
this.width = treeDiv.offsetWidth; this.width = treeDiv.offsetWidth;
if (!this.workspace_.RTL) { if (!this.atRight_) {
// For some reason the LTR toolbox now reports as 1px too wide. // For some reason the LTR toolbox now reports as 1px too wide.
this.width -= 1; this.width -= 1;
} }
@ -323,7 +330,7 @@ Blockly.Toolbox.prototype.addColour_ = function(opt_tree) {
} else { } else {
var border = 'none'; var border = 'none';
} }
if (this.workspace_.RTL) { if (this.atRight_) {
element.style.borderRight = border; element.style.borderRight = border;
} else { } else {
element.style.borderLeft = border; element.style.borderLeft = border;
@ -354,7 +361,7 @@ Blockly.Toolbox.prototype.getRect = function() {
if (!this.horizontalLayout_) { if (!this.horizontalLayout_) {
// Assumes that the toolbox is on the SVG edge. If this changes // Assumes that the toolbox is on the SVG edge. If this changes
// (e.g. toolboxes in mutators) then this code will need to be more complex. // (e.g. toolboxes in mutators) then this code will need to be more complex.
if (!this.workspace_.RTL) { if (!this.atRight_) {
x = -BIG_NUM; x = -BIG_NUM;
} }
return new goog.math.Rect(x, -BIG_NUM, BIG_NUM + this.width, 2 * BIG_NUM); return new goog.math.Rect(x, -BIG_NUM, BIG_NUM + this.width, 2 * BIG_NUM);

2
core/workspace.js
View file

@ -45,6 +45,8 @@ Blockly.Workspace = function(opt_options) {
this.RTL = !!this.options.RTL; this.RTL = !!this.options.RTL;
/** @type {boolean} */ /** @type {boolean} */
this.horizontalLayout = !!this.options.horizontalLayout; this.horizontalLayout = !!this.options.horizontalLayout;
/** @type {boolean} */
this.toolboxAtStart = !!this.options.toolboxAtStart;
/** @type {!Array.<!Blockly.Block>} */ /** @type {!Array.<!Blockly.Block>} */
this.topBlocks_ = []; this.topBlocks_ = [];
}; };

3
core/workspace_svg.js
View file

@ -295,7 +295,8 @@ Blockly.WorkspaceSvg.prototype.addFlyout_ = function() {
disabledPatternId: this.options.disabledPatternId, disabledPatternId: this.options.disabledPatternId,
parentWorkspace: this, parentWorkspace: this,
RTL: this.RTL, RTL: this.RTL,
horizontalLayout: this.horizontalLayout horizontalLayout: this.horizontalLayout,
toolboxAtStart: this.toolboxAtStart,
}; };
/** @type {Blockly.Flyout} */ /** @type {Blockly.Flyout} */
this.flyout_ = new Blockly.Flyout(workspaceOptions); this.flyout_ = new Blockly.Flyout(workspaceOptions);

30
tests/horizontal_playground.html
View file

@ -34,6 +34,7 @@ function start() {
toolbox: toolbox, toolbox: toolbox,
trashcan: true, trashcan: true,
horizontalLayout: true, horizontalLayout: true,
toolboxPosition: 'start',
zoom: { zoom: {
controls: true, controls: true,
wheel: false, wheel: false,
@ -105,19 +106,24 @@ h1 {
<div id="collaborators"></div> <div id="collaborators"></div>
<div id="blocklyDiv"></div> <div id="blocklyDiv"></div>
<xml id="toolbox" style="display: none"> <xml id="toolbox" style="display: none">
<block type="event_whenflagclicked"></block> <category name="Events">
<block type="motion_moveright"></block> <block type="event_whenflagclicked"></block>
<!-- <block type="control_repeat"></block> --> </category>
<block type="control_forever"></block> <category name="Motion">
<block type="control_repeat"> <block type="motion_moveright"></block>
<value name="TIMES"> </category>
<shadow type="math_number"> <!-- <block type="control_repeat"></block> -->
<field name="NUM">10</field> <category name="Pants">
</shadow> <block type="control_forever"></block>
</value> <block type="control_repeat">
</block> <value name="TIMES">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
</category>
</xml> </xml>
<h1>Horizontal block rendering!</h1> <h1>Horizontal block rendering!</h1>

30
tests/vertical_playground.html
View file

@ -32,6 +32,7 @@ function start() {
rtl: rtl, rtl: rtl,
scrollbars: true, scrollbars: true,
toolbox: toolbox, toolbox: toolbox,
toolboxPosition: 'start',
trashcan: true, trashcan: true,
zoom: { zoom: {
controls: true, controls: true,
@ -106,19 +107,26 @@ h1 {
<div id="blocklyDiv"></div> <div id="blocklyDiv"></div>
<xml id="toolbox" style="display: none"> <xml id="toolbox" style="display: none">
<block type="event_whenflagclicked"></block> <category name="Events">
<block type="motion_moveright"></block> <block type="event_whenflagclicked"></block>
<!-- <block type="control_repeat"></block> --> </category>
<block type="control_forever"></block> <category name="Motion">
<block type="control_repeat"> <block type="motion_moveright"></block>
<value name="TIMES"> </category>
<shadow type="math_number"> <!-- <block type="control_repeat"></block> -->
<field name="NUM">10</field> <category name="Pants">
</shadow> <block type="control_forever"></block>
</value> <block type="control_repeat">
</block> <value name="TIMES">
<shadow type="math_number">
<field name="NUM">10</field>
</shadow>
</value>
</block>
</category>
</xml> </xml>
<h1>Vertical block rendering!</h1> <h1>Vertical block rendering!</h1>
<p><a href="javascript:void(workspace.setVisible(true))">Show</a> <p><a href="javascript:void(workspace.setVisible(true))">Show</a>