@blockdia/scratch-blocks 0.1.0

package/core/warning.js

@@ -0,0 +1,199 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2012 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 a warning.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.Warning');
+
+goog.require('Blockly.Bubble');
+goog.require('Blockly.Events.Ui');
+goog.require('Blockly.Icon');
+
+
+/**
+ * Class for a warning.
+ * @param {!Blockly.Block} block The block associated with this warning.
+ * @extends {Blockly.Icon}
+ * @constructor
+ */
+Blockly.Warning = function(block) {
+  Blockly.Warning.superClass_.constructor.call(this, block);
+  this.createIcon();
+  // The text_ object can contain multiple warnings.
+  this.text_ = {};
+};
+goog.inherits(Blockly.Warning, Blockly.Icon);
+
+/**
+ * Does this icon get hidden when the block is collapsed.
+ */
+Blockly.Warning.prototype.collapseHidden = false;
+
+/**
+ * Draw the warning icon.
+ * @param {!Element} group The icon group.
+ * @private
+ */
+Blockly.Warning.prototype.drawIcon_ = function(group) {
+  // Triangle with rounded corners.
+  Blockly.utils.createSvgElement('path',
+      {
+        'class': 'blocklyIconShape',
+        'd': 'M2,15Q-1,15 0.5,12L6.5,1.7Q8,-1 9.5,1.7L15.5,12Q17,15 14,15z'
+      },
+      group);
+  // Can't use a real '!' text character since different browsers and operating
+  // systems render it differently.
+  // Body of exclamation point.
+  Blockly.utils.createSvgElement('path',
+      {
+        'class': 'blocklyIconSymbol',
+        'd': 'm7,4.8v3.16l0.27,2.27h1.46l0.27,-2.27v-3.16z'
+      },
+      group);
+  // Dot of exclamation point.
+  Blockly.utils.createSvgElement('rect',
+      {
+        'class': 'blocklyIconSymbol',
+        'x': '7',
+        'y': '11',
+        'height': '2',
+        'width': '2'
+      },
+      group);
+};
+
+/**
+ * Create the text for the warning's bubble.
+ * @param {string} text The text to display.
+ * @return {!SVGTextElement} The top-level node of the text.
+ * @private
+ */
+Blockly.Warning.textToDom_ = function(text) {
+  var paragraph = /** @type {!SVGTextElement} */
+      (Blockly.utils.createSvgElement(
+          'text',
+          {
+            'class': 'blocklyText blocklyBubbleText',
+            'y': Blockly.Bubble.BORDER_WIDTH
+          },
+          null)
+      );
+  var lines = text.split('\n');
+  for (var i = 0; i < lines.length; i++) {
+    var tspanElement = Blockly.utils.createSvgElement('tspan',
+        {'dy': '1em', 'x': Blockly.Bubble.BORDER_WIDTH}, paragraph);
+    var textNode = document.createTextNode(lines[i]);
+    tspanElement.appendChild(textNode);
+  }
+  return paragraph;
+};
+
+/**
+ * Show or hide the warning bubble.
+ * @param {boolean} visible True if the bubble should be visible.
+ */
+Blockly.Warning.prototype.setVisible = function(visible) {
+  if (visible == this.isVisible()) {
+    // No change.
+    return;
+  }
+  Blockly.Events.fire(
+      new Blockly.Events.Ui(this.block_, 'warningOpen', !visible, visible));
+  if (visible) {
+    // Create the bubble to display all warnings.
+    var paragraph = Blockly.Warning.textToDom_(this.getText());
+    this.bubble_ = new Blockly.Bubble(
+        /** @type {!Blockly.WorkspaceSvg} */ (this.block_.workspace),
+        paragraph, this.block_.svgPath_, this.iconXY_, null, null);
+    if (this.block_.RTL) {
+      // Right-align the paragraph.
+      // This cannot be done until the bubble is rendered on screen.
+      var maxWidth = paragraph.getBBox().width;
+      for (var i = 0, textElement; textElement = paragraph.childNodes[i]; i++) {
+        textElement.setAttribute('text-anchor', 'end');
+        textElement.setAttribute('x', maxWidth + Blockly.Bubble.BORDER_WIDTH);
+      }
+    }
+    this.updateColour();
+    // Bump the warning into the right location.
+    var size = this.bubble_.getBubbleSize();
+    this.bubble_.setBubbleSize(size.width, size.height);
+  } else {
+    // Dispose of the bubble.
+    this.bubble_.dispose();
+    this.bubble_ = null;
+    this.body_ = null;
+  }
+};
+
+/**
+ * Bring the warning to the top of the stack when clicked on.
+ * @param {!Event} _e Mouse up event.
+ * @private
+ */
+Blockly.Warning.prototype.bodyFocus_ = function(_e) {
+  this.bubble_.promote_();
+};
+
+/**
+ * Set this warning's text.
+ * @param {string} text Warning text (or '' to delete).
+ * @param {string} id An ID for this text entry to be able to maintain
+ *     multiple warnings.
+ */
+Blockly.Warning.prototype.setText = function(text, id) {
+  if (this.text_[id] == text) {
+    return;
+  }
+  if (text) {
+    this.text_[id] = text;
+  } else {
+    delete this.text_[id];
+  }
+  if (this.isVisible()) {
+    this.setVisible(false);
+    this.setVisible(true);
+  }
+};
+
+/**
+ * Get this warning's texts.
+ * @return {string} All texts concatenated into one string.
+ */
+Blockly.Warning.prototype.getText = function() {
+  var allWarnings = [];
+  for (var id in this.text_) {
+    allWarnings.push(this.text_[id]);
+  }
+  return allWarnings.join('\n');
+};
+
+/**
+ * Dispose of this warning.
+ */
+Blockly.Warning.prototype.dispose = function() {
+  this.block_.warning = null;
+  Blockly.Icon.prototype.dispose.call(this);
+};

package/core/widgetdiv.js

@@ -0,0 +1,344 @@
+/**
+ * @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 A div that floats on top of Blockly.  This singleton contains
+ *     temporary HTML UI widgets that the user is currently interacting with.
+ *     E.g. text input areas, colour pickers, context menus.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+/**
+ * @name Blockly.WidgetDiv
+ * @namespace
+ **/
+goog.provide('Blockly.WidgetDiv');
+
+goog.require('Blockly.Css');
+goog.require('goog.dom');
+goog.require('goog.dom.TagName');
+goog.require('goog.style');
+
+
+/**
+ * The HTML container.  Set once by Blockly.WidgetDiv.createDom.
+ * @type {Element}
+ */
+Blockly.WidgetDiv.DIV = null;
+
+/**
+ * The object currently using this container.
+ * @type {Object}
+ * @private
+ */
+Blockly.WidgetDiv.owner_ = null;
+
+/**
+ * Optional cleanup function set by whichever object uses the widget.
+ * This is called as soon as a dispose is desired. If the dispose should
+ * be animated, the animation should start on the call of dispose_.
+ * @type {Function}
+ * @private
+ */
+Blockly.WidgetDiv.dispose_ = null;
+
+/**
+ * Optional function called at the end of a dispose animation.
+ * Set by whichever object is using the widget.
+ * @type {Function}
+ * @private
+ */
+Blockly.WidgetDiv.disposeAnimationFinished_ = null;
+
+/**
+ * Timer ID for the dispose animation.
+ * @type {number}
+ * @private
+ */
+Blockly.WidgetDiv.disposeAnimationTimer_ = null;
+
+/**
+ * Length of time in seconds for the dispose animation.
+ * @type {number}
+ * @private
+ */
+Blockly.WidgetDiv.disposeAnimationTimerLength_ = 0;
+
+
+/**
+ * Create the widget div and inject it onto the page.
+ */
+Blockly.WidgetDiv.createDom = function() {
+  if (Blockly.WidgetDiv.DIV) {
+    return;  // Already created.
+  }
+  // Create an HTML container for popup overlays (e.g. editor widgets).
+  Blockly.WidgetDiv.DIV =
+      goog.dom.createDom(goog.dom.TagName.DIV, 'blocklyWidgetDiv');
+  document.body.appendChild(Blockly.WidgetDiv.DIV);
+};
+
+/**
+ * Initialize and display the widget div.  Close the old one if needed.
+ * @param {!Object} newOwner The object that will be using this container.
+ * @param {boolean} rtl Right-to-left (true) or left-to-right (false).
+ * @param {Function=} opt_dispose Optional cleanup function to be run when the widget
+ *   is closed. If the dispose is animated, this function must start the animation.
+ * @param {Function=} opt_disposeAnimationFinished Optional cleanup function to be run
+ *   when the widget is done animating and must disappear.
+ * @param {number=} opt_disposeAnimationTimerLength Length of animation time in seconds
+     if a dispose animation is provided.
+ */
+Blockly.WidgetDiv.show = function(newOwner, rtl, opt_dispose,
+    opt_disposeAnimationFinished, opt_disposeAnimationTimerLength) {
+  Blockly.WidgetDiv.hide();
+  Blockly.WidgetDiv.owner_ = newOwner;
+  Blockly.WidgetDiv.dispose_ = opt_dispose;
+  Blockly.WidgetDiv.disposeAnimationFinished_ = opt_disposeAnimationFinished;
+  Blockly.WidgetDiv.disposeAnimationTimerLength_ = opt_disposeAnimationTimerLength;
+  // Temporarily move the widget to the top of the screen so that it does not
+  // cause a scrollbar jump in Firefox when displayed.
+  var xy = goog.style.getViewportPageOffset(document);
+  Blockly.WidgetDiv.DIV.style.top = xy.y + 'px';
+  Blockly.WidgetDiv.DIV.style.direction = rtl ? 'rtl' : 'ltr';
+  Blockly.WidgetDiv.DIV.style.display = 'block';
+};
+
+/**
+ *  Repositions the widgetDiv on window resize. If it doesn't know how to
+ *  calculate the new position, it wll just hide it instead.
+ */
+Blockly.WidgetDiv.repositionForWindowResize = function() {
+  // This condition mainly catches the widget div when it is being used as a
+  // text input.  It is important not to close it in this case because on Android,
+  // when a field is focused, the soft keyboard opens triggering a window resize
+  // event and we want the widget div to stick around so users can type into it.
+  if (Blockly.WidgetDiv.owner_
+      && Blockly.WidgetDiv.owner_.getScaledBBox_
+      && Blockly.WidgetDiv.owner_.getSize) {
+    var widgetScaledBBox = Blockly.WidgetDiv.owner_.getScaledBBox_();
+    var widgetSize = Blockly.WidgetDiv.owner_.getSize();
+    Blockly.WidgetDiv.positionInternal_(widgetScaledBBox.left, widgetScaledBBox.top,
+        widgetSize.height);
+  } else {
+    Blockly.WidgetDiv.hide();
+  }
+};
+
+/**
+ * Destroy the widget and hide the div.
+ * @param {boolean=} opt_noAnimate If set, animation will not be run for the hide.
+ */
+Blockly.WidgetDiv.hide = function(opt_noAnimate) {
+  if (Blockly.WidgetDiv.disposeAnimationTimer_) {
+    // An animation timer is set already.
+    // This happens when a previous widget was animating out,
+    // but Blockly is hiding the widget to create a new one.
+    // So, short-circuit the animation and clear the timer.
+    window.clearTimeout(Blockly.WidgetDiv.disposeAnimationTimer_);
+    Blockly.WidgetDiv.disposeAnimationFinished_ && Blockly.WidgetDiv.disposeAnimationFinished_();
+    Blockly.WidgetDiv.disposeAnimationFinished_ = null;
+    Blockly.WidgetDiv.disposeAnimationTimer_ = null;
+    Blockly.WidgetDiv.owner_ = null;
+    Blockly.WidgetDiv.hideAndClearDom_();
+  } else if (Blockly.WidgetDiv.isVisible()) {
+    // No animation timer set, but the widget is visible
+    // Start animation out (or immediately hide)
+    Blockly.WidgetDiv.dispose_ && Blockly.WidgetDiv.dispose_();
+    Blockly.WidgetDiv.dispose_ = null;
+    // If we want to animate out, set the appropriate timer for final dispose.
+    if (Blockly.WidgetDiv.disposeAnimationFinished_ && !opt_noAnimate) {
+      Blockly.WidgetDiv.disposeAnimationTimer_ = window.setTimeout(
+          Blockly.WidgetDiv.hide, // Come back to hide and take the first branch.
+          Blockly.WidgetDiv.disposeAnimationTimerLength_ * 1000
+      );
+    } else {
+      // No timer provided (or no animation desired) - auto-hide the DOM now.
+      Blockly.WidgetDiv.disposeAnimationFinished_ && Blockly.WidgetDiv.disposeAnimationFinished_();
+      Blockly.WidgetDiv.disposeAnimationFinished_ = null;
+      Blockly.WidgetDiv.owner_ = null;
+      Blockly.WidgetDiv.hideAndClearDom_();
+    }
+  }
+};
+
+/**
+ * Hide all DOM for the WidgetDiv, and clear its children.
+ * @private
+ */
+Blockly.WidgetDiv.hideAndClearDom_ = function() {
+  Blockly.WidgetDiv.DIV.style.display = 'none';
+  Blockly.WidgetDiv.DIV.style.left = '';
+  Blockly.WidgetDiv.DIV.style.top = '';
+  Blockly.WidgetDiv.DIV.style.height = '';
+  goog.dom.removeChildren(Blockly.WidgetDiv.DIV);
+};
+
+/**
+ * Is the container visible?
+ * @return {boolean} True if visible.
+ */
+Blockly.WidgetDiv.isVisible = function() {
+  return !!Blockly.WidgetDiv.owner_;
+};
+
+/**
+ * Destroy the widget and hide the div if it is being used by the specified
+ *   object.
+ * @param {!Object} oldOwner The object that was using this container.
+ */
+Blockly.WidgetDiv.hideIfOwner = function(oldOwner) {
+  if (Blockly.WidgetDiv.owner_ == oldOwner) {
+    Blockly.WidgetDiv.hide();
+  }
+};
+
+/**
+ * Position the widget at a given location.  Prevent the widget from going
+ * offscreen top or left (right in RTL).
+ * @param {number} anchorX Horizontal location (window coordinates, not body).
+ * @param {number} anchorY Vertical location (window coordinates, not body).
+ * @param {!goog.math.Size} windowSize Height/width of window.
+ * @param {!goog.math.Coordinate} scrollOffset X/y of window scrollbars.
+ * @param {boolean} rtl True if RTL, false if LTR.
+ */
+Blockly.WidgetDiv.position = function(anchorX, anchorY, windowSize,
+    scrollOffset, rtl) {
+  // Don't let the widget go above the top edge of the window.
+  if (anchorY < scrollOffset.y) {
+    anchorY = scrollOffset.y;
+  }
+  if (rtl) {
+    // Don't let the widget go right of the right edge of the window.
+    if (anchorX > windowSize.width + scrollOffset.x) {
+      anchorX = windowSize.width + scrollOffset.x;
+    }
+  } else {
+    // Don't let the widget go left of the left edge of the window.
+    if (anchorX < scrollOffset.x) {
+      anchorX = scrollOffset.x;
+    }
+  }
+  Blockly.WidgetDiv.positionInternal_(anchorX, anchorY, windowSize.height);
+};
+
+/**
+ * Set the widget div's position and height.  This function does nothing clever:
+ * it will not ensure that your widget div ends up in the visible window.
+ * @param {number} x Horizontal location (window coordinates, not body).
+ * @param {number} y Vertical location (window coordinates, not body).
+ * @param {number} height The height of the widget div (pixels).
+ * @private
+ */
+Blockly.WidgetDiv.positionInternal_ = function(x, y, height) {
+  Blockly.WidgetDiv.DIV.style.left = x + 'px';
+  Blockly.WidgetDiv.DIV.style.top = y + 'px';
+  Blockly.WidgetDiv.DIV.style.height = height + 'px';
+};
+
+/**
+ * Position the widget div based on an anchor rectangle.
+ * The widget should be placed adjacent to but not overlapping the anchor
+ * rectangle.  The preferred position is directly below and aligned to the left
+ * (ltr) or right (rtl) side of the anchor.
+ * @param {!Object} viewportBBox The bounding rectangle of the current viewport,
+ *     in window coordinates.
+ * @param {!Object} anchorBBox The bounding rectangle of the anchor, in window
+ *     coordinates.
+ * @param {!goog.math.Size} widgetSize The size of the widget that is inside the
+ *     widget div, in window coordinates.
+ * @param {boolean} rtl Whether the workspace is in RTL mode.  This determines
+ *     horizontal alignment.
+ * @package
+ */
+Blockly.WidgetDiv.positionWithAnchor = function(viewportBBox, anchorBBox,
+    widgetSize, rtl) {
+  var y = Blockly.WidgetDiv.calculateY_(viewportBBox, anchorBBox, widgetSize);
+  var x = Blockly.WidgetDiv.calculateX_(viewportBBox, anchorBBox, widgetSize,
+      rtl);
+  
+  if (y < 0) {
+    Blockly.WidgetDiv.positionInternal_(x, 0, widgetSize.height + y);
+  }
+  else {
+    Blockly.WidgetDiv.positionInternal_(x, y, widgetSize.height);
+  }
+};
+
+/**
+ * Calculate an x position (in window coordinates) such that the widget will not
+ * be offscreen on the right or left.
+ * @param {!Object} viewportBBox The bounding rectangle of the current viewport,
+ *     in window coordinates.
+ * @param {!Object} anchorBBox The bounding rectangle of the anchor, in window
+ *     coordinates.
+ * @param {goog.math.Size} widgetSize The dimensions of the widget inside the
+ *     widget div.
+ * @param {boolean} rtl Whether the Blockly workspace is in RTL mode.
+ * @return {number} A valid x-coordinate for the top left corner of the widget
+ *     div, in window coordinates.
+ * @private
+ */
+Blockly.WidgetDiv.calculateX_ = function(viewportBBox, anchorBBox, widgetSize,
+    rtl) {
+  if (rtl) {
+    // Try to align the right side of the field and the right side of the widget.
+    var widgetLeft = anchorBBox.right - widgetSize.width;
+    // Don't go offscreen left.
+    var x = Math.max(widgetLeft, viewportBBox.left);
+    // But really don't go offscreen right:
+    return Math.min(x, viewportBBox.right - widgetSize.width);
+  } else {
+    // Try to align the left side of the field and the left side of the widget.
+    // Don't go offscreen right.
+    var x = Math.min(anchorBBox.left,
+        viewportBBox.right - widgetSize.width);
+    // But left is more important, because that's where the text is.
+    return Math.max(x, viewportBBox.left);
+  }
+};
+
+/**
+ * Calculate a y position (in window coordinates) such that the widget will not
+ * be offscreen on the top or bottom.
+ * @param {!Object} viewportBBox The bounding rectangle of the current viewport,
+ *     in window coordinates.
+ * @param {!Object} anchorBBox The bounding rectangle of the anchor, in window
+ *     coordinates.
+ * @param {goog.math.Size} widgetSize The dimensions of the widget inside the
+ *     widget div.
+ * @return {number} A valid y-coordinate for the top left corner of the widget
+ *     div, in window coordinates.
+ * @private
+ */
+Blockly.WidgetDiv.calculateY_ = function(viewportBBox, anchorBBox, widgetSize) {
+  // Flip the widget vertically if off the bottom.
+  if (anchorBBox.bottom + widgetSize.height >=
+      viewportBBox.bottom) {
+    // The bottom of the widget is at the top of the field.
+    return anchorBBox.top - widgetSize.height;
+    // The widget could go off the top of the window, but it would also go off
+    // the bottom.  The window is just too small.
+  } else {
+    // The top of the widget is at the bottom of the field.
+    return anchorBBox.bottom;
+  }
+};