From 82ec7437f09b42f7ae8e07ad29e37217d5a7cf47 Mon Sep 17 00:00:00 2001 From: MH4GF Date: Fri, 20 Dec 2024 17:01:39 +0900 Subject: [PATCH] fix: Fixed problem with TableNode not being highlighted when opened from URL with query parameter --- frontend/.changeset/slimy-toys-yell.md | 6 ++++++ .../Toolbar/TidyUpButton/TidyUpButton.tsx | 6 +++--- .../ERDContent/useAutoLayout/useAutoLayout.ts | 14 +++++++------ .../ERDContent/useInitialAutoLayout.ts | 21 ++++++++++++------- 4 files changed, 30 insertions(+), 17 deletions(-) create mode 100644 frontend/.changeset/slimy-toys-yell.md diff --git a/frontend/.changeset/slimy-toys-yell.md b/frontend/.changeset/slimy-toys-yell.md new file mode 100644 index 000000000..2d9d9d7fe --- /dev/null +++ b/frontend/.changeset/slimy-toys-yell.md @@ -0,0 +1,6 @@ +--- +"@liam-hq/erd-core": patch +"@liam-hq/cli": patch +--- + +🐛 Fixed problem with TableNode not being highlighted when opened from URL with query parameter diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/TidyUpButton/TidyUpButton.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/TidyUpButton/TidyUpButton.tsx index fd21432e1..a3da9a6d5 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/TidyUpButton/TidyUpButton.tsx +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Toolbar/TidyUpButton/TidyUpButton.tsx @@ -8,7 +8,7 @@ import { type FC, useCallback } from 'react' import { useAutoLayout } from '../../useAutoLayout' export const TidyUpButton: FC = () => { - const { getNodes } = useReactFlow() + const { getNodes, getEdges } = useReactFlow() const { handleLayout } = useAutoLayout() const { showMode } = useUserEditingStore() const { cliVersion } = useCliVersion() @@ -18,8 +18,8 @@ export const TidyUpButton: FC = () => { showMode, cliVer: cliVersion.version, }) - handleLayout(getNodes()) - }, [handleLayout, showMode, getNodes, cliVersion.version]) + handleLayout(getNodes(), getEdges()) + }, [handleLayout, showMode, getNodes, getEdges, cliVersion.version]) return ( diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useAutoLayout/useAutoLayout.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useAutoLayout/useAutoLayout.ts index 360354751..abf21c20b 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useAutoLayout/useAutoLayout.ts +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useAutoLayout/useAutoLayout.ts @@ -1,20 +1,22 @@ import { useReactFlow } from '@xyflow/react' -import type { FitViewOptions, Node } from '@xyflow/react' +import type { Edge, FitViewOptions, Node } from '@xyflow/react' import { useCallback } from 'react' import { useERDContentContext } from '../ERDContentContext' import { getElkLayout } from './getElkLayout' export const useAutoLayout = () => { - const { setNodes, getEdges, fitView } = useReactFlow() + const { setNodes, fitView } = useReactFlow() const { actions: { setLoading, setInitializeComplete }, } = useERDContentContext() const handleLayout = useCallback( - async (nodes: Node[], fitViewOptions: FitViewOptions = {}) => { + async ( + nodes: Node[], + edges: Edge[], + fitViewOptions: FitViewOptions = {}, + ) => { setLoading(true) - const edges = getEdges() - const hiddenNodes: Node[] = [] const visibleNodes: Node[] = [] for (const node of nodes) { @@ -43,7 +45,7 @@ export const useAutoLayout = () => { setInitializeComplete(true) }, 0) }, - [setNodes, getEdges, fitView, setLoading, setInitializeComplete], + [setNodes, fitView, setLoading, setInitializeComplete], ) return { handleLayout } diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useInitialAutoLayout.ts b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useInitialAutoLayout.ts index 281fc90da..89ff3a7c1 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useInitialAutoLayout.ts +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useInitialAutoLayout.ts @@ -1,9 +1,10 @@ import type { QueryParam } from '@/schemas/queryParam' import { addHiddenNodeIds, updateActiveTableName } from '@/stores' import { decompressFromEncodedURIComponent } from '@/utils' -import type { Node } from '@xyflow/react' +import { type Node, useReactFlow } from '@xyflow/react' import { useEffect, useMemo } from 'react' import { useERDContentContext } from './ERDContentContext' +import { highlightNodesAndEdges } from './highlightNodesAndEdges' import { useAutoLayout } from './useAutoLayout' const getActiveTableNameFromUrl = (): string | undefined => { @@ -33,6 +34,7 @@ export const useInitialAutoLayout = (nodes: Node[]) => { .some((node) => node.measured), [nodes], ) + const { getEdges } = useReactFlow() const { state: { initializeComplete }, @@ -45,24 +47,27 @@ export const useInitialAutoLayout = (nodes: Node[]) => { return } - const tableNameFromUrl = getActiveTableNameFromUrl() - updateActiveTableName(tableNameFromUrl) + const activeTableName = getActiveTableNameFromUrl() + updateActiveTableName(activeTableName) const hiddenNodeIds = await getHiddenNodeIdsFromUrl() addHiddenNodeIds(hiddenNodeIds) - const appliedNodes = nodes.map((node) => ({ + const edges = getEdges() + const hiddenNodes = nodes.map((node) => ({ ...node, hidden: hiddenNodeIds.includes(node.id), })) + const { nodes: updatedNodes, edges: updatedEdges } = + highlightNodesAndEdges(hiddenNodes, edges, { activeTableName }) - const fitViewOptions = tableNameFromUrl - ? { maxZoom: 1, duration: 300, nodes: [{ id: tableNameFromUrl }] } + const fitViewOptions = activeTableName + ? { maxZoom: 1, duration: 300, nodes: [{ id: activeTableName }] } : undefined if (tableNodesInitialized) { - handleLayout(appliedNodes, fitViewOptions) + handleLayout(updatedNodes, updatedEdges, fitViewOptions) } } initialize() - }, [tableNodesInitialized, initializeComplete, handleLayout, nodes]) + }, [tableNodesInitialized, initializeComplete, handleLayout, nodes, getEdges]) }