feat: full screen node

frontend/src/components/nodes/FunctionNode.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef } from 'react'
+import React, { useCallback, useContext, useMemo, useRef } from 'react'
 import CodeMirror from '@uiw/react-codemirror'
 import { javascript } from '@codemirror/lang-javascript'
 import {
@@ -19,6 +19,8 @@ import { InputHandle, OutputHandle } from '../base/NodeHandles'
 import { NodeFooterEdgeIndicators } from '../base/NodeFooterEdgeIndicators'
 import { NodeHeaderTitle } from '../base/NodeHeaderTitle'
 import { NodeMenubar } from '../base/NodeMenubar'
+import FlowContext from '../../lib/flowContext'
+import { getNodeType } from '../../lib/nodeRegistry'
 import { MenubarItem, MenubarShortcut } from '../ui/menubar'
 import { Kbd } from '../ui/kbd'
 import { Code2, Variable } from 'lucide-react'
@@ -28,6 +30,9 @@ export type FunctionNodeData = { body?: string }
 type Props = AbstractNodeProps<FunctionNodeData>
 
 function FunctionNodeComponent({ id, data, width, height, selected }: Props) {
+    const flowContext = useContext(FlowContext)
+    const setFullscreenNodeId = flowContext?.setFullscreenNodeId
+    const supportsFullscreen = getNodeType('function')?.supportsFullscreen
     const bodyValue = data?.body ?? ''
     const { theme } = useTheme()
     const { nodes, sourceIds, updateData } = useAbstractNode<FunctionNodeData>(id, data ?? {})
@@ -92,7 +97,11 @@ function FunctionNodeComponent({ id, data, width, height, selected }: Props) {
 
     return (
         <BaseNode className="min-w-72 min-h-[260px]" dimensions={dimensions} resizable nodeId={id} selected={selected} handles={<><InputHandle id="in" nodeId={id} /><OutputHandle id="out" /></>}>
-            <BaseNodeHeaderRow icon={<Code2 className="size-4" />} title={<NodeHeaderTitle nodeId={id} displayTitle={id} />} />
+            <BaseNodeHeaderRow
+                icon={<Code2 className="size-4" />}
+                title={<NodeHeaderTitle nodeId={id} displayTitle={id} />}
+                onHeaderDoubleClick={supportsFullscreen && setFullscreenNodeId ? () => setFullscreenNodeId(id) : undefined}
+            />
 
             <BaseNodeContent>
                 <div className="shrink-0 w-full">