diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/helper.ts b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/helper.ts index f662144ec1..5f20962d34 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/helper.ts +++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/helper.ts @@ -6,6 +6,7 @@ import type { DndableItems } from './type'; import type { KanbanCard, KanbanGroup, + RecastItem, } from '@toeverything/components/editor-core'; import { isEqual } from '@toeverything/utils'; @@ -33,15 +34,44 @@ const findContainer = (id: string, items: DndableItems) => { ); }; +type FindMoveInfo = (params: { + id: string; + activeContainer: string; + overContainer: string; + kanban: KanbanGroup[]; +}) => { + targetCard: RecastItem; + targetGroup: KanbanGroup | null; +}; + +const findMoveInfo: FindMoveInfo = ({ + id, + activeContainer, + overContainer, + kanban, +}) => { + const activeGroup = kanban.find(group => group.id === activeContainer); + const overGroup = kanban.find(group => group.id === overContainer); + const activityCard = activeGroup.items.find(item => item.id === id); + + return { + targetCard: activityCard.block, + targetGroup: overGroup, + }; +}; + /** * Find the sibling node after the dragging of the moved node ends * @param cards * @param currentCardId */ -const findSibling = (cards: KanbanCard[], currentCardId: string) => { +const findSibling = ( + cards: KanbanCard[], + currentCardId: string +): [string, string, number] => { const index = cards.findIndex(card => card.id === currentCardId); - return [cards[index - 1]?.id ?? null, cards[index + 1]?.id ?? null]; + return [cards[index - 1]?.id ?? null, cards[index + 1]?.id ?? null, index]; }; /** @@ -84,4 +114,5 @@ export { findSibling, pickIdFromCards, shouldUpdate, + findMoveInfo, }; diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/use-dndable.ts b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/use-dndable.ts index 4dfcc5f5a0..ff814d5458 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/use-dndable.ts +++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/use-dndable.ts @@ -11,6 +11,7 @@ import { findSibling, pickIdFromCards, shouldUpdate, + findMoveInfo, } from '../helper'; import type { CollisionDetection, @@ -19,11 +20,13 @@ import type { DragEndEvent, } from '@dnd-kit/core'; import type { DndableItems, UseDndableRes } from '../type'; +import { useKanban } from '@toeverything/components/editor-core'; export const useDndable = ( dndableItems: DndableItems, dndableContainerIds: string[] ): UseDndableRes => { + const { kanban, moveCard } = useKanban(); const [items, setItems] = useState(dndableItems); const [containerIds, setContainerIds] = useState(dndableContainerIds); const [active, setActive] = useState(null); @@ -259,16 +262,14 @@ export const useDndable = ( ).filter(Boolean), }; - const activeItems = items[activeContainer]; - const activeItem = activeItems.find( - item => item.id === activeId - ); - const [beforeId, afterId] = findSibling( - items[overContainer], - activeId - ); + const { targetCard } = findMoveInfo({ + id: activeId, + activeContainer, + overContainer, + kanban, + }); - activeItem?.moveTo(overContainer, beforeId, afterId); + moveCard(targetCard, null, overIndex); return data; });