2013-10-30 14:46:03 -07:00
|
|
|
/**
|
2014-01-28 03:00:09 -08:00
|
|
|
* @license
|
2013-10-30 14:46:03 -07:00
|
|
|
* Visual Blocks Editor
|
|
|
|
*
|
|
|
|
* Copyright 2011 Google Inc.
|
2014-10-07 13:09:55 -07:00
|
|
|
* https://developers.google.com/blockly/
|
2013-10-30 14:46:03 -07:00
|
|
|
*
|
|
|
|
* 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.Flyout');
|
|
|
|
|
|
|
|
goog.require('Blockly.Block');
|
|
|
|
goog.require('Blockly.Comment');
|
2016-04-20 16:44:13 -07:00
|
|
|
goog.require('Blockly.Events');
|
2014-12-23 11:22:02 -08:00
|
|
|
goog.require('Blockly.WorkspaceSvg');
|
2015-02-06 15:27:25 -08:00
|
|
|
goog.require('goog.dom');
|
|
|
|
goog.require('goog.events');
|
2014-11-28 21:43:39 -08:00
|
|
|
goog.require('goog.math.Rect');
|
2015-01-22 15:58:10 -08:00
|
|
|
goog.require('goog.userAgent');
|
2013-10-30 14:46:03 -07:00
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Class for a flyout.
|
2015-04-28 13:51:25 -07:00
|
|
|
* @param {!Object} workspaceOptions Dictionary of options for the workspace.
|
2013-10-30 14:46:03 -07:00
|
|
|
* @constructor
|
|
|
|
*/
|
2015-04-28 13:51:25 -07:00
|
|
|
Blockly.Flyout = function(workspaceOptions) {
|
2016-01-08 13:03:22 -08:00
|
|
|
workspaceOptions.getMetrics = this.getMetrics_.bind(this);
|
|
|
|
workspaceOptions.setMetrics = this.setMetrics_.bind(this);
|
2013-10-30 14:46:03 -07:00
|
|
|
/**
|
|
|
|
* @type {!Blockly.Workspace}
|
|
|
|
* @private
|
|
|
|
*/
|
2015-04-28 13:51:25 -07:00
|
|
|
this.workspace_ = new Blockly.WorkspaceSvg(workspaceOptions);
|
2013-10-30 14:46:03 -07:00
|
|
|
this.workspace_.isFlyout = true;
|
|
|
|
|
2015-04-28 13:51:25 -07:00
|
|
|
/**
|
|
|
|
* Is RTL vs LTR.
|
|
|
|
* @type {boolean}
|
|
|
|
*/
|
|
|
|
this.RTL = !!workspaceOptions.RTL;
|
|
|
|
|
2016-03-17 15:46:22 -07:00
|
|
|
/**
|
|
|
|
* Flyout should be laid out horizontally vs vertically.
|
|
|
|
* @type {boolean}
|
2016-04-08 15:34:08 -07:00
|
|
|
* @private
|
2016-03-17 15:46:22 -07:00
|
|
|
*/
|
|
|
|
this.horizontalLayout_ = workspaceOptions.horizontalLayout;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Position of the toolbox and flyout relative to the workspace.
|
|
|
|
* @type {number}
|
2016-04-08 15:34:08 -07:00
|
|
|
* @private
|
2016-03-17 15:46:22 -07:00
|
|
|
*/
|
|
|
|
this.toolboxPosition_ = workspaceOptions.toolboxPosition;
|
|
|
|
|
2013-10-30 14:46:03 -07:00
|
|
|
/**
|
2015-08-20 15:46:44 -07:00
|
|
|
* Opaque data that can be passed to Blockly.unbindEvent_.
|
2015-09-12 19:31:22 -07:00
|
|
|
* @type {!Array.<!Array>}
|
2013-10-30 14:46:03 -07:00
|
|
|
* @private
|
|
|
|
*/
|
2014-09-08 14:26:52 -07:00
|
|
|
this.eventWrappers_ = [];
|
2013-10-30 14:46:03 -07:00
|
|
|
|
|
|
|
/**
|
|
|
|
* List of background buttons that lurk behind each block to catch clicks
|
|
|
|
* landing in the blocks' lakes and bays.
|
|
|
|
* @type {!Array.<!Element>}
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
this.buttons_ = [];
|
|
|
|
|
|
|
|
/**
|
|
|
|
* List of event listeners.
|
|
|
|
* @type {!Array.<!Array>}
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
this.listeners_ = [];
|
2016-02-02 19:53:52 -08:00
|
|
|
|
|
|
|
/**
|
|
|
|
* List of blocks that should always be disabled.
|
|
|
|
* @type {!Array.<!Blockly.Block>}
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
this.permanentlyDisabled_ = [];
|
2013-10-30 14:46:03 -07:00
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 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 = 8;
|
|
|
|
|
2016-04-18 17:29:48 -07:00
|
|
|
/**
|
|
|
|
* Margin around the edges of the blocks in the flyout.
|
|
|
|
* @type {number}
|
|
|
|
* @const
|
|
|
|
*/
|
|
|
|
Blockly.Flyout.prototype.MARGIN = Blockly.Flyout.prototype.CORNER_RADIUS;
|
|
|
|
|
2015-08-19 17:21:05 -07:00
|
|
|
/**
|
|
|
|
* Top/bottom padding between scrollbar and edge of flyout background.
|
|
|
|
* @type {number}
|
|
|
|
* @const
|
|
|
|
*/
|
|
|
|
Blockly.Flyout.prototype.SCROLLBAR_PADDING = 2;
|
2013-10-30 14:46:03 -07:00
|
|
|
|
2015-09-12 19:31:22 -07:00
|
|
|
/**
|
|
|
|
* Width of flyout.
|
|
|
|
* @type {number}
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
Blockly.Flyout.prototype.width_ = 0;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Height of flyout.
|
|
|
|
* @type {number}
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
Blockly.Flyout.prototype.height_ = 0;
|
|
|
|
|
2013-10-30 14:46:03 -07:00
|
|
|
/**
|
|
|
|
* 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"/>
|
2015-07-14 23:13:09 -07:00
|
|
|
<g class="blocklyFlyout"></g>
|
2013-10-30 14:46:03 -07:00
|
|
|
</g>
|
|
|
|
*/
|
2015-07-14 23:13:09 -07:00
|
|
|
this.svgGroup_ = Blockly.createSvgElement('g',
|
|
|
|
{'class': 'blocklyFlyout'}, null);
|
2013-10-30 14:46:03 -07:00
|
|
|
this.svgBackground_ = Blockly.createSvgElement('path',
|
|
|
|
{'class': 'blocklyFlyoutBackground'}, this.svgGroup_);
|
|
|
|
this.svgGroup_.appendChild(this.workspace_.createDom());
|
|
|
|
return this.svgGroup_;
|
|
|
|
};
|
|
|
|
|
2015-04-28 13:51:25 -07:00
|
|
|
/**
|
|
|
|
* Initializes the flyout.
|
2015-08-19 17:21:05 -07:00
|
|
|
* @param {!Blockly.Workspace} targetWorkspace The workspace in which to create
|
|
|
|
* new blocks.
|
2015-04-28 13:51:25 -07:00
|
|
|
*/
|
2015-08-19 17:21:05 -07:00
|
|
|
Blockly.Flyout.prototype.init = function(targetWorkspace) {
|
|
|
|
this.targetWorkspace_ = targetWorkspace;
|
|
|
|
this.workspace_.targetWorkspace = targetWorkspace;
|
2015-04-28 13:51:25 -07:00
|
|
|
// Add scrollbar.
|
2016-03-17 15:46:22 -07:00
|
|
|
this.scrollbar_ = new Blockly.Scrollbar(this.workspace_,
|
|
|
|
this.horizontalLayout_, false);
|
2015-04-28 13:51:25 -07:00
|
|
|
|
|
|
|
this.hide();
|
|
|
|
|
2015-08-20 15:46:44 -07:00
|
|
|
Array.prototype.push.apply(this.eventWrappers_,
|
|
|
|
Blockly.bindEvent_(this.svgGroup_, 'wheel', this, this.wheel_));
|
2015-10-21 15:21:51 -07:00
|
|
|
if (!this.autoClose) {
|
2016-02-11 21:40:33 -08:00
|
|
|
this.filterWrapper_ = this.filterForCapacity_.bind(this);
|
|
|
|
this.targetWorkspace_.addChangeListener(this.filterWrapper_);
|
2015-10-21 15:21:51 -07:00
|
|
|
}
|
2015-04-28 13:51:25 -07:00
|
|
|
// Dragging the flyout up and down.
|
2015-08-20 15:46:44 -07:00
|
|
|
Array.prototype.push.apply(this.eventWrappers_,
|
|
|
|
Blockly.bindEvent_(this.svgGroup_, 'mousedown', this, this.onMouseDown_));
|
2015-04-28 13:51:25 -07:00
|
|
|
};
|
|
|
|
|
2013-10-30 14:46:03 -07:00
|
|
|
/**
|
|
|
|
* Dispose of this flyout.
|
|
|
|
* Unlink from all DOM elements to prevent memory leaks.
|
|
|
|
*/
|
|
|
|
Blockly.Flyout.prototype.dispose = function() {
|
|
|
|
this.hide();
|
2014-09-08 14:26:52 -07:00
|
|
|
Blockly.unbindEvent_(this.eventWrappers_);
|
2016-02-11 21:40:33 -08:00
|
|
|
if (this.filterWrapper_) {
|
|
|
|
this.targetWorkspace_.removeChangeListener(this.filterWrapper_);
|
|
|
|
this.filterWrapper_ = null;
|
|
|
|
}
|
2013-10-30 14:46:03 -07:00
|
|
|
if (this.scrollbar_) {
|
|
|
|
this.scrollbar_.dispose();
|
|
|
|
this.scrollbar_ = null;
|
|
|
|
}
|
2015-08-20 15:46:44 -07:00
|
|
|
if (this.workspace_) {
|
|
|
|
this.workspace_.targetWorkspace = null;
|
|
|
|
this.workspace_.dispose();
|
|
|
|
this.workspace_ = null;
|
|
|
|
}
|
2013-10-30 14:46:03 -07:00
|
|
|
if (this.svgGroup_) {
|
|
|
|
goog.dom.removeNode(this.svgGroup_);
|
|
|
|
this.svgGroup_ = null;
|
|
|
|
}
|
|
|
|
this.svgBackground_ = null;
|
|
|
|
this.targetWorkspace_ = null;
|
|
|
|
};
|
|
|
|
|
2016-04-13 15:30:11 -07:00
|
|
|
/**
|
|
|
|
* Get the width of the flyout.
|
2016-05-13 15:30:47 -07:00
|
|
|
* @return {number} The width of the flyout.
|
2016-04-13 15:30:11 -07:00
|
|
|
*/
|
|
|
|
Blockly.Flyout.prototype.getWidth = function() {
|
|
|
|
return this.width_;
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Get the height of the flyout.
|
2016-05-13 15:30:47 -07:00
|
|
|
* @return {number} The width of the flyout.
|
2016-04-13 15:30:11 -07:00
|
|
|
*/
|
|
|
|
Blockly.Flyout.prototype.getHeight = function() {
|
|
|
|
return this.height_;
|
|
|
|
};
|
|
|
|
|
2013-10-30 14:46:03 -07:00
|
|
|
/**
|
|
|
|
* 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,
|
2016-03-17 15:46:22 -07:00
|
|
|
* .contentWidth: Width of the contents,
|
2013-10-30 14:46:03 -07:00
|
|
|
* .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.
|
2016-03-17 15:46:22 -07:00
|
|
|
* .viewLeft: Offset of the left edge of visible rectangle from parent,
|
|
|
|
* .contentLeft: Offset of the left-most content from the x=0 coordinate,
|
2013-10-30 14:46:03 -07:00
|
|
|
* .absoluteLeft: Left-edge of view.
|
|
|
|
* @return {Object} Contains size and position metrics of the flyout.
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
Blockly.Flyout.prototype.getMetrics_ = function() {
|
|
|
|
if (!this.isVisible()) {
|
|
|
|
// Flyout is hidden.
|
|
|
|
return null;
|
|
|
|
}
|
2016-03-17 15:46:22 -07:00
|
|
|
|
2013-10-30 14:46:03 -07:00
|
|
|
try {
|
|
|
|
var optionBox = this.workspace_.getCanvas().getBBox();
|
|
|
|
} catch (e) {
|
|
|
|
// Firefox has trouble with hidden elements (Bug 528969).
|
2016-04-18 17:29:48 -07:00
|
|
|
var optionBox = {height: 0, y: 0, width: 0, x: 0};
|
2013-10-30 14:46:03 -07:00
|
|
|
}
|
2016-03-17 15:46:22 -07:00
|
|
|
|
2016-04-13 15:30:11 -07:00
|
|
|
var absoluteTop = this.SCROLLBAR_PADDING;
|
2016-04-26 15:10:49 -07:00
|
|
|
var absoluteLeft = this.SCROLLBAR_PADDING;
|
2016-03-17 15:46:22 -07:00
|
|
|
if (this.horizontalLayout_) {
|
|
|
|
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_BOTTOM) {
|
|
|
|
absoluteTop = 0;
|
|
|
|
}
|
|
|
|
var viewHeight = this.height_;
|
2016-03-31 13:05:21 -07:00
|
|
|
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_TOP) {
|
2016-04-18 17:29:48 -07:00
|
|
|
viewHeight += this.MARGIN - this.SCROLLBAR_PADDING;
|
2016-03-31 13:05:21 -07:00
|
|
|
}
|
2016-03-17 15:46:22 -07:00
|
|
|
var viewWidth = this.width_ - 2 * this.SCROLLBAR_PADDING;
|
|
|
|
} else {
|
2016-04-26 15:10:49 -07:00
|
|
|
absoluteLeft = 0;
|
2016-03-17 15:46:22 -07:00
|
|
|
var viewHeight = this.height_ - 2 * this.SCROLLBAR_PADDING;
|
|
|
|
var viewWidth = this.width_;
|
2016-03-31 13:05:21 -07:00
|
|
|
if (!this.RTL) {
|
|
|
|
viewWidth -= this.SCROLLBAR_PADDING;
|
|
|
|
}
|
2016-03-17 15:46:22 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
var metrics = {
|
2013-10-30 14:46:03 -07:00
|
|
|
viewHeight: viewHeight,
|
|
|
|
viewWidth: viewWidth,
|
2016-04-27 10:31:01 -07:00
|
|
|
contentHeight: (optionBox.height + 2 * this.MARGIN) * this.workspace_.scale,
|
2016-04-18 17:29:48 -07:00
|
|
|
contentWidth: (optionBox.width + 2 * this.MARGIN) * this.workspace_.scale,
|
2013-10-30 14:46:03 -07:00
|
|
|
viewTop: -this.workspace_.scrollY,
|
2016-03-17 15:46:22 -07:00
|
|
|
viewLeft: -this.workspace_.scrollX,
|
2016-04-27 10:31:01 -07:00
|
|
|
contentTop: 0, // TODO: #349
|
|
|
|
contentLeft: 0, // TODO: #349
|
2016-03-17 15:46:22 -07:00
|
|
|
absoluteTop: absoluteTop,
|
2016-04-26 15:10:49 -07:00
|
|
|
absoluteLeft: absoluteLeft
|
2013-10-30 14:46:03 -07:00
|
|
|
};
|
2016-03-17 15:46:22 -07:00
|
|
|
return metrics;
|
2013-10-30 14:46:03 -07:00
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
2016-03-17 15:46:22 -07:00
|
|
|
* 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.
|
2013-10-30 14:46:03 -07:00
|
|
|
* @private
|
|
|
|
*/
|
2016-03-17 15:46:22 -07:00
|
|
|
Blockly.Flyout.prototype.setMetrics_ = function(xyRatio) {
|
2013-10-30 14:46:03 -07:00
|
|
|
var metrics = this.getMetrics_();
|
2013-11-25 17:33:36 -08:00
|
|
|
// This is a fix to an apparent race condition.
|
|
|
|
if (!metrics) {
|
|
|
|
return;
|
|
|
|
}
|
2016-03-17 15:46:22 -07:00
|
|
|
if (!this.horizontalLayout_ && goog.isNumber(xyRatio.y)) {
|
2016-04-26 18:16:26 -07:00
|
|
|
this.workspace_.scrollY = -metrics.contentHeight * xyRatio.y;
|
2016-03-17 15:46:22 -07:00
|
|
|
} else if (this.horizontalLayout_ && goog.isNumber(xyRatio.x)) {
|
2016-04-26 18:16:26 -07:00
|
|
|
this.workspace_.scrollX = -metrics.contentWidth * xyRatio.x;
|
2013-10-30 14:46:03 -07:00
|
|
|
}
|
2016-04-18 17:29:48 -07:00
|
|
|
|
|
|
|
this.workspace_.translate(this.workspace_.scrollX + metrics.absoluteLeft,
|
2016-03-17 15:46:22 -07:00
|
|
|
this.workspace_.scrollY + metrics.absoluteTop);
|
2013-10-30 14:46:03 -07:00
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
2016-04-14 12:50:10 -07:00
|
|
|
* Move the flyout to the edge of the workspace.
|
2013-10-30 14:46:03 -07:00
|
|
|
*/
|
2015-04-28 17:55:45 -07:00
|
|
|
Blockly.Flyout.prototype.position = function() {
|
2013-10-30 14:46:03 -07:00
|
|
|
if (!this.isVisible()) {
|
|
|
|
return;
|
|
|
|
}
|
2016-05-25 13:47:19 -07:00
|
|
|
var targetWorkspaceMetrics = this.targetWorkspace_.getMetrics();
|
|
|
|
if (!targetWorkspaceMetrics) {
|
2013-10-30 14:46:03 -07:00
|
|
|
// Hidden components will return null.
|
|
|
|
return;
|
|
|
|
}
|
2016-05-25 13:47:19 -07:00
|
|
|
var edgeWidth = this.horizontalLayout_ ?
|
|
|
|
targetWorkspaceMetrics.viewWidth : this.width_;
|
2016-03-17 15:46:22 -07:00
|
|
|
edgeWidth -= this.CORNER_RADIUS;
|
|
|
|
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT) {
|
2013-10-30 14:46:03 -07:00
|
|
|
edgeWidth *= -1;
|
|
|
|
}
|
2016-03-17 15:46:22 -07:00
|
|
|
|
|
|
|
this.setBackgroundPath_(edgeWidth,
|
2016-05-25 13:47:19 -07:00
|
|
|
this.horizontalLayout_ ? this.height_ :
|
|
|
|
targetWorkspaceMetrics.viewHeight);
|
2013-10-30 14:46:03 -07:00
|
|
|
|
2016-05-25 13:47:19 -07:00
|
|
|
var x = targetWorkspaceMetrics.absoluteLeft;
|
2016-03-17 15:46:22 -07:00
|
|
|
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT) {
|
2016-05-25 13:47:19 -07:00
|
|
|
x += targetWorkspaceMetrics.viewWidth;
|
2013-10-30 14:46:03 -07:00
|
|
|
x -= this.width_;
|
|
|
|
}
|
2016-03-17 15:46:22 -07:00
|
|
|
|
2016-05-25 13:47:19 -07:00
|
|
|
var y = targetWorkspaceMetrics.absoluteTop;
|
2016-03-17 15:46:22 -07:00
|
|
|
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_BOTTOM) {
|
2016-05-25 13:47:19 -07:00
|
|
|
y += targetWorkspaceMetrics.viewHeight;
|
2016-03-17 15:46:22 -07:00
|
|
|
y -= this.height_;
|
|
|
|
}
|
|
|
|
|
2016-05-11 16:40:42 -07:00
|
|
|
this.svgGroup_.setAttribute('transform', 'translate(' + x + ',' + y + ')');
|
2013-10-30 14:46:03 -07:00
|
|
|
|
2016-03-17 15:46:22 -07:00
|
|
|
// Record the height for Blockly.Flyout.getMetrics_, or width if the layout is
|
|
|
|
// horizontal.
|
|
|
|
if (this.horizontalLayout_) {
|
2016-05-25 13:47:19 -07:00
|
|
|
this.width_ = targetWorkspaceMetrics.viewWidth;
|
2016-03-17 15:46:22 -07:00
|
|
|
} else {
|
2016-05-25 13:47:19 -07:00
|
|
|
this.height_ = targetWorkspaceMetrics.viewHeight;
|
2016-03-17 15:46:22 -07:00
|
|
|
}
|
2013-10-30 14:46:03 -07:00
|
|
|
|
|
|
|
// Update the scrollbar (if one exists).
|
|
|
|
if (this.scrollbar_) {
|
|
|
|
this.scrollbar_.resize();
|
|
|
|
}
|
2016-03-17 15:46:22 -07:00
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
2016-04-14 12:50:10 -07:00
|
|
|
* Create and set the path for the visible boundaries of the flyout.
|
|
|
|
* @param {number} width The width of the flyout, not including the
|
2016-03-17 15:46:22 -07:00
|
|
|
* rounded corners.
|
2016-04-14 12:50:10 -07:00
|
|
|
* @param {number} height The height of the flyout, not including
|
2016-03-17 15:46:22 -07:00
|
|
|
* rounded corners.
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
Blockly.Flyout.prototype.setBackgroundPath_ = function(width, height) {
|
|
|
|
if (this.horizontalLayout_) {
|
|
|
|
this.setBackgroundPathHorizontal_(width, height);
|
|
|
|
} else {
|
|
|
|
this.setBackgroundPathVertical_(width, height);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
2016-04-14 12:50:10 -07:00
|
|
|
* Create and set the path for the visible boundaries of the flyout in vertical
|
2016-04-08 15:34:08 -07:00
|
|
|
* mode.
|
2016-04-14 12:50:10 -07:00
|
|
|
* @param {number} width The width of the flyout, not including the
|
2016-03-17 15:46:22 -07:00
|
|
|
* rounded corners.
|
2016-04-14 12:50:10 -07:00
|
|
|
* @param {number} height The height of the flyout, not including
|
2016-03-17 15:46:22 -07:00
|
|
|
* rounded corners.
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
Blockly.Flyout.prototype.setBackgroundPathVertical_ = function(width, height) {
|
2016-03-30 12:59:29 -07:00
|
|
|
var atRight = this.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT;
|
2016-03-17 15:46:22 -07:00
|
|
|
// Decide whether to start on the left or right.
|
|
|
|
var path = ['M ' + (atRight ? this.width_ : 0) + ',0'];
|
|
|
|
// Top.
|
|
|
|
path.push('h', width);
|
|
|
|
// Rounded corner.
|
|
|
|
path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0,
|
|
|
|
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(' '));
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
2016-04-14 12:50:10 -07:00
|
|
|
* Create and set the path for the visible boundaries of the flyout in
|
2016-04-08 15:34:08 -07:00
|
|
|
* horizontal mode.
|
2016-04-14 12:50:10 -07:00
|
|
|
* @param {number} width The width of the flyout, not including the
|
2016-03-17 15:46:22 -07:00
|
|
|
* rounded corners.
|
2016-04-14 12:50:10 -07:00
|
|
|
* @param {number} height The height of the flyout, not including
|
2016-03-17 15:46:22 -07:00
|
|
|
* rounded corners.
|
|
|
|
* @private
|
|
|
|
*/
|
2016-04-08 15:34:08 -07:00
|
|
|
Blockly.Flyout.prototype.setBackgroundPathHorizontal_ =
|
|
|
|
function(width, height) {
|
2016-05-25 12:53:42 -07:00
|
|
|
/* eslint-disable indent */
|
2016-03-30 12:59:29 -07:00
|
|
|
var atTop = this.toolboxPosition_ == Blockly.TOOLBOX_AT_TOP;
|
|
|
|
// Start at top left.
|
2016-03-17 15:46:22 -07:00
|
|
|
var path = ['M 0,' + (atTop ? 0 : this.CORNER_RADIUS)];
|
|
|
|
|
|
|
|
if (atTop) {
|
2016-03-30 12:59:29 -07:00
|
|
|
// Top.
|
2016-03-17 15:46:22 -07:00
|
|
|
path.push('h', width + this.CORNER_RADIUS);
|
2016-03-30 12:59:29 -07:00
|
|
|
// Right.
|
2016-03-17 15:46:22 -07:00
|
|
|
path.push('v', height);
|
2016-03-30 12:59:29 -07:00
|
|
|
// Bottom.
|
2016-03-17 15:46:22 -07:00
|
|
|
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));
|
2016-03-30 12:59:29 -07:00
|
|
|
// Left.
|
2016-03-17 15:46:22 -07:00
|
|
|
path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0, 1,
|
|
|
|
-this.CORNER_RADIUS, -this.CORNER_RADIUS);
|
|
|
|
path.push('z');
|
|
|
|
} else {
|
2016-03-30 12:59:29 -07:00
|
|
|
// Top.
|
2016-03-17 15:46:22 -07:00
|
|
|
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);
|
2016-03-30 12:59:29 -07:00
|
|
|
// Right.
|
2016-03-17 15:46:22 -07:00
|
|
|
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);
|
2016-03-30 12:59:29 -07:00
|
|
|
// Bottom.
|
2016-03-17 15:46:22 -07:00
|
|
|
path.push('h', -width - this.CORNER_RADIUS);
|
2016-03-30 12:59:29 -07:00
|
|
|
// Left.
|
2016-03-17 15:46:22 -07:00
|
|
|
path.push('z');
|
|
|
|
}
|
|
|
|
this.svgBackground_.setAttribute('d', path.join(' '));
|
2016-05-25 12:53:42 -07:00
|
|
|
}; /* eslint-enable indent */
|
2013-10-30 14:46:03 -07:00
|
|
|
|
2015-02-27 17:01:24 -08:00
|
|
|
/**
|
|
|
|
* Scroll the flyout to the top.
|
|
|
|
*/
|
2016-02-16 21:57:22 -08:00
|
|
|
Blockly.Flyout.prototype.scrollToStart = function() {
|
2016-04-19 14:37:50 -07:00
|
|
|
this.scrollbar_.set((this.horizontalLayout_ && this.RTL) ? Infinity : 0);
|
2015-02-27 17:01:24 -08:00
|
|
|
};
|
|
|
|
|
2014-09-08 14:26:52 -07:00
|
|
|
/**
|
2016-05-13 16:07:53 -07:00
|
|
|
* Scroll the flyout.
|
2014-09-08 14:26:52 -07:00
|
|
|
* @param {!Event} e Mouse wheel scroll event.
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
Blockly.Flyout.prototype.wheel_ = function(e) {
|
2016-05-13 16:07:53 -07:00
|
|
|
var delta = this.horizontalLayout_ ? e.deltaX : e.deltaY;
|
|
|
|
|
|
|
|
if (delta) {
|
|
|
|
if (goog.userAgent.GECKO) {
|
|
|
|
// Firefox's deltas are a tenth that of Chrome/Safari.
|
|
|
|
delta *= 10;
|
2014-09-08 14:26:52 -07:00
|
|
|
}
|
2016-05-13 16:07:53 -07:00
|
|
|
var metrics = this.getMetrics_();
|
|
|
|
var pos = this.horizontalLayout_ ? metrics.viewLeft + delta :
|
|
|
|
metrics.viewTop + delta;
|
|
|
|
var limit = this.horizontalLayout_ ?
|
|
|
|
metrics.contentWidth - metrics.viewWidth :
|
|
|
|
metrics.contentHeight - metrics.viewHeight;
|
|
|
|
pos = Math.min(pos, limit);
|
|
|
|
pos = Math.max(pos, 0);
|
|
|
|
this.scrollbar_.set(pos);
|
2014-09-08 14:26:52 -07:00
|
|
|
}
|
2016-05-13 16:07:53 -07:00
|
|
|
|
2016-05-13 15:30:47 -07:00
|
|
|
// Don't scroll the page.
|
|
|
|
e.preventDefault();
|
|
|
|
// Don't propagate mousewheel event (zooming).
|
|
|
|
e.stopPropagation();
|
2014-09-08 14:26:52 -07:00
|
|
|
};
|
|
|
|
|
2013-10-30 14:46:03 -07:00
|
|
|
/**
|
|
|
|
* Is the flyout visible?
|
|
|
|
* @return {boolean} True if visible.
|
|
|
|
*/
|
|
|
|
Blockly.Flyout.prototype.isVisible = function() {
|
2014-09-08 14:26:52 -07:00
|
|
|
return this.svgGroup_ && this.svgGroup_.style.display == 'block';
|
2013-10-30 14:46:03 -07:00
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 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);
|
|
|
|
}
|
2014-09-08 14:26:52 -07:00
|
|
|
this.listeners_.length = 0;
|
2013-10-30 14:46:03 -07:00
|
|
|
if (this.reflowWrapper_) {
|
2016-02-11 21:40:33 -08:00
|
|
|
this.workspace_.removeChangeListener(this.reflowWrapper_);
|
2013-10-30 14:46:03 -07:00
|
|
|
this.reflowWrapper_ = null;
|
|
|
|
}
|
2014-09-08 14:26:52 -07:00
|
|
|
// 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();
|
2016-04-14 13:21:35 -07:00
|
|
|
this.clearOldBlocks_();
|
2013-10-30 14:46:03 -07:00
|
|
|
|
2015-10-25 22:20:08 -04:00
|
|
|
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);
|
|
|
|
}
|
|
|
|
|
2013-10-30 14:46:03 -07:00
|
|
|
this.svgGroup_.style.display = 'block';
|
|
|
|
// Create the blocks to be shown in this flyout.
|
|
|
|
var blocks = [];
|
|
|
|
var gaps = [];
|
2016-02-02 19:53:52 -08:00
|
|
|
this.permanentlyDisabled_.length = 0;
|
2015-10-25 22:20:08 -04:00
|
|
|
for (var i = 0, xml; xml = xmlList[i]; i++) {
|
|
|
|
if (xml.tagName && xml.tagName.toUpperCase() == 'BLOCK') {
|
2016-04-14 13:21:35 -07:00
|
|
|
var curBlock = Blockly.Xml.domToBlock(xml, this.workspace_);
|
|
|
|
if (curBlock.disabled) {
|
2016-02-02 19:53:52 -08:00
|
|
|
// Record blocks that were initially disabled.
|
|
|
|
// Do not enable these blocks as a result of capacity filtering.
|
2016-04-14 13:21:35 -07:00
|
|
|
this.permanentlyDisabled_.push(curBlock);
|
2016-02-02 19:53:52 -08:00
|
|
|
}
|
2016-04-14 13:21:35 -07:00
|
|
|
blocks.push(curBlock);
|
2015-10-25 22:20:08 -04:00
|
|
|
var gap = parseInt(xml.getAttribute('gap'), 10);
|
2016-05-11 16:40:42 -07:00
|
|
|
gaps.push(isNaN(gap) ? this.MARGIN * 3 : gap);
|
2013-10-30 14:46:03 -07:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-05-11 16:40:42 -07:00
|
|
|
this.layoutBlocks_(blocks, gaps);
|
2016-04-14 13:21:35 -07:00
|
|
|
|
2016-06-07 18:54:37 +02:00
|
|
|
// IE 11 is an incompetent browser that fails to fire mouseout events.
|
2016-04-14 13:21:35 -07:00
|
|
|
// When the mouse is over the background, deselect all blocks.
|
2016-05-25 12:53:42 -07:00
|
|
|
var deselectAll = function() {
|
2016-05-14 03:50:35 -07:00
|
|
|
var topBlocks = this.workspace_.getTopBlocks(false);
|
|
|
|
for (var i = 0, block; block = topBlocks[i]; i++) {
|
2016-04-14 13:21:35 -07:00
|
|
|
block.removeSelect();
|
|
|
|
}
|
|
|
|
};
|
2016-05-25 12:53:42 -07:00
|
|
|
|
2016-04-14 13:21:35 -07:00
|
|
|
this.listeners_.push(Blockly.bindEvent_(this.svgBackground_, 'mouseover',
|
|
|
|
this, deselectAll));
|
|
|
|
|
|
|
|
if (this.horizontalLayout_) {
|
|
|
|
this.height_ = 0;
|
|
|
|
} else {
|
|
|
|
this.width_ = 0;
|
|
|
|
}
|
2016-04-26 15:10:49 -07:00
|
|
|
this.reflow();
|
2016-04-14 13:21:35 -07:00
|
|
|
|
2016-04-18 17:29:48 -07:00
|
|
|
this.offsetHorizontalRtlBlocks(this.workspace_.getTopBlocks(false));
|
2016-04-14 13:21:35 -07:00
|
|
|
this.filterForCapacity_();
|
|
|
|
|
2016-06-03 16:11:55 -07:00
|
|
|
// Correctly position the flyout's scrollbar when it opens.
|
|
|
|
this.position();
|
|
|
|
|
2016-04-14 13:21:35 -07:00
|
|
|
this.reflowWrapper_ = this.reflow.bind(this);
|
|
|
|
this.workspace_.addChangeListener(this.reflowWrapper_);
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Lay out the blocks in the flyout.
|
2016-04-21 06:05:25 -07:00
|
|
|
* @param {!Array.<!Blockly.BlockSvg>} blocks The blocks to lay out.
|
|
|
|
* @param {!Array.<number>} gaps The visible gaps between blocks.
|
2016-04-14 13:21:35 -07:00
|
|
|
* @private
|
|
|
|
*/
|
2016-05-11 16:40:42 -07:00
|
|
|
Blockly.Flyout.prototype.layoutBlocks_ = function(blocks, gaps) {
|
|
|
|
var margin = this.MARGIN * this.workspace_.scale;
|
|
|
|
var cursorX = this.RTL ? margin : margin + Blockly.BlockSvg.TAB_WIDTH;
|
2013-10-30 14:46:03 -07:00
|
|
|
var cursorY = margin;
|
|
|
|
for (var i = 0, block; block = blocks[i]; i++) {
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
block.render();
|
|
|
|
var root = block.getSvgRoot();
|
|
|
|
var blockHW = block.getHeightWidth();
|
2016-04-26 15:10:49 -07:00
|
|
|
var tab = block.outputConnection ? Blockly.BlockSvg.TAB_WIDTH : 0;
|
|
|
|
if (this.horizontalLayout_) {
|
|
|
|
cursorX += tab;
|
|
|
|
}
|
2016-05-11 16:40:42 -07:00
|
|
|
block.moveBy((this.horizontalLayout_ && this.RTL) ? -cursorX : cursorX,
|
|
|
|
cursorY);
|
2016-03-17 15:46:22 -07:00
|
|
|
if (this.horizontalLayout_) {
|
2016-04-26 15:10:49 -07:00
|
|
|
cursorX += (blockHW.width + gaps[i] - tab);
|
2016-03-17 15:46:22 -07:00
|
|
|
} else {
|
|
|
|
cursorY += blockHW.height + gaps[i];
|
|
|
|
}
|
2013-10-30 14:46:03 -07:00
|
|
|
|
|
|
|
// 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);
|
2016-04-13 15:54:05 -07:00
|
|
|
rect.tooltip = block;
|
|
|
|
Blockly.Tooltip.bindMouseEvents(rect);
|
2013-10-30 14:46:03 -07:00
|
|
|
// Add the rectangles under the blocks, so that the blocks' tooltips work.
|
|
|
|
this.workspace_.getCanvas().insertBefore(rect, block.getSvgRoot());
|
|
|
|
block.flyoutRect_ = rect;
|
|
|
|
this.buttons_[i] = rect;
|
|
|
|
|
2016-03-17 15:46:22 -07:00
|
|
|
this.addBlockListeners_(root, block, rect);
|
2013-10-30 14:46:03 -07:00
|
|
|
}
|
2016-04-14 13:21:35 -07:00
|
|
|
};
|
2014-09-08 14:26:52 -07:00
|
|
|
|
2016-04-14 13:21:35 -07:00
|
|
|
/**
|
|
|
|
* 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);
|
2014-09-08 14:26:52 -07:00
|
|
|
}
|
2016-03-17 15:46:22 -07:00
|
|
|
}
|
2016-04-14 13:21:35 -07:00
|
|
|
// Delete any background buttons from a previous showing.
|
|
|
|
for (var j = 0, rect; rect = this.buttons_[j]; j++) {
|
|
|
|
goog.dom.removeNode(rect);
|
|
|
|
}
|
|
|
|
this.buttons_.length = 0;
|
2013-10-30 14:46:03 -07:00
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
2016-03-17 15:46:22 -07:00
|
|
|
* Add listeners to a block that has been added to the flyout.
|
2016-03-30 12:59:29 -07:00
|
|
|
* @param {!Element} root The root node of the SVG group the block is in.
|
2016-03-17 15:46:22 -07:00
|
|
|
* @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
|
2013-10-30 14:46:03 -07:00
|
|
|
*/
|
2016-03-17 15:46:22 -07:00
|
|
|
Blockly.Flyout.prototype.addBlockListeners_ = function(root, block, rect) {
|
2016-04-14 13:21:35 -07:00
|
|
|
if (this.autoClose) {
|
|
|
|
this.listeners_.push(Blockly.bindEvent_(root, 'mousedown', null,
|
2016-03-17 15:46:22 -07:00
|
|
|
this.createBlockFunc_(block)));
|
2016-04-26 15:10:49 -07:00
|
|
|
this.listeners_.push(Blockly.bindEvent_(rect, 'mousedown', null,
|
|
|
|
this.createBlockFunc_(block)));
|
2016-04-14 13:21:35 -07:00
|
|
|
} else {
|
|
|
|
this.listeners_.push(Blockly.bindEvent_(root, 'mousedown', null,
|
|
|
|
this.blockMouseDown_(block)));
|
2016-04-26 15:10:49 -07:00
|
|
|
this.listeners_.push(Blockly.bindEvent_(rect, 'mousedown', null,
|
|
|
|
this.blockMouseDown_(block)));
|
2016-04-14 13:21:35 -07:00
|
|
|
}
|
|
|
|
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));
|
2013-10-30 14:46:03 -07:00
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Handle a mouse-down on an SVG block in a non-closing flyout.
|
2014-09-08 14:26:52 -07:00
|
|
|
* @param {!Blockly.Block} block The flyout block to copy.
|
2013-10-30 14:46:03 -07:00
|
|
|
* @return {!Function} Function to call when block is clicked.
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
Blockly.Flyout.prototype.blockMouseDown_ = function(block) {
|
|
|
|
var flyout = this;
|
|
|
|
return function(e) {
|
|
|
|
Blockly.terminateDrag_();
|
|
|
|
Blockly.hideChaff();
|
|
|
|
if (Blockly.isRightButton(e)) {
|
|
|
|
// Right-click.
|
2014-09-08 14:26:52 -07:00
|
|
|
block.showContextMenu_(e);
|
2013-10-30 14:46:03 -07:00
|
|
|
} else {
|
|
|
|
// Left-click (or middle click)
|
2014-11-26 12:03:21 -08:00
|
|
|
Blockly.Css.setCursor(Blockly.Css.Cursor.CLOSED);
|
2013-10-30 14:46:03 -07:00
|
|
|
// Record the current mouse position.
|
2014-01-15 03:00:09 -08:00
|
|
|
Blockly.Flyout.startDownEvent_ = e;
|
2013-10-30 14:46:03 -07:00
|
|
|
Blockly.Flyout.startBlock_ = block;
|
|
|
|
Blockly.Flyout.startFlyout_ = flyout;
|
|
|
|
Blockly.Flyout.onMouseUpWrapper_ = Blockly.bindEvent_(document,
|
2016-04-20 05:03:05 -07:00
|
|
|
'mouseup', this, flyout.onMouseUp_);
|
2014-09-08 14:26:52 -07:00
|
|
|
Blockly.Flyout.onMouseMoveBlockWrapper_ = Blockly.bindEvent_(document,
|
|
|
|
'mousemove', this, flyout.onMouseMoveBlock_);
|
2013-10-30 14:46:03 -07:00
|
|
|
}
|
|
|
|
// This event has been handled. No need to bubble up to the document.
|
|
|
|
e.stopPropagation();
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2014-09-08 14:26:52 -07:00
|
|
|
/**
|
|
|
|
* Mouse down on the flyout background. Start a vertical scroll drag.
|
|
|
|
* @param {!Event} e Mouse down event.
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
Blockly.Flyout.prototype.onMouseDown_ = function(e) {
|
|
|
|
if (Blockly.isRightButton(e)) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
Blockly.hideChaff(true);
|
|
|
|
Blockly.Flyout.terminateDrag_();
|
|
|
|
this.startDragMouseY_ = e.clientY;
|
2016-04-08 15:34:08 -07:00
|
|
|
this.startDragMouseX_ = e.clientX;
|
2014-09-08 14:26:52 -07:00
|
|
|
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();
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
2016-04-20 05:03:05 -07:00
|
|
|
* 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 (Blockly.dragMode_ != Blockly.DRAG_FREE &&
|
|
|
|
!Blockly.WidgetDiv.isVisible()) {
|
|
|
|
Blockly.Events.fire(
|
|
|
|
new Blockly.Events.Ui(Blockly.Flyout.startBlock_, 'click',
|
|
|
|
undefined, undefined));
|
|
|
|
}
|
|
|
|
Blockly.terminateDrag_();
|
|
|
|
};
|
|
|
|
|
2014-09-08 14:26:52 -07:00
|
|
|
/**
|
|
|
|
* Handle a mouse-move to vertically drag the flyout.
|
|
|
|
* @param {!Event} e Mouse move event.
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
Blockly.Flyout.prototype.onMouseMove_ = function(e) {
|
2016-04-08 15:34:08 -07:00
|
|
|
var metrics = this.getMetrics_();
|
2016-03-17 15:46:22 -07:00
|
|
|
if (this.horizontalLayout_) {
|
2016-04-08 15:34:08 -07:00
|
|
|
if (metrics.contentWidth - metrics.viewWidth < 0) {
|
|
|
|
return;
|
|
|
|
}
|
2016-03-17 15:46:22 -07:00
|
|
|
var dx = e.clientX - this.startDragMouseX_;
|
|
|
|
this.startDragMouseX_ = e.clientX;
|
|
|
|
var x = metrics.viewLeft - dx;
|
2016-03-30 12:59:29 -07:00
|
|
|
x = goog.math.clamp(x, 0, metrics.contentWidth - metrics.viewWidth);
|
2016-03-17 15:46:22 -07:00
|
|
|
this.scrollbar_.set(x);
|
|
|
|
} else {
|
2016-04-08 15:34:08 -07:00
|
|
|
if (metrics.contentHeight - metrics.viewHeight < 0) {
|
|
|
|
return;
|
|
|
|
}
|
2016-03-17 15:46:22 -07:00
|
|
|
var dy = e.clientY - this.startDragMouseY_;
|
|
|
|
this.startDragMouseY_ = e.clientY;
|
|
|
|
var y = metrics.viewTop - dy;
|
2016-03-31 13:05:21 -07:00
|
|
|
y = goog.math.clamp(y, 0, metrics.contentHeight - metrics.viewHeight);
|
2016-03-17 15:46:22 -07:00
|
|
|
this.scrollbar_.set(y);
|
|
|
|
}
|
2014-09-08 14:26:52 -07:00
|
|
|
};
|
|
|
|
|
2013-10-30 14:46:03 -07:00
|
|
|
/**
|
|
|
|
* 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
|
|
|
|
*/
|
2014-09-08 14:26:52 -07:00
|
|
|
Blockly.Flyout.prototype.onMouseMoveBlock_ = function(e) {
|
2013-10-30 14:46:03 -07:00
|
|
|
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,
|
2016-06-07 18:54:57 +02:00
|
|
|
but this shouldn't be noticeable. */
|
2013-10-30 14:46:03 -07:00
|
|
|
e.stopPropagation();
|
|
|
|
return;
|
|
|
|
}
|
2014-01-15 03:00:09 -08:00
|
|
|
var dx = e.clientX - Blockly.Flyout.startDownEvent_.clientX;
|
|
|
|
var dy = e.clientY - Blockly.Flyout.startDownEvent_.clientY;
|
2013-10-30 14:46:03 -07:00
|
|
|
// Still dragging within the sticky DRAG_RADIUS.
|
2015-08-19 17:21:05 -07:00
|
|
|
if (Math.sqrt(dx * dx + dy * dy) > Blockly.DRAG_RADIUS) {
|
2013-10-30 14:46:03 -07:00
|
|
|
// Create the block.
|
2014-09-08 14:26:52 -07:00
|
|
|
Blockly.Flyout.startFlyout_.createBlockFunc_(Blockly.Flyout.startBlock_)(
|
|
|
|
Blockly.Flyout.startDownEvent_);
|
2013-10-30 14:46:03 -07:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 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) {
|
|
|
|
if (Blockly.isRightButton(e)) {
|
|
|
|
// Right-click. Don't create a block, let the context menu show.
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (originBlock.disabled) {
|
|
|
|
// Beyond capacity.
|
|
|
|
return;
|
|
|
|
}
|
2016-02-16 21:57:22 -08:00
|
|
|
Blockly.Events.disable();
|
2016-05-11 15:15:12 -07:00
|
|
|
var block = flyout.placeNewBlock_(originBlock);
|
2016-02-16 21:57:22 -08:00
|
|
|
Blockly.Events.enable();
|
2016-03-03 17:48:54 -08:00
|
|
|
if (Blockly.Events.isEnabled()) {
|
|
|
|
Blockly.Events.setGroup(true);
|
2016-02-16 21:57:22 -08:00
|
|
|
Blockly.Events.fire(new Blockly.Events.Create(block));
|
|
|
|
}
|
2013-10-30 14:46:03 -07:00
|
|
|
if (flyout.autoClose) {
|
|
|
|
flyout.hide();
|
|
|
|
} else {
|
|
|
|
flyout.filterForCapacity_();
|
|
|
|
}
|
|
|
|
// Start a dragging operation on the new block.
|
|
|
|
block.onMouseDown_(e);
|
2016-03-29 08:36:11 -07:00
|
|
|
Blockly.dragMode_ = Blockly.DRAG_FREE;
|
|
|
|
block.setDragging_(true);
|
2013-10-30 14:46:03 -07:00
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2016-04-08 17:16:44 -07:00
|
|
|
/**
|
|
|
|
* Copy a block from the flyout to the workspace and position it correctly.
|
2016-05-11 15:15:12 -07:00
|
|
|
* @param {!Blockly.Block} originBlock The flyout block to copy..
|
2016-04-08 17:16:44 -07:00
|
|
|
* @return {!Blockly.Block} The new block in the main workspace.
|
|
|
|
* @private
|
|
|
|
*/
|
2016-05-11 15:15:12 -07:00
|
|
|
Blockly.Flyout.prototype.placeNewBlock_ = function(originBlock) {
|
|
|
|
var targetWorkspace = this.targetWorkspace_;
|
2016-04-08 15:34:08 -07:00
|
|
|
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
|
2016-04-08 17:16:44 -07:00
|
|
|
// left corner of the main workspace.
|
2016-05-11 15:15:12 -07:00
|
|
|
var xyOld = Blockly.getSvgXY_(svgRootOld, targetWorkspace);
|
2016-04-12 13:14:49 -07:00
|
|
|
// 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.
|
2016-04-25 14:25:36 -07:00
|
|
|
var scrollX = this.workspace_.scrollX;
|
|
|
|
var scale = this.workspace_.scale;
|
2016-04-12 13:14:49 -07:00
|
|
|
xyOld.x += scrollX / scale - scrollX;
|
2016-04-08 17:16:44 -07:00
|
|
|
// If the flyout is on the right side, (0, 0) in the flyout is offset to
|
2016-05-13 14:26:32 -07:00
|
|
|
// the right of (0, 0) in the main workspace. Add an offset to take that
|
|
|
|
// into account.
|
2016-04-25 14:25:36 -07:00
|
|
|
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT) {
|
2016-05-11 15:15:12 -07:00
|
|
|
scrollX = targetWorkspace.getMetrics().viewWidth - this.width_;
|
|
|
|
scale = targetWorkspace.scale;
|
2016-04-08 17:16:44 -07:00
|
|
|
// Scale the scroll (getSvgXY_ did not do this).
|
|
|
|
xyOld.x += scrollX / scale - scrollX;
|
|
|
|
}
|
2016-04-12 13:14:49 -07:00
|
|
|
|
|
|
|
// Take into account that the flyout might have been scrolled vertically
|
2016-04-08 17:16:44 -07:00
|
|
|
// (separately from the main workspace).
|
2016-04-12 13:14:49 -07:00
|
|
|
// Generally a no-op in horizontal mode but likely to happen in vertical
|
2016-04-08 17:16:44 -07:00
|
|
|
// mode.
|
2016-04-25 14:25:36 -07:00
|
|
|
var scrollY = this.workspace_.scrollY;
|
|
|
|
scale = this.workspace_.scale;
|
2016-04-12 13:14:49 -07:00
|
|
|
xyOld.y += scrollY / scale - scrollY;
|
2016-04-08 17:16:44 -07:00
|
|
|
// If the flyout is on the bottom, (0, 0) in the flyout is offset to be below
|
2016-05-13 14:26:32 -07:00
|
|
|
// (0, 0) in the main workspace. Add an offset to take that into account.
|
2016-04-25 14:25:36 -07:00
|
|
|
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_BOTTOM) {
|
2016-05-11 15:15:12 -07:00
|
|
|
scrollY = targetWorkspace.getMetrics().viewHeight - this.height_;
|
|
|
|
scale = targetWorkspace.scale;
|
2016-04-08 17:16:44 -07:00
|
|
|
xyOld.y += scrollY / scale - scrollY;
|
|
|
|
}
|
2016-04-08 15:34:08 -07:00
|
|
|
|
|
|
|
// Create the new block by cloning the block in the flyout (via XML).
|
|
|
|
var xml = Blockly.Xml.blockToDom(originBlock);
|
2016-05-11 15:15:12 -07:00
|
|
|
var block = Blockly.Xml.domToBlock(xml, targetWorkspace);
|
2016-04-08 15:34:08 -07:00
|
|
|
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
|
2016-04-08 17:16:44 -07:00
|
|
|
// original block because the flyout's origin may not be the same as the
|
|
|
|
// main workspace's origin.
|
2016-05-11 15:15:12 -07:00
|
|
|
var xyNew = Blockly.getSvgXY_(svgRootNew, targetWorkspace);
|
2016-04-08 15:34:08 -07:00
|
|
|
// Scale the scroll (getSvgXY_ did not do this).
|
2016-05-11 15:15:12 -07:00
|
|
|
xyNew.x +=
|
|
|
|
targetWorkspace.scrollX / targetWorkspace.scale - targetWorkspace.scrollX;
|
|
|
|
xyNew.y +=
|
|
|
|
targetWorkspace.scrollY / targetWorkspace.scale - targetWorkspace.scrollY;
|
2016-04-12 13:14:49 -07:00
|
|
|
// If the flyout is collapsible and the workspace can't be scrolled.
|
2016-05-11 15:15:12 -07:00
|
|
|
if (targetWorkspace.toolbox_ && !targetWorkspace.scrollbar) {
|
|
|
|
xyNew.x += targetWorkspace.toolbox_.getWidth() / targetWorkspace.scale;
|
|
|
|
xyNew.y += targetWorkspace.toolbox_.getHeight() / targetWorkspace.scale;
|
2016-04-08 15:34:08 -07:00
|
|
|
}
|
2016-04-08 17:16:44 -07:00
|
|
|
|
2016-04-08 15:34:08 -07:00
|
|
|
// Move the new block to where the old block is.
|
|
|
|
block.moveBy(xyOld.x - xyNew.x, xyOld.y - xyNew.y);
|
|
|
|
return block;
|
|
|
|
};
|
|
|
|
|
2013-10-30 14:46:03 -07:00
|
|
|
/**
|
|
|
|
* Filter the blocks on the flyout to disable the ones that are above the
|
|
|
|
* capacity limit.
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
Blockly.Flyout.prototype.filterForCapacity_ = function() {
|
|
|
|
var remainingCapacity = this.targetWorkspace_.remainingCapacity();
|
|
|
|
var blocks = this.workspace_.getTopBlocks(false);
|
|
|
|
for (var i = 0, block; block = blocks[i]; i++) {
|
2016-02-02 19:53:52 -08:00
|
|
|
if (this.permanentlyDisabled_.indexOf(block) == -1) {
|
|
|
|
var allBlocks = block.getDescendants();
|
|
|
|
block.setDisabled(allBlocks.length > remainingCapacity);
|
2015-10-21 15:21:51 -07:00
|
|
|
}
|
2013-10-30 14:46:03 -07:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2015-04-28 13:51:25 -07:00
|
|
|
/**
|
|
|
|
* Return the deletion rectangle for this flyout.
|
|
|
|
* @return {goog.math.Rect} Rectangle in which to delete.
|
|
|
|
*/
|
2016-02-03 15:28:29 -08:00
|
|
|
Blockly.Flyout.prototype.getClientRect = function() {
|
2016-06-17 12:39:18 -07:00
|
|
|
if (!this.svgGroup_) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2016-02-03 15:28:29 -08:00
|
|
|
var flyoutRect = this.svgGroup_.getBoundingClientRect();
|
2015-04-28 13:51:25 -07:00
|
|
|
// BIG_NUM is offscreen padding so that blocks dragged beyond the shown flyout
|
2015-08-19 17:21:05 -07:00
|
|
|
// 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;
|
2016-03-17 15:46:22 -07:00
|
|
|
var x = flyoutRect.left;
|
|
|
|
var y = flyoutRect.top;
|
|
|
|
var width = flyoutRect.width;
|
|
|
|
var height = flyoutRect.height;
|
|
|
|
|
|
|
|
if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_TOP) {
|
|
|
|
return new goog.math.Rect(-BIG_NUM, y - BIG_NUM, BIG_NUM * 2,
|
2016-03-30 12:59:29 -07:00
|
|
|
BIG_NUM + height);
|
2016-03-17 15:46:22 -07:00
|
|
|
} else if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_BOTTOM) {
|
2016-04-13 15:30:11 -07:00
|
|
|
return new goog.math.Rect(-BIG_NUM, y, BIG_NUM * 2,
|
2016-03-30 12:59:29 -07:00
|
|
|
BIG_NUM + height);
|
2016-03-17 15:46:22 -07:00
|
|
|
} else if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_LEFT) {
|
|
|
|
return new goog.math.Rect(x - BIG_NUM, -BIG_NUM, BIG_NUM + width,
|
2016-03-30 12:59:29 -07:00
|
|
|
BIG_NUM * 2);
|
2016-03-17 15:46:22 -07:00
|
|
|
} else { // Right
|
2016-03-30 12:59:29 -07:00
|
|
|
return new goog.math.Rect(x, -BIG_NUM, BIG_NUM + width, BIG_NUM * 2);
|
2016-02-03 15:28:29 -08:00
|
|
|
}
|
2015-04-28 13:51:25 -07:00
|
|
|
};
|
|
|
|
|
2013-10-30 14:46:03 -07:00
|
|
|
/**
|
|
|
|
* Stop binding to the global mouseup and mousemove events.
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
Blockly.Flyout.terminateDrag_ = function() {
|
|
|
|
if (Blockly.Flyout.onMouseUpWrapper_) {
|
|
|
|
Blockly.unbindEvent_(Blockly.Flyout.onMouseUpWrapper_);
|
|
|
|
Blockly.Flyout.onMouseUpWrapper_ = null;
|
|
|
|
}
|
2014-09-08 14:26:52 -07:00
|
|
|
if (Blockly.Flyout.onMouseMoveBlockWrapper_) {
|
|
|
|
Blockly.unbindEvent_(Blockly.Flyout.onMouseMoveBlockWrapper_);
|
|
|
|
Blockly.Flyout.onMouseMoveBlockWrapper_ = null;
|
|
|
|
}
|
2013-10-30 14:46:03 -07:00
|
|
|
if (Blockly.Flyout.onMouseMoveWrapper_) {
|
|
|
|
Blockly.unbindEvent_(Blockly.Flyout.onMouseMoveWrapper_);
|
|
|
|
Blockly.Flyout.onMouseMoveWrapper_ = null;
|
|
|
|
}
|
2014-09-08 14:26:52 -07:00
|
|
|
if (Blockly.Flyout.onMouseUpWrapper_) {
|
|
|
|
Blockly.unbindEvent_(Blockly.Flyout.onMouseUpWrapper_);
|
|
|
|
Blockly.Flyout.onMouseUpWrapper_ = null;
|
|
|
|
}
|
2014-01-15 03:00:09 -08:00
|
|
|
Blockly.Flyout.startDownEvent_ = null;
|
2013-10-30 14:46:03 -07:00
|
|
|
Blockly.Flyout.startBlock_ = null;
|
|
|
|
Blockly.Flyout.startFlyout_ = null;
|
|
|
|
};
|
2016-03-17 15:46:22 -07:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Compute height of flyout. Position button under each block.
|
|
|
|
* For RTL: Lay out the blocks right-aligned.
|
2016-04-18 17:29:48 -07:00
|
|
|
* @param {!Array<!Blockly.Block>} blocks The blocks to reflow.
|
2016-03-17 15:46:22 -07:00
|
|
|
*/
|
2016-04-18 17:29:48 -07:00
|
|
|
Blockly.Flyout.prototype.reflowHorizontal = function(blocks) {
|
2016-03-17 15:46:22 -07:00
|
|
|
this.workspace_.scale = this.targetWorkspace_.scale;
|
|
|
|
var flyoutHeight = 0;
|
2016-03-30 12:59:29 -07:00
|
|
|
for (var i = 0, block; block = blocks[i]; i++) {
|
|
|
|
flyoutHeight = Math.max(flyoutHeight, block.getHeightWidth().height);
|
2016-03-17 15:46:22 -07:00
|
|
|
}
|
2016-05-11 16:40:42 -07:00
|
|
|
flyoutHeight += this.MARGIN * 1.5;
|
2016-03-17 15:46:22 -07:00
|
|
|
flyoutHeight *= this.workspace_.scale;
|
2016-05-11 16:40:42 -07:00
|
|
|
flyoutHeight += Blockly.Scrollbar.scrollbarThickness;
|
2016-03-17 15:46:22 -07:00
|
|
|
if (this.height_ != flyoutHeight) {
|
2016-05-14 03:50:35 -07:00
|
|
|
for (var i = 0, block; block = blocks[i]; i++) {
|
2016-03-17 15:46:22 -07:00
|
|
|
var blockHW = block.getHeightWidth();
|
|
|
|
if (block.flyoutRect_) {
|
|
|
|
block.flyoutRect_.setAttribute('width', blockHW.width);
|
|
|
|
block.flyoutRect_.setAttribute('height', blockHW.height);
|
2016-04-18 17:29:48 -07:00
|
|
|
// Rectangles behind blocks with output tabs are shifted a bit.
|
2016-03-17 15:46:22 -07:00
|
|
|
var tab = block.outputConnection ? Blockly.BlockSvg.TAB_WIDTH : 0;
|
|
|
|
var blockXY = block.getRelativeToSurfaceXY();
|
|
|
|
block.flyoutRect_.setAttribute('y', blockXY.y);
|
|
|
|
block.flyoutRect_.setAttribute('x',
|
|
|
|
this.RTL ? blockXY.x - blockHW.width + tab : blockXY.x - tab);
|
2016-04-25 14:25:36 -07:00
|
|
|
// 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);
|
2016-03-17 15:46:22 -07:00
|
|
|
}
|
|
|
|
}
|
2016-04-14 13:21:35 -07:00
|
|
|
// Record the height for .getMetrics_ and .position.
|
2016-03-17 15:46:22 -07:00
|
|
|
this.height_ = flyoutHeight;
|
2016-06-14 10:13:03 -07:00
|
|
|
// 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();
|
2016-03-17 15:46:22 -07:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Compute width of flyout. Position button under each block.
|
|
|
|
* For RTL: Lay out the blocks right-aligned.
|
2016-04-18 17:29:48 -07:00
|
|
|
* @param {!Array<!Blockly.Block>} blocks The blocks to reflow.
|
2016-03-17 15:46:22 -07:00
|
|
|
*/
|
2016-04-18 17:29:48 -07:00
|
|
|
Blockly.Flyout.prototype.reflowVertical = function(blocks) {
|
2016-03-17 15:46:22 -07:00
|
|
|
this.workspace_.scale = this.targetWorkspace_.scale;
|
|
|
|
var flyoutWidth = 0;
|
2016-03-30 12:59:29 -07:00
|
|
|
for (var i = 0, block; block = blocks[i]; i++) {
|
2016-03-17 15:46:22 -07:00
|
|
|
var width = block.getHeightWidth().width;
|
|
|
|
if (block.outputConnection) {
|
|
|
|
width -= Blockly.BlockSvg.TAB_WIDTH;
|
|
|
|
}
|
|
|
|
flyoutWidth = Math.max(flyoutWidth, width);
|
|
|
|
}
|
2016-05-11 16:40:42 -07:00
|
|
|
flyoutWidth += this.MARGIN * 1.5 + Blockly.BlockSvg.TAB_WIDTH;
|
2016-03-17 15:46:22 -07:00
|
|
|
flyoutWidth *= this.workspace_.scale;
|
2016-05-11 16:40:42 -07:00
|
|
|
flyoutWidth += Blockly.Scrollbar.scrollbarThickness;
|
2016-03-17 15:46:22 -07:00
|
|
|
if (this.width_ != flyoutWidth) {
|
2016-03-30 12:59:29 -07:00
|
|
|
for (var i = 0, block; block = blocks[i]; i++) {
|
2016-03-17 15:46:22 -07:00
|
|
|
var blockHW = block.getHeightWidth();
|
|
|
|
if (this.RTL) {
|
|
|
|
// With the flyoutWidth known, right-align the blocks.
|
|
|
|
var oldX = block.getRelativeToSurfaceXY().x;
|
2016-05-11 16:40:42 -07:00
|
|
|
var dx = flyoutWidth - this.MARGIN;
|
2016-03-17 15:46:22 -07:00
|
|
|
dx /= this.workspace_.scale;
|
|
|
|
dx -= Blockly.BlockSvg.TAB_WIDTH;
|
|
|
|
block.moveBy(dx - oldX, 0);
|
|
|
|
}
|
|
|
|
if (block.flyoutRect_) {
|
|
|
|
block.flyoutRect_.setAttribute('width', blockHW.width);
|
|
|
|
block.flyoutRect_.setAttribute('height', blockHW.height);
|
|
|
|
// Blocks with output tabs are shifted a bit.
|
|
|
|
var tab = block.outputConnection ? Blockly.BlockSvg.TAB_WIDTH : 0;
|
|
|
|
var blockXY = block.getRelativeToSurfaceXY();
|
|
|
|
block.flyoutRect_.setAttribute('x',
|
|
|
|
this.RTL ? blockXY.x - blockHW.width + tab : blockXY.x - tab);
|
2016-04-25 14:25:36 -07:00
|
|
|
// 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);
|
|
|
|
}
|
2016-03-17 15:46:22 -07:00
|
|
|
block.flyoutRect_.setAttribute('y', blockXY.y);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// Record the width for .getMetrics_ and .position.
|
|
|
|
this.width_ = flyoutWidth;
|
2016-06-14 10:13:03 -07:00
|
|
|
// 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();
|
2016-03-17 15:46:22 -07:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2016-04-18 17:29:48 -07:00
|
|
|
/**
|
|
|
|
* Reflow blocks and their buttons.
|
|
|
|
*/
|
2016-04-26 15:10:49 -07:00
|
|
|
Blockly.Flyout.prototype.reflow = function() {
|
2016-04-18 17:29:48 -07:00
|
|
|
var blocks = this.workspace_.getTopBlocks(false);
|
2016-03-17 15:46:22 -07:00
|
|
|
if (this.horizontalLayout_) {
|
2016-04-18 17:29:48 -07:00
|
|
|
this.reflowHorizontal(blocks);
|
2016-03-17 15:46:22 -07:00
|
|
|
} else {
|
2016-04-18 17:29:48 -07:00
|
|
|
this.reflowVertical(blocks);
|
2016-03-17 15:46:22 -07:00
|
|
|
}
|
2016-04-18 17:29:48 -07:00
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* In the horizontal RTL case all of the blocks will be laid out to the left of
|
|
|
|
* the origin, but we won't know how big the workspace is until the layout pass
|
|
|
|
* is done.
|
|
|
|
* Now that it's done, shunt all the blocks to be right of the origin.
|
2016-05-11 16:40:42 -07:00
|
|
|
* @param {!Array<!Blockly.Block>} blocks The blocks to reposition.
|
2016-04-18 17:29:48 -07:00
|
|
|
*/
|
|
|
|
Blockly.Flyout.prototype.offsetHorizontalRtlBlocks = function(blocks) {
|
|
|
|
if (this.horizontalLayout_ && this.RTL) {
|
2016-04-26 15:10:49 -07:00
|
|
|
// We don't know this workspace's view width yet.
|
|
|
|
this.position();
|
2016-04-18 17:29:48 -07:00
|
|
|
try {
|
|
|
|
var optionBox = this.workspace_.getCanvas().getBBox();
|
|
|
|
} catch (e) {
|
|
|
|
// Firefox has trouble with hidden elements (Bug 528969).
|
|
|
|
optionBox = {height: 0, y: 0, width: 0, x: 0};
|
|
|
|
}
|
|
|
|
|
2016-05-11 16:40:42 -07:00
|
|
|
var offset = Math.max(-optionBox.x + this.MARGIN,
|
|
|
|
this.width_ / this.workspace_.scale);
|
2016-04-18 17:29:48 -07:00
|
|
|
|
|
|
|
for (var i = 0, block; block = blocks[i]; i++) {
|
|
|
|
block.moveBy(offset, 0);
|
|
|
|
if (block.flyoutRect_) {
|
|
|
|
block.flyoutRect_.setAttribute('x',
|
|
|
|
offset + Number(block.flyoutRect_.getAttribute('x')));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2016-04-08 15:34:08 -07:00
|
|
|
};
|