一个前端报表设计器的设计分析

一个计分析前端报表设计器的设

响应“忙碌的农夫”同学的提议，讲解一个前端设计的例子。

报表设计器是一个布局设计容器，可以将各种图表控件拖拽进去，然后调整控件的大小和位置，做出一个美观实用的分析界面。举一个简单的栗子：做一个线性回归分析，主窗口用散点图，残差分析可用几个辅助小窗口从不同侧面展示。截图是Qlik Sense的报表设计器，我非常喜欢这款简洁和高效设计器。下面就以这款设计器的功能为例，做一下核心类的设计。

外部接口类

Workshop

Workshop是外部接口封装的主类，封装外部调用的所有方法，屏蔽内部的设计和实现的细节，方便报表设计器的使用方使用。

WidgetFactory

WidgetFactory是封装Widget的交互构建过程，例如：拖拽“Line”图标到报表设计器中，然后创建“Line”实例的过程。

Widget

Widget是封装可扩展的组件标准，例如：“Bar”、“Line”、“Pie”等。Widget是报表设计器开放性设计的核心重点，比如：如何让三方的开发者制作一个“词云”加入到扩展控件库。基础Widget提供那些必要的属性、方法和事件，如何预定义扩展方法、事件和交互方式，比如：控件如何提供实例的展示信息，用来保存后的报表加载；控件交互行为的一致性如何规范，比如：圈选。

内部实现类

Layout

Layout是布局的内部类的聚集类。静态对象包含一个Desktop实例、一组Cell实例；行为对象包含一个DragStyle实例，一个ResizeStyle实例，一个History实例；计算对象包括一个Resizer实例，一个Scanner实例。

Desktop

Desktop是布局的桌面，负责显示桌面的网格展示部分。所有的Cell对象附着在桌面的网格上，并且在网格线上对齐。

Cell

Cell是控制布局中的Widget实例对象的位置。一个Cell对象实例包含一个Widget对象实例，可以通过拖拽Cell对象或者拖动Cellt对象的四边来调整Widget对象在Desktop上的位置。

DragStyle

DragStyle是Cell的拖拽效果类。拖拽Cell对象后，在目标投放区产生拖拽阴影区来指示投放的位置和效果。例如：可以投放都目标区域的上方、下方、左方、右方或者完全覆盖。

DragCover

DragCover是Cell的拖拽蒙层，主要是处理拖拽事件。例如：在拖拽的时候屏蔽目标投放区中Widget的各种扩展定义事件的响应，仅处理Cell的拖拽效果事件。

ResizeStyle

ResizeSytle是Cell的边框拖拽效果类，例如：展示Cell矩形四边上的拖拽热点区域，控制热点区的拖拽和Desktop中网格的对齐效果。

Resizer

Resizer是ResizeStyle的计算辅助类，计算边框可以拖拽的范围。例如：当你拖拽一个Cell的右边框的时候，计算右边框最多可以拖动几个网格，以确保不会和右边的其它Cell产生重叠碰撞。

Scanner

Scanner是DragStyle的计算辅助类，计算Cell在拖拽时候可以投放的空白区域。例如：当Desktop中已经有了三个Cell，当你拖拽第四个Cell进来的时候，如何将空白区域切分成最大并且最美观的矩形空白投放区来放置新的Cell。

History

History是记录各种用户交互行为，提供统一的Undo和Redo功能。