xinglie/report-designer

介绍

xinglie opened this issue · 2 comments

可视化设计器

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

两种布局

绝对定位

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

基于绝对定位扩展的通用设计器demo:https://xinglie.github.io/report-designer/iot.html

流式布局

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

流式布局demo示意:https://xinglie.github.io/page-designer/

以通用设计器为示例,编辑器讲解

该项目之前定位为物联网编辑器,后转为通用设计器。但下面的示例图片仍沿用之前的物联网的名称

image

设计元素

image

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

工具栏

image

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

标尺

image

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

如果需要精细的控制辅助线,请参考辅助线操作说明文档:#18

设计区

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

元素面板

image

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

概览面板

image

概览面板主要显示整体的布局情况,方便您对整体布局有一个全局观。概览面板中的主题色边框矩形表示当前视窗,同时它也支持拖动改变当前视窗显示的位置

属性面板

image

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

贴边滚动

image

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

网格

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

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

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

拖动对齐

添加到设计区中的元素,在拖动时,会和非拖动元素自动对齐,示意图如下

image

水平支持对齐某元素左、中、右三个位置,垂直支持对齐某元素上、中、下三个位置

其中设计区及容器元素的格子也支持拖动对齐,同元素提供的对齐位置

支持吸附到自定义辅助线上

更多信息可参考:拖动对齐操作

绝对定位编辑器快捷键大全

相关示例

绝对定位布局

https://xinglie.github.io/report-designer/absolute.html

流式布局

https://xinglie.github.io/report-designer/page.html

通用设计器

https://xinglie.github.io/report-designer/iot.html

获取源代码

请联系微信:qq84685009

功能粒度太細,直男表示不會用,但是確實很強大

作者有没有考虑开发vue或者其它语言版本的,我想使用在vue中想做一些扩展