可视化脚手架介绍

项目地址

https://github.com/xinglie/re...

本项目提供可视化设计所需要的基础功能，比如标尺、拖动、旋转、多选、复制等。在此基础之上，设计器中可设计、编辑的元素则由插件化的形式提供，比如需要表格、图片则只添加这2个插件即可，开发人员也可以很方便的定制自己的插件

两种布局

绝对定位

绝对定位布局要求页面宽和高是固定尺寸的，比如需要投放大屏场景，则根据大屏的尺寸设置好相应的编辑区的大小。再比如需要打印，可针对纸张大小，如A4纸设置好相应的编辑区尺寸

绝对定位demo示意：https://xinglie.github.io/rep...
基于绝对定位扩展的复杂物联网编辑器demo：https://xinglie.github.io/rep...

流式布局

流式布局只需要给定宽度或不设置宽度，高度无须设置，整体自适应页面，这种更适用于活动、报表、管理等一系列的线上展示页面

流式布局demo示意：https://xinglie.github.io/rep...

以物联网为示例，编辑器讲解

设计元素

可设计的元素在目录　tmpl/elements 下面，可根据需要添加或删除相应的元素，并更新到index.ts中即可。
在插件里面desinger.ts是针对设计器使用的，该文件中指示设计器能设计哪些属性，对元素能否改变宽高、旋转等功能。针对像流式布局需要对设计后的页面做展示时，最终打包的代码并不需要包含designer.ts文件，做到了设计和展示分离

工具栏

工具栏提供撤销、重做功能，同时也支持快捷键Ctrl+Z，Ctrl+Y和Ctrl+Shift+Z
6种对齐方式，需要对齐操作时，需要在设计区中选中2个以上的设计元素对齐按钮才会高亮可用显示
2种同步尺寸的方式，需要同步尺寸时，需要在设计区中选中2个以上的设计元素对齐按钮才会高亮可用显示。默认按选中元素的最大宽或高度同步，如果按下Shift键，则按最小宽度或高度同步尺寸
2种分散对齐方式，同样需要选中2个以上的元素
4种调整z轴的方式，z轴调整只能选中1个元素，如果某个元素已经处于最顶层或最底层，则相应的顶层调整按钮并不会启用
1个删除按钮，需要选中1个以上的元素时高亮可用显示

标尺

标尺下方的阴影会指示当前设计区是否处于激活状态，当处于激活状态时，相应的快捷键如Ctrl+Z才能使用
以下是设计区未激活时，标尺下方带阴影的状态

以下是设计区激活时，标尺下方的阴影消失</de>

2020-8-24修改为：标尺统一带阴影，编辑区激活状态调整为整个页面，只要当前页面激活，则可响应相应的键盘事件

当鼠标在标尺上移动时，会显示相应的位置辅助线，在标尺上鼠标点击后，会在相应的位置留下一条固定的辅助线。固定的辅助线也可以拖动改变位置以及删除等操作。

设计区

可直接拖动页面顶部设计元素添加到设计区，也可点击设计元素，默认添加到设计区的左上角，然后再拖动到设计区中希望的位置上。
改变设计元素的位置时，支持选中1个或多个，可直接使用鼠标拖动，可以按下键盘Up、Right、Down、Left四个方向键改变位置。每次按下移动1px，如果在按下方向键的同时，按下Shift键，则每次移动10px

元素面板

可查看当前添加到设计区中的元素，同时也支持鼠标移上后，在设计区中高亮显示相应的可设计元素，支持鼠标拖动调整设计元素在设计区中的z轴。
在元素面板某个元素上单击时，则直接选中该设计元素。在单击的同时按下Shift或Ctrl键时，可同时选中多个设计元素

概览面板

概览面板主要显示整体的布局情况，方便您对整体布局有一个全局观。

属性面板

根据设计区中选中的元素不同，属性面板中展示的可设计元素也不同。
可设计属性在elements/xx/desinger.ts中定义(xx表示相应的插件目录名称)
当设计区中选中2个以上元素时，属性面板显示设计区的属性

贴边滚动

当拖动元素时，会在编辑区的四周显示淡淡的主题色边框条，当拖动元素到边框条上时，编辑区则会向该方向滚动

网格

默认编辑区显示背景色及背景的配置，当网格选项打开时，则背景色与背景图隐藏，显示网格选项
网格默认10pxX10px，可自行调整大小，最小4px最大40px，宽与高的值可不同

当网格选项打开且拖动吸附时，拖动的元素则自动磁吸到网格上。
当拖动多个元素时，则以鼠标下的元素为吸附元素，其它元素跟随移动，但不吸附，主要是因为多个元素的间距并不一定是网格的整数倍。

磁吸效果只在拖动时有效，如果通过键盘或右侧的属性面板直接修改坐标信息，则仍以最小单位1px进行。

对齐操作

元素未处于组合状态

对于未处于组合状态的元素，如果对选中的元素使用工具栏中的对齐工具进行操作，则会根据要对齐的操作，如顶部对齐，找出当前编辑区处于最顶部的元素，然后所有其它元素与该元素进行顶部对齐，其它对齐操作同样的道理。

如果在某个元素上点击鼠标右键，使用右键菜单中的对齐操作，则该次的对齐动作以鼠标下的元素为基准。如顶部对齐，则所有其它元素以鼠标下的元素为对齐元素，进行顶部对齐，其它对齐操作同样的道理。

元素处于组合状态

如果所有选择的元素属于同一个组，则表示对组内的元素进行修改，该对齐操作无论是使用工具栏还是鼠标右键，均同未处于组合状态。

如果所选择的元素属于不同的组
使用工具栏中的对齐工具时，先找出当前对齐操作的参考元素。如顶部对齐，则找出当前选中的所有元素处于编辑区最上部的那一个，然后该元素所处的分组中的所有元素均不动。再从选中的元素中找出相应的顶部最大的元素，当对齐时，其它元素所处的组内元素也一起移动相应的距离。

使用鼠标右键时，参考元素直接变成鼠标下面的元素，后续对齐操作如工具栏中的动作

同步宽高操作

如果使用工具栏中的宽高同步工具，因为无法获知以哪个元素为准进行同步，所以会算出最大或最小尺寸然后同步，如工具上的提示

如果需要精确控制，则需要使用右键菜单

因为是精确控制，所以右键菜单只支持2个元素选中时的同步操作，如下所示

以鼠标下的元素为要同步到的目标元素，其它元素为来源元素。

1. 同步宽

把其它元素的宽度同步给鼠标下的元素

1. 同步高

把其它元素的高度同步给鼠标下的元素

1. 同步宽作为高

把其它元素的宽同步给鼠标下元素的高

1. 同步高作为宽

把其它元素的高同步给鼠标下元素的宽

不是所有元素都支持同步宽高操作，比如表格，因为宽和高都是动态的，则它无法与其它有固定宽高的元素同步，SVG元素也同样的道理，它们都不具备固定的宽高，所以不能使用同步宽高的功能

选择元素

拉框选择

鼠标在编辑区中按下，然后拖动。鼠标会拖出一个虚线矩形方框，当鼠标拖出的虚线方框与元素所在的矩形相交或包含关系时，则对应的元素进入被选中状态。
当元素被旋转后，部分元素所在的矩形也会随着旋转，同样旋转后的矩形也需要与鼠标拖出的虚线矩形相交或包含时，元素才进入被选中状态

鼠标在拉框选择的时候，按下了Shift键，则本次拉框选择会叠加之前选中的元素。

当元素处于编辑锁定状态时，拉框选择无法选中编辑锁定的元素

鼠标点选

鼠标直接点击目标元素，则目标元素进入选中状态。
在按下Shift或Ctrl的同时，使用鼠标点击目标元素，当目标元素处于未选中状态时，则进入选中状态。如果目标元素已处于选中状态，则会取消选中状态。
当编辑区中只有一个元素被选中时，且鼠标点击该元素，无论是否按下Shift或Ctrl，该元素的选中状态均不会消失。

当元素处于编辑锁定状态时，使用鼠标点选时，可以选中该元素。如果是按下Shift或Ctrl进入多选状态下的选择，则无法选中编辑锁定的元素

tab键

依z轴从小到大选择编辑区中的元素，当编辑区中的元素过多且有重叠，不方便使用鼠标选择时有用。如果按下Tab同时按下了Shift则按z轴从大到小的顺序依次选择元素

元素面板

当鼠标hover在元素面板中的元素时，会在编辑区显示一下半透明主题色矩形，告诉使用者当前对应是编辑区哪个元素。
当鼠标单击元素时，则该元素进入选中状态。
在按下Shift或Ctrl的同时点击元素面板中的元素，鼠标下的元素如果处于未选中状态时，则进入选中状态。否则会取消选中状态。
当元素面板中的元素只有一个元素被选中时，且鼠标点击该元素，无论是否按下Shift或Ctrl，该元素的选中状态均不会消失。

当元素处于编辑锁定状态时，元素面板无法多选的时候选中编辑锁定的元素，但可以单击选择

当元素处于单选、多选、组合等状态时，其被选中状态会表现出不同的界面显示，方便使用人员进行区分。

物联网编辑器快捷键大全

按键	描述	条件
Delete或Backspace	删除选中的元素	需要编辑区选中1个以上的元素时按下有效
Ctrl+Z	撤销操作	需要有历史记录
Ctrl+Shift+Z或Ctrl+Y	重做操作	需要有撤销操作
Tab	依z轴从小到大选择编辑区中的元素，当编辑区中的元素过多且有重叠，不方便使用鼠标选择时有用。如果按下Tab同时按下了Shift则按z轴从大到小的顺序依次选择元素	编辑区处于激活状态
Left	左箭头按下时，编辑区选中的元素向左移动1像素。如果按下Left同时按下了 Shift，则向左移动10像素。	需要编辑区选中1个以上的元素时按下有效
Up	上箭头按下时，编辑区选中的元素向上移动1像素。如果按下Up同时按下了 Shift，则向上移动10像素。	需要编辑区选中1个以上的元素时按下有效
Right	右箭头按下时，编辑区选中的元素向右移动1像素。如果按下Right同时按下了 Shift，则向右移动10像素。	需要编辑区选中1个以上的元素时按下有效
Down	下箭头按下时，编辑区选中的元素向下移动1像素。如果按下Down同时按下了 Shift，则向下移动10像素。	需要编辑区选中1个以上的元素时按下有效
Ctrl+A	全选编辑区中的元素
Ctrl+C	复制编辑区中选中的元素	需要编辑区有1个以上的元素处于选中状态
Ctrl+V	粘贴剪切板中复制的元素	需要先复制元素
Ctrl+X	剪切编辑区中选中的元素	需要编辑区有1个以上的元素处于选中状态
Ctrl+G	组合选中的元素	需要编辑区有2个以上的元素处于选中状态，且不属于同一个分组
Shift+G	取消组合编辑区中选中的元素	需要编辑区有1个以上的元素处于组合状态
U	把选中的元素向上调整一个层级	需要编辑区有且只有1个元素处于选中状态
T	把选中的元素调整到最顶层级	需要编辑区有且只有1个元素处于选中状态
D	把选中的元素向下调整一个层级	需要编辑区有且只有1个元素处于选中状态
B	把选中的元素调整到最底层级	需要编辑区有且只有1个元素处于选中状态
数字1	打开或关闭元素面板
数字2	打开或关闭预览面板
数字3	打开或关闭数据面板
数字4	打开或关闭属性面板
Shift+Z	打开或关闭所有可拖动的面板，如属性、预览、元素、数据等面板
Ctrl+加号	放大编辑区
Ctrl+减号	缩小编辑区
Ctrl+数字0	恢复编辑区缩放

相关示例

绝对定位布局

https://xinglie.github.io/rep...

流式布局

https://xinglie.github.io/rep...

iot应用demo

https://xinglie.github.io/rep...

iot展示demo

https://xinglie.github.io/rep...

获取源代码

绝对定位脚手架代码

https://github.com/xinglie/re... (代码较旧，仅供参考，最新代码请联系我获取)

流式布局脚手架代码

联系我获取

使用绝对定位脚手架初步完成的物联网编辑器

联系我获取

使用设计完后的物联网数据展示的页面

联系我获取