github/go-view
github/go-view
4
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-05-14 23:24:05 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 新增多选组件同时移动

Browse Source
This commit is contained in:
奔跑的面条 2022-08-15 16:19:36 +08:00
parent e40a1f87f9
commit 0ca908c8d5
1 changed files with 41 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,4 @@
import { toRaw } from 'vue'
import { DragKeyEnum, MouseEventButton, WinKeyboard, MacKeyboard } from '@/enums/editPageEnum' import { DragKeyEnum, MouseEventButton, WinKeyboard, MacKeyboard } from '@/enums/editPageEnum'
import { createComponent } from '@/packages' import { createComponent } from '@/packages'
import { ConfigType } from '@/packages/index.d' import { ConfigType } from '@/packages/index.d'
@ -105,41 +106,61 @@ export const useMouseHandle = () => {
if (e.buttons === MouseEventButton.RIGHT) return if (e.buttons === MouseEventButton.RIGHT) return
const scale = chartEditStore.getEditCanvas.scale const scale = chartEditStore.getEditCanvas.scale
const width = chartEditStore.getEditCanvasConfig.width const canvasWidth = chartEditStore.getEditCanvasConfig.width
const height = chartEditStore.getEditCanvasConfig.height const canvasHeight = chartEditStore.getEditCanvasConfig.height
// 记录图表初始位置和大小 // 记录图表初始位置和大小
const itemAttrX = item.attr.x const targetMap = new Map()
const itemAttrY = item.attr.y chartEditStore.getTargetChart.selectId.forEach(id => {
const itemAttrW = item.attr.w const index = chartEditStore.fetchTargetIndex(id)
const itemAttrH = item.attr.h if (index !== -1) {
const { x, y, w, h } = toRaw(chartEditStore.getComponentList[index]).attr
targetMap.set(id, { x, y, w, h })
}
})
// 记录点击初始位置 // 记录点击初始位置
const startX = e.screenX const startX = e.screenX
const startY = e.screenY const startY = e.screenY
// 记录初始位置 // 记录初始位置
chartEditStore.setMousePosition(startX, startY) chartEditStore.setMousePosition(startX, startY)
// 计算偏移量（处理 scale 比例问题） // 移动-计算偏移量
const mousemove = throttle((moveEvent: MouseEvent) => { const mousemove = throttle((moveEvent: MouseEvent) => {
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, true) chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, true)
chartEditStore.setMousePosition(moveEvent.screenX, moveEvent.screenY) chartEditStore.setMousePosition(moveEvent.screenX, moveEvent.screenY)
let currX = Math.round(itemAttrX + (moveEvent.screenX - startX) / scale) // 当前偏移量，处理 scale 比例问题
let currY = Math.round(itemAttrY + (moveEvent.screenY - startY) / scale) let offsetX = (moveEvent.screenX - startX) / scale
let offsetY = (moveEvent.screenY - startY) / scale
chartEditStore.getTargetChart.selectId.forEach(id => {
const index = chartEditStore.fetchTargetIndex(id)
// 拿到初始位置数据
const { x, y, w, h } = targetMap.get(id)
const componentInstance = chartEditStore.getComponentList[index]
let currX = Math.round(x + offsetX)
let currY = Math.round(y + offsetY)
// 要预留的距离 // 要预留的距离
const distance = 50 const distance = 50
// 基于左上角位置检测 // 基于左上角位置检测
currX = currX < -itemAttrW + distance ? -itemAttrW + distance : currX currX = currX < -w + distance ? -w + distance : currX
currY = currY < -itemAttrH + distance ? -itemAttrH + distance : currY currY = currY < -h + distance ? -h + distance : currY
// 基于右下角位置检测 // 基于右下角位置检测
currX = currX > width - distance ? width - distance : currX currX = currX > canvasWidth - distance ? canvasWidth - distance : currX
currY = currY > height - distance ? height - distance : currY currY = currY > canvasHeight - distance ? canvasHeight - distance : currY
item.attr.x = currX componentInstance.attr = Object.assign(componentInstance.attr, {
item.attr.y = currY x: currX,
y: currY
})
})
return
}, 30) }, 30)
const mouseup = () => { const mouseup = () => {