From 99e916beaf6afe5b2300bd95e73267550767bf7a Mon Sep 17 00:00:00 2001 From: David Barksdale Date: Sat, 3 Dec 2016 14:23:02 -0600 Subject: Add Semantic-UI and get blockly working --- src/blockly/core/icon.js | 203 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 203 insertions(+) create mode 100644 src/blockly/core/icon.js (limited to 'src/blockly/core/icon.js') diff --git a/src/blockly/core/icon.js b/src/blockly/core/icon.js new file mode 100644 index 0000000..b10e181 --- /dev/null +++ b/src/blockly/core/icon.js @@ -0,0 +1,203 @@ +/** + * @license + * Visual Blocks Editor + * + * Copyright 2013 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 Object representing an icon on a block. + * @author fraser@google.com (Neil Fraser) + */ +'use strict'; + +goog.provide('Blockly.Icon'); + +goog.require('goog.dom'); +goog.require('goog.math.Coordinate'); + + +/** + * Class for an icon. + * @param {Blockly.Block} block The block associated with this icon. + * @constructor + */ +Blockly.Icon = function(block) { + this.block_ = block; +}; + +/** + * Does this icon get hidden when the block is collapsed. + */ +Blockly.Icon.prototype.collapseHidden = true; + +/** + * Height and width of icons. + */ +Blockly.Icon.prototype.SIZE = 17; + +/** + * Bubble UI (if visible). + * @type {Blockly.Bubble} + * @private + */ +Blockly.Icon.prototype.bubble_ = null; + +/** + * Absolute coordinate of icon's center. + * @type {goog.math.Coordinate} + * @private + */ +Blockly.Icon.prototype.iconXY_ = null; + +/** + * Create the icon on the block. + */ +Blockly.Icon.prototype.createIcon = function() { + if (this.iconGroup_) { + // Icon already exists. + return; + } + /* Here's the markup that will be generated: + + ... + + */ + this.iconGroup_ = Blockly.createSvgElement('g', + {'class': 'blocklyIconGroup'}, null); + if (this.block_.isInFlyout) { + Blockly.addClass_(/** @type {!Element} */ (this.iconGroup_), + 'blocklyIconGroupReadonly'); + } + this.drawIcon_(this.iconGroup_); + + this.block_.getSvgRoot().appendChild(this.iconGroup_); + Blockly.bindEvent_(this.iconGroup_, 'mouseup', this, this.iconClick_); + this.updateEditable(); +}; + +/** + * Dispose of this icon. + */ +Blockly.Icon.prototype.dispose = function() { + // Dispose of and unlink the icon. + goog.dom.removeNode(this.iconGroup_); + this.iconGroup_ = null; + // Dispose of and unlink the bubble. + this.setVisible(false); + this.block_ = null; +}; + +/** + * Add or remove the UI indicating if this icon may be clicked or not. + */ +Blockly.Icon.prototype.updateEditable = function() { +}; + +/** + * Is the associated bubble visible? + * @return {boolean} True if the bubble is visible. + */ +Blockly.Icon.prototype.isVisible = function() { + return !!this.bubble_; +}; + +/** + * Clicking on the icon toggles if the bubble is visible. + * @param {!Event} e Mouse click event. + * @private + */ +Blockly.Icon.prototype.iconClick_ = function(e) { + if (this.block_.workspace.isDragging()) { + // Drag operation is concluding. Don't open the editor. + return; + } + if (!this.block_.isInFlyout && !Blockly.isRightButton(e)) { + this.setVisible(!this.isVisible()); + } +}; + +/** + * Change the colour of the associated bubble to match its block. + */ +Blockly.Icon.prototype.updateColour = function() { + if (this.isVisible()) { + this.bubble_.setColour(this.block_.getColour()); + } +}; + +/** + * Render the icon. + * @param {number} cursorX Horizontal offset at which to position the icon. + * @return {number} Horizontal offset for next item to draw. + */ +Blockly.Icon.prototype.renderIcon = function(cursorX) { + if (this.collapseHidden && this.block_.isCollapsed()) { + this.iconGroup_.setAttribute('display', 'none'); + return cursorX; + } + this.iconGroup_.setAttribute('display', 'block'); + + var TOP_MARGIN = 5; + var width = this.SIZE; + if (this.block_.RTL) { + cursorX -= width; + } + this.iconGroup_.setAttribute('transform', + 'translate(' + cursorX + ',' + TOP_MARGIN + ')'); + this.computeIconLocation(); + if (this.block_.RTL) { + cursorX -= Blockly.BlockSvg.SEP_SPACE_X; + } else { + cursorX += width + Blockly.BlockSvg.SEP_SPACE_X; + } + return cursorX; +}; + +/** + * Notification that the icon has moved. Update the arrow accordingly. + * @param {!goog.math.Coordinate} xy Absolute location. + */ +Blockly.Icon.prototype.setIconLocation = function(xy) { + this.iconXY_ = xy; + if (this.isVisible()) { + this.bubble_.setAnchorLocation(xy); + } +}; + +/** + * Notification that the icon has moved, but we don't really know where. + * Recompute the icon's location from scratch. + */ +Blockly.Icon.prototype.computeIconLocation = function() { + // Find coordinates for the centre of the icon and update the arrow. + var blockXY = this.block_.getRelativeToSurfaceXY(); + var iconXY = Blockly.getRelativeXY_(this.iconGroup_); + var newXY = new goog.math.Coordinate( + blockXY.x + iconXY.x + this.SIZE / 2, + blockXY.y + iconXY.y + this.SIZE / 2); + if (!goog.math.Coordinate.equals(this.getIconLocation(), newXY)) { + this.setIconLocation(newXY); + } +}; + +/** + * Returns the center of the block's icon relative to the surface. + * @return {!goog.math.Coordinate} Object with x and y properties. + */ +Blockly.Icon.prototype.getIconLocation = function() { + return this.iconXY_; +}; -- cgit v1.2.3-18-g5258