在线 Execl 的设计思路

[LinkXSystem]

渲染

在查看 腾讯文档 / sheetjs 的 HTML 结构之后，在线 Execl 的实现需要解决的首要问题是 DOM 节点的量级问题。 通常解决这样问题都需要使用 Canvas 来完成。因此，实现是基于 Canvas 来实现 Execl 的表格绘制。

由于是通过 Canvas 来实现，那么需要在 Canvas 的容器外层伪装滚动的 scroll 来监听鼠标的滚动事件，然后在相应的映射到 canvas 中的 translate (疑问：其实可以不用映射，只是重绘的时候，不绘制不在 viewport 的表格即可)。

而其中需要注意这种情况，如下图：

是的，不完整的表格，而在计算的时候，应该将其视为完整的表格来看，然后再基于总的位移来计算，简略的公式如下：

Inc_Translate = Total_Translate - Math.ceil(Total_Translate /  Table_Cell_Height) * Table_Cell_Height

这样便可以解决上述的问题。

[LinkXSystem]

选中

以下是选中的功能的类别：

• 行

• 列

• 复数

[LinkXSystem]

输入

需要基于选中功能来设计

[LinkXSystem]

合并

Cell 的位置结构设计，基本如下：

{
  position: [ row, col ],
  range:    [ row, col ]
}

仅当 range 的 row / col 与 position 的 row / col 一样的时候，认为这是一个单一的 Cell，否则认为是一个合并的 Cell。

这样设计可以仅改动到作为合并的主要的 Cell ，而不用应该相关其他的 Cell 的结构。

[LinkXSystem]

生成

[LinkXSystem]

函数 / 图表

• 函数

函数的设计实现上，建议基于 DSL 来完成解析，映射到内置的函数，来解析数据

• 图表

涉及选中的实现和局部数据的快速截取