diff options
author | David Barksdale <amatus@amatus.name> | 2016-12-03 14:23:02 -0600 |
---|---|---|
committer | David Barksdale <amatus@amatus.name> | 2016-12-03 14:23:02 -0600 |
commit | 99e916beaf6afe5b2300bd95e73267550767bf7a (patch) | |
tree | 2b22c71fbdbf507735635c834de2276450b6372a /src/blockly/core/flyout_button.js | |
parent | 53284a2f5d22d15cd7851fd0f06a53ea1df0c280 (diff) |
Add Semantic-UI and get blockly working
Diffstat (limited to 'src/blockly/core/flyout_button.js')
-rw-r--r-- | src/blockly/core/flyout_button.js | 169 |
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_); +}; |