summaryrefslogtreecommitdiff
path: root/src/blockly/core/flyout_button.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/blockly/core/flyout_button.js')
-rw-r--r--src/blockly/core/flyout_button.js169
1 files changed, 169 insertions, 0 deletions
diff --git a/src/blockly/core/flyout_button.js b/src/blockly/core/flyout_button.js
new file mode 100644
index 0000000..75b7a83
--- /dev/null
+++ b/src/blockly/core/flyout_button.js
@@ -0,0 +1,169 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 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 Class for a button in the flyout.
+ * @author fenichel@google.com (Rachel Fenichel)
+ */
+'use strict';
+
+goog.provide('Blockly.FlyoutButton');
+
+goog.require('goog.dom');
+goog.require('goog.math.Coordinate');
+
+
+/**
+ * Class for a button in the flyout.
+ * @param {!Blockly.Workspace} workspace The workspace in which to place this
+ * button.
+ * @param {!Blockly.Workspace} targetWorkspace The flyout's target workspace.
+ * @param {string} text The text to display on the button.
+ * @constructor
+ */
+Blockly.FlyoutButton = function(workspace, targetWorkspace, text) {
+ /**
+ * @type {!Blockly.Workspace}
+ * @private
+ */
+ this.workspace_ = workspace;
+
+ /**
+ * @type {!Blockly.Workspace}
+ * @private
+ */
+ this.targetWorkspace_ = targetWorkspace;
+
+ /**
+ * @type {string}
+ * @private
+ */
+ this.text_ = text;
+
+ /**
+ * @type {goog.math.Coordinate}
+ * @private
+ */
+ this.position_ = new goog.math.Coordinate(0, 0);
+};
+
+/**
+ * The margin around the text in the button.
+ */
+Blockly.FlyoutButton.MARGIN = 5;
+
+/**
+ * The width of the button's rect.
+ * @type {number}
+ */
+Blockly.FlyoutButton.prototype.width = 0;
+
+/**
+ * The height of the button's rect.
+ * @type {number}
+ */
+Blockly.FlyoutButton.prototype.height = 0;
+
+/**
+ * Create the button elements.
+ * @return {!Element} The button's SVG group.
+ */
+Blockly.FlyoutButton.prototype.createDom = function() {
+ this.svgGroup_ = Blockly.createSvgElement('g',
+ {'class': 'blocklyFlyoutButton'}, this.workspace_.getCanvas());
+
+ // Rect with rounded corners.
+ var rect = Blockly.createSvgElement('rect',
+ {'rx': 4, 'ry': 4,
+ 'height': 0, 'width': 0},
+ this.svgGroup_);
+
+ var svgText = Blockly.createSvgElement('text',
+ {'class': 'blocklyText', 'x': 0, 'y': 0,
+ 'text-anchor': 'middle'}, this.svgGroup_);
+ svgText.textContent = this.text_;
+
+ this.width = svgText.getComputedTextLength() +
+ 2 * Blockly.FlyoutButton.MARGIN;
+ this.height = 20; // Can't compute it :(
+
+ rect.setAttribute('width', this.width);
+ rect.setAttribute('height', this.height);
+
+ svgText.setAttribute('x', this.width / 2);
+ svgText.setAttribute('y', this.height - Blockly.FlyoutButton.MARGIN);
+
+ this.updateTransform_();
+ return this.svgGroup_;
+};
+
+/**
+ * Correctly position the flyout button and make it visible.
+ */
+Blockly.FlyoutButton.prototype.show = function() {
+ this.updateTransform_();
+ this.svgGroup_.setAttribute('display', 'block');
+};
+
+/**
+ * Update svg attributes to match internal state.
+ */
+Blockly.FlyoutButton.prototype.updateTransform_ = function() {
+ this.svgGroup_.setAttribute('transform', 'translate(' + this.position_.x +
+ ',' + this.position_.y + ')');
+};
+
+/**
+ * Move the button to the given x, y coordinates.
+ * @param {number} x The new x coordinate.
+ * @param {number} y The new y coordinate.
+ */
+Blockly.FlyoutButton.prototype.moveTo = function(x, y) {
+ this.position_.x = x;
+ this.position_.y = y;
+ this.updateTransform_();
+};
+
+/**
+ * Dispose of this button.
+ */
+Blockly.FlyoutButton.prototype.dispose = function() {
+ if (this.svgGroup_) {
+ goog.dom.removeNode(this.svgGroup_);
+ this.svgGroup_ = null;
+ }
+ this.workspace_ = null;
+ this.targetWorkspace_ = null;
+};
+
+/**
+ * Do something when the button is clicked.
+ * @param {!Event} e Mouse up event.
+ */
+Blockly.FlyoutButton.prototype.onMouseUp = function(e) {
+ // Don't scroll the page.
+ e.preventDefault();
+ // Don't propagate mousewheel event (zooming).
+ e.stopPropagation();
+ // Stop binding to mouseup and mousemove events--flyout mouseup would normally
+ // do this, but we're skipping that.
+ Blockly.Flyout.terminateDrag_();
+ Blockly.Variables.createVariable(this.targetWorkspace_);
+};