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);
  }
});

Placeholder

To implement a placeholder 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 = ‘’.

To start editing on a key press event, the container of the graph should have focus or a focusable parent should be used to add the key press handler as follows.

mxEvent.addListener(graph.container, 'keypress', mxUtils.bind(this, function(evt)
{
  if (!graph.isEditing() && !graph.isSelectionEmpty() && evt.which !== 0 &&
      !mxEvent.isAltDown(evt) && !mxEvent.isControlDown(evt) && !mxEvent.isMetaDown(evt))
  {
    graph.startEditing();

    if (mxClient.IS_FF)
    {
      graph.cellEditor.textarea.value = String.fromCharCode(evt.which);
    }
  }
}));

To allow focus for a DIV, and hence to receive key press events, some browsers require it to have a valid tabindex attribute.  In this case the following code may be used to keep the container focused.

var graphFireMouseEvent = graph.fireMouseEvent;
graph.fireMouseEvent = function(evtName, me, sender)
{
  if (evtName == mxEvent.MOUSE_DOWN)
  {
    this.container.focus();
  }

  graphFireMouseEvent.apply(this, arguments);
};
Summary
mxCellEditorIn-place editor for the graph.
Functions
mxCellEditorConstructs a new in-place editor for the specified graph.
Variables
graphReference to the enclosing mxGraph.
textareaHolds the input textarea.
editingCellReference to the mxCell that is currently being edited.
triggerReference to the event that was used to start editing.
modifiedSpecifies if the label has been modified.
autoSizeSpecifies if the textarea should be resized while the text is being edited.
selectTextSpecifies if the text should be selected when editing starts.
emptyLabelTextText to be displayed for empty labels.
textNodeReference to the label DOM node that has been hidden.
zIndexSpecifies the zIndex for the textarea.
Functions
initCreates the textarea and installs the event listeners.
installListenersInstalls listeners for focus, change and standard key event handling.
isStopEditingEventReturns true if the given keydown event should stop cell editing.
isEventSourceReturns true if this editor is the source for the given native event.
resizeReturns modified.
isModifiedReturns modified.
setModifiedSets modified to the specified boolean value.
focusLostCalled if the textarea has lost focus.
startEditingStarts the editor for the given cell.
isSelectTextReturns selectText.
createTextDivCreates the textDiv used for measuring text.
stopEditingStops the editor and applies the value if cancel is false.
getInitialValueGets the initial editing value for the given cell.
getCurrentValueReturns the current editing value.
isHideLabelReturns true if the label should be hidden while the cell is being edited.
getMinimumSizeReturns the minimum width and height for editing the given state.
getEditorBoundsReturns the mxRectangle that defines the bounds of the editor.
getEmptyLabelTextReturns the initial label value to be used of the label of the given cell is empty.
getEditingCellReturns the cell that is currently being edited or null if no cell is being edited.
destroyDestroys the editor and removes all associated resources.

Functions

mxCellEditor

function mxCellEditor(graph)

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

Parameters

graphReference 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.

autoSize

mxCellEditor.prototype.autoSize

Specifies if the textarea should be resized while the text is being edited.  Default is true.

selectText

mxCellEditor.prototype.selectText

Specifies if the text should be selected when editing starts.  Default is true.

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 editing value.

textNode

mxCellEditor.prototype.textNode

Reference to the label DOM node that has been hidden.

zIndex

mxCellEditor.prototype.zIndex

Specifies the zIndex for the textarea.  Default is 5.

Functions

init

mxCellEditor.prototype.init = function ()

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

installListeners

mxCellEditor.prototype.installListeners = function(elt)

Installs listeners for focus, change and standard key event handling.  NOTE: This code requires support for a value property in elt.

isStopEditingEvent

mxCellEditor.prototype.isStopEditingEvent = function(evt)

Returns true if the given keydown event should stop cell editing.  This returns true if F2 is pressed of if mxGraph.enterStopsCellEditing is true and enter is pressed without control or shift.

isEventSource

mxCellEditor.prototype.isEventSource = function(evt)

Returns true if this editor is the source for the given native event.

resize

mxCellEditor.prototype.resize = function()

Returns modified.

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

cellmxCell to start editing.
triggerOptional mouse event that triggered the editor.

isSelectText

mxCellEditor.prototype.isSelectText = function()

Returns selectText.

createTextDiv

mxCellEditor.prototype.createTextDiv = function()

Creates the textDiv used for measuring text.

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

cellmxCell 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.

function mxCellEditor(graph)
Constructs a new in-place editor for the specified graph.
mxCellEditor.prototype.graph
Reference to the enclosing mxGraph.
Extends mxEventSource to implement a graph component for the browser.
mxCellEditor.prototype.textarea
Holds the input textarea.
mxCellEditor.prototype.editingCell
Reference to the mxCell that is currently being edited.
Cells are the elements of the graph model.
mxCellEditor.prototype.trigger
Reference to the event that was used to start editing.
mxCellEditor.prototype.modified
Specifies if the label has been modified.
mxCellEditor.prototype.autoSize
Specifies if the textarea should be resized while the text is being edited.
mxCellEditor.prototype.selectText
Specifies if the text should be selected when editing starts.
mxCellEditor.prototype.emptyLabelText
Text to be displayed for empty labels.
mxCellEditor.prototype.textNode
Reference to the label DOM node that has been hidden.
mxCellEditor.prototype.zIndex
Specifies the zIndex for the textarea.
mxCellEditor.prototype.init = function ()
Creates the textarea and installs the event listeners.
mxCellEditor.prototype.installListeners = function(elt)
Installs listeners for focus, change and standard key event handling.
mxCellEditor.prototype.isStopEditingEvent = function(evt)
Returns true if the given keydown event should stop cell editing.
mxCellEditor.prototype.isEventSource = function(evt)
Returns true if this editor is the source for the given native event.
mxCellEditor.prototype.resize = function()
Returns modified.
mxCellEditor.prototype.isModified = function()
Returns modified.
mxCellEditor.prototype.setModified = function(value)
Sets modified to the specified boolean value.
mxCellEditor.prototype.focusLost = function()
Called if the textarea has lost focus.
mxCellEditor.prototype.startEditing = function(cell,
trigger)
Starts the editor for the given cell.
mxCellEditor.prototype.isSelectText = function()
Returns selectText.
mxCellEditor.prototype.createTextDiv = function()
Creates the textDiv used for measuring text.
mxCellEditor.prototype.stopEditing = function(cancel)
Stops the editor and applies the value if cancel is false.
mxCellEditor.prototype.getInitialValue = function(state,
trigger)
Gets the initial editing value for the given cell.
mxCellEditor.prototype.getCurrentValue = function()
Returns the current editing value.
mxCellEditor.prototype.isHideLabel = function(state)
Returns true if the label should be hidden while the cell is being edited.
mxCellEditor.prototype.getMinimumSize = function(state)
Returns the minimum width and height for editing the given state.
mxCellEditor.prototype.getEditorBounds = function(state)
Returns the mxRectangle that defines the bounds of the editor.
Extends mxPoint to implement a 2-dimensional rectangle with double precision coordinates.
mxCellEditor.prototype.getEmptyLabelText = function (cell)
Returns the initial label value to be used of the label of the given cell is empty.
mxCellEditor.prototype.getEditingCell = function ()
Returns the cell that is currently being edited or null if no cell is being edited.
mxCellEditor.prototype.destroy = function ()
Destroys the editor and removes all associated resources.
mxGraph.prototype.invokesStopCellEditing
If true, when editing is to be stopped by way of selection changing, data in diagram changing or other means stopCellEditing is invoked, and changes are saved.
mxGraph.prototype.enterStopsCellEditing
If true, pressing the enter key without pressing control or shift will stop editing and accept the new value.
mxGraph.prototype.escapeEnabled
Specifies if mxKeyHandler should invoke escape when the escape key is pressed.
Close