Class CellEditorHandler

In-place editor for the graph. To control this editor, use Graph#invokesStopCellEditing, Graph#enterStopsCellEditing and Graph#escapeEnabled. If Graph#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 as follows:

graph.cellEditor.getEditorBounds = (state)=>
{
  let result = getEditorBounds.apply(this, arguments);

  if (this.graph.getDataModel().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 is false. If is true, then Shape#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.

Example:

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

let 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 variable.

Resize in Chrome:

Resize of the textarea is disabled by default. If you want to enable this feature extend 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, (evt)=>
{
  if (!graph.isEditing() && !graph.isSelectionEmpty() && evt.which !== 0 &&
      !mxEvent.isAltDown(evt) && !mxEvent.isControlDown(evt) && !mxEvent.isMetaDown(evt))
  {
    graph.startEditing();

    if (Client.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.

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

  graphFireMouseEvent.apply(this, arguments);
};

Implements

Constructors

constructor

Properties

align autoSize blurEnabled bounds changeHandler clearOnChange editingCell emptyLabelText escapeCancelsEditing graph initialValue minResize modified resizeThread selectText textarea textDirection textNode trigger wordWrapPadding zIndex zoomHandler pluginId

Methods

applyValue focusLost getBackgroundColor getCurrentValue getEditingCell getEditorBounds getEmptyLabelText getInitialValue getMinimumSize init installListeners isCancelEditingKeyEvent isEventSource isHideLabel isSelectText isStopEditingEvent onDestroy prepareTextarea resize setAlign startEditing stopEditing

Constructors

constructor

Properties

align

align: null | string = null

Holds the current temporary horizontal alignment for the cell style. If this is modified then the current text alignment is changed and the cell style is updated when the value is applied.

autoSize

autoSize: boolean = true

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

blurEnabled

blurEnabled: boolean = false

If should be called if