feat(canvas): add a setting to turn off auto-focus when clicking blocks

Clicking a block animates the camera to center it, which zooms in far
enough that you lose sight of the rest of the workflow. Add an
"Auto-focus on click" preference (on by default, so existing behavior is
unchanged) that keeps the camera still on click.

Also re-record the auto-connect and canvas-error-notification tooltip
previews and re-encode all three at a smaller size.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx

@@ -217,6 +217,12 @@ export function General() {
     }
   }
 
+  const handleAutoFocusOnClickChange = async (checked: boolean) => {
+    if (checked !== settings?.autoFocusOnClick && !updateSetting.isPending) {
+      await updateSetting.mutateAsync({ key: 'autoFocusOnClick', value: checked })
+    }
+  }
+
   const handleSnapToGridChange = async (value: string) => {
     const newValue = Number.parseInt(value, 10)
     if (newValue !== settings?.snapToGridSize && !updateSetting.isPending) {
@@ -457,6 +463,36 @@ export function General() {
               />
             </div>
 
+            <div className='flex items-center justify-between'>
+              <div className='flex items-center gap-1.5'>
+                <Label htmlFor='auto-focus-on-click'>Auto-focus on click</Label>
+                <Tooltip.Root>
+                  <Tooltip.Trigger asChild>
+                    <button
+                      type='button'
+                      aria-label='About auto-focus on click'
+                      className='inline-flex cursor-default text-[var(--text-muted)]'
+                    >
+                      <CircleInfo className='size-[14px]' />
+                    </button>
+                  </Tooltip.Trigger>
+                  <Tooltip.Content side='bottom' align='start'>
+                    <p>Center the canvas on a block when you click it</p>
+                    <Tooltip.Preview
+                      src='/tooltips/auto-focus-on-click.mp4'
+                      alt='Auto-focus on click example'
+                      loop={true}
+                    />
+                  </Tooltip.Content>
+                </Tooltip.Root>
+              </div>
+              <Switch
+                id='auto-focus-on-click'
+                checked={settings?.autoFocusOnClick ?? true}
+                onCheckedChange={handleAutoFocusOnClickChange}
+              />
+            </div>
+
             <div className='flex items-center justify-between'>
               <div className='flex items-center gap-1.5'>
                 <Label htmlFor='error-notifications'>Canvas error notifications</Label>

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

@@ -113,7 +113,11 @@ import { isAnnotationOnlyBlock } from '@/executor/constants'
 import { useCustomBlocks } from '@/hooks/queries/custom-blocks'
 import { useWorkspaceEnvironment } from '@/hooks/queries/environment'
 import { useFolderMap } from '@/hooks/queries/folders'
-import { useAutoConnect, useSnapToGridSize } from '@/hooks/queries/general-settings'
+import {
+  useAutoConnect,
+  useAutoFocusOnClick,
+  useSnapToGridSize,
+} from '@/hooks/queries/general-settings'
 import {
   findLockedAncestorFolder,
   isFolderOrAncestorLocked,
@@ -404,6 +408,8 @@ const WorkflowContent = React.memo(
     const autoConnectRef = useRef(isAutoConnectEnabled)
     autoConnectRef.current = isAutoConnectEnabled
 
+    const isAutoFocusOnClickEnabled = useAutoFocusOnClick()
+
     // Panel open states for context menu
     const isVariablesOpen = useVariablesModalStore((state) => state.isOpen)
     const isChatOpen = useChatStore((state) => state.isChatOpen)
@@ -4320,12 +4326,14 @@ const WorkflowContent = React.memo(
         /**
          * Focus the clicked block: animate the camera so the card centers in
          * the canvas frame. Plain clicks focus both regular cards and subflow
-         * containers; multi-select keeps the camera still.
+         * containers; multi-select keeps the camera still. Users who would
+         * rather keep their own framing turn this off in general settings.
          * onNodeClick never fires after a drag.
          */
         if (
           !embedded &&
           !isMultiSelect &&
+          isAutoFocusOnClickEnabled &&
           (node.type === 'workflowBlock' ||
             node.type === 'noteBlock' ||
             node.type === 'subflowNode')
@@ -4334,7 +4342,15 @@ const WorkflowContent = React.memo(
           focusBlockInView(node)
         }
       },
-      [activeWorkflowId, blocks, getNodes, embedded, focusBlockInView, workflowIdParam]
+      [
+        activeWorkflowId,
+        blocks,
+        getNodes,
+        embedded,
+        focusBlockInView,
+        isAutoFocusOnClickEnabled,
+        workflowIdParam,
+      ]
     )
 
     /**

apps/sim/hooks/queries/general-settings.ts

@@ -36,6 +36,8 @@ export interface GeneralSettings {
   errorNotificationsEnabled: boolean
   snapToGridSize: number
   showActionBar: boolean
+  /** Whether clicking a block on the canvas animates the camera to center it. */
+  autoFocusOnClick: boolean
   /** Copilot tool ids the user picked "always allow" for. */
   copilotAutoAllowedTools: string[]
   /** Saved IANA timezone, or `null` when unset (the app falls back to the browser zone). */
@@ -57,6 +59,7 @@ export function mapGeneralSettingsResponse(data: UserSettingsApi): GeneralSettin
     errorNotificationsEnabled: data.errorNotificationsEnabled,
     snapToGridSize: data.snapToGridSize,
     showActionBar: data.showActionBar,
+    autoFocusOnClick: data.autoFocusOnClick,
     copilotAutoAllowedTools: data.copilotAutoAllowedTools ?? [],
     timezone: data.timezone ?? null,
   }
@@ -122,6 +125,15 @@ export function useShowActionBar(): boolean {
   return data?.showActionBar ?? true
 }
 
+/**
+ * Whether the canvas camera animates to center a block when it is clicked or
+ * reached with arrow-key navigation.
+ */
+export function useAutoFocusOnClick(): boolean {
+  const { data } = useGeneralSettings()
+  return data?.autoFocusOnClick ?? true
+}
+
 export function useBillingUsageNotifications(): boolean {
   const { data } = useGeneralSettings()
   return data?.billingUsageNotificationsEnabled ?? true

apps/sim/lib/api/contracts/user.ts

@@ -90,6 +90,8 @@ export const userSettingsSchema = z.object({
   errorNotificationsEnabled: z.boolean().default(true),
   snapToGridSize: z.number().min(0).max(50).default(0),
   showActionBar: z.boolean().default(true),
+  /** Whether clicking a block on the canvas animates the camera to center it. */
+  autoFocusOnClick: z.boolean().default(true),
   /** Copilot tool ids the user chose "always allow" for, so they are never prompted for them again. */
   copilotAutoAllowedTools: z.array(z.string()).default([]),
   /** IANA timezone for scheduling; `null` means the client falls back to the browser-detected zone. */
@@ -110,6 +112,7 @@ export const updateUserSettingsBodySchema = z.object({
   errorNotificationsEnabled: z.boolean().optional(),
   snapToGridSize: z.number().min(0).max(50).optional(),
   showActionBar: z.boolean().optional(),
+  autoFocusOnClick: z.boolean().optional(),
   copilotAutoAllowedTools: z.array(z.string()).optional(),
   /** IANA timezone; explicit `null` resets to the browser-detected zone. */
   timezone: ianaTimezoneSchema.nullable().optional(),

apps/sim/lib/users/queries.ts

@@ -24,6 +24,7 @@ export const defaultUserSettings: UserSettingsApi = {
   errorNotificationsEnabled: true,
   snapToGridSize: 0,
   showActionBar: true,
+  autoFocusOnClick: true,
   copilotAutoAllowedTools: [],
   timezone: null,
   lastActiveWorkspaceId: null,
@@ -50,6 +51,7 @@ export async function getUserSettings(userId: string | null): Promise<UserSettin
       errorNotificationsEnabled: settings.errorNotificationsEnabled,
       snapToGridSize: settings.snapToGridSize,
       showActionBar: settings.showActionBar,
+      autoFocusOnClick: settings.autoFocusOnClick,
       copilotAutoAllowedTools: settings.copilotAutoAllowedTools,
       timezone: settings.timezone,
       lastActiveWorkspaceId: settings.lastActiveWorkspaceId,
@@ -76,6 +78,7 @@ export async function getUserSettings(userId: string | null): Promise<UserSettin
     errorNotificationsEnabled: userSettings.errorNotificationsEnabled ?? true,
     snapToGridSize: userSettings.snapToGridSize ?? 0,
     showActionBar: userSettings.showActionBar ?? true,
+    autoFocusOnClick: userSettings.autoFocusOnClick ?? true,
     copilotAutoAllowedTools: normalizeStringArray(userSettings.copilotAutoAllowedTools),
     timezone: userSettings.timezone ?? null,
     lastActiveWorkspaceId: userSettings.lastActiveWorkspaceId ?? null,

apps/sim/public/tooltips/auto-connect-on-drop.mp4

@@ -0,0 +1,2 @@
+-- migration-safe: an additive column with a non-null default, so old and new app versions read and write these rows throughout the deploy. Defaulting to true preserves the camera-follows-click behavior every released version already ships.
+ALTER TABLE "settings" ADD COLUMN "auto_focus_on_click" boolean DEFAULT true NOT NULL;