Coder Social home page Coder Social logo

canvas-excel's Introduction

canvas-excel's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

canvas-excel's Issues

luckysheetfile 数据结构

luckysheetfile 的数据结构

 {
	"name": "Cell", //Worksheet name
	"color": "", //Worksheet color
	"config": {}, //Table row height, column width, merged cells, borders, hidden rows and other settings
	"index": "0", //Worksheet index
	"chart": [], //Chart configuration
	"status": "1", //Activation status
	"order": "0", //The order of the worksheet
	"hide": 0,//whether to hide
	"column": 18, //Number of columns
	"row": 36, //number of rows
	"celldata": [], //Original cell data set
	"visibledatarow": [], //The position of all rows
	"visibledatacolumn": [], //The position of all columns
	"ch_width": 2322, //The width of the worksheet area
	"rh_height": 949, //The height of the worksheet area
	"scrollLeft": 0, //Left and right scroll bar position
	"scrollTop": 315, //Up and down scroll bar position
	"luckysheet_select_save": [], //selected area
	"luckysheet_conditionformat_save": {},//Conditional format
	"calcChain": [],//Formula chain
	"isPivotTable":false,//Whether to pivot table
	"pivotTable":{},//Pivot table settings
	"filter_select": null,//Filter range
	"filter": null,//Filter configuration
	"luckysheet_alternateformat_save": [], //Alternate colors
	"luckysheet_alternateformat_save_modelCustom": []//Customize alternate colors
}

中文

{
	"name": "Cell", //工作表名称 
	"color": "", //工作表颜色 
	"index": "0", //工作表索引 
	"status": "1", //激活状态 
	"order": "0", //工作表的顺序 
	"hide": 0, //是否隐藏 
	"row": 36, //行数 
	"column": 18, //列数 
	"config": {
		"merge": {}, //合并单元格 
		"rowlen": {}, //表格行高 
		"columnlen": {}, //表格列宽 
		"rowhidden": {}, //隐藏行 
		"colhidden": {}, //隐藏列 
		"borderInfo": {}, //边框 
	},
	"celldata": [], //初始化使用的单元格数据 
	"data": [], //更新和存储使用的单元格数据 
	"scrollLeft": 0, //左右滚动条位置 
	"scrollTop": 315, //上下滚动条位置 
	"luckysheet_select_save": [], //选中的区域 
	"luckysheet_conditionformat_save": {}, //条件格式 
	"calcChain": [], //公式链 
	"isPivotTable": false, //是否数据透视表 
	"pivotTable": {}, //数据透视表设置 
	"filter_select": {}, //筛选范围 
	"filter": null, //筛选配置 
	"luckysheet_alternateformat_save": [], //交替颜色 
	"luckysheet_alternateformat_save_modelCustom": [], //自定义交替颜色     
	"freezen": {}, //冻结行列 
	"chart": [], //图表配置 
	"visibledatarow": [], //所有行的位置 
	"visibledatacolumn": [], //所有列的位置 
	"ch_width": 2322, //工作表区域的宽度 
	"rh_height": 949, //工作表区域的高度 
	"load": "1", //已加载过此sheet的标识 
}

Excel绘制优化细节记录

优化细节

1. 局部渲染

  • 仅仅渲染可视化区域的内容(ok)

2. 节流

  • 位置:拖拽宽高的button使用位置节流,如果拖拽状态和上个状态一致,不触发drag事件的计算和赋值(ok)
  • 坐标:区域选择,当前坐标和上个状态坐标相同,不触发计算和区域绘制(ok)

3. 减少绘制

  • 坐标节流(ok)
  • 拖拽改变宽高,监听drag事件但是不触发重绘canvas,只在mouseUp事件,触发绘制(ok)
  • 设置属性,如果和之前的属性一直,不触发绘制(ok)

4. 拆分计算

  • 对象状态维护,区域选择先计算可视区域,绘制,然后计算不可视区域的对象维护[这个是因为数据结构定义的问题]
  • 数据量巨大可以按需加载渲染数据对象
  • 将excel对象拆分两部分,内容+属性设置

5. 对象缓存

  • 记录当前的状态,比如按照行列选择的状态,如果和上个状态一致,则不需要触发渲染(ok)

6. 模糊处理

  • 高清屏幕画板缩小4倍(ok)
  • 高清屏幕模糊问题,采用devicePixelRatio 做了缩放适配,减少开发过程中的缩放变量维护
  • 绘制1px线条模糊问题(ok)

7. 双缓存方案

  • 区域选择的时候,使用双缓存方案
  • 撤销,反撤销使用双缓存方案

合并单元格

合并单元格涉及之前的功能重构,所以修改的内容比较多,按照开发顺序

DONE

  • 非重叠合并单元格

TODO

  • 非整行/列的合并单元格
  • 一行/列单元格合并
  • 多行/列单元格合并
  • 反合并
  • 合并单元格输入框状态

合并单元格bug

  • 左下角往上选择合并过的区域bug
  • 涉及到边界的区域选择bug
  • 合并之前合并过的区域的bug

取消合并bug

合并 -> 取消合并 ->合并 出现bug

因为单元格合并的计算存在对缓存计算的使用,但是取消合并没有更新相关字段

!!!重构数据结构中,拉取的code可能会和预览效果不一致

重构数据结构

  • 删除Excel单元格【行】【列】数据记录
  • Excel初始数据结构为二维数组,但是根据数据使用习惯,首先确保行的数据的完整性,即二维数据先定义行,再以行为数组定义列。否则后期数据按需加载,数据下载,数据局部更新无法优化

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.