Consolidate into hook

Sg312 · Sg312 · commit 0429636a070f · 2025-11-11T13:04:45.000-08:00
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
@@ -1,23 +1,20 @@
-import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
+import { memo, useCallback, useMemo } from 'react'
 import ReactMarkdown from 'react-markdown'
-import { type NodeProps, useUpdateNodeInternals } from 'reactflow'
+import type { NodeProps } from 'reactflow'
 import remarkGfm from 'remark-gfm'
 import { cn } from '@/lib/utils'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { usePanelEditorStore } from '@/stores/panel-new/editor/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
-import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import { useCurrentWorkflow } from '../../hooks'
+import { useBlockDimensions } from '../../hooks/use-block-dimensions'
 import { ActionBar } from '../workflow-block/components'
 import { useBlockState } from '../workflow-block/hooks'
 import type { WorkflowBlockProps } from '../workflow-block/types'
 
 interface NoteBlockNodeData extends WorkflowBlockProps {}
 
-const NOTE_MIN_WIDTH = 220
-const NOTE_MIN_HEIGHT = 140
-
 /**
  * Extract string value from subblock value object or primitive
  */
@@ -94,10 +91,6 @@ const NoteMarkdown = memo(function NoteMarkdown({ content }: { content: string }
 
 export const NoteBlock = memo(function NoteBlock({ id, data }: NodeProps<NoteBlockNodeData>) {
   const { type, config, name } = data
-  const containerRef = useRef<HTMLDivElement>(null)
-  const sizeRef = useRef<{ width: number; height: number } | null>(null)
-  const updateNodeInternals = useUpdateNodeInternals()
-  const updateBlockLayoutMetrics = useWorkflowStore((state) => state.updateBlockLayoutMetrics)
 
   const setCurrentBlockId = usePanelEditorStore((state) => state.setCurrentBlockId)
   const currentBlockId = usePanelEditorStore((state) => state.currentBlockId)
@@ -146,28 +139,27 @@ export const NoteBlock = memo(function NoteBlock({ id, data }: NodeProps<NoteBlo
 
   const userPermissions = useUserPermissionsContext()
 
-  useEffect(() => {
-    const element = containerRef.current
-    if (!element) return
-
-    const observer = new ResizeObserver((entries) => {
-      const entry = entries[0]
-      if (!entry) return
-
-      const width = Math.max(Math.round(entry.contentRect.width), NOTE_MIN_WIDTH)
-      const height = Math.max(Math.round(entry.contentRect.height), NOTE_MIN_HEIGHT)
-
-      const previous = sizeRef.current
-      if (!previous || previous.width !== width || previous.height !== height) {
-        sizeRef.current = { width, height }
-        updateBlockLayoutMetrics(id, { width, height })
-        updateNodeInternals(id)
-      }
-    })
-
-    observer.observe(element)
-    return () => observer.disconnect()
-  }, [id, updateBlockLayoutMetrics, updateNodeInternals])
+  /**
+   * Calculate deterministic dimensions based on content structure.
+   * Uses fixed width and computed height to avoid ResizeObserver jitter.
+   */
+  useBlockDimensions({
+    blockId: id,
+    calculateDimensions: () => {
+      const FIXED_WIDTH = 250
+      const HEADER_HEIGHT = 40
+      const CONTENT_PADDING = 14
+      const MIN_CONTENT_HEIGHT = 20
+      const BASE_CONTENT_HEIGHT = 60
+
+      // Use minimum height for empty notes, base height for content
+      const contentHeight = isEmpty ? MIN_CONTENT_HEIGHT : BASE_CONTENT_HEIGHT
+      const calculatedHeight = HEADER_HEIGHT + CONTENT_PADDING + contentHeight
+
+      return { width: FIXED_WIDTH, height: calculatedHeight }
+    },
+    dependencies: [isEmpty],
+  })
 
   const hasRing =
     isActive || isFocused || diffStatus === 'new' || diffStatus === 'edited' || isDeletedBlock
@@ -183,7 +175,6 @@ export const NoteBlock = memo(function NoteBlock({ id, data }: NodeProps<NoteBlo
   return (
     <div className='group relative'>
       <div
-        ref={containerRef}
         className={cn(
           'relative z-[20] w-[250px] cursor-default select-none rounded-[8px] bg-[#232323]'
         )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
@@ -1,6 +1,6 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useParams } from 'next/navigation'
-import { Handle, type NodeProps, Position, useUpdateNodeInternals } from 'reactflow'
+import { Handle, type NodeProps, Position } from 'reactflow'
 import { Badge } from '@/components/emcn/components/badge/badge'
 import { Tooltip } from '@/components/emcn/components/tooltip/tooltip'
 import { getEnv, isTruthy } from '@/lib/env'
@@ -14,8 +14,7 @@ import { useDisplayName } from '@/hooks/use-display-name'
 import { usePanelEditorStore } from '@/stores/panel-new/editor/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
-import { useWorkflowStore } from '@/stores/workflows/workflow/store'
-import { useCurrentWorkflow } from '../../hooks'
+import { useBlockDimensions, useCurrentWorkflow } from '../../hooks'
 import { ActionBar, Connections } from './components'
 import {
   useBlockProperties,
@@ -267,7 +266,6 @@ export const WorkflowBlock = memo(function WorkflowBlock({
   const { type, config, name, isPending } = data
 
   const contentRef = useRef<HTMLDivElement>(null)
-  const updateNodeInternals = useUpdateNodeInternals()
 
   const params = useParams()
   const currentWorkflowId = params.workflowId as string
@@ -368,7 +366,6 @@ export const WorkflowBlock = memo(function WorkflowBlock({
     }
   }, [id, collaborativeSetSubblockValue])
 
-  const updateBlockLayoutMetrics = useWorkflowStore((state) => state.updateBlockLayoutMetrics)
   const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
   const setCurrentBlockId = usePanelEditorStore((state) => state.setCurrentBlockId)
   const currentBlockId = usePanelEditorStore((state) => state.currentBlockId)
@@ -378,14 +375,6 @@ export const WorkflowBlock = memo(function WorkflowBlock({
   const isStarterBlock = type === 'starter'
   const isWebhookTriggerBlock = type === 'webhook' || type === 'generic_webhook'
 
-  /**
-   * Update node internals when handles change to ensure ReactFlow
-   * correctly calculates connection points.
-   */
-  useEffect(() => {
-    updateNodeInternals(id)
-  }, [id, horizontalHandles, updateNodeInternals])
-
   /**
    * Subscribe to this block's subblock values to track changes for conditional rendering
    * of subblocks based on their conditions.
@@ -605,51 +594,43 @@ export const WorkflowBlock = memo(function WorkflowBlock({
    *
    * Width is a fixed 250px for workflow blocks.
    */
-  useEffect(() => {
-    // Only workflow blocks (non-subflow) render here, width is constant
-    const FIXED_WIDTH = 250
-    const HEADER_HEIGHT = 40
-    const CONTENT_PADDING = 16
-    const ROW_HEIGHT = 29
-
-    const shouldShowDefaultHandles =
-      config.category !== 'triggers' && type !== 'starter' && !displayTriggerMode
-    const hasContentBelowHeader = subBlockRows.length > 0 || shouldShowDefaultHandles
-
-    // Count rows based on block type and whether default handles section is shown
-    const defaultHandlesRow = shouldShowDefaultHandles ? 1 : 0
-
-    let rowsCount = 0
-    if (type === 'condition') {
-      rowsCount = conditionRows.length + defaultHandlesRow
-    } else {
-      const subblockRowCount = subBlockRows.reduce((acc, row) => acc + row.length, 0)
-      rowsCount = subblockRowCount + defaultHandlesRow
-    }
-
-    const contentHeight = hasContentBelowHeader ? CONTENT_PADDING + rowsCount * ROW_HEIGHT : 0
-    const calculatedHeight = Math.max(HEADER_HEIGHT + contentHeight, 100)
+  useBlockDimensions({
+    blockId: id,
+    calculateDimensions: () => {
+      const FIXED_WIDTH = 250
+      const HEADER_HEIGHT = 40
+      const CONTENT_PADDING = 16
+      const ROW_HEIGHT = 29
+
+      const shouldShowDefaultHandles =
+        config.category !== 'triggers' && type !== 'starter' && !displayTriggerMode
+      const hasContentBelowHeader = subBlockRows.length > 0 || shouldShowDefaultHandles
+
+      // Count rows based on block type and whether default handles section is shown
+      const defaultHandlesRow = shouldShowDefaultHandles ? 1 : 0
+
+      let rowsCount = 0
+      if (type === 'condition') {
+        rowsCount = conditionRows.length + defaultHandlesRow
+      } else {
+        const subblockRowCount = subBlockRows.reduce((acc, row) => acc + row.length, 0)
+        rowsCount = subblockRowCount + defaultHandlesRow
+      }
 
-    const prevHeight =
-      typeof currentStoreBlock?.height === 'number' ? currentStoreBlock.height : undefined
-    const prevWidth = 250 // fixed across the app for workflow blocks
+      const contentHeight = hasContentBelowHeader ? CONTENT_PADDING + rowsCount * ROW_HEIGHT : 0
+      const calculatedHeight = Math.max(HEADER_HEIGHT + contentHeight, 100)
 
-    if (prevHeight !== calculatedHeight || prevWidth !== FIXED_WIDTH) {
-      updateBlockLayoutMetrics(id, { width: FIXED_WIDTH, height: calculatedHeight })
-      updateNodeInternals(id)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    id,
-    type,
-    config.category,
-    displayTriggerMode,
-    subBlockRows.length,
-    conditionRows.length,
-    currentStoreBlock?.height,
-    updateBlockLayoutMetrics,
-    updateNodeInternals,
-  ])
+      return { width: FIXED_WIDTH, height: calculatedHeight }
+    },
+    dependencies: [
+      type,
+      config.category,
+      displayTriggerMode,
+      subBlockRows.length,
+      conditionRows.length,
+      horizontalHandles,
+    ],
+  })
 
   const showWebhookIndicator = (isStarterBlock || isWebhookTriggerBlock) && isWebhookConfigured
   const shouldShowScheduleBadge =
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/index.ts
@@ -1,4 +1,5 @@
 export { useAutoLayout } from './use-auto-layout'
+export { useBlockDimensions } from './use-block-dimensions'
 export { type CurrentWorkflow, useCurrentWorkflow } from './use-current-workflow'
 export { useNodeUtilities } from './use-node-utilities'
 export { useScrollManagement } from './use-scroll-management'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-dimensions.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-dimensions.ts
@@ -0,0 +1,45 @@
+import { useEffect, useRef } from 'react'
+import { useUpdateNodeInternals } from 'reactflow'
+import { useWorkflowStore } from '@/stores/workflows/workflow/store'
+
+interface BlockDimensions {
+  width: number
+  height: number
+}
+
+interface UseBlockDimensionsOptions {
+  blockId: string
+  calculateDimensions: () => BlockDimensions
+  dependencies: React.DependencyList
+}
+
+/**
+ * Hook to manage deterministic block dimensions without ResizeObserver.
+ * Calculates dimensions based on content structure and updates the store.
+ *
+ * @param options - Configuration for dimension calculation
+ * @param options.blockId - The ID of the block
+ * @param options.calculateDimensions - Function that returns current dimensions
+ * @param options.dependencies - Dependencies that trigger recalculation
+ */
+export function useBlockDimensions({
+  blockId,
+  calculateDimensions,
+  dependencies,
+}: UseBlockDimensionsOptions) {
+  const updateNodeInternals = useUpdateNodeInternals()
+  const updateBlockLayoutMetrics = useWorkflowStore((state) => state.updateBlockLayoutMetrics)
+  const previousDimensions = useRef<BlockDimensions | null>(null)
+
+  useEffect(() => {
+    const dimensions = calculateDimensions()
+    const previous = previousDimensions.current
+
+    if (!previous || previous.width !== dimensions.width || previous.height !== dimensions.height) {
+      previousDimensions.current = dimensions
+      updateBlockLayoutMetrics(blockId, dimensions)
+      updateNodeInternals(blockId)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [blockId, updateBlockLayoutMetrics, updateNodeInternals, ...dependencies])
+}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`export { useAutoLayout } from './use-auto-layout'`
	`2`	`+export { useBlockDimensions } from './use-block-dimensions'`
`2`	`3`	`export { type CurrentWorkflow, useCurrentWorkflow } from './use-current-workflow'`
`3`	`4`	`export { useNodeUtilities } from './use-node-utilities'`
`4`	`5`	`export { useScrollManagement } from './use-scroll-management'`