diff --git a/src/components/drag/SortableTiles.js b/src/components/drag/SortableTiles.js index 4ab9ee0..67e400a 100644 --- a/src/components/drag/SortableTiles.js +++ b/src/components/drag/SortableTiles.js @@ -12,11 +12,17 @@ import { import { SortableContext, arrayMove } from "@dnd-kit/sortable"; import { animated, useSpring, config } from "react-spring"; -import { combineGroups } from "../../helpers/select"; +import { combineGroups, moveGroups } from "../../helpers/select"; import SortableTile from "./SortableTile"; -function SortableTiles({ groups, onGroupChange, renderTile, renderTiles }) { +function SortableTiles({ + groups, + onGroupChange, + renderTile, + renderTiles, + onTileSelect, +}) { const mouseSensor = useSensor(MouseSensor, { activationConstraint: { delay: 250, tolerance: 5 }, }); @@ -46,10 +52,17 @@ function SortableTiles({ groups, onGroupChange, renderTile, renderTiles }) { } if (over.id.startsWith("__group__")) { - return; - } - - if (active.id !== over.id) { + const overId = over.id.slice(9); + if (overId === active.id) { + return; + } + const activeGroupIndex = groups.findIndex( + (group) => group.id === active.id + ); + const overGroupIndex = groups.findIndex((group) => group.id === overId); + onGroupChange(moveGroups(groups, overGroupIndex, activeGroupIndex)); + onTileSelect(); + } else if (active.id !== over.id) { const oldIndex = groups.findIndex((group) => group.id === active.id); const newIndex = groups.findIndex((group) => group.id === over.id); onGroupChange(arrayMove(groups, oldIndex, newIndex)); diff --git a/src/components/map/MapTiles.js b/src/components/map/MapTiles.js index f630e59..fda1097 100644 --- a/src/components/map/MapTiles.js +++ b/src/components/map/MapTiles.js @@ -205,6 +205,7 @@ function MapTiles({ onGroupChange={onMapsGroup} renderTile={renderTile} renderTiles={renderTiles} + onTileSelect={onTileSelect} /> ); } diff --git a/src/components/token/TokenTiles.js b/src/components/token/TokenTiles.js index cb3c9d2..00f99d5 100644 --- a/src/components/token/TokenTiles.js +++ b/src/components/token/TokenTiles.js @@ -199,6 +199,7 @@ function TokenTiles({ onGroupChange={onTokensGroup} renderTile={renderTile} renderTiles={renderTiles} + onTileSelect={onTileSelect} /> ); } diff --git a/src/helpers/select.js b/src/helpers/select.js index 45263fa..d6d52ff 100644 --- a/src/helpers/select.js +++ b/src/helpers/select.js @@ -1,6 +1,7 @@ import { useEffect, useState } from "react"; import { v4 as uuid } from "uuid"; import Fuse from "fuse.js"; +import cloneDeep from "lodash.clonedeep"; import { groupBy, keyBy } from "./shared"; @@ -174,7 +175,7 @@ export function groupsFromIds(groupIds, groups) { * @param {Group} group * @return {GroupItem[]} */ -function getGroupItems(group) { +export function getGroupItems(group) { if (group.type === "group") { let groups = []; for (let item of group.items) { @@ -230,3 +231,13 @@ export function combineGroups(a, b) { }; } } + +export function moveGroups(groups, aIndex, bIndex) { + const aGroup = groups[aIndex]; + const bGroup = groups[bIndex]; + const newGroup = combineGroups(aGroup, bGroup); + const newGroups = cloneDeep(groups); + newGroups[aIndex] = newGroup; + newGroups.splice(bIndex, 1); + return newGroups; +}