关于可视化:可视化脚手架介绍

我的项目地址

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，该元素的选中状态均不会隐没。

当元素处于编辑锁定状态时，元素面板无奈多选的时候选中编辑锁定的元素，但能够单击抉择

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

物联网编辑器快捷键大全

相干示例

相对定位布局

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… (代码较旧，仅供参考，最新代码请分割我获取)

流式布局脚手架代码

分割我获取

应用相对定位脚手架初步实现的物联网编辑器

分割我获取

应用设计完后的物联网数据展现的页面

分割我获取