github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add useZoomToNode hook

Browse Source
This commit is contained in:
psychedelicious
2025-02-20 16:00:50 +10:00
parent d72840620a
commit 28027702dd
2 changed files with 18 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
View File

@@ -1,9 +1,10 @@
import type { ChakraProps, SystemStyleObject } from '@invoke-ai/ui-library';
import { Box, useGlobalMenuClose } from '@invoke-ai/ui-library';
import { type NodeChange, useReactFlow } from '@xyflow/react';
import type { NodeChange } from '@xyflow/react';
import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHooks';
import { useMouseOverNode } from 'features/nodes/hooks/useMouseOverNode';
import { useNodeExecutionState } from 'features/nodes/hooks/useNodeExecutionState';
import { useZoomToNode } from 'features/nodes/hooks/useZoomToNode';
import { nodesChanged } from 'features/nodes/store/nodesSlice';
import { selectNodes } from 'features/nodes/store/selectors';
import { selectNodeOpacity } from 'features/nodes/store/workflowSettingsSlice';
@@ -84,7 +85,7 @@ const NodeWrapper = (props: NodeWrapperProps) => {
const { nodeId, width, children, selected } = props;
const store = useAppStore();
const { isMouseOverNode, handleMouseOut, handleMouseOver } = useMouseOverNode(nodeId);
const flow = useReactFlow();
const zoomToNode = useZoomToNode();
const executionState = useNodeExecutionState(nodeId);
const isInProgress = executionState?.status === zNodeStatus.enum.IN_PROGRESS;
@@ -133,9 +134,9 @@ const NodeWrapper = (props: NodeWrapperProps) => {
// This target is marked as not fitting the view on double click
return;
}
flow.fitView({ duration: 300, maxZoom: 1.5, nodes: [{ id: nodeId }] });
zoomToNode(nodeId);
},
[flow, nodeId]
[nodeId, zoomToNode]
);
return (

13
invokeai/frontend/web/src/features/nodes/hooks/useZoomToNode.ts Normal file
View File

@@ -0,0 +1,13 @@
import { useReactFlow } from '@xyflow/react';
import { useCallback } from 'react';
export const useZoomToNode = () => {
const flow = useReactFlow();
const zoomToNode = useCallback(
(nodeId: string) => {
flow.fitView({ duration: 300, maxZoom: 1.5, nodes: [{ id: nodeId }] });
},
[flow]
);
return zoomToNode;
};