@maxgraph/core
    Preparing search index...

    Class CellEditorHandler

    In-place editor for the graph.

    To control this editor, use:

    If AbstractGraph.enterStopsCellEditing is true then ctrl-enter or shift-enter can be used to create a linefeed.

    The F2 (accept change) and escape keys (undo change) can always be used to stop editing.

    To customize the location of the textbox in the graph, override getEditorBounds as follows:

    graph.cellEditor.getEditorBounds = (state) => {
      const result = super.getEditorBounds(state);

      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 autoSize is false. If autoSize 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.

    Example:

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

    const text = graph.cellEditor.textarea;

    InternalEvent.addListener(text, 'keydown', function (evt) {
      if (!(evt.keyCode >= 48 && evt.keyCode <= 57) &&
          !(evt.keyCode >= 96 && evt.keyCode <= 105)) {
        InternalEvent.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.

    InternalEvent.addListener(graph.container, 'keypress', (evt) => {
      if (!graph.isEditing() && !graph.isSelectionEmpty() && evt.which !== 0
          && !eventUtils.isAltDown(evt)
          && !eventUtils.isControlDown(evt)
          && !eventUtils.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.

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

      graphFireMouseEvent.apply(this, [evtName, me, sender]);
    };

    Implements

    Index

    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

    Properties

    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: boolean = true

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

    blurEnabled: boolean = false

    If should be called if