xinglie / report-designer

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

层级调整操作升级,支持批量 #70

Open xinglie opened 1 year ago

xinglie commented 1 year ago

之前版本元素的z轴调整仅支持单个操作,可见这里:https://github.com/xinglie/report-designer/issues/10

为了方便操作,升级层级调整操作,支持批量。

工具栏与快捷键

当多个元素处于选中状态时,处于锁定状态的不参与批量调整。

如下图的带有容器的元素多选状态,来说明批量层级的调整。

image

首先元素的层级调整只能在自己所处的设计区内,比如向上调整层级时,文本-1因为已经处于顶级,则不会移动。同理直线-2因为已经处于最底层,当向下调整时,它也不会移动。

多选调整时,选中元素会保持在原有列表中的层级顺序然后整体移动。当某些元素已经达到最顶或最底时,它们将不会移动,直至所有元素都无法向某个方向调整时,工具栏或快捷键将会自动禁用。

结构树

结构树拖动时,主要分以下情况

拖动未选中的元素

如果拖动未选中的元素,表示用户仅调整拖动元素的层级,同以往的调整逻辑,仅改变拖动元素的层级。

拖动选中元素放置到某个选中元素的上方或下方

如果拖动的是已经选中的元素,且把拖动元素放置到另外一个选中元素的上方或下方,则表示选中元素之间的层级调整,同以往的调整逻辑,仅改变拖动元素的层级。

拖动选中元素放置到未选中元素的上方或下方

拖动批量调整层级理解有成本,此为资深用户准备的功能。

如果此时是多选状态,此操作将会批量改变选中元素的层级。 首先以鼠标下的元素为首元素,其它剩余选中元素按原来的层级重新组成一个新的待批量移动的集合,然后再把该集合放置到未选中元素的上方或下方。

如果不习惯结构树中的选中批量层级调整,可在授权版配置文件中关闭该功能。

右键菜单

右键菜单将保持仅单选时,支持单个元素的层级调整,多选右键暂不支持批量调整。此处主要考虑以往用户的习惯,先保留观察反馈。