✨ (editor) Actions on multiple groups

You can now select groups, move, copy, delete them easily

Closes #830, closes #1092

apps/builder/src/features/graph/components/edges/DrawingEdge.tsx

@@ -8,18 +8,26 @@ import { Coordinates } from '@dnd-kit/utilities'
 import { computeConnectingEdgePath } from '../../helpers/computeConnectingEdgePath'
 import { computeEdgePathToMouse } from '../../helpers/computeEdgePathToMouth'
 import { useGraph } from '../../providers/GraphProvider'
-import { useGroupsCoordinates } from '../../providers/GroupsCoordinateProvider'
 import { ConnectingIds } from '../../types'
 import { useEventsCoordinates } from '../../providers/EventsCoordinateProvider'
 import { eventWidth, groupWidth } from '../../constants'
+import { useGroupsStore } from '../../hooks/useGroupsStore'
 
-export const DrawingEdge = () => {
-  const { graphPosition, setConnectingIds, connectingIds } = useGraph()
+type Props = {
+  connectingIds: ConnectingIds
+}
+
+export const DrawingEdge = ({ connectingIds }: Props) => {
+  const { graphPosition, setConnectingIds } = useGraph()
   const {
     sourceEndpointYOffsets: sourceEndpoints,
     targetEndpointYOffsets: targetEndpoints,
   } = useEndpoints()
-  const { groupsCoordinates } = useGroupsCoordinates()
+  const groupsCoordinates = useGroupsStore(
+    (state) => state.groupsCoordinates,
+    // Keep in cache because groups are not changing while drawing an edge
+    () => true
+  )
   const { eventsCoordinates } = useEventsCoordinates()
   const { createEdge } = useTypebot()
   const [mousePosition, setMousePosition] = useState<Coordinates | null>(null)
@@ -27,7 +35,9 @@ export const DrawingEdge = () => {
   const sourceElementCoordinates = connectingIds
     ? 'eventId' in connectingIds.source
       ? eventsCoordinates[connectingIds?.source.eventId]
-      : groupsCoordinates[connectingIds?.source.groupId ?? '']
+      : groupsCoordinates
+      ? groupsCoordinates[connectingIds?.source.groupId ?? '']
+      : undefined
     : undefined
 
   const targetGroupCoordinates =
@@ -106,10 +116,7 @@ export const DrawingEdge = () => {
     createEdge({ from: connectingIds.source, to: connectingIds.target })
   }
 
-  if (
-    (mousePosition && mousePosition.x === 0 && mousePosition.y === 0) ||
-    !connectingIds
-  )
+  if (mousePosition && mousePosition.x === 0 && mousePosition.y === 0)
     return <></>
   return (
     <path