Refactor annotation groups

apps/editor/src/components/editor/layers/draggable-group-list-item.tsx

@@ -0,0 +1,34 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { IAnnotationGroup, ILayer } from "@visian/ui-shared";
+import { observer } from "mobx-react-lite";
+
+import { AnnotationGroupListItem } from "./group-list-item";
+
+export const DraggableAnnotationGroupListItem = observer<{
+  group: IAnnotationGroup;
+  isActive: boolean;
+  isLast?: boolean;
+  isDragged?: boolean;
+  draggedLayer?: ILayer;
+}>(({ group, isActive, isLast, isDragged, draggedLayer }) => {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id: group.id, data: { annotationGroup: group } });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragged ? 0.3 : 1,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+      <AnnotationGroupListItem
+        group={group}
+        isActive={isActive}
+        isLast={isLast}
+        draggedLayer={draggedLayer}
+      />
+    </div>
+  );
+});

apps/editor/src/components/editor/layers/draggable-layer-list-item.tsx

@@ -0,0 +1,31 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { ILayer } from "@visian/ui-shared";
+import { observer } from "mobx-react-lite";
+
+import { LayerListItem } from "./layer-list-item";
+
+export const DraggableLayerListItem = observer<{
+  layer: ILayer;
+  isActive?: boolean;
+  isLast?: boolean;
+  isDragged?: boolean;
+}>(({ layer, isActive, isLast, isDragged }) => {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({
+      id: layer.id,
+      data: { layer },
+    });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragged ? 0.3 : 1,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+      <LayerListItem layer={layer} isActive={isActive} isLast={isLast} />
+    </div>
+  );
+});

apps/editor/src/components/editor/layers/group-list-item.tsx

@@ -1,23 +1,65 @@
-import { FullWidthListItem, IAnnotationGroup } from "@visian/ui-shared";
+import {
+  SortableContext,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { FullWidthListItem, IAnnotationGroup, ILayer } from "@visian/ui-shared";
 import { observer } from "mobx-react-lite";
 import { useCallback } from "react";
+import styled from "styled-components";
+
+import { DraggableLayerListItem } from "./draggable-layer-list-item";
+
+const ChildLayerContainer = styled.div`
+  margin-left: 16px;
+`;
 
 export const AnnotationGroupListItem = observer<{
   group: IAnnotationGroup;
   isActive: boolean;
   isLast?: boolean;
-}>(({ group, isActive, isLast }) => {
+  draggedLayer?: ILayer;
+}>(({ group, isActive, isLast, draggedLayer }) => {
   const toggleCollapse = useCallback(() => {
-    group.collapsed = !group.collapsed;
+    group.setCollapsed(!group.collapsed);
   }, [group]);
+
+  const hideDividerForLayer = useCallback(
+    (layerIndex: number) => {
+      if (isLast && layerIndex === group.layers.length - 1) return true;
+      const indexOfActiveLayer = group.layers.findIndex((l) => l.isActive);
+      return layerIndex === indexOfActiveLayer - 1;
+    },
+    [group, isLast],
+  );
+
   return (
-    <FullWidthListItem
-      icon={group.collapsed ? "arrowRight" : "arrowDown"}
-      onClick={toggleCollapse}
-      labelTx={group.title}
-      label={group.title}
-      isActive={isActive}
-      isLast={isLast}
-    />
+    <>
+      <FullWidthListItem
+        icon={group.collapsed ? "arrowRight" : "arrowDown"}
+        onIconPress={toggleCollapse}
+        labelTx={group.title}
+        label={group.title}
+        isActive={isActive}
+        isLast={isLast && group.collapsed}
+      />
+      {!group.collapsed && (
+        <ChildLayerContainer>
+          <SortableContext
+            items={group.layerIds}
+            strategy={verticalListSortingStrategy}
+          >
+            {group.layers.map((layer, index) => (
+              <DraggableLayerListItem
+                key={layer.id}
+                layer={layer}
+                isActive={layer.isActive}
+                isDragged={layer === draggedLayer}
+                isLast={hideDividerForLayer(index)}
+              />
+            ))}
+          </SortableContext>
+        </ChildLayerContainer>
+      )}
+    </>
   );
 });