Merge pull request #726 from liam-hq/devin/1739511118-expose-reactflo…

…w-functions

refactor: expose all useReactflow functions in useCustomReactflow

.changeset/expose-reactflow-functions.md

@@ -0,0 +1,5 @@
+---
+"@liam-hq/erd-core": minor
+---
+
+feat: expose all useReactflow functions in useCustomReactflow and replace direct useReactflow usages

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableDetail/TableDetail.tsx

@@ -18,7 +18,7 @@ import {
   Table2 as Table2Icon,
   XIcon,
 } from '@liam-hq/ui'
-import { type Node, useReactFlow } from '@xyflow/react'
+import type { Node } from '@xyflow/react'
 import { type FC, useCallback } from 'react'
 import { computeAutoLayout } from '../../computeAutoLayout'
 import { Columns } from './Columns'
@@ -45,8 +45,8 @@ export const TableDetail: FC<Props> = ({ table }) => {
     showMode: 'TABLE_NAME',
   })
 
-  const { getNodes, getEdges, setNodes, setEdges } = useReactFlow()
-  const { fitView } = useCustomReactflow()
+  const { getNodes, getEdges, setNodes, setEdges, fitView } =
+    useCustomReactflow()
   const { version } = useVersion()
 
   const handleDrawerClose = () => {

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useInitialAutoLayout.ts

@@ -9,7 +9,7 @@ import {
   getHiddenNodeIdsFromUrl,
   getShowModeFromUrl,
 } from '@/utils'
-import { type Node, useReactFlow } from '@xyflow/react'
+import type { Node } from '@xyflow/react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useERDContentContext } from './ERDContentContext'
 import { computeAutoLayout } from './computeAutoLayout'
@@ -28,8 +28,7 @@ export const useInitialAutoLayout = (
         .some((node) => node.measured),
     [nodes],
   )
-  const { getEdges, setNodes, setEdges } = useReactFlow()
-  const { fitView } = useCustomReactflow()
+  const { getEdges, setNodes, setEdges, fitView } = useCustomReactflow()
   const {
     actions: { setLoading },
   } = useERDContentContext()

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useTableSelection/useTableSelection.ts

@@ -1,6 +1,5 @@
 import { useCustomReactflow } from '@/features/reactflow/hooks'
 import { updateActiveTableName } from '@/stores'
-import { useReactFlow } from '@xyflow/react'
 import { useCallback } from 'react'
 import { highlightNodesAndEdges } from '../highlightNodesAndEdges'
 
@@ -10,8 +9,8 @@ type SelectTableParams = {
 }
 
 export const useTableSelection = () => {
-  const { getNodes, getEdges, setNodes, setEdges } = useReactFlow()
-  const { fitView } = useCustomReactflow()
+  const { getNodes, getEdges, setNodes, setEdges, fitView } =
+    useCustomReactflow()
 
   const selectTable = useCallback(
     ({ tableId, shouldFitViewToActiveTable }: SelectTableParams) => {

frontend/packages/erd-core/src/components/ERDRenderer/LeftPane/TableNameMenuButton/VisibilityButton.tsx

@@ -1,8 +1,8 @@
 import { toggleLogEvent } from '@/features/gtm/utils'
+import { useCustomReactflow } from '@/features/reactflow/hooks'
 import { useVersion } from '@/providers'
 import { toggleHiddenNodeId } from '@/stores'
 import { Eye, EyeClosed, SidebarMenuAction } from '@liam-hq/ui'
-import { useReactFlow } from '@xyflow/react'
 import { type FC, type MouseEvent, useCallback } from 'react'
 import styles from './VisibilityButton.module.css'
 
@@ -12,7 +12,7 @@ type Props = {
 }
 
 export const VisibilityButton: FC<Props> = ({ tableName, hidden }) => {
-  const { updateNode } = useReactFlow()
+  const { updateNode } = useCustomReactflow()
   const { version } = useVersion()
 
   const handleClick = useCallback(

frontend/packages/erd-core/src/components/ERDRenderer/Toolbar/MobileToolbar/OpenedMobileToolbar.tsx

@@ -1,11 +1,12 @@
 import { toolbarActionLogEvent } from '@/features/gtm/utils'
+import { useCustomReactflow } from '@/features/reactflow/hooks'
 import { useVersion } from '@/providers'
 import type { ShowMode } from '@/schemas/showMode'
 import { useUserEditingStore } from '@/stores'
 import { ChevronDown } from '@liam-hq/ui'
 import { IconButton, Minus, Plus } from '@liam-hq/ui'
 import { ToolbarButton } from '@radix-ui/react-toolbar'
-import { useReactFlow, useStore } from '@xyflow/react'
+import { useStore } from '@xyflow/react'
 import { type FC, useCallback } from 'react'
 import { FitviewButton } from '../FitviewButton'
 import { TidyUpButton } from '../TidyUpButton'
@@ -20,7 +21,7 @@ export const OpenedMobileToolbar: FC<Props> = ({
   toggleOpenClose,
   toggleShowModeMenu,
 }) => {
-  const { zoomIn, zoomOut } = useReactFlow()
+  const { zoomIn, zoomOut } = useCustomReactflow()
   const zoomLevel = useStore((store) => store.transform[2])
   const { showMode } = useUserEditingStore()
   const { version } = useVersion()

frontend/packages/erd-core/src/components/ERDRenderer/Toolbar/ZoomControls/ZoomControls.tsx

@@ -1,15 +1,16 @@
 import { toolbarActionLogEvent } from '@/features/gtm/utils'
+import { useCustomReactflow } from '@/features/reactflow/hooks'
 import { useVersion } from '@/providers'
 import { useUserEditingStore } from '@/stores'
 import { IconButton, Minus, Plus } from '@liam-hq/ui'
 import { ToolbarButton } from '@radix-ui/react-toolbar'
-import { useReactFlow, useStore } from '@xyflow/react'
+import { useStore } from '@xyflow/react'
 import { type FC, useCallback } from 'react'
 import styles from './ZoomControls.module.css'
 
 export const ZoomControls: FC = () => {
   const zoomLevel = useStore((store) => store.transform[2])
-  const { zoomIn, zoomOut } = useReactFlow()
+  const { zoomIn, zoomOut } = useCustomReactflow()
   const { showMode } = useUserEditingStore()
   const { version } = useVersion()
 

frontend/packages/erd-core/src/features/reactflow/hooks/useCustomReactflow.ts

@@ -3,7 +3,8 @@ import { useCallback } from 'react'
 import { MAX_ZOOM, MIN_ZOOM } from '../constants'
 
 export const useCustomReactflow = () => {
-  const { fitView: primitiveFitView } = useReactFlow()
+  const reactFlowInstance = useReactFlow()
+  const { fitView: primitiveFitView, ...restFunctions } = reactFlowInstance
 
   const fitView = useCallback(
     async (options?: FitViewOptions) => {
@@ -23,6 +24,7 @@ export const useCustomReactflow = () => {
   )
 
   return {
+    ...restFunctions,
     fitView,
   }
 }