🚸 (editor) Automatically move graph on first group on mount

baptisteArno · Dec 16, 2022 · 6c55510 · 6c55510 · vercel · Dec 16, 2022
1 parent 68de7b7
commit 6c55510
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/apps/builder/src/features/graph/components/Graph.tsx b/apps/builder/src/features/graph/components/Graph.tsx
@@ -53,7 +53,9 @@ export const Graph = ({
     connectingIds,
   } = useGraph()
   const { updateGroupCoordinates } = useGroupsCoordinates()
-  const [graphPosition, setGraphPosition] = useState(graphPositionDefaultValue)
+  const [graphPosition, setGraphPosition] = useState(
+    graphPositionDefaultValue(typebot.groups[0].graphCoordinates)
+  )
   const [debouncedGraphPosition] = useDebounce(graphPosition, 200)
   const transform = useMemo(
     () =>

diff --git a/apps/builder/src/features/graph/providers/GraphProvider.tsx b/apps/builder/src/features/graph/providers/GraphProvider.tsx
@@ -40,7 +40,13 @@ export type Node = Omit<Group, 'blocks'> & {
   })[]
 }
 
-export const graphPositionDefaultValue = { x: 400, y: 100, scale: 1 }
+export const graphPositionDefaultValue = (
+  firstGroupCoordinates: Coordinates
+) => ({
+  x: 400 - firstGroupCoordinates.x,
+  y: 100 - firstGroupCoordinates.y,
+  scale: 1,
+})
 
 export type ConnectingIds = {
   source: Source
@@ -76,7 +82,7 @@ const graphContext = createContext<{
   setFocusedGroupId: Dispatch<SetStateAction<string | undefined>>
   //@ts-ignore
 }>({
-  graphPosition: graphPositionDefaultValue,
+  graphPosition: graphPositionDefaultValue({ x: 0, y: 0 }),
   connectingIds: null,
 })
 
@@ -87,7 +93,9 @@ export const GraphProvider = ({
   children: ReactNode
   isReadOnly?: boolean
 }) => {
-  const [graphPosition, setGraphPosition] = useState(graphPositionDefaultValue)
+  const [graphPosition, setGraphPosition] = useState(
+    graphPositionDefaultValue({ x: 0, y: 0 })
+  )
   const [connectingIds, setConnectingIds] = useState<ConnectingIds | null>(null)
   const [previewingEdge, setPreviewingEdge] = useState<Edge>()
   const [sourceEndpoints, setSourceEndpoints] = useState<IdMap<Endpoint>>({})