useDrop.hook.ts 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. import { toRefs } from 'vue'
  2. import { getChartEditStore } from './useStore.hook'
  3. import { DragKeyEnum } from '@/enums/editPageEnum'
  4. import { createComponent } from '@/packages'
  5. import { ConfigType } from '@/packages/index.d'
  6. const chartEditStore = getChartEditStore()
  7. const { scale } = toRefs(chartEditStore.getEditCanvas)
  8. // * 拖拽中
  9. export const handleDrop = async (e: DragEvent) => {
  10. e.preventDefault()
  11. const Loading = window['$loading']
  12. try {
  13. Loading.start()
  14. const drayDataString = e!.dataTransfer!.getData(DragKeyEnum.DROG_KEY)
  15. const dropData: Exclude<ConfigType, ['node', 'image']> = JSON.parse(
  16. drayDataString
  17. )
  18. let newComponent= await createComponent(dropData)
  19. newComponent.setPosition(e.offsetX, e.offsetY)
  20. chartEditStore.addComponentList(newComponent)
  21. setTimeout(() => {
  22. Loading.finish()
  23. })
  24. } catch (error) {
  25. Loading.error()
  26. window['$message'].success(`图表正在研发中, 敬请期待...`)
  27. }
  28. }
  29. // * 拖拽结束
  30. export const handleDragOver = (e: DragEvent) => {
  31. e.preventDefault()
  32. e.stopPropagation()
  33. if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
  34. }