Fix: File disappear after dragging + add long press to enable dragging (#1159)

Author: mykalmax

web/client/src/library/components/fileExplorer/Directory.tsx

@@ -12,7 +12,7 @@ import { type ModelArtifact } from '@models/artifact'
 import { getEmptyImage } from 'react-dnd-html5-backend'
 import { useFileExplorer } from './context'
 import FileExplorer from './FileExplorer'
-
+import { useLongPress } from '@uidotdev/usehooks'
 const Directory = function Directory({
   directory,
   className,
@@ -27,6 +27,17 @@ const Directory = function Directory({
   const [newName, setNewName] = useState<string>()
   const [isOpen, setIsOpen] = useState<boolean>(directory.isOpened)
   const [isOpenContextMenu, setIsOpenContextMenu] = useState(false)
+  const [isDraggable, setIsDraggable] = useState(false)
+
+  const attrs = useLongPress(() => setIsDraggable(true), {
+    threshold: 500,
+    onFinish() {
+      setIsDraggable(false)
+    },
+    onCancel() {
+      setIsDraggable(false)
+    },
+  })
 
   const {
     activeRange,
@@ -60,13 +71,15 @@ const Directory = function Directory({
         return (
           monitor.isOver({ shallow: true }) &&
           isArrayNotEmpty(artifacts) &&
-          artifacts.every(item => {
+          artifacts.reduce((acc, item) => {
+            if (isFalse(acc)) return false
+
             if (item.parent === directory || item === directory) return false
             if (item instanceof ModelDirectory && item.hasDirectory(directory))
               return false
 
             return true
-          })
+          }, true)
         )
       },
       collect(monitor) {
@@ -82,16 +95,19 @@ const Directory = function Directory({
     () => ({
       type: 'artifact',
       item: directory,
+      end() {
+        setIsDraggable(false)
+      },
       canDrag() {
-        return isStringEmptyOrNil(newName)
+        return isStringEmptyOrNil(newName) && isDraggable
       },
       collect(monitor) {
         return {
           isDragging: monitor.isDragging(),
         }
       },
     }),
-    [directory, newName],
+    [directory, newName, isDraggable],
   )
 
   const [isAllDirectories, shouldClose, shouldOpen, shouldToggle] =
@@ -183,11 +199,15 @@ const Directory = function Directory({
         className={clsx(isOver && isFalse(isDragging) && 'bg-brand-5')}
       >
         {directory.withParent && (
-          <div ref={directory.withParent ? drag : undefined}>
+          <div
+            {...attrs}
+            ref={directory.withParent ? drag : undefined}
+          >
             <FileExplorer.Container
               artifact={directory}
               className={clsx(
                 isFalse(isStringEmptyOrNil(newName)) && 'bg-primary-800',
+                isDraggable && 'bg-primary-10 !cursor-grabbing',
                 isOpenContextMenu && 'bg-primary-10',
                 className,
               )}

web/client/src/library/components/fileExplorer/DragLayer.tsx

@@ -36,8 +36,14 @@ export default function DragLayer(): JSX.Element {
   return (
     <>
       {isDragging && (
-        <div style={layerStyles}>
-          <div style={getItemStyles(currentOffset)}>
+        <div
+          style={layerStyles}
+          className="!cursor-grabbing"
+        >
+          <div
+            style={getItemStyles(currentOffset)}
+            className="!cursor-grabbing"
+          >
             {artifacts.map(artifact => (
               <span key={artifact.id}>
                 {artifact instanceof ModelDirectory && (

web/client/src/library/components/fileExplorer/File.tsx

@@ -9,6 +9,7 @@ import { useFileExplorer } from './context'
 import { type ModelFile } from '@models/file'
 import { useDrag } from 'react-dnd'
 import { getEmptyImage } from 'react-dnd-html5-backend'
+import { useLongPress } from '@uidotdev/usehooks'
 
 function File({
   file,
@@ -22,6 +23,18 @@ function File({
   const selectedFile = useStoreProject(s => s.selectedFile)
   const setSelectedFile = useStoreProject(s => s.setSelectedFile)
 
+  const [isDraggable, setIsDraggable] = useState(false)
+
+  const attrs = useLongPress(() => setIsDraggable(true), {
+    threshold: 500,
+    onFinish() {
+      setIsDraggable(false)
+    },
+    onCancel() {
+      setIsDraggable(false)
+    },
+  })
+
   const {
     activeRange,
     setActiveRange,
@@ -36,16 +49,19 @@ function File({
     () => ({
       type: 'artifact',
       item: file,
+      end() {
+        setIsDraggable(false)
+      },
       canDrag() {
-        return isStringEmptyOrNil(newName)
+        return isStringEmptyOrNil(newName) && isDraggable
       },
       collect(monitor) {
         return {
           isDragging: monitor.isDragging(),
         }
       },
     }),
-    [file, newName],
+    [file, newName, isDraggable],
   )
 
   useEffect(() => {
@@ -84,13 +100,18 @@ function File({
   const disabled = activeRange.size > 1 && activeRange.has(file)
 
   return (
-    <div ref={drag}>
+    <div
+      {...attrs}
+      ref={drag}
+    >
       <FileExplorer.Container
         artifact={file}
         isSelected={selectedFile === file}
         className={clsx(
           isFalse(isStringEmptyOrNil(newName)) && 'bg-primary-800',
           isOpenContextMenu && 'bg-primary-10',
+          isDraggable &&
+            'bg-primary-10 !cursor-grabbing outline-2 !outline-primary-500',
           isDragging && 'opacity-50',
           className,
         )}

web/client/src/library/components/fileExplorer/FileExplorer.tsx

@@ -14,7 +14,6 @@ import { CheckCircleIcon, XCircleIcon } from '@heroicons/react/24/solid'
 import SearchList from '@components/search/SearchList'
 import { type ModelFile } from '@models/file'
 import { EnumSize } from '~/types/enum'
-
 /* TODO:
   - add drag and drop files/directories from desktop
   - add copy and paste
@@ -75,6 +74,7 @@ const FileExplorer = function FileExplorer({
         onSelect={setSelectedFile}
       />
       <FileExplorer.ContextMenu
+        key={project.id}
         trigger={
           <FileExplorer.ContextMenuTrigger className="h-full pb-2">
             <DndProvider backend={HTML5Backend}>
@@ -285,7 +285,7 @@ function FileExplorerArtifactContainer({
   return (
     <span
       className={clsx(
-        'w-full flex items-center overflow-hidden whitespace-nowrap group/file rounded-md px-2',
+        'w-full flex items-center group/file rounded-md px-2',
         className,
         activeRange.has(artifact)
           ? 'text-brand-100 !bg-brand-500 dark:bg-brand-700 dark:text-brand-100'

web/client/src/library/components/fileExplorer/context.tsx

@@ -9,12 +9,13 @@ import {
 import { useStoreProject } from '@context/project'
 import { ModelArtifact } from '@models/artifact'
 import { ModelDirectory } from '@models/directory'
-import { getAllFilesInDirectory, toUniqueName } from './help'
+import { getAllFilesInDirectory } from './help'
 import {
   isArrayNotEmpty,
   isFalse,
   isNotNil,
   isStringEmptyOrNil,
+  toUniqueName,
 } from '@utils/index'
 import { ModelFile } from '@models/file'
 import { useStoreEditor } from '@context/editor'

web/client/src/library/components/fileExplorer/help.ts

@@ -6,12 +6,3 @@ export function getAllFilesInDirectory(directory: ModelDirectory): ModelFile[] {
 
   return [...files, ...directories.map(getAllFilesInDirectory).flat()]
 }
-
-export function toUniqueName(prefix?: string, suffix?: string): string {
-  // Should be enough for now
-  const hex = (Date.now() % 100000).toString(16)
-
-  return `${prefix == null ? '' : `${prefix}_`}${hex}${
-    suffix ?? ''
-  }`.toLowerCase()
-}

web/client/src/models/artifact.ts

@@ -1,7 +1,6 @@
-import { isStringEmptyOrNil } from '@utils/index'
+import { isStringEmptyOrNil, toUniqueName } from '@utils/index'
 import { type ModelDirectory } from './directory'
 import { ModelInitial } from './initial'
-import { toUniqueName } from '@components/fileExplorer/help'
 
 export interface InitialArtifact {
   name: string

web/client/src/models/directory.ts

@@ -1,4 +1,4 @@
-import { isFalse, isNil } from '@utils/index'
+import { isFalse } from '@utils/index'
 import type { Directory, File } from '../api/client'
 import { type InitialArtifact, ModelArtifact } from './artifact'
 import { ModelFile } from './file'
@@ -30,21 +30,20 @@ export class ModelDirectory extends ModelArtifact<InitialDirectory> {
       parent,
     )
 
-    if (parent != null) {
-      this.level = parent.level + 1
-    }
-
     if ((initial as ModelDirectory)?.isModel) {
       this.directories = (initial as ModelDirectory).directories
       this.files = (initial as ModelDirectory).files
     } else {
-      this.directories = this.initial.directories?.map(
-        d => new ModelDirectory(d, this),
-      )
-      this.files = this.initial.files?.map(f => new ModelFile(f, this))
+      this.directories = []
+      this.files = []
+
+      this.initial.directories.forEach(d => {
+        this.addDirectory(new ModelDirectory(d))
+      })
+      this.initial.files.forEach(f => {
+        this.addFile(new ModelFile(f))
+      })
     }
-
-    this._isOpen = isNil(parent)
   }
 
   get isChanged(): boolean {

web/client/src/models/file.ts

@@ -1,8 +1,7 @@
 import { type File, FileType } from '../api/client'
 import { type ModelDirectory } from './directory'
 import { type InitialArtifact, ModelArtifact } from './artifact'
-import { isStringEmptyOrNil } from '@utils/index'
-import { toUniqueName } from '@components/fileExplorer/help'
+import { isStringEmptyOrNil, toUniqueName } from '@utils/index'
 
 export const EnumFileExtensions = {
   SQL: '.sql',

web/client/src/utils/index.ts

@@ -217,3 +217,12 @@ export function uid(): string {
 
   return time + random
 }
+
+export function toUniqueName(prefix?: string, suffix?: string): string {
+  // Should be enough for now
+  const hex = (Date.now() % 100000).toString(16)
+
+  return `${prefix == null ? '' : `${prefix}_`}${hex}${
+    suffix ?? ''
+  }`.toLowerCase()
+}