🐛(frontend) Switched to closest center collision strategy

Author: juliendemoutiez

client/src/components/Board/Board.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {
   DndContext,
   DragOverlay,
-  closestCorners,
+  closestCenter,
   KeyboardSensor,
   PointerSensor,
   useSensor,
@@ -72,10 +72,12 @@ function Board({
 
   const [isListAddOpened, setIsListAddOpened] = useState(false);
 
+  const listsIds = useMemo(() => listItems.map((list) => list.id), [listItems]);
+
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
-        distance: 5,
+        distance: 1,
       },
     }),
     useSensor(KeyboardSensor, {
@@ -107,6 +109,7 @@ function Board({
 
   const handleDragOver = (event) => {
     const { active, over } = event;
+
     if (!over) return;
 
     const draggedId = active.id;
@@ -134,16 +137,17 @@ function Board({
 
     // Handle list reordering in real-time
     if (isActiveList && isOverList) {
-      setListItems((currentListItems) => {
-        const activeIndex = currentListItems.findIndex((col) => col.id === draggedId);
-        const overIndex = currentListItems.findIndex((col) => col.id === overId);
-
-        if (activeIndex !== -1 && overIndex !== -1 && activeIndex !== overIndex) {
-          return arrayMove(currentListItems, activeIndex, overIndex);
-        }
-        return currentListItems;
-      });
-      return;
+      setTimeout(() => {
+        setListItems((currentListItems) => {
+          const activeIndex = currentListItems.findIndex((col) => col.id === draggedId);
+          const overIndex = currentListItems.findIndex((col) => col.id === overId);
+
+          if (activeIndex !== -1 && overIndex !== -1 && activeIndex !== overIndex) {
+            return arrayMove(currentListItems, activeIndex, overIndex);
+          }
+          return currentListItems;
+        });
+      }, 0);
     }
 
     // Skip card logic if dragging a list
@@ -195,6 +199,7 @@ function Board({
 
   const handleDragEnd = (event) => {
     const { active, over } = event;
+
     if (!over) {
       setActiveId(null);
       return;
@@ -307,15 +312,12 @@ function Board({
     <div className={styles.wrapper}>
       <DndContext
         sensors={sensors}
-        collisionDetection={closestCorners}
+        collisionDetection={closestCenter}
         onDragStart={handleDragStart}
         onDragOver={handleDragOver}
         onDragEnd={handleDragEnd}
       >
-        <SortableContext
-          items={listItems.map((col) => col.id)}
-          strategy={horizontalListSortingStrategy}
-        >
+        <SortableContext items={listsIds} strategy={horizontalListSortingStrategy}>
           <div className={styles.container}>
             {listItems.map((list) => (
               <List

client/src/components/Board/Card/Card.jsx

@@ -56,10 +56,12 @@ function Card({
   onLabelDelete,
   currentUser,
 }) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+  const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
     id,
+    data: { type: 'Card', id },
     disabled: !canEdit,
   });
+
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,

client/src/components/Board/List/List.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState, useRef, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 import { SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
@@ -49,6 +49,7 @@ function List({
 }) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id,
+    data: { type: 'List', id },
     disabled: !canEdit,
   });
 
@@ -65,6 +66,10 @@ function List({
     transition,
   };
 
+  const cardsIds = useMemo(() => {
+    return cards.map((card) => card.id);
+  }, [cards]);
+
   const nameEdit = useRef(null);
 
   const ListActionsPopover = usePopup(ListActionsStep);
@@ -171,14 +176,8 @@ function List({
           </ListActionsPopover>
         )}
       </div>
-      <SortableContext items={cards.map((c) => c.id)} strategy={verticalListSortingStrategy}>
-        <div
-          ref={setDropRef}
-          className={classNames(
-            styles.cardsContainer,
-            isOver && cards.length === 0 && styles.dropZoneActive,
-          )}
-        >
+      <SortableContext items={cardsIds} strategy={verticalListSortingStrategy}>
+        <div ref={setDropRef} className={classNames(styles.cardsContainer)}>
           {cards.map((card) => (
             <Card
               key={card.id}

start

@@ -0,0 +1,2 @@
+#!/bin/bash
+export NODE_ENV=production && set -e && node db/init.js && node app.js --prod