Options
All
  • Public
  • Public/Protected
  • All
Menu

Class CellEditorHandler

In-place editor for the graph. To control this editor, use {@link Graph#invokesStopCellEditing}, {@link Graph#enterStopsCellEditing} and {@link Graph#escapeEnabled}. If {@link 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 {@link 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);
};

Constructor: mxCellEditor

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

param graph

Reference to the enclosing Graph.

Hierarchy

  • CellEditorHandler

Implements

  • GraphPlugin

Index

Constructors

Properties

Methods

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