mkm/goview_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 处理多个组件选中移动无法撤回的 bug

Browse Source
This commit is contained in:
奔跑的面条 2022-08-30 19:02:25 +08:00
parent 6d38d61816
commit 7f49e83557
2 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/store/modules/chartEditStore/chartEditStore.ts
View File

@ -332,8 +332,8 @@ export const useChartEditStore = defineStore({
} }
}, },
// * 移动组件 // * 移动组件
moveComponentList(item: CreateComponentType | CreateComponentGroupType) { moveComponentList(item: Array<CreateComponentType | CreateComponentGroupType>) {
chartHistoryStore.createMoveHistory([item]) chartHistoryStore.createMoveHistory(item)
}, },
// * 更新组件列表某一项的值 // * 更新组件列表某一项的值
updateComponentList(index: number, newData: CreateComponentType | CreateComponentGroupType) { updateComponentList(index: number, newData: CreateComponentType | CreateComponentGroupType) {

17
src/views/chart/ContentEdit/hooks/useDrag.hook.ts
View File

@ -223,13 +223,13 @@ export const useMouseHandle = () => {
const startY = e.screenY const startY = e.screenY
// 记录历史位置 // 记录历史位置
let prevComponentInstance: CreateComponentType | CreateComponentGroupType let prevComponentInstance: Array<CreateComponentType | CreateComponentGroupType> = []
chartEditStore.getTargetChart.selectId.forEach(id => { chartEditStore.getTargetChart.selectId.forEach(id => {
if (!targetMap.has(id)) return if (!targetMap.has(id)) return
const index = chartEditStore.fetchTargetIndex(id) const index = chartEditStore.fetchTargetIndex(id)
// 拿到初始位置数据 // 拿到初始位置数据
prevComponentInstance = cloneDeep(chartEditStore.getComponentList[index]) prevComponentInstance.push(cloneDeep(chartEditStore.getComponentList[index]))
}) })
// 记录初始位置 // 记录初始位置
@ -278,14 +278,19 @@ export const useMouseHandle = () => {
chartEditStore.setMousePosition(0, 0, 0, 0) chartEditStore.setMousePosition(0, 0, 0, 0)
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false) chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
// 加入历史栈 // 加入历史栈
if (prevComponentInstance) { if (prevComponentInstance.length) {
chartEditStore.getTargetChart.selectId.forEach(id => { chartEditStore.getTargetChart.selectId.forEach(id => {
if (!targetMap.has(id)) return if (!targetMap.has(id)) return
const index = chartEditStore.fetchTargetIndex(id) const index = chartEditStore.fetchTargetIndex(id)
const curComponentInstance = chartEditStore.getComponentList[index] const curComponentInstance = chartEditStore.getComponentList[index]
prevComponentInstance.attr = Object.assign(prevComponentInstance.attr, { // 找到记录的所选组件
offsetX: curComponentInstance.attr.x - prevComponentInstance.attr.x, prevComponentInstance.forEach(preItem => {
offsetY: curComponentInstance.attr.y - prevComponentInstance.attr.y if (preItem.id === id) {
preItem.attr = Object.assign(preItem.attr, {
offsetX: curComponentInstance.attr.x - preItem.attr.x,
offsetY: curComponentInstance.attr.y - preItem.attr.y
})
}
}) })
}) })
chartEditStore.moveComponentList(prevComponentInstance) chartEditStore.moveComponentList(prevComponentInstance)