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 DIV that is used for text editing. |
| 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. |
| wordWrapPadding | Correction factor for word wrapping width. |
| blurEnabled | If focusLost should be called if textarea loses the focus. |
| initialValue | Holds the initial editing value to check if the current value was modified. |
| Functions | |
| init | Creates the textarea and installs the event listeners. |
| applyValue | Called in stopEditing if cancel is false to invoke mxGraph.labelChanged. |
| getInitialValue | Gets the initial editing value for the given cell. |
| getCurrentValue | Returns the current editing value. |
| 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. |
| focusLost | Called if the textarea has lost focus. |
| getBackgroundColor | Returns the background color for the in-place editor. |
| startEditing | Starts the editor for the given cell. |
| isSelectText | Returns selectText. |
| stopEditing | Stops the editor and applies the value if cancel is false. |
| 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 DIV that is used for text editing. 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.emptyLabelText
Text to be displayed for empty labels. Default is ‘’ or ‘<br>’ in Firefox as a workaround for the missing cursor bug for empty content editable. 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.
mxCellEditor.prototype.minResize
Defines the minimum width and height to be used in resize. Default is 0x20px.
mxCellEditor.prototype.applyValue = function( state, value )
Called in stopEditing if cancel is false to invoke mxGraph.labelChanged.
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.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 DIV that is used for text editing.
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()
Correction factor for word wrapping width.
mxCellEditor.prototype.wordWrapPadding
If focusLost should be called if textarea loses the focus.
mxCellEditor.prototype.blurEnabled
Called if the textarea has lost focus.
mxCellEditor.prototype.focusLost = function()
Holds the initial editing value to check if the current value was modified.
mxCellEditor.prototype.initialValue
Creates the textarea and installs the event listeners.
mxCellEditor.prototype.init = function ()
Called in stopEditing if cancel is false to invoke mxGraph.labelChanged.
mxCellEditor.prototype.applyValue = function( state, value )
Stops the editor and applies the value if cancel is false.
mxCellEditor.prototype.stopEditing = function( cancel )
Sets the label of the specified cell to the given value using cellLabelChanged and fires mxEvent.LABEL_CHANGED while the transaction is in progress.
mxGraph.prototype.labelChanged = function( cell, value, evt )
Gets the initial editing value for the given cell.
mxCellEditor.prototype.getInitialValue = function( state, trigger )
Returns the current editing value.
mxCellEditor.prototype.getCurrentValue = function( state )
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 the background color for the in-place editor.
mxCellEditor.prototype.getBackgroundColor = function( state )
Starts the editor for the given cell.
mxCellEditor.prototype.startEditing = function( cell, trigger )
Returns selectText.
mxCellEditor.prototype.isSelectText = 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