@blockdia/scratch-blocks 0.1.0

package/core/flyout_button.js

@@ -0,0 +1,324 @@
+/**
+ * @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 or label in the flyout. Labels behave the same as buttons,
+ * but are styled differently.
+ * @param {!Blockly.WorkspaceSvg} workspace The workspace in which to place this
+ *     button.
+ * @param {!Blockly.WorkspaceSvg} targetWorkspace The flyout's target workspace.
+ * @param {!Element} xml The XML specifying the label/button.
+ * @param {boolean} isLabel Whether this button should be styled as a label.
+ * @constructor
+ */
+Blockly.FlyoutButton = function(workspace, targetWorkspace, xml, isLabel) {
+
+  this.init(workspace, targetWorkspace, xml, isLabel);
+
+  /**
+   * Function to call when this button is clicked.
+   * @type {function(!Blockly.FlyoutButton)}
+   * @private
+   */
+  this.callback_ = null;
+
+  var callbackKey = xml.getAttribute('callbackKey');
+  if (this.isLabel_ && callbackKey) {
+    console.warn('Labels should not have callbacks. Label text: ' + this.text_);
+  } else if (!this.isLabel_ &&
+      !(callbackKey && targetWorkspace.getButtonCallback(callbackKey))) {
+    console.warn('Buttons should have callbacks. Button text: ' + this.text_);
+  } else {
+    this.callback_ = targetWorkspace.getButtonCallback(callbackKey);
+  }
+
+  this.callbackData_ = xml.getAttribute('callbackData');
+};
+
+/**
+ * The margin around the text in the button.
+ */
+Blockly.FlyoutButton.MARGIN = 40;
+
+/**
+ * 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 = 40; // Can't be computed like the width
+
+/**
+ * Opaque data that can be passed to Blockly.unbindEvent_.
+ * @type {Array.<!Array>}
+ * @private
+ */
+Blockly.FlyoutButton.prototype.onMouseUpWrapper_ = null;
+
+/**
+* Initialize the button or label. This is a helper function to so that the
+* constructor can be overridden.
+* @param {!Blockly.WorkspaceSvg} workspace The workspace in which to place this
+*     button.
+* @param {!Blockly.WorkspaceSvg} targetWorkspace The flyout's target workspace.
+* @param {!Element} xml The XML specifying the label/button.
+* @param {boolean} isLabel Whether this button should be styled as a label.
+ */
+Blockly.FlyoutButton.prototype.init = function(
+    workspace, targetWorkspace, xml, isLabel) {
+
+  /**
+   * @type {!Blockly.WorkspaceSvg}
+   * @private
+   */
+  this.workspace_ = workspace;
+
+  /**
+   * @type {!Blockly.Workspace}
+   * @private
+   */
+  this.targetWorkspace_ = targetWorkspace;
+
+  /**
+   * @type {string}
+   * @private
+   */
+  this.text_ = xml.getAttribute('text');
+
+  /**
+   * @type {!goog.math.Coordinate}
+   * @private
+   */
+  this.position_ = new goog.math.Coordinate(0, 0);
+
+  /**
+   * Whether this button should be styled as a label.
+   * @type {boolean}
+   * @private
+   */
+  this.isLabel_ = isLabel;
+
+  /**
+   * Whether this button is a label at the top of a category.
+   * @type {boolean}
+   * @private
+   */
+  this.isCategoryLabel_ = xml.getAttribute('category-label') === 'true';
+
+  /**
+   * If specified, a CSS class to add to this button.
+   * @type {?string}
+   * @private
+   */
+  this.cssClass_ = xml.getAttribute('web-class') || null;
+};
+
+/**
+ * Create the button elements.
+ * @return {!Element} The button's SVG group.
+ */
+Blockly.FlyoutButton.prototype.createDom = function() {
+  var cssClass = this.isLabel_ ? 'blocklyFlyoutLabel' : 'blocklyFlyoutButton';
+  if (this.cssClass_) {
+    cssClass += ' ' + this.cssClass_;
+  }
+
+  this.svgGroup_ = Blockly.utils.createSvgElement('g', {'class': cssClass},
+      this.workspace_.getCanvas());
+
+  this.addTextSvg(this.isLabel_);
+
+  this.mouseUpWrapper_ = Blockly.bindEventWithChecks_(this.svgGroup_, 'mouseup',
+      this, this.onMouseUp_);
+  return this.svgGroup_;
+};
+
+/**
+ * Add the text element for the label or button.
+ * @param {boolean} isLabel True if this is a label and not button.
+ * @package
+ */
+Blockly.FlyoutButton.prototype.addTextSvg = function(isLabel) {
+  if (!isLabel) {
+    // Shadow rectangle (light source does not mirror in RTL).
+    var shadow = Blockly.utils.createSvgElement('rect',
+        {
+          'class': 'blocklyFlyoutButtonShadow',
+          'rx': 4,
+          'ry': 4,
+          'x': 1,
+          'y': 1
+        },
+        this.svgGroup_);
+  }
+  // Background rectangle.
+  var rect = Blockly.utils.createSvgElement('rect',
+      {
+        'class': isLabel ?
+            'blocklyFlyoutLabelBackground' : 'blocklyFlyoutButtonBackground',
+        'rx': 4, 'ry': 4
+      },
+      this.svgGroup_);
+
+  var svgText = Blockly.utils.createSvgElement('text',
+      {
+        'class': isLabel ? 'blocklyFlyoutLabelText' : 'blocklyText',
+        'x': 0,
+        'y': 0,
+        'text-anchor': 'middle'
+      },
+      this.svgGroup_);
+  svgText.textContent = Blockly.utils.replaceMessageReferences(this.text_);
+
+  this.width = Blockly.Field.getCachedWidth(svgText);
+
+  if (!isLabel) {
+    this.width += 2 * Blockly.FlyoutButton.MARGIN;
+    shadow.setAttribute('width', this.width);
+    shadow.setAttribute('height', this.height);
+  }
+
+  rect.setAttribute('width', this.width);
+  rect.setAttribute('height', this.height);
+
+  svgText.setAttribute('text-anchor', 'middle');
+  svgText.setAttribute('dominant-baseline', 'central');
+  svgText.setAttribute('dy', goog.userAgent.EDGE_OR_IE ?
+    Blockly.Field.IE_TEXT_OFFSET : '0');
+  svgText.setAttribute('x', this.width / 2);
+  svgText.setAttribute('y', this.height / 2);
+};
+
+/**
+ * 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.
+ * @private
+ */
+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_();
+};
+
+/**
+ * Get the button's target workspace.
+ * @return {!Blockly.WorkspaceSvg} The target workspace of the flyout where this
+ *     button resides.
+ */
+Blockly.FlyoutButton.prototype.getTargetWorkspace = function() {
+  return this.targetWorkspace_;
+};
+
+/**
+ * Get whether this button is a label at the top of a category.
+ * @return {boolean} True if it is a category label.
+ * @package
+ */
+Blockly.FlyoutButton.prototype.getIsCategoryLabel = function() {
+  return this.isCategoryLabel_;
+};
+
+/**
+ * Get the text of this button.
+ * @return {string} The text on the button.
+ * @package
+ */
+Blockly.FlyoutButton.prototype.getText = function() {
+  return this.text_;
+};
+
+/**
+ * Get the position of this button.
+ * @return {!goog.math.Coordinate} The button position.
+ * @package
+ */
+Blockly.FlyoutButton.prototype.getPosition = function() {
+  return this.position_;
+};
+
+/**
+ * Dispose of this button.
+ */
+Blockly.FlyoutButton.prototype.dispose = function() {
+  if (this.onMouseUpWrapper_) {
+    Blockly.unbindEvent_(this.onMouseUpWrapper_);
+  }
+  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.
+ * @private
+ */
+Blockly.FlyoutButton.prototype.onMouseUp_ = function(e) {
+  var gesture = this.targetWorkspace_.getGesture(e);
+  if (gesture) {
+    // If we're in the middle of dragging something (blocks, workspace, etc.) ignore the button.
+    // Otherwise, cancel the gesture.
+    if (gesture.isDragging()) {
+      return;
+    }
+    gesture.cancel();
+  }
+
+  // Call the callback registered to this button.
+  if (this.callback_) {
+    this.callback_(this);
+  }
+};

package/core/flyout_dragger.js

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2017 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 Methods for dragging a flyout visually.
+ * @author fenichel@google.com (Rachel Fenichel)
+ */
+'use strict';
+
+goog.provide('Blockly.FlyoutDragger');
+
+goog.require('Blockly.WorkspaceDragger');
+
+goog.require('goog.asserts');
+goog.require('goog.math.Coordinate');
+
+
+/**
+ * Class for a flyout dragger.  It moves a flyout workspace around when it is
+ * being dragged by a mouse or touch.
+ * Note that the workspace itself manages whether or not it has a drag surface
+ * and how to do translations based on that.  This simply passes the right
+ * commands based on events.
+ * @param {!Blockly.Flyout} flyout The flyout to drag.
+ * @constructor
+ */
+Blockly.FlyoutDragger = function(flyout) {
+  Blockly.FlyoutDragger.superClass_.constructor.call(this,
+      flyout.getWorkspace());
+
+  /**
+   * The scrollbar to update to move the flyout.
+   * Unlike the main workspace, the flyout has only one scrollbar, in either the
+   * horizontal or the vertical direction.
+   * @type {!Blockly.Scrollbar}
+   * @private
+   */
+  this.scrollbar_ = flyout.scrollbar_;
+
+  /**
+   * Whether the flyout scrolls horizontally.  If false, the flyout scrolls
+   * vertically.
+   * @type {boolean}
+   * @private
+   */
+  this.horizontalLayout_ = flyout.horizontalLayout_;
+};
+goog.inherits(Blockly.FlyoutDragger, Blockly.WorkspaceDragger);
+
+/**
+ * Move the appropriate scrollbar to drag the flyout.
+ * Since flyouts only scroll in one direction at a time, this will discard one
+ * of the calculated values.
+ * x and y are in pixels.
+ * @param {number} x The new x position to move the scrollbar to.
+ * @param {number} y The new y position to move the scrollbar to.
+ * @private
+ */
+Blockly.FlyoutDragger.prototype.updateScroll_ = function(x, y) {
+  // Move the scrollbar and the flyout will scroll automatically.
+  if (this.horizontalLayout_) {
+    this.scrollbar_.set(x);
+  } else {
+    this.scrollbar_.set(y);
+  }
+};

package/core/flyout_extension_category_header.js

@@ -0,0 +1,159 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2018 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 category header in the flyout for Scratch
+ * extensions which can display a textual label and a status button.
+ * @author ericr@media.mit.edu (Eric Rosenbaum)
+ */
+'use strict';
+
+goog.provide('Blockly.FlyoutExtensionCategoryHeader');
+
+goog.require('Blockly.FlyoutButton');
+
+/**
+ * Class for a category header in the flyout for Scratch extensions which can
+ * display a textual label and a status button.
+ * @param {!Blockly.WorkspaceSvg} workspace The workspace in which to place this
+ *     header.
+ * @param {!Blockly.WorkspaceSvg} targetWorkspace The flyout's target workspace.
+ * @param {!Element} xml The XML specifying the header.
+ * @extends {Blockly.FlyoutButton}
+ * @constructor
+ */
+Blockly.FlyoutExtensionCategoryHeader = function(workspace, targetWorkspace, xml) {
+
+  this.init(workspace, targetWorkspace, xml, false);
+
+  /**
+   * @type {number}
+   * @private
+   */
+  this.flyoutWidth_ = this.targetWorkspace_.getFlyout().getWidth();
+
+  /**
+   * @type {string}
+   */
+  this.extensionId = xml.getAttribute('id');
+
+  /**
+   * Whether this is a label at the top of a category.
+   * @type {boolean}
+   * @private
+   */
+  this.isCategoryLabel_ = true;
+};
+goog.inherits(Blockly.FlyoutExtensionCategoryHeader, Blockly.FlyoutButton);
+
+/**
+ * Create the label and button elements.
+ * @return {!Element} The SVG group.
+ */
+Blockly.FlyoutExtensionCategoryHeader.prototype.createDom = function() {
+  var cssClass = 'blocklyFlyoutLabel';
+
+  this.svgGroup_ = Blockly.utils.createSvgElement('g', {'class': cssClass},
+      this.workspace_.getCanvas());
+
+  this.addTextSvg(true);
+
+  this.refreshStatus();
+
+  var statusButtonWidth = 30;
+  var marginX = 20;
+  var marginY = 5;
+  var touchPadding = 16;
+
+  var statusButtonX = this.workspace_.RTL ? (marginX - this.flyoutWidth_ + statusButtonWidth) :
+      (this.flyoutWidth_ - statusButtonWidth - marginX) / this.workspace_.scale;
+
+  if (this.imageSrc_) {
+    /** @type {SVGElement} */
+    this.imageElement_ = Blockly.utils.createSvgElement(
+        'image',
+        {
+          'class': 'blocklyFlyoutButton',
+          'height': statusButtonWidth + 'px',
+          'width': statusButtonWidth + 'px',
+          'x': statusButtonX + 'px',
+          'y': marginY + 'px'
+        },
+        this.svgGroup_);
+    this.imageElementBackground_ = Blockly.utils.createSvgElement(
+        'rect',
+        {
+          'class': 'blocklyTouchTargetBackground',
+          'height': statusButtonWidth + 2 * touchPadding + 'px',
+          'width': statusButtonWidth + 2 * touchPadding + 'px',
+          'x': (statusButtonX - touchPadding) + 'px',
+          'y': (marginY - touchPadding) + 'px'
+        },
+        this.svgGroup_);
+    this.setImageSrc(this.imageSrc_);
+  }
+
+  this.callback_ = Blockly.statusButtonCallback.bind(this, this.extensionId);
+
+  this.mouseUpWrapper_ = Blockly.bindEventWithChecks_(this.imageElementBackground_, 'mouseup',
+      this, this.onMouseUp_);
+  return this.svgGroup_;
+};
+
+/**
+ * Set the image on the status button using a status string.
+ */
+Blockly.FlyoutExtensionCategoryHeader.prototype.refreshStatus = function() {
+  var status = Blockly.FlyoutExtensionCategoryHeader.getExtensionState(this.extensionId);
+  var basePath = Blockly.mainWorkspace.options.pathToMedia;
+  if (status == Blockly.StatusButtonState.READY) {
+    this.setImageSrc(basePath + 'status-ready.svg');
+  }
+  if (status == Blockly.StatusButtonState.NOT_READY) {
+    this.setImageSrc(basePath + 'status-not-ready.svg');
+  }
+};
+
+/**
+ * Set the source URL of the image for the button.
+ * @param {?string} src New source.
+ * @package
+ */
+Blockly.FlyoutExtensionCategoryHeader.prototype.setImageSrc = function(src) {
+  if (src === null) {
+    // No change if null.
+    return;
+  }
+  this.imageSrc_ = src;
+  if (this.imageElement_) {
+    this.imageElement_.setAttributeNS('http://www.w3.org/1999/xlink',
+        'xlink:href', this.imageSrc_ || '');
+  }
+};
+
+/**
+ * Gets the extension state. Overridden externally.
+ * @param {string} extensionId The ID of the extension in question.
+ * @return {Blockly.StatusButtonState} The state of the extension.
+ * @public
+ */
+Blockly.FlyoutExtensionCategoryHeader.getExtensionState = function(/* extensionId */) {
+  return Blockly.StatusButtonState.NOT_READY;
+};