Terminal Viewport

Example.gast

Copy 
<div style="{ background: '#888', lineHeight: 1.1, paddingTop: '5px' }">
  <Row>
    <Actions />
    <Terminal terminalId="'t1'" />
  </Row>
  <Row>
    <EditViewport />
    <ShowClient />
    <EditVPadding />
    <EditHPadding />
  </Row>
</div>

Actions.gast

Copy 
<div>
  <Button onClick="() => dispatch('scrollTerminalViewport', { to: 'cursor', terminalId: 't1' })">
    Center View
  </Button>
  <Button onClick="() => dispatch('scrollTerminalViewport', { to: 'firstLine', terminalId: 't1' })">
    Scroll Top
  </Button>
  <Button onClick="() => dispatch('scrollTerminalViewport', { to: 'lastLine', terminalId: 't1' })">
    Scroll Bottom
  </Button>
</div>

ShowClient.gast

Copy 
<div style="{ background: '#bbb', padding: '10px', margin: '15px' }">
<strong>Client</strong><br />
height: {select('getTerminalClient', { terminalId: 't1' }).height}<br />
scrollTop: {select('getTerminalClient', { terminalId: 't1' }).scrollTop}<br />
</div>

EditVPadding.gast

Copy 
<div style="{ background: '#bbb', padding: '10px', margin: '15px' }">
<strong>(V) Padding</strong><br />
<EditPaddingF field="'top'" /><br />
<EditPaddingF field="'bottom'" /><br />
</div>

EditHPadding.gast

Copy 
<div style="{ background: '#bbb', padding: '10px', margin: '15px' }">
<strong>(H) Padding</strong><br />
<EditPaddingF field="'left'" /><br />
<EditPaddingF field="'right'" /><br />
</div>

EditPaddingF.gast

Copy 
<span>
{field}: {select('getTerminalPadding', { terminalId: 't1' })[field]}
<button onClick="() => dispatch('setTerminalPadding', {
  terminalId: 't1',
  padding: {
    [field]: select('getTerminalPadding', { terminalId: 't1' })[field] + 1
  },
}) + dispatch('focusTerminal', { terminalId: 't1' })"
  >+</button>{' '}
<button onClick="() => dispatch('setTerminalPadding', {
  terminalId: 't1',
  padding: {
    [field]: select('getTerminalPadding', { terminalId: 't1' })[field] - 1
  },
}) + dispatch('focusTerminal', { terminalId: 't1' })"
  >-</button>
</span>

EditViewportF.gast

Copy 
<span>
{field}: {select('getTerminalViewport', { terminalId: 't1' })[field]}
<button onClick="() => dispatch('setTerminalViewport', {
  terminalId: 't1',
  viewport: {
    [field]: select('getTerminalViewport', { terminalId: 't1' })[field] + 1
  },
}) + dispatch('focusTerminal', { terminalId: 't1' })"
  >+</button>{' '}
<button onClick="() => dispatch('setTerminalViewport', {
  terminalId: 't1',
  viewport: {
    [field]: select('getTerminalViewport', { terminalId: 't1' })[field] - 1
  },
}) + dispatch('focusTerminal', { terminalId: 't1' })"
  >-</button>
</span>

EditViewport.gast

Copy 
<div style="{ background: '#bbb', padding: '10px', margin: '15px' }">
<strong>Viewport</strong><br />
<EditViewportF field="'height'" /><br />
<EditViewportF field="'line'" /><br />
</div>

Button.gast

Copy 
<button
  style="{
    display: 'block',
    width: '130px',
    padding: '5px',
    margin: '5px'
  }"
  onClick="() => onClick() + dispatch('focusTerminal', { terminalId: 't1' })"
  >{children}</button>

Row.gast

Copy 
<div style="{ display: 'flex' }">{children}</div>

index.js

Copy 
import Example from './Example.gast';
import Actions from './Actions.gast';
import ShowClient from './ShowClient.gast';
import EditViewport from './EditViewport.gast';
import EditVPadding from './EditVPadding.gast';
import EditHPadding from './EditHPadding.gast';
import EditViewportF from './EditViewportF.gast';
import EditPaddingF from './EditPaddingF.gast';
import Button from './Button.gast';
import Row from './Row.gast';

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

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

  _createTerminal = ({ dispatchersHelper: { dispatch } }) => {
    dispatch('createTerminal', { terminal: { id: 't1' } });
    dispatch('writeTerminalTAST', {
      terminalId: 't1',
      tast: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15].join('\n')],
    });
  };

  _putGASTComponents = ({ gastHelper: { putGASTComponent } }) => {
    putGASTComponent('Example', Example);
    putGASTComponent('Actions', Actions);
    putGASTComponent('ShowClient', ShowClient);
    putGASTComponent('EditVPadding', EditVPadding);
    putGASTComponent('EditHPadding', EditHPadding);
    putGASTComponent('EditPaddingF', EditPaddingF);
    putGASTComponent('EditViewport', EditViewport);
    putGASTComponent('EditViewportF', EditViewportF);
    putGASTComponent('Button', Button);
    putGASTComponent('Row', Row);
  };
}

getTerminalClient

Retrieves the client position and height of the terminal.

Note that this call returns in pixels, not lines.

Usage
Copy 
getTerminalClient(state: State, { terminalId: String }) : {
  height: Number,
  scrollTop: Number,
};

  • terminalId String

    Required. Identifier of the terminal to query the client.

Returns

  • Client

    The Client position of the Terminal.

    • scrollTop Number: The pixel that is in the top of the terminal scroll

    • height Number: The height in pixels of the terminal in number of whole lines

Example
Copy 
const getTerminalClient = selectorsHelper.make('getTerminalClient');
const client = getTerminalClient(storeHelper.getState());

expect(client).toMatchObject({ height: 136, scrollTop: 0 });

getTerminalPadding

Retrieves the padding of the terminal. Note that the result is in pixels.

Usage
Copy 
getTerminalPadding(state: State, { terminalId: String }) : {
  top: Number,
  bottom: Number,
  left: Number,
  right: Number,
};

  • terminalId String

    Required. Identifier of the terminal to query the padding.

Returns

  • Padding

    The Padding of the Terminal in pixels.

    • top Number: Amount of padding in pixels in the top of the terminal

    • bottom Number: Amount of padding in pixels in the bottom of the terminal

    • left Number: Amount of padding in pixels in the left of the terminal

    • right Number: Amount of padding in pixels in the right of the terminal

Example
Copy 
const getTerminalPadding = selectorsHelper.make('getTerminalPadding');
const padding = getTerminalPadding(storeHelper.getState());

expect(padding).toMatchObject({ top: 8, left: 8, bottom: 8, right: 8 });

getTerminalViewport

Retrieves the viewport position and height of the terminal.

Note that this call returns in lines, not pixels.

Usage
Copy 
getTerminalViewport(state: State, { terminalId: String }) : {
  height: Number,
  line: Number,
};

  • terminalId String

    Required. Identifier of the terminal to query the size

Returns

  • Viewport

    The Viewport of the Terminal in lines (not pixels).

    • line Number: The first number visible as a whole in the terminal.

    • height String: The height of the terminal in number of whole lines

Example
Copy 
const getTerminalViewport = selectorsHelper.make('getTerminalViewport');
const viewport = getTerminalViewport(storeHelper.getState());

expect(viewport).toMatchObject({ height: 10, line: 1 });

setTerminalPadding

Changes the padding of the viewport.

Usage
Copy 
dispatchersHelper.dispatch('setTerminalPadding', {
  terminalId: String,
  padding:
    Number |
    {
      top: Number,
      bottom: Number,
      left: Number,
      right: Number,
    },
});

  • terminalId String

    Required. Identifier of the terminal to scroll.

  • padding Number | Object

    Required. If it is a number, set the four sizes of the terminal padding to the same number of object. If it is an object, it sets each padding size one by one.

  • top Number

    Optional. Amount of padding in pixels in the top of the terminal. It should be never equal or greater than the character height.

  • bottom Number

    Optional. Amount of padding in pixels in the bottom of the terminal. It should be never equal or greater than the character height.

  • left Number

    Optional. Amount of padding in pixels in the left of the terminal.

  • right Number

    Optional. Amount of padding in pixels in the right of the terminal.

Example
Copy 
const terminalId = 'terminal-1';
dispatchersHelper.dispatch('setTerminalPadding', { terminalId, padding: 4 });
const viewport = getTerminalViewport(storeHelper.getState());
expect(padding).toMatchObject({ top: 4, left: 4, bottom: 4, right: 4 });

dispatchersHelper.dispatch('setTerminalPadding', {
  terminalId,
  padding: {
    left: 5,
    right: 7,
  },
});
const viewport = getTerminalViewport(storeHelper.getState());
expect(padding).toMatchObject({ top: 8, left: 5, bottom: 8, right: 7 });

setTerminalViewport

Warning! Terminal accepts a property called isAdaptive. If this property is set to true, change the terminal height with setTerminalViewport might cause problems.

Changes the viewport size of position.

Usage
Copy 
dispatchersHelper.dispatch('setTerminalViewport', {
  terminalId: String,
  viewport: {
    height: Number,
    line: Number,
  },
});

  • terminalId String

    Required. Identifier of the terminal to scroll.

  • height Number | Object

    Required. The height in number of lines of the terminal. Use only if the terminal is not adaptive.

  • line Number

    Optional. First whole line visible in the terminal. It cannot be less than 1, or greater than the last line with contents.

Example
Copy 
const terminalId = 'terminal-1';
dispatchersHelper.dispatch('setTerminalViewport', {
  terminalId,
  viewport: { height: 5, line: 2 },
});

scrollTerminalViewport

Moves the scroll of the terminal to visualize a specific line.

Usage
Copy 
dispatchersHelper.dispatch('scrollTerminalViewport', {
  terminalId: String,
  line: Number,
  to: String,
  align: String,
  scrollTop: Number,
});

  • terminalId String

    Required. Identifier of the terminal to scroll.

  • line Number

    Optional. If present, number of line to ensure that is visible in the terminal viewport. It is incompatible with to and with scrollTop.

  • to String

    Optional. It has three possible values: 'firstLine', 'lastLine' and 'cursor'. It scrolls the terminal until that the first line is visible, or that the last line is visible, or the cursor is visible. It is incompatible with to and with scrollTop.

  • align String

    Optional. If present, it forces the scroll to be an specific method. It has two possible values: 'top', 'bottom'.

    • If top is specified, it shows the selected line in the top of the terminal.

    • If bottom is specified, it shows the selected line in the bottom of the terminal.

    • If nothing is specified and:

      • The line is currently in the viewport it does nothing.

      • The line is above the viewport it shows the line as the first line.

      • The lines is below the viewport it scrolls so that line is in the bottom of the viewport.

  • scrollTop Number

    Optional. It ensures that the terminal shows the number of pixel specified since the first pixel includding the padding. It is incompatible with to, scrollTop, and align.

Example
Copy 
const terminalId = 'terminal-1';
dispatchersHelper.dispatch('scrollTerminalViewport', { terminalId, line: 4 });
dispatchersHelper.dispatch('scrollTerminalViewport', { terminalId, line: 9,  align: 'bottom' });
dispatchersHelper.dispatch('scrollTerminalViewport', { terminalId, to: 'cursor' align: 'top' });