🚸 (editor) Improve editor performance by rounding paths

Related to #575

apps/builder/src/features/graph/components/Graph.tsx

@@ -58,7 +58,9 @@ export const Graph = ({
   const [debouncedGraphPosition] = useDebounce(graphPosition, 200)
   const transform = useMemo(
     () =>
-      `translate(${graphPosition.x}px, ${graphPosition.y}px) scale(${graphPosition.scale})`,
+      `translate(${Number(graphPosition.x.toFixed(2))}px, ${Number(
+        graphPosition.y.toFixed(2)
+      )}px) scale(${graphPosition.scale})`,
     [graphPosition]
   )
   const { user } = useUser()

apps/builder/src/features/graph/components/endpoints/SourceEndpoint.tsx

@@ -39,10 +39,14 @@ export const SourceEndpoint = ({
   const endpointY = useMemo(
     () =>
       ref.current
-        ? (ref.current?.getBoundingClientRect().y +
+        ? Number(
+            (
+              (ref.current?.getBoundingClientRect().y +
                 (endpointHeight * graphPosition.scale) / 2 -
                 graphPosition.y) /
               graphPosition.scale
+            ).toFixed(2)
+          )
         : undefined,
     // We need to force recompute whenever the group height and position changes
     // eslint-disable-next-line react-hooks/exhaustive-deps

apps/builder/src/features/graph/components/endpoints/TargetEndpoint.tsx

@@ -28,10 +28,14 @@ export const TargetEndpoint = ({
   const endpointY = useMemo(
     () =>
       ref.current
-        ? (ref.current?.getBoundingClientRect().y +
+        ? Number(
+            (
+              (ref.current?.getBoundingClientRect().y +
                 (endpointHeight * graphPosition.scale) / 2 -
                 graphPosition.y) /
               graphPosition.scale
+            ).toFixed(2)
+          )
         : undefined,
     // We need to force recompute whenever the group height and position changes
     // eslint-disable-next-line react-hooks/exhaustive-deps

apps/builder/src/features/graph/components/nodes/group/GroupNode.tsx

@@ -170,8 +170,8 @@ const NonMemoizedDraggableGroupNode = ({
         setIsMouseDown(false)
       }
       const newCoord = {
-        x: offsetX / graphPosition.scale,
-        y: offsetY / graphPosition.scale,
+        x: Number((offsetX / graphPosition.scale).toFixed(2)),
+        y: Number((offsetY / graphPosition.scale).toFixed(2)),
       }
       setCurrentCoordinates(newCoord)
       onGroupDrag(newCoord)

apps/builder/src/features/typebot/helpers/roundGroupsCoordinate.ts

@@ -0,0 +1,12 @@
+import { Typebot } from '@typebot.io/schemas'
+
+export const roundGroupsCoordinate = (typebot: Typebot): Typebot => {
+  const groups = typebot.groups.map((group) => {
+    const { x, y } = group.graphCoordinates
+    return {
+      ...group,
+      graphCoordinates: { x: Number(x.toFixed(2)), y: Number(y.toFixed(2)) },
+    }
+  })
+  return { ...typebot, groups }
+}

apps/builder/src/pages/api/typebots/[typebotId].ts

@@ -9,6 +9,7 @@ import { getTypebot } from '@/features/typebot/helpers/getTypebot'
 import { archiveResults } from '@/features/results/helpers/archiveResults'
 import { isReadTypebotForbidden } from '@/features/typebot/helpers/isReadTypebotForbidden'
 import { removeTypebotOldProperties } from '@/features/typebot/helpers/removeTypebotOldProperties'
+import { roundGroupsCoordinate } from '@/features/typebot/helpers/roundGroupsCoordinate'
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const user = await getAuthenticatedUser(req, res)
@@ -36,7 +37,9 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
       collaborators.find((c) => c.userId === user.id)?.type ===
       CollaborationType.READ
     return res.send({
-      typebot: removeTypebotOldProperties(typebot),
+      typebot: roundGroupsCoordinate(
+        removeTypebotOldProperties(typebot) as Typebot
+      ),
       publishedTypebot,
       isReadOnly,
       webhooks,