Terminal Cursor

The Cursor is the position where the user types and it is represented by a Caret.

As the Cursor is a position. It is composed by:

  • line Number: the number of the line where the Cursor is located.

  • column Number: the number of the column where the Cursor is located.

It is important to understand that the Caret is the visual representation of the Cursor and it is only visible when the Terminal is focused.

Positions cursor at line 1, column 2.

makeCursorPosition.js

Copy 
import React from 'react';

export default ({ uiHelper, selectorsHelper, terminalId }) => {
  const connect = uiHelper.posConnect;

  const CursorPosition = ({ cursorPosition }) => (
    <div style={{ color: 'white' }}>
      <strong>Cursor Position:</strong>
      <ul
        style={{
          padding: '5px',
          margin: '0',
          color: 'white',
          listStyle: 'none',
        }}
      >
        <li>line: {cursorPosition.line}</li>
        <li>column: {cursorPosition.column}</li>
      </ul>
    </div>
  );

  const mapStateToPropsFactory = () => {
    const getTerminalCursorPosition = selectorsHelper.make('getTerminalCursorPosition');

    return (state) => ({
      cursorPosition: getTerminalCursorPosition(state, { terminalId }),
    });
  };

  return connect(mapStateToPropsFactory)(CursorPosition);
};

POSWebPluginMain.js

Copy 
import React from 'react';
import makeCursorPosition from './makeCursorPosition.js';

export default class Plugin {
  constructor({ diHelper }) {
    this._diHelper = diHelper;

    diHelper.useValues({
      terminalId: '1',
    });
    diHelper.useFactories({
      CursorPosition: makeCursorPosition,
    });
  }

  onInit() {
    this._diHelper.invoke(this._createTerminal);
    this._diHelper.invoke(this._putComponents);
  }

  _createTerminal = ({ dispatchersHelper, terminalId }) => {
    dispatchersHelper.dispatch('createTerminal', {
      terminal: { id: terminalId },
    });
  };

  _putComponents = ({ uiHelper, CursorPosition, terminalId }) => {
    const { putComponent, POSComponent } = uiHelper;

    putComponent('Example', () => (
      <div style={{ background: '#555', lineHeight: 1.1 }}>
        <POSComponent componentName="Terminal" terminalId={terminalId} />
        <CursorPosition />
      </div>
    ));
  };
}

index.js

Copy 
import POSWebPluginMain from './POSWebPluginMain.js';

export default POSWebPluginMain;

package.json

Copy 
{
  "name": "plugin-test",
  "version": "1.0.0",
  "orion": {
    "dispatchersHelper": {
      "actionCreators": {
        "consumes": {
          "@orion/terminals": [
            "createTerminal"
          ]
        }
      }
    },
    "selectorsHelper": {
      "selectorFactories": {
        "consumes": {
          "@orion/terminals": [
            "getTerminalCursorPosition"
          ]
        }
      }
    }
  }
}

moveTerminalCursor

Moves the Cursor to a different position.

The Cursor can be moved in three different ways:

  • to a specific position.

  • by offset.

  • to a specific position and then by offset.

Note: Dispatches an action with the type @orion/terminals-helper/MOVE_TERMINAL_CURSOR which can be handled
Usage
Copy 
dispatchersHelper.dispatch('moveTerminalCursor', {
  terminalId: String,
  to: Position,
  offset: Object,
});

  • terminalId String

    Required. The ID of the Terminal.

  • to Position

  • Optional. The position where the Cursor will be moved.

  • line Number | "first" | "last"

    Optional. The number of the line where the Cursor will be located.

  • column Number | "first" | "last" | "lastChar" | "afterLastChar"

    Optional. The number of the column where the Cursor will be located.

  • offset String

    Optional. An offset to determine how many columns or lines the Cursor will be moved.

  • lines Number

    Optional. The number of lines the Cursor will be moved to the top (negative) or to the bottom (positive).

  • columns Number

    Optional. The number of columns the Cursor will be moved to the left (negative) or to the right (positive).

Move the Cursor 2 columns to the left

Copy 
dispatchersHelper.dispatch('moveTerminalCursor', {
  terminalId: 'terminal-1',
  offset: { columns: -2 },
});

Move the Cursor 3 lines to the bottom

Copy 
dispatchersHelper.dispatch('moveTerminalCursor', {
terminalId: 'terminal-1',
offset: { lines: 3 },
});

Move the Cursor 2 lines to the top and 1 column to the right

Copy 
dispatchersHelper.dispatch('moveTerminalCursor', {
terminalId: 'terminal-1',
offset: { columns: 1, lines: -2 },
});

Move the Cursor to the position (line: 2, column: 1)

Copy 
dispatchersHelper.dispatch('moveTerminalCursor', {
terminalId: 'terminal-1',
to: { column: 1, line: 2 },
});

Move the Cursor to the line 3 (maintaining the previous column)

Copy 
dispatchersHelper.dispatch('moveTerminalCursor', {
terminalId: 'terminal-1',
to: { line: 2 },
});

Move the Cursor to the column 5 (maintaining the previous line):

Copy 
dispatchersHelper.dispatch('moveTerminalCursor', {
terminalId: 'terminal-1',
to: { column: 5 },
});

Move the Cursor to the first line and to the column afterLastChar (the column which is after the last character of the row)

Copy 
dispatchersHelper.dispatch('moveTerminalCursor', {
terminalId: 'terminal-1',
to: { line: 'first', column: 'afterLastChar' },
});

Move the Cursor to the last line and to the column lastChar (the column where the last character is at the row):

Copy 
dispatchersHelper.dispatch('moveTerminalCursor', {
terminalId: 'terminal-1',
to: { line: 'first', column: 'afterLastChar' },
});

Move the Cursor to the first line and to the column last column of the row

Copy 
dispatchersHelper.dispatch('moveTerminalCursor', {
terminalId: 'terminal-1',
to: { line: 1, column: 'last' },
});

Moves the Cursor to the position (line: 2, column: 3) and after that moves it 5 lines to bottom and 1 column to the left. (line: 7, column: 2)

Copy 
dispatchersHelper.dispatch('moveTerminalCursor', {
terminalId: 'terminal-1',
to: { line: 2, column: 3 },
offset: { lines: 5, columns: -1 },
});

 

getTerminalCursorPosition

Retrieves the current position of the Cursor.

Copy 
getTerminalCursorPosition(state: Object, { terminalId: String }): Position;

  • state Object

    Required. The global state of the application.

  • terminalId String

    Required. The ID of the Terminal to retrieve its Cursor position.

Returns

  • Position

    The current position of the Cursor.

  • line Number

    The number of the line where the Cursor is located.

  • column Number

    The number of the column where the Cursor is located.

Example
Copy 
const state = storeHelper.getState();
const getTerminalCursorPosition = selectorsHelper.make('getTerminalCursorPosition');
const cursorPosition = getTerminalCursorPosition(state, { terminalId });
const { line, column } = cursorPosition;