mxCellEditor

In-place editor for the graph. To control this editor, use mxGraph.invokesStopCellEditing, mxGraph.enterStopsCellEditing and mxGraph.escapeEnabled. If mxGraph.enterStopsCellEditing is true then ctrl-enter or shift-enter can be used to create a linefeed. The F2 and escape keys can always be used to stop editing. To customize the location of the textbox in the graph, override getEditorBounds as follows:

graph.cellEditor.getEditorBounds = function(state)
{
  var result = mxCellEditor.prototype.getEditorBounds.apply(this, arguments);

  if (this.graph.getModel().isEdge(state.cell))
  {
    result.x = state.getCenterX() - result.width / 2;
    result.y = state.getCenterY() - result.height / 2;
  }

  return result;
};

The textarea uses the mxCellEditor CSS class. You can modify this class in your custom CSS. Note: You should modify the CSS after loading the client in the page.

Example

To only allow numeric input in the in-place editor, use the following code.

var text = graph.cellEditor.textarea;

mxEvent.addListener(text, 'keydown', function (evt)
{
  if (!(evt.keyCode >= 48 && evt.keyCode <= 57) &&
      !(evt.keyCode >= 96 && evt.keyCode <= 105))
  {
    mxEvent.consume(evt);
  }
});

Initial values

To implement an initial value for cells without a label, use the emptyLabelText variable.

Resize in Chrome

Resize of the textarea is disabled by default. If you want to enable this feature extend init and set this.textarea.style.resize = ‘’.

Summary

mxCellEditor	In-place editor for the graph.
Functions
mxCellEditor	Constructs a new in-place editor for the specified graph.
Variables
graph	Reference to the enclosing mxGraph.
textarea	Holds the input textarea.
editingCell	Reference to the mxCell that is currently being edited.
trigger	Reference to the event that was used to start editing.
modified	Specifies if the label has been modified.
emptyLabelText	Text to be displayed for empty labels.
textNode	Reference to the label DOM node that has been hidden.
Functions
init	Creates the textarea and installs the event listeners.
isModified	Returns modified.
setModified	Sets modified to the specified boolean value.
focusLost	Called if the textarea has lost focus.
startEditing	Starts the editor for the given cell.
stopEditing	Stops the editor and applies the value if cancel is false.
getInitialValue	Gets the initial editing value for the given cell.
getCurrentValue	Returns the current editing value.
isHideLabel	Returns true if the label should be hidden while the cell is being edited.
getMinimumSize	Returns the minimum width and height for editing the given state.
getEditorBounds	Returns the mxRectangle that defines the bounds of the editor.
getEmptyLabelText	Returns the initial label value to be used of the label of the given cell is empty.
getEditingCell	Returns the cell that is currently being edited or null if no cell is being edited.
destroy	Destroys the editor and removes all associated resources.

Functions

mxCellEditor

function mxCellEditor( graph )

Constructs a new in-place editor for the specified graph.

Parameters

graph

Reference to the enclosing mxGraph.

Variables

graph

mxCellEditor.prototype.graph

Reference to the enclosing mxGraph.

textarea

mxCellEditor.prototype.textarea

Holds the input textarea. Note that this may be null before the first edit. Instantiated in init.

editingCell

mxCellEditor.prototype.editingCell

Reference to the mxCell that is currently being edited.

trigger

mxCellEditor.prototype.trigger

Reference to the event that was used to start editing.

modified

mxCellEditor.prototype.modified

Specifies if the label has been modified.

emptyLabelText

mxCellEditor.prototype.emptyLabelText

Text to be displayed for empty labels. Default is ‘’. This can be set to eg. “[Type Here]” to easier visualize editing of empty labels. The value is only displayed before the first keystroke and is never used as the actual editin value.

textNode

mxCellEditor.prototype.textNode

Reference to the label DOM node that has been hidden.

Functions

init

mxCellEditor.prototype.init = function ()

Creates the textarea and installs the event listeners. The key handler updates the modified state.

isModified

mxCellEditor.prototype.isModified = function()

Returns modified.

setModified

mxCellEditor.prototype.setModified = function( value )

Sets modified to the specified boolean value.

focusLost

mxCellEditor.prototype.focusLost = function()

Called if the textarea has lost focus.

startEditing

mxCellEditor.prototype.startEditing = function( cell,
trigger )

Starts the editor for the given cell.

Parameters

cell	mxCell to start editing.
trigger	Optional mouse event that triggered the editor.

stopEditing

mxCellEditor.prototype.stopEditing = function( cancel )

Stops the editor and applies the value if cancel is false.

getInitialValue

mxCellEditor.prototype.getInitialValue = function( state,
trigger )

Gets the initial editing value for the given cell.

getCurrentValue

mxCellEditor.prototype.getCurrentValue = function()

Returns the current editing value.

isHideLabel

mxCellEditor.prototype.isHideLabel = function( state )

Returns true if the label should be hidden while the cell is being edited.

getMinimumSize

mxCellEditor.prototype.getMinimumSize = function( state )

Returns the minimum width and height for editing the given state.

getEditorBounds

mxCellEditor.prototype.getEditorBounds = function( state )

Returns the mxRectangle that defines the bounds of the editor.

getEmptyLabelText

mxCellEditor.prototype.getEmptyLabelText = function ( cell )

Returns the initial label value to be used of the label of the given cell is empty. This label is displayed and cleared on the first keystroke. This implementation returns emptyLabelText.

Parameters

cell	mxCell for which a text for an empty editing box should be returned.

getEditingCell

mxCellEditor.prototype.getEditingCell = function ()

Returns the cell that is currently being edited or null if no cell is being edited.

destroy

mxCellEditor.prototype.destroy = function ()

Destroys the editor and removes all associated resources.