core/field.js
/**
* @license
* Visual Blocks Editor
*
* Copyright 2012 Google Inc.
* https://blockly.googlecode.com/
*
* 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 Input field. Used for editable titles, variables, etc.
* This is an abstract class that defines the UI on the block. Actual
* instances would be Blockly.FieldTextInput, Blockly.FieldDropdown, etc.
* @author fraser@google.com (Neil Fraser)
*/
'use strict';
goog.provide('Blockly.Field');
// TODO(scr): Fix circular dependencies
// goog.require('Blockly.Block');
goog.require('Blockly.BlockSvg');
goog.require('goog.asserts');
/**
* Class for an editable field.
* @param {string} text The initial content of the field.
* @constructor
*/
Blockly.Field = function(text) {
this.sourceBlock_ = null;
// Build the DOM.
this.fieldGroup_ = Blockly.createSvgElement('g', {}, null);
this.borderRect_ = Blockly.createSvgElement('rect',
{'rx': 4,
'ry': 4,
'x': -Blockly.BlockSvg.SEP_SPACE_X / 2,
'y': -12,
'height': 16}, this.fieldGroup_);
this.textElement_ = Blockly.createSvgElement('text',
{'class': 'blocklyText'}, this.fieldGroup_);
this.size_ = {height: 25, width: 0};
this.setText(text);
this.visible_ = true;
};
/**
* Clone this Field. This must be implemented by all classes derived from
* Field. Since this class should not be instantiated, calling this method
* throws an exception.
* @throws {goog.assert.AssertionError}
*/
Blockly.Field.prototype.clone = function() {
goog.asserts.fail('There should never be an instance of Field, ' +
'only its derived classes.');
};
/**
* Non-breaking space.
*/
Blockly.Field.NBSP = '\u00A0';
/**
* Editable fields are saved by the XML renderer, non-editable fields are not.
*/
Blockly.Field.prototype.EDITABLE = true;
/**
* Install this field on a block.
* @param {!Blockly.Block} block The block containing this field.
*/
Blockly.Field.prototype.init = function(block) {
if (this.sourceBlock_) {
throw 'Field has already been initialized once.';
}
this.sourceBlock_ = block;
this.updateEditable();
block.getSvgRoot().appendChild(this.fieldGroup_);
this.mouseUpWrapper_ =
Blockly.bindEvent_(this.fieldGroup_, 'mouseup', this, this.onMouseUp_);
// Bump to set the colours for dropdown arrows.
this.setText(null);
};
/**
* Dispose of all DOM objects belonging to this editable field.
*/
Blockly.Field.prototype.dispose = function() {
if (this.mouseUpWrapper_) {
Blockly.unbindEvent_(this.mouseUpWrapper_);
this.mouseUpWrapper_ = null;
}
this.sourceBlock_ = null;
goog.dom.removeNode(this.fieldGroup_);
this.fieldGroup_ = null;
this.textElement_ = null;
this.borderRect_ = null;
};
/**
* Add or remove the UI indicating if this field is editable or not.
*/
Blockly.Field.prototype.updateEditable = function() {
if (!this.EDITABLE) {
return;
}
if (this.sourceBlock_.isEditable()) {
Blockly.addClass_(/** @type {!Element} */ (this.fieldGroup_),
'blocklyEditableText');
Blockly.removeClass_(/** @type {!Element} */ (this.fieldGroup_),
'blocklyNoNEditableText');
this.fieldGroup_.style.cursor = this.CURSOR;
} else {
Blockly.addClass_(/** @type {!Element} */ (this.fieldGroup_),
'blocklyNonEditableText');
Blockly.removeClass_(/** @type {!Element} */ (this.fieldGroup_),
'blocklyEditableText');
this.fieldGroup_.style.cursor = '';
}
};
/**
* Gets whether this editable field is visible or not.
* @return {boolean} True if visible.
*/
Blockly.Field.prototype.isVisible = function() {
return this.visible_;
};
/**
* Sets whether this editable field is visible or not.
* @param {boolean} visible True if visible.
*/
Blockly.Field.prototype.setVisible = function(visible) {
this.visible_ = visible;
this.getRootElement().style.display = visible ? 'block' : 'none';
this.render_();
};
/**
* Gets the group element for this editable field.
* Used for measuring the size and for positioning.
* @return {!Element} The group element.
*/
Blockly.Field.prototype.getRootElement = function() {
return /** @type {!Element} */ (this.fieldGroup_);
};
/**
* Draws the border with the correct width.
* Saves the computed width in a property.
* @private
*/
Blockly.Field.prototype.render_ = function() {
var width = this.textElement_.getComputedTextLength();
if (this.borderRect_) {
this.borderRect_.setAttribute('width',
width + Blockly.BlockSvg.SEP_SPACE_X);
}
this.size_.width = width;
};
/**
* Returns the height and width of the field.
* @return {!Object} Height and width.
*/
Blockly.Field.prototype.getSize = function() {
if (!this.size_.width) {
this.render_();
}
return this.size_;
};
/**
* Get the text from this field.
* @return {string} Current text.
*/
Blockly.Field.prototype.getText = function() {
return this.text_;
};
/**
* Set the text in this field. Trigger a rerender of the source block.
* @param {?string} text New text.
*/
Blockly.Field.prototype.setText = function(text) {
if (text === null || text === this.text_) {
// No change if null.
return;
}
this.text_ = text;
this.updateTextNode_();
if (this.sourceBlock_ && this.sourceBlock_.rendered) {
this.sourceBlock_.render();
this.sourceBlock_.bumpNeighbours_();
this.sourceBlock_.workspace.fireChangeEvent();
}
};
/**
* Update the text node of this field to display the current text.
* @private
*/
Blockly.Field.prototype.updateTextNode_ = function() {
var text = this.text_;
// Empty the text element.
goog.dom.removeChildren(/** @type {!Element} */ (this.textElement_));
// Replace whitespace with non-breaking spaces so the text doesn't collapse.
text = text.replace(/\s/g, Blockly.Field.NBSP);
if (Blockly.RTL && text) {
// The SVG is LTR, force text to be RTL.
text += '\u200F';
}
if (!text) {
// Prevent the field from disappearing if empty.
text = Blockly.Field.NBSP;
}
var textNode = document.createTextNode(text);
this.textElement_.appendChild(textNode);
// Cached width is obsolete. Clear it.
this.size_.width = 0;
};
/**
* By default there is no difference between the human-readable text and
* the language-neutral values. Subclasses (such as dropdown) may define this.
* @return {string} Current text.
*/
Blockly.Field.prototype.getValue = function() {
return this.getText();
};
/**
* By default there is no difference between the human-readable text and
* the language-neutral values. Subclasses (such as dropdown) may define this.
* @param {string} text New text.
*/
Blockly.Field.prototype.setValue = function(text) {
this.setText(text);
};
/**
* Handle a mouse up event on an editable field.
* @param {!Event} e Mouse up event.
* @private
*/
Blockly.Field.prototype.onMouseUp_ = function(e) {
if (Blockly.isRightButton(e)) {
// Right-click.
return;
} else if (Blockly.Block.dragMode_ == 2) {
// Drag operation is concluding. Don't open the editor.
return;
} else if (this.sourceBlock_.isEditable()) {
// Non-abstract sub-classes must define a showEditor_ method.
this.showEditor_();
}
};
/**
* Change the tooltip text for this field.
* @param {string|!Element} newTip Text for tooltip or a parent element to
* link to for its tooltip.
*/
Blockly.Field.prototype.setTooltip = function(newTip) {
// Non-abstract sub-classes may wish to implement this. See FieldLabel.
};