Read the source code of an online excel

Time:2022-8-16

Found the design still interesting:

  • The entire table is drawn with canvas, which according to the author is for performance.
  • There is a layer of invisible table on top of the canvas, and the inner col, row, cell and canvas are 1:1 replication, which is for the accessibility of users.
  • The topmost layer is the overlay, which is used to respond to all mouse and keyboard events and update to the lower canvas after user operations.

    • This layer is very complex, dealing with clicking, dragging, and editing various floating components of the cell

Then I took a look at Tencent's online form, which is also a similar structure (except that there is no barrier-free layer)



Document the component architecture

Read the source code of an online excel

Summarize some experiences:

  • For complex mouse click and drag processing, it is generally necessary to listen to global events, and then judge the response according to the coordinates, instead of listening to some widgets
  • <component {...rest} />This way of writing affects performance. If it is a component that changes frequently, you can manually expand the props inside.
  • Some definitions that are not officially defined in react.d.ts such asReact.ForwardRefRenderFunction, these need to be found in @types

Tencent's online collaboration system is much more than this open source code:

  • Collaborative merging capability (cell-based synchronization, presumably cell editing is exclusive)
  • excel formula ability

Online collaboration systems are still very complex