@blockdia/scratch-blocks 0.1.0

package/core/field_note.js

@@ -0,0 +1,850 @@
+/**
+ * @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);