lin-sheet

基于 canvas 的表格编辑器。

浏览器兼容性

暂时基于 Chrome 81 开发。
FireFox、Edge、IE等浏览器有待完善。

依赖项

...待补充

完善项清单

• [x] Edge浏览器无法输入的问题
• [ ] IE浏览器无法使用滚动条
• [ ] 火狐浏览器在高DPI的情况下，滚动条无法跟着鼠标

优化项清单

• [x] canvas 离屏渲染
• [x] 表格滚动时，从canvas离屏渲染的数据中裁剪所需区域，绘制到可视canvas上
• [x] 关闭表格时，注销所有事件监听器
• [ ] 更易用的鼠标点击控制光标
• [ ] 增加输入内容区域 canvas，减少全屏重新渲染的次数

API清单

• [ ] 合并单元格
• [ ] 批量修改单元格属性
• [ ] 批量修改单元格内容
• [ ] 导入 csv 格式文件
• [ ] 导出 csv 格式文件

开发项清单

• [ ] 行头固定在顶部
• [ ] 列头固定在左侧
• [ ] 单元格操作
  • [ ] 键盘方向键控制选择合并单元格
  • [ ] 单元格多选
    • [ ] 基础多选
    • [ ] 多选合并单元格
  • [ ] 基础多选
  • [ ] 多选合并单元格
• [ ] 单元格内容处理
  • [ ] 内容溢出时，增加编辑区域宽度
  • [ ] 内容换行
  • [ ] 内容溢出时，自动换行，增加编辑区域高度
• [ ] 单元格输入
  • [ ] 输入限制
• [ ] 单元格提示
  • [ ] 成功
  • [ ] 提示
  • [ ] 警告
  • [ ] 错误
• [ ] 单元格填充柄功能
  • [ ] 复制
  • [ ] 填充
    • [ ] 常用序列
      • [ ] 数字
      • [ ] 日期
      • [ ] 星期
    • [ ] 自定义序列
• [ ] 撤回修改功能
• [ ] 行操作 Row
  • [ ] 控制行高度
  • [ ] 增加行的选择效果
• [ ] 列操作 Cloumn
  • [ ] 控制列宽度
  • [ ] 增加列的选择效果

已开发项清单

• [x] 列、行、单元格渲染
  • [x] 列名称默认为英文字母递增
  • [x] 行名称默认为数字递增
  • [x] 支持高DPI渲染
  • [x] 支持按比例缩放表格
  • [x] 隐藏列头和行头
  • [x] 单元格属性
    • [x] 字体大小
    • [x] 字体颜色
    • [x] 单元格背景颜色
    • [x] 对齐方式
• [x] 单元格
  • [x] 单元格内容
    • [x] 基础输入
    • [x] 中文输入(带候选词输入)
    • [x] 内容粘贴
    • [x] 日期选择
      • [x] 手动填写
      • [x] 弹出框选择
    • [x] 单元格内容框选
  • [x] 单元格操作
    • [x] 单元格选择
      • [x] 鼠标点击选择
        • [x] 基础点击
        • [x] 点击合并单元格
      • [x] 键盘方向键控制
        • [x] 基础控制
      • [x] Tab键向右切换单元格
      • [x] Enter键向下切换单元格
    • [x] 单元格复制
  • [x] 单元格属性
    • [x] 单元格合并
    • [x] 横向合并
    • [x] 竖向合并
    • [x] 横向竖向同时合并
• [x] 虚拟光标
  • [x] 鼠标控制光标位置
  • [x] 键盘控制光标位置
  • [x] 在光标位置输入内容
  • [x] 适应缩放比例
• [x] 滚动条
  • [x] 水平滚动条
  • [x] 竖向滚动条
  • [x] 表格滚动
  • [x] 编辑区域滚动
  • [x] 适应缩放比例
• [x] 表格自定义
  • [x] 自定义列名称
  • [x] 自定义行名称
  • [x] 自定义单元格展示Key
• [x] API
  • [x] 清空单元格选择状态
• [x] 事件
  • [x] 更改事件
  • [x] 删除事件
  • [x] 粘贴事件

启动

npm install
npm run serve