scratch-blocks 1.1.206 → 2.0.0-beta.1

package/core/flyout_vertical.js

@@ -1,770 +0,0 @@
-/**
- * @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 Layout code for a vertical variant of the flyout.
- * @author fenichel@google.com (Rachel Fenichel)
- */
-'use strict';
-
-goog.provide('Blockly.VerticalFlyout');
-
-goog.require('Blockly.Block');
-goog.require('Blockly.Comment');
-goog.require('Blockly.Events');
-goog.require('Blockly.Flyout');
-goog.require('Blockly.FlyoutButton');
-goog.require('Blockly.utils');
-goog.require('Blockly.WorkspaceSvg');
-goog.require('goog.dom');
-goog.require('goog.dom.animationFrame.polyfill');
-goog.require('goog.events');
-goog.require('goog.math.Rect');
-goog.require('goog.userAgent');
-
-
-/**
- * Class for a flyout.
- * @param {!Object} workspaceOptions Dictionary of options for the workspace.
- * @extends {Blockly.Flyout}
- * @constructor
- */
-Blockly.VerticalFlyout = function(workspaceOptions) {
-  workspaceOptions.getMetrics = this.getMetrics_.bind(this);
-  workspaceOptions.setMetrics = this.setMetrics_.bind(this);
-
-  Blockly.VerticalFlyout.superClass_.constructor.call(this, workspaceOptions);
-  /**
-   * Flyout should be laid out vertically.
-   * @type {boolean}
-   * @private
-   */
-  this.horizontalLayout_ = false;
-
-  /**
-   * Map of checkboxes that correspond to monitored blocks.
-   * Each element is an object containing the SVG for the checkbox, a boolean
-   * for its checked state, and the block the checkbox is associated with.
-   * @type {!Object.<string, !Object>}
-   * @private
-   */
-  this.checkboxes_ = {};
-};
-goog.inherits(Blockly.VerticalFlyout, Blockly.Flyout);
-
-/**
- * Does the flyout automatically close when a block is created?
- * @type {boolean}
- */
-Blockly.VerticalFlyout.prototype.autoClose = false;
-
-/**
- * The width of the flyout, if not otherwise specified.
- * @type {number}
- */
-Blockly.VerticalFlyout.prototype.DEFAULT_WIDTH = 250;
-
-/**
- * Size of a checkbox next to a variable reporter.
- * @type {number}
- * @const
- */
-Blockly.VerticalFlyout.prototype.CHECKBOX_SIZE = 25;
-
-/**
- * Amount of touchable padding around reporter checkboxes.
- * @type {number}
- * @const
- */
-Blockly.VerticalFlyout.prototype.CHECKBOX_TOUCH_PADDING = 12;
-
-/**
- * SVG path data for checkmark in checkbox.
- * @type {string}
- * @const
- */
-Blockly.VerticalFlyout.prototype.CHECKMARK_PATH =
-    'M' + Blockly.VerticalFlyout.prototype.CHECKBOX_SIZE / 4 +
-    ' ' + Blockly.VerticalFlyout.prototype.CHECKBOX_SIZE / 2 +
-    'L' + 5 * Blockly.VerticalFlyout.prototype.CHECKBOX_SIZE / 12 +
-    ' ' + 2 * Blockly.VerticalFlyout.prototype.CHECKBOX_SIZE / 3 +
-    'L' + 3 * Blockly.VerticalFlyout.prototype.CHECKBOX_SIZE / 4 +
-    ' ' + Blockly.VerticalFlyout.prototype.CHECKBOX_SIZE / 3;
-
-/**
- * Size of the checkbox corner radius
- * @type {number}
- * @const
- */
-Blockly.VerticalFlyout.prototype.CHECKBOX_CORNER_RADIUS = 5;
-
-/**
- * Space above and around the checkbox.
- * @type {number}
- * @const
- */
-Blockly.VerticalFlyout.prototype.CHECKBOX_MARGIN = Blockly.Flyout.prototype.MARGIN;
-
-/**
- * Total additional width of a row that contains a checkbox.
- * @type {number}
- * @const
- */
-Blockly.VerticalFlyout.prototype.CHECKBOX_SPACE_X =
-    Blockly.VerticalFlyout.prototype.CHECKBOX_SIZE +
-    2 * Blockly.VerticalFlyout.prototype.CHECKBOX_MARGIN;
-
-/**
- * Initializes the flyout.
- * @param {!Blockly.Workspace} targetWorkspace The workspace in which to create
- *     new blocks.
- */
-Blockly.VerticalFlyout.prototype.init = function(targetWorkspace) {
-  Blockly.VerticalFlyout.superClass_.init.call(this, targetWorkspace);
-  this.workspace_.scale = targetWorkspace.scale;
-};
-
-/**
- * Creates the flyout's DOM.  Only needs to be called once.
- * @param {string} tagName HTML element
- * @return {!Element} The flyout's SVG group.
- */
-Blockly.VerticalFlyout.prototype.createDom = function(tagName) {
-  Blockly.VerticalFlyout.superClass_.createDom.call(this, tagName);
-
-  /*
-    <defs>
-      <clipPath id="blocklyBlockMenuClipPath">
-        <rect id="blocklyBlockMenuClipRect" height="1147px"
-            width="248px" y="0" x="0">
-        </rect>
-      </clipPath>
-    </defs>
-  */
-  this.defs_ = Blockly.utils.createSvgElement('defs', {}, this.svgGroup_);
-  var clipPath = Blockly.utils.createSvgElement('clipPath',
-      {'id':'blocklyBlockMenuClipPath'}, this.defs_);
-  this.clipRect_ = Blockly.utils.createSvgElement('rect',
-      {
-        'id': 'blocklyBlockMenuClipRect',
-        'height': '0',
-        'width': '0',
-        'y': '0',
-        'x': '0'
-      },
-      clipPath);
-  this.workspace_.svgGroup_.setAttribute(
-      'clip-path', 'url(#blocklyBlockMenuClipPath)');
-
-  return this.svgGroup_;
-};
-
-/**
- * Calculate the bounding box of the flyout.
- *
- * @return {Object} Contains the position and size of the bounding
- * box containing the elements (blocks, buttons, labels) in the flyout.
- */
-Blockly.VerticalFlyout.prototype.getContentBoundingBox_ = function() {
-  var contentBounds = this.workspace_.getBlocksBoundingBox();
-  var bounds = {
-    xMin: contentBounds.x,
-    yMin: contentBounds.y,
-    xMax: contentBounds.x + contentBounds.width,
-    yMax: contentBounds.y + contentBounds.height
-  };
-
-  // Check if any of the buttons/labels are outside the blocks bounding box.
-  for (var i = 0; i < this.buttons_.length; i ++) {
-    var button = this.buttons_[i];
-    var buttonPosition = button.getPosition();
-    if (buttonPosition.x  < bounds.xMin) {
-      bounds.xMin = buttonPosition.x;
-    }
-    if (buttonPosition.y < bounds.yMin) {
-      bounds.yMin = buttonPosition.y;
-    }
-    // Button extends past the bounding box to the right.
-    if (buttonPosition.x + button.width > bounds.xMax) {
-      bounds.xMax = buttonPosition.x  + button.width;
-    }
-
-    // Button extends past the bounding box on the bottom
-    if (buttonPosition.y + button.height > bounds.yMax) {
-      bounds.yMax = buttonPosition.y + button.height;
-    }
-  }
-
-  return {
-    x: bounds.xMin,
-    y: bounds.yMin,
-    width: bounds.xMax - bounds.xMin,
-    height: bounds.yMax - bounds.yMin,
-  };
-};
-
-/**
- * Return an object with all the metrics required to size scrollbars for the
- * flyout.  The following properties are computed:
- * .viewHeight: Height of the visible rectangle,
- * .viewWidth: Width of the visible rectangle,
- * .contentHeight: Height of the contents,
- * .contentWidth: Width of the contents,
- * .viewTop: Offset of top edge of visible rectangle from parent,
- * .contentTop: Offset of the top-most content from the y=0 coordinate,
- * .absoluteTop: Top-edge of view.
- * .viewLeft: Offset of the left edge of visible rectangle from parent,
- * .contentLeft: Offset of the left-most content from the x=0 coordinate,
- * .absoluteLeft: Left-edge of view.
- * @return {Object} Contains size and position metrics of the flyout.
- * @private
- */
-Blockly.VerticalFlyout.prototype.getMetrics_ = function() {
-  if (!this.isVisible()) {
-    // Flyout is hidden.
-    return null;
-  }
-
-  var optionBox = this.getContentBoundingBox_();
-
-  // Padding for the end of the scrollbar.
-  var absoluteTop = this.SCROLLBAR_PADDING;
-  var absoluteLeft = 0;
-
-  var viewHeight = this.height_ - 2 * this.SCROLLBAR_PADDING;
-  var viewWidth = this.getWidth() - this.SCROLLBAR_PADDING;
-
-  // Add padding to the bottom of the flyout, so we can scroll to the top of
-  // the last category.
-  var contentHeight = optionBox.height * this.workspace_.scale;
-  this.recordCategoryScrollPositions_();
-  var bottomPadding = this.MARGIN;
-  if (this.categoryScrollPositions.length > 0) {
-    var lastLabel = this.categoryScrollPositions[
-        this.categoryScrollPositions.length - 1];
-    var lastPos = lastLabel.position * this.workspace_.scale;
-    var lastCategoryHeight = contentHeight - lastPos;
-    if (lastCategoryHeight < viewHeight) {
-      bottomPadding = viewHeight - lastCategoryHeight;
-    }
-  }
-
-  var metrics = {
-    viewHeight: viewHeight,
-    viewWidth: viewWidth,
-    contentHeight: contentHeight + bottomPadding,
-    contentWidth: optionBox.width * this.workspace_.scale + 2 * this.MARGIN,
-    viewTop: -this.workspace_.scrollY + optionBox.y,
-    viewLeft: -this.workspace_.scrollX,
-    contentTop: optionBox.y,
-    contentLeft: optionBox.x,
-    absoluteTop: absoluteTop,
-    absoluteLeft: absoluteLeft
-  };
-  return metrics;
-};
-
-/**
- * Sets the translation of the flyout to match the scrollbars.
- * @param {!Object} xyRatio Contains a y property which is a float
- *     between 0 and 1 specifying the degree of scrolling and a
- *     similar x property.
- * @private
- */
-Blockly.VerticalFlyout.prototype.setMetrics_ = function(xyRatio) {
-  var metrics = this.getMetrics_();
-  // This is a fix to an apparent race condition.
-  if (!metrics) {
-    return;
-  }
-  if (goog.isNumber(xyRatio.y)) {
-    this.workspace_.scrollY = -metrics.contentHeight * xyRatio.y;
-  }
-  this.workspace_.translate(this.workspace_.scrollX + metrics.absoluteLeft,
-      this.workspace_.scrollY + metrics.absoluteTop);
-
-  this.clipRect_.setAttribute('height', Math.max(0, metrics.viewHeight) + 'px');
-  this.clipRect_.setAttribute('width', metrics.viewWidth + 'px');
-
-  if (this.categoryScrollPositions) {
-    this.selectCategoryByScrollPosition(-this.workspace_.scrollY);
-  }
-};
-
-/**
- * Move the flyout to the edge of the workspace.
- */
-Blockly.VerticalFlyout.prototype.position = function() {
-  if (!this.isVisible()) {
-    return;
-  }
-  var targetWorkspaceMetrics = this.targetWorkspace_.getMetrics();
-  if (!targetWorkspaceMetrics) {
-    // Hidden components will return null.
-    return;
-  }
-
-  // This version of the flyout does not change width to fit its contents.
-  // Instead it matches the width of its parent or uses a default value.
-  this.width_ = this.getWidth();
-
-  if (this.parentToolbox_) {
-    var toolboxWidth = this.parentToolbox_.getWidth();
-    var categoryWidth = toolboxWidth - this.width_;
-    var x = this.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT ?
-        targetWorkspaceMetrics.viewWidth : categoryWidth;
-    var y = 0;
-  } else {
-    var x = this.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT ?
-        targetWorkspaceMetrics.viewWidth - this.width_ : 0;
-    var y = 0;
-  }
-
-  // Record the height for Blockly.Flyout.getMetrics_
-  this.height_ = Math.max(0, targetWorkspaceMetrics.viewHeight - y);
-
-  this.setBackgroundPath_(this.width_, this.height_);
-
-  this.svgGroup_.setAttribute("width", this.width_);
-  this.svgGroup_.setAttribute("height", this.height_);
-  var transform = 'translate(' + x + 'px,' + y + 'px)';
-  Blockly.utils.setCssTransform(this.svgGroup_, transform);
-
-  // Update the scrollbar (if one exists).
-  if (this.scrollbar_) {
-    // Set the scrollbars origin to be the top left of the flyout.
-    this.scrollbar_.setOrigin(x, y);
-    this.scrollbar_.resize();
-  }
-  // The blocks need to be visible in order to be laid out and measured
-  // correctly, but we don't want the flyout to show up until it's properly
-  // sized.  Opacity is set to zero in show().
-  this.svgGroup_.style.opacity = 1;
-};
-
-/**
- * Create and set the path for the visible boundaries of the flyout.
- * @param {number} width The width of the flyout, not including the
- *     rounded corners.
- * @param {number} height The height of the flyout, not including
- *     rounded corners.
- * @private
- */
-Blockly.VerticalFlyout.prototype.setBackgroundPath_ = function(width, height) {
-  var atRight = this.toolboxPosition_ == Blockly.TOOLBOX_AT_RIGHT;
-  // Decide whether to start on the left or right.
-  var path = ['M ' + 0 + ',0'];
-  // Top.
-  path.push('h', width);
-  // Rounded corner.
-  path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0,
-      atRight ? 0 : 1,
-      atRight ? -this.CORNER_RADIUS : this.CORNER_RADIUS,
-      this.CORNER_RADIUS);
-  // Side closest to workspace.
-  path.push('v', Math.max(0, height - this.CORNER_RADIUS * 2));
-  // Rounded corner.
-  path.push('a', this.CORNER_RADIUS, this.CORNER_RADIUS, 0, 0,
-      atRight ? 0 : 1,
-      atRight ? this.CORNER_RADIUS : -this.CORNER_RADIUS,
-      this.CORNER_RADIUS);
-  // Bottom.
-  path.push('h', -width);
-  path.push('z');
-  this.svgBackground_.setAttribute('d', path.join(' '));
-};
-
-/**
- * Scroll the flyout to the top.
- */
-Blockly.VerticalFlyout.prototype.scrollToStart = function() {
-  this.scrollbar_.set(0);
-};
-
-/**
- * Scroll the flyout to a position.
- * @param {number} pos The targeted scroll position in workspace coordinates.
- * @package
- */
-Blockly.VerticalFlyout.prototype.scrollTo = function(pos) {
-  this.scrollTarget = pos * this.workspace_.scale;
-
-  // Make sure not to set the scroll target below the lowest point we can
-  // scroll to, i.e. the content height minus the view height
-  var metrics = this.workspace_.getMetrics();
-  var contentHeight = metrics.contentHeight;
-  var viewHeight = metrics.viewHeight;
-  this.scrollTarget = Math.min(this.scrollTarget, contentHeight - viewHeight);
-
-  this.stepScrollAnimation();
-};
-
-/**
- * Scroll the flyout.
- * @param {!Event} e Mouse wheel scroll event.
- * @private
- */
-Blockly.VerticalFlyout.prototype.wheel_ = function(e) {
-  // remove scrollTarget to stop auto scrolling in stepScrollAnimation
-  this.scrollTarget = null;
-
-  var delta = e.deltaY;
-
-  if (delta) {
-    // Firefox's mouse wheel deltas are a tenth that of Chrome/Safari.
-    // DeltaMode is 1 for a mouse wheel, but not for a trackpad scroll event
-    if (goog.userAgent.GECKO && (e.deltaMode === 1)) {
-      delta *= 10;
-    }
-    var metrics = this.getMetrics_();
-    var pos = (metrics.viewTop - metrics.contentTop) + delta;
-    var limit = metrics.contentHeight - metrics.viewHeight;
-    pos = Math.min(pos, limit);
-    pos = Math.max(pos, 0);
-    this.scrollbar_.set(pos);
-    // When the flyout moves from a wheel event, hide WidgetDiv and DropDownDiv.
-    Blockly.WidgetDiv.hide(true);
-    Blockly.DropDownDiv.hideWithoutAnimation();
-  }
-
-  // Don't scroll the page.
-  e.preventDefault();
-  // Don't propagate mousewheel event (zooming).
-  e.stopPropagation();
-};
-
-/**
- * Delete blocks and background buttons from a previous showing of the flyout.
- * @private
- */
-Blockly.VerticalFlyout.prototype.clearOldBlocks_ = function() {
-  Blockly.VerticalFlyout.superClass_.clearOldBlocks_.call(this);
-
-  // Do the same for checkboxes.
-  for (var checkboxId in this.checkboxes_) {
-    if (!Object.prototype.hasOwnProperty.call(this.checkboxes_, checkboxId)) {
-      continue;
-    }
-    var checkbox = this.checkboxes_[checkboxId];
-    checkbox.block.flyoutCheckbox = null;
-    goog.dom.removeNode(checkbox.svgRoot);
-  }
-  this.checkboxes_ = {};
-};
-
-/**
- * Add listeners to a block that has been added to the flyout.
- * @param {Element} root The root node of the SVG group the block is in.
- * @param {!Blockly.Block} block The block to add listeners for.
- * @param {!Element} rect The invisible rectangle under the block that acts as
- *     a button for that block.
- * @private
- */
-Blockly.VerticalFlyout.prototype.addBlockListeners_ = function(root, block,
-    rect) {
-  Blockly.VerticalFlyout.superClass_.addBlockListeners_.call(this, root, block,
-      rect);
-  if (block.flyoutCheckbox) {
-    this.listeners_.push(Blockly.bindEvent_(block.flyoutCheckbox.svgRoot,
-        'mousedown', null, this.checkboxClicked_(block.flyoutCheckbox)));
-  }
-};
-
-/**
- * Lay out the blocks in the flyout.
- * @param {!Array.<!Object>} contents The blocks and buttons to lay out.
- * @param {!Array.<number>} gaps The visible gaps between blocks.
- * @private
- */
-Blockly.VerticalFlyout.prototype.layout_ = function(contents, gaps) {
-  var margin = this.MARGIN;
-  var flyoutWidth = this.getWidth() / this.workspace_.scale;
-  var cursorX = margin;
-  var cursorY = margin;
-
-  for (var i = 0, item; item = contents[i]; i++) {
-    if (item.type == 'block') {
-      var block = item.block;
-      var allBlocks = block.getDescendants(false);
-      for (var j = 0, child; child = allBlocks[j]; j++) {
-        // Mark blocks as being inside a flyout.  This is used to detect and
-        // prevent the closure of the flyout if the user right-clicks on such a
-        // block.
-        child.isInFlyout = true;
-      }
-      var root = block.getSvgRoot();
-      var blockHW = block.getHeightWidth();
-
-      // Figure out where the block goes, taking into account its size, whether
-      // we're in RTL mode, and whether it has a checkbox.
-      var oldX = block.getRelativeToSurfaceXY().x;
-      var newX = flyoutWidth - this.MARGIN;
-
-      var moveX = this.RTL ? newX - oldX : margin;
-      if (block.hasCheckboxInFlyout()) {
-        this.createCheckbox_(block, cursorX, cursorY, blockHW);
-        if (this.RTL) {
-          moveX -= (this.CHECKBOX_SIZE + this.CHECKBOX_MARGIN);
-        } else {
-          moveX += this.CHECKBOX_SIZE + this.CHECKBOX_MARGIN;
-        }
-      }
-
-      // The block moves a bit extra for the hat, but the block's rectangle
-      // doesn't.  That's because the hat actually extends up from 0.
-      block.moveBy(moveX,
-          cursorY + (block.startHat_ ? Blockly.BlockSvg.START_HAT_HEIGHT : 0));
-
-      var rect = this.createRect_(block, this.RTL ? moveX - blockHW.width : moveX, cursorY, blockHW, i);
-
-      this.addBlockListeners_(root, block, rect);
-
-      cursorY += blockHW.height + gaps[i] + (block.startHat_ ? Blockly.BlockSvg.START_HAT_HEIGHT : 0);
-    } else if (item.type == 'button') {
-      var button = item.button;
-      var buttonSvg = button.createDom();
-      if (this.RTL) {
-        button.moveTo(flyoutWidth - this.MARGIN - button.width, cursorY);
-      } else {
-        button.moveTo(cursorX, cursorY);
-      }
-      button.show();
-      // Clicking on a flyout button or label is a lot like clicking on the
-      // flyout background.
-      this.listeners_.push(Blockly.bindEventWithChecks_(
-          buttonSvg, 'mousedown', this, this.onMouseDown_));
-
-      this.buttons_.push(button);
-      cursorY += button.height + gaps[i];
-    }
-  }
-};
-
-/**
- * Create and place a rectangle corresponding to the given block.
- * @param {!Blockly.Block} block The block to associate the rect to.
- * @param {number} x The x position of the cursor during this layout pass.
- * @param {number} y The y position of the cursor during this layout pass.
- * @param {!{height: number, width: number}} blockHW The height and width of the
- *     block.
- * @param {number} index The index into the background buttons list where this
- *     rect should be placed.
- * @return {!SVGElement} Newly created SVG element for the rectangle behind the
- *     block.
- * @private
- */
-Blockly.VerticalFlyout.prototype.createRect_ = function(block, x, y,
-    blockHW, index) {
-  // Create an invisible rectangle under the block to act as a button.  Just
-  // using the block as a button is poor, since blocks have holes in them.
-  var rect = Blockly.utils.createSvgElement('rect',
-      {
-        'fill-opacity': 0,
-        'x': x,
-        'y': y,
-        'height': blockHW.height,
-        'width': blockHW.width
-      }, null);
-  rect.tooltip = block;
-  Blockly.Tooltip.bindMouseEvents(rect);
-  // Add the rectangles under the blocks, so that the blocks' tooltips work.
-  this.workspace_.getCanvas().insertBefore(rect, block.getSvgRoot());
-
-  block.flyoutRect_ = rect;
-  this.backgroundButtons_[index] = rect;
-  return rect;
-};
-
-/**
- * Create and place a checkbox corresponding to the given block.
- * @param {!Blockly.Block} block The block to associate the checkbox to.
- * @param {number} cursorX The x position of the cursor during this layout pass.
- * @param {number} cursorY The y position of the cursor during this layout pass.
- * @param {!{height: number, width: number}} blockHW The height and width of the
- *     block.
- * @private
- */
-Blockly.VerticalFlyout.prototype.createCheckbox_ = function(block, cursorX,
-    cursorY, blockHW) {
-  var checkboxState = Blockly.VerticalFlyout.getCheckboxState(block.id);
-  var svgRoot = block.getSvgRoot();
-  var extraSpace = this.CHECKBOX_SIZE + this.CHECKBOX_MARGIN;
-  var width = this.RTL ? this.getWidth() / this.workspace_.scale - extraSpace : cursorX;
-  var height = cursorY + blockHW.height / 2 - this.CHECKBOX_SIZE / 2;
-  var touchMargin = this.CHECKBOX_TOUCH_PADDING;
-  var checkboxGroup = Blockly.utils.createSvgElement('g',
-      {
-        'transform': 'translate(' + width + ', ' + height + ')'
-      }, null);
-  Blockly.utils.createSvgElement('rect',
-      {
-        'class': 'blocklyFlyoutCheckbox',
-        'height': this.CHECKBOX_SIZE,
-        'width': this.CHECKBOX_SIZE,
-        'rx': this.CHECKBOX_CORNER_RADIUS,
-        'ry': this.CHECKBOX_CORNER_RADIUS
-      }, checkboxGroup);
-  Blockly.utils.createSvgElement('path',
-      {
-        'class': 'blocklyFlyoutCheckboxPath',
-        'd': this.CHECKMARK_PATH
-      }, checkboxGroup);
-  Blockly.utils.createSvgElement('rect',
-      {
-        'class': 'blocklyTouchTargetBackground',
-        'x': -touchMargin + 'px',
-        'y': -touchMargin + 'px',
-        'height': this.CHECKBOX_SIZE + 2 * touchMargin,
-        'width': this.CHECKBOX_SIZE + 2 * touchMargin,
-      }, checkboxGroup);
-  var checkboxObj = {svgRoot: checkboxGroup, clicked: checkboxState, block: block};
-
-  if (checkboxState) {
-    Blockly.utils.addClass((checkboxObj.svgRoot), 'checked');
-  }
-
-  block.flyoutCheckbox = checkboxObj;
-  this.workspace_.getCanvas().insertBefore(checkboxGroup, svgRoot);
-  this.checkboxes_[block.id] = checkboxObj;
-};
-
-/**
- * Respond to a click on a checkbox in the flyout.
- * @param {!Object} checkboxObj An object containing the svg element of the
- *    checkbox, a boolean for the state of the checkbox, and the block the
- *    checkbox is associated with.
- * @return {!Function} Function to call when checkbox is clicked.
- * @private
- */
-Blockly.VerticalFlyout.prototype.checkboxClicked_ = function(checkboxObj) {
-  return function(e) {
-    this.setCheckboxState(checkboxObj.block.id, !checkboxObj.clicked);
-    // This event has been handled.  No need to bubble up to the document.
-    e.stopPropagation();
-    e.preventDefault();
-  }.bind(this);
-};
-
-/**
- * Set the state of a checkbox by block ID.
- * @param {string} blockId ID of the block whose checkbox should be set
- * @param {boolean} value Value to set the checkbox to.
- * @public
- */
-Blockly.VerticalFlyout.prototype.setCheckboxState = function(blockId, value) {
-  var checkboxObj = this.checkboxes_[blockId];
-  if (!checkboxObj || checkboxObj.clicked === value) {
-    return;
-  }
-
-  var oldValue = checkboxObj.clicked;
-  checkboxObj.clicked = value;
-
-  if (checkboxObj.clicked) {
-    Blockly.utils.addClass(checkboxObj.svgRoot, 'checked');
-  } else {
-    Blockly.utils.removeClass(checkboxObj.svgRoot, 'checked');
-  }
-
-  Blockly.Events.fire(new Blockly.Events.Change(
-      checkboxObj.block, 'checkbox', null, oldValue, value));
-};
-
-/**
- * Determine if a drag delta is toward the workspace, based on the position
- * and orientation of the flyout. This to decide if a new block should be
- * created or if the flyout should scroll.
- * @param {!goog.math.Coordinate} currentDragDeltaXY How far the pointer has
- *     moved from the position at mouse down, in pixel units.
- * @return {boolean} true if the drag is toward the workspace.
- * @package
- */
-Blockly.VerticalFlyout.prototype.isDragTowardWorkspace = function(currentDragDeltaXY) {
-  var dx = currentDragDeltaXY.x;
-  var dy = currentDragDeltaXY.y;
-  // Direction goes from -180 to 180, with 0 toward the right and 90 on top.
-  var dragDirection = Math.atan2(dy, dx) / Math.PI * 180;
-
-  var draggingTowardWorkspace = false;
-  var range = this.dragAngleRange_;
-  if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_LEFT) {
-    // Vertical at left.
-    if (dragDirection < range && dragDirection > -range) {
-      draggingTowardWorkspace = true;
-    }
-  } else {
-    // Vertical at right.
-    if (dragDirection < -180 + range || dragDirection > 180 - range) {
-      draggingTowardWorkspace = true;
-    }
-  }
-  return draggingTowardWorkspace;
-};
-
-/**
- * Return the deletion rectangle for this flyout in viewport coordinates.
- * Deletion area is the height of the flyout, but extends to the left (in LTR)
- * by a lot in order to allow for deleting blocks when dragged beyond the left
- * window edge. In RTL, the delete area extends off to the right.
- * The top/bottom do not extend to allow dragging blocks outside of the workspace
- * to be dropped (e.g. to the backpack).
- * @return {goog.math.Rect} Rectangle in which to delete.
- */
-Blockly.VerticalFlyout.prototype.getClientRect = function() {
-  if (!this.svgGroup_) {
-    return null;
-  }
-
-  var flyoutRect = this.svgGroup_.getBoundingClientRect();
-  // BIG_NUM is offscreen padding so that blocks dragged beyond the shown flyout
-  // area are still deleted.  Must be larger than the largest screen size,
-  // but be smaller than half Number.MAX_SAFE_INTEGER (not available on IE).
-  var BIG_NUM = 1000000000;
-  var x = flyoutRect.left;
-  var y = flyoutRect.top;
-  var width = flyoutRect.width;
-  var height = flyoutRect.height;
-
-  if (this.toolboxPosition_ == Blockly.TOOLBOX_AT_LEFT) {
-    return new goog.math.Rect(x - BIG_NUM, y, BIG_NUM + width, height);
-  } else {  // Right
-    return new goog.math.Rect(x, y, BIG_NUM + width, height);
-  }
-};
-
-/**
- * Compute width of flyout.  Position button under each block.
- * For RTL: Lay out the blocks right-aligned.
- * @param {!Array<!Blockly.Block>} blocks The blocks to reflow.
- */
-Blockly.VerticalFlyout.prototype.reflowInternal_ = function(/* blocks */) {
-  // This is a no-op because the flyout is a fixed size.
-  return;
-};
-
-/**
- * Gets the checkbox state for a block
- * @param {string} blockId The ID of the block in question.
- * @return {boolean} Whether the block is checked.
- * @public
- */
-Blockly.VerticalFlyout.getCheckboxState = function(/* blockId */) {
-  return false;
-};