Terminal Dimensions

The terminal is composed by lines and columns, and its dimensions are based on the same.

The Terminal's dimensions are: maxLines, maxColumns and lastLine.

Show Example

Set the dimensions to:

• maxLines: 9

• maxColumns: 68

• lastLine: 1

 

makeDimensions.js

Copy

import React from 'react';

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

  const Dimensions = ({ dimensions }) => (
    <ul
      style={{
        padding: '5px',
        margin: '0',
        color: 'white',
        listStyle: 'none',
      }}
    >
      <li>maxLines: {dimensions.maxLines}</li>
      <li>maxColumns: {dimensions.maxColumns}</li>
      <li>lastLine: {dimensions.lastLine}</li>
    </ul>
  );

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

    return (state) => ({
      dimensions: getTerminalDimensions(state, { terminalId }),
    });
  };

  return connect(mapStateToPropsFactory)(Dimensions);
};

POSWebPluginMain.js

Copy

import React from 'react';
import makeDimensions from './makeDimensions.js';

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

    diHelper.useValues({
      terminalId: '1',
    });
    diHelper.useFactories({
      Dimensions: makeDimensions,
    });
  }

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

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

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

    putComponent('Example', () => (
      <div style={{ background: '#555', lineHeight: 1.1 }}>
        <POSComponent componentName="Terminal" terminalId={terminalId} />
        <Dimensions />
      </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": [
            "getTerminalDimensions"
          ]
        }
      }
    }
  }
}

getTerminalDimensions

Retrieves the Dimensions of a Terminal.

The Dimensions is composed by:

• maxLines Number

  The maximum number of lines. This value is incremented when new lines are added.

• maxColumns Number

  The maximum number of columns. This value is static, it's 68 by default.

• lastLine Number

  The number of the last line which has characters.

getTerminalDimensions(state: Object, { terminalId: String }): Dimensions;

• state Object

  Required. The global state of the application.

• terminalId String

  Required. The ID of the Terminal to retrieve its dimensions.

Returns

• Dimensions

• The dimensions of the Terminal. Composed by maxLines, maxColumns, and lastLine.

Example

const state = storeHelper.getState();
const getTerminalDimensions = selectorsHelper.make('getTerminalDimensions');
const dimensions = getTerminalDimensions(state, {
terminalId: 'terminal-1',
});