/** * @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 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'); goog.require('Blockly.Events'); goog.require('Blockly.Events.BlockChange'); goog.require('Blockly.Gesture'); goog.require('Blockly.utils.dom'); goog.require('Blockly.utils.Size'); goog.require('Blockly.utils.userAgent'); goog.require('Blockly.utils.style'); /** * Abstract class for an editable field. * @param {*} value The initial value of the field. * @param {Function=} opt_validator A function that is called to validate * changes to the field's value. Takes in a value & returns a validated * value, or null to abort the change. * @constructor */ Blockly.Field = function(value, opt_validator) { /** * The size of the area rendered by the field. * @type {Blockly.utils.Size} */ this.size_ = new Blockly.utils.Size(0, 0); this.setValue(value); opt_validator && this.setValidator(opt_validator); }; /** * The default height of the border rect on any field. * @type {number} * @package */ Blockly.Field.BORDER_RECT_DEFAULT_HEIGHT = 16; /** * The default height of the text element on any field. * @type {number} * @package */ Blockly.Field.TEXT_DEFAULT_HEIGHT = 12.5; /** * The padding added to the width by the border rect, if it exists. * @type {number} * @package */ Blockly.Field.X_PADDING = 10; /** * The default offset between the left of the text element and the left of the * border rect, if the border rect exists. * @type {number} */ Blockly.Field.DEFAULT_TEXT_OFFSET = Blockly.Field.X_PADDING / 2; /** * Name of field. Unique within each block. * Static labels are usually unnamed. * @type {string|undefined} */ Blockly.Field.prototype.name = undefined; /** * Has this field been disposed of? * @type {boolean} * @package */ Blockly.Field.prototype.disposed = false; /** * Maximum characters of text to display before adding an ellipsis. * @type {number} */ Blockly.Field.prototype.maxDisplayLength = 50; /** * A generic value possessed by the field. * Should generally be non-null, only null when the field is created. * @type {*} * @protected */ Blockly.Field.prototype.value_ = null; /** * Text representation of the field's value. Maintained for backwards * compatibility reasons. * @type {string} * @protected * @deprecated Use or override getText instead. */ Blockly.Field.prototype.text_ = ''; /** * Used to cache the field's tooltip value if setTooltip is called when the * field is not yet initialized. Is *not* guaranteed to be accurate. * @type {?string} * @private */ Blockly.Field.prototype.tooltip_ = null; /** * Block this field is attached to. Starts as null, then set in init. * @type {Blockly.Block} * @protected */ Blockly.Field.prototype.sourceBlock_ = null; /** * Does this block need to be re-rendered? * @type {boolean} * @private */ Blockly.Field.prototype.isDirty_ = true; /** * Is the field visible, or hidden due to the block being collapsed? * @type {boolean} * @protected */ Blockly.Field.prototype.visible_ = true; /** * Validation function called when user edits an editable field. * @type {Function} * @protected */ Blockly.Field.prototype.validator_ = null; /** * The element the click handler is bound to. * @type {!Element} * @private */ Blockly.Field.prototype.clickTarget_ = null; /** * Non-breaking space. * @const */ Blockly.Field.NBSP = '\u00A0'; /** * Editable fields usually show some sort of UI indicating they are editable. * They will also be saved by the XML renderer. * @type {boolean} * @const * @default */ Blockly.Field.prototype.EDITABLE = true; /** * Serializable fields are saved by the XML renderer, non-serializable fields * are not. Editable fields should also be serializable. This is not the * case by default so that SERIALIZABLE is backwards compatible. * @type {boolean} * @const * @default */ Blockly.Field.prototype.SERIALIZABLE = false; /** * Attach this field to a block. * @param {!Blockly.Block} block The block containing this field. */ Blockly.Field.prototype.setSourceBlock = function(block) { if (this.sourceBlock_) { throw Error('Field already bound to a block.'); } this.sourceBlock_ = block; }; /** * Get the block this field is attached to. * @return {Blockly.Block} The block containing this field. */ Blockly.Field.prototype.getSourceBlock = function() { return this.sourceBlock_; }; /** * Initialize everything to render this field. Override * methods initModel and initView rather than this method. * @package */ Blockly.Field.prototype.init = function() { if (this.fieldGroup_) { // Field has already been initialized once. return; } this.fieldGroup_ = Blockly.utils.dom.createSvgElement('g', {}, null); if (!this.isVisible()) { this.fieldGroup_.style.display = 'none'; } this.sourceBlock_.getSvgRoot().appendChild(this.fieldGroup_); this.initView(); this.updateEditable(); this.setTooltip(this.tooltip_); this.bindEvents_(); this.initModel(); }; /** * Create the block UI for this field. * @package */ Blockly.Field.prototype.initView = function() { this.createBorderRect_(); this.createTextElement_(); }; /** * Create a field border rect element. Not to be overridden by subclasses. * Instead modify the result of the function inside initView, or create a * separate function to call. * @protected */ Blockly.Field.prototype.createBorderRect_ = function() { this.size_.height = Math.max(this.size_.height, Blockly.Field.BORDER_RECT_DEFAULT_HEIGHT); this.size_.width = Math.max(this.size_.width, Blockly.Field.X_PADDING); this.borderRect_ = Blockly.utils.dom.createSvgElement('rect', { 'rx': 4, 'ry': 4, 'x': 0, 'y': 0, 'height': this.size_.height, 'width': this.size_.width }, this.fieldGroup_); }; /** * Create a field text element. Not to be overridden by subclasses. Instead * modify the result of the function inside initView, or create a separate * function to call. * @protected */ Blockly.Field.prototype.createTextElement_ = function() { var xOffset = this.borderRect_ ? Blockly.Field.DEFAULT_TEXT_OFFSET : 0; this.textElement_ = Blockly.utils.dom.createSvgElement('text', { 'class': 'blocklyText', // The y position is the baseline of the text. 'y': Blockly.Field.TEXT_DEFAULT_HEIGHT, 'x': xOffset }, this.fieldGroup_); this.textContent_ = document.createTextNode(''); this.textElement_.appendChild(this.textContent_); }; /** * Bind events to the field. Can be overridden by subclasses if they need to do * custom input handling. * @protected */ Blockly.Field.prototype.bindEvents_ = function() { Blockly.Tooltip.bindMouseEvents(this.getClickTarget_()); this.mouseDownWrapper_ = Blockly.bindEventWithChecks_( this.getClickTarget_(), 'mousedown', this, this.onMouseDown_); }; /** * Initializes the model of the field after it has been installed on a block. * No-op by default. * @package */ Blockly.Field.prototype.initModel = function() { }; /** * Sets the field's value based on the given XML element. Should only be * called by Blockly.Xml. * @param {!Element} fieldElement The element containing info about the * field's state. * @package */ Blockly.Field.prototype.fromXml = function(fieldElement) { this.setValue(fieldElement.textContent); }; /** * Serializes this field's value to XML. Should only be called by Blockly.Xml. * @param {!Element} fieldElement The element to populate with info about the * field's state. * @return {!Element} The element containing info about the field's state. * @package */ Blockly.Field.prototype.toXml = function(fieldElement) { fieldElement.textContent = this.getValue(); return fieldElement; }; /** * Dispose of all DOM objects and events belonging to this editable field. * @package */ Blockly.Field.prototype.dispose = function() { Blockly.DropDownDiv.hideIfOwner(this); Blockly.WidgetDiv.hideIfOwner(this); if (this.mouseDownWrapper_) { Blockly.unbindEvent_(this.mouseDownWrapper_); } Blockly.utils.dom.removeNode(this.fieldGroup_); this.disposed = true; }; /** * Add or remove the UI indicating if this field is editable or not. */ Blockly.Field.prototype.updateEditable = function() { var group = this.getClickTarget_(); if (!this.EDITABLE || !group) { return; } if (this.sourceBlock_.isEditable()) { Blockly.utils.dom.addClass(group, 'blocklyEditableText'); Blockly.utils.dom.removeClass(group, 'blocklyNonEditableText'); group.style.cursor = this.CURSOR; } else { Blockly.utils.dom.addClass(group, 'blocklyNonEditableText'); Blockly.utils.dom.removeClass(group, 'blocklyEditableText'); group.style.cursor = ''; } }; /** * Check whether this field defines the showEditor_ function. * @return {boolean} Whether this field is clickable. */ Blockly.Field.prototype.isClickable = function() { return !!this.sourceBlock_ && this.sourceBlock_.isEditable() && !!this.showEditor_ && (typeof this.showEditor_ === 'function'); }; /** * Check whether this field is currently editable. Some fields are never * EDITABLE (e.g. text labels). Other fields may be EDITABLE but may exist on * non-editable blocks. * @return {boolean} Whether this field is editable and on an editable block */ Blockly.Field.prototype.isCurrentlyEditable = function() { return this.EDITABLE && !!this.sourceBlock_ && this.sourceBlock_.isEditable(); }; /** * Check whether this field should be serialized by the XML renderer. * Handles the logic for backwards compatibility and incongruous states. * @return {boolean} Whether this field should be serialized or not. */ Blockly.Field.prototype.isSerializable = function() { var isSerializable = false; if (this.name) { if (this.SERIALIZABLE) { isSerializable = true; } else if (this.EDITABLE) { console.warn('Detected an editable field that was not serializable.' + ' Please define SERIALIZABLE property as true on all editable custom' + ' fields. Proceeding with serialization.'); isSerializable = true; } } return isSerializable; }; /** * 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. Should only be called * by input.setVisible. * @param {boolean} visible True if visible. * @package */ Blockly.Field.prototype.setVisible = function(visible) { if (this.visible_ == visible) { return; } this.visible_ = visible; var root = this.getSvgRoot(); if (root) { root.style.display = visible ? 'block' : 'none'; } }; /** * Sets a new validation function for editable fields, or clears a previously * set validator. * * The validator function takes in the new field value, and returns * validated value. The validated value could be the input value, a modified * version of the input value, or null to abort the change. * * If the function does not return anything (or returns undefined) the new * value is accepted as valid. This is to allow for fields using the * validated function as a field-level change event notification. * * @param {Function} handler The validator function * or null to clear a previous validator. */ Blockly.Field.prototype.setValidator = function(handler) { this.validator_ = handler; }; /** * Gets the validation function for editable fields, or null if not set. * @return {Function} Validation function, or null. */ Blockly.Field.prototype.getValidator = function() { return this.validator_; }; /** * Validates a change. Does nothing. Subclasses may override this. * @param {string} text The user's text. * @return {string} No change needed. * @deprecated May 2019. Override doClassValidation and other relevant 'do' * functions instead. */ Blockly.Field.prototype.classValidator = function(text) { return text; }; /** * Calls the validation function for this field, as well as all the validation * function for the field's class and its parents. * @param {string} text Proposed text. * @return {?string} Revised text, or null if invalid. * @deprecated May 2019. setValue now contains all relevant logic. */ Blockly.Field.prototype.callValidator = function(text) { var classResult = this.classValidator(text); if (classResult === null) { // Class validator rejects value. Game over. return null; } else if (classResult !== undefined) { text = classResult; } var userValidator = this.getValidator(); if (userValidator) { var userResult = userValidator.call(this, text); if (userResult === null) { // User validator rejects value. Game over. return null; } else if (userResult !== undefined) { text = userResult; } } return text; }; /** * Gets the group element for this editable field. * Used for measuring the size and for positioning. * @return {!Element} The group element. */ Blockly.Field.prototype.getSvgRoot = function() { return /** @type {!Element} */ (this.fieldGroup_); }; /** * Updates the field to match the colour/style of the block. Should only be * called by BlockSvg.updateColour(). * @package */ Blockly.Field.prototype.updateColour = function() { // Non-abstract sub-classes may wish to implement this. See FieldDropdown. }; /** * Used by getSize() to move/resize any DOM elements, and get the new size. * * All rendering that has an effect on the size/shape of the block should be * done here, and should be triggered by getSize(). * @protected */ Blockly.Field.prototype.render_ = function() { this.textContent_.nodeValue = this.getDisplayText_(); this.updateSize_(); }; /** * Updates the width of the field. Redirects to updateSize_(). * @deprecated May 2019 Use Blockly.Field.updateSize_() to force an update * to the size of the field, or Blockly.utils.dom.getTextWidth() to * check the size of the field. */ Blockly.Field.prototype.updateWidth = function() { console.warn('Deprecated call to updateWidth, call' + ' Blockly.Field.updateSize_ to force an update to the size of the' + ' field, or Blockly.utils.dom.getTextWidth() to check the size' + ' of the field.'); this.updateSize_(); }; /** * Updates the size of the field based on the text. * @protected */ Blockly.Field.prototype.updateSize_ = function() { var textWidth = Blockly.utils.dom.getTextWidth(this.textElement_); var totalWidth = textWidth; if (this.borderRect_) { totalWidth += Blockly.Field.X_PADDING; this.borderRect_.setAttribute('width', totalWidth); } this.size_.width = totalWidth; }; /** * Returns the height and width of the field. * * This should *in general* be the only place render_ gets called from. * @return {!Blockly.utils.Size} Height and width. */ Blockly.Field.prototype.getSize = function() { if (!this.isVisible()) { return new Blockly.utils.Size(0, 0); } if (this.isDirty_) { this.render_(); this.isDirty_ = false; } else if (this.visible_ && this.size_.width == 0) { // If the field is not visible the width will be 0 as well, one of the // problems with the old system. console.warn('Deprecated use of setting size_.width to 0 to rerender a' + ' field. Set field.isDirty_ to true instead.'); this.render_(); } return this.size_; }; /** * Returns the bounding box of the rendered field, accounting for workspace * scaling. * @return {!Object} An object with top, bottom, left, and right in pixels * relative to the top left corner of the page (window coordinates). * @protected */ Blockly.Field.prototype.getScaledBBox_ = function() { var bBox = this.borderRect_.getBBox(); var scaledHeight = bBox.height * this.sourceBlock_.workspace.scale; var scaledWidth = bBox.width * this.sourceBlock_.workspace.scale; var xy = this.getAbsoluteXY_(); return { top: xy.y, bottom: xy.y + scaledHeight, left: xy.x, right: xy.x + scaledWidth }; }; /** * Get the text from this field as displayed on screen. May differ from getText * due to ellipsis, and other formatting. * @return {string} Currently displayed text. * @protected */ Blockly.Field.prototype.getDisplayText_ = function() { var text = this.text_; if (!text) { // Prevent the field from disappearing if empty. return Blockly.Field.NBSP; } if (text.length > this.maxDisplayLength) { // Truncate displayed string and add an ellipsis ('...'). text = text.substring(0, this.maxDisplayLength - 2) + '\u2026'; } // Replace whitespace with non-breaking spaces so the text doesn't collapse. text = text.replace(/\s/g, Blockly.Field.NBSP); if (this.sourceBlock_.RTL) { // The SVG is LTR, force text to be RTL. text += '\u200F'; } return text; }; /** * 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 {*} newText New text. * @deprecated 2019 setText should not be used directly. Use setValue instead. */ Blockly.Field.prototype.setText = function(newText) { if (newText === null) { // No change if null. return; } newText = String(newText); if (newText === this.text_) { // No change. return; } this.text_ = newText; this.forceRerender(); }; /** * Force a rerender of the block that this field is installed on, which will * rerender this field and adjust for any sizing changes. * Other fields on the same block will not rerender, because their sizes have * already been recorded. * @package */ Blockly.Field.prototype.forceRerender = function() { this.isDirty_ = true; if (this.sourceBlock_ && this.sourceBlock_.rendered) { this.sourceBlock_.render(); this.sourceBlock_.bumpNeighbours_(); } }; /** * Used to change the value of the field. Handles validation and events. * Subclasses should override doClassValidation_ and doValueUpdate_ rather * than this method. * @param {*} newValue New value. */ Blockly.Field.prototype.setValue = function(newValue) { var doLogging = false; if (newValue === null) { doLogging && console.log('null, return'); // Not a valid value to check. return; } var validatedValue = this.doClassValidation_(newValue); // Class validators might accidentally forget to return, we'll ignore that. newValue = this.processValidation_(newValue, validatedValue); if (newValue instanceof Error) { doLogging && console.log('invalid class validation, return'); return; } var localValidator = this.getValidator(); if (localValidator) { validatedValue = localValidator.call(this, newValue); // Local validators might accidentally forget to return, we'll ignore that. newValue = this.processValidation_(newValue, validatedValue); if (newValue instanceof Error) { doLogging && console.log('invalid local validation, return'); return; } } var oldValue = this.getValue(); if (oldValue === newValue) { doLogging && console.log('same, return'); // No change. return; } if (this.sourceBlock_ && Blockly.Events.isEnabled()) { Blockly.Events.fire(new Blockly.Events.BlockChange( this.sourceBlock_, 'field', this.name, oldValue, newValue)); } this.doValueUpdate_(newValue); if (this.isDirty_) { this.forceRerender(); } doLogging && console.log(this.value_); }; /** * Process the result of validation. * @param {*} newValue New value. * @param {*} validatedValue Validated value. * @return {*} New value, or an Error object. * @private */ Blockly.Field.prototype.processValidation_ = function(newValue, validatedValue) { if (validatedValue === null) { this.doValueInvalid_(newValue); if (this.isDirty_) { this.forceRerender(); } return Error(); } if (validatedValue !== undefined) { newValue = validatedValue; } return newValue; }; /** * Get the current value of the field. * @return {*} Current value. */ Blockly.Field.prototype.getValue = function() { return this.value_; }; /** * Used to validate a value. Returns input by default. Can be overridden by * subclasses, see FieldDropdown. * @param {*} newValue The value to be validated. * @return {*} The validated value, same as input by default. * @protected */ Blockly.Field.prototype.doClassValidation_ = function(newValue) { // For backwards compatibility. newValue = this.classValidator(newValue); return newValue; }; /** * Used to update the value of a field. Can be overridden by subclasses to do * custom storage of values/updating of external things. * @param {*} newValue The value to be saved. * @protected */ Blockly.Field.prototype.doValueUpdate_ = function(newValue) { this.value_ = newValue; this.isDirty_ = true; // For backwards compatibility. this.text_ = String(newValue); }; /** * Used to notify the field an invalid value was input. Can be overidden by * subclasses, see FieldTextInput. * No-op by default. * @param {*} _invalidValue The input value that was determined to be invalid. * @protected */ Blockly.Field.prototype.doValueInvalid_ = function(_invalidValue) { // NOP }; /** * Handle a mouse down event on a field. * @param {!Event} e Mouse down event. * @protected */ Blockly.Field.prototype.onMouseDown_ = function(e) { if (!this.sourceBlock_ || !this.sourceBlock_.workspace) { return; } var gesture = this.sourceBlock_.workspace.getGesture(e); if (gesture) { gesture.setStartField(this); } }; /** * Change the tooltip text for this field. * @param {string|Function|!Element} newTip Text for tooltip or a parent * element to link to for its tooltip. */ Blockly.Field.prototype.setTooltip = function(newTip) { var clickTarget = this.getClickTarget_(); if (!clickTarget) { // Field has not been initialized yet. this.tooltip_ = newTip; return; } if (!newTip && newTip !== '') { // If null or undefined. clickTarget.tooltip = this.sourceBlock_; } else { clickTarget.tooltip = newTip; } }; /** * The element to bind the click handler to. If not set explicitly, defaults * to the SVG root of the field. When this element is * clicked on an editable field, the editor will open. * @return {!Element} Element to bind click handler to. * @private */ Blockly.Field.prototype.getClickTarget_ = function() { return this.clickTarget_ || this.getSvgRoot(); }; /** * Return the absolute coordinates of the top-left corner of this field. * The origin (0,0) is the top-left corner of the page body. * @return {!Blockly.utils.Coordinate} Object with .x and .y properties. * @private */ Blockly.Field.prototype.getAbsoluteXY_ = function() { return Blockly.utils.style.getPageOffset(this.borderRect_); }; /** * Whether this field references any Blockly variables. If true it may need to * be handled differently during serialization and deserialization. Subclasses * may override this. * @return {boolean} True if this field has any variable references. * @package */ Blockly.Field.prototype.referencesVariables = function() { return false; }; /** * Search through the list of inputs and their fields in order to find the * parent input of a field. * @return {Blockly.Input} The input that the field belongs to. * @package */ Blockly.Field.prototype.getParentInput = function() { var parentInput = null; var block = this.sourceBlock_; var inputs = block.inputList; for (var idx = 0; idx < block.inputList.length; idx++) { var input = inputs[idx]; var fieldRows = input.fieldRow; for (var j = 0; j < fieldRows.length; j++) { if (fieldRows[j] === this) { parentInput = input; break; } } } return parentInput; }; /** * Handles the given action. * This is only triggered when keyboard accessibility mode is enabled. * @param {!Blockly.Action} _action The action to be handled. * @return {boolean} True if the field handled the action, false otherwise. * @package */ Blockly.Field.prototype.onBlocklyAction = function(_action) { return false; };