85 lines
2.0 KiB
TypeScript
85 lines
2.0 KiB
TypeScript
import { ref } from "vue"
|
||
import { useVueFlow } from "@vue-flow/core"
|
||
import {
|
||
getNodeTypeConfig,
|
||
createNodeStyle,
|
||
getNodeDimensions,
|
||
} from "./useNodeStyles"
|
||
import { getRandomId } from "utils/functions"
|
||
|
||
// 模块级共享：当前拖拽的节点类型（Toolbar 写入，canvas 读取）
|
||
export const currentDragNodeType = ref<string | null>(null)
|
||
|
||
/**
|
||
* 简化的拖拽处理
|
||
*/
|
||
export function useDnD() {
|
||
const { addNodes, screenToFlowCoordinate } = useVueFlow()
|
||
const isDragOver = ref(false)
|
||
const screenDragPos = ref<{ x: number; y: number } | null>(null)
|
||
|
||
// 拖拽悬停处理
|
||
const onDragOver = (event: DragEvent) => {
|
||
event.preventDefault()
|
||
isDragOver.value = true
|
||
screenDragPos.value = { x: event.clientX, y: event.clientY }
|
||
}
|
||
|
||
// 拖拽离开处理
|
||
const onDragLeave = () => {
|
||
isDragOver.value = false
|
||
screenDragPos.value = null
|
||
}
|
||
|
||
// 拖拽放置处理
|
||
const onDrop = (event: DragEvent) => {
|
||
event.preventDefault()
|
||
isDragOver.value = false
|
||
screenDragPos.value = null
|
||
currentDragNodeType.value = null
|
||
|
||
const type = event.dataTransfer?.getData("application/vueflow")
|
||
if (!type) return
|
||
|
||
// 获取鼠标在画布中的坐标
|
||
const position = screenToFlowCoordinate({
|
||
x: event.clientX,
|
||
y: event.clientY,
|
||
})
|
||
|
||
// 根据节点类型获取实际尺寸
|
||
const dimensions = getNodeDimensions(type)
|
||
|
||
// 调整位置，使节点中心点对齐到鼠标位置
|
||
const adjustedPosition = {
|
||
x: position.x - dimensions.width / 2,
|
||
y: position.y - dimensions.height / 2,
|
||
}
|
||
|
||
const nodeId = `node-${getRandomId()}`
|
||
const config = getNodeTypeConfig(type)
|
||
const newNode = {
|
||
id: nodeId,
|
||
type: "custom",
|
||
position: adjustedPosition,
|
||
data: {
|
||
label: config.label,
|
||
color: config.color,
|
||
originalType: type,
|
||
},
|
||
style: createNodeStyle(type),
|
||
}
|
||
|
||
addNodes([newNode])
|
||
return newNode
|
||
}
|
||
|
||
return {
|
||
isDragOver,
|
||
screenDragPos,
|
||
onDragOver,
|
||
onDragLeave,
|
||
onDrop,
|
||
}
|
||
}
|