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.
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);
}
});To implement a placeholder for cells without a label, use the emptyLabelText variable.
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);
};| 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. |
| autoSize | Specifies if the textarea should be resized while the text is being edited. |
| selectText | Specifies if the text should be selected when editing starts. |
| emptyLabelText | Text to be displayed for empty labels. |
| textNode | Reference to the label DOM node that has been hidden. |
| zIndex | Specifies the zIndex for the textarea. |
| minResize | Defines the minimum width and height to be used in resize. |
| Functions | |
| init | Creates the textarea and installs the event listeners. |
| installListeners | Installs listeners for focus, change and standard key event handling. |
| isStopEditingEvent | Returns true if the given keydown event should stop cell editing. |
| isEventSource | Returns true if this editor is the source for the given native event. |
| resize | Returns modified. |
| 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. |
| isSelectText | Returns selectText. |
| createTextDiv | Creates the textDiv used for measuring text. |
| 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. |
| getCurrentHtmlValue | Returns the current value as HTML to measure the text size. |
| 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. |
function mxCellEditor( graph )
Constructs a new in-place editor for the specified graph.
| graph | Reference to the enclosing mxGraph. |
mxCellEditor.prototype.graph
Reference to the enclosing mxGraph.
mxCellEditor.prototype.textarea
Holds the input textarea. Note that this may be null before the first edit. Instantiated in init.
mxCellEditor.prototype.editingCell
Reference to the mxCell that is currently being edited.
mxCellEditor.prototype.minResize
Defines the minimum width and height to be used in resize. Default is 0x20px.
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.
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.startEditing = function( cell, trigger )
Starts the editor for the given cell.
| cell | mxCell to start editing. |
| trigger | Optional mouse event that triggered the editor. |
mxCellEditor.prototype.isSelectText = function()
Returns selectText.
mxCellEditor.prototype.getEditorBounds = function( state )
Returns the mxRectangle that defines the bounds of the editor.
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.
| cell | mxCell for which a text for an empty editing box should be returned. |
Constructs a new in-place editor for the specified graph.
function mxCellEditor( graph )
Reference to the enclosing mxGraph.
mxCellEditor.prototype.graph
Holds the input textarea.
mxCellEditor.prototype.textarea
Reference to the mxCell that is currently being edited.
mxCellEditor.prototype.editingCell
Reference to the event that was used to start editing.
mxCellEditor.prototype.trigger
Specifies if the label has been modified.
mxCellEditor.prototype.modified
Specifies if the textarea should be resized while the text is being edited.
mxCellEditor.prototype.autoSize
Specifies if the text should be selected when editing starts.
mxCellEditor.prototype.selectText
Text to be displayed for empty labels.
mxCellEditor.prototype.emptyLabelText
Reference to the label DOM node that has been hidden.
mxCellEditor.prototype.textNode
Specifies the zIndex for the textarea.
mxCellEditor.prototype.zIndex
Defines the minimum width and height to be used in resize.
mxCellEditor.prototype.minResize
Returns modified.
mxCellEditor.prototype.resize = function()
Creates the textarea and installs the event listeners.
mxCellEditor.prototype.init = function ()
Installs listeners for focus, change and standard key event handling.
mxCellEditor.prototype.installListeners = function( elt )
Returns true if the given keydown event should stop cell editing.
mxCellEditor.prototype.isStopEditingEvent = function( evt )
Returns true if this editor is the source for the given native event.
mxCellEditor.prototype.isEventSource = function( evt )
Returns modified.
mxCellEditor.prototype.isModified = function()
Sets modified to the specified boolean value.
mxCellEditor.prototype.setModified = function( value )
Called if the textarea has lost focus.
mxCellEditor.prototype.focusLost = function()
Starts the editor for the given cell.
mxCellEditor.prototype.startEditing = function( cell, trigger )
Returns selectText.
mxCellEditor.prototype.isSelectText = function()
Creates the textDiv used for measuring text.
mxCellEditor.prototype.createTextDiv = function()
Stops the editor and applies the value if cancel is false.
mxCellEditor.prototype.stopEditing = function( cancel )
Gets the initial editing value for the given cell.
mxCellEditor.prototype.getInitialValue = function( state, trigger )
Returns the current editing value.
mxCellEditor.prototype.getCurrentValue = function()
Returns the current value as HTML to measure the text size.
mxCellEditor.prototype.getCurrentHtmlValue = function()
Returns true if the label should be hidden while the cell is being edited.
mxCellEditor.prototype.isHideLabel = function( state )
Returns the minimum width and height for editing the given state.
mxCellEditor.prototype.getMinimumSize = function( state )
Returns the mxRectangle that defines the bounds of the editor.
mxCellEditor.prototype.getEditorBounds = function( state )
Returns the initial label value to be used of the label of the given cell is empty.
mxCellEditor.prototype.getEmptyLabelText = function ( cell )
Returns the cell that is currently being edited or null if no cell is being edited.
mxCellEditor.prototype.getEditingCell = function ()
Destroys the editor and removes all associated resources.
mxCellEditor.prototype.destroy = function ()
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.invokesStopCellEditing
If true, pressing the enter key without pressing control or shift will stop editing and accept the new value.
mxGraph.prototype.enterStopsCellEditing
Specifies if mxKeyHandler should invoke escape when the escape key is pressed.
mxGraph.prototype.escapeEnabled