行列
### 同类元素 对于添加的设计元素，比如文本、条形码等，通过之前介绍的元素多选，可以方便的对同种类型的元素进行选中。 当同种类型的元素选中后，在属性面板将会自动展示同类型元素多选后，可供批量操作的属性，如下图所示  图片说明 1. 指示当前处于批量修改状态，且是什么类型的元素批量修改 2. 参考是指以哪个元素为基准，把其它元素的属性同该元素进行对齐(您可以鼠标`hover`到参考后面的元素上，设计区将会有元素位置指示器，指明该元素所在位置，如果您看不到该元素，可以鼠标点击一下，设计器将尽可能的把该元素滚动到您的视线内)。被选为参考元素的规则是：批量选中时，以第一个选中元素为参考元素 3. 如果多选元素属性相同，则该按钮处于禁用状态，告诉您选择的这些元素所有能批量操作的属性值均相同。当有任意一个属性值不同时，该按钮将可用，您可以一键同步这些属性 4. 可供使用的多选元素属性设置 ### 不同类型的元素 对于添加的不同类型的元素，比如您选中了文本、图片这`2种`类型的元素，设计器将会算出来这`2种`元素共有的可同时设置的属性，如下图所示  图片说明 1. 指示当前处于混合元素类型的批量修改属性状态 2. 同上 3. 同上 4. 同上 ### 常见问题 Q....
### 分离 目前设计器与预览器分别打包发布，虽然可以直接在设计器中把预览器集成进去，但这样不利于单独使用预览页面及后续的预览器扩展 ### 设计器 设计器支持绝对布局和流式布局，因二者布局相差较大，故分仓库开发维护。 当前仓库是绝对布局的设计器，流式布局的可参考这个仓库：https://github.com/xinglie/page-designer 目前精力主要在绝对布局的设计器上，即该仓库的项目 设计器的目标是尽可能支持同质化的所有需求，包括不限于报表、海报、打印、物联网等所有2d场景下的可视化设计 未来会支持3d的场景设计 ### 预览器 > 同样的设计数据，不同的预览器，最终展示会有差异。在不同的业务场景下需要做不同的加工，为了使用方便，对预览器进行了分类处理 #### 页面预览器 页面预览是最简单的对设计数据的还原，因开发没有任何难度且需求非常小众，该预览器未集成到设计器中，如果需要使用可参考：https://github.com/xinglie/report-designer/issues/38 #### 固定分页预览器 (viewer.html使用参数 use=fixed) 该预览器会固定每个元素在设计区的原始位置，同时根据页面大小，自动对需要分页展示的设计元素进行分页处理。 固定分页预览器会对特定元素如`数据表格`进行分页展示，分页后其它不分页元素会固定重复。 该预览器常用于多列分栏且分页后部分元素固定重复展示。 该预览器下所有数据使用http接口 #### 流式分页预览器 (viewer.html使用参数 use=stack) 对填充数据后的元素进行流式分页，比如`数据表格`填充数据后，其它元素会相对填充数据后的元素进行位置偏移分页。...
体验与思考
### 实时 设计器中所有功能都是实时完成的，比如拉框选择时，当前框选了多少元素，这些元素能不能应用某些操作，对应工具栏能否使用，均是实时反馈。 我们应该尽最大可能避免用户反复的尝试操作，这是低效的，这要求设计器尽可能的把所有边界情况都考虑进去。 以鼠标拉框多选为例，假设设计区有`A`、`B`、`C`、`D`4个元素，用户框选了`A`、`B`元素松开鼠标后，发现还要再选择`C`元素，此时可以在按着Shift键的同时，使用鼠标去框选`C`。如果用户在未松开鼠标的情况下，先松开了Shift键，此时将直接变成仅`C`选中，类似拉框时Shift未按下。假如用户一直未松开鼠标，再次按下Shift键，则`A`、`B`将再次选中。在键盘按键配合的过程中，鼠标可以按下一直不动，无须键盘按键改变后再去动鼠标即可完成相应的行为。 同样的键盘配合操作，比如拖动磁吸开启后，当拖动元素靠近一些磁吸位置后，元素将自动磁吸过去，此时不需要动任何鼠标，在按下键盘Alt键后将自动停用磁吸，同时元素将自动离开磁吸位置回到原来的位置上。同样在鼠标不动的情况下，松开Alt后，达到磁吸条件的将自动磁吸过去。 虽然这些都是以鼠标为主键盘为辅的操作，设计器允许您分开操作，无须键盘按键改变后再动一下鼠标，同时当您按下或松开某些键后，只要鼠标仍在按下的状态，您可以再松开或按下这些键即可恢复到之前的状态上。
### 基础配置 1. 支持站点名称与版权配置 2. 支持本机文件的导出与导入 3. 支持初始化默认主题 4. 支持主题模块的保存 5. 支持编辑区数据对话框应用数据 6. 支持预览器重写数据绑定规则 7. 支持 https://github.com/xinglie/report-designer/issues/27#issuecomment-1163090174 中提到的所有程序配置 8. 自动移除所有帮助链接 9. 支持接口返回格式适配器 10. 支持拦截并修改所有接口请求 ### 定制 1. 支持不需要的元素移除 2. 支持不需要的面板移除...
元素多选扩展
基础的元素多选可参考：[选择元素操作](https://github.com/xinglie/report-designer/issues/14) 除了使用鼠标拉框、按下Shift以及使用结构树进行元素多选外，后续设计器支持了如下的元素多选方式，让操作更便捷 ### 同类多选 > 同类多选分为`整体设计区中的同类多选`和`区域设计区同类多选`，部分元素添加了批量操作(所有元素均支持批量操作，后续会逐步为所有元素增加批量操作功能)，当多选相同类型时，可批量设置这些元素相关的属性，在这种情况下，`同类多选`功能比较有用 ##### 整体同类多选 可以在要选中的元素上点击右键，选择`全选所有同类`或选中某些元素后，按下快捷键Alt+A进行选择 ##### 区域同类多选 当元素处于某个容器内时，可以在要选中的元素上点击右键，选择`区域所有同类`或选中某些元素后，按下快捷键Shift+Alt+A进行选择，这种选择只会选择已选中元素所属的设计区内其它元素 需要说明的是，同类多选支持先选中不同类型的元素，然后在此基础上对区域或所有与选中类型相同的元素进行选中操作，并不只针对单一类型 ### 选中矩形内多选 考虑如下图中示例 如果我们已经选中了`文本1`，后续需要把其它的`文本2`到`文本8`都选中，我们可以使用前面介绍的基础的元素多选方式进行选择，也可以使用如下的方式 因`文本1`已经处于选中状态，我们只需要在按下Alt键时点击`文本8`即可，此时已选择的`文本1`和待选中的`文本8`会组成一个矩形，在按下Alt时，只要处于该矩形内的其它元素均会被选中 考虑如下图中示例 如果我们仍然先选中`文本1`，在选择`文本10`时，我们仍然按着Alt键，此时因为有容器的存在，会选中容器内的`文本9`，如果我们不想选择容器内的元素，就想选中容器怎么办？按之前的操作，先选中`文本1`，在选择`文本10`时，我们按着Shift+Alt键，此时将只选中外层的容器，而不再选择内部的元素 #### 包含锁定元素 使用`选中矩形内多选`时，默认会排除锁定的元素，但有时候我们确实需要使用`选中矩形内多选`时，把锁定编辑的元素也选上该如何操作呢？ 我们只需要在前述快捷键的基础上再按下Ctrl键即可，比如原来使用Alt时，则变成Ctrl+Alt或原来的Shift+Alt则变成Ctrl+Shift+Alt 这样就实现了包含锁定元素
之前版本元素的`z`轴调整仅支持单个操作，可见这里：https://github.com/xinglie/report-designer/issues/10 为了方便操作，升级层级调整操作，支持批量。 ### 工具栏与快捷键 > 当多个元素处于选中状态时，处于锁定状态的不参与批量调整。 如下图的带有容器的元素多选状态，来说明批量层级的调整。 首先元素的层级调整只能在自己所处的设计区内，比如向上调整层级时，`文本-1`因为已经处于顶级，则不会移动。同理`直线-2`因为已经处于最底层，当向下调整时，它也不会移动。 多选调整时，选中元素会保持在原有列表中的层级顺序然后整体移动。当某些元素已经达到最顶或最底时，它们将不会移动，直至所有元素都无法向某个方向调整时，工具栏或快捷键将会自动禁用。 ### 结构树 结构树拖动时，主要分以下情况 #### 拖动未选中的元素 如果拖动未选中的元素，表示用户仅调整拖动元素的层级，同以往的调整逻辑，仅改变拖动元素的层级。 #### 拖动选中元素放置到某个选中元素的上方或下方 如果拖动的是已经选中的元素，且把拖动元素放置到另外一个选中元素的上方或下方，则表示选中元素之间的层级调整，同以往的调整逻辑，仅改变拖动元素的层级。 #### 拖动选中元素放置到未选中元素的上方或下方 > 拖动批量调整层级理解有成本，此为资深用户准备的功能。 如果此时是多选状态，此操作将会批量改变选中元素的层级。 首先以鼠标下的元素为首元素，其它剩余选中元素按原来的层级重新组成一个新的待批量移动的集合，然后再把该集合放置到未选中元素的上方或下方。 如果不习惯结构树中的选中批量层级调整，可在授权版配置文件中关闭该功能。 ### 右键菜单 右键菜单将保持仅单选时，支持单个元素的层级调整，多选右键暂不支持批量调整。此处主要考虑以往用户的习惯，先保留观察反馈。
在`svg`元素中，部分元素如`直线`、`bezier`等由点来描述的图形信息 如果要修改图形，则需要修改点的位置。 为了方便`svg`图形的点的修改，之前版本已实现自动磁吸对齐自身或其它`svg`元素的点的坐标。 在实际应用中，尤其在`IoT`场景下，通常我们会用图片来展示如`锅炉`、`风机`、`水泵`等。 当我们拖动`svg`中的`管道`和如`水泵`连接时，不同的`水泵`图片需要连接到的位置不一样，我们可以通过高亮`管道`的某一个控制点使用键盘进行微调，显然这样的方式效率不高 为了更方便元素间连接，现为普通元素也增加磁吸点，如下图 上图中品牌色的点则是磁吸点。 磁吸点允许自由定义或提前内置，允许管理者自由修改位置。 允许其它元素与磁吸点吸附对齐，同时对`svg`使用`点`描述的图形，支持拖动`svg`元素的`点`时，磁吸到普通元素的磁吸点上 该功能主要是便于`管道`与其它元素进行连接 同时带有磁吸点的元素也支持相互吸附对齐，不但便于连接，也更便于排版对齐等操作。因为带有磁吸点的元素不仅仅依靠元素的外接矩形吸附对齐，也支持内部磁吸点的吸附对齐。
### 功能需求 当多个元素叠加在一起的时候，虽然可以通过Tab键进行选择，但选中后，因为叠加的关系，只能使用键盘操作，比如移动、旋转、复制等，这对于习惯使用鼠标的用户不太友好，故提供隐藏元素的功能，可临时把上层的元素隐藏后，使用鼠标快捷操作下面的元素 ### 功能操作 > 目前隐藏或显示仅选中单个元素进行操作 当单个元素选中后，可在属性面板中通过底部的"隐藏元素"后的开关按钮进行操作，或“结构树”中鼠标悬停在某个元素上后点击后面的眼睛图标。 ### 功能细节 一旦元素隐藏后，设计区将不再展示该元素，同时也无法再能使用鼠标点击、拉框选中。同时快捷键或右键菜单中的“全选”也将无法选中，此时仅可通过“结构树”或Tab键再次选中隐藏元素，选中后可操作显示把该元素再次展示出来 元素隐藏后，除了设计区无法快捷键选择(Tab键除外)以及鼠标选中外，如果您通过其它方式(“结构树”等)选中隐藏的元素后，虽然设计区看不到，但是所有可视元素的操作隐藏元素同样支持 比如隐藏元素支持投影、概览图可见。支持旋转、复制、对齐、排列等一系列操作 隐藏元素不支持其它元素吸附对齐自己，同时在和其它元素一起移动时，也不支持吸附对齐其它元素
> 本方案适用于分步或保存调用接口耗时的场景 以表单中支持文件上传为例。 #### 文件上传 假设文件选择后提交给`A`服务器，提交成功后`A`服务器会返回一个文件标识，以供后续的其它使用 #### 业务保存 假设表单中的其它数据，连同前面文件服务器`A`返回的文件标识需要提交给`B`服务器 传统做法需要在提交表单保存时，校验文件是否上传成功，或等待`A`服务器返回后才可以继续提交给`B`服务器，此时用户就需要等待，如果`A`服务器需要长时间的处理，那么用户就需要等待较长的时间，体验下降 我们能否做到用户选择文件后、完善表单其它必填字段后就可以提交保存按钮？然后离开当前页面继续处理其它事情？ #### 假设 假设用户都是使用我们提供的界面进行的数据提交处理，绕过我们前端界面的我们不处理 假设接口大部分情况下都是正常的，异常的我们在接下来仍会处理和讨论到 所以如果前端不需要等待后端接口的返回，将极大的提供使用体验和数据的处理能力(用户可直接离开页面做其它事情) #### 方案 采用全局异步任务管理的方式进行数据的提交，只要用户在表单上提供了足够的信息，那么后续我们调用接口就能保存成功(大部分情况下)，因此我们只需要有地方保存着用户尚未提到给服务器的数据，在后台慢慢提交即可。 面对用户关闭浏览器，我们可以在每次提交任务时在界面上给出提示，告知用户可以切走页面但不要关闭，针对当前流行的单页应用，用户仍可切换到系统的其它页面进行查看或操作，不必要停留在提交页面 对于刷新或关闭浏览器，我们可以使用`IndexedDB`进行数据的持久化存储，在下次用户进行系统时再提交 对于接口保存发生了异常，我们可以在系统中某个地方进行全局异步任务列表的展示，用户可点击某个任务进行恢复到相关表单的现场，用户可修改某些数据后再次提交
```ts let hash = (str: string, seed = 131) => {//13,131,1313,13131,etc let hash = 0, i = 0, ch; while (i < str.length) { ch = str.charCodeAt(i++); hash = (seed...