nodeskini 1.0.0 → 1.0.2

package/blocklySkini/blockly/core/flyout_button.js

@@ -0,0 +1,325 @@
+/**
+ * @license
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Class for a button in the flyout.
+ * @author fenichel@google.com (Rachel Fenichel)
+ */
+'use strict';
+
+goog.provide('Blockly.FlyoutButton');
+
+goog.require('Blockly.Css');
+goog.require('Blockly.utils');
+goog.require('Blockly.utils.Coordinate');
+goog.require('Blockly.utils.dom');
+goog.require('Blockly.utils.Svg');
+
+
+/**
+ * Class for a button in the flyout.
+ * @param {!Blockly.WorkspaceSvg} workspace The workspace in which to place this
+ *     button.
+ * @param {!Blockly.WorkspaceSvg} targetWorkspace The flyout's target workspace.
+ * @param {!Blockly.utils.toolbox.ButtonOrLabelInfo} json
+ *    The JSON specifying the label/button.
+ * @param {boolean} isLabel Whether this button should be styled as a label.
+ * @constructor
+ * @package
+ */
+Blockly.FlyoutButton = function(workspace, targetWorkspace, json, isLabel) {
+  // Labels behave the same as buttons, but are styled differently.
+
+  /**
+   * @type {!Blockly.WorkspaceSvg}
+   * @private
+   */
+  this.workspace_ = workspace;
+
+  /**
+   * @type {!Blockly.WorkspaceSvg}
+   * @private
+   */
+  this.targetWorkspace_ = targetWorkspace;
+
+  /**
+   * @type {string}
+   * @private
+   */
+  this.text_ = json['text'];
+
+  /**
+   * @type {!Blockly.utils.Coordinate}
+   * @private
+   */
+  this.position_ = new Blockly.utils.Coordinate(0, 0);
+
+  /**
+   * Whether this button should be styled as a label.
+   * @type {boolean}
+   * @private
+   */
+  this.isLabel_ = isLabel;
+
+  /**
+   * The key to the function called when this button is clicked.
+   * @type {string}
+   * @private
+   */
+  this.callbackKey_ = json['callbackKey'] ||
+  /* Check the lower case version too to satisfy IE */
+                      json['callbackkey'];
+
+  /**
+   * If specified, a CSS class to add to this button.
+   * @type {?string}
+   * @private
+   */
+  this.cssClass_ = json['web-class'] || null;
+
+  /**
+   * Mouse up event data.
+   * @type {?Blockly.EventData}
+   * @private
+   */
+  this.onMouseUpWrapper_ = null;
+
+  /**
+   * The JSON specifying the label / button.
+   * @type {!Blockly.utils.toolbox.ButtonOrLabelInfo}
+   */
+  this.info = json;
+};
+
+/**
+ * The horizontal margin around the text in the button.
+ */
+Blockly.FlyoutButton.MARGIN_X = 5;
+
+/**
+ * The vertical margin around the text in the button.
+ */
+Blockly.FlyoutButton.MARGIN_Y = 2;
+
+/**
+ * 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 {!SVGElement} 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.dom.createSvgElement(
+      Blockly.utils.Svg.G, {'class': cssClass},
+      this.workspace_.getCanvas());
+
+  if (!this.isLabel_) {
+    // Shadow rectangle (light source does not mirror in RTL).
+    var shadow = Blockly.utils.dom.createSvgElement(
+        Blockly.utils.Svg.RECT,
+        {
+          'class': 'blocklyFlyoutButtonShadow',
+          'rx': 4, 'ry': 4, 'x': 1, 'y': 1
+        },
+        this.svgGroup_);
+  }
+  // Background rectangle.
+  var rect = Blockly.utils.dom.createSvgElement(
+      Blockly.utils.Svg.RECT,
+      {
+        'class': this.isLabel_ ?
+            'blocklyFlyoutLabelBackground' : 'blocklyFlyoutButtonBackground',
+        'rx': 4, 'ry': 4
+      },
+      this.svgGroup_);
+
+  var svgText = Blockly.utils.dom.createSvgElement(
+      Blockly.utils.Svg.TEXT,
+      {
+        'class': this.isLabel_ ? 'blocklyFlyoutLabelText' : 'blocklyText',
+        'x': 0,
+        'y': 0,
+        'text-anchor': 'middle'
+      },
+      this.svgGroup_);
+  var text = Blockly.utils.replaceMessageReferences(this.text_);
+  if (this.workspace_.RTL) {
+    // Force text to be RTL by adding an RLM.
+    text += '\u200F';
+  }
+  svgText.textContent = text;
+  if (this.isLabel_) {
+    this.svgText_ = svgText;
+    this.workspace_.getThemeManager().subscribe(this.svgText_,
+        'flyoutForegroundColour', 'fill');
+  }
+
+  var fontSize = Blockly.utils.style.getComputedStyle(svgText, 'fontSize');
+  var fontWeight = Blockly.utils.style.getComputedStyle(svgText, 'fontWeight');
+  var fontFamily = Blockly.utils.style.getComputedStyle(svgText, 'fontFamily');
+  this.width = Blockly.utils.dom.getFastTextWidthWithSizeString(svgText,
+      fontSize, fontWeight, fontFamily);
+  var fontMetrics = Blockly.utils.dom.measureFontMetrics(text, fontSize,
+      fontWeight, fontFamily);
+  this.height = fontMetrics.height;
+
+  if (!this.isLabel_) {
+    this.width += 2 * Blockly.FlyoutButton.MARGIN_X;
+    this.height += 2 * Blockly.FlyoutButton.MARGIN_Y;
+    shadow.setAttribute('width', this.width);
+    shadow.setAttribute('height', this.height);
+  }
+  rect.setAttribute('width', this.width);
+  rect.setAttribute('height', this.height);
+
+  svgText.setAttribute('x', this.width / 2);
+  svgText.setAttribute('y', this.height / 2 - fontMetrics.height / 2 +
+      fontMetrics.baseline);
+
+  this.updateTransform_();
+
+  this.onMouseUpWrapper_ = Blockly.bindEventWithChecks_(
+      this.svgGroup_, 'mouseup', this, this.onMouseUp_);
+  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.
+ * @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_();
+};
+
+/**
+ * @return {boolean} Whether or not the button is a label.
+ */
+Blockly.FlyoutButton.prototype.isLabel = function() {
+  return this.isLabel_;
+};
+
+/**
+ * Location of the button.
+ * @return {!Blockly.utils.Coordinate} x, y coordinates.
+ * @package
+ */
+Blockly.FlyoutButton.prototype.getPosition = function() {
+  return this.position_;
+};
+
+/**
+ * @return {string} Text of the button.
+ */
+Blockly.FlyoutButton.prototype.getButtonText = function() {
+  return this.text_;
+};
+
+/**
+ * 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_;
+};
+
+/**
+ * Dispose of this button.
+ */
+Blockly.FlyoutButton.prototype.dispose = function() {
+  if (this.onMouseUpWrapper_) {
+    Blockly.unbindEvent_(this.onMouseUpWrapper_);
+  }
+  if (this.svgGroup_) {
+    Blockly.utils.dom.removeNode(this.svgGroup_);
+  }
+  if (this.svgText_) {
+    this.workspace_.getThemeManager().unsubscribe(this.svgText_);
+  }
+};
+
+/**
+ * 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) {
+    gesture.cancel();
+  }
+
+  if (this.isLabel_ && this.callbackKey_) {
+    console.warn('Labels should not have callbacks. Label text: ' + this.text_);
+  } else if (!this.isLabel_ && !(this.callbackKey_ &&
+      this.targetWorkspace_.getButtonCallback(this.callbackKey_))) {
+    console.warn('Buttons should have callbacks. Button text: ' + this.text_);
+  } else if (!this.isLabel_) {
+    this.targetWorkspace_.getButtonCallback(this.callbackKey_)(this);
+  }
+};
+
+/**
+ * CSS for buttons and labels.  See css.js for use.
+ */
+Blockly.Css.register([
+  /* eslint-disable indent */
+  '.blocklyFlyoutButton {',
+    'fill: #888;',
+    'cursor: default;',
+  '}',
+
+  '.blocklyFlyoutButtonShadow {',
+    'fill: #666;',
+  '}',
+
+  '.blocklyFlyoutButton:hover {',
+    'fill: #aaa;',
+  '}',
+
+  '.blocklyFlyoutLabel {',
+    'cursor: default;',
+  '}',
+
+  '.blocklyFlyoutLabelBackground {',
+    'opacity: 0;',
+  '}',
+  /* eslint-enable indent */
+]);

package/blocklySkini/blockly/core/flyout_dragger.js

@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Methods for dragging a flyout visually.
+ * @author fenichel@google.com (Rachel Fenichel)
+ */
+'use strict';
+
+goog.provide('Blockly.FlyoutDragger');
+
+goog.require('Blockly.utils.object');
+goog.require('Blockly.WorkspaceDragger');
+
+goog.requireType('Blockly.IFlyout');
+
+
+/**
+ * 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.IFlyout} flyout The flyout to drag.
+ * @extends {Blockly.WorkspaceDragger}
+ * @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;
+};
+Blockly.utils.object.inherits(Blockly.FlyoutDragger, Blockly.WorkspaceDragger);
+
+/**
+ * Move the flyout based on the most recent mouse movements.
+ * @param {!Blockly.utils.Coordinate} currentDragDeltaXY How far the pointer has
+ *     moved from the position at the start of the drag, in pixel coordinates.
+ * @package
+ */
+Blockly.FlyoutDragger.prototype.drag = function(currentDragDeltaXY) {
+  // startScrollXY_ is assigned by the superclass.
+  var newXY = Blockly.utils.Coordinate.sum(this.startScrollXY_,
+      currentDragDeltaXY);
+
+  // We can't call workspace.scroll because the flyout's workspace doesn't own
+  // it's own scrollbars. This is because (as of 2.20190722.1) the
+  // workspace's scrollbar property must be a scrollbar pair, rather than a
+  // single scrollbar.
+  // Instead we'll just expect setting the scrollbar to update the scroll of
+  // the workspace as well.
+  if (this.horizontalLayout_) {
+    this.scrollbar_.set(-newXY.x);
+  } else {
+    this.scrollbar_.set(-newXY.y);
+  }
+};