🚸 (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 +
-            (endpointHeight * graphPosition.scale) / 2 -
-            graphPosition.y) /
-          graphPosition.scale
+        ? 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 +
-            (endpointHeight * graphPosition.scale) / 2 -
-            graphPosition.y) /
-          graphPosition.scale
+        ? 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)