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

switch to an enum

Browse source
This commit is contained in:
Rachel Fenichel 2016-02-17 16:19:40 -08:00
parent 8f23434703
commit c0e28dcb15
6 changed files with 99 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

26
core/blockly.js
View file

@ -136,6 +136,30 @@ Blockly.ALIGN_CENTRE = 0;
*/
Blockly.ALIGN_RIGHT = 1;
/**
* ENUM for toolbox and flyout at top of screen.
* @const
*/
Blockly.TOOLBOX_AT_TOP = 0;
/**
* ENUM for toolbox and flyout at bottom of screen.
* @const
*/
Blockly.TOOLBOX_AT_BOTTOM = 1;
/**
* ENUM for toolbox and flyout at left of screen.
* @const
*/
Blockly.TOOLBOX_AT_LEFT = 2;
/**
* ENUM for toolbox and flyout at right of screen.
* @const
*/
Blockly.TOOLBOX_AT_RIGHT = 3;
/**
* Lookup table for determining the opposite type of a connection.
* @const
@ -549,7 +573,7 @@ Blockly.getMainWorkspaceMetrics_ = function() {
var bottomEdge = topEdge + blockBox.height;
}
var absoluteLeft = 0;
if (this.toolbox_ && !this.toolbox_.atRight) {
if (this.toolbox_ && this.toolbox_.toolboxPosition == Blockly.TOOLBOX_AT_LEFT) {
absoluteLeft = this.toolbox_.width;
}
var metrics = {

62
core/flyout.js
View file

@ -57,11 +57,10 @@ Blockly.Flyout = function(workspaceOptions) {
this.horizontalLayout_ = workspaceOptions.horizontalLayout;
/**
* Flyout should be laid out horizontally vs vertically.
* @type {boolean}
* Position of the toolbox and flyout relative to the workspace.
* @type {number}
*/
this.atRight = !this.horizontalLayout_ && (this.RTL == workspaceOptions.toolboxAtStart);
this.atTop_ = this.horizontalLayout_ && workspaceOptions.toolboxAtStart;
this.toolboxPosition_ = workspaceOptions.toolboxPosition;
/**
* @type {!Blockly.Workspace}
@ -233,7 +232,7 @@ Blockly.Flyout.prototype.getMetrics_ = function() {
var absoluteTop = this.verticalOffset_ + this.SCROLLBAR_PADDING
if (this.horizontalLayout_) {
if (!this.atTop_) {
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_BOTTOM) {
absoluteTop = 0;
}
var viewHeight = this.height_;
@ -252,7 +251,6 @@ Blockly.Flyout.prototype.getMetrics_ = function() {
viewLeft: -this.workspace_.scrollX,
contentTop: optionBox.y,
contentLeft: 0,
// TODO: Fenichel: this is where atTop and atBottom matter
absoluteTop: absoluteTop,
absoluteLeft: this.SCROLLBAR_PADDING
};
@ -276,7 +274,7 @@ Blockly.Flyout.prototype.setMetrics_ = function(xyRatio) {
this.workspace_.scrollY =
-metrics.contentHeight * xyRatio.y - metrics.contentTop;
} else if (this.horizontalLayout_ && goog.isNumber(xyRatio.x)) {
if (this.atRight) {
if (this.RTL) {
this.workspace_.scrollX =
-metrics.contentWidth * xyRatio.x + metrics.contentLeft;
} else {
@ -284,7 +282,10 @@ Blockly.Flyout.prototype.setMetrics_ = function(xyRatio) {
-metrics.contentWidth * xyRatio.x - metrics.contentLeft;
}
}
this.workspace_.translate(this.workspace_.scrollX + metrics.absoluteLeft,
var translateX = this.horizontalLayout_ && this.RTL ?
metrics.absoluteLeft + metrics.viewWidth - this.workspace_.scrollX :
this.workspace_.scrollX + metrics.absoluteLeft;
this.workspace_.translate(translateX,
this.workspace_.scrollY + metrics.absoluteTop);
};
@ -306,7 +307,7 @@ Blockly.Flyout.prototype.position = function() {
}
var edgeWidth = this.horizontalLayout_ ? metrics.viewWidth : this.width_;
edgeWidth -= this.CORNER_RADIUS;
if (this.atRight) {
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT) {
edgeWidth *= -1;
}
@ -314,13 +315,13 @@ Blockly.Flyout.prototype.position = function() {
this.horizontalLayout_ ? this.height_ + this.verticalOffset_ : metrics.viewHeight);
var x = metrics.absoluteLeft;
if (this.atRight) {
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT) {
x += metrics.viewWidth;
x -= this.width_;
}
var y = metrics.absoluteTop;
if (this.horizontalLayout_ && !this.atTop_) {
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_BOTTOM) {
y += metrics.viewHeight;
y -= this.height_;
}
@ -355,21 +356,22 @@ Blockly.Flyout.prototype.position = function() {
* @private
*/
Blockly.Flyout.prototype.setBackgroundPath_ = function(width, height) {
var atRight = this.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT;
// Decide whether to start on the left or right.
var path = ['M ' + (this.atRight ? this.width_ : 0) + ',0'];
var path = ['M ' + (atRight ? this.width_ : 0) + ',0'];
// Top.
path.push('h', width);
// Rounded corner.
path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0,
this.atRight ? 0 : 1,
this.atRight ? -this.CORNER_RADIUS : this.CORNER_RADIUS,
atRight ? 0 : 1,
atRight ? -this.CORNER_RADIUS : this.CORNER_RADIUS,
this.CORNER_RADIUS);
// Side closest to workspace.
path.push('v', Math.max(0, height - this.CORNER_RADIUS * 2));
// Rounded corner.
path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0,
this.atRight ? 0 : 1,
this.atRight ? this.CORNER_RADIUS : -this.CORNER_RADIUS,
atRight ? 0 : 1,
atRight ? this.CORNER_RADIUS : -this.CORNER_RADIUS,
this.CORNER_RADIUS);
// Bottom.
path.push('h', -width);
@ -504,7 +506,7 @@ Blockly.Flyout.prototype.show = function(xmlList) {
block.render();
var root = block.getSvgRoot();
var blockHW = block.getHeightWidth();
block.moveBy(cursorX, cursorY);
block.moveBy((this.horizontalLayout_ && this.RTL) ? this.width_ - cursorX : cursorX, cursorY);
if (this.horizontalLayout_) {
cursorX += blockHW.width + gaps[i];
} else {
@ -711,7 +713,7 @@ Blockly.Flyout.prototype.createBlockFunc_ = function(originBlock) {
}
var xyOld = Blockly.getSvgXY_(svgRootOld, workspace);
// Scale the scroll (getSvgXY_ did not do this).
if (flyout.atRight) {
if (flyout.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT) {
var width = workspace.getMetrics().viewWidth - flyout.width_;
xyOld.x += width / workspace.scale - width;
} else {
@ -772,19 +774,17 @@ Blockly.Flyout.prototype.getRect = function() {
// Fix scale if nested in zoomed workspace.
var scale = this.targetWorkspace_ == mainWorkspace ? 1 : mainWorkspace.scale;
var x = Blockly.getSvgXY_(this.svgGroup_, mainWorkspace).x;
if (this.horizontalLayout_) {
var y = Blockly.getSvgXY_(this.svgGroup_, mainWorkspace).y;
if (this.atTop_) {
return new goog.math.Rect(-BIG_NUM, y - BIG_NUM, BIG_NUM * 2,
BIG_NUM + this.height_ * scale);
} else { // Bottom
return new goog.math.Rect(-BIG_NUM, y + this.verticalOffset_, BIG_NUM * 2,
BIG_NUM + this.height_ * scale);
}
} else {
if (!this.atRight) {
x -= BIG_NUM;
}
var y = Blockly.getSvgXY_(this.svgGroup_, mainWorkspace).y;
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_TOP) {
return new goog.math.Rect(-BIG_NUM, y - BIG_NUM, BIG_NUM * 2,
BIG_NUM + this.height_ * scale);
} else if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_BOTTOM) {
return new goog.math.Rect(-BIG_NUM, y + this.verticalOffset_, BIG_NUM * 2,
BIG_NUM + this.height_ * scale);
} else if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_LEFT) {
return new goog.math.Rect(x - BIG_NUM, -BIG_NUM, BIG_NUM + this.width_ * scale,
BIG_NUM * 2);
} else { // Right
return new goog.math.Rect(x, -BIG_NUM, BIG_NUM + this.width_ * scale,
BIG_NUM * 2);
}

23
core/inject.js
View file

@ -126,16 +126,25 @@ Blockly.parseOptions_ = function(options) {
hasSounds = true;
}
}
var rtl = !!options['rtl'];
var horizontalLayout = options['horizontalLayout'];
if (horizontalLayout === undefined) {
horizontalLayout = false;
}
var toolboxPosition = options['toolboxPosition'];
if (toolboxPosition === 'end') {
var toolboxAtStart = false;
var toolboxAtStart = options['toolboxPosition'];
if (toolboxAtStart === 'end') {
toolboxAtStart = false;
} else {
var toolboxAtStart = true;
toolboxAtStart = true;
}
if (horizontalLayout) {
var toolboxPosition = toolboxAtStart ? Blockly.TOOLBOX_AT_TOP : Blockly.TOOLBOX_AT_BOTTOM;
} else {
var toolboxPosition =
(toolboxAtStart == rtl) ? Blockly.TOOLBOX_AT_RIGHT : Blockly.TOOLBOX_AT_LEFT;
}
var hasScrollbars = options['scrollbars'];
if (hasScrollbars === undefined) {
hasScrollbars = hasCategories;
@ -199,7 +208,7 @@ Blockly.parseOptions_ = function(options) {
var realtimeOptions = enableRealtime ? options['realtimeOptions'] : undefined;
return {
RTL: !!options['rtl'],
RTL: rtl,
collapse: hasCollapse,
comments: hasComments,
disable: hasDisable,
@ -217,7 +226,7 @@ Blockly.parseOptions_ = function(options) {
zoomOptions: zoomOptions,
enableRealtime: enableRealtime,
realtimeOptions: realtimeOptions,
toolboxAtStart: toolboxAtStart
toolboxPosition: toolboxPosition
};
};
@ -460,7 +469,7 @@ Blockly.init_ = function(mainWorkspace) {
mainWorkspace.flyout_.show(options.languageTree.childNodes);
// Translate the workspace sideways to avoid the fixed flyout.
mainWorkspace.scrollX = mainWorkspace.flyout_.width_;
if (mainWorkspace.flyout_.atRight) {
if (options.toolboxPosition == Blockly.TOOLBOX_AT_RIGHT) {
mainWorkspace.scrollX *= -1;
}
var translation = 'translate(' + mainWorkspace.scrollX + ',0)';

48
core/toolbox.js
View file

@ -59,6 +59,12 @@ Blockly.Toolbox = function(workspace) {
*/
this.iconic_ = false;
/**
* Is RTL vs LTR.
* @type {boolean}
*/
this.RTL = workspace.options.RTL;
/**
* Whether the toolbox should be laid out horizontally.
* @type {boolean}
@ -66,8 +72,11 @@ Blockly.Toolbox = function(workspace) {
*/
this.horizontalLayout_ = workspace.options.horizontalLayout;
this.atRight = !this.horizontalLayout_ && (workspace.RTL == workspace.toolboxAtStart);
this.atTop_ = this.horizontalLayout_ && workspace.toolboxAtStart;
/**
* Position of the toolbox and flyout relative to the workspace.
* @type {number}
*/
this.toolboxPosition = workspace.options.toolboxPosition;
if (this.horizontalLayout_) {
this.CONFIG_['cssTreeRow'] =
@ -79,9 +88,6 @@ Blockly.Toolbox = function(workspace) {
(workspace.RTL ? ' blocklyHorizontalTreeRtl' : ' blocklyHorizontalTree');
this.CONFIG_['cssTreeIcon'] = '';
}
this.atStart_ = workspace.options.toolboxAtStart;
};
/**
@ -156,7 +162,7 @@ Blockly.Toolbox.prototype.init = function() {
parentWorkspace: workspace,
RTL: workspace.RTL,
horizontalLayout: workspace.horizontalLayout,
toolboxAtStart: this.atStart_
toolboxPosition: workspace.options.toolboxPosition
};
/**
@ -166,10 +172,11 @@ Blockly.Toolbox.prototype.init = function() {
this.flyout_ = new Blockly.Flyout(workspaceOptions);
goog.dom.insertSiblingAfter(this.flyout_.createDom(), workspace.svgGroup_);
this.flyout_.init(workspace);
this.flyout_.hide();
this.CONFIG_['cleardotPath'] = workspace.options.pathToMedia + '1x1.gif';
this.CONFIG_['cssCollapsedFolderIcon'] =
'blocklyTreeIconClosed' + (this.atRight ? 'Rtl' : 'Ltr');
'blocklyTreeIconClosed' + (this.RTL ? 'Rtl' : 'Ltr');
var tree = new Blockly.Toolbox.TreeControl(this, this.CONFIG_);
this.tree_ = tree;
tree.setShowRootNode(false);
@ -210,7 +217,7 @@ Blockly.Toolbox.prototype.position = function() {
treeDiv.style.height = 'auto';
treeDiv.style.width = svgSize.width + 'px';
this.height = treeDiv.offsetHeight;
if (this.atTop_) { // Top
if (this.toolboxPosition == Blockly.TOOLBOX_AT_TOP) { // Top
treeDiv.style.top = svgPosition.y + 'px';
this.flyout_.setVerticalOffset(treeDiv.offsetHeight);
} else { // Bottom
@ -219,7 +226,7 @@ Blockly.Toolbox.prototype.position = function() {
this.flyout_.setVerticalOffset(topOfToolbox);
}
} else {
if (this.atRight) { // Right
if (this.toolboxPosition == Blockly.TOOLBOX_AT_RIGHT) { // Right
treeDiv.style.left =
(svgPosition.x + svgSize.width - treeDiv.offsetWidth) + 'px';
} else { // Left
@ -228,7 +235,7 @@ Blockly.Toolbox.prototype.position = function() {
treeDiv.style.height = svgSize.height + 'px';
treeDiv.style.top = svgPosition.y + 'px';
this.width = treeDiv.offsetWidth;
if (!this.atRight) {
if (this.toolboxPosition == Blockly.TOOLBOX_AT_LEFT) {
// For some reason the LTR toolbox now reports as 1px too wide.
this.width -= 1;
}
@ -336,7 +343,7 @@ Blockly.Toolbox.prototype.addColour_ = function(opt_tree) {
} else {
var border = 'none';
}
if (this.atRight) {
if (this.RTL) {
element.style.borderRight = border;
} else {
element.style.borderLeft = border;
@ -364,20 +371,17 @@ Blockly.Toolbox.prototype.getRect = function() {
var BIG_NUM = 10000000;
var svgSize = Blockly.svgSize(this.workspace_.getParentSvg());
var x = svgSize.width - this.width;
if (!this.horizontalLayout_) {
// 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.
if (!this.atRight) {
x = -BIG_NUM;
}
// 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.
if (this.toolboxPosition == Blockly.TOOLBOX_AT_LEFT) {
return new goog.math.Rect(-BIG_NUM, -BIG_NUM, BIG_NUM + this.width, 2 * BIG_NUM);
} else if (this.toolboxPosition == Blockly.TOOLBOX_AT_RIGHT) {
return new goog.math.Rect(x, -BIG_NUM, BIG_NUM + this.width, 2 * BIG_NUM);
} else {
// Don't care about RTL
if (this.atTop_) {
} else if (this.toolboxPosition == Blockly.TOOLBOX_AT_TOP) {
return new goog.math.Rect(-BIG_NUM, -BIG_NUM, 2 * BIG_NUM, BIG_NUM + this.height);
} else {
} else { // Bottom
return new goog.math.Rect(0, svgSize.height, 2 * BIG_NUM, BIG_NUM + this.height);
}
}
};

2
core/workspace.js
View file

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

2
core/workspace_svg.js
View file

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