scratch-blocks 1.1.206 → 2.0.0-beta.1

package/core/field_note.js

@@ -1,850 +0,0 @@
-/**
- * @license
- * Visual Blocks Editor
- *
- * Copyright 2018 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.
- */
-
-/**
- * @fileoverview Note input field, for selecting a musical note on a piano.
- * @author ericr@media.mit.edu (Eric Rosenbaum)
- */
-'use strict';
-
-goog.provide('Blockly.FieldNote');
-
-goog.require('Blockly.DropDownDiv');
-goog.require('Blockly.FieldTextInput');
-goog.require('goog.math');
-goog.require('goog.userAgent');
-
-/**
- * Class for a note input field, for selecting a musical note on a piano.
- * @param {(string|number)=} opt_value The initial content of the field. The
- *     value should cast to a number, and if it does not, '0' will be used.
- * @param {Function=} opt_validator An optional function that is called
- *     to validate any constraints on what the user entered.  Takes the new
- *     text as an argument and returns the accepted text or null to abort
- *     the change.
- * @extends {Blockly.FieldTextInput}
- * @constructor
- */
-Blockly.FieldNote = function(opt_value, opt_validator) {
-  opt_value = (opt_value && !isNaN(opt_value)) ? String(opt_value) : '0';
-  Blockly.FieldNote.superClass_.constructor.call(
-      this, opt_value, opt_validator);
-  this.addArgType('note');
-
-  /**
-   * Width of the field. Computed when drawing it, and used for animation.
-   * @type {number}
-   * @private
-   */
-  this.fieldEditorWidth_ = 0;
-
-  /**
-   * Height of the field. Computed when drawing it.
-   * @type {number}
-   * @private
-   */
-  this.fieldEditorHeight_ = 0;
-
-  /**
-   * The piano SVG.
-   * @type {SVGElement}
-   * @private
-   */
-  this.pianoSVG_ = null;
-
-  /**
-   * Array of SVG elements representing the clickable piano keys.
-   * @type {!Array<SVGElement>}
-   * @private
-   */
-  this.keySVGs_ = [];
-
-  /**
-   * Note name indicator at the top of the field.
-   * @type {SVGElement}
-   * @private
-   */
-  this.noteNameText_ = null;
-
-  /**
-   * Note name indicator on the low C key.
-   * @type {SVGElement}
-   * @private
-   */
-  this.lowCText_ = null;
-
-  /**
-   * Note name indicator on the low C key.
-   * @type {SVGElement}
-   * @private
-   */
-  this.highCText_ = null;
-
-  /**
-   * Octave number of the currently displayed range of keys.
-   * @type {number}
-   * @private
-   */
-  this.displayedOctave_ = null;
-
-  /**
-   * Current animation position of the piano SVG, as it shifts left or right to
-   * change octaves.
-   * @type {number}
-   * @private
-   */
-  this.animationPos_ = 0;
-
-  /**
-   * Target position for the animation as the piano SVG shifts left or right.
-   * @type {number}
-   * @private
-   */
-  this.animationTarget_ = 0;
-
-  /**
-   * A flag indicating that the mouse is currently down. Used in combination with
-   * mouse enter events to update the key selection while dragging.
-   * @type {boolean}
-   * @private
-   */
-  this.mouseIsDown_ = false;
-
-  /**
-   * An array of wrappers for mouse down events on piano keys.
-   * @type {!Array.<!Array>}
-   * @private
-   */
-  this.mouseDownWrappers_ = [];
-
-  /**
-   * A wrapper for the mouse up event.
-   * @type {!Array.<!Array>}
-   * @private
-   */
-  this.mouseUpWrapper_ = null;
-
-  /**
-   * An array of wrappers for mouse enter events on piano keys.
-   * @type {!Array.<!Array>}
-   * @private
-   */
-  this.mouseEnterWrappers_ = [];
-
-  /**
-   * A wrapper for the mouse down event on the octave down button.
-   * @type {!Array.<!Array>}
-   * @private
-   */
-  this.octaveDownMouseDownWrapper_ = null;
-
-  /**
-   * A wrapper for the mouse down event on the octave up button.
-   * @type {!Array.<!Array>}
-   * @private
-   */
-  this.octaveUpMouseDownWrapper_ = null;
-};
-goog.inherits(Blockly.FieldNote, Blockly.FieldTextInput);
-
-/**
- * Inset in pixels of content displayed in the field, caused by parent properties.
- * The inset is actually determined by the CSS property blocklyDropDownDiv- it is
- * the sum of the padding and border thickness.
- */
-Blockly.FieldNote.INSET = 5;
-
-/**
- * Height of the top area of the field, in px.
- * @type {number}
- * @const
- */
-Blockly.FieldNote.TOP_MENU_HEIGHT = 32 - Blockly.FieldNote.INSET;
-
-/**
- * Padding on the top and sides of the field, in px.
- * @type {number}
- * @const
- */
-Blockly.FieldNote.EDGE_PADDING = 1;
-
-/**
- * Height of the drop shadow on the piano, in px.
- * @type {number}
- * @const
- */
-Blockly.FieldNote.SHADOW_HEIGHT = 4;
-
-/**
- * Color for the shadow on the piano.
- * @type {string}
- * @const
- */
-Blockly.FieldNote.SHADOW_COLOR = '#000';
-
-/**
- * Opacity for the shadow on the piano.
- * @type {string}
- * @const
- */
-Blockly.FieldNote.SHADOW_OPACITY = .2;
-
-/**
- * A color for the white piano keys.
- * @type {string}
- * @const
- */
-Blockly.FieldNote.WHITE_KEY_COLOR = '#FFFFFF';
-
-/**
- * A color for the black piano keys.
- * @type {string}
- * @const
- */
-Blockly.FieldNote.BLACK_KEY_COLOR = '#323133';
-
-/**
- * A color for stroke around black piano keys.
- * @type {string}
- * @const
- */
-Blockly.FieldNote.BLACK_KEY_STROKE = '#555555';
-
-/**
- * A color for the selected state of a piano key.
- * @type {string}
- * @const
- */
-Blockly.FieldNote.KEY_SELECTED_COLOR = '#b0d6ff';
-
-/**
- * The number of white keys in one octave on the piano.
- * @type {number}
- * @const
- */
-Blockly.FieldNote.NUM_WHITE_KEYS = 8;
-
-/**
- * Height of a white piano key, in px.
- * @type {string}
- * @const
- */
-Blockly.FieldNote.WHITE_KEY_HEIGHT = 72;
-
-/**
- * Width of a white piano key, in px.
- * @type {string}
- * @const
- */
-Blockly.FieldNote.WHITE_KEY_WIDTH = 40;
-
-/**
- * Height of a black piano key, in px.
- * @type {string}
- * @const
- */
-Blockly.FieldNote.BLACK_KEY_HEIGHT = 40;
-
-/**
- * Width of a black piano key, in px.
- * @type {string}
- * @const
- */
-Blockly.FieldNote.BLACK_KEY_WIDTH = 32;
-
-/**
- * Radius of the curved bottom corner of a piano key, in px.
- * @type {string}
- * @const
- */
-Blockly.FieldNote.KEY_RADIUS = 6;
-
-/**
- * Bottom padding for the labels on C keys.
- * @type {string}
- * @const
- */
-Blockly.FieldNote.KEY_LABEL_PADDING = 8;
-
-/**
- * An array of objects with data describing the keys on the piano.
- * @type {Array.<{name: String, pitch: Number, isBlack: boolean}>}
- * @const
- */
-Blockly.FieldNote.KEY_INFO = [
-  {name: 'C', pitch: 0},
-  {name: 'C♯', pitch: 1, isBlack: true},
-  {name: 'D', pitch: 2},
-  {name: 'E♭', pitch: 3, isBlack: true},
-  {name: 'E', pitch: 4},
-  {name: 'F', pitch: 5},
-  {name: 'F♯', pitch: 6, isBlack: true},
-  {name: 'G', pitch: 7},
-  {name: 'G♯', pitch: 8, isBlack: true},
-  {name: 'A', pitch: 9},
-  {name: 'B♭', pitch: 10, isBlack: true},
-  {name: 'B', pitch: 11},
-  {name: 'C', pitch: 12}
-];
-
-/**
- * The MIDI note number of the highest note selectable on the piano.
- * @type {number}
- * @const
- */
-Blockly.FieldNote.MAX_NOTE = 130;
-
-/**
- * The fraction of the distance to the target location to move the piano at each
- * step of the animation.
- * @type {number}
- * @const
- */
-Blockly.FieldNote.ANIMATION_FRACTION = 0.2;
-
-/**
- * Path to the arrow svg icon, used on the octave buttons.
- * @type {string}
- * @const
- */
-Blockly.FieldNote.ARROW_SVG_PATH = 'icons/arrow_button.svg';
-
-/**
- * The size of the square octave buttons.
- * @type {number}
- * @const
- */
-Blockly.FieldNote.OCTAVE_BUTTON_SIZE = 32;
-
-/**
- * Construct a FieldNote from a JSON arg object.
- * @param {!Object} options A JSON object with options.
- * @returns {!Blockly.FieldNote} The new field instance.
- * @package
- * @nocollapse
- */
-Blockly.FieldNote.fromJson = function(options) {
-  return new Blockly.FieldNote(options['note']);
-};
-
-/**
- * Clean up this FieldNote, as well as the inherited FieldTextInput.
- * @return {!Function} Closure to call on destruction of the WidgetDiv.
- * @private
- */
-Blockly.FieldNote.prototype.dispose_ = function() {
-  var thisField = this;
-  return function() {
-    Blockly.FieldNote.superClass_.dispose_.call(thisField)();
-    thisField.mouseDownWrappers_.forEach(function(wrapper) {
-      Blockly.unbindEvent_(wrapper);
-    });
-    thisField.mouseEnterWrappers_.forEach(function(wrapper) {
-      Blockly.unbindEvent_(wrapper);
-    });
-    if (thisField.mouseUpWrapper_) {
-      Blockly.unbindEvent_(thisField.mouseUpWrapper_);
-    }
-    if (thisField.octaveDownMouseDownWrapper_) {
-      Blockly.unbindEvent_(thisField.octaveDownMouseDownWrapper_);
-    }
-    if (thisField.octaveUpMouseDownWrapper_) {
-      Blockly.unbindEvent_(thisField.octaveUpMouseDownWrapper_);
-    }
-    this.pianoSVG_ = null;
-    this.keySVGs_.length = 0;
-    this.noteNameText_ = null;
-    this.lowCText_ = null;
-    this.highCText_ = null;
-  };
-};
-
-/**
- * Show a field with piano keys.
- * @private
- */
-Blockly.FieldNote.prototype.showEditor_ = function() {
-  // Mobile browsers have issues with in-line textareas (focus & keyboards).
-  Blockly.FieldNote.superClass_.showEditor_.call(this, this.useTouchInteraction_);
-
-  // If there is an existing drop-down someone else owns, hide it immediately and clear it.
-  Blockly.DropDownDiv.hideWithoutAnimation();
-  Blockly.DropDownDiv.clearContent();
-
-  // Build the SVG DOM.
-  var div = Blockly.DropDownDiv.getContentDiv();
-
-  this.fieldEditorWidth_ = Blockly.FieldNote.NUM_WHITE_KEYS * Blockly.FieldNote.WHITE_KEY_WIDTH +
-    Blockly.FieldNote.EDGE_PADDING;
-  this.fieldEditorHeight_ = Blockly.FieldNote.TOP_MENU_HEIGHT +
-    Blockly.FieldNote.WHITE_KEY_HEIGHT +
-    Blockly.FieldNote.EDGE_PADDING;
-
-  var svg = Blockly.utils.createSvgElement('svg', {
-    'xmlns': 'http://www.w3.org/2000/svg',
-    'xmlns:html': 'http://www.w3.org/1999/xhtml',
-    'xmlns:xlink': 'http://www.w3.org/1999/xlink',
-    'version': '1.1',
-    'height': this.fieldEditorHeight_ + 'px',
-    'width': this.fieldEditorWidth_ + 'px'
-  }, div);
-
-  // Add the white and black keys
-  // Since we are adding the keys from left to right in order, they need
-  // to be in two groups in order to layer correctly.
-  this.pianoSVG_ = Blockly.utils.createSvgElement('g', {}, svg);
-  var whiteKeyGroup = Blockly.utils.createSvgElement('g', {}, this.pianoSVG_);
-  var blackKeyGroup = Blockly.utils.createSvgElement('g', {}, this.pianoSVG_);
-
-  // Add three piano octaves, so we can animate moving up or down an octave.
-  // Only the middle octave gets bound to events.
-  this.keySVGs_ = [];
-  this.addPianoOctave_(-this.fieldEditorWidth_ + Blockly.FieldNote.EDGE_PADDING,
-      whiteKeyGroup, blackKeyGroup, null);
-  this.addPianoOctave_(0, whiteKeyGroup, blackKeyGroup, this.keySVGs_);
-  this.addPianoOctave_(this.fieldEditorWidth_ - Blockly.FieldNote.EDGE_PADDING,
-      whiteKeyGroup, blackKeyGroup, null);
-
-  // Note name indicator at the top of the field
-  this.noteNameText_ = Blockly.utils.createSvgElement('text',
-      {
-        'x': this.fieldEditorWidth_ / 2,
-        'y': Blockly.FieldNote.TOP_MENU_HEIGHT / 2,
-        'class': 'blocklyText',
-        'text-anchor': 'middle',
-        'dominant-baseline': 'middle',
-      }, svg);
-
-  // Note names on the low and high C keys
-  var lowCX = Blockly.FieldNote.WHITE_KEY_WIDTH / 2;
-  this.lowCText_ = this.addCKeyLabel_(lowCX, svg);
-  var highCX = lowCX + (Blockly.FieldNote.WHITE_KEY_WIDTH *
-    (Blockly.FieldNote.NUM_WHITE_KEYS - 1));
-  this.highCText_ = this.addCKeyLabel_(highCX, svg);
-
-  // Horizontal line at the top of the keys
-  Blockly.utils.createSvgElement('line',
-      {
-        'stroke': this.sourceBlock_.getColourTertiary(),
-        'x1': 0,
-        'y1': Blockly.FieldNote.TOP_MENU_HEIGHT,
-        'x2': this.fieldEditorWidth_,
-        'y2': Blockly.FieldNote.TOP_MENU_HEIGHT
-      }, svg);
-
-  // Drop shadow at the top of the keys
-  Blockly.utils.createSvgElement('rect',
-      {
-        'x': 0,
-        'y': Blockly.FieldNote.TOP_MENU_HEIGHT,
-        'width': this.fieldEditorWidth_,
-        'height': Blockly.FieldNote.SHADOW_HEIGHT,
-        'fill': Blockly.FieldNote.SHADOW_COLOR,
-        'fill-opacity': Blockly.FieldNote.SHADOW_OPACITY
-      }, svg);
-
-  // Octave buttons
-  this.octaveDownButton = this.addOctaveButton_(0, true, svg);
-  this.octaveUpButton = this.addOctaveButton_(
-      (this.fieldEditorWidth_ + Blockly.FieldNote.INSET * 2) -
-      Blockly.FieldNote.OCTAVE_BUTTON_SIZE, false, svg);
-
-  this.octaveDownMouseDownWrapper_ =
-    Blockly.bindEvent_(this.octaveDownButton, 'mousedown', this, function() {
-      this.changeOctaveBy_(-1);
-    });
-  this.octaveUpMouseDownWrapper_ =
-      Blockly.bindEvent_(this.octaveUpButton, 'mousedown', this,function() {
-        this.changeOctaveBy_(1);
-      });
-  Blockly.DropDownDiv.setColour(this.sourceBlock_.parentBlock_.getColour(),
-      this.sourceBlock_.getColourTertiary());
-  Blockly.DropDownDiv.setCategory(this.sourceBlock_.parentBlock_.getCategory());
-  Blockly.DropDownDiv.showPositionedByBlock(this, this.sourceBlock_);
-
-  this.updateSelection_();
-};
-
-/**
- * Add one octave of piano keys drawn using SVG.
- * @param {number} x The x position of the left edge of this octave of keys.
- * @param {SVGElement} whiteKeyGroup The group for all white piano keys.
- * @param {SvgElement} blackKeyGroup The group for all black piano keys.
- * @param {!Array.<SvgElement>} keySVGarray An array containing all the key SVGs.
- * @private
- */
-Blockly.FieldNote.prototype.addPianoOctave_ = function(x, whiteKeyGroup, blackKeyGroup, keySVGarray) {
-  var xIncrement, width, height, fill, stroke, group;
-  x += Blockly.FieldNote.EDGE_PADDING / 2;
-  var y = Blockly.FieldNote.TOP_MENU_HEIGHT;
-  for (var i = 0; i < Blockly.FieldNote.KEY_INFO.length; i++) {
-    // Draw a black or white key
-    if (Blockly.FieldNote.KEY_INFO[i].isBlack) {
-      // Black keys are shifted back half a key
-      x -= Blockly.FieldNote.BLACK_KEY_WIDTH / 2;
-      xIncrement = Blockly.FieldNote.BLACK_KEY_WIDTH / 2;
-      width = Blockly.FieldNote.BLACK_KEY_WIDTH;
-      height = Blockly.FieldNote.BLACK_KEY_HEIGHT;
-      fill = Blockly.FieldNote.BLACK_KEY_COLOR;
-      stroke = Blockly.FieldNote.BLACK_KEY_STROKE;
-      group = blackKeyGroup;
-    } else {
-      xIncrement = Blockly.FieldNote.WHITE_KEY_WIDTH;
-      width = Blockly.FieldNote.WHITE_KEY_WIDTH;
-      height = Blockly.FieldNote.WHITE_KEY_HEIGHT;
-      fill = Blockly.FieldNote.WHITE_KEY_COLOR;
-      stroke = this.sourceBlock_.getColourTertiary();
-      group = whiteKeyGroup;
-    }
-    var attr = {
-      'd': this.getPianoKeyPath_(x, y, width, height),
-      'fill': fill,
-      'stroke': stroke
-    };
-    x += xIncrement;
-
-    var keySVG = Blockly.utils.createSvgElement('path', attr, group);
-
-    if (keySVGarray) {
-      keySVGarray[i] = keySVG;
-      keySVG.setAttribute('data-pitch', Blockly.FieldNote.KEY_INFO[i].pitch);
-      keySVG.setAttribute('data-name', Blockly.FieldNote.KEY_INFO[i].name);
-      keySVG.setAttribute('data-isBlack', Blockly.FieldNote.KEY_INFO[i].isBlack);
-
-      this.mouseDownWrappers_[i] =
-          Blockly.bindEvent_(keySVG, 'mousedown', this, this.onMouseDownOnKey_);
-      this.mouseEnterWrappers_[i] =
-          Blockly.bindEvent_(keySVG, 'mouseenter', this, this.onMouseEnter_);
-    }
-  }
-};
-
-/**
- * Construct the SVG path string for a piano key shape: a rectangle with rounded
- * corners at the bottom.
- * @param {number} x the x position for the key.
- * @param {number} y the y position for the key.
- * @param {number} width the width of the key.
- * @param {number} height the height of the key.
- * @returns {string} the SVG path as a string.
- * @private
- */
-Blockly.FieldNote.prototype.getPianoKeyPath_ = function(x, y, width, height) {
-  return  'M' + x + ' ' + y + ' ' +
-    'L' + x + ' ' + (y + height -  Blockly.FieldNote.KEY_RADIUS) + ' ' +
-    'Q' + x + ' ' + (y + height) + ' ' +
-    (x + Blockly.FieldNote.KEY_RADIUS) + ' ' + (y + height) + ' ' +
-    'L' + (x + width - Blockly.FieldNote.KEY_RADIUS) + ' ' + (y + height) + ' ' +
-    'Q' + (x + width) + ' ' + (y + height) + ' ' +
-    (x + width) + ' ' + (y + height - Blockly.FieldNote.KEY_RADIUS) + ' ' +
-    'L' + (x + width) + ' ' + y + ' ' +
-    'L' + x +  ' ' + y;
-};
-
-/**
- * Add a button for switching the displayed octave of the piano up or down.
- * @param {number} x The x position of the button.
- * @param {boolean} flipped If true, the icon should be flipped.
- * @param {SvgElement} svg The svg element to add the buttons to.
- * @returns {SvgElement} A group containing the button SVG elements.
- * @private
- */
-Blockly.FieldNote.prototype.addOctaveButton_ = function(x, flipped, svg) {
-  var group = Blockly.utils.createSvgElement('g', {}, svg);
-  var imageSize = Blockly.FieldNote.OCTAVE_BUTTON_SIZE;
-  var arrow = Blockly.utils.createSvgElement('image',
-      {
-        'width': imageSize,
-        'height': imageSize,
-        'x': x - Blockly.FieldNote.INSET,
-        'y': -1 * Blockly.FieldNote.INSET
-      }, group);
-  arrow.setAttributeNS(
-      'http://www.w3.org/1999/xlink',
-      'xlink:href',
-      Blockly.mainWorkspace.options.pathToMedia + Blockly.FieldNote.ARROW_SVG_PATH
-  );
-  Blockly.utils.createSvgElement('line',
-      {
-        'stroke': this.sourceBlock_.getColourTertiary(),
-        'x1': x - Blockly.FieldNote.INSET,
-        'y1': 0,
-        'x2': x - Blockly.FieldNote.INSET,
-        'y2': Blockly.FieldNote.TOP_MENU_HEIGHT - Blockly.FieldNote.INSET
-      }, group);
-  if (flipped) {
-    var translateX = -1 * Blockly.FieldNote.OCTAVE_BUTTON_SIZE + (Blockly.FieldNote.INSET * 2);
-    group.setAttribute('transform', 'scale(-1, 1) ' +
-      'translate(' + translateX + ', 0)');
-  }
-  return group;
-};
-
-/**
- * Add an SVG text label for display on the C keys of the piano.
- * @param {number} x The x position for the label.
- * @param {SvgElement} svg The SVG element to add the label to.
- * @returns {SvgElement} The SVG element containing the label.
- * @private
- */
-Blockly.FieldNote.prototype.addCKeyLabel_ = function(x, svg) {
-  return Blockly.utils.createSvgElement('text',
-      {
-        'x': x,
-        'y': Blockly.FieldNote.TOP_MENU_HEIGHT + Blockly.FieldNote.WHITE_KEY_HEIGHT -
-          Blockly.FieldNote.KEY_LABEL_PADDING,
-        'class': 'scratchNotePickerKeyLabel',
-        'text-anchor': 'middle'
-      }, svg);
-};
-
-/**
- * Set the visibility of the C key labels.
- * @param {boolean} visible If true, set labels to be visible.
- * @private
- */
-Blockly.FieldNote.prototype.setCKeyLabelsVisible_ = function(visible) {
-  if (visible) {
-    this.fadeSvgToOpacity_(this.lowCText_, 1);
-    this.fadeSvgToOpacity_(this.highCText_, 1);
-  } else {
-    this.fadeSvgToOpacity_(this.lowCText_, 0);
-    this.fadeSvgToOpacity_(this.highCText_, 0);
-  }
-};
-
-/**
- * Animate an SVG to fade it in or out to a target opacity.
- * @param {SvgElement} svg The SVG element to apply the fade to.
- * @param {number} opacity The target opacity.
- * @private
- */
-Blockly.FieldNote.prototype.fadeSvgToOpacity_ = function(svg, opacity) {
-  svg.setAttribute('style', 'opacity: ' + opacity + '; transition: opacity 0.1s;');
-};
-
-/**
- * Handle the mouse down event on a piano key.
- * @param {!Event} e Mouse down event.
- * @private
- */
-Blockly.FieldNote.prototype.onMouseDownOnKey_ = function(e) {
-  this.mouseIsDown_ = true;
-  this.mouseUpWrapper_ = Blockly.bindEvent_(document.body, 'mouseup', this, this.onMouseUp_);
-  this.selectNoteWithMouseEvent_(e);
-};
-
-/**
- * Handle the mouse up event following a mouse down on a piano key.
- * @private
- */
-Blockly.FieldNote.prototype.onMouseUp_ = function() {
-  this.mouseIsDown_ = false;
-  Blockly.unbindEvent_(this.mouseUpWrapper_);
-};
-
-/**
- * Handle the event when the mouse enters a piano key.
- * @param {!Event} e Mouse enter event.
- * @private
- */
-Blockly.FieldNote.prototype.onMouseEnter_ = function(e) {
-  if (this.mouseIsDown_) {
-    this.selectNoteWithMouseEvent_(e);
-  }
-};
-
-/**
- * Use the data in a mouse event to select a new note, and play it.
- * @param {!Event} e Mouse event.
- * @private
- */
-Blockly.FieldNote.prototype.selectNoteWithMouseEvent_ = function(e) {
-  var newNoteNum = Number(e.target.getAttribute('data-pitch')) + this.displayedOctave_ * 12;
-  this.setNoteNum_(newNoteNum);
-  this.playNoteInternal_();
-};
-
-/**
- * Play a note, by calling the externally overriden play note function.
- * @private
- */
-Blockly.FieldNote.prototype.playNoteInternal_ = function() {
-  if (Blockly.FieldNote.playNote_) {
-    Blockly.FieldNote.playNote_(
-        this.getValue(),
-        this.sourceBlock_.parentBlock_.getCategory()
-    );
-  }
-};
-
-/**
- * Function to play a musical note corresponding to the key selected.
- * Overridden externally.
- * @param {number} noteNum the MIDI note number to play.
- * @param {string} id An id to select a scratch extension to play the note.
- * @private
- */
-Blockly.FieldNote.playNote_ = function(/* noteNum, id*/) {
-  return;
-};
-
-/**
- * Change the selected note by a number of octaves, and start the animation.
- * @param {number} octaves The number of octaves to change by.
- * @private
- */
-Blockly.FieldNote.prototype.changeOctaveBy_ = function(octaves) {
-  this.displayedOctave_ += octaves;
-  if (this.displayedOctave_ < 0) {
-    this.displayedOctave_ = 0;
-    return;
-  }
-  var maxOctave = Math.floor(Blockly.FieldNote.MAX_NOTE / 12);
-  if (this.displayedOctave_ > maxOctave) {
-    this.displayedOctave_ = maxOctave;
-    return;
-  }
-
-  var newNote = Number(this.getText()) + (octaves * 12);
-  this.setNoteNum_(newNote);
-
-  this.animationTarget_ = this.fieldEditorWidth_ * octaves * -1;
-  this.animationPos_ = 0;
-  this.stepOctaveAnimation_();
-  this.setCKeyLabelsVisible_(false);
-};
-
-/**
- * Animate the piano up or down an octave by sliding it to the left or right.
- * @private
- */
-Blockly.FieldNote.prototype.stepOctaveAnimation_ = function() {
-  var absDiff = Math.abs(this.animationPos_ - this.animationTarget_);
-  if (absDiff < 1) {
-    this.pianoSVG_.setAttribute('transform', 'translate(0, 0)');
-    this.setCKeyLabelsVisible_(true);
-    this.playNoteInternal_();
-    return;
-  }
-  this.animationPos_ += (this.animationTarget_ - this.animationPos_) *
-    Blockly.FieldNote.ANIMATION_FRACTION;
-  this.pianoSVG_.setAttribute('transform', 'translate(' + this.animationPos_ + ',0)');
-  requestAnimationFrame(this.stepOctaveAnimation_.bind(this));
-};
-
-/**
- * Set the selected note number, and update the piano display and the input field.
- * @param {number} noteNum The MIDI note number to select.
- * @private
- */
-Blockly.FieldNote.prototype.setNoteNum_ = function(noteNum) {
-  noteNum = this.callValidator(noteNum);
-  this.setValue(noteNum);
-  Blockly.FieldTextInput.htmlInput_.value = noteNum;
-};
-
-/**
- * Sets the text in this field.  Triggers a rerender of the source block, and
- * updates the selection on the field.
- * @param {?string} text New text.
- */
-Blockly.FieldNote.prototype.setText = function(text) {
-  Blockly.FieldNote.superClass_.setText.call(this, text);
-  if (!this.textElement_) {
-    // Not rendered yet.
-    return;
-  }
-  this.updateSelection_();
-  // Cached width is obsolete.  Clear it.
-  this.size_.width = 0;
-};
-
-/**
- * For a MIDI note number, find the index of the corresponding piano key.
- * @param {number} noteNum The note number.
- * @returns {number} The index of the piano key.
- * @private
- */
-Blockly.FieldNote.prototype.noteNumToKeyIndex_ = function(noteNum) {
-  return Math.floor(noteNum) - (this.displayedOctave_ * 12);
-};
-
-/**
- * Update the selected note and labels on the field.
- * @private
- */
-Blockly.FieldNote.prototype.updateSelection_ = function() {
-  var noteNum = Number(this.getText());
-
-  // If the note is outside the currently displayed octave, update it
-  if (this.displayedOctave_ == null ||
-      noteNum > ((this.displayedOctave_ * 12) + 12) ||
-      noteNum < (this.displayedOctave_ * 12)) {
-    this.displayedOctave_ = Math.floor(noteNum / 12);
-  }
-
-  var index = this.noteNumToKeyIndex_(noteNum);
-
-  // Clear the highlight on all keys
-  this.keySVGs_.forEach(function(svg) {
-    var isBlack = svg.getAttribute('data-isBlack');
-    if (isBlack === 'true') {
-      svg.setAttribute('fill', Blockly.FieldNote.BLACK_KEY_COLOR);
-    } else {
-      svg.setAttribute('fill', Blockly.FieldNote.WHITE_KEY_COLOR);
-    }
-  });
-  // Set the highlight on the selected key
-  if (this.keySVGs_[index]) {
-    this.keySVGs_[index].setAttribute('fill', Blockly.FieldNote.KEY_SELECTED_COLOR);
-    // Update the note name text
-    var noteName =  Blockly.FieldNote.KEY_INFO[index].name;
-    this.noteNameText_.textContent = noteName + ' (' + Math.floor(noteNum) + ')';
-    // Update the low and high C note names
-    var lowCNum = this.displayedOctave_ * 12;
-    this.lowCText_.textContent = 'C(' + lowCNum + ')';
-    this.highCText_.textContent = 'C(' + (lowCNum + 12) + ')';
-  }
-};
-
-/**
- * Ensure that only a valid MIDI note number may be entered.
- * @param {string} text The user's text.
- * @return {?string} A string representing a valid note number, or null if invalid.
- */
-Blockly.FieldNote.prototype.classValidator = function(text) {
-  if (text === null) {
-    return null;
-  }
-  var n = parseFloat(text || 0);
-  if (isNaN(n)) {
-    return null;
-  }
-  if (n < 0) {
-    n = 0;
-  }
-  if (n > Blockly.FieldNote.MAX_NOTE) {
-    n = Blockly.FieldNote.MAX_NOTE;
-  }
-  return String(n);
-};
-
-Blockly.Field.register('field_note', Blockly.FieldNote);