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

Fix checking deletion rectangles and fix toolbox config.

Browse source
This commit is contained in:
Rachel Fenichel 2016-02-19 16:23:32 -08:00
parent e0c2f191ff
commit 4230dd2b83
4 changed files with 71 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

19
core/flyout.js
View file

@ -783,7 +783,7 @@ Blockly.Flyout.prototype.filterForCapacity_ = function() {
};
/**
* Return the deletion rectangle for this flyout.
* Return the deletion rectangle for this flyout in viewport coordinates.
* @return {goog.math.Rect} Rectangle in which to delete.
*/
Blockly.Flyout.prototype.getClientRect = function() {
@ -792,23 +792,22 @@ Blockly.Flyout.prototype.getClientRect = function() {
// area are still deleted. Must be larger than the largest screen size,
// but be smaller than half Number.MAX_SAFE_INTEGER (not available on IE).
var BIG_NUM = 1000000000;
var mainWorkspace = Blockly.mainWorkspace;
var x = flyoutRect.left;
var y = flyoutRect.top;
var width = flyoutRect.width;
var height = flyoutRect.height;
// Fix scale if nested in zoomed workspace.
var scale = this.targetWorkspace_ == mainWorkspace ? 1 : mainWorkspace.scale;
var x = Blockly.getSvgXY_(this.svgGroup_, mainWorkspace).x;
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);
BIG_NUM + height);
} 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);
BIG_NUM + height);
} else if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_LEFT) {
return new goog.math.Rect(x - BIG_NUM, -BIG_NUM, BIG_NUM + this.width_ * scale,
return new goog.math.Rect(x - BIG_NUM, -BIG_NUM, BIG_NUM + width,
BIG_NUM * 2);
} else { // Right
return new goog.math.Rect(x, -BIG_NUM, BIG_NUM + this.width_ * scale,
return new goog.math.Rect(x, -BIG_NUM, BIG_NUM + width,
BIG_NUM * 2);
}
};

45
core/inject.js
View file

@ -249,16 +249,6 @@ Blockly.createDom_ = function(container, options) {
Blockly.Css.inject(options.hasCss, options.pathToMedia);
// Build the SVG DOM.
/*
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
class="blocklySvg">
...
</svg>
*/
var svg = Blockly.createSvgElement('svg', {
'xmlns': 'http://www.w3.org/2000/svg',
'xmlns:html': 'http://www.w3.org/1999/xhtml',
@ -266,27 +256,9 @@ Blockly.createDom_ = function(container, options) {
'version': '1.1',
'class': 'blocklySvg'
}, container);
/*
<defs>
... filters go here ...
</defs>
*/
var defs = Blockly.createSvgElement('defs', {}, svg);
var rnd = String(Math.random()).substring(2);
/*
<filter id="blocklyEmbossFilter837493">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"/>
<feSpecularLighting in="blur" surfaceScale="1" specularConstant="0.5"
specularExponent="10" lighting-color="white"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000"/>
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in"
result="specOut"/>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0"/>
</filter>
*/
var embossFilter = Blockly.createSvgElement('filter',
{'id': 'blocklyEmbossFilter' + rnd}, defs);
Blockly.createSvgElement('feGaussianBlur',
@ -304,13 +276,7 @@ Blockly.createDom_ = function(container, options) {
{'in': 'SourceGraphic', 'in2': 'specOut', 'operator': 'arithmetic',
'k1': 0, 'k2': 1, 'k3': 1, 'k4': 0}, embossFilter);
options.embossFilterId = embossFilter.id;
/*
<pattern id="blocklyDisabledPattern837493" patternUnits="userSpaceOnUse"
width="10" height="10">
<rect width="10" height="10" fill="#aaa" />
<path d="M 0 0 L 10 10 M 10 0 L 0 10" stroke="#cc0" />
</pattern>
*/
var disabledPattern = Blockly.createSvgElement('pattern',
{'id': 'blocklyDisabledPattern' + rnd,
'patternUnits': 'userSpaceOnUse',
@ -320,12 +286,7 @@ Blockly.createDom_ = function(container, options) {
Blockly.createSvgElement('path',
{'d': 'M 0 0 L 10 10 M 10 0 L 0 10', 'stroke': '#cc0'}, disabledPattern);
options.disabledPatternId = disabledPattern.id;
/*
<pattern id="blocklyGridPattern837493" patternUnits="userSpaceOnUse">
<rect stroke="#888" />
<rect stroke="#888" />
</pattern>
*/
var gridPattern = Blockly.createSvgElement('pattern',
{'id': 'blocklyGridPattern' + rnd,
'patternUnits': 'userSpaceOnUse'}, defs);

89
core/toolbox.js
View file

@ -78,12 +78,42 @@ Blockly.Toolbox = function(workspace) {
*/
this.toolboxPosition = workspace.options.toolboxPosition;
/**
* Configuration constants for Closure's tree UI.
* @type {Object.<string,*>}
* @const
* @private
*/
this.CONFIG_ = {
indentWidth: 19,
cssRoot: 'blocklyTreeRoot',
cssHideRoot: 'blocklyHidden',
cssItem: '',
cssTreeRow: 'blocklyTreeRow',
cssItemLabel: 'blocklyTreeLabel',
cssTreeIcon: 'blocklyTreeIcon',
cssExpandedFolderIcon: 'blocklyTreeIconOpen',
cssFileIcon: 'blocklyTreeIconNone',
cssSelectedRow: 'blocklyTreeSelected'
};
/**
* Configuration constants for tree separator.
* @type {Object.<string,*>}
* @const
* @private
*/
this.TREE_SEPARATOR_CONFIG_ = {
cssTreeRow: 'blocklyTreeSeparator'
};
if (this.horizontalLayout_) {
this.CONFIG_['cssTreeRow'] =
this.CONFIG_['cssTreeRow'] +
(workspace.RTL ? ' blocklyHorizontalTreeRtl' : ' blocklyHorizontalTree');
Blockly.Toolbox.TreeSeparator.CONFIG_['cssTreeRow'] =
this.TREE_SEPARATOR_CONFIG_['cssTreeRow'] =
'blocklyTreeSeparatorHorizontal' +
(workspace.RTL ? ' blocklyHorizontalTreeRtl' : ' blocklyHorizontalTree');
this.CONFIG_['cssTreeIcon'] = '';
@ -116,25 +146,6 @@ Blockly.Toolbox.prototype.selectedOption_ = null;
*/
Blockly.Toolbox.prototype.lastCategory_ = null;
/**
* Configuration constants for Closure's tree UI.
* @type {Object.<string,*>}
* @const
* @private
*/
Blockly.Toolbox.prototype.CONFIG_ = {
indentWidth: 19,
cssRoot: 'blocklyTreeRoot',
cssHideRoot: 'blocklyHidden',
cssItem: '',
cssTreeRow: 'blocklyTreeRow',
cssItemLabel: 'blocklyTreeLabel',
cssTreeIcon: 'blocklyTreeIcon',
cssExpandedFolderIcon: 'blocklyTreeIconOpen',
cssFileIcon: 'blocklyTreeIconNone',
cssSelectedRow: 'blocklyTreeSelected'
};
/**
* Initializes the toolbox.
*/
@ -309,9 +320,10 @@ Blockly.Toolbox.prototype.populate_ = function(newTree) {
// Separator between two categories.
// <sep></sep>
if (that.horizontalLayout_) {
treeOut.add(new Blockly.Toolbox.TreeSeparator());
treeOut.add(new Blockly.Toolbox.TreeSeparator(that.TREE_SEPARATOR_CONFIG_));
} else {
treeOut.addChildAt(new Blockly.Toolbox.TreeSeparator(), 0);
treeOut.addChildAt(new Blockly.Toolbox.TreeSeparator(that.TREE_SEPARATOR_CONFIG_),
0);
}
} else {
// Change the gap between two blocks.
@ -382,7 +394,7 @@ Blockly.Toolbox.prototype.clearSelection = function() {
};
/**
* Return the deletion rectangle for this toolbar.
* Return the deletion rectangle for this toolbar in viewport coordinates.
* @return {goog.math.Rect} Rectangle in which to delete.
*/
Blockly.Toolbox.prototype.getClientRect = function() {
@ -390,19 +402,23 @@ Blockly.Toolbox.prototype.getClientRect = function() {
// area are still deleted. Must be smaller than Infinity, but larger than
// the largest screen size.
var BIG_NUM = 10000000;
var svgSize = Blockly.svgSize(this.workspace_.getParentSvg());
var x = svgSize.width - this.width;
var toolboxRect = this.HtmlDiv.getBoundingClientRect();
var x = toolboxRect.left;
var y = toolboxRect.top;
var width = toolboxRect.width;
var height = toolboxRect.height;
// 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);
return new goog.math.Rect(-BIG_NUM, -BIG_NUM, BIG_NUM + 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);
return new goog.math.Rect(x, -BIG_NUM, BIG_NUM + width, 2 * BIG_NUM);
} else if (this.toolboxPosition == Blockly.TOOLBOX_AT_TOP) {
return new goog.math.Rect(-BIG_NUM, -BIG_NUM, 2 * BIG_NUM, BIG_NUM + this.height);
return new goog.math.Rect(-BIG_NUM, -BIG_NUM, 2 * BIG_NUM, BIG_NUM + height);
} else { // Bottom
return new goog.math.Rect(0, svgSize.height, 2 * BIG_NUM, BIG_NUM + this.height);
return new goog.math.Rect(0, y, 2 * BIG_NUM, BIG_NUM + width);
}
};
@ -576,18 +592,7 @@ Blockly.Toolbox.TreeNode.prototype.onDoubleClick_ = function(e) {
* @constructor
* @extends {Blockly.Toolbox.TreeNode}
*/
Blockly.Toolbox.TreeSeparator = function() {
Blockly.Toolbox.TreeNode.call(this, null, '',
Blockly.Toolbox.TreeSeparator.CONFIG_);
Blockly.Toolbox.TreeSeparator = function(config) {
Blockly.Toolbox.TreeNode.call(this, null, '', config);
};
goog.inherits(Blockly.Toolbox.TreeSeparator, Blockly.Toolbox.TreeNode);
/**
* Configuration constants for tree separator.
* @type {Object.<string,*>}
* @const
* @private
*/
Blockly.Toolbox.TreeSeparator.CONFIG_ = {
cssTreeRow: 'blocklyTreeSeparator'
};

24
tests/multi-playground.html
View file

@ -11,26 +11,25 @@
<script src="../blocks_horizontal/motion.js"></script>
<script>
'use strict';
var workspace = null;
function start() {
startBlocklyInstance('blocklyDivVertStartLTR', false, false, 'start');
startBlocklyInstance('blocklyDivVertStartRTL', true, false, 'start');
startBlocklyInstance('VertStartLTR', false, false, 'start');
startBlocklyInstance('VertStartRTL', true, false, 'start');
startBlocklyInstance('blocklyDivVertEndLTR', false, false, 'end');
startBlocklyInstance('blocklyDivVertEndRTL', true, false, 'end');
startBlocklyInstance('VertEndLTR', false, false, 'end');
startBlocklyInstance('VertEndRTL', true, false, 'end');
startBlocklyInstance('blocklyDivHorizontalStartLTR', false, true, 'start');
startBlocklyInstance('blocklyDivHorizontalStartRTL', true, true, 'start');
startBlocklyInstance('HorizontalStartLTR', false, true, 'start');
startBlocklyInstance('HorizontalStartRTL', true, true, 'start');
startBlocklyInstance('blocklyDivHorizontalEndLTR', false, true, 'end');
startBlocklyInstance('blocklyDivHorizontalEndRTL', true, true, 'end');
startBlocklyInstance('HorizontalEndLTR', false, true, 'end');
startBlocklyInstance('HorizontalEndRTL', true, true, 'end');
}
function startBlocklyInstance(divName, rtl, horizontalLayout, position) {
function startBlocklyInstance(suffix, rtl, horizontalLayout, position) {
var toolbox = document.getElementById('toolbox_categories');
workspace = Blockly.inject(divName, {
var options = {
comments: false,
disable: false,
collapse: false,
@ -51,7 +50,8 @@ function startBlocklyInstance(divName, rtl, horizontalLayout, position) {
minScale: 0.25,
scaleSpeed: 1.1
},
});
};
Blockly.inject('blocklyDiv' + suffix, options);
}
</script>