File size: 2,144 Bytes
89ce340 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
import { onMounted, onUnmounted, type Ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store'
import { getImageDataURL } from '@/utils/image'
import { parseText2Paragraphs } from '@/utils/textParser'
import useCreateElement from '@/hooks/useCreateElement'
export default (elementRef: Ref<HTMLElement | undefined>) => {
const { disableHotkeys } = storeToRefs(useMainStore())
const { createImageElement, createTextElement } = useCreateElement()
// 拖拽元素到画布中
const handleDrop = (e: DragEvent) => {
if (!e.dataTransfer || e.dataTransfer.items.length === 0) return
const dataItems = e.dataTransfer.items
const dataTransferFirstItem = dataItems[0]
// 检查事件对象中是否存在图片，存在则插入图片，否则继续检查是否存在文字，存在则插入文字
let isImage = false
for (const item of dataItems) {
if (item.kind === 'file' && item.type.indexOf('image') !== -1) {
const imageFile = item.getAsFile()
if (imageFile) {
getImageDataURL(imageFile).then(dataURL => createImageElement(dataURL))
}
isImage = true
}
}
if (isImage) return
if (dataTransferFirstItem.kind === 'string' && dataTransferFirstItem.type === 'text/plain') {
dataTransferFirstItem.getAsString(text => {
if (disableHotkeys.value) return
const string = parseText2Paragraphs(text)
createTextElement({
left: 0,
top: 0,
width: 600,
height: 50,
}, { content: string })
})
}
}
onMounted(() => {
elementRef.value && elementRef.value.addEventListener('drop', handleDrop)
document.ondragleave = e => e.preventDefault()
document.ondrop = e => e.preventDefault()
document.ondragenter = e => e.preventDefault()
document.ondragover = e => e.preventDefault()
})
onUnmounted(() => {
elementRef.value && elementRef.value.removeEventListener('drop', handleDrop)
document.ondragleave = null
document.ondrop = null
document.ondragenter = null
document.ondragover = null
})
} |