xinglie / report-designer

⚡打印设计、可视化、标签打印、编辑器、设计器、数据分析、报表设计、组件化、表单设计、h5页面、调查问卷、pdf生成、流程图、试卷、SVG、图形元素、物联网、标签纸
https://xinglie.github.io/report-designer/
929 stars 242 forks source link

流程图元素 #7

Open xinglie opened 4 years ago

xinglie commented 4 years ago

添加元素

可点击或拖动相关流程图元素到编辑区

添加连接线

当元素处于选中或鼠标移上状态时,元素会出现方块形的连接点,目前仅支持通过连接点进行连线

image

当鼠标在任意一个方块连接点上按下时,当前元素的其它方块连接点会自动隐藏,不支持自己连接自己。?该处待讨论,是否可以自己可以连接线指向自己 image

当鼠标移动时,跟随鼠标会显示一个主题色的虚线。 image

当鼠标移动到其它元素上的广场连接点时,虚线会变成实线,表示可以连接。 image

关于移动

当选中流程图中部分元素时,比如[A->B],表示编辑区有3个元素:A元素,B元素及AB之间的一条连接线。如果只选中A或A加上连接线,此时因为B未选中,所以在移动时,A移动且连接线实时更新。 当AB同时选中时,如果连接线未选中,则对于曲线连接的,控制点并不移动。如果是AB及连接线同时选中,则是普通的移动

关于对齐和均分

连接线不能参与对齐和均分,其它元素可以

关于组合

控制线和流程元素不能组合,但对于[A->B],如果AB组合,则它们的连接线自动和AB组合到一起。

关于剪切

剪切只是快速移动元素位置的一种方式,并不改变它的关系,组合中的元素不能剪切。 连接线不支持剪切

关于复制

对于[A->B],如果只是部分选中复制,则连接线并不复制,如果是全部选中,则连接线的关系也一同复制。复制后的新连接线会自动连接到新的元素上。 单独选中连接线不支持复制

关于删除

连接线可以单独删除,如果流程元素被删除,则与它关联的连接线一同删除

其它

因为元素有z轴遮挡关系,所以如果不方便操作时,可以通过TB快捷键,把元素快速置顶或置底,这样会方便操作

只有在同一个容器内的流程图元素之间才能连线 查看容器元素介绍