Stg

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx

@@ -70,7 +70,7 @@ const edgeTypes: EdgeTypes = {
 
 // Memoized ReactFlow props to prevent unnecessary re-renders
 const defaultEdgeOptions = { type: 'custom' }
-const snapGrid: [number, number] = [20, 20]
+const snapGrid: [number, number] = [50, 50]
 const reactFlowFitViewOptions = { padding: 0.6 } as const
 const reactFlowProOptions = { hideAttribution: true } as const
 
@@ -134,6 +134,9 @@ const WorkflowContent = React.memo(() => {
   // Get copilot cleanup function
   const copilotCleanup = useCopilotStore((state) => state.cleanup)
 
+  // Get snap to grid setting
+  const isSnapToGridEnabled = useGeneralStore((state) => state.isSnapToGridEnabled)
+
   // Handle copilot stream cleanup on page unload and component unmount
   useStreamCleanup(copilotCleanup)
 
@@ -2294,7 +2297,7 @@ const WorkflowContent = React.memo(() => {
           onNodeDrag={effectivePermissions.canEdit ? onNodeDrag : undefined}
           onNodeDragStop={effectivePermissions.canEdit ? onNodeDragStop : undefined}
           onNodeDragStart={effectivePermissions.canEdit ? onNodeDragStart : undefined}
-          snapToGrid={false}
+          snapToGrid={isSnapToGridEnabled}
           snapGrid={snapGrid}
           elevateEdgesOnSelect={true}
           // Performance optimizations

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/general/general.tsx

@@ -24,6 +24,7 @@ import { useProfilePictureUpload } from '@/app/workspace/[workspaceId]/w/compone
 import { useGeneralSettings, useUpdateGeneralSetting } from '@/hooks/queries/general-settings'
 import { useUpdateUserProfile, useUserProfile } from '@/hooks/queries/user-profile'
 import { clearUserData } from '@/stores'
+import { useGeneralStore } from '@/stores/settings/general/store'
 
 const logger = createLogger('General')
 
@@ -56,6 +57,9 @@ export function General({ onOpenChange }: GeneralProps) {
   const { data: settings, isLoading: isSettingsLoading } = useGeneralSettings()
   const updateSetting = useUpdateGeneralSetting()
 
+  const isSnapToGridEnabled = useGeneralStore((state) => state.isSnapToGridEnabled)
+  const setSettings = useGeneralStore((state) => state.setSettings)
+
   const isLoading = isProfileLoading || isSettingsLoading
 
   const isTrainingEnabled = isTruthy(getEnv('NEXT_PUBLIC_COPILOT_TRAINING_ENABLED'))
@@ -232,6 +236,10 @@ export function General({ onOpenChange }: GeneralProps) {
     }
   }
 
+  const handleSnapToGridChange = (checked: boolean) => {
+    setSettings({ isSnapToGridEnabled: checked })
+  }
+
   const handleTrainingControlsChange = async (checked: boolean) => {
     if (checked !== settings?.showTrainingControls && !updateSetting.isPending) {
       await updateSetting.mutateAsync({ key: 'showTrainingControls', value: checked })
@@ -412,6 +420,15 @@ export function General({ onOpenChange }: GeneralProps) {
         />
       </div>
 
+      <div className='flex items-center justify-between'>
+        <Label htmlFor='snap-to-grid'>Snap to grid</Label>
+        <Switch
+          id='snap-to-grid'
+          checked={isSnapToGridEnabled}
+          onCheckedChange={handleSnapToGridChange}
+        />
+      </div>
+
       <div className='flex items-center justify-between'>
         <Label htmlFor='error-notifications'>Run error notifications</Label>
         <Switch

apps/sim/stores/settings/general/store.ts

@@ -13,6 +13,7 @@ const initialState: General = {
   telemetryEnabled: true,
   isBillingUsageNotificationsEnabled: true,
   isErrorNotificationsEnabled: true,
+  isSnapToGridEnabled: true,
 }
 
 export const useGeneralStore = create<GeneralStore>()(

apps/sim/stores/settings/general/types.ts

@@ -6,6 +6,7 @@ export interface General {
   telemetryEnabled: boolean
   isBillingUsageNotificationsEnabled: boolean
   isErrorNotificationsEnabled: boolean
+  isSnapToGridEnabled: boolean
 }
 
 export interface GeneralStore extends General {