useDrop.ts 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. import { useEffect, type RefObject } from 'react';
  2. import { useCanvasStore } from '@/lib/store';
  3. export function useDrop(elementRef: RefObject<HTMLElement | null>) {
  4. const disableHotkeys = useCanvasStore.use.disableHotkeys();
  5. useEffect(() => {
  6. const element = elementRef.current;
  7. // Handle drop of elements/pages onto canvas
  8. const handleDrop = (e: DragEvent) => {
  9. if (!e.dataTransfer || e.dataTransfer.items.length === 0) return;
  10. if (disableHotkeys) return;
  11. const firstItem = e.dataTransfer.items[0];
  12. if (firstItem && firstItem.kind === 'string' && firstItem.type === 'text/plain') {
  13. firstItem.getAsString((_text) => {
  14. if (disableHotkeys) return;
  15. // TODO: implement createTextElement
  16. });
  17. }
  18. };
  19. const preventDefault = (e: DragEvent) => e.preventDefault();
  20. if (element) {
  21. element.addEventListener('drop', handleDrop);
  22. }
  23. document.addEventListener('dragleave', preventDefault);
  24. document.addEventListener('drop', preventDefault);
  25. document.addEventListener('dragenter', preventDefault);
  26. document.addEventListener('dragover', preventDefault);
  27. return () => {
  28. if (element) {
  29. element.removeEventListener('drop', handleDrop);
  30. }
  31. document.removeEventListener('dragleave', preventDefault);
  32. document.removeEventListener('drop', preventDefault);
  33. document.removeEventListener('dragenter', preventDefault);
  34. document.removeEventListener('dragover', preventDefault);
  35. };
  36. }, [elementRef, disableHotkeys]);
  37. }