xinglie
commented
2 years ago 字体
safari下不显示微软雅黑，所以文字并不像chrome或firefox中的那样，系统问题，无法解决。
拖动绑定数据
safari下，dragenter dragleave事件中无relatedTarget对象，会导致safari某些数据绑定情况下操作并不如chrome或firefox。等浏览器升级，report-designer不修复该问题
客户端转换图片、pdf转换
依赖于html2canvas，表格边框bug https://github.com/niklasvh/html2canvas/issues/1777 依赖于html2canvas，不是所有都能转图片和pdf https://html2canvas.hertzen.com/features
如果需要高保真还原，则需要report-designer-server模块在服务器端提供接口让前端使用，进行高保真转图片或pdf
设计器自己的图片库需要允许跨域，否则在内容转图片及pdf时将无法展示
css中的zoom
列表格元素中快捷皮肤使用了css的zoom进行了缩放，firefox并不支持且无相应的便捷解决方式，故此bug不再修复处理
字号
部分浏览器如chrome在设置里会限制最小字号的大小，比如最小12px，会导致页面中无法显示小于12px的字号
relatedTarget
规范中指明当部分事件有关联dom节点时(relatedTarget)，在shadow root外部时，应指向该shadow root所在的节点 ：https://www.w3.org/TR/2016/WD-shadow-dom-20160610/#event-relatedtarget-retargeting
目前chrome版本89似乎并没有遵循规范，relatedTarget指向了shadow root内部节点，导致在某些情况下，拖动绑定数据并不是预期效果
canvas
不同浏览器对canvas最大尺寸定义不同，部分依赖canvas的功能，如标尺，客户端转换图片等功能，在超大尺寸下异常，report-designer不修复也不处理该问题。
代码降级
目前该项目中的代码编译目标为es2018，如果需要支持更旧的浏览器，可自行修改编译目标，理论上无其它成本
面板不展示
report-designer中使用的技术均为较新的技术，如果需要支持旧的浏览器，需要自己调整代码 项目中绝对定位的元素，且需要进行
left,top,right,bottom进行位置控制的，均使用inset代替，可查阅：https://developer.mozilla.org/en-US/docs/Web/CSS/inset
inset并不是所有浏览器都支持，如果发现像面板无法展示的，则需要修改inset为left,top,right,bottom
请自行修改。
浏览器
代码编译降级到
es2018，所以需要除IE之外的其它主流浏览器才可以，未来也不会支持IE，当然Chromium版IE应该是支持，这个没有测试不同浏览器如chrome、safari、firefox，以及同浏览器不同版本渲染出来的最终界面并非完全一致，渲染结果以最终使用的浏览器为准，以及相关的打印功能。
编辑区
编辑区大小限制为10000px X 10000px ，以配置的形式提供，可自己调整
编辑区元素个数
先定义
3个概念卡死
指程序需要大量的运算，界面无法响应用户的任何操作。如点击某个按钮，浏览器失去响应，此时不能使用键盘输入，不能使用鼠标滚动页面等。后续处理完运算后，才能继续响应用户的操作
卡顿
指程序需要大量的运算，界面不能及时响应用户的操作。如当前程序正在后台运算，用户使用键盘输入时或滚动页面时不流畅。
异步更新
技术方案采用数据与界面分离的方式，数据变化后界面不会立即变化，而是使用分割任务异步更新。异步更新的速度取决于电脑的性能，性能越好异步更新的越快。
该可视化脚手架采用前后端分离的架构，使用
JSON交换数据。 同时可视化的技术方案采用数据与界面分离的方式，用户的所有操作及时更新JSON数据，同时再异步更新界面。这样只需要
1份JSON数据既可以方便存储同时也方便还原界面。当编辑区元素添加越来越多时，程序需要更多的内存保存数据，同时异步更新界面的时间也会变长，卡顿现象可能会出现。理论上越多元素，越容易出现卡顿，浏览器消除卡顿时间也越长。
但无论如何，不会卡死。
像我这台电脑，添加
200个图表或500个普通元素后，全选拖动有卡顿出现。你可以试一下自己的电脑，看添加多少元素后会出现提示
性能上限
即使采用异步更新，由于不同的电脑和浏览器，当元素过多时，report-designer无法保证一定提供流畅的操作。