@blockdia/scratch-blocks 0.1.0

package/core/bubble_dragger.js

@@ -0,0 +1,285 @@
+/**
+ * @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 Methods for dragging a bubble visually.
+ * @author fenichel@google.com (Rachel Fenichel)
+ */
+'use strict';
+
+goog.provide('Blockly.BubbleDragger');
+
+goog.require('Blockly.Bubble');
+goog.require('Blockly.Events.CommentMove');
+goog.require('Blockly.WorkspaceCommentSvg');
+
+goog.require('goog.math.Coordinate');
+goog.require('goog.asserts');
+
+
+/**
+ * Class for a bubble dragger.  It moves things on the bubble canvas around the
+ * workspace when they are being dragged by a mouse or touch.  These can be
+ * block comments, mutators, warnings, or workspace comments.
+ * @param {!Blockly.Bubble|!Blockly.WorkspaceCommentSvg} bubble The item on the
+ *     bubble canvas to drag.
+ * @param {!Blockly.WorkspaceSvg} workspace The workspace to drag on.
+ * @constructor
+ */
+Blockly.BubbleDragger = function(bubble, workspace) {
+  /**
+   * The item on the bubble canvas that is being dragged.
+   * @type {!Blockly.Bubble|!Blockly.WorkspaceCommentSvg}
+   * @private
+   */
+  this.draggingBubble_ = bubble;
+
+  /**
+   * The workspace on which the bubble is being dragged.
+   * @type {!Blockly.WorkspaceSvg}
+   * @private
+   */
+  this.workspace_ = workspace;
+
+  /**
+   * Which delete area the mouse pointer is over, if any.
+   * One of {@link Blockly.DELETE_AREA_TRASH},
+   * {@link Blockly.DELETE_AREA_TOOLBOX}, or {@link Blockly.DELETE_AREA_NONE}.
+   * @type {?number}
+   * @private
+   */
+  this.deleteArea_ = null;
+
+  /**
+   * Whether the bubble would be deleted if dropped immediately.
+   * @type {boolean}
+   * @private
+   */
+  this.wouldDeleteBubble_ = false;
+
+  /**
+   * The location of the top left corner of the dragging bubble's body at the
+   * beginning of the drag, in workspace coordinates.
+   * @type {!goog.math.Coordinate}
+   * @private
+   */
+  this.startXY_ = this.draggingBubble_.getRelativeToSurfaceXY();
+
+  /**
+   * The drag surface to move bubbles to during a drag, or null if none should
+   * be used.  Block dragging and bubble dragging use the same surface.
+   * @type {?Blockly.BlockDragSurfaceSvg}
+   * @private
+   */
+  this.dragSurface_ =
+      Blockly.utils.is3dSupported() && !!workspace.getBlockDragSurface() ?
+      workspace.getBlockDragSurface() : null;
+};
+
+/**
+ * Sever all links from this object.
+ * @package
+ */
+Blockly.BubbleDragger.prototype.dispose = function() {
+  this.draggingBubble_ = null;
+  this.workspace_ = null;
+  this.dragSurface_ = null;
+};
+
+/**
+ * Start dragging a bubble.  This includes moving it to the drag surface.
+ * @package
+ */
+Blockly.BubbleDragger.prototype.startBubbleDrag = function() {
+  if (!Blockly.Events.getGroup()) {
+    Blockly.Events.setGroup(true);
+  }
+
+  this.workspace_.setResizesEnabled(false);
+  this.draggingBubble_.setAutoLayout(false);
+  if (this.dragSurface_) {
+    this.moveToDragSurface_();
+  }
+
+  this.draggingBubble_.setDragging && this.draggingBubble_.setDragging(true);
+
+  var toolbox = this.workspace_.getToolbox();
+  if (toolbox) {
+    var style = this.draggingBubble_.isDeletable() ? 'blocklyToolboxDelete' :
+        'blocklyToolboxGrab';
+    toolbox.addStyle(style);
+  }
+};
+
+/**
+ * Execute a step of bubble dragging, based on the given event.  Update the
+ * display accordingly.
+ * @param {!Event} e The most recent move event.
+ * @param {!goog.math.Coordinate} currentDragDeltaXY How far the pointer has
+ *     moved from the position at the start of the drag, in pixel units.
+ * @package
+ */
+Blockly.BubbleDragger.prototype.dragBubble = function(e, currentDragDeltaXY) {
+  var delta = this.pixelsToWorkspaceUnits_(currentDragDeltaXY);
+  var newLoc = goog.math.Coordinate.sum(this.startXY_, delta);
+
+  this.draggingBubble_.moveDuringDrag(this.dragSurface_, newLoc);
+
+  if (this.draggingBubble_.isDeletable()) {
+    this.deleteArea_ =  this.workspace_.isDeleteArea(e);
+    this.updateCursorDuringBubbleDrag_();
+  }
+};
+
+/**
+ * Shut the trash can and, if necessary, delete the dragging bubble.
+ * Should be called at the end of a bubble drag.
+ * @return {boolean} whether the bubble was deleted.
+ * @private
+ */
+Blockly.BubbleDragger.prototype.maybeDeleteBubble_ = function() {
+  var trashcan = this.workspace_.trashcan;
+
+  if (this.wouldDeleteBubble_) {
+    if (trashcan) {
+      setTimeout(trashcan.close.bind(trashcan), 100);
+    }
+    // Fire a move event, so we know where to go back to for an undo.
+    this.fireMoveEvent_();
+    this.draggingBubble_.dispose(false, true);
+  } else if (trashcan) {
+    // Make sure the trash can is closed.
+    trashcan.close();
+  }
+  return this.wouldDeleteBubble_;
+};
+
+/**
+ * Update the cursor (and possibly the trash can lid) to reflect whether the
+ * dragging bubble would be deleted if released immediately.
+ * @private
+ */
+Blockly.BubbleDragger.prototype.updateCursorDuringBubbleDrag_ = function() {
+  this.wouldDeleteBubble_ = this.deleteArea_ != Blockly.DELETE_AREA_NONE;
+  var trashcan = this.workspace_.trashcan;
+  if (this.wouldDeleteBubble_) {
+    this.draggingBubble_.setDeleteStyle(true);
+    if (this.deleteArea_ == Blockly.DELETE_AREA_TRASH && trashcan) {
+      trashcan.setOpen_(true);
+    }
+  } else {
+    this.draggingBubble_.setDeleteStyle(false);
+    if (trashcan) {
+      trashcan.setOpen_(false);
+    }
+  }
+};
+
+/**
+ * Finish a bubble drag and put the bubble back on the workspace.
+ * @param {!Event} e The mouseup/touchend event.
+ * @param {!goog.math.Coordinate} currentDragDeltaXY How far the pointer has
+ *     moved from the position at the start of the drag, in pixel units.
+ * @package
+ */
+Blockly.BubbleDragger.prototype.endBubbleDrag = function(
+    e, currentDragDeltaXY) {
+  // Make sure internal state is fresh.
+  this.dragBubble(e, currentDragDeltaXY);
+
+  var delta = this.pixelsToWorkspaceUnits_(currentDragDeltaXY);
+  var newLoc = goog.math.Coordinate.sum(this.startXY_, delta);
+
+  // Move the bubble to its final location.
+  this.draggingBubble_.moveTo(newLoc.x, newLoc.y);
+  var deleted = this.maybeDeleteBubble_();
+
+  if (!deleted) {
+    // Put everything back onto the bubble canvas.
+    if (this.dragSurface_) {
+      this.dragSurface_.clearAndHide(this.workspace_.getBubbleCanvas());
+    }
+
+    this.draggingBubble_.setDragging && this.draggingBubble_.setDragging(false);
+    this.fireMoveEvent_();
+  }
+  this.workspace_.setResizesEnabled(true);
+
+  if (this.workspace_.toolbox_) {
+    var style = this.draggingBubble_.isDeletable() ? 'blocklyToolboxDelete' :
+        'blocklyToolboxGrab';
+    this.workspace_.toolbox_.removeStyle(style);
+  }
+  Blockly.Events.setGroup(false);
+};
+
+/**
+ * Fire a move event at the end of a bubble drag.
+ * @private
+ */
+Blockly.BubbleDragger.prototype.fireMoveEvent_ = function() {
+  var event = null;
+  if (this.draggingBubble_.isComment) {
+    event = new Blockly.Events.CommentMove(this.draggingBubble_);
+  } else if (this.draggingBubble_ instanceof Blockly.ScratchBubble) {
+    event = new Blockly.Events.CommentMove(this.draggingBubble_.comment);
+  } else {
+    return;
+  }
+  event.setOldCoordinate(this.startXY_);
+  event.recordNew();
+  Blockly.Events.fire(event);
+};
+
+/**
+ * Convert a coordinate object from pixels to workspace units, including a
+ * correction for mutator workspaces.
+ * This function does not consider differing origins.  It simply scales the
+ * input's x and y values.
+ * @param {!goog.math.Coordinate} pixelCoord A coordinate with x and y values
+ *     in css pixel units.
+ * @return {!goog.math.Coordinate} The input coordinate divided by the workspace
+ *     scale.
+ * @private
+ */
+Blockly.BubbleDragger.prototype.pixelsToWorkspaceUnits_ = function(pixelCoord) {
+  var result = new goog.math.Coordinate(pixelCoord.x / this.workspace_.scale,
+      pixelCoord.y / this.workspace_.scale);
+  if (this.workspace_.isMutator) {
+    // If we're in a mutator, its scale is always 1, purely because of some
+    // oddities in our rendering optimizations.  The actual scale is the same as
+    // the scale on the parent workspace.
+    // Fix that for dragging.
+    var mainScale = this.workspace_.options.parentWorkspace.scale;
+    result = result.scale(1 / mainScale);
+  }
+  return result;
+};
+/**
+ * Move the bubble onto the drag surface at the beginning of a drag.  Move the
+ * drag surface to preserve the apparent location of the bubble.
+ * @private
+ */
+Blockly.BubbleDragger.prototype.moveToDragSurface_ = function() {
+  this.draggingBubble_.moveTo(0, 0);
+  this.dragSurface_.translateSurface(this.startXY_.x, this.startXY_.y);
+  // Execute the move on the top-level SVG component.
+  this.dragSurface_.setBlocksAndShow(this.draggingBubble_.getSvgRoot());
+};

package/core/colours.js

@@ -0,0 +1,177 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2016 Massachusetts Institute of Technology
+ * All rights reserved.
+ *
+ * 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.
+ */
+
+'use strict';
+
+goog.provide('Blockly.Colours');
+
+Blockly.Colours = {
+  // SVG colours: these must be specificed in #RRGGBB style
+  // To add an opacity, this must be specified as a separate property (for SVG fill-opacity)
+  "motion": {
+    "primary": "#4C97FF",
+    "secondary": "#4280D7",
+    "tertiary": "#3373CC",
+    "quaternary": "#3373CC"
+  },
+  "looks": {
+    "primary": "#9966FF",
+    "secondary": "#855CD6",
+    "tertiary": "#774DCB",
+    "quaternary": "#774DCB"
+  },
+  "sounds": {
+    "primary": "#CF63CF",
+    "secondary": "#C94FC9",
+    "tertiary": "#BD42BD",
+    "quaternary": "#BD42BD"
+  },
+  "control": {
+    "primary": "#FFAB19",
+    "secondary": "#EC9C13",
+    "tertiary": "#CF8B17",
+    "quaternary": "#CF8B17"
+  },
+  "event": {
+    "primary": "#FFBF00",
+    "secondary": "#E6AC00",
+    "tertiary": "#CC9900",
+    "quaternary": "#CC9900"
+  },
+  "sensing": {
+    "primary": "#5CB1D6",
+    "secondary": "#47A8D1",
+    "tertiary": "#2E8EB8",
+    "quaternary": "#2E8EB8"
+  },
+  "pen": {
+    "primary": "#0fBD8C",
+    "secondary": "#0DA57A",
+    "tertiary": "#0B8E69",
+    "quaternary": "#0B8E69"
+  },
+  "operators": {
+    "primary": "#59C059",
+    "secondary": "#46B946",
+    "tertiary": "#389438",
+    "quaternary": "#389438"
+  },
+  "data": {
+    "primary": "#FF8C1A",
+    "secondary": "#FF8000",
+    "tertiary": "#DB6E00",
+    "quaternary": "#DB6E00"
+  },
+  // This is not a new category, but rather for differentiation
+  // between lists and scalar variables.
+  "data_lists": {
+    "primary": "#FF661A",
+    "secondary": "#FF5500",
+    "tertiary": "#E64D00",
+    "quaternary": "#E64D00"
+  },
+  "more": {
+    "primary": "#FF6680",
+    "secondary": "#FF4D6A",
+    "tertiary": "#FF3355",
+    "quaternary": "#FF3355"
+  },
+  "text": "#FFFFFF",
+  "workspace": "#F9F9F9",
+  "toolboxHover": "#4C97FF",
+  "toolboxSelected": "#e9eef2",
+  "toolboxText": "#575E75",
+  "blackText": "#575E75",
+  "toolbox": "#FFFFFF",
+  "flyout": "#F9F9F9",
+  "scrollbar": "#CECDCE",
+  "scrollbarHover": '#CECDCE',
+  "textField": "#FFFFFF",
+  "textFieldText": "#575E75",
+  "insertionMarker": "#000000",
+  "insertionMarkerOpacity": 0.2,
+  "dragShadowOpacity": 0.3,
+  "stackGlow": "#FFF200",
+  "stackGlowSize": 4,
+  "stackGlowOpacity": 1,
+  "replacementGlow": "#FFFFFF",
+  "replacementGlowSize": 2,
+  "replacementGlowOpacity": 1,
+  "colourPickerStroke": "#FFFFFF",
+  // CSS colours: support RGBA
+  "fieldShadow": "rgba(0,0,0,0.1)",
+  "dropDownShadow": "rgba(0, 0, 0, .3)",
+  "numPadBackground": "#547AB2",
+  "numPadBorder": "#435F91",
+  "numPadActiveBackground": "#435F91",
+  "numPadText": "white", // Do not use hex here, it cannot be inlined with data-uri SVG
+  "valueReportBackground": "#FFFFFF",
+  "valueReportBorder": "#AAAAAA",
+  "valueReportForeground": "#000000",
+  "menuHover": "rgba(0, 0, 0, 0.2)",
+  "contextMenuBackground": "#ffffff",
+  "contextMenuBorder": "#cccccc",
+  "contextMenuForeground": "#000000",
+  "contextMenuActiveBackground": "#d6e9f8",
+  "contextMenuDisabledForeground": "#cccccc",
+  "flyoutLabelColor": "#575E75",
+  "checkboxInactiveBackground": "#ffffff",
+  "checkboxInactiveBorder": "#c8c8c8",
+  "checkboxActiveBackground": "#4C97FF",
+  "checkboxActiveBorder": "#3373CC",
+  "checkboxCheck": "#ffffff",
+  "buttonActiveBackground": "#ffffff",
+  "buttonForeground": "#575E75",
+  "buttonBorder": "#c6c6c6",
+  "zoomIconFilter": "none"
+};
+
+/**
+ * Override the colours in Blockly.Colours with new values basded on the
+ * given dictionary.
+ * @param {!Object} colours Dictionary of colour properties and new values.
+ * @package
+ */
+Blockly.Colours.overrideColours = function(colours) {
+  // Colour overrides provided by the injection
+  if (colours) {
+    for (var colourProperty in colours) {
+      if (colours.hasOwnProperty(colourProperty) &&
+          Blockly.Colours.hasOwnProperty(colourProperty)) {
+        // If a property is in both colours option and Blockly.Colours,
+        // set the Blockly.Colours value to the override.
+        // Override Blockly category color object properties with those
+        // provided.
+        var colourPropertyValue = colours[colourProperty];
+        if (goog.isObject(colourPropertyValue)) {
+          for (var colourSequence in colourPropertyValue) {
+            if (colourPropertyValue.hasOwnProperty(colourSequence) &&
+              Blockly.Colours[colourProperty].hasOwnProperty(colourSequence)) {
+              Blockly.Colours[colourProperty][colourSequence] =
+                  colourPropertyValue[colourSequence];
+            }
+          }
+        } else {
+          Blockly.Colours[colourProperty] = colourPropertyValue;
+        }
+      }
+    }
+  }
+};