luckysheet-ot/packages/ot-demo/src/client.ts

import {
  Command,
  SwapData,
} from 'ot-core';

import {
  RemoveRow,
  InsertRow,
  DemoClient,
} from './internal';

const webClient = new DemoClient('127.0.0.1:3000');
const sheetId = 'sheet1';
const table = document.getElementById('table');
const insert = document.getElementById('insert');
const redo = document.getElementById('redo');
const undo = document.getElementById('undo');

function updateTable(data: Array<Array<string>>) {
  table.innerHTML = '';
  data.forEach((row) => {
    const tr = document.createElement('tr');
    row.forEach((content) => {
      const td = document.createElement('td');
      td.innerText = `${content}`;
      tr.append(td);
    });
    table.append(tr);
  });
}

webClient.getObserver().addOnConnectedListener({
  onConnected() {
    updateTable(webClient.getSource());
  },
});
webClient.getObserver().addOnAckListener({
  onAck() {
    updateTable(webClient.getSource());
  },
});
webClient.getObserver().addOnCommandListener({
  onCommand() {
    updateTable(webClient.getSource());
  },
});

insert.addEventListener('click', () => {
  const undoManager = webClient.getUndoManager();
  const location = <HTMLInputElement>document.getElementById('location');
  const number = <HTMLInputElement>document.getElementById('number');
  const content = <HTMLInputElement>document.getElementById('content');
  const swapBufferData = new SwapData({
    describe: "SwapData",
    data: new Array<Array<string>>(parseInt(number.value, 10)).fill([content.value, content.value, content.value, content.value, content.value]),
  });
  const redoCommand = new Command(sheetId, [
    new InsertRow({
      describe: "InsertRow",
      index: parseInt(location.value, 10),
      count: parseInt(number.value, 10),
      buffer: swapBufferData,
    }),
  ]);
  const undoCommand = new Command(sheetId, [
    new RemoveRow({
      describe: "RemoveRow",
      index: parseInt(location.value, 10),
      count: parseInt(number.value, 10),
    }),
  ]);
  undoManager.performCommand(redoCommand, undoCommand);
});
redo.addEventListener('click', () => {
  const undoManager = webClient.getUndoManager();
  undoManager.performRedo();
});
undo.addEventListener('click', () => {
  const undoManager = webClient.getUndoManager();
  undoManager.performUndo();
});