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

Merge pull request #667 from rachel-fenichel/feature/multitouch_and_toolbox

Browse source 
Scratch-style toolbox WIP
This commit is contained in:
Rachel Fenichel 2016-10-07 10:18:49 -07:00 • committed by GitHub
commit 2402ca4563
9 changed files with 2283 additions and 2359 deletions
Download patch file Download diff file Expand all files Collapse all files

20
core/block_svg.js
View file

@ -725,7 +725,16 @@ Blockly.BlockSvg.prototype.onMouseUp_ = function(e) {
new Blockly.Events.Ui(rootBlock, 'stackclick', undefined, undefined));
}
Blockly.terminateDrag_();
if (Blockly.selected && Blockly.highlightedConnection_) {
// If we're over a delete area, delete the block even if it could be connected
// to another block. Thi sis different from blockly.
if (!this.getParent() && Blockly.selected.isDeletable() &&
this.workspace.isDeleteArea(e)) {
var trashcan = this.workspace.trashcan;
if (trashcan) {
setTimeout(trashcan.close.bind(trashcan), 100);
}
Blockly.selected.dispose(false, true);
} else if (Blockly.selected && Blockly.highlightedConnection_) {
this.positionNewBlock(Blockly.selected,
Blockly.localConnection_, Blockly.highlightedConnection_);
// Connect two blocks together.
@ -741,14 +750,7 @@ Blockly.BlockSvg.prototype.onMouseUp_ = function(e) {
// Don't throw an object in the trash can if it just got connected.
this.workspace.trashcan.close();
}
} else if (!this.getParent() && Blockly.selected.isDeletable() &&
this.workspace.isDeleteArea(e)) {
var trashcan = this.workspace.trashcan;
if (trashcan) {
setTimeout(trashcan.close.bind(trashcan), 100);
}
Blockly.selected.dispose(false, true);
}
} //else
if (Blockly.highlightedConnection_) {
Blockly.highlightedConnection_ = null;
}

15
core/css.js
View file

@ -1004,5 +1004,20 @@ Blockly.Css.CONTENT = [
'fill: blue',
'}',
'.scratchCategoryMenu {',
'width:250px',
'}',
'.scratchCategoryRow {',
'width:50%',
'}',
'.scratchCategoryMenuItem {',
'width:50%',
'}',
'.scratchCategoryMenuItem:hover {',
'color: orange !important;',
'}',
''
];

1544
core/flyout.js
View file

File diff suppressed because it is too large Load diff

831
core/flyout_base.js Normal file
View file

@ -0,0 +1,831 @@
/**
* @license
* Visual Blocks Editor
*
* Copyright 2011 Google Inc.
* https://developers.google.com/blockly/
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* @fileoverview Base class for a file tray containing blocks that may be
* dragged into the workspace. Defines basic interactions that are shared
* between vertical and horizontal flyouts.
* @author fraser@google.com (Neil Fraser)
*/
'use strict';
goog.provide('Blockly.Flyout');
goog.require('Blockly.Block');
goog.require('Blockly.Comment');
goog.require('Blockly.Events');
goog.require('Blockly.FlyoutButton');
goog.require('Blockly.Touch');
goog.require('Blockly.WorkspaceSvg');
goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.math.Rect');
goog.require('goog.userAgent');
/**
* Class for a flyout.
* @param {!Object} workspaceOptions Dictionary of options for the workspace.
* @constructor
*/
Blockly.Flyout = function(workspaceOptions) {
workspaceOptions.getMetrics = this.getMetrics_.bind(this);
workspaceOptions.setMetrics = this.setMetrics_.bind(this);
/**
* @type {!Blockly.Workspace}
* @private
*/
this.workspace_ = new Blockly.WorkspaceSvg(workspaceOptions);
this.workspace_.isFlyout = true;
/**
* Is RTL vs LTR.
* @type {boolean}
*/
this.RTL = !!workspaceOptions.RTL;
/**
* Flyout should be laid out horizontally vs vertically.
* @type {boolean}
* @private
*/
this.horizontalLayout_ = workspaceOptions.horizontalLayout;
/**
* Position of the toolbox and flyout relative to the workspace.
* @type {number}
* @private
*/
this.toolboxPosition_ = workspaceOptions.toolboxPosition;
/**
* Opaque data that can be passed to Blockly.unbindEvent_.
* @type {!Array.<!Array>}
* @private
*/
this.eventWrappers_ = [];
/**
* List of background buttons that lurk behind each block to catch clicks
* landing in the blocks' lakes and bays.
* @type {!Array.<!Element>}
* @private
*/
this.backgroundButtons_ = [];
/**
* List of visible buttons.
* @type {!Array.<!Blockly.FlyoutButton>}
* @private
*/
this.buttons_ = [];
/**
* List of event listeners.
* @type {!Array.<!Array>}
* @private
*/
this.listeners_ = [];
/**
* List of blocks that should always be disabled.
* @type {!Array.<!Blockly.Block>}
* @private
*/
this.permanentlyDisabled_ = [];
/**
* y coordinate of mousedown - used to calculate scroll distances.
* @private {number}
*/
this.startDragMouseY_ = 0;
/**
* x coordinate of mousedown - used to calculate scroll distances.
* @private {number}
*/
this.startDragMouseX_ = 0;
/**
* The toolbox that this flyout belongs to, or none if tihs is a simple
* workspace.
* @private {Blockly.Toolbox}
*/
this.parentToolbox_ = null;
};
/**
* When a flyout drag is in progress, this is a reference to the flyout being
* dragged. This is used by Flyout.terminateDrag_ to reset dragMode_.
* @private {Blockly.Flyout}
*/
Blockly.Flyout.startFlyout_ = null;
/**
* Event that started a drag. Used to determine the drag distance/direction and
* also passed to BlockSvg.onMouseDown_() after creating a new block.
* @private {Event}
*/
Blockly.Flyout.startDownEvent_ = null;
/**
* Flyout block where the drag/click was initiated. Used to fire click events or
* create a new block.
* @private {Event}
*/
Blockly.Flyout.startBlock_ = null;
/**
* Wrapper function called when a mouseup occurs during a background or block
* drag operation.
* @private {Array.<!Array>}
*/
Blockly.Flyout.onMouseUpWrapper_ = null;
/**
* Wrapper function called when a mousemove occurs during a background drag.
* @private {Array.<!Array>}
*/
Blockly.Flyout.onMouseMoveWrapper_ = null;
/**
* Wrapper function called when a mousemove occurs during a block drag.
* @private {Array.<!Array>}
*/
Blockly.Flyout.onMouseMoveBlockWrapper_ = null;
/**
* Does the flyout automatically close when a block is created?
* @type {boolean}
*/
Blockly.Flyout.prototype.autoClose = true;
/**
* Corner radius of the flyout background.
* @type {number}
* @const
*/
Blockly.Flyout.prototype.CORNER_RADIUS = 0;
/**
* Number of pixels the mouse must move before a drag/scroll starts. Because the
* drag-intention is determined when this is reached, it is larger than
* Blockly.DRAG_RADIUS so that the drag-direction is clearer.
*/
Blockly.Flyout.prototype.DRAG_RADIUS = 10;
/**
* Margin around the edges of the blocks in the flyout.
* @type {number}
* @const
*/
Blockly.Flyout.prototype.MARGIN = 12;
/**
* Gap between items in horizontal flyouts. Can be overridden with the "sep"
* element.
* @const {number}
*/
Blockly.Flyout.prototype.GAP_X = Blockly.Flyout.prototype.MARGIN * 3;
/**
* Gap between items in vertical flyouts. Can be overridden with the "sep"
* element.
* @const {number}
*/
Blockly.Flyout.prototype.GAP_Y = Blockly.Flyout.prototype.MARGIN * 3;
/**
* Top/bottom padding between scrollbar and edge of flyout background.
* @type {number}
* @const
*/
Blockly.Flyout.prototype.SCROLLBAR_PADDING = 2;
/**
* Width of flyout.
* @type {number}
* @private
*/
Blockly.Flyout.prototype.width_ = 0;
/**
* Height of flyout.
* @type {number}
* @private
*/
Blockly.Flyout.prototype.height_ = 0;
/**
* Width of flyout contents.
* @type {number}
* @private
*/
Blockly.Flyout.prototype.contentWidth_ = 0;
/**
* Height of flyout contents.
* @type {number}
* @private
*/
Blockly.Flyout.prototype.contentHeight_ = 0;
/**
* Vertical offset of flyout.
* @type {number}
* @private
*/
Blockly.Flyout.prototype.verticalOffset_ = 0;
/**
* Range of a drag angle from a flyout considered "dragging toward workspace".
* Drags that are within the bounds of this many degrees from the orthogonal
* line to the flyout edge are considered to be "drags toward the workspace".
* Example:
* Flyout Edge Workspace
* [block] / <-within this angle, drags "toward workspace" |
* [block] ---- orthogonal to flyout boundary ---- |
* [block] \ |
* The angle is given in degrees from the orthogonal.
*
* This is used to know when to create a new block and when to scroll the
* flyout. Setting it to 360 means that all drags create a new block.
* @type {number}
* @private
*/
Blockly.Flyout.prototype.dragAngleRange_ = 70;
/**
* Is the flyout dragging (scrolling)?
* 0 - DRAG_NONE - no drag is ongoing or state is undetermined
* 1 - DRAG_STICKY - still within the sticky drag radius
* 2 - DRAG_FREE - in scroll mode (never create a new block)
* @private
*/
Blockly.Flyout.prototype.dragMode_ = Blockly.DRAG_NONE;
/**
* Creates the flyout's DOM. Only needs to be called once.
* @return {!Element} The flyout's SVG group.
*/
Blockly.Flyout.prototype.createDom = function() {
/*
<g>
<path class="blocklyFlyoutBackground"/>
<g class="blocklyFlyout"></g>
</g>
*/
this.svgGroup_ = Blockly.createSvgElement('g',
{'class': 'blocklyFlyout'}, null);
this.svgBackground_ = Blockly.createSvgElement('path',
{'class': 'blocklyFlyoutBackground'}, this.svgGroup_);
this.svgGroup_.appendChild(this.workspace_.createDom());
return this.svgGroup_;
};
/**
* Initializes the flyout.
* @param {!Blockly.Workspace} targetWorkspace The workspace in which to create
* new blocks.
*/
Blockly.Flyout.prototype.init = function(targetWorkspace) {
this.targetWorkspace_ = targetWorkspace;
this.workspace_.targetWorkspace = targetWorkspace;
// Add scrollbar.
this.scrollbar_ = new Blockly.Scrollbar(this.workspace_,
this.horizontalLayout_, false);
this.position();
Array.prototype.push.apply(this.eventWrappers_,
Blockly.bindEvent_(this.svgGroup_, 'wheel', this, this.wheel_));
// Dragging the flyout up and down (or left and right).
Array.prototype.push.apply(this.eventWrappers_,
Blockly.bindEvent_(this.svgGroup_, 'mousedown', this, this.onMouseDown_));
};
/**
* Dispose of this flyout.
* Unlink from all DOM elements to prevent memory leaks.
*/
Blockly.Flyout.prototype.dispose = function() {
this.hide();
Blockly.unbindEvent_(this.eventWrappers_);
if (this.scrollbar_) {
this.scrollbar_.dispose();
this.scrollbar_ = null;
}
if (this.workspace_) {
this.workspace_.targetWorkspace = null;
this.workspace_.dispose();
this.workspace_ = null;
}
if (this.svgGroup_) {
goog.dom.removeNode(this.svgGroup_);
this.svgGroup_ = null;
}
this.parentToolbox_ = null;
this.svgBackground_ = null;
this.targetWorkspace_ = null;
};
/**
* Set the parent toolbox of this flyout.
* @param {!Blockly.Toolbox} toolbox The toolbox that owns this flyout.
*/
Blockly.Flyout.prototype.setParentToolbox = function(toolbox) {
this.parentToolbox_ = toolbox;
};
/**
* Get the width of the flyout.
* @return {number} The width of the flyout.
*/
Blockly.Flyout.prototype.getWidth = function() {
return this.parentToolbox_ ? this.parentToolbox_.getWidth() :
this.DEFAULT_WIDTH;
};
/**
* Get the height of the flyout.
* @return {number} The width of the flyout.
*/
Blockly.Flyout.prototype.getHeight = function() {
return this.height_;
};
/**
* Get the flyout's workspace.
* @return {!Blockly.Workspace} Workspace on which this flyout's blocks are placed.
*/
Blockly.Flyout.prototype.getWorkspace = function() {
return this.workspace_;
};
/**
* Is the flyout visible?
* @return {boolean} True if visible.
*/
Blockly.Flyout.prototype.isVisible = function() {
return this.svgGroup_ && this.svgGroup_.style.display == 'block';
};
/**
* Hide and empty the flyout.
*/
Blockly.Flyout.prototype.hide = function() {
if (!this.isVisible()) {
return;
}
this.svgGroup_.style.display = 'none';
// Delete all the event listeners.
for (var x = 0, listen; listen = this.listeners_[x]; x++) {
Blockly.unbindEvent_(listen);
}
this.listeners_.length = 0;
if (this.reflowWrapper_) {
this.workspace_.removeChangeListener(this.reflowWrapper_);
this.reflowWrapper_ = null;
}
// Do NOT delete the blocks here. Wait until Flyout.show.
// https://neil.fraser.name/news/2014/08/09/
};
/**
* Show and populate the flyout.
* @param {!Array|string} xmlList List of blocks to show.
* Variables and procedures have a custom set of blocks.
*/
Blockly.Flyout.prototype.show = function(xmlList) {
this.hide();
this.clearOldBlocks_();
if (xmlList == Blockly.Variables.NAME_TYPE) {
// Special category for variables.
xmlList =
Blockly.Variables.flyoutCategory(this.workspace_.targetWorkspace);
} else if (xmlList == Blockly.Procedures.NAME_TYPE) {
// Special category for procedures.
xmlList =
Blockly.Procedures.flyoutCategory(this.workspace_.targetWorkspace);
}
this.svgGroup_.style.display = 'block';
// Create the blocks to be shown in this flyout.
var contents = [];
var gaps = [];
this.permanentlyDisabled_.length = 0;
for (var i = 0, xml; xml = xmlList[i]; i++) {
if (xml.tagName) {
var tagName = xml.tagName.toUpperCase();
var default_gap = this.horizontalLayout_ ? this.GAP_X : this.GAP_Y;
if (tagName == 'BLOCK') {
var curBlock = Blockly.Xml.domToBlock(xml, this.workspace_);
if (curBlock.disabled) {
// Record blocks that were initially disabled.
// Do not enable these blocks as a result of capacity filtering.
this.permanentlyDisabled_.push(curBlock);
}
contents.push({type: 'block', block: curBlock});
var gap = parseInt(xml.getAttribute('gap'), 10);
gaps.push(isNaN(gap) ? default_gap : gap);
} else if (xml.tagName.toUpperCase() == 'SEP') {
// Change the gap between two blocks.
// <sep gap="36"></sep>
// The default gap is 24, can be set larger or smaller.
// This overwrites the gap attribute on the previous block.
// Note that a deprecated method is to add a gap to a block.
// <block type="math_arithmetic" gap="8"></block>
var newGap = parseInt(xml.getAttribute('gap'), 10);
// Ignore gaps before the first block.
if (!isNaN(newGap) && gaps.length > 0) {
gaps[gaps.length - 1] = newGap;
} else {
gaps.push(default_gap);
}
} else if (tagName == 'BUTTON') {
var label = xml.getAttribute('text');
var curButton = new Blockly.FlyoutButton(this.workspace_,
this.targetWorkspace_, label);
contents.push({type: 'button', button: curButton});
gaps.push(default_gap);
}
}
}
this.layout_(contents, gaps);
// IE 11 is an incompetent browser that fails to fire mouseout events.
// When the mouse is over the background, deselect all blocks.
var deselectAll = function() {
var topBlocks = this.workspace_.getTopBlocks(false);
for (var i = 0, block; block = topBlocks[i]; i++) {
block.removeSelect();
}
};
this.listeners_.push(Blockly.bindEvent_(this.svgBackground_, 'mouseover',
this, deselectAll));
this.reflow();
// Correctly position the flyout's scrollbar when it opens.
this.position();
this.reflowWrapper_ = this.reflow.bind(this);
this.workspace_.addChangeListener(this.reflowWrapper_);
};
/**
* Delete blocks and background buttons from a previous showing of the flyout.
* @private
*/
Blockly.Flyout.prototype.clearOldBlocks_ = function() {
// Delete any blocks from a previous showing.
var oldBlocks = this.workspace_.getTopBlocks(false);
for (var i = 0, block; block = oldBlocks[i]; i++) {
if (block.workspace == this.workspace_) {
block.dispose(false, false);
}
}
// Delete any background buttons from a previous showing.
for (var j = 0, rect; rect = this.backgroundButtons_[j]; j++) {
goog.dom.removeNode(rect);
}
this.backgroundButtons_.length = 0;
for (var i = 0, button; button = this.buttons_[i]; i++) {
button.dispose();
}
this.buttons_.length = 0;
};
/**
* Add listeners to a block that has been added to the flyout.
* @param {Element} root The root node of the SVG group the block is in.
* @param {!Blockly.Block} block The block to add listeners for.
* @param {!Element} rect The invisible rectangle under the block that acts as
* a button for that block.
* @private
*/
Blockly.Flyout.prototype.addBlockListeners_ = function(root, block, rect) {
if (this.autoClose) {
this.listeners_.push(Blockly.bindEvent_(root, 'mousedown', null,
this.createBlockFunc_(block)));
this.listeners_.push(Blockly.bindEvent_(rect, 'mousedown', null,
this.createBlockFunc_(block)));
} else {
this.listeners_.push(Blockly.bindEvent_(root, 'mousedown', null,
this.blockMouseDown_(block)));
this.listeners_.push(Blockly.bindEvent_(rect, 'mousedown', null,
this.blockMouseDown_(block)));
}
this.listeners_.push(Blockly.bindEvent_(root, 'mouseover', block,
block.addSelect));
this.listeners_.push(Blockly.bindEvent_(root, 'mouseout', block,
block.removeSelect));
this.listeners_.push(Blockly.bindEvent_(rect, 'mouseover', block,
block.addSelect));
this.listeners_.push(Blockly.bindEvent_(rect, 'mouseout', block,
block.removeSelect));
};
/**
* Actions to take when a block in the flyout is right-clicked.
* @param {!Event} e Event that triggered the right-click. Could originate from
* a long-press in a touch environment.
* @param {Blockly.BlockSvg} block The block that was clicked.
*/
Blockly.Flyout.blockRightClick_ = function(e, block) {
Blockly.terminateDrag_();
Blockly.WidgetDiv.hide(true);
Blockly.DropDownDiv.hideWithoutAnimation();
Blockly.hideChaff(true);
block.showContextMenu_(e);
// This was a right-click, so end the gesture immediately.
Blockly.Touch.clearTouchIdentifier();
};
/**
* Handle a mouse-down on an SVG block in a non-closing flyout.
* @param {!Blockly.Block} block The flyout block to copy.
* @return {!Function} Function to call when block is clicked.
* @private
*/
Blockly.Flyout.prototype.blockMouseDown_ = function(block) {
var flyout = this;
return function(e) {
if (Blockly.isRightButton(e)) {
Blockly.Flyout.blockRightClick_(e, block);
} else {
flyout.dragMode_ = Blockly.DRAG_NONE;
Blockly.terminateDrag_();
Blockly.WidgetDiv.hide(true);
Blockly.DropDownDiv.hideWithoutAnimation();
Blockly.hideChaff();
// Left-click (or middle click)
Blockly.Css.setCursor(Blockly.Css.Cursor.CLOSED);
// Record the current mouse position.
flyout.startDragMouseY_ = e.clientY;
flyout.startDragMouseX_ = e.clientX;
Blockly.Flyout.startDownEvent_ = e;
Blockly.Flyout.startBlock_ = block;
Blockly.Flyout.startFlyout_ = flyout;
Blockly.Flyout.onMouseUpWrapper_ = Blockly.bindEvent_(document,
'mouseup', flyout, flyout.onMouseUp_);
Blockly.Flyout.onMouseMoveBlockWrapper_ = Blockly.bindEvent_(document,
'mousemove', flyout, flyout.onMouseMoveBlock_);
}
// This event has been handled. No need to bubble up to the document.
e.stopPropagation();
e.preventDefault();
};
};
/**
* Mouse down on the flyout background. Start a scroll drag.
* @param {!Event} e Mouse down event.
* @private
*/
Blockly.Flyout.prototype.onMouseDown_ = function(e) {
this.dragMode_ = Blockly.DRAG_FREE;
if (Blockly.isRightButton(e)) {
// Don't start drags with right clicks.
Blockly.Touch.clearTouchIdentifier();
return;
}
Blockly.WidgetDiv.hide(true);
Blockly.DropDownDiv.hideWithoutAnimation();
Blockly.hideChaff(true);
this.dragMode_ = Blockly.DRAG_FREE;
this.startDragMouseY_ = e.clientY;
this.startDragMouseX_ = e.clientX;
Blockly.Flyout.startFlyout_ = this;
Blockly.Flyout.onMouseMoveWrapper_ = Blockly.bindEvent_(document, 'mousemove',
this, this.onMouseMove_);
Blockly.Flyout.onMouseUpWrapper_ = Blockly.bindEvent_(document, 'mouseup',
this, Blockly.Flyout.terminateDrag_);
// This event has been handled. No need to bubble up to the document.
e.preventDefault();
e.stopPropagation();
};
/**
* Handle a mouse-up anywhere in the SVG pane. Is only registered when a
* block is clicked. We can't use mouseUp on the block since a fast-moving
* cursor can briefly escape the block before it catches up.
* @param {!Event} e Mouse up event.
* @private
*/
Blockly.Flyout.prototype.onMouseUp_ = function(/*e*/) {
if (!this.workspace_.isDragging()) {
// This was a click, not a drag. End the gesture.
Blockly.Touch.clearTouchIdentifier();
if (this.autoClose) {
this.createBlockFunc_(Blockly.Flyout.startBlock_)(
Blockly.Flyout.startDownEvent_);
} else if (!Blockly.WidgetDiv.isVisible()) {
Blockly.Events.fire(
new Blockly.Events.Ui(Blockly.Flyout.startBlock_, 'click',
undefined, undefined));
}
}
Blockly.terminateDrag_();
};
/**
* Handle a mouse-move to vertically drag the flyout.
* @param {!Event} e Mouse move event.
* @private
*/
Blockly.Flyout.prototype.onMouseMove_ = function(e) {
var metrics = this.getMetrics_();
if (this.horizontalLayout_) {
if (metrics.contentWidth - metrics.viewWidth < 0) {
return;
}
var dx = e.clientX - this.startDragMouseX_;
this.startDragMouseX_ = e.clientX;
var x = metrics.viewLeft - dx;
x = goog.math.clamp(x, 0, metrics.contentWidth - metrics.viewWidth);
this.scrollbar_.set(x);
} else {
if (metrics.contentHeight - metrics.viewHeight < 0) {
return;
}
var dy = e.clientY - this.startDragMouseY_;
this.startDragMouseY_ = e.clientY;
var y = metrics.viewTop - dy;
y = goog.math.clamp(y, 0, metrics.contentHeight - metrics.viewHeight);
this.scrollbar_.set(y);
}
};
/**
* Mouse button is down on a block in a non-closing flyout. Create the block
* if the mouse moves beyond a small radius. This allows one to play with
* fields without instantiating blocks that instantly self-destruct.
* @param {!Event} e Mouse move event.
* @private
*/
Blockly.Flyout.prototype.onMouseMoveBlock_ = function(e) {
if (e.type == 'mousemove' && e.clientX <= 1 && e.clientY == 0 &&
e.button == 0) {
/* HACK:
Safari Mobile 6.0 and Chrome for Android 18.0 fire rogue mousemove events
on certain touch actions. Ignore events with these signatures.
This may result in a one-pixel blind spot in other browsers,
but this shouldn't be noticeable. */
e.stopPropagation();
return;
}
var dx = e.clientX - Blockly.Flyout.startDownEvent_.clientX;
var dy = e.clientY - Blockly.Flyout.startDownEvent_.clientY;
var createBlock = this.determineDragIntention_(dx, dy);
Blockly.longStop_();
if (createBlock) {
this.createBlockFunc_(Blockly.Flyout.startBlock_)(
Blockly.Flyout.startDownEvent_);
} else if (this.dragMode_ == Blockly.DRAG_FREE) {
// Do a scroll.
this.onMouseMove_(e);
}
e.stopPropagation();
};
/**
* Determine the intention of a drag.
* Updates dragMode_ based on a drag delta and the current mode,
* and returns true if we should create a new block.
* @param {number} dx X delta of the drag.
* @param {number} dy Y delta of the drag.
* @return {boolean} True if a new block should be created.
* @private
*/
Blockly.Flyout.prototype.determineDragIntention_ = function(dx, dy) {
if (this.dragMode_ == Blockly.DRAG_FREE) {
// Once in free mode, always stay in free mode and never create a block.
return false;
}
var dragDistance = Math.sqrt(dx * dx + dy * dy);
if (dragDistance < this.DRAG_RADIUS) {
// Still within the sticky drag radius.
this.dragMode_ = Blockly.DRAG_STICKY;
return false;
} else {
if (this.isDragTowardWorkspace_(dx, dy) || !this.scrollbar_.isVisible()) {
// Immediately create a block.
return true;
} else {
// Immediately move to free mode - the drag is away from the workspace.
this.dragMode_ = Blockly.DRAG_FREE;
return false;
}
}
};
/**
* Create a copy of this block on the workspace.
* @param {!Blockly.Block} originBlock The flyout block to copy.
* @return {!Function} Function to call when block is clicked.
* @private
*/
Blockly.Flyout.prototype.createBlockFunc_ = function(originBlock) {
var flyout = this;
return function(e) {
// Hide drop-downs and animating WidgetDiv immediately
Blockly.WidgetDiv.hide(true);
Blockly.DropDownDiv.hideWithoutAnimation();
if (Blockly.isRightButton(e)) {
// Right-click. Don't create a block, let the context menu show.
return;
}
if (originBlock.disabled) {
// Beyond capacity.
return;
}
Blockly.Events.disable();
try {
var block = flyout.placeNewBlock_(originBlock);
} finally {
Blockly.Events.enable();
}
if (Blockly.Events.isEnabled()) {
Blockly.Events.setGroup(true);
Blockly.Events.fire(new Blockly.Events.Create(block));
}
if (flyout.autoClose) {
flyout.hide();
}
// Start a dragging operation on the new block.
block.onMouseDown_(e);
Blockly.dragMode_ = Blockly.DRAG_FREE;
block.setDragging_(true);
block.moveToDragSurface_();
};
};
/**
* Stop binding to the global mouseup and mousemove events.
* @private
*/
Blockly.Flyout.terminateDrag_ = function() {
this.dragMode_ = Blockly.DRAG_NONE;
if (Blockly.Flyout.startFlyout_) {
// User was dragging the flyout background, and has stopped.
if (Blockly.Flyout.startFlyout_.dragMode_ == Blockly.DRAG_FREE) {
Blockly.Touch.clearTouchIdentifier();
}
Blockly.Flyout.startFlyout_.dragMode_ = Blockly.DRAG_NONE;
Blockly.Flyout.startFlyout_ = null;
}
if (Blockly.Flyout.onMouseUpWrapper_) {
Blockly.unbindEvent_(Blockly.Flyout.onMouseUpWrapper_);
Blockly.Flyout.onMouseUpWrapper_ = null;
}
if (Blockly.Flyout.onMouseMoveBlockWrapper_) {
Blockly.unbindEvent_(Blockly.Flyout.onMouseMoveBlockWrapper_);
Blockly.Flyout.onMouseMoveBlockWrapper_ = null;
}
if (Blockly.Flyout.onMouseMoveWrapper_) {
Blockly.unbindEvent_(Blockly.Flyout.onMouseMoveWrapper_);
Blockly.Flyout.onMouseMoveWrapper_ = null;
}
Blockly.Flyout.startDownEvent_ = null;
Blockly.Flyout.startBlock_ = null;
};
/**
* Reflow blocks and their buttons.
*/
Blockly.Flyout.prototype.reflow = function() {
if (this.reflowWrapper_) {
this.workspace_.removeChangeListener(this.reflowWrapper_);
}
var blocks = this.workspace_.getTopBlocks(false);
this.reflowInternal_(blocks);
if (this.reflowWrapper_) {
this.workspace_.addChangeListener(this.reflowWrapper_);
}
};

518
core/flyout_horizontal.js Normal file
View file

@ -0,0 +1,518 @@
/**
* @license
* Visual Blocks Editor
*
* Copyright 2011 Google Inc.
* https://developers.google.com/blockly/
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* @fileoverview Flyout tray containing blocks which may be created.
* @author fraser@google.com (Neil Fraser)
*/
'use strict';
goog.provide('Blockly.HorizontalFlyout');
goog.require('Blockly.Block');
goog.require('Blockly.Comment');
goog.require('Blockly.Events');
goog.require('Blockly.FlyoutButton');
goog.require('Blockly.Flyout');
goog.require('Blockly.WorkspaceSvg');
goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.math.Rect');
goog.require('goog.userAgent');
/**
* Class for a flyout.
* @param {!Object} workspaceOptions Dictionary of options for the workspace.
* @extends {Blockly.Flyout}
* @constructor
*/
Blockly.HorizontalFlyout = function(workspaceOptions) {
workspaceOptions.getMetrics = this.getMetrics_.bind(this);
workspaceOptions.setMetrics = this.setMetrics_.bind(this);
Blockly.HorizontalFlyout.superClass_.constructor.call(this, workspaceOptions);
/**
* Flyout should be laid out horizontally vs vertically.
* @type {boolean}
* @private
*/
this.horizontalLayout_ = true;
};
goog.inherits(Blockly.HorizontalFlyout, Blockly.Flyout);
/**
* Return an object with all the metrics required to size scrollbars for the
* flyout. The following properties are computed:
* .viewHeight: Height of the visible rectangle,
* .viewWidth: Width of the visible rectangle,
* .contentHeight: Height of the contents,
* .contentWidth: Width of the contents,
* .viewTop: Offset of top edge of visible rectangle from parent,
* .contentTop: Offset of the top-most content from the y=0 coordinate,
* .absoluteTop: Top-edge of view.
* .viewLeft: Offset of the left edge of visible rectangle from parent,
* .contentLeft: Offset of the left-most content from the x=0 coordinate,
* .absoluteLeft: Left-edge of view.
* @return {Object} Contains size and position metrics of the flyout.
* @private
*/
Blockly.HorizontalFlyout.prototype.getMetrics_ = function() {
if (!this.isVisible()) {
// Flyout is hidden.
return null;
}
try {
var optionBox = this.workspace_.getCanvas().getBBox();
} catch (e) {
// Firefox has trouble with hidden elements (Bug 528969).
var optionBox = {height: 0, y: 0, width: 0, x: 0};
}
var absoluteTop = this.SCROLLBAR_PADDING;
var absoluteLeft = this.SCROLLBAR_PADDING;
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_BOTTOM) {
absoluteTop = 0;
}
var viewHeight = this.height_;
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_TOP) {
viewHeight += this.MARGIN - this.SCROLLBAR_PADDING;
}
var viewWidth = this.width_ - 2 * this.SCROLLBAR_PADDING;
var metrics = {
viewHeight: viewHeight,
viewWidth: viewWidth,
contentHeight: optionBox.height * this.workspace_.scale + 2 * this.MARGIN,
contentWidth: optionBox.width * this.workspace_.scale + 2 * this.MARGIN,
viewTop: -this.workspace_.scrollY,
viewLeft: -this.workspace_.scrollX,
contentTop: optionBox.y,
contentLeft: optionBox.x,
absoluteTop: absoluteTop,
absoluteLeft: absoluteLeft
};
return metrics;
};
/**
* Sets the translation of the flyout to match the scrollbars.
* @param {!Object} xyRatio Contains a y property which is a float
* between 0 and 1 specifying the degree of scrolling and a
* similar x property.
* @private
*/
Blockly.HorizontalFlyout.prototype.setMetrics_ = function(xyRatio) {
var metrics = this.getMetrics_();
// This is a fix to an apparent race condition.
if (!metrics) {
return;
}
if (goog.isNumber(xyRatio.x)) {
this.workspace_.scrollX = -metrics.contentWidth * xyRatio.x;
}
this.workspace_.translate(this.workspace_.scrollX + metrics.absoluteLeft,
this.workspace_.scrollY + metrics.absoluteTop);
};
/**
* Move the flyout to the edge of the workspace.
*/
Blockly.HorizontalFlyout.prototype.position = function() {
if (!this.isVisible()) {
return;
}
var targetWorkspaceMetrics = this.targetWorkspace_.getMetrics();
if (!targetWorkspaceMetrics) {
// Hidden components will return null.
return;
}
var edgeWidth = this.horizontalLayout_ ?
targetWorkspaceMetrics.viewWidth : this.width_;
edgeWidth -= this.CORNER_RADIUS;
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT) {
edgeWidth *= -1;
}
this.setBackgroundPath_(edgeWidth,
this.horizontalLayout_ ? this.height_ :
targetWorkspaceMetrics.viewHeight);
var x = targetWorkspaceMetrics.absoluteLeft;
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT) {
x += targetWorkspaceMetrics.viewWidth;
x -= this.width_;
}
var y = targetWorkspaceMetrics.absoluteTop;
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_BOTTOM) {
y += targetWorkspaceMetrics.viewHeight;
y -= this.height_;
}
this.svgGroup_.setAttribute('transform', 'translate(' + x + ',' + y + ')');
// Record the height for Blockly.Flyout.getMetrics_, or width if the layout is
// horizontal.
if (this.horizontalLayout_) {
this.width_ = targetWorkspaceMetrics.viewWidth;
} else {
this.height_ = targetWorkspaceMetrics.viewHeight;
}
// Update the scrollbar (if one exists).
if (this.scrollbar_) {
this.scrollbar_.resize();
}
// The blocks need to be visible in order to be laid out and measured correctly, but we don't
// want the flyout to show up until it's properly sized.
// Opacity is set to zero in show().
this.svgGroup_.style.opacity = 1;
};
/**
* Create and set the path for the visible boundaries of the flyout.
* @param {number} width The width of the flyout, not including the
* rounded corners.
* @param {number} height The height of the flyout, not including
* rounded corners.
* @private
*/
Blockly.HorizontalFlyout.prototype.setBackgroundPath_ = function(width, height) {
var atTop = this.toolboxPosition_ == Blockly.TOOLBOX_AT_TOP;
// Start at top left.
var path = ['M 0,' + (atTop ? 0 : this.CORNER_RADIUS)];
if (atTop) {
// Top.
path.push('h', width + this.CORNER_RADIUS);
// Right.
path.push('v', height);
// Bottom.
path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, 1,
-this.CORNER_RADIUS, this.CORNER_RADIUS);
path.push('h', -1 * (width - this.CORNER_RADIUS));
// Left.
path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, 1,
-this.CORNER_RADIUS, -this.CORNER_RADIUS);
path.push('z');
} else {
// Top.
path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, 1,
this.CORNER_RADIUS, -this.CORNER_RADIUS);
path.push('h', width - this.CORNER_RADIUS);
// Right.
path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, 1,
this.CORNER_RADIUS, this.CORNER_RADIUS);
path.push('v', height - this.CORNER_RADIUS);
// Bottom.
path.push('h', -width - this.CORNER_RADIUS);
// Left.
path.push('z');
}
this.svgBackground_.setAttribute('d', path.join(' '));
};
/**
* Scroll the flyout to the top.
*/
Blockly.HorizontalFlyout.prototype.scrollToStart = function() {
this.scrollbar_.set(this.RTL ? Infinity : 0);
};
/**
* Scroll the flyout.
* @param {!Event} e Mouse wheel scroll event.
* @private
*/
Blockly.HorizontalFlyout.prototype.wheel_ = function(e) {
var delta = e.deltaX;
if (delta) {
if (goog.userAgent.GECKO) {
// Firefox's deltas are a tenth that of Chrome/Safari.
delta *= 10;
}
var metrics = this.getMetrics_();
var pos = metrics.viewLeft + delta;
var limit = metrics.contentWidth - metrics.viewWidth;
pos = Math.min(pos, limit);
pos = Math.max(pos, 0);
this.scrollbar_.set(pos);
}
// Don't scroll the page.
e.preventDefault();
// Don't propagate mousewheel event (zooming).
e.stopPropagation();
};
/**
* Lay out the blocks in the flyout.
* @param {!Array.<!Object>} contents The blocks and buttons to lay out.
* @param {!Array.<number>} gaps The visible gaps between blocks.
* @private
*/
Blockly.HorizontalFlyout.prototype.layout_ = function(contents, gaps) {
this.workspace_.scale = this.targetWorkspace_.scale;
var margin = this.MARGIN;
var cursorX = margin;
var cursorY = margin;
if (this.RTL) {
contents = contents.reverse();
}
for (var i = 0, item; item = contents[i]; i++) {
if (item.type == 'block') {
var block = item.block;
var allBlocks = block.getDescendants();
for (var j = 0, child; child = allBlocks[j]; j++) {
// Mark blocks as being inside a flyout. This is used to detect and
// prevent the closure of the flyout if the user right-clicks on such a
// block.
child.isInFlyout = true;
}
var root = block.getSvgRoot();
var blockHW = block.getHeightWidth();
var moveX = cursorX;
if (this.RTL) {
moveX += blockHW.width;
}
block.moveBy(moveX, cursorY);
cursorX += blockHW.width + gaps[i];
// Create an invisible rectangle under the block to act as a button. Just
// using the block as a button is poor, since blocks have holes in them.
var rect = Blockly.createSvgElement('rect', {'fill-opacity': 0}, null);
rect.tooltip = block;
Blockly.Tooltip.bindMouseEvents(rect);
// Add the rectangles under the blocks, so that the blocks' tooltips work.
this.workspace_.getCanvas().insertBefore(rect, block.getSvgRoot());
block.flyoutRect_ = rect;
this.backgroundButtons_[i] = rect;
this.addBlockListeners_(root, block, rect);
} else if (item.type == 'button') {
var button = item.button;
var buttonSvg = button.createDom();
button.moveTo(cursorX, cursorY);
button.show();
Blockly.bindEvent_(buttonSvg, 'mouseup', button, button.onMouseUp);
this.buttons_.push(button);
cursorX += (button.width + gaps[i]);
}
}
};
/**
* Handle a mouse-move to drag the flyout.
* @param {!Event} e Mouse move event.
* @private
*/
Blockly.HorizontalFlyout.prototype.onMouseMove_ = function(e) {
var metrics = this.getMetrics_();
if (metrics.contentWidth - metrics.viewWidth < 0) {
return;
}
var dx = e.clientX - this.startDragMouseX_;
this.startDragMouseX_ = e.clientX;
var x = metrics.viewLeft - dx;
x = goog.math.clamp(x, 0, metrics.contentWidth - metrics.viewWidth);
this.scrollbar_.set(x);
};
/**
* Determine if a drag delta is toward the workspace, based on the position
* and orientation of the flyout. This is used in determineDragIntention_ to
* determine if a new block should be created or if the flyout should scroll.
* @param {number} dx X delta of the drag.
* @param {number} dy Y delta of the drag.
* @return {boolean} true if the drag is toward the workspace.
* @private
*/
Blockly.HorizontalFlyout.prototype.isDragTowardWorkspace_ = function(dx, dy) {
// Direction goes from -180 to 180, with 0 toward the right and 90 on top.
var dragDirection = Math.atan2(dy, dx) / Math.PI * 180;
var draggingTowardWorkspace = false;
var range = this.dragAngleRange_;
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_TOP) {
// Horizontal at top.
if (dragDirection < 90 + range && dragDirection > 90 - range) {
draggingTowardWorkspace = true;
}
} else {
// Horizontal at bottom.
if (dragDirection > -90 - range && dragDirection < -90 + range) {
draggingTowardWorkspace = true;
}
}
return draggingTowardWorkspace;
};
/**
* Copy a block from the flyout to the workspace and position it correctly.
* @param {!Blockly.Block} originBlock The flyout block to copy..
* @return {!Blockly.Block} The new block in the main workspace.
* @private
*/
Blockly.HorizontalFlyout.prototype.placeNewBlock_ = function(originBlock) {
var targetWorkspace = this.targetWorkspace_;
var svgRootOld = originBlock.getSvgRoot();
if (!svgRootOld) {
throw 'originBlock is not rendered.';
}
// Figure out where the original block is on the screen, relative to the upper
// left corner of the main workspace.
var xyOld = Blockly.getSvgXY_(svgRootOld, targetWorkspace);
// Take into account that the flyout might have been scrolled horizontally
// (separately from the main workspace).
// Generally a no-op in vertical mode but likely to happen in horizontal
// mode.
var scrollX = this.workspace_.scrollX;
var scale = this.workspace_.scale;
xyOld.x += scrollX / scale - scrollX;
// If the flyout is on the right side, (0, 0) in the flyout is offset to
// the right of (0, 0) in the main workspace. Add an offset to take that
// into account.
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT) {
scrollX = targetWorkspace.getMetrics().viewWidth - this.width_;
scale = targetWorkspace.scale;
// Scale the scroll (getSvgXY_ did not do this).
xyOld.x += scrollX / scale - scrollX;
}
// Take into account that the flyout might have been scrolled vertically
// (separately from the main workspace).
// Generally a no-op in horizontal mode but likely to happen in vertical
// mode.
var scrollY = this.workspace_.scrollY;
scale = this.workspace_.scale;
xyOld.y += scrollY / scale - scrollY;
// If the flyout is on the bottom, (0, 0) in the flyout is offset to be below
// (0, 0) in the main workspace. Add an offset to take that into account.
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_BOTTOM) {
scrollY = targetWorkspace.getMetrics().viewHeight - this.height_;
scale = targetWorkspace.scale;
xyOld.y += scrollY / scale - scrollY;
}
// Create the new block by cloning the block in the flyout (via XML).
var xml = Blockly.Xml.blockToDom(originBlock);
var block = Blockly.Xml.domToBlock(xml, targetWorkspace);
var svgRootNew = block.getSvgRoot();
if (!svgRootNew) {
throw 'block is not rendered.';
}
// Figure out where the new block got placed on the screen, relative to the
// upper left corner of the workspace. This may not be the same as the
// original block because the flyout's origin may not be the same as the
// main workspace's origin.
var xyNew = Blockly.getSvgXY_(svgRootNew, targetWorkspace);
// Scale the scroll (getSvgXY_ did not do this).
xyNew.x +=
targetWorkspace.scrollX / targetWorkspace.scale - targetWorkspace.scrollX;
xyNew.y +=
targetWorkspace.scrollY / targetWorkspace.scale - targetWorkspace.scrollY;
// If the flyout is collapsible and the workspace can't be scrolled.
if (targetWorkspace.toolbox_ && !targetWorkspace.scrollbar) {
xyNew.x += targetWorkspace.toolbox_.getWidth() / targetWorkspace.scale;
xyNew.y += targetWorkspace.toolbox_.getHeight() / targetWorkspace.scale;
}
// Move the new block to where the old block is.
block.moveBy(xyOld.x - xyNew.x, xyOld.y - xyNew.y);
return block;
};
/**
* Return the deletion rectangle for this flyout in viewport coordinates.
* @return {goog.math.Rect} Rectangle in which to delete.
*/
Blockly.HorizontalFlyout.prototype.getClientRect = function() {
if (!this.svgGroup_) {
return null;
}
var flyoutRect = this.svgGroup_.getBoundingClientRect();
// BIG_NUM is offscreen padding so that blocks dragged beyond the shown flyout
// 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 y = flyoutRect.top;
var height = flyoutRect.height;
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_TOP) {
return new goog.math.Rect(-BIG_NUM, y - BIG_NUM, BIG_NUM * 2,
BIG_NUM + height);
} else if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_BOTTOM) {
return new goog.math.Rect(-BIG_NUM, y, BIG_NUM * 2,
BIG_NUM + height);
}
};
/**
* Compute height of flyout. Position button under each block.
* For RTL: Lay out the blocks right-aligned.
* @param {!Array<!Blockly.Block>} blocks The blocks to reflow.
*/
Blockly.HorizontalFlyout.prototype.reflowInternal_ = function(blocks) {
this.workspace_.scale = this.targetWorkspace_.scale;
var flyoutHeight = 0;
for (var i = 0, block; block = blocks[i]; i++) {
flyoutHeight = Math.max(flyoutHeight, block.getHeightWidth().height);
}
flyoutHeight += this.MARGIN * 1.5;
flyoutHeight *= this.workspace_.scale;
flyoutHeight += Blockly.Scrollbar.scrollbarThickness;
if (this.height_ != flyoutHeight) {
for (var i = 0, block; block = blocks[i]; i++) {
var blockHW = block.getHeightWidth();
if (block.flyoutRect_) {
block.flyoutRect_.setAttribute('width', blockHW.width);
block.flyoutRect_.setAttribute('height', blockHW.height);
// Rectangles behind blocks with output tabs are shifted a bit.
var blockXY = block.getRelativeToSurfaceXY();
block.flyoutRect_.setAttribute('y', blockXY.y);
block.flyoutRect_.setAttribute('x',
this.RTL ? blockXY.x - blockHW.width : blockXY.x);
// For hat blocks we want to shift them down by the hat height
// since the y coordinate is the corner, not the top of the hat.
var hatOffset =
block.startHat_ ? Blockly.BlockSvg.START_HAT_HEIGHT : 0;
if (hatOffset) {
block.moveBy(0, hatOffset);
}
block.flyoutRect_.setAttribute('y', blockXY.y);
}
}
// Record the height for .getMetrics_ and .position.
this.height_ = flyoutHeight;
// Call this since it is possible the trash and zoom buttons need
// to move. e.g. on a bottom positioned flyout when zoom is clicked.
this.targetWorkspace_.resize();
}
};

694
core/flyout_vertical.js Normal file
View file

@ -0,0 +1,694 @@
/**
* @license
* Visual Blocks Editor
*
* Copyright 2011 Google Inc.
* https://developers.google.com/blockly/
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* @fileoverview Layout code for a vertical variant of the flyout.
* @author fenichel@google.com (Rachel Fenichel)
*/
'use strict';
goog.provide('Blockly.VerticalFlyout');
goog.require('Blockly.Block');
goog.require('Blockly.Comment');
goog.require('Blockly.Events');
goog.require('Blockly.Flyout');
goog.require('Blockly.FlyoutButton');
goog.require('Blockly.WorkspaceSvg');
goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.math.Rect');
goog.require('goog.userAgent');
/**
* Class for a flyout.
* @param {!Object} workspaceOptions Dictionary of options for the workspace.
* @extends {Blockly.Flyout}
* @constructor
*/
Blockly.VerticalFlyout = function(workspaceOptions) {
workspaceOptions.getMetrics = this.getMetrics_.bind(this);
workspaceOptions.setMetrics = this.setMetrics_.bind(this);
Blockly.VerticalFlyout.superClass_.constructor.call(this, workspaceOptions);
/**
* Flyout should be laid out horizontally vs vertically.
* @type {boolean}
* @private
*/
this.horizontalLayout_ = false;
/**
* List of checkboxes next to variable blocks.
* Each element is an object containing the SVG for the checkbox, a boolean
* for its checked state, and the block the checkbox is associated with.
* @type {!Array.<!Object>}
* @private
*/
this.checkboxes_ = [];
};
goog.inherits(Blockly.VerticalFlyout, Blockly.Flyout);
/**
* Does the flyout automatically close when a block is created?
* @type {boolean}
*/
Blockly.VerticalFlyout.prototype.autoClose = false;
Blockly.VerticalFlyout.prototype.DEFAULT_WIDTH = 250;
/**
* Size of a checkbox next to a variable reporter.
* @type {number}
* @const
*/
Blockly.VerticalFlyout.prototype.CHECKBOX_SIZE = 20;
/**
* Space above and around the checkbox.
* @type {number}
* @const
*/
Blockly.VerticalFlyout.prototype.CHECKBOX_MARGIN = Blockly.Flyout.prototype.MARGIN;
/**
* Total additional width of a row that contains a checkbox.
* @type {number}
* @const
*/
Blockly.VerticalFlyout.prototype.CHECKBOX_SPACE_X =
Blockly.VerticalFlyout.prototype.CHECKBOX_SIZE +
2 * Blockly.VerticalFlyout.prototype.CHECKBOX_MARGIN;
/**
* Initializes the flyout.
* @param {!Blockly.Workspace} targetWorkspace The workspace in which to create
* new blocks.
*/
Blockly.VerticalFlyout.prototype.init = function(targetWorkspace) {
Blockly.VerticalFlyout.superClass_.init.call(this, targetWorkspace);
this.workspace_.scale = targetWorkspace.scale;
};
Blockly.VerticalFlyout.prototype.createDom = function() {
Blockly.VerticalFlyout.superClass_.createDom.call(this);
/*
<defs>
<clipPath id="blocklyBlockMenuClipPath">
<rect id="blocklyBlockMenuClipRect" height="1147px"
width="248px" y="0" x="0">
</rect>
</clipPath>
</defs>
*/
this.defs_ = Blockly.createSvgElement('defs', {}, this.svgGroup_);
var clipPath = Blockly.createSvgElement('clipPath',
{'id':'blocklyBlockMenuClipPath'}, this.defs_);
this.clipRect_ = Blockly.createSvgElement('rect',
{'id': 'blocklyBlockMenuClipRect',
'height': '0',
'width': '0',
'y': '0',
'x': '0'
},
clipPath);
this.workspace_.svgGroup_.setAttribute('clip-path',
'url(#blocklyBlockMenuClipPath)');
return this.svgGroup_;
};
/**
* Return an object with all the metrics required to size scrollbars for the
* flyout. The following properties are computed:
* .viewHeight: Height of the visible rectangle,
* .viewWidth: Width of the visible rectangle,
* .contentHeight: Height of the contents,
* .contentWidth: Width of the contents,
* .viewTop: Offset of top edge of visible rectangle from parent,
* .contentTop: Offset of the top-most content from the y=0 coordinate,
* .absoluteTop: Top-edge of view.
* .viewLeft: Offset of the left edge of visible rectangle from parent,
* .contentLeft: Offset of the left-most content from the x=0 coordinate,
* .absoluteLeft: Left-edge of view.
* @return {Object} Contains size and position metrics of the flyout.
* @private
*/
Blockly.VerticalFlyout.prototype.getMetrics_ = function() {
if (!this.isVisible()) {
// Flyout is hidden.
return null;
}
try {
var optionBox = this.workspace_.getCanvas().getBBox();
} catch (e) {
// Firefox has trouble with hidden elements (Bug 528969).
var optionBox = {height: 0, y: 0, width: 0, x: 0};
}
// Padding for the end of the scrollbar.
var absoluteTop = this.SCROLLBAR_PADDING;
var absoluteLeft = 0;
var viewHeight = this.height_ - 2 * this.SCROLLBAR_PADDING;
var viewWidth = this.getWidth() - this.SCROLLBAR_PADDING;
var metrics = {
viewHeight: viewHeight,
viewWidth: viewWidth,
contentHeight: optionBox.height * this.workspace_.scale + 2 * this.MARGIN,
contentWidth: optionBox.width * this.workspace_.scale + 2 * this.MARGIN,
viewTop: -this.workspace_.scrollY,
viewLeft: -this.workspace_.scrollX,
contentTop: optionBox.y,
contentLeft: optionBox.x,
absoluteTop: absoluteTop,
absoluteLeft: absoluteLeft
};
return metrics;
};
/**
* Sets the translation of the flyout to match the scrollbars.
* @param {!Object} xyRatio Contains a y property which is a float
* between 0 and 1 specifying the degree of scrolling and a
* similar x property.
* @private
*/
Blockly.VerticalFlyout.prototype.setMetrics_ = function(xyRatio) {
var metrics = this.getMetrics_();
// This is a fix to an apparent race condition.
if (!metrics) {
return;
}
if (goog.isNumber(xyRatio.y)) {
this.workspace_.scrollY = -metrics.contentHeight * xyRatio.y;
}
this.workspace_.translate(this.workspace_.scrollX + metrics.absoluteLeft,
this.workspace_.scrollY + metrics.absoluteTop);
this.clipRect_.setAttribute('height', metrics.viewHeight + 'px');
this.clipRect_.setAttribute('width', metrics.viewWidth + 'px');
};
/**
* Move the flyout to the edge of the workspace.
*/
Blockly.VerticalFlyout.prototype.position = function() {
if (!this.isVisible()) {
return;
}
var targetWorkspaceMetrics = this.targetWorkspace_.getMetrics();
if (!targetWorkspaceMetrics) {
// Hidden components will return null.
return;
}
// This version of the flyout does not change width to fit its contents.
// Instead it matches the width of its parent or uses a default value.
this.width_ = this.getWidth();
if (this.parentToolbox_) {
var x = this.parentToolbox_.HtmlDiv.offsetLeft;
var y = this.parentToolbox_.HtmlDiv.offsetTop +
this.parentToolbox_.getHeight();
} else {
var x = this.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT ?
targetWorkspaceMetrics.viewWidth - this.width_ : 0;
var y = 0;
}
this.svgGroup_.setAttribute('transform', 'translate(' + x + ',' + y + ')');
// Record the height for Blockly.Flyout.getMetrics_
this.height_ = targetWorkspaceMetrics.viewHeight - y;
this.setBackgroundPath_(this.width_, this.height_);
// Update the scrollbar (if one exists).
if (this.scrollbar_) {
this.scrollbar_.resize();
}
// The blocks need to be visible in order to be laid out and measured
// correctly, but we don't want the flyout to show up until it's properly
// sized. Opacity is set to zero in show().
this.svgGroup_.style.opacity = 1;
};
/**
* Create and set the path for the visible boundaries of the flyout.
* @param {number} width The width of the flyout, not including the
* rounded corners.
* @param {number} height The height of the flyout, not including
* rounded corners.
* @private
*/
Blockly.VerticalFlyout.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 ' + 0 + ',0'];
// Top.
path.push('h', width);
// Rounded corner.
path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0,
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,
atRight ? 0 : 1,
atRight ? this.CORNER_RADIUS : -this.CORNER_RADIUS,
this.CORNER_RADIUS);
// Bottom.
path.push('h', -width);
path.push('z');
this.svgBackground_.setAttribute('d', path.join(' '));
};
/**
* Scroll the flyout to the top.
*/
Blockly.VerticalFlyout.prototype.scrollToStart = function() {
this.scrollbar_.set(0);
};
/**
* Scroll the flyout.
* @param {!Event} e Mouse wheel scroll event.
* @private
*/
Blockly.VerticalFlyout.prototype.wheel_ = function(e) {
var delta = e.deltaY;
if (delta) {
if (goog.userAgent.GECKO) {
// Firefox's deltas are a tenth that of Chrome/Safari.
delta *= 10;
}
var metrics = this.getMetrics_();
var pos = metrics.viewTop + delta;
var limit = metrics.contentHeight - metrics.viewHeight;
pos = Math.min(pos, limit);
pos = Math.max(pos, 0);
this.scrollbar_.set(pos);
}
// Don't scroll the page.
e.preventDefault();
// Don't propagate mousewheel event (zooming).
e.stopPropagation();
};
/**
* Delete blocks and background buttons from a previous showing of the flyout.
* @private
*/
Blockly.VerticalFlyout.prototype.clearOldBlocks_ = function() {
Blockly.VerticalFlyout.superClass_.clearOldBlocks_.call(this);
// Do the same for checkboxes.
for (var i = 0, elem; elem = this.checkboxes_[i]; i++) {
elem.block.flyoutCheckbox = null;
goog.dom.removeNode(elem.svgRoot);
}
this.checkboxes_ = [];
};
/**
* Add listeners to a block that has been added to the flyout.
* @param {Element} root The root node of the SVG group the block is in.
* @param {!Blockly.Block} block The block to add listeners for.
* @param {!Element} rect The invisible rectangle under the block that acts as
* a button for that block.
* @private
*/
Blockly.VerticalFlyout.prototype.addBlockListeners_ = function(root, block,
rect) {
Blockly.VerticalFlyout.superClass_.addBlockListeners_.call(this, root, block,
rect);
if (block.flyoutCheckbox) {
this.listeners_.push(Blockly.bindEvent_(block.flyoutCheckbox.svgRoot,
'mousedown', null, this.checkboxClicked_(block.flyoutCheckbox)));
}
};
/**
* Lay out the blocks in the flyout.
* @param {!Array.<!Object>} contents The blocks and buttons to lay out.
* @param {!Array.<number>} gaps The visible gaps between blocks.
* @private
*/
Blockly.VerticalFlyout.prototype.layout_ = function(contents, gaps) {
var margin = this.MARGIN;
var flyoutWidth = this.getWidth() / this.workspace_.scale;
var cursorX = margin;
var cursorY = margin;
for (var i = 0, item; item = contents[i]; i++) {
if (item.type == 'block') {
var block = item.block;
var allBlocks = block.getDescendants();
for (var j = 0, child; child = allBlocks[j]; j++) {
// Mark blocks as being inside a flyout. This is used to detect and
// prevent the closure of the flyout if the user right-clicks on such a
// block.
child.isInFlyout = true;
}
var root = block.getSvgRoot();
var blockHW = block.getHeightWidth();
// Figure out where the block goes, taking into account its size, whether
// we're in RTL mode, and whether it has a checkbox.
var oldX = block.getRelativeToSurfaceXY().x;
var newX = flyoutWidth - this.MARGIN;
var moveX = this.RTL ? newX - oldX : margin;
if (block.hasCheckboxInFlyout()) {
this.createCheckbox_(block, cursorX, cursorY, blockHW);
if (this.RTL) {
moveX -= (this.CHECKBOX_SIZE + this.CHECKBOX_MARGIN);
} else {
moveX += this.CHECKBOX_SIZE + this.CHECKBOX_MARGIN;
}
}
// The block moves a bit extra for the hat, but the block's rectangle
// doesn't. That's because the hat actually extends up from 0.
block.moveBy(moveX,
cursorY + (block.startHat_ ? Blockly.BlockSvg.START_HAT_HEIGHT : 0));
var rect = this.createRect_(block, moveX, cursorY, blockHW, i);
this.addBlockListeners_(root, block, rect);
cursorY += blockHW.height + gaps[i];
} else if (item.type == 'button') {
var button = item.button;
var buttonSvg = button.createDom();
button.moveTo(cursorX, cursorY);
button.show();
Blockly.bindEvent_(buttonSvg, 'mouseup', button, button.onMouseUp);
this.buttons_.push(button);
cursorY += button.height + gaps[i];
}
}
};
/**
* Create and place a rectangle corresponding to the given block.
* @param {!Blockly.Block} block The block to associate the rect to.
* @param {number} x The x position of the cursor during this layout pass.
* @param {number} y The y position of the cursor during this layout pass.
* @param {!{height: number, width: number}} blockHW The height and width of the
* block.
* @param {number} index The index into the background buttons list where this
* rect should be placed.
* @return {!SVGElement} Newly created SVG element for the rectangle behind the
* block.
* @private
*/
Blockly.VerticalFlyout.prototype.createRect_ = function(block, x, y,
blockHW, index) {
// Create an invisible rectangle under the block to act as a button. Just
// using the block as a button is poor, since blocks have holes in them.
var rect = Blockly.createSvgElement('rect',
{
'fill-opacity': 0,
'x': x,
'y': y,
'height': blockHW.height,
'width': blockHW.width
}, null);
rect.tooltip = block;
Blockly.Tooltip.bindMouseEvents(rect);
// Add the rectangles under the blocks, so that the blocks' tooltips work.
this.workspace_.getCanvas().insertBefore(rect, block.getSvgRoot());
block.flyoutRect_ = rect;
this.backgroundButtons_[index] = rect;
return rect;
};
/**
* Create and place a checkbox corresponding to the given block.
* @param {!Blockly.Block} block The block to associate the checkbox to.
* @param {number} cursorX The x position of the cursor during this layout pass.
* @param {number} cursorY The y position of the cursor during this layout pass.
* @param {!{height: number, width: number}} blockHW The height and width of the
* block.
* @private
*/
Blockly.VerticalFlyout.prototype.createCheckbox_ = function(block, cursorX,
cursorY, blockHW) {
var svgRoot = block.getSvgRoot();
var extraSpace = this.CHECKBOX_SIZE + this.CHECKBOX_MARGIN;
var checkboxRect = Blockly.createSvgElement('rect',
{
'class': 'blocklyFlyoutCheckbox',
'height': this.CHECKBOX_SIZE,
'width': this.CHECKBOX_SIZE,
'x': this.RTL ? this.getWidth() / this.workspace_.scale - extraSpace :
cursorX,
'y': cursorY + blockHW.height / 2 -
this.CHECKBOX_SIZE / 2
}, null);
var checkboxObj = {svgRoot: checkboxRect, clicked: false, block: block};
block.flyoutCheckbox = checkboxObj;
this.workspace_.getCanvas().insertBefore(checkboxRect, svgRoot);
this.checkboxes_.push(checkboxObj);
};
/**
* Respond to a click on a checkbox in the flyout.
* @param {!Object} checkboxObj An object containing the svg element of the
* checkbox, a boolean for the state of the checkbox, and the block the
* checkbox is associated with.
* @return {!Function} Function to call when checkbox is clicked.
* @private
*/
Blockly.VerticalFlyout.prototype.checkboxClicked_ = function(checkboxObj) {
return function(e) {
checkboxObj.clicked = !checkboxObj.clicked;
if (checkboxObj.clicked) {
Blockly.addClass_((checkboxObj.svgRoot), 'checked');
} else {
Blockly.removeClass_((checkboxObj.svgRoot), 'checked');
}
// This event has been handled. No need to bubble up to the document.
e.stopPropagation();
e.preventDefault();
};
};
/**
* Explicitly set the clicked state of the checkbox for the given block.
* @param {string} blockId ID of block whose checkbox should be changed.
* @param {boolean} clicked True if the box should be marked clicked.
*/
Blockly.VerticalFlyout.prototype.setCheckboxState = function(blockId, clicked) {
var block = this.workspace_.getBlockById(blockId);
if (!block) {
throw 'No block found in the flyout for id ' + blockId;
}
var checkboxObj = block.flyoutCheckbox;
checkboxObj.clicked = clicked;
if (checkboxObj.clicked) {
Blockly.addClass_((checkboxObj.svgRoot), 'checked');
} else {
Blockly.removeClass_((checkboxObj.svgRoot), 'checked');
}
};
/**
* Handle a mouse-move to vertically drag the flyout.
* @param {!Event} e Mouse move event.
* @private
*/
Blockly.VerticalFlyout.prototype.onMouseMove_ = function(e) {
var metrics = this.getMetrics_();
if (metrics.contentHeight - metrics.viewHeight < 0) {
return;
}
var dy = e.clientY - this.startDragMouseY_;
this.startDragMouseY_ = e.clientY;
var y = metrics.viewTop - dy;
y = goog.math.clamp(y, 0, metrics.contentHeight - metrics.viewHeight);
this.scrollbar_.set(y);
};
/**
* Determine if a drag delta is toward the workspace, based on the position
* and orientation of the flyout. This is used in determineDragIntention_ to
* determine if a new block should be created or if the flyout should scroll.
* @param {number} dx X delta of the drag.
* @param {number} dy Y delta of the drag.
* @return {boolean} true if the drag is toward the workspace.
* @private
*/
Blockly.VerticalFlyout.prototype.isDragTowardWorkspace_ = function(dx, dy) {
// Direction goes from -180 to 180, with 0 toward the right and 90 on top.
var dragDirection = Math.atan2(dy, dx) / Math.PI * 180;
var draggingTowardWorkspace = false;
var range = this.dragAngleRange_;
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_LEFT) {
// Vertical at left.
if (dragDirection < range && dragDirection > -range) {
draggingTowardWorkspace = true;
}
} else {
// Vertical at right.
if (dragDirection < -180 + range || dragDirection > 180 - range) {
draggingTowardWorkspace = true;
}
}
return draggingTowardWorkspace;
};
/**
* Copy a block from the flyout to the workspace and position it correctly.
* @param {!Blockly.Block} originBlock The flyout block to copy.
* @return {!Blockly.Block} The new block in the main workspace.
* @private
*/
Blockly.VerticalFlyout.prototype.placeNewBlock_ = function(originBlock) {
var targetWorkspace = this.targetWorkspace_;
var svgRootOld = originBlock.getSvgRoot();
if (!svgRootOld) {
throw 'originBlock is not rendered.';
}
// Figure out where the original block is on the screen, relative to the upper
// left corner of the main workspace.
// In what coordinates? Pixels?
var xyOld = Blockly.getSvgXY_(svgRootOld, targetWorkspace);
// Take into account that the flyout might have been scrolled horizontally
// (separately from the main workspace).
// Generally a no-op in vertical mode but likely to happen in horizontal
// mode.
// var scrollX = this.workspace_.scrollX;
var scale = this.workspace_.scale;
// xyOld.x += scrollX / scale - scrollX;
var targetMetrics = targetWorkspace.getMetrics();
// If the flyout is on the right side, (0, 0) in the flyout is offset to
// the right of (0, 0) in the main workspace. Add an offset to take that
// into account.
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT) {
scrollX = targetMetrics.viewWidth - this.width_;
// Scale the scroll (getSvgXY_ did not do this).
xyOld.x += scrollX / scale - scrollX;
}
// The main workspace has 0,0 at the top inside corner of the toolbox.
// Need to take that into account now that the flyout is offset from there in
// both directions.
if (this.parentToolbox_) {
// TODO (fenichel): fix these offsets to correctly deal with scaling
// changes.
xyOld.y += (this.parentToolbox_.getHeight()) /
targetWorkspace.scale -
(this.parentToolbox_.getHeight());
var xOffset = this.parentToolbox_.getWidth() / targetWorkspace.scale -
this.parentToolbox_.getWidth();
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT) {
xyOld.x += xOffset;
} else {
xyOld.x -= xOffset;
}
}
// Take into account that the flyout might have been scrolled vertically
// (separately from the main workspace).
var scrollY = this.workspace_.scrollY;
xyOld.y += scrollY / scale - scrollY;
// Create the new block by cloning the block in the flyout (via XML).
var xml = Blockly.Xml.blockToDom(originBlock);
// The target workspace would normally resize during domToBlock, which will
// lead to weird jumps. Save it for terminateDrag.
targetWorkspace.setResizesEnabled(false);
var block = Blockly.Xml.domToBlock(xml, targetWorkspace);
var svgRootNew = block.getSvgRoot();
if (!svgRootNew) {
throw 'block is not rendered.';
}
// Figure out where the new block got placed on the screen, relative to the
// upper left corner of the workspace. This may not be the same as the
// original block because the flyout's origin may not be the same as the
// main workspace's origin.
var xyNew = Blockly.getSvgXY_(svgRootNew, targetWorkspace);
// Scale the scroll (getSvgXY_ did not do this).
xyNew.x +=
targetWorkspace.scrollX / targetWorkspace.scale - targetWorkspace.scrollX;
xyNew.y +=
targetWorkspace.scrollY / targetWorkspace.scale - targetWorkspace.scrollY;
// Move the new block to where the old block is.
var dx = ((scale * xyOld.x) - (targetWorkspace.scale * xyNew.x)) /
targetWorkspace.scale;
var dy = ((scale * xyOld.y) - (targetWorkspace.scale * xyNew.y)) /
targetWorkspace.scale;
block.moveBy(dx, dy);
return block;
};
/**
* Return the deletion rectangle for this flyout in viewport coordinates.
* @return {goog.math.Rect} Rectangle in which to delete.
*/
Blockly.VerticalFlyout.prototype.getClientRect = function() {
if (!this.svgGroup_) {
return null;
}
var flyoutRect = this.svgGroup_.getBoundingClientRect();
// BIG_NUM is offscreen padding so that blocks dragged beyond the shown flyout
// 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 x = flyoutRect.left;
var width = flyoutRect.width;
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_LEFT) {
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 + width, BIG_NUM * 2);
}
};
/**
* Compute width of flyout. Position button under each block.
* For RTL: Lay out the blocks right-aligned.
* @param {!Array<!Blockly.Block>} blocks The blocks to reflow.
*/
Blockly.VerticalFlyout.prototype.reflowInternal_ = function(/* blocks */) {
// This is a no-op because the flyout is a fixed size.
return;
};

641
core/toolbox.js
View file

@ -26,8 +26,9 @@
goog.provide('Blockly.Toolbox');
goog.require('Blockly.Flyout');
goog.require('Blockly.HorizontalFlyout');
goog.require('Blockly.Touch');
goog.require('Blockly.VerticalFlyout');
goog.require('goog.dom');
goog.require('goog.dom.TagName');
goog.require('goog.events');
@ -80,53 +81,13 @@ Blockly.Toolbox = function(workspace) {
*/
this.toolboxPosition = workspace.options.toolboxPosition;
/**
* Configuration constants for Closure's tree UI.
* @type {Object.<string,*>}
* @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,*>}
* @private
*/
this.treeSeparatorConfig_ = {
cssTreeRow: 'blocklyTreeSeparator'
};
if (this.horizontalLayout_) {
this.config_['cssTreeRow'] =
this.config_['cssTreeRow'] +
(workspace.RTL ?
' blocklyHorizontalTreeRtl' : ' blocklyHorizontalTree');
this.treeSeparatorConfig_['cssTreeRow'] =
'blocklyTreeSeparatorHorizontal ' +
(workspace.RTL ?
'blocklyHorizontalTreeRtl' : 'blocklyHorizontalTree');
this.config_['cssTreeIcon'] = '';
}
};
/**
* Width of the toolbox, which changes only in vertical layout.
* @type {number}
*/
Blockly.Toolbox.prototype.width = 0;
Blockly.Toolbox.prototype.width = 250;
/**
* Height of the toolbox, which changes only in horizontal layout.
@ -134,19 +95,7 @@ Blockly.Toolbox.prototype.width = 0;
*/
Blockly.Toolbox.prototype.height = 0;
/**
* The SVG group currently selected.
* @type {SVGGElement}
* @private
*/
Blockly.Toolbox.prototype.selectedOption_ = null;
/**
* The tree node most recently selected.
* @type {goog.ui.tree.BaseNode}
* @private
*/
Blockly.Toolbox.prototype.lastCategory_ = null;
Blockly.Toolbox.prototype.selectedItem_ = null;
/**
* Initializes the toolbox.
@ -174,38 +123,10 @@ Blockly.Toolbox.prototype.init = function() {
}
Blockly.Touch.clearTouchIdentifier(); // Don't block future drags.
});
var workspaceOptions = {
disabledPatternId: workspace.options.disabledPatternId,
parentWorkspace: workspace,
RTL: workspace.RTL,
horizontalLayout: workspace.horizontalLayout,
toolboxPosition: workspace.options.toolboxPosition
};
/**
* @type {!Blockly.Flyout}
* @private
*/
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' + (workspace.RTL ? 'Rtl' : 'Ltr');
var tree = new Blockly.Toolbox.TreeControl(this, this.config_);
this.tree_ = tree;
tree.setShowRootNode(false);
tree.setShowLines(false);
tree.setShowExpandIcons(false);
tree.setSelectedItem(null);
var openNode = this.populate_(workspace.options.languageTree);
tree.render(this.HtmlDiv);
if (openNode) {
tree.setSelectedItem(openNode);
}
this.addColour_();
this.createFlyout_();
this.categoryMenu_ = new Blockly.Toolbox.CategoryMenu(this, this.HtmlDiv);
this.populate_(workspace.options.languageTree);
this.position();
};
@ -214,12 +135,49 @@ Blockly.Toolbox.prototype.init = function() {
*/
Blockly.Toolbox.prototype.dispose = function() {
this.flyout_.dispose();
this.tree_.dispose();
this.categoryMenu_.dispose();
this.categoryMenu_ = null;
goog.dom.removeNode(this.HtmlDiv);
this.workspace_ = null;
this.lastCategory_ = null;
};
/**
* Create and configure a flyout based on the main workspace's options.
* @private
*/
Blockly.Toolbox.prototype.createFlyout_ = function() {
var workspace = this.workspace_;
var options = {
disabledPatternId: workspace.options.disabledPatternId,
parentWorkspace: workspace,
RTL: workspace.RTL,
horizontalLayout: workspace.horizontalLayout,
toolboxPosition: workspace.options.toolboxPosition
};
if (workspace.horizontalLayout) {
this.flyout_ = new Blockly.HorizontalFlyout(options);
} else {
this.flyout_ = new Blockly.VerticalFlyout(options);
}
this.flyout_.setParentToolbox(this);
goog.dom.insertSiblingAfter(this.flyout_.createDom(), workspace.svgGroup_);
this.flyout_.init(workspace);
};
/**
* Fill the toolbox with categories and blocks.
* @param {!Node} newTree DOM tree of blocks.
* @private
*/
Blockly.Toolbox.prototype.populate_ = function(newTree) {
this.categoryMenu_.populate(newTree);
this.setSelectedItem(this.categoryMenu_.categories_[0]);
};
/**
* Get the width of the toolbox.
* @return {number} The width of the toolbox.
@ -229,11 +187,11 @@ Blockly.Toolbox.prototype.getWidth = function() {
};
/**
* Get the height of the toolbox.
* @return {number} The width of the toolbox.
* Get the height of the toolbox, not including the block menu.
* @return {number} The height of the toolbox.
*/
Blockly.Toolbox.prototype.getHeight = function() {
return this.height;
return this.categoryMenu_ ? this.categoryMenu_.getHeight() : 0;
};
/**
@ -263,160 +221,17 @@ Blockly.Toolbox.prototype.position = function() {
} else { // Left
treeDiv.style.left = '0';
}
treeDiv.style.height = svgSize.height + 'px';
this.width = treeDiv.offsetWidth;
treeDiv.style.height = this.getHeight() + 'px';
treeDiv.style.width = this.width + 'px';
}
this.flyout_.position();
};
/**
* Fill the toolbox with categories and blocks.
* @param {!Node} newTree DOM tree of blocks.
* @return {Node} Tree node to open at startup (or null).
* @private
*/
Blockly.Toolbox.prototype.populate_ = function(newTree) {
this.tree_.removeChildren(); // Delete any existing content.
this.tree_.blocks = [];
this.hasColours_ = false;
var openNode =
this.syncTrees_(newTree, this.tree_, this.iconic_,
this.workspace_.options.pathToMedia);
if (this.tree_.blocks.length) {
throw 'Toolbox cannot have both blocks and categories in the root level.';
}
// Fire a resize event since the toolbox may have changed width and height.
this.workspace_.resizeContents();
return openNode;
};
/**
* Sync trees of the toolbox.
* @param {Node} treeIn DOM tree of blocks, or null.
* @param {Blockly.Toolbox.TreeControl} treeOut Blockly toolbox tree to sync.
* @param {boolean} iconic Whether the toolbox uses icons.
* @param {string} pathToMedia Media path for the toolbox.
* @return {Node} Tree node to open at startup (or null).
* @private
*/
Blockly.Toolbox.prototype.syncTrees_ = function(treeIn, treeOut, iconic,
pathToMedia) {
var openNode = null;
var lastElement = null;
for (var i = 0, childIn; childIn = treeIn.childNodes[i]; i++) {
if (!childIn.tagName) {
// Skip over text.
continue;
}
switch (childIn.tagName.toUpperCase()) {
case 'CATEGORY':
if (iconic && childIn.getAttribute('icon')) {
var childOut = this.tree_.createNode(childIn.getAttribute('name'),
pathToMedia + childIn.getAttribute('icon'));
} else {
var childOut = this.tree_.createNode(childIn.getAttribute('name'),
null);
}
childOut.blocks = [];
treeOut.add(childOut);
var custom = childIn.getAttribute('custom');
if (custom) {
// Variables and procedures are special dynamic categories.
childOut.blocks = custom;
} else {
var newOpenNode = this.syncTrees_(childIn, childOut, iconic,
pathToMedia);
if (newOpenNode) {
openNode = newOpenNode;
}
}
var colour = childIn.getAttribute('colour');
if (goog.isString(colour)) {
if (colour.match(/^#[0-9a-fA-F]{6}$/)) {
childOut.hexColour = colour;
} else {
childOut.hexColour = Blockly.hueToRgb(colour);
}
this.hasColours_ = true;
} else {
childOut.hexColour = '';
}
if (childIn.getAttribute('expanded') == 'true') {
if (childOut.blocks.length) {
// This is a category that directly contians blocks.
// After the tree is rendered, open this category and show flyout.
openNode = childOut;
}
childOut.setExpanded(true);
} else {
childOut.setExpanded(false);
}
lastElement = childIn;
break;
case 'SEP':
if (lastElement) {
if (lastElement.tagName.toUpperCase() == 'CATEGORY') {
// Separator between two categories.
// <sep></sep>
treeOut.add(new Blockly.Toolbox.TreeSeparator(
this.treeSeparatorConfig_));
} else {
// Change the gap between two blocks.
// <sep gap="36"></sep>
// The default gap is 24, can be set larger or smaller.
// Note that a deprecated method is to add a gap to a block.
// <block type="math_arithmetic" gap="8"></block>
var newGap = parseFloat(childIn.getAttribute('gap'));
if (!isNaN(newGap) && lastElement) {
lastElement.setAttribute('gap', newGap);
}
}
}
break;
case 'BLOCK':
case 'SHADOW':
treeOut.blocks.push(childIn);
lastElement = childIn;
break;
}
}
return openNode;
};
/**
* Recursively add colours to this toolbox.
* @param {Blockly.Toolbox.TreeNode} opt_tree Starting point of tree.
* Defaults to the root node.
* @private
*/
Blockly.Toolbox.prototype.addColour_ = function(opt_tree) {
var tree = opt_tree || this.tree_;
var children = tree.getChildren();
for (var i = 0, child; child = children[i]; i++) {
var element = child.getRowElement();
if (element) {
if (this.hasColours_) {
var border = '8px solid ' + (child.hexColour || '#ddd');
} else {
var border = 'none';
}
if (this.RTL) {
element.style.borderRight = border;
} else {
element.style.borderLeft = border;
}
}
this.addColour_(child);
}
};
/**
* Unhighlight any previously specified option.
*/
Blockly.Toolbox.prototype.clearSelection = function() {
this.tree_.setSelectedItem(null);
this.setSelectedItem(null);
};
/**
@ -460,219 +275,177 @@ Blockly.Toolbox.prototype.getClientRect = function() {
* procedures.
*/
Blockly.Toolbox.prototype.refreshSelection = function() {
var selectedItem = this.tree_.getSelectedItem();
if (selectedItem && selectedItem.blocks) {
this.flyout_.show(selectedItem.blocks);
var selectedItem = this.getSelectedItem();
if (selectedItem && selectedItem.getContents()) {
this.flyout_.show(selectedItem.getContents());
}
};
// Extending Closure's Tree UI.
/**
* Extention of a TreeControl object that uses a custom tree node.
* @param {Blockly.Toolbox} toolbox The parent toolbox for this tree.
* @param {Object} config The configuration for the tree. See
* goog.ui.tree.TreeControl.DefaultConfig.
* @constructor
* @extends {goog.ui.tree.TreeControl}
*/
Blockly.Toolbox.TreeControl = function(toolbox, config) {
this.toolbox_ = toolbox;
goog.ui.tree.TreeControl.call(this, goog.html.SafeHtml.EMPTY, config);
Blockly.Toolbox.prototype.getSelectedItem = function() {
return this.selectedItem_;
};
goog.inherits(Blockly.Toolbox.TreeControl, goog.ui.tree.TreeControl);
/**
* Adds touch handling to TreeControl.
* @override
*/
Blockly.Toolbox.TreeControl.prototype.enterDocument = function() {
Blockly.Toolbox.TreeControl.superClass_.enterDocument.call(this);
var el = this.getElement();
// Add touch handler.
if (goog.events.BrowserFeature.TOUCH_ENABLED) {
Blockly.bindEvent_(el, goog.events.EventType.TOUCHSTART, this,
this.handleTouchEvent_);
Blockly.Toolbox.prototype.setSelectedItem = function(item) {
// item is a category
this.selectedItem_ = item;
if (this.selectedItem_ != null) {
this.flyout_.show(item.getContents());
}
};
/**
* Handles touch events.
* @param {!goog.events.BrowserEvent} e The browser event.
* @private
*/
Blockly.Toolbox.TreeControl.prototype.handleTouchEvent_ = function(e) {
e.preventDefault();
var node = this.getNodeFromEvent_(e);
if (node && e.type === goog.events.EventType.TOUCHSTART) {
// Fire asynchronously since onMouseDown takes long enough that the browser
// would fire the default mouse event before this method returns.
setTimeout(function() {
node.onMouseDown(e); // Same behaviour for click and touch.
}, 1);
}
Blockly.Toolbox.prototype.setSelectedItemFactory = function(item) {
var selectedItem = item;
return function() {
this.setSelectedItem(selectedItem);
Blockly.Touch.clearTouchIdentifier();
};
};
// Category menu
Blockly.Toolbox.CategoryMenu = function(parent, parentHtml) {
this.parent_ = parent;
this.parentHtml_ = parentHtml;
this.createDom();
this.categories_ = [];
};
Blockly.Toolbox.CategoryMenu.prototype.getHeight = function() {
return this.table.offsetHeight;
};
Blockly.Toolbox.CategoryMenu.prototype.createDom = function() {
/*
<table class="scratchCategoryMenu">
</table>
*/
this.table = goog.dom.createDom('table', 'scratchCategoryMenu');
this.parentHtml_.appendChild(this.table);
};
/**
* Creates a new tree node using a custom tree node.
* @param {string=} opt_html The HTML content of the node label.
* @param {string} icon The path to the icon for this category.
* @return {!goog.ui.tree.TreeNode} The new item.
* @override
* Fill the toolbox with categories and blocks by creating a new
* {Blockly.Toolbox.Category} for every category tag in the toolbox xml.
* @param {Node} domTree DOM tree of blocks, or null.
*/
Blockly.Toolbox.TreeControl.prototype.createNode = function(opt_html, icon) {
var icon_html =
'<img src=\"' + icon + '\" alt=\"' + opt_html + '\" align=top>';
var safe_opt_html = opt_html ?
goog.html.SafeHtml.htmlEscape(opt_html) : goog.html.SafeHtml.EMPTY;
var label_html = icon ? icon_html + ' ' + opt_html : safe_opt_html;
return new Blockly.Toolbox.TreeNode(this.toolbox_, label_html,
this.getConfig(), this.getDomHelper());
};
/**
* Display/hide the flyout when an item is selected.
* @param {goog.ui.tree.BaseNode} node The item to select.
* @override
*/
Blockly.Toolbox.TreeControl.prototype.setSelectedItem = function(node) {
var toolbox = this.toolbox_;
if (node == this.selectedItem_ || node == toolbox.tree_) {
Blockly.Toolbox.CategoryMenu.prototype.populate = function(domTree) {
if (!domTree) {
return;
}
if (toolbox.lastCategory_) {
toolbox.lastCategory_.getRowElement().style.backgroundColor = '';
}
if (node) {
var hexColour = node.hexColour || '#57e';
node.getRowElement().style.backgroundColor = hexColour;
// Add colours to child nodes which may have been collapsed and thus
// not rendered.
toolbox.addColour_(node);
}
var oldNode = this.getSelectedItem();
goog.ui.tree.TreeControl.prototype.setSelectedItem.call(this, node);
if (node && node.blocks && node.blocks.length) {
toolbox.flyout_.show(node.blocks);
// Scroll the flyout to the start if the category has changed.
if (toolbox.lastCategory_ != node) {
toolbox.flyout_.scrollToStart();
// TODO: Clean up/make sure things are clean.
// TODO: Track last element, maybe.
for (var i = 0, child; child = domTree.childNodes[i]; i++) {
if (!child.tagName) {
// skip it
continue;
}
switch (child.tagName.toUpperCase()) {
case 'CATEGORY':
if (!(this.categories_.length % 2)) {
var row = goog.dom.createDom('tr', 'scratchCategoryMenuRow');
this.table.appendChild(row);
}
this.categories_.push(new Blockly.Toolbox.Category(this, row,
child));
break;
case 'SEP':
// TODO: deal with separators.
break;
}
}
};
Blockly.Toolbox.CategoryMenu.prototype.dispose = function() {
for (var i = 0, category; category = this.categories_[i]; i++) {
category.dispose();
}
if (this.table) {
goog.dom.removeNode(this.table);
this.table = null;
}
};
// Category
Blockly.Toolbox.Category = function(parent, parentHtml, domTree) {
this.parent_ = parent;
this.parentHtml_ = parentHtml;
this.name_ = domTree.getAttribute('name');
this.setColour(domTree);
this.custom_ = domTree.getAttribute('custom');
this.contents_ = [];
if (!this.custom_) {
this.parseContents_(domTree);
}
this.createDom();
};
Blockly.Toolbox.Category.prototype.dispose = function() {
if (this.item_) {
goog.dom.removeNode(this.item_);
this.item = null;
}
this.parent_ = null;
this.parentHtml_ = null;
this.contents_ = null;
};
Blockly.Toolbox.Category.prototype.createDom = function() {
this.item_ = goog.dom.createDom('td',
{'class': 'scratchCategoryMenuItem',
'style': 'background-color:' + this.colour_
},
this.name_);
this.parentHtml_.appendChild(this.item_);
// this.parent_.parent_ should be the toolbox. Don't leave this line in this
// state. (TODO)
Blockly.bindEvent_(this.item_, 'mousedown', this.parent_.parent_,
this.parent_.parent_.setSelectedItemFactory(this));
};
Blockly.Toolbox.Category.prototype.parseContents_ = function(domTree) {
for (var i = 0, child; child = domTree.childNodes[i]; i++) {
if (!child.tagName) {
// Skip
continue;
}
switch (child.tagName.toUpperCase()) {
case 'BLOCK':
case 'SHADOW':
case 'BUTTON':
case 'TEXT':
this.contents_.push(child);
break;
default:
break;
}
}
};
Blockly.Toolbox.Category.prototype.getContents = function() {
return this.custom_ ? this.custom_ : this.contents_;
};
/**
* Set the colour of the category's background from a DOM node.
* @param {Node} node DOM node with "colour" attribute. Colour is a hex string
* or hue on a colour wheel (0-360).
*/
Blockly.Toolbox.Category.prototype.setColour = function(node) {
var colour = node.getAttribute('colour');
if (goog.isString(colour)) {
if (colour.match(/^#[0-9a-fA-F]{6}$/)) {
this.colour_ = colour;
} else {
this.colour_ = Blockly.hueToRgb(colour);
}
this.hasColours_ = true;
} else {
// Hide the flyout.
toolbox.flyout_.hide();
}
if (oldNode != node && oldNode != this) {
var event = new Blockly.Events.Ui(null, 'category',
oldNode && oldNode.getHtml(), node && node.getHtml());
event.workspaceId = toolbox.workspace_.id;
Blockly.Events.fire(event);
}
if (node) {
toolbox.lastCategory_ = node;
this.colour_ = '#000000';
}
};
/**
* A single node in the tree, customized for Blockly's UI.
* @param {Blockly.Toolbox} toolbox The parent toolbox for this tree.
* @param {!goog.html.SafeHtml} html The HTML content of the node label.
* @param {Object=} opt_config The configuration for the tree. See
* goog.ui.tree.TreeControl.DefaultConfig. If not specified, a default config
* will be used.
* @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper.
* @constructor
* @extends {goog.ui.tree.TreeNode}
*/
Blockly.Toolbox.TreeNode = function(toolbox, html, opt_config, opt_domHelper) {
goog.ui.tree.TreeNode.call(this, html, opt_config, opt_domHelper);
if (toolbox) {
this.horizontalLayout_ = toolbox.horizontalLayout_;
var resize = function() {
// Even though the div hasn't changed size, the visible workspace
// surface of the workspace has, so we may need to reposition everything.
Blockly.svgResize(toolbox.workspace_);
};
// Fire a resize event since the toolbox may have changed width.
goog.events.listen(toolbox.tree_,
goog.ui.tree.BaseNode.EventType.EXPAND, resize);
goog.events.listen(toolbox.tree_,
goog.ui.tree.BaseNode.EventType.COLLAPSE, resize);
this.toolbox_ = toolbox;
}
};
goog.inherits(Blockly.Toolbox.TreeNode, goog.ui.tree.TreeNode);
/**
* Supress population of the +/- icon.
* @return {!goog.html.SafeHtml} The source for the icon.
* @override
*/
Blockly.Toolbox.TreeNode.prototype.getExpandIconSafeHtml = function() {
return goog.html.SafeHtml.create('span');
};
/**
* Expand or collapse the node on mouse click.
* @param {!goog.events.BrowserEvent} e The browser event.
* @override
*/
Blockly.Toolbox.TreeNode.prototype.onMouseDown = function(/*e*/) {
// Expand icon.
if (this.hasChildren() && this.isUserCollapsible_) {
this.toggle();
this.select();
} else if (this.isSelected()) {
this.getTree().setSelectedItem(null);
} else {
this.select();
}
this.updateRow();
};
/**
* Supress the inherited double-click behaviour.
* @param {!goog.events.BrowserEvent} e The browser event.
* @override
* @private
*/
Blockly.Toolbox.TreeNode.prototype.onDoubleClick_ = function(/*e*/) {
// NOP.
};
/**
* Remap event.keyCode in horizontalLayout so that arrow
* keys work properly and call original onKeyDown handler.
* @param {!goog.events.BrowserEvent} e The browser event.
* @return {boolean} The handled value.
* @override
* @private
*/
Blockly.Toolbox.TreeNode.prototype.onKeyDown = function(e) {
if (this.horizontalLayout_) {
var map = {};
map[goog.events.KeyCodes.RIGHT] = goog.events.KeyCodes.DOWN;
map[goog.events.KeyCodes.LEFT] = goog.events.KeyCodes.UP;
map[goog.events.KeyCodes.UP] = goog.events.KeyCodes.LEFT;
map[goog.events.KeyCodes.DOWN] = goog.events.KeyCodes.RIGHT;
var newKeyCode = map[e.keyCode];
e.keyCode = newKeyCode || e.keyCode;
}
return Blockly.Toolbox.TreeNode.superClass_.onKeyDown.call(this, e);
};
/**
* A blank separator node in the tree.
* @param {Object=} config The configuration for the tree. See
* goog.ui.tree.TreeControl.DefaultConfig. If not specified, a default config
* will be used.
* @constructor
* @extends {Blockly.Toolbox.TreeNode}
*/
Blockly.Toolbox.TreeSeparator = function(config) {
Blockly.Toolbox.TreeNode.call(this, null, '', config);
};
goog.inherits(Blockly.Toolbox.TreeSeparator, Blockly.Toolbox.TreeNode);

8
core/workspace_svg.js
View file

@ -33,10 +33,12 @@ goog.require('Blockly.ConnectionDB');
goog.require('Blockly.constants');
goog.require('Blockly.DropDownDiv');
goog.require('Blockly.Events');
//goog.require('Blockly.HorizontalFlyout');
goog.require('Blockly.Options');
goog.require('Blockly.ScrollbarPair');
goog.require('Blockly.Touch');
goog.require('Blockly.Trashcan');
//goog.require('Blockly.VerticalFlyout');
goog.require('Blockly.Workspace');
goog.require('Blockly.Xml');
goog.require('Blockly.ZoomControls');
@ -409,7 +411,11 @@ Blockly.WorkspaceSvg.prototype.addFlyout_ = function() {
toolboxPosition: this.options.toolboxPosition
};
/** @type {Blockly.Flyout} */
this.flyout_ = new Blockly.Flyout(workspaceOptions);
if (this.horizontalLayout) {
this.flyout_ = new Blockly.HorizontalFlyout(workspaceOptions);
} else {
this.flyout_ = new Blockly.VerticalFlyout(workspaceOptions);
}
this.flyout_.autoClose = false;
var svgFlyout = this.flyout_.createDom();
this.svgGroup_.insertBefore(svgFlyout, this.svgBlockCanvas_);

371
msg/json/en.json
View file

@ -1,371 +0,0 @@
{
"@metadata": {
"author": "Ellen Spertus <ellen.spertus@gmail.com>",
"lastupdated": "2016-10-03 08:33:26.703803",
"locale": "en",
"messagedocumentation" : "qqq"
},
"VARIABLES_DEFAULT_NAME": "item",
"TODAY": "Today",
"DUPLICATE_BLOCK": "Duplicate",
"ADD_COMMENT": "Add Comment",
"REMOVE_COMMENT": "Remove Comment",
"EXTERNAL_INPUTS": "External Inputs",
"INLINE_INPUTS": "Inline Inputs",
"DELETE_BLOCK": "Delete Block",
"DELETE_X_BLOCKS": "Delete %1 Blocks",
"DELETE_ALL_BLOCKS": "Delete all %1 blocks?",
"CLEAN_UP": "Clean up Blocks",
"COLLAPSE_BLOCK": "Collapse Block",
"COLLAPSE_ALL": "Collapse Blocks",
"EXPAND_BLOCK": "Expand Block",
"EXPAND_ALL": "Expand Blocks",
"DISABLE_BLOCK": "Disable Block",
"ENABLE_BLOCK": "Enable Block",
"HELP": "Help",
"UNDO": "Undo",
"REDO": "Redo",
"CHANGE_VALUE_TITLE": "Change value:",
"RENAME_VARIABLE": "Rename variable...",
"RENAME_VARIABLE_TITLE": "Rename all '%1' variables to:",
"NEW_VARIABLE": "Create variable...",
"NEW_VARIABLE_TITLE": "New variable name:",
"VARIABLE_ALREADY_EXISTS": "A variable named '%1' already exists.",
"DELETE_VARIABLE_CONFIRMATION": "Delete %1 uses of the '%2' variable?",
"DELETE_VARIABLE": "Delete the '%1' variable",
"COLOUR_PICKER_HELPURL": "https://en.wikipedia.org/wiki/Color",
"COLOUR_PICKER_TOOLTIP": "Choose a colour from the palette.",
"COLOUR_RANDOM_HELPURL": "http://randomcolour.com",
"COLOUR_RANDOM_TITLE": "random colour",
"COLOUR_RANDOM_TOOLTIP": "Choose a colour at random.",
"COLOUR_RGB_HELPURL": "http://www.december.com/html/spec/colorper.html",
"COLOUR_RGB_TITLE": "colour with",
"COLOUR_RGB_RED": "red",
"COLOUR_RGB_GREEN": "green",
"COLOUR_RGB_BLUE": "blue",
"COLOUR_RGB_TOOLTIP": "Create a colour with the specified amount of red, green, and blue. All values must be between 0 and 100.",
"COLOUR_BLEND_HELPURL": "http://meyerweb.com/eric/tools/color-blend/",
"COLOUR_BLEND_TITLE": "blend",
"COLOUR_BLEND_COLOUR1": "colour 1",
"COLOUR_BLEND_COLOUR2": "colour 2",
"COLOUR_BLEND_RATIO": "ratio",
"COLOUR_BLEND_TOOLTIP": "Blends two colours together with a given ratio (0.0 - 1.0).",
"CONTROLS_REPEAT_HELPURL": "https://en.wikipedia.org/wiki/For_loop",
"CONTROLS_REPEAT_TITLE": "repeat %1 times",
"CONTROLS_REPEAT_INPUT_DO": "do",
"CONTROLS_REPEAT_TOOLTIP": "Do some statements several times.",
"CONTROLS_WHILEUNTIL_HELPURL": "https://github.com/google/blockly/wiki/Loops#repeat",
"CONTROLS_WHILEUNTIL_OPERATOR_WHILE": "repeat while",
"CONTROLS_WHILEUNTIL_OPERATOR_UNTIL": "repeat until",
"CONTROLS_WHILEUNTIL_TOOLTIP_WHILE": "While a value is true, then do some statements.",
"CONTROLS_WHILEUNTIL_TOOLTIP_UNTIL": "While a value is false, then do some statements.",
"CONTROLS_FOR_HELPURL": "https://github.com/google/blockly/wiki/Loops#count-with",
"CONTROLS_FOR_TOOLTIP": "Have the variable '%1' take on the values from the start number to the end number, counting by the specified interval, and do the specified blocks.",
"CONTROLS_FOR_TITLE": "count with %1 from %2 to %3 by %4",
"CONTROLS_FOREACH_HELPURL": "https://github.com/google/blockly/wiki/Loops#for-each",
"CONTROLS_FOREACH_TITLE": "for each item %1 in list %2",
"CONTROLS_FOREACH_TOOLTIP": "For each item in a list, set the variable '%1' to the item, and then do some statements.",
"CONTROLS_FLOW_STATEMENTS_HELPURL": "https://github.com/google/blockly/wiki/Loops#loop-termination-blocks",
"CONTROLS_FLOW_STATEMENTS_OPERATOR_BREAK": "break out of loop",
"CONTROLS_FLOW_STATEMENTS_OPERATOR_CONTINUE": "continue with next iteration of loop",
"CONTROLS_FLOW_STATEMENTS_TOOLTIP_BREAK": "Break out of the containing loop.",
"CONTROLS_FLOW_STATEMENTS_TOOLTIP_CONTINUE": "Skip the rest of this loop, and continue with the next iteration.",
"CONTROLS_FLOW_STATEMENTS_WARNING": "Warning: This block may only be used within a loop.",
"CONTROLS_IF_HELPURL": "https://github.com/google/blockly/wiki/IfElse",
"CONTROLS_IF_TOOLTIP_1": "If a value is true, then do some statements.",
"CONTROLS_IF_TOOLTIP_2": "If a value is true, then do the first block of statements. Otherwise, do the second block of statements.",
"CONTROLS_IF_TOOLTIP_3": "If the first value is true, then do the first block of statements. Otherwise, if the second value is true, do the second block of statements.",
"CONTROLS_IF_TOOLTIP_4": "If the first value is true, then do the first block of statements. Otherwise, if the second value is true, do the second block of statements. If none of the values are true, do the last block of statements.",
"CONTROLS_IF_MSG_IF": "if",
"CONTROLS_IF_MSG_ELSEIF": "else if",
"CONTROLS_IF_MSG_ELSE": "else",
"CONTROLS_IF_IF_TOOLTIP": "Add, remove, or reorder sections to reconfigure this if block.",
"CONTROLS_IF_ELSEIF_TOOLTIP": "Add a condition to the if block.",
"CONTROLS_IF_ELSE_TOOLTIP": "Add a final, catch-all condition to the if block.",
"LOGIC_COMPARE_HELPURL": "https://en.wikipedia.org/wiki/Inequality_(mathematics)",
"LOGIC_COMPARE_TOOLTIP_EQ": "Return true if both inputs equal each other.",
"LOGIC_COMPARE_TOOLTIP_NEQ": "Return true if both inputs are not equal to each other.",
"LOGIC_COMPARE_TOOLTIP_LT": "Return true if the first input is smaller than the second input.",
"LOGIC_COMPARE_TOOLTIP_LTE": "Return true if the first input is smaller than or equal to the second input.",
"LOGIC_COMPARE_TOOLTIP_GT": "Return true if the first input is greater than the second input.",
"LOGIC_COMPARE_TOOLTIP_GTE": "Return true if the first input is greater than or equal to the second input.",
"LOGIC_OPERATION_HELPURL": "https://github.com/google/blockly/wiki/Logic#logical-operations",
"LOGIC_OPERATION_TOOLTIP_AND": "Return true if both inputs are true.",
"LOGIC_OPERATION_AND": "and",
"LOGIC_OPERATION_TOOLTIP_OR": "Return true if at least one of the inputs is true.",
"LOGIC_OPERATION_OR": "or",
"LOGIC_NEGATE_HELPURL": "https://github.com/google/blockly/wiki/Logic#not",
"LOGIC_NEGATE_TITLE": "not %1",
"LOGIC_NEGATE_TOOLTIP": "Returns true if the input is false. Returns false if the input is true.",
"LOGIC_BOOLEAN_HELPURL": "https://github.com/google/blockly/wiki/Logic#values",
"LOGIC_BOOLEAN_TRUE": "true",
"LOGIC_BOOLEAN_FALSE": "false",
"LOGIC_BOOLEAN_TOOLTIP": "Returns either true or false.",
"LOGIC_NULL_HELPURL": "https://en.wikipedia.org/wiki/Nullable_type",
"LOGIC_NULL": "null",
"LOGIC_NULL_TOOLTIP": "Returns null.",
"LOGIC_TERNARY_HELPURL": "https://en.wikipedia.org/wiki/%3F:",
"LOGIC_TERNARY_CONDITION": "test",
"LOGIC_TERNARY_IF_TRUE": "if true",
"LOGIC_TERNARY_IF_FALSE": "if false",
"LOGIC_TERNARY_TOOLTIP": "Check the condition in 'test'. If the condition is true, returns the 'if true' value; otherwise returns the 'if false' value.",
"MATH_NUMBER_HELPURL": "https://en.wikipedia.org/wiki/Number",
"MATH_NUMBER_TOOLTIP": "A number.",
"MATH_ADDITION_SYMBOL": "+",
"MATH_SUBTRACTION_SYMBOL": "-",
"MATH_DIVISION_SYMBOL": "÷",
"MATH_MULTIPLICATION_SYMBOL": "×",
"MATH_POWER_SYMBOL": "^",
"MATH_TRIG_SIN": "sin",
"MATH_TRIG_COS": "cos",
"MATH_TRIG_TAN": "tan",
"MATH_TRIG_ASIN": "asin",
"MATH_TRIG_ACOS": "acos",
"MATH_TRIG_ATAN": "atan",
"MATH_ARITHMETIC_HELPURL": "https://en.wikipedia.org/wiki/Arithmetic",
"MATH_ARITHMETIC_TOOLTIP_ADD": "Return the sum of the two numbers.",
"MATH_ARITHMETIC_TOOLTIP_MINUS": "Return the difference of the two numbers.",
"MATH_ARITHMETIC_TOOLTIP_MULTIPLY": "Return the product of the two numbers.",
"MATH_ARITHMETIC_TOOLTIP_DIVIDE": "Return the quotient of the two numbers.",
"MATH_ARITHMETIC_TOOLTIP_POWER": "Return the first number raised to the power of the second number.",
"MATH_SINGLE_HELPURL": "https://en.wikipedia.org/wiki/Square_root",
"MATH_SINGLE_OP_ROOT": "square root",
"MATH_SINGLE_TOOLTIP_ROOT": "Return the square root of a number.",
"MATH_SINGLE_OP_ABSOLUTE": "absolute",
"MATH_SINGLE_TOOLTIP_ABS": "Return the absolute value of a number.",
"MATH_SINGLE_TOOLTIP_NEG": "Return the negation of a number.",
"MATH_SINGLE_TOOLTIP_LN": "Return the natural logarithm of a number.",
"MATH_SINGLE_TOOLTIP_LOG10": "Return the base 10 logarithm of a number.",
"MATH_SINGLE_TOOLTIP_EXP": "Return e to the power of a number.",
"MATH_SINGLE_TOOLTIP_POW10": "Return 10 to the power of a number.",
"MATH_TRIG_HELPURL": "https://en.wikipedia.org/wiki/Trigonometric_functions",
"MATH_TRIG_TOOLTIP_SIN": "Return the sine of a degree (not radian).",
"MATH_TRIG_TOOLTIP_COS": "Return the cosine of a degree (not radian).",
"MATH_TRIG_TOOLTIP_TAN": "Return the tangent of a degree (not radian).",
"MATH_TRIG_TOOLTIP_ASIN": "Return the arcsine of a number.",
"MATH_TRIG_TOOLTIP_ACOS": "Return the arccosine of a number.",
"MATH_TRIG_TOOLTIP_ATAN": "Return the arctangent of a number.",
"MATH_CONSTANT_HELPURL": "https://en.wikipedia.org/wiki/Mathematical_constant",
"MATH_CONSTANT_TOOLTIP": "Return one of the common constants: π (3.141…), e (2.718…), φ (1.618…), sqrt(2) (1.414…), sqrt(½) (0.707…), or ∞ (infinity).",
"MATH_IS_EVEN": "is even",
"MATH_IS_ODD": "is odd",
"MATH_IS_PRIME": "is prime",
"MATH_IS_WHOLE": "is whole",
"MATH_IS_POSITIVE": "is positive",
"MATH_IS_NEGATIVE": "is negative",
"MATH_IS_DIVISIBLE_BY": "is divisible by",
"MATH_IS_TOOLTIP": "Check if a number is an even, odd, prime, whole, positive, negative, or if it is divisible by certain number. Returns true or false.",
"MATH_CHANGE_HELPURL": "https://en.wikipedia.org/wiki/Programming_idiom#Incrementing_a_counter",
"MATH_CHANGE_TITLE": "change %1 by %2",
"MATH_CHANGE_TOOLTIP": "Add a number to variable '%1'.",
"MATH_ROUND_HELPURL": "https://en.wikipedia.org/wiki/Rounding",
"MATH_ROUND_TOOLTIP": "Round a number up or down.",
"MATH_ROUND_OPERATOR_ROUND": "round",
"MATH_ROUND_OPERATOR_ROUNDUP": "round up",
"MATH_ROUND_OPERATOR_ROUNDDOWN": "round down",
"MATH_ONLIST_HELPURL": "",
"MATH_ONLIST_OPERATOR_SUM": "sum of list",
"MATH_ONLIST_TOOLTIP_SUM": "Return the sum of all the numbers in the list.",
"MATH_ONLIST_OPERATOR_MIN": "min of list",
"MATH_ONLIST_TOOLTIP_MIN": "Return the smallest number in the list.",
"MATH_ONLIST_OPERATOR_MAX": "max of list",
"MATH_ONLIST_TOOLTIP_MAX": "Return the largest number in the list.",
"MATH_ONLIST_OPERATOR_AVERAGE": "average of list",
"MATH_ONLIST_TOOLTIP_AVERAGE": "Return the average (arithmetic mean) of the numeric values in the list.",
"MATH_ONLIST_OPERATOR_MEDIAN": "median of list",
"MATH_ONLIST_TOOLTIP_MEDIAN": "Return the median number in the list.",
"MATH_ONLIST_OPERATOR_MODE": "modes of list",
"MATH_ONLIST_TOOLTIP_MODE": "Return a list of the most common item(s) in the list.",
"MATH_ONLIST_OPERATOR_STD_DEV": "standard deviation of list",
"MATH_ONLIST_TOOLTIP_STD_DEV": "Return the standard deviation of the list.",
"MATH_ONLIST_OPERATOR_RANDOM": "random item of list",
"MATH_ONLIST_TOOLTIP_RANDOM": "Return a random element from the list.",
"MATH_MODULO_HELPURL": "https://en.wikipedia.org/wiki/Modulo_operation",
"MATH_MODULO_TITLE": "remainder of %1 ÷ %2",
"MATH_MODULO_TOOLTIP": "Return the remainder from dividing the two numbers.",
"MATH_CONSTRAIN_HELPURL": "https://en.wikipedia.org/wiki/Clamping_%28graphics%29",
"MATH_CONSTRAIN_TITLE": "constrain %1 low %2 high %3",
"MATH_CONSTRAIN_TOOLTIP": "Constrain a number to be between the specified limits (inclusive).",
"MATH_RANDOM_INT_HELPURL": "https://en.wikipedia.org/wiki/Random_number_generation",
"MATH_RANDOM_INT_TITLE": "random integer from %1 to %2",
"MATH_RANDOM_INT_TOOLTIP": "Return a random integer between the two specified limits, inclusive.",
"MATH_RANDOM_FLOAT_HELPURL": "https://en.wikipedia.org/wiki/Random_number_generation",
"MATH_RANDOM_FLOAT_TITLE_RANDOM": "random fraction",
"MATH_RANDOM_FLOAT_TOOLTIP": "Return a random fraction between 0.0 (inclusive) and 1.0 (exclusive).",
"TEXT_TEXT_HELPURL": "https://en.wikipedia.org/wiki/String_(computer_science)",
"TEXT_TEXT_TOOLTIP": "A letter, word, or line of text.",
"TEXT_JOIN_HELPURL": "https://github.com/google/blockly/wiki/Text#text-creation",
"TEXT_JOIN_TITLE_CREATEWITH": "create text with",
"TEXT_JOIN_TOOLTIP": "Create a piece of text by joining together any number of items.",
"TEXT_CREATE_JOIN_TITLE_JOIN": "join",
"TEXT_CREATE_JOIN_TOOLTIP": "Add, remove, or reorder sections to reconfigure this text block.",
"TEXT_CREATE_JOIN_ITEM_TOOLTIP": "Add an item to the text.",
"TEXT_APPEND_HELPURL": "https://github.com/google/blockly/wiki/Text#text-modification",
"TEXT_APPEND_TO": "to",
"TEXT_APPEND_APPENDTEXT": "append text",
"TEXT_APPEND_TOOLTIP": "Append some text to variable '%1'.",
"TEXT_LENGTH_HELPURL": "https://github.com/google/blockly/wiki/Text#text-modification",
"TEXT_LENGTH_TITLE": "length of %1",
"TEXT_LENGTH_TOOLTIP": "Returns the number of letters (including spaces) in the provided text.",
"TEXT_ISEMPTY_HELPURL": "https://github.com/google/blockly/wiki/Text#checking-for-empty-text",
"TEXT_ISEMPTY_TITLE": "%1 is empty",
"TEXT_ISEMPTY_TOOLTIP": "Returns true if the provided text is empty.",
"TEXT_INDEXOF_HELPURL": "https://github.com/google/blockly/wiki/Text#finding-text",
"TEXT_INDEXOF_TOOLTIP": "Returns the index of the first/last occurrence of the first text in the second text. Returns %1 if text is not found.",
"TEXT_INDEXOF_INPUT_INTEXT": "in text",
"TEXT_INDEXOF_OPERATOR_FIRST": "find first occurrence of text",
"TEXT_INDEXOF_OPERATOR_LAST": "find last occurrence of text",
"TEXT_INDEXOF_TAIL": "",
"TEXT_CHARAT_HELPURL": "https://github.com/google/blockly/wiki/Text#extracting-text",
"TEXT_CHARAT_INPUT_INTEXT": "in text",
"TEXT_CHARAT_FROM_START": "get letter #",
"TEXT_CHARAT_FROM_END": "get letter # from end",
"TEXT_CHARAT_FIRST": "get first letter",
"TEXT_CHARAT_LAST": "get last letter",
"TEXT_CHARAT_RANDOM": "get random letter",
"TEXT_CHARAT_TAIL": "",
"TEXT_CHARAT_TOOLTIP": "Returns the letter at the specified position.",
"TEXT_GET_SUBSTRING_TOOLTIP": "Returns a specified portion of the text.",
"TEXT_GET_SUBSTRING_HELPURL": "https://github.com/google/blockly/wiki/Text#extracting-a-region-of-text",
"TEXT_GET_SUBSTRING_INPUT_IN_TEXT": "in text",
"TEXT_GET_SUBSTRING_START_FROM_START": "get substring from letter #",
"TEXT_GET_SUBSTRING_START_FROM_END": "get substring from letter # from end",
"TEXT_GET_SUBSTRING_START_FIRST": "get substring from first letter",
"TEXT_GET_SUBSTRING_END_FROM_START": "to letter #",
"TEXT_GET_SUBSTRING_END_FROM_END": "to letter # from end",
"TEXT_GET_SUBSTRING_END_LAST": "to last letter",
"TEXT_GET_SUBSTRING_TAIL": "",
"TEXT_CHANGECASE_HELPURL": "https://github.com/google/blockly/wiki/Text#adjusting-text-case",
"TEXT_CHANGECASE_TOOLTIP": "Return a copy of the text in a different case.",
"TEXT_CHANGECASE_OPERATOR_UPPERCASE": "to UPPER CASE",
"TEXT_CHANGECASE_OPERATOR_LOWERCASE": "to lower case",
"TEXT_CHANGECASE_OPERATOR_TITLECASE": "to Title Case",
"TEXT_TRIM_HELPURL": "https://github.com/google/blockly/wiki/Text#trimming-removing-spaces",
"TEXT_TRIM_TOOLTIP": "Return a copy of the text with spaces removed from one or both ends.",
"TEXT_TRIM_OPERATOR_BOTH": "trim spaces from both sides of",
"TEXT_TRIM_OPERATOR_LEFT": "trim spaces from left side of",
"TEXT_TRIM_OPERATOR_RIGHT": "trim spaces from right side of",
"TEXT_PRINT_HELPURL": "https://github.com/google/blockly/wiki/Text#printing-text",
"TEXT_PRINT_TITLE": "print %1",
"TEXT_PRINT_TOOLTIP": "Print the specified text, number or other value.",
"TEXT_PROMPT_HELPURL": "https://github.com/google/blockly/wiki/Text#getting-input-from-the-user",
"TEXT_PROMPT_TYPE_TEXT": "prompt for text with message",
"TEXT_PROMPT_TYPE_NUMBER": "prompt for number with message",
"TEXT_PROMPT_TOOLTIP_NUMBER": "Prompt for user for a number.",
"TEXT_PROMPT_TOOLTIP_TEXT": "Prompt for user for some text.",
"LISTS_CREATE_EMPTY_HELPURL": "https://github.com/google/blockly/wiki/Lists#create-empty-list",
"LISTS_CREATE_EMPTY_TITLE": "create empty list",
"LISTS_CREATE_EMPTY_TOOLTIP": "Returns a list, of length 0, containing no data records",
"LISTS_CREATE_WITH_HELPURL": "https://github.com/google/blockly/wiki/Lists#create-list-with",
"LISTS_CREATE_WITH_TOOLTIP": "Create a list with any number of items.",
"LISTS_CREATE_WITH_INPUT_WITH": "create list with",
"LISTS_CREATE_WITH_CONTAINER_TITLE_ADD": "list",
"LISTS_CREATE_WITH_CONTAINER_TOOLTIP": "Add, remove, or reorder sections to reconfigure this list block.",
"LISTS_CREATE_WITH_ITEM_TOOLTIP": "Add an item to the list.",
"LISTS_REPEAT_HELPURL": "https://github.com/google/blockly/wiki/Lists#create-list-with",
"LISTS_REPEAT_TOOLTIP": "Creates a list consisting of the given value repeated the specified number of times.",
"LISTS_REPEAT_TITLE": "create list with item %1 repeated %2 times",
"LISTS_LENGTH_HELPURL": "https://github.com/google/blockly/wiki/Lists#length-of",
"LISTS_LENGTH_TITLE": "length of %1",
"LISTS_LENGTH_TOOLTIP": "Returns the length of a list.",
"LISTS_ISEMPTY_HELPURL": "https://github.com/google/blockly/wiki/Lists#is-empty",
"LISTS_ISEMPTY_TITLE": "%1 is empty",
"LISTS_ISEMPTY_TOOLTIP": "Returns true if the list is empty.",
"LISTS_INLIST": "in list",
"LISTS_INDEX_OF_HELPURL": "https://github.com/google/blockly/wiki/Lists#getting-items-from-a-list",
"LISTS_INDEX_OF_FIRST": "find first occurrence of item",
"LISTS_INDEX_OF_LAST": "find last occurrence of item",
"LISTS_INDEX_OF_TOOLTIP": "Returns the index of the first/last occurrence of the item in the list. Returns %1 if item is not found.",
"LISTS_GET_INDEX_GET": "get",
"LISTS_GET_INDEX_GET_REMOVE": "get and remove",
"LISTS_GET_INDEX_REMOVE": "remove",
"LISTS_GET_INDEX_FROM_START": "#",
"LISTS_GET_INDEX_FROM_END": "# from end",
"LISTS_GET_INDEX_FIRST": "first",
"LISTS_GET_INDEX_LAST": "last",
"LISTS_GET_INDEX_RANDOM": "random",
"LISTS_GET_INDEX_TAIL": "",
"LISTS_INDEX_FROM_START_TOOLTIP": "%1 is the first item.",
"LISTS_INDEX_FROM_END_TOOLTIP": "%1 is the last item.",
"LISTS_GET_INDEX_TOOLTIP_GET_FROM": "Returns the item at the specified position in a list.",
"LISTS_GET_INDEX_TOOLTIP_GET_FIRST": "Returns the first item in a list.",
"LISTS_GET_INDEX_TOOLTIP_GET_LAST": "Returns the last item in a list.",
"LISTS_GET_INDEX_TOOLTIP_GET_RANDOM": "Returns a random item in a list.",
"LISTS_GET_INDEX_TOOLTIP_GET_REMOVE_FROM": "Removes and returns the item at the specified position in a list.",
"LISTS_GET_INDEX_TOOLTIP_GET_REMOVE_FIRST": "Removes and returns the first item in a list.",
"LISTS_GET_INDEX_TOOLTIP_GET_REMOVE_LAST": "Removes and returns the last item in a list.",
"LISTS_GET_INDEX_TOOLTIP_GET_REMOVE_RANDOM": "Removes and returns a random item in a list.",
"LISTS_GET_INDEX_TOOLTIP_REMOVE_FROM": "Removes the item at the specified position in a list.",
"LISTS_GET_INDEX_TOOLTIP_REMOVE_FIRST": "Removes the first item in a list.",
"LISTS_GET_INDEX_TOOLTIP_REMOVE_LAST": "Removes the last item in a list.",
"LISTS_GET_INDEX_TOOLTIP_REMOVE_RANDOM": "Removes a random item in a list.",
"LISTS_SET_INDEX_HELPURL": "https://github.com/google/blockly/wiki/Lists#in-list--set",
"LISTS_SET_INDEX_SET": "set",
"LISTS_SET_INDEX_INSERT": "insert at",
"LISTS_SET_INDEX_INPUT_TO": "as",
"LISTS_SET_INDEX_TOOLTIP_SET_FROM": "Sets the item at the specified position in a list.",
"LISTS_SET_INDEX_TOOLTIP_SET_FIRST": "Sets the first item in a list.",
"LISTS_SET_INDEX_TOOLTIP_SET_LAST": "Sets the last item in a list.",
"LISTS_SET_INDEX_TOOLTIP_SET_RANDOM": "Sets a random item in a list.",
"LISTS_SET_INDEX_TOOLTIP_INSERT_FROM": "Inserts the item at the specified position in a list.",
"LISTS_SET_INDEX_TOOLTIP_INSERT_FIRST": "Inserts the item at the start of a list.",
"LISTS_SET_INDEX_TOOLTIP_INSERT_LAST": "Append the item to the end of a list.",
"LISTS_SET_INDEX_TOOLTIP_INSERT_RANDOM": "Inserts the item randomly in a list.",
"LISTS_GET_SUBLIST_HELPURL": "https://github.com/google/blockly/wiki/Lists#getting-a-sublist",
"LISTS_GET_SUBLIST_START_FROM_START": "get sub-list from #",
"LISTS_GET_SUBLIST_START_FROM_END": "get sub-list from # from end",
"LISTS_GET_SUBLIST_START_FIRST": "get sub-list from first",
"LISTS_GET_SUBLIST_END_FROM_START": "to #",
"LISTS_GET_SUBLIST_END_FROM_END": "to # from end",
"LISTS_GET_SUBLIST_END_LAST": "to last",
"LISTS_GET_SUBLIST_TAIL": "",
"LISTS_GET_SUBLIST_TOOLTIP": "Creates a copy of the specified portion of a list.",
"LISTS_SORT_HELPURL": "https://github.com/google/blockly/wiki/Lists#sorting-a-list",
"LISTS_SORT_TITLE": "sort %1 %2 %3",
"LISTS_SORT_TOOLTIP": "Sort a copy of a list.",
"LISTS_SORT_ORDER_ASCENDING": "ascending",
"LISTS_SORT_ORDER_DESCENDING": "descending",
"LISTS_SORT_TYPE_NUMERIC": "numeric",
"LISTS_SORT_TYPE_TEXT": "alphabetic",
"LISTS_SORT_TYPE_IGNORECASE": "alphabetic, ignore case",
"LISTS_SPLIT_HELPURL": "https://github.com/google/blockly/wiki/Lists#splitting-strings-and-joining-lists",
"LISTS_SPLIT_LIST_FROM_TEXT": "make list from text",
"LISTS_SPLIT_TEXT_FROM_LIST": "make text from list",
"LISTS_SPLIT_WITH_DELIMITER": "with delimiter",
"LISTS_SPLIT_TOOLTIP_SPLIT": "Split text into a list of texts, breaking at each delimiter.",
"LISTS_SPLIT_TOOLTIP_JOIN": "Join a list of texts into one text, separated by a delimiter.",
"ORDINAL_NUMBER_SUFFIX": "",
"VARIABLES_GET_HELPURL": "https://github.com/google/blockly/wiki/Variables#get",
"VARIABLES_GET_TOOLTIP": "Returns the value of this variable.",
"VARIABLES_GET_CREATE_SET": "Create 'set %1'",
"VARIABLES_SET_HELPURL": "https://github.com/google/blockly/wiki/Variables#set",
"VARIABLES_SET": "set %1 to %2",
"VARIABLES_SET_TOOLTIP": "Sets this variable to be equal to the input.",
"VARIABLES_SET_CREATE_GET": "Create 'get %1'",
"PROCEDURES_DEFNORETURN_HELPURL": "https://en.wikipedia.org/wiki/Procedure_%28computer_science%29",
"PROCEDURES_DEFNORETURN_TITLE": "to",
"PROCEDURES_DEFNORETURN_PROCEDURE": "do something",
"PROCEDURES_BEFORE_PARAMS": "with:",
"PROCEDURES_CALL_BEFORE_PARAMS": "with:",
"PROCEDURES_DEFNORETURN_DO": "",
"PROCEDURES_DEFNORETURN_TOOLTIP": "Creates a function with no output.",
"PROCEDURES_DEFNORETURN_COMMENT": "Describe this function...",
"PROCEDURES_DEFRETURN_HELPURL": "https://en.wikipedia.org/wiki/Procedure_%28computer_science%29",
"PROCEDURES_DEFRETURN_RETURN": "return",
"PROCEDURES_DEFRETURN_TOOLTIP": "Creates a function with an output.",
"PROCEDURES_ALLOW_STATEMENTS": "allow statements",
"PROCEDURES_DEF_DUPLICATE_WARNING": "Warning: This function has duplicate parameters.",
"PROCEDURES_CALLNORETURN_HELPURL": "https://en.wikipedia.org/wiki/Procedure_%28computer_science%29",
"PROCEDURES_CALLNORETURN_TOOLTIP": "Run the user-defined function '%1'.",
"PROCEDURES_CALLRETURN_HELPURL": "https://en.wikipedia.org/wiki/Procedure_%28computer_science%29",
"PROCEDURES_CALLRETURN_TOOLTIP": "Run the user-defined function '%1' and use its output.",
"PROCEDURES_MUTATORCONTAINER_TITLE": "inputs",
"PROCEDURES_MUTATORCONTAINER_TOOLTIP": "Add, remove, or reorder inputs to this function.",
"PROCEDURES_MUTATORARG_TITLE": "input name:",
"PROCEDURES_MUTATORARG_TOOLTIP": "Add an input to the function.",
"PROCEDURES_HIGHLIGHT_DEF": "Highlight function definition",
"PROCEDURES_CREATE_DO": "Create '%1'",
"PROCEDURES_IFRETURN_TOOLTIP": "If a value is true, then return a second value.",
"PROCEDURES_IFRETURN_HELPURL": "http://c2.com/cgi/wiki?GuardClause",
"PROCEDURES_IFRETURN_WARNING": "Warning: This block may be used only within a function definition."
}