Add creation of groups with drop

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));

src/components/map/MapTiles.js

@@ -205,6 +205,7 @@ function MapTiles({
       onGroupChange={onMapsGroup}
       renderTile={renderTile}
       renderTiles={renderTiles}
+      onTileSelect={onTileSelect}
     />
   );
 }

src/components/token/TokenTiles.js

@@ -199,6 +199,7 @@ function TokenTiles({
       onGroupChange={onTokensGroup}
       renderTile={renderTile}
       renderTiles={renderTiles}
+      onTileSelect={onTileSelect}
     />
   );
 }

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;
+}