diff --git a/src/components/__tests__/SplitGridNode.test.tsx b/src/components/__tests__/SplitGridNode.test.tsx index d6f83dd4..7d02f29a 100644 --- a/src/components/__tests__/SplitGridNode.test.tsx +++ b/src/components/__tests__/SplitGridNode.test.tsx @@ -51,6 +51,8 @@ describe("SplitGridNode", () => { currentNodeIds: [], groups: {}, nodes: [], + edges: [], + getConnectedInputs: vi.fn(() => ({ images: [], videos: [], audio: [], model3d: null, text: null, dynamicInputs: {}, easeCurve: null })), getNodesWithComments: vi.fn(() => []), markCommentViewed: vi.fn(), setNavigationTarget: vi.fn(), @@ -273,6 +275,8 @@ describe("SplitGridNode", () => { currentNodeIds: [], groups: {}, nodes: [], + edges: [], + getConnectedInputs: vi.fn(() => ({ images: [], videos: [], audio: [], model3d: null, text: null, dynamicInputs: {}, easeCurve: null })), getNodesWithComments: vi.fn(() => []), markCommentViewed: vi.fn(), setNavigationTarget: vi.fn(), diff --git a/src/components/nodes/SplitGridNode.tsx b/src/components/nodes/SplitGridNode.tsx index 46c8b5b1..a0924fbc 100644 --- a/src/components/nodes/SplitGridNode.tsx +++ b/src/components/nodes/SplitGridNode.tsx @@ -1,6 +1,6 @@ "use client"; -import { useCallback, useState, useEffect } from "react"; +import { useCallback, useState, useEffect, useMemo } from "react"; import { Handle, Position, NodeProps, Node } from "@xyflow/react"; import { BaseNode } from "./BaseNode"; import { useWorkflowStore } from "@/store/workflowStore"; @@ -14,8 +14,29 @@ export function SplitGridNode({ id, data, selected }: NodeProps state.updateNodeData); const regenerateNode = useWorkflowStore((state) => state.regenerateNode); const isRunning = useWorkflowStore((state) => state.isRunning); + const getConnectedInputs = useWorkflowStore((state) => state.getConnectedInputs); + const edges = useWorkflowStore((state) => state.edges); + const nodes = useWorkflowStore((state) => state.nodes); const [showSettings, setShowSettings] = useState(false); + // Reactively track the connected source image + const hasIncomingImageConnection = useMemo(() => { + return edges.some((edge) => edge.target === id && edge.targetHandle === "image"); + }, [edges, id]); + + const connectedSourceImage = useMemo(() => { + if (!hasIncomingImageConnection) return null; + const { images } = getConnectedInputs(id); + return images[0] || null; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [hasIncomingImageConnection, id, getConnectedInputs, nodes]); + + useEffect(() => { + if (connectedSourceImage !== nodeData.sourceImage) { + updateNodeData(id, { sourceImage: connectedSourceImage }); + } + }, [connectedSourceImage, id, updateNodeData, nodeData.sourceImage]); + // Show settings modal on first creation (when not configured) useEffect(() => { if (!nodeData.isConfigured && (!nodeData.childNodeIds || nodeData.childNodeIds.length === 0)) { diff --git a/src/store/execution/splitGridExecutor.ts b/src/store/execution/splitGridExecutor.ts index 66b8acde..bf9e3ba5 100644 --- a/src/store/execution/splitGridExecutor.ts +++ b/src/store/execution/splitGridExecutor.ts @@ -11,8 +11,8 @@ import type { NodeExecutionContext } from "./types"; export async function executeSplitGrid(ctx: NodeExecutionContext): Promise { const { node, getConnectedInputs, updateNodeData } = ctx; - const { images } = getConnectedInputs(node.id); - const sourceImage = images[0] || null; + const connectedInputs = getConnectedInputs(node.id); + const sourceImage = connectedInputs.images[0] || null; if (!sourceImage) { updateNodeData(node.id, {