@blockdia/scratch-blocks 0.1.0

package/core/block_render_svg_horizontal.js

@@ -0,0 +1,892 @@
+/**
+ * @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 Methods for graphically rendering a block as SVG.
+ * @author fraser@google.com (Neil Fraser)
+ */
+'use strict';
+
+goog.provide('Blockly.BlockSvg.render');
+
+goog.require('Blockly.BlockSvg');
+
+
+// UI constants for rendering blocks.
+/**
+* Grid unit to pixels conversion
+* @const
+*/
+Blockly.BlockSvg.GRID_UNIT = 4;
+
+/**
+ * Horizontal space between elements.
+ * @const
+ */
+Blockly.BlockSvg.SEP_SPACE_X = 3 * Blockly.BlockSvg.GRID_UNIT;
+
+/**
+ * Vertical space between elements.
+ * @const
+ */
+Blockly.BlockSvg.SEP_SPACE_Y = 3 * Blockly.BlockSvg.GRID_UNIT;
+
+/**
+ * Vertical space above blocks with statements.
+ * @const
+ */
+Blockly.BlockSvg.STATEMENT_BLOCK_SPACE = 3 * Blockly.BlockSvg.GRID_UNIT;
+
+/**
+ * Height of user inputs
+ * @const
+ */
+Blockly.BlockSvg.FIELD_HEIGHT = 8 * Blockly.BlockSvg.GRID_UNIT;
+
+/**
+ * Width of user inputs
+ * @const
+ */
+Blockly.BlockSvg.FIELD_WIDTH = 12 * Blockly.BlockSvg.GRID_UNIT;
+
+/**
+ * Editable field padding (left/right of the text).
+ * @const
+ */
+Blockly.BlockSvg.EDITABLE_FIELD_PADDING = 0;
+
+/**
+ * Minimum width of user inputs during editing
+ * @const
+ */
+Blockly.BlockSvg.FIELD_WIDTH_MIN_EDIT = 13 * Blockly.BlockSvg.GRID_UNIT;
+
+/**
+ * Maximum width of user inputs during editing
+ * @const
+ */
+Blockly.BlockSvg.FIELD_WIDTH_MAX_EDIT = 24 * Blockly.BlockSvg.GRID_UNIT;
+
+/**
+ * Maximum height of user inputs during editing
+ * @const
+ */
+Blockly.BlockSvg.FIELD_HEIGHT_MAX_EDIT = 10 * Blockly.BlockSvg.GRID_UNIT;
+
+/**
+ * Top padding of user inputs
+ * @const
+ */
+Blockly.BlockSvg.FIELD_TOP_PADDING = 0.25 * Blockly.BlockSvg.GRID_UNIT;
+
+/**
+ * Corner radius of number inputs
+ * @const
+ */
+Blockly.BlockSvg.NUMBER_FIELD_CORNER_RADIUS = 4 * Blockly.BlockSvg.GRID_UNIT;
+
+/**
+ * Corner radius of text inputs
+ * @const
+ */
+Blockly.BlockSvg.TEXT_FIELD_CORNER_RADIUS = 1 * Blockly.BlockSvg.GRID_UNIT;
+
+/**
+ * Default radius for a field, in px.
+ * @const
+ */
+Blockly.BlockSvg.FIELD_DEFAULT_CORNER_RADIUS = 4 * Blockly.BlockSvg.GRID_UNIT;
+
+/**
+ * Minimum width of a block.
+ * @const
+ */
+Blockly.BlockSvg.MIN_BLOCK_X = 1 / 2 * 16 * Blockly.BlockSvg.GRID_UNIT;
+
+/**
+ * Minimum height of a block.
+ * @const
+ */
+Blockly.BlockSvg.MIN_BLOCK_Y = 16 * Blockly.BlockSvg.GRID_UNIT;
+
+/**
+ * Width of horizontal puzzle tab.
+ * @const
+ */
+Blockly.BlockSvg.TAB_WIDTH = 2 * Blockly.BlockSvg.GRID_UNIT;
+
+/**
+ * Rounded corner radius.
+ * @const
+ */
+Blockly.BlockSvg.CORNER_RADIUS = 1 * Blockly.BlockSvg.GRID_UNIT;
+
+/**
+ * Rounded corner radius.
+ * @const
+ */
+Blockly.BlockSvg.HAT_CORNER_RADIUS = 8 * Blockly.BlockSvg.GRID_UNIT;
+
+/**
+ * Full height of connector notch including rounded corner.
+ * @const
+ */
+Blockly.BlockSvg.NOTCH_HEIGHT = 8 * Blockly.BlockSvg.GRID_UNIT + 2;
+
+/**
+ * Width of connector notch
+ * @const
+ */
+Blockly.BlockSvg.NOTCH_WIDTH = 2 * Blockly.BlockSvg.GRID_UNIT;
+
+/**
+ * SVG path for drawing next/previous notch from top to bottom.
+ * Drawn in pixel units since Bezier control points are off the grid.
+ * @const
+ */
+Blockly.BlockSvg.NOTCH_PATH_DOWN =
+  'c 0,2 1,3 2,4 ' +
+  'l 4,4 ' +
+  'c 1,1 2,2 2,4 ' +
+  'v 12 ' +
+  'c 0,2 -1,3 -2,4 ' +
+  'l -4,4 ' +
+  'c -1,1 -2,2 -2,4';
+
+/**
+ * SVG path for drawing next/previous notch from bottom to top.
+ * Drawn in pixel units since Bezier control points are off the grid.
+ * @const
+ */
+Blockly.BlockSvg.NOTCH_PATH_UP =
+  'c 0,-2 1,-3 2,-4 ' +
+  'l 4,-4 ' +
+  'c 1,-1 2,-2 2,-4 ' +
+  'v -12 ' +
+  'c 0,-2 -1,-3 -2,-4 ' +
+  'l -4,-4 ' +
+  'c -1,-1 -2,-2 -2,-4';
+
+/**
+* Width of rendered image field in px
+* @const
+*/
+Blockly.BlockSvg.IMAGE_FIELD_WIDTH = 10 * Blockly.BlockSvg.GRID_UNIT;
+
+/**
+* Height of rendered image field in px
+* @const
+*/
+Blockly.BlockSvg.IMAGE_FIELD_HEIGHT = 10 * Blockly.BlockSvg.GRID_UNIT;
+
+/**
+* y-offset of the top of the field shadow block from the bottom of the block.
+* @const
+*/
+Blockly.BlockSvg.FIELD_Y_OFFSET = -2 * Blockly.BlockSvg.GRID_UNIT;
+
+/**
+ * SVG start point for drawing the top-left corner.
+ * @const
+ */
+Blockly.BlockSvg.TOP_LEFT_CORNER_START =
+    'm ' + Blockly.BlockSvg.CORNER_RADIUS + ',0';
+
+/**
+ * SVG path for drawing the rounded top-left corner.
+ * @const
+ */
+Blockly.BlockSvg.TOP_LEFT_CORNER =
+    'A ' + Blockly.BlockSvg.CORNER_RADIUS + ',' +
+    Blockly.BlockSvg.CORNER_RADIUS + ' 0 0,0 ' +
+    '0,' + Blockly.BlockSvg.CORNER_RADIUS;
+
+/**
+ * SVG start point for drawing the top-left corner.
+ * @const
+ */
+Blockly.BlockSvg.HAT_TOP_LEFT_CORNER_START =
+    'm ' + Blockly.BlockSvg.HAT_CORNER_RADIUS + ',0';
+/**
+ * SVG path for drawing the rounded top-left corner.
+ * @const
+ */
+Blockly.BlockSvg.HAT_TOP_LEFT_CORNER =
+    'A ' + Blockly.BlockSvg.HAT_CORNER_RADIUS + ',' +
+    Blockly.BlockSvg.HAT_CORNER_RADIUS + ' 0 0,0 ' +
+    '0,' + Blockly.BlockSvg.HAT_CORNER_RADIUS;
+
+/**
+ * @type {Object} An object containing computed measurements of this block.
+ * @private
+ */
+Blockly.BlockSvg.renderingMetrics_ = null;
+
+/**
+ * Max text display length for a field (per-horizontal/vertical)
+ * @const
+ */
+Blockly.BlockSvg.MAX_DISPLAY_LENGTH = 4;
+
+/**
+ * Point size of text field before animation. Must match size in CSS.
+ * See implementation in field_textinput.
+ */
+Blockly.BlockSvg.FIELD_TEXTINPUT_FONTSIZE_INITIAL = 12;
+
+/**
+ * Point size of text field after animation.
+ * See implementation in field_textinput.
+ */
+Blockly.BlockSvg.FIELD_TEXTINPUT_FONTSIZE_FINAL = 14;
+
+/**
+ * Whether text fields are allowed to expand past their truncated block size.
+ * @const{boolean}
+ */
+Blockly.BlockSvg.FIELD_TEXTINPUT_EXPAND_PAST_TRUNCATION = true;
+
+/**
+ * Whether text fields should animate their positioning.
+ * @const{boolean}
+ */
+Blockly.BlockSvg.FIELD_TEXTINPUT_ANIMATE_POSITIONING = true;
+
+/**
+ * @param {!Object} first An object containing computed measurements of a
+ *    block.
+ * @param {!Object} second Another object containing computed measurements of a
+ *    block.
+ * @return {boolean} Whether the two sets of metrics are equivalent.
+ * @private
+ */
+Blockly.BlockSvg.metricsAreEquivalent_ = function(first, second) {
+  if (first.statement != second.statement) {
+    return false;
+  }
+  if (first.imageField != second.imageField) {
+    return false;
+  }
+
+  if ((first.height != second.height) ||
+      (first.width != second.width) ||
+      (first.bayHeight != second.bayHeight) ||
+      (first.bayWidth != second.bayWidth) ||
+      (first.fieldRadius != second.fieldRadius) ||
+      (first.startHat != second.startHat)) {
+    return false;
+  }
+  return true;
+};
+
+/**
+ * Play some UI effects (sound) after a connection has been established.
+ */
+Blockly.BlockSvg.prototype.connectionUiEffect = function() {
+  this.workspace.getAudioManager().play('click');
+};
+
+/**
+ * Change the colour of a block.
+ */
+Blockly.BlockSvg.prototype.updateColour = function() {
+  var fillColour = (this.isGlowing_) ? this.getColourSecondary() : this.getColour();
+  var strokeColour = this.getColourTertiary();
+
+  // Render block stroke
+  this.svgPath_.setAttribute('stroke', strokeColour);
+
+  // Render block fill
+  var fillColour = (this.isGlowingBlock_) ? this.getColourSecondary() : this.getColour();
+  this.svgPath_.setAttribute('fill', fillColour);
+
+  // Render opacity
+  this.svgPath_.setAttribute('fill-opacity', this.getOpacity());
+
+  // Bump every dropdown to change its colour.
+  for (var x = 0, input; input = this.inputList[x]; x++) {
+    for (var y = 0, field; field = input.fieldRow[y]; y++) {
+      field.setText(null);
+    }
+  }
+};
+
+/**
+ * Visual effect to show that if the dragging block is dropped, this block will
+ * be replaced.  If a shadow block it will disappear.  Otherwise it will bump.
+ * @param {boolean} add True if highlighting should be added.
+ */
+Blockly.BlockSvg.prototype.highlightForReplacement = function(add) {
+  if (add) {
+    var replacementGlowFilterId = this.workspace.options.replacementGlowFilterId
+      || 'blocklyReplacementGlowFilter';
+    this.svgPath_.setAttribute('filter', 'url(#' + replacementGlowFilterId + ')');
+    Blockly.utils.addClass(/** @type {!Element} */ (this.svgGroup_),
+        'blocklyReplaceable');
+  } else {
+    this.svgPath_.removeAttribute('filter');
+    Blockly.utils.removeClass(/** @type {!Element} */ (this.svgGroup_),
+        'blocklyReplaceable');
+  }
+};
+
+/**
+ * Returns a bounding box describing the dimensions of this block
+ * and any blocks stacked below it.
+ * @param {boolean=} opt_ignoreFields True if we should ignore fields in the
+ * size calculation, and just give the size of the base block(s).
+ * @return {!{height: number, width: number}} Object with height and width properties.
+ */
+Blockly.BlockSvg.prototype.getHeightWidth = function(opt_ignoreFields) {
+  var height = this.height;
+  var width = this.width;
+  // Add the size of the field shadow block.
+  if (!opt_ignoreFields && this.getFieldShadowBlock_()) {
+    height += Blockly.BlockSvg.FIELD_Y_OFFSET;
+    height += Blockly.BlockSvg.FIELD_HEIGHT;
+  }
+  // Recursively add size of subsequent blocks.
+  var nextBlock = this.getNextBlock();
+  if (nextBlock) {
+    var nextHeightWidth = nextBlock.getHeightWidth(opt_ignoreFields);
+    width += nextHeightWidth.width;
+    width -= Blockly.BlockSvg.NOTCH_WIDTH; // Exclude width of connected notch.
+    height = Math.max(height, nextHeightWidth.height);
+  }
+  return {height: height, width: width};
+};
+
+/**
+ * Render the block.
+ * Lays out and reflows a block based on its contents and settings.
+ * @param {boolean=} opt_bubble If false, just render this block.
+ *   If true, also render block's parent, grandparent, etc.  Defaults to true.
+ */
+Blockly.BlockSvg.prototype.render = function(opt_bubble) {
+  Blockly.Field.startCache();
+  this.rendered = true;
+
+  var oldMetrics = this.renderingMetrics_;
+  var metrics = this.renderCompute_();
+
+  // Don't redraw if we don't need to.
+  if (oldMetrics &&
+      Blockly.BlockSvg.metricsAreEquivalent_(oldMetrics, metrics)) {
+    // Skipping the redraw is fine, but we may still have to tighten up our
+    // connections with child blocks.
+    if (metrics.statement && metrics.statement.connection &&
+        metrics.statement.targetConnection) {
+      metrics.statement.connection.tighten_();
+    }
+    if (this.nextConnection && this.nextConnection.targetConnection) {
+      this.nextConnection.tighten_();
+    }
+  } else {
+    this.height = metrics.height;
+    this.width = metrics.width;
+    this.renderDraw_(metrics);
+    this.renderClassify_(metrics);
+    this.renderingMetrics_ = metrics;
+  }
+
+  if (opt_bubble !== false) {
+    // Render all blocks above this one (propagate a reflow).
+    var parentBlock = this.getParent();
+    if (parentBlock) {
+      parentBlock.render(true);
+    } else {
+      // Top-most block.  Fire an event to allow scrollbars to resize.
+      Blockly.resizeSvgContents(this.workspace);
+    }
+  }
+  Blockly.Field.stopCache();
+
+  this.updateIntersectionObserver();
+};
+
+/**
+ * Computes the height and widths for each row and field.
+ * @return {!Array.<!Array.<!Object>>} 2D array of objects, each containing
+ *     position information.
+ * @private
+ */
+Blockly.BlockSvg.prototype.renderCompute_ = function() {
+  var metrics = {
+    statement: null,
+    imageField: null,
+    iconMenu: null,
+    width: 0,
+    height: 0,
+    bayHeight: 0,
+    bayWidth: 0,
+    bayNotchAtRight: true,
+    fieldRadius: 0,
+    startHat: false,
+    endCap: false
+  };
+
+  // Does block have a statement?
+  for (var i = 0, input; input = this.inputList[i]; i++) {
+    if (input.type == Blockly.NEXT_STATEMENT) {
+      metrics.statement = input;
+      // Compute minimum input size.
+      metrics.bayHeight = Blockly.BlockSvg.MIN_BLOCK_Y;
+      metrics.bayWidth = Blockly.BlockSvg.MIN_BLOCK_X;
+      // Expand input size if there is a connection.
+      if (input.connection && input.connection.targetConnection) {
+        var linkedBlock = input.connection.targetBlock();
+        var bBox = linkedBlock.getHeightWidth(true);
+        metrics.bayHeight = Math.max(metrics.bayHeight, bBox.height);
+        metrics.bayWidth = Math.max(metrics.bayWidth, bBox.width);
+      }
+      var linkedBlock = input.connection.targetBlock();
+      if (linkedBlock && !linkedBlock.lastConnectionInStack()) {
+        metrics.bayNotchAtRight = false;
+      } else {
+        metrics.bayWidth -= Blockly.BlockSvg.NOTCH_WIDTH;
+      }
+    }
+
+    // Find image field, input fields
+    for (var j = 0, field; field = input.fieldRow[j]; j++) {
+      if (field instanceof Blockly.FieldImage) {
+        metrics.imageField = field;
+      }
+      if (field instanceof Blockly.FieldIconMenu) {
+        metrics.iconMenu = field;
+      }
+      if (field instanceof Blockly.FieldTextInput) {
+        metrics.fieldRadius = field.getBorderRadius();
+      } else {
+        metrics.fieldRadius = Blockly.BlockSvg.FIELD_DEFAULT_CORNER_RADIUS;
+      }
+    }
+  }
+
+  // Determine whether a block is a start hat or end cap by checking connections.
+  if (this.nextConnection && !this.previousConnection) {
+    metrics.startHat = true;
+  }
+
+  // End caps have no bay, a previous, no output, and no next.
+  if (!this.nextConnection && this.previousConnection &&
+     !this.outputConnection && !metrics.statement) {
+    metrics.endCap = true;
+  }
+
+  // If this block is an icon menu shadow, attempt to set the parent's
+  // ImageField src to the one that represents the current value of the field.
+  if (metrics.iconMenu) {
+    var currentSrc = metrics.iconMenu.getSrcForValue(metrics.iconMenu.getValue());
+    if (currentSrc) {
+      metrics.iconMenu.setParentFieldImage(currentSrc);
+    }
+  }
+
+  // Always render image field at 40x40 px
+  // Normal block sizing
+  metrics.width = Blockly.BlockSvg.SEP_SPACE_X * 2 + Blockly.BlockSvg.IMAGE_FIELD_WIDTH;
+  metrics.height = Blockly.BlockSvg.SEP_SPACE_Y * 2 + Blockly.BlockSvg.IMAGE_FIELD_HEIGHT;
+
+  if (this.outputConnection) {
+    // Field shadow block
+    metrics.height = Blockly.BlockSvg.FIELD_HEIGHT;
+    metrics.width = Blockly.BlockSvg.FIELD_WIDTH;
+  }
+  if (metrics.statement) {
+    // Block with statement (e.g., repeat, forever)
+    metrics.width += metrics.bayWidth + 4 * Blockly.BlockSvg.CORNER_RADIUS + 2 * Blockly.BlockSvg.GRID_UNIT;
+    metrics.height = metrics.bayHeight + Blockly.BlockSvg.STATEMENT_BLOCK_SPACE;
+  }
+  if (metrics.startHat) {
+    // Start hats are 1 unit wider to account for optical effect of curve.
+    metrics.width += 1 * Blockly.BlockSvg.GRID_UNIT;
+  }
+  if (metrics.endCap) {
+    // End caps are 1 unit wider to account for optical effect of no notch.
+    metrics.width += 1 * Blockly.BlockSvg.GRID_UNIT;
+  }
+  return metrics;
+};
+
+
+/**
+ * Draw the path of the block.
+ * Move the fields to the correct locations.
+ * @param {!Object} metrics An object containing computed measurements of the
+ *    block.
+ * @private
+ */
+Blockly.BlockSvg.prototype.renderDraw_ = function(metrics) {
+  // Fetch the block's coordinates on the surface for use in anchoring
+  // the connections.
+  var connectionsXY = this.getRelativeToSurfaceXY();
+  // Assemble the block's path.
+  var steps = [];
+
+  this.renderDrawLeft_(steps, connectionsXY, metrics);
+  this.renderDrawBottom_(steps, connectionsXY, metrics);
+  this.renderDrawRight_(steps, connectionsXY, metrics);
+  this.renderDrawTop_(steps, connectionsXY, metrics);
+
+  var pathString = steps.join(' ');
+  this.svgPath_.setAttribute('d', pathString);
+
+  if (this.RTL) {
+    // Mirror the block's path.
+    // This is awesome.
+    this.svgPath_.setAttribute('transform', 'scale(-1 1)');
+  }
+
+  // Horizontal blocks have a single Image Field that is specially positioned
+  if (metrics.imageField) {
+    var imageField = metrics.imageField.getSvgRoot();
+    var imageFieldSize = metrics.imageField.getSize();
+    // Image field's position is calculated relative to the "end" edge of the
+    // block.
+    var imageFieldX = metrics.width - imageFieldSize.width -
+        Blockly.BlockSvg.SEP_SPACE_X / 1.5;
+    var imageFieldY = metrics.height - imageFieldSize.height -
+        Blockly.BlockSvg.SEP_SPACE_Y;
+    if (metrics.endCap) {
+      // End-cap image is offset by a grid unit to account for optical effect of no notch.
+      imageFieldX -= Blockly.BlockSvg.GRID_UNIT;
+    }
+    var imageFieldScale = "scale(1 1)";
+    if (this.RTL) {
+      // Do we want to mirror the Image Field left-to-right?
+      if (metrics.imageField.getFlipRTL()) {
+        imageFieldScale = "scale(-1 1)";
+        imageFieldX = -metrics.width + imageFieldSize.width +
+            Blockly.BlockSvg.SEP_SPACE_X / 1.5;
+      } else {
+        // If not, don't offset by imageFieldSize.width
+        imageFieldX = -metrics.width + Blockly.BlockSvg.SEP_SPACE_X / 1.5;
+      }
+    }
+    if (imageField) {
+      // Fields are invisible on insertion marker.
+      if (this.isInsertionMarker()) {
+        imageField.setAttribute('display', 'none');
+      }
+      imageField.setAttribute('transform',
+          'translate(' + imageFieldX + ',' + imageFieldY + ') ' +
+          imageFieldScale);
+    }
+  }
+
+  // Position value input
+  if (this.getFieldShadowBlock_()) {
+    var input = this.getFieldShadowBlock_().getSvgRoot();
+    var valueX = (Blockly.BlockSvg.NOTCH_WIDTH +
+      (metrics.bayWidth ? 2 * Blockly.BlockSvg.GRID_UNIT +
+        Blockly.BlockSvg.NOTCH_WIDTH * 2 : 0) + metrics.bayWidth);
+    if (metrics.startHat) {
+      // Start hats add some left margin to field for visual balance
+      valueX += Blockly.BlockSvg.GRID_UNIT * 2;
+    }
+    if (this.RTL) {
+      valueX = -valueX;
+    }
+    var valueY = (metrics.height + Blockly.BlockSvg.FIELD_Y_OFFSET);
+    var transformation = 'translate(' + valueX + ',' + valueY + ')';
+    input.setAttribute('transform', transformation);
+  }
+};
+
+/**
+ * Give the block an attribute 'data-shapes' that lists its shape[s], and an
+ *     attribute 'data-category' with its category.
+ * @param {!Object} metrics An object containing computed measurements of the
+ *    block.
+ * @private
+ */
+Blockly.BlockSvg.prototype.renderClassify_ = function(metrics) {
+  var shapes = [];
+
+  if (this.isShadow_) {
+    shapes.push('argument');
+  } else {
+    if(metrics.statement) {
+      shapes.push('c-block');
+    }
+    if (metrics.startHat) {
+      shapes.push('hat'); // c-block+hats are possible (e.x. reprter procedures)
+    } else if (!metrics.statement) {
+      shapes.push('stack'); //only call it "stack" if it's not a c-block
+    }
+    if (!this.nextConnection) {
+      shapes.push('end');
+    }
+  }
+
+  this.svgGroup_.setAttribute('data-shapes', shapes.join(' '));
+
+  if (this.getCategory()) {
+    this.svgGroup_.setAttribute('data-category', this.getCategory());
+  }
+};
+
+/**
+ * Render the left edge of the block.
+ * @param {!Array.<string>} steps Path of block outline.
+ * @param {!Object} connectionsXY Location of block.
+ * @param {!Object} metrics An object containing computed measurements of the
+ *    block.
+ * @private
+ */
+Blockly.BlockSvg.prototype.renderDrawLeft_ = function(steps, connectionsXY, metrics) {
+  // Top edge.
+  if (metrics.startHat) {
+    // Hat block
+    // Position the cursor at the top-left starting point.
+    steps.push(Blockly.BlockSvg.HAT_TOP_LEFT_CORNER_START);
+    // Top-left rounded corner.
+    steps.push(Blockly.BlockSvg.HAT_TOP_LEFT_CORNER);
+  } else if (this.previousConnection) {
+    // Regular block
+    // Position the cursor at the top-left starting point.
+    steps.push(Blockly.BlockSvg.TOP_LEFT_CORNER_START);
+    // Top-left rounded corner.
+    steps.push(Blockly.BlockSvg.TOP_LEFT_CORNER);
+    var cursorY = metrics.height - Blockly.BlockSvg.CORNER_RADIUS -
+        Blockly.BlockSvg.SEP_SPACE_Y - Blockly.BlockSvg.NOTCH_HEIGHT;
+    steps.push('V', cursorY);
+    steps.push(Blockly.BlockSvg.NOTCH_PATH_DOWN);
+    // Create previous block connection.
+    var connectionX = connectionsXY.x;
+    var connectionY = connectionsXY.y + metrics.height -
+        Blockly.BlockSvg.CORNER_RADIUS * 2;
+    this.previousConnection.moveTo(connectionX, connectionY);
+    // This connection will be tightened when the parent renders.
+    steps.push('V', metrics.height - Blockly.BlockSvg.CORNER_RADIUS);
+  } else {
+    // Input
+    // Position the cursor at the top-left starting point.
+    steps.push('m', metrics.fieldRadius + ',0');
+    // Top-left rounded corner.
+    steps.push(
+        'A', metrics.fieldRadius + ',' + metrics.fieldRadius,
+        '0', '0,0', '0,' + metrics.fieldRadius);
+    steps.push(
+        'V', metrics.height - metrics.fieldRadius);
+  }
+};
+
+/**
+ * Render the bottom edge of the block.
+ * @param {!Array.<string>} steps Path of block outline.
+ * @param {!Object} connectionsXY Location of block.
+ * @param {!Object} metrics An object containing computed measurements of the
+ *    block.
+ * @private
+ */
+Blockly.BlockSvg.prototype.renderDrawBottom_ = function(steps,
+    connectionsXY, metrics) {
+
+  if (metrics.startHat) {
+    steps.push('a', Blockly.BlockSvg.HAT_CORNER_RADIUS + ',' +
+               Blockly.BlockSvg.HAT_CORNER_RADIUS + ' 0 0,0 ' +
+               Blockly.BlockSvg.HAT_CORNER_RADIUS + ',' +
+               Blockly.BlockSvg.HAT_CORNER_RADIUS);
+  } else if (this.previousConnection) {
+    steps.push('a', Blockly.BlockSvg.CORNER_RADIUS + ',' +
+               Blockly.BlockSvg.CORNER_RADIUS + ' 0 0,0 ' +
+               Blockly.BlockSvg.CORNER_RADIUS + ',' +
+               Blockly.BlockSvg.CORNER_RADIUS);
+  } else {
+    // Input
+    steps.push(
+        'a', metrics.fieldRadius + ',' + metrics.fieldRadius,
+        '0', '0,0', metrics.fieldRadius + ',' + metrics.fieldRadius);
+  }
+
+  // Has statement
+  if (metrics.statement) {
+    steps.push('h', 4 * Blockly.BlockSvg.GRID_UNIT);
+    steps.push('a', Blockly.BlockSvg.CORNER_RADIUS + ',' +
+               Blockly.BlockSvg.CORNER_RADIUS + ' 0 0,0 ' +
+               Blockly.BlockSvg.CORNER_RADIUS + ',-' +
+               Blockly.BlockSvg.CORNER_RADIUS);
+    steps.push('v', -2.5 * Blockly.BlockSvg.GRID_UNIT);
+    steps.push(Blockly.BlockSvg.NOTCH_PATH_UP);
+    // @todo Why 3?
+    steps.push('v', -metrics.bayHeight + (Blockly.BlockSvg.CORNER_RADIUS * 3) +
+      Blockly.BlockSvg.NOTCH_HEIGHT + 2 * Blockly.BlockSvg.GRID_UNIT);
+    steps.push('a', Blockly.BlockSvg.CORNER_RADIUS + ',' +
+               Blockly.BlockSvg.CORNER_RADIUS + ' 0 0,1 ' +
+               Blockly.BlockSvg.CORNER_RADIUS + ',-' +
+               Blockly.BlockSvg.CORNER_RADIUS);
+    steps.push('h', metrics.bayWidth - (Blockly.BlockSvg.CORNER_RADIUS * 2));
+    steps.push('a', Blockly.BlockSvg.CORNER_RADIUS + ',' +
+               Blockly.BlockSvg.CORNER_RADIUS + ' 0 0,1 ' +
+               Blockly.BlockSvg.CORNER_RADIUS + ',' +
+               Blockly.BlockSvg.CORNER_RADIUS);
+    if (metrics.bayNotchAtRight) {
+      steps.push('v', metrics.bayHeight - (Blockly.BlockSvg.CORNER_RADIUS * 3) -
+        Blockly.BlockSvg.NOTCH_HEIGHT - 2 * Blockly.BlockSvg.GRID_UNIT);
+      steps.push(Blockly.BlockSvg.NOTCH_PATH_DOWN);
+    }
+    steps.push('V', metrics.bayHeight + 2 * Blockly.BlockSvg.GRID_UNIT);
+    steps.push('a', Blockly.BlockSvg.CORNER_RADIUS + ',' +
+               Blockly.BlockSvg.CORNER_RADIUS + ' 0 0,0 ' +
+               Blockly.BlockSvg.CORNER_RADIUS + ',' +
+               Blockly.BlockSvg.CORNER_RADIUS);
+
+    // Create statement connection.
+    var connectionX = connectionsXY.x + Blockly.BlockSvg.CORNER_RADIUS * 2 +
+        4 * Blockly.BlockSvg.GRID_UNIT;
+    if (this.RTL) {
+      connectionX = connectionsXY.x - Blockly.BlockSvg.CORNER_RADIUS * 2 -
+          4 * Blockly.BlockSvg.GRID_UNIT;
+    }
+    var connectionY = connectionsXY.y + metrics.height -
+        Blockly.BlockSvg.CORNER_RADIUS * 2;
+    metrics.statement.connection.moveTo(connectionX, connectionY);
+    if (metrics.statement.connection.targetConnection) {
+      metrics.statement.connection.tighten_();
+    }
+  }
+
+  if (!this.isShadow()) {
+    steps.push('H', metrics.width - Blockly.BlockSvg.CORNER_RADIUS);
+  } else {
+    // input
+    steps.push('H', metrics.width - metrics.fieldRadius);
+  }
+};
+
+/**
+ * Render the right edge of the block.
+ * @param {!Array.<string>} steps Path of block outline.
+ * @param {!Object} connectionsXY Location of block.
+ * @param {!Object} metrics An object containing computed measurements of the
+ *    block.
+ * @private
+ */
+Blockly.BlockSvg.prototype.renderDrawRight_ = function(steps, connectionsXY, metrics) {
+  if (!this.isShadow()) {
+    steps.push('a', Blockly.BlockSvg.CORNER_RADIUS + ',' +
+               Blockly.BlockSvg.CORNER_RADIUS + ' 0 0,0 ' +
+               Blockly.BlockSvg.CORNER_RADIUS + ',-' +
+               Blockly.BlockSvg.CORNER_RADIUS);
+    steps.push('v', -2.5 * Blockly.BlockSvg.GRID_UNIT);
+  } else {
+    // Input
+    steps.push(
+        'a', metrics.fieldRadius + ',' + metrics.fieldRadius,
+        '0', '0,0', metrics.fieldRadius + ',' + -1 * metrics.fieldRadius);
+    steps.push('v', -1 * (metrics.height - metrics.fieldRadius * 2));
+  }
+
+  if (this.nextConnection) {
+    steps.push(Blockly.BlockSvg.NOTCH_PATH_UP);
+
+    // Include width of notch in block width.
+    this.width += Blockly.BlockSvg.NOTCH_WIDTH;
+
+    // Create next block connection.
+    var connectionX;
+    if (this.RTL) {
+      connectionX = connectionsXY.x - metrics.width;
+    } else {
+      connectionX = connectionsXY.x + metrics.width;
+    }
+    var connectionY = connectionsXY.y + metrics.height -
+        Blockly.BlockSvg.CORNER_RADIUS * 2;
+    this.nextConnection.moveTo(connectionX, connectionY);
+    if (this.nextConnection.targetConnection) {
+      this.nextConnection.tighten_();
+    }
+    steps.push('V', Blockly.BlockSvg.CORNER_RADIUS);
+  } else if (!this.isShadow()) {
+    steps.push('V', Blockly.BlockSvg.CORNER_RADIUS);
+  }
+};
+
+/**
+ * Render the top edge of the block.
+ * @param {!Array.<string>} steps Path of block outline.
+ * @param {!Object} connectionsXY Location of block.
+ * @param {!Object} metrics An object containing computed measurements of the
+ *    block.
+ * @private
+ */
+Blockly.BlockSvg.prototype.renderDrawTop_ = function(steps, connectionsXY, metrics) {
+  if (!this.isShadow()) {
+    steps.push('a', Blockly.BlockSvg.CORNER_RADIUS + ',' +
+               Blockly.BlockSvg.CORNER_RADIUS + ' 0 0,0 -' +
+               Blockly.BlockSvg.CORNER_RADIUS + ',-' +
+               Blockly.BlockSvg.CORNER_RADIUS);
+  } else {
+    steps.push(
+        'a', metrics.fieldRadius + ',' + metrics.fieldRadius,
+        '0', '0,0', '-' + metrics.fieldRadius + ',-' + metrics.fieldRadius);
+  }
+  steps.push('z');
+};
+
+/**
+ * Get the field shadow block, if this block has one.
+ * <p>This is horizontal Scratch-specific, as "fields" are implemented as inputs
+ * with shadow blocks, and there is only one per block.
+ * @return {Blockly.BlockSvg} The field shadow block, or null if not found.
+ * @private
+ */
+Blockly.BlockSvg.prototype.getFieldShadowBlock_ = function() {
+  for (var i = 0, child; child = this.childBlocks_[i]; i++) {
+    if (child.isShadow()) {
+      return child;
+    }
+  }
+
+  return null;
+};
+
+/**
+ * Position an new block correctly, so that it doesn't move the existing block
+ * when connected to it.
+ * @param {!Blockly.Block} newBlock The block to position - either the first
+ *     block in a dragged stack or an insertion marker.
+ * @param {!Blockly.Connection} newConnection The connection on the new block's
+ *     stack - either a connection on newBlock, or the last NEXT_STATEMENT
+ *     connection on the stack if the stack's being dropped before another
+ *     block.
+ * @param {!Blockly.Connection} existingConnection The connection on the
+ *     existing block, which newBlock should line up with.
+ */
+Blockly.BlockSvg.prototype.positionNewBlock = function(newBlock, newConnection, existingConnection) {
+  // We only need to position the new block if it's before the existing one,
+  // otherwise its position is set by the previous block.
+  if (newConnection.type == Blockly.NEXT_STATEMENT) {
+    var dx = existingConnection.x_ - newConnection.x_;
+    var dy = existingConnection.y_ - newConnection.y_;
+
+    // When putting a c-block around another c-block, the outer block must
+    // positioned above the inner block, as its connection point will stretch
+    // downwards when connected.
+    if (newConnection == newBlock.getFirstStatementConnection()) {
+      dy -= existingConnection.sourceBlock_.getHeightWidth(true).height -
+          Blockly.BlockSvg.MIN_BLOCK_Y;
+    }
+
+    newBlock.moveBy(dx, dy);
+  }
+};