added fit to view in canvas context menu

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/context-menu/pane-context-menu.tsx

@@ -23,6 +23,7 @@ export function PaneContextMenu({
   onPaste,
   onAddBlock,
   onAutoLayout,
+  onFitToView,
   onOpenLogs,
   onToggleVariables,
   onToggleChat,
@@ -115,6 +116,14 @@ export function PaneContextMenu({
           <span>Auto-layout</span>
           <span className='ml-auto opacity-70 group-hover:opacity-100'>⇧L</span>
         </PopoverItem>
+        <PopoverItem
+          onClick={() => {
+            onFitToView()
+            onClose()
+          }}
+        >
+          Fit to View
+        </PopoverItem>
 
         {/* View actions */}
         <PopoverDivider />

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/context-menu/types.ts

@@ -76,6 +76,7 @@ export interface PaneContextMenuProps {
   onPaste: () => void
   onAddBlock: () => void
   onAutoLayout: () => void
+  onFitToView: () => void
   onOpenLogs: () => void
   onToggleVariables: () => void
   onToggleChat: () => void

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

@@ -3347,6 +3347,7 @@ const WorkflowContent = React.memo(() => {
               onPaste={handleContextPaste}
               onAddBlock={handleContextAddBlock}
               onAutoLayout={handleAutoLayout}
+              onFitToView={() => fitViewToBounds({ padding: 0.1, duration: 300 })}
               onOpenLogs={handleContextOpenLogs}
               onToggleVariables={handleContextToggleVariables}
               onToggleChat={handleContextToggleChat}