refactor: simplify drag state (#154)

Author: int128

src/Bookmarks/component.css

@@ -36,21 +36,22 @@
   position: relative; /* for .BookmarkEditButton */
 }
 
-/* when a bookmark is moved to another folder, "From" should be hidden */
+/* when move a bookmark across folders, "From" should be hidden */
 .Bookmark__DragDrop__From:not(.Bookmark__DragDrop__To) .Bookmark {
   visibility: hidden;
 }
 
-/* when a bookmark is moved to another folder but not hovered, "To" should be placeholder */
-.Bookmark__DragDrop__To:not(.Bookmark__DragDrop__Hover) {
+/* when the pointer is out of "To" element, it should be a placeholder */
+.Bookmark__DragDrop__To[data-bookmark-drag-state='leave'] {
   outline: var(--palette-1) dotted 2px;
 }
 
-.Bookmark__DragDrop__To:not(.Bookmark__DragDrop__Hover) .Bookmark {
+.Bookmark__DragDrop__To[data-bookmark-drag-state='leave'] .Bookmark {
   visibility: hidden;
 }
 
-.Bookmark__DragDrop__Hover {
+/* when the pointer is over a bookmark, it should be outlined */
+.Bookmark__DragDrop__To[data-bookmark-drag-state='enter'] {
   outline: var(--palette-1) solid 2px;
 }
 

src/Bookmarks/component.tsx

@@ -155,8 +155,8 @@ const BookmarkDragDrop: FC<BookmarkDragDropProps> = ({ bookmark, position, drag,
       className={classNameOfMap({
         Bookmark__DragDrop__From: bookmark.dragFrom,
         Bookmark__DragDrop__To: bookmark.dragTo,
-        Bookmark__DragDrop__Hover: bookmark.hover,
       })}
+      data-bookmark-drag-state={bookmark.state}
       onDragStart={(e) => {
         setDrag(Drag.start(bookmark, position))
         e.dataTransfer.effectAllowed = 'move'

src/Bookmarks/viewmodel.ts

@@ -1,28 +1,30 @@
 import { Bookmark, BookmarkFolderID, Position } from './model'
 
+type DragState = 'enter' | 'leave'
+
 export class Drag {
   readonly bookmark: Bookmark
   readonly from: Position
   readonly to: Position
-  readonly hover: boolean
+  readonly state: DragState
 
-  private constructor(bookmark: Bookmark, from: Position, to: Position, hover: boolean) {
+  private constructor(bookmark: Bookmark, from: Position, to: Position, state: DragState) {
     this.bookmark = bookmark
     this.from = from
     this.to = to
-    this.hover = hover
+    this.state = state
   }
 
   static start(bookmark: Bookmark, from: Position) {
-    return new Drag(bookmark, from, from, true)
+    return new Drag(bookmark, from, from, 'enter')
   }
 
   enterTo(to: Position) {
-    return new Drag(this.bookmark, this.from, to, true)
+    return new Drag(this.bookmark, this.from, to, 'enter')
   }
 
   leave() {
-    return new Drag(this.bookmark, this.from, this.to, false)
+    return new Drag(this.bookmark, this.from, this.to, 'leave')
   }
 
   calculateDestination(): Position {
@@ -37,7 +39,7 @@ export class Drag {
 export type BookmarkWithDragProps = Bookmark & {
   readonly dragFrom?: true
   readonly dragTo?: true
-  readonly hover?: true
+  readonly state?: DragState
 }
 
 export const reorderBookmarks = (
@@ -49,25 +51,25 @@ export const reorderBookmarks = (
     return bookmarks
   }
 
+  // move the bookmark in the folder
   if (folderID === drag.from.folderID && drag.from.folderID === drag.to.folderID) {
-    // move the bookmark in the folder
     const r: BookmarkWithDragProps[] = [...bookmarks]
     r.splice(drag.from.index, 1)
-    r.splice(drag.to.index, 0, { ...drag.bookmark, dragFrom: true, dragTo: true, hover: drag.hover || undefined })
+    r.splice(drag.to.index, 0, { ...drag.bookmark, dragFrom: true, dragTo: true, state: drag.state })
     return r
   }
 
-  // when move across the folder, keep the element to receive the dragEnd event
+  // move the bookmark across the folders
   if (folderID === drag.from.folderID) {
     const r: BookmarkWithDragProps[] = [...bookmarks]
+    // keep the element to receive the dragEnd event
     r.splice(drag.from.index, 1)
-    r.push({ ...drag.bookmark, dragFrom: true })
+    r.push({ ...drag.bookmark, dragFrom: true, state: drag.state })
     return r
   }
-
   if (folderID === drag.to.folderID) {
     const r: BookmarkWithDragProps[] = [...bookmarks]
-    r.splice(drag.to.index, 0, { ...drag.bookmark, dragTo: true, hover: drag.hover || undefined })
+    r.splice(drag.to.index, 0, { ...drag.bookmark, dragTo: true, state: drag.state })
     return r
   }