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;
};Note that this hook is only called if autoSize is false. If autoSize is true, then mxShape.getLabelBounds is used to compute the current bounds of the textbox.
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. |
| escapeCancelsEditing | If true, pressing the escape key will stop editing and not accept the new value. |
| 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. |
| align | Holds the current temporary horizontal alignment for the cell style. |
| Functions | |
| init | Creates the textarea and installs the event listeners. |
| applyValue | Called in stopEditing if cancel is false to invoke mxGraph.labelChanged. |
| setAlign | Sets the temporary horizontal alignment for the current editing session. |
| getInitialValue | Gets the initial editing value for the given cell. |
| getCurrentValue | Returns the current editing value. |
| isCancelEditingKeyEvent | Returns true if escapeCancelsEditing is true and shift, control and meta are not pressed. |
| 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. |
| isLegacyEditor | Returns true if max-width is not supported or if the SVG root element in in the graph does not have CSS position absolute. |
| startEditing | Starts the editor for the given cell. |
| isSelectText | Returns selectText. |
| clearSelection | Clears the selection. |
| stopEditing | Stops the editor and applies the value if cancel is false. |
| prepareTextarea | Prepares the textarea for getting its value in stopEditing. |
| 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.isCancelEditingKeyEvent = function( evt )
Returns true if escapeCancelsEditing is true and shift, control and meta are not pressed.
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.isLegacyEditor = function()
Returns true if max-width is not supported or if the SVG root element in in the graph does not have CSS position absolute. In these cases the text editor must use CSS position absolute to avoid an offset but it will have a less accurate line wrapping width during the text editing preview. This implementation returns true for IE8- and quirks mode or if the CSS position of the SVG element is not absolute.
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.prepareTextarea = function()
Prepares the textarea for getting its value in stopEditing. This implementation removes the extra trailing linefeed in Firefox.
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
If true, pressing the escape key will stop editing and not accept the new value.
mxCellEditor.prototype.escapeCancelsEditing
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
Holds the current temporary horizontal alignment for the cell style.
mxCellEditor.prototype.align
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 )
Sets the temporary horizontal alignment for the current editing session.
mxCellEditor.prototype.setAlign = function ( align )
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 )
Returns true if escapeCancelsEditing is true and shift, control and meta are not pressed.
mxCellEditor.prototype.isCancelEditingKeyEvent = function( evt )
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 )
Returns true if max-width is not supported or if the SVG root element in in the graph does not have CSS position absolute.
mxCellEditor.prototype.isLegacyEditor = function()
Starts the editor for the given cell.
mxCellEditor.prototype.startEditing = function( cell, trigger )
Returns selectText.
mxCellEditor.prototype.isSelectText = function()
Clears the selection.
mxCellEditor.prototype.clearSelection = function()
Prepares the textarea for getting its value in stopEditing.
mxCellEditor.prototype.prepareTextarea = 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
Returns the mxRectangle for the label bounds of this shape, based on the given scaled and translated bounds of the shape.
mxShape.prototype.getLabelBounds = function( rect )