Browse Source
Zundo-based undo/redo was causing image flickering, failing to restore deleted nodes, and creating memory issues from large state snapshots. Removes the entire workflow undo/redo system while keeping the independent annotation canvas undo/redo intact. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>handoff-20260429-1057
shrimbly
5 months ago
6 changed files with 2 additions and 841 deletions
@ -1,614 +0,0 @@ |
|||||
import { describe, it, expect, vi, beforeEach } from "vitest"; |
|
||||
import { stripBinaryData, undoStateEquality, partializeForUndo, BINARY_TO_REF, undoWithMedia, redoWithMedia } from "../undoUtils"; |
|
||||
import type { WorkflowNode, WorkflowEdge, NodeGroup } from "@/types"; |
|
||||
import type { EdgeStyle } from "../workflowStore"; |
|
||||
|
|
||||
// Mock imageStorage to avoid real file I/O
|
|
||||
vi.mock("@/utils/imageStorage", () => ({ |
|
||||
hydrateWorkflowImages: vi.fn(async (workflow: any) => workflow), |
|
||||
})); |
|
||||
|
|
||||
describe("undoUtils", () => { |
|
||||
describe("BINARY_TO_REF", () => { |
|
||||
it("maps all ref-backed binary fields", () => { |
|
||||
expect(BINARY_TO_REF).toEqual({ |
|
||||
image: "imageRef", |
|
||||
outputImage: "outputImageRef", |
|
||||
sourceImage: "sourceImageRef", |
|
||||
inputImages: "inputImageRefs", |
|
||||
outputVideo: "outputVideoRef", |
|
||||
outputAudio: "outputAudioRef", |
|
||||
}); |
|
||||
}); |
|
||||
|
|
||||
it("does not include fields without refs (imageA, imageB, etc.)", () => { |
|
||||
const noRefFields = ["imageA", "imageB", "capturedImage", "video", "images", "audioFile", "glbUrl", "output3dUrl"]; |
|
||||
for (const field of noRefFields) { |
|
||||
expect(BINARY_TO_REF).not.toHaveProperty(field); |
|
||||
} |
|
||||
}); |
|
||||
}); |
|
||||
|
|
||||
describe("stripBinaryData", () => { |
|
||||
it("strips binary fields that have corresponding refs", () => { |
|
||||
const nodes: WorkflowNode[] = [ |
|
||||
{ |
|
||||
id: "node-1", |
|
||||
type: "imageInput", |
|
||||
position: { x: 0, y: 0 }, |
|
||||
data: { |
|
||||
image: "data:image/png;base64,ABC123", |
|
||||
imageRef: "img_001", |
|
||||
prompt: "test prompt", |
|
||||
}, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const stripped = stripBinaryData(nodes); |
|
||||
|
|
||||
expect(stripped[0].data).not.toHaveProperty("image"); |
|
||||
expect(stripped[0].data).toHaveProperty("imageRef", "img_001"); |
|
||||
expect(stripped[0].data).toHaveProperty("prompt", "test prompt"); |
|
||||
}); |
|
||||
|
|
||||
it("keeps binary fields that have NO refs", () => { |
|
||||
const nodes: WorkflowNode[] = [ |
|
||||
{ |
|
||||
id: "node-1", |
|
||||
type: "imageInput", |
|
||||
position: { x: 0, y: 0 }, |
|
||||
data: { |
|
||||
image: "data:image/png;base64,ABC123", |
|
||||
// No imageRef → keep image in snapshot
|
|
||||
prompt: "test prompt", |
|
||||
}, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const stripped = stripBinaryData(nodes); |
|
||||
|
|
||||
expect(stripped[0].data).toHaveProperty("image", "data:image/png;base64,ABC123"); |
|
||||
expect(stripped[0].data).toHaveProperty("prompt", "test prompt"); |
|
||||
}); |
|
||||
|
|
||||
it("strips outputImage and sourceImage when refs exist", () => { |
|
||||
const nodes: WorkflowNode[] = [ |
|
||||
{ |
|
||||
id: "node-1", |
|
||||
type: "annotation", |
|
||||
position: { x: 0, y: 0 }, |
|
||||
data: { |
|
||||
outputImage: "data:image/png;base64,OUT123", |
|
||||
outputImageRef: "img_out_001", |
|
||||
sourceImage: "data:image/png;base64,SRC123", |
|
||||
sourceImageRef: "img_src_001", |
|
||||
prompt: "test", |
|
||||
}, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const stripped = stripBinaryData(nodes); |
|
||||
|
|
||||
expect(stripped[0].data).not.toHaveProperty("outputImage"); |
|
||||
expect(stripped[0].data).not.toHaveProperty("sourceImage"); |
|
||||
expect(stripped[0].data).toHaveProperty("outputImageRef", "img_out_001"); |
|
||||
expect(stripped[0].data).toHaveProperty("sourceImageRef", "img_src_001"); |
|
||||
}); |
|
||||
|
|
||||
it("strips outputVideo when ref exists", () => { |
|
||||
const nodes = [ |
|
||||
{ |
|
||||
id: "node-1", |
|
||||
type: "generateVideo", |
|
||||
position: { x: 0, y: 0 }, |
|
||||
data: { |
|
||||
outputVideo: "data:video/mp4;base64,VIDEO123", |
|
||||
outputVideoRef: "vid_001", |
|
||||
model: "test-model", |
|
||||
}, |
|
||||
}, |
|
||||
] as unknown as WorkflowNode[]; |
|
||||
|
|
||||
const stripped = stripBinaryData(nodes); |
|
||||
|
|
||||
expect(stripped[0].data).not.toHaveProperty("outputVideo"); |
|
||||
expect(stripped[0].data).toHaveProperty("outputVideoRef", "vid_001"); |
|
||||
expect(stripped[0].data).toHaveProperty("model", "test-model"); |
|
||||
}); |
|
||||
|
|
||||
it("strips outputAudio when ref exists", () => { |
|
||||
const nodes = [ |
|
||||
{ |
|
||||
id: "node-1", |
|
||||
type: "generateAudio", |
|
||||
position: { x: 0, y: 0 }, |
|
||||
data: { |
|
||||
outputAudio: "data:audio/mp3;base64,AUDIO456", |
|
||||
outputAudioRef: "aud_001", |
|
||||
fileName: "test.mp3", |
|
||||
}, |
|
||||
}, |
|
||||
] as unknown as WorkflowNode[]; |
|
||||
|
|
||||
const stripped = stripBinaryData(nodes); |
|
||||
|
|
||||
expect(stripped[0].data).not.toHaveProperty("outputAudio"); |
|
||||
expect(stripped[0].data).toHaveProperty("outputAudioRef", "aud_001"); |
|
||||
expect(stripped[0].data).toHaveProperty("fileName", "test.mp3"); |
|
||||
}); |
|
||||
|
|
||||
it("keeps fields without refs: imageA, imageB, capturedImage, video, glbUrl, etc.", () => { |
|
||||
const nodes: WorkflowNode[] = [ |
|
||||
{ |
|
||||
id: "node-1", |
|
||||
type: "imageCompare", |
|
||||
position: { x: 0, y: 0 }, |
|
||||
data: { |
|
||||
imageA: "data:image/png;base64,IMGA", |
|
||||
imageB: "data:image/png;base64,IMGB", |
|
||||
capturedImage: "data:image/png;base64,CAP", |
|
||||
video: "data:video/mp4;base64,VID", |
|
||||
glbUrl: "data:model/gltf-binary;base64,GLB", |
|
||||
output3dUrl: "data:model/gltf-binary;base64,GLB2", |
|
||||
audioFile: "data:audio/mp3;base64,AUD", |
|
||||
images: ["data:image/png;base64,IMG1"], |
|
||||
}, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const stripped = stripBinaryData(nodes); |
|
||||
|
|
||||
expect(stripped[0].data).toHaveProperty("imageA", "data:image/png;base64,IMGA"); |
|
||||
expect(stripped[0].data).toHaveProperty("imageB", "data:image/png;base64,IMGB"); |
|
||||
expect(stripped[0].data).toHaveProperty("capturedImage", "data:image/png;base64,CAP"); |
|
||||
expect(stripped[0].data).toHaveProperty("video", "data:video/mp4;base64,VID"); |
|
||||
expect(stripped[0].data).toHaveProperty("glbUrl", "data:model/gltf-binary;base64,GLB"); |
|
||||
expect(stripped[0].data).toHaveProperty("output3dUrl", "data:model/gltf-binary;base64,GLB2"); |
|
||||
expect(stripped[0].data).toHaveProperty("audioFile", "data:audio/mp3;base64,AUD"); |
|
||||
expect(stripped[0].data).toHaveProperty("images"); |
|
||||
}); |
|
||||
|
|
||||
it("preserves carousel history arrays (metadata only)", () => { |
|
||||
const nodes: WorkflowNode[] = [ |
|
||||
{ |
|
||||
id: "node-1", |
|
||||
type: "nanoBanana", |
|
||||
position: { x: 0, y: 0 }, |
|
||||
data: { |
|
||||
imageHistory: [ |
|
||||
{ timestamp: "2024-01-01", imageRef: "img_001" }, |
|
||||
{ timestamp: "2024-01-02", imageRef: "img_002" }, |
|
||||
], |
|
||||
videoHistory: [ |
|
||||
{ timestamp: "2024-01-01", videoRef: "vid_001" }, |
|
||||
], |
|
||||
audioHistory: [ |
|
||||
{ timestamp: "2024-01-01", audioRef: "aud_001" }, |
|
||||
], |
|
||||
prompt: "test prompt", |
|
||||
}, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const stripped = stripBinaryData(nodes); |
|
||||
|
|
||||
expect(stripped[0].data).toHaveProperty("imageHistory"); |
|
||||
expect(stripped[0].data).toHaveProperty("videoHistory"); |
|
||||
expect(stripped[0].data).toHaveProperty("audioHistory"); |
|
||||
expect(stripped[0].data).toHaveProperty("prompt", "test prompt"); |
|
||||
}); |
|
||||
|
|
||||
it("preserves ref fields", () => { |
|
||||
const nodes: WorkflowNode[] = [ |
|
||||
{ |
|
||||
id: "node-1", |
|
||||
type: "imageInput", |
|
||||
position: { x: 0, y: 0 }, |
|
||||
data: { |
|
||||
image: "data:image/png;base64,ABC123", |
|
||||
imageRef: "img_001", |
|
||||
outputImageRef: "img_002", |
|
||||
sourceImageRef: "img_003", |
|
||||
inputImageRefs: ["img_004", "img_005"], |
|
||||
outputVideoRef: "vid_001", |
|
||||
outputAudioRef: "aud_001", |
|
||||
}, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const stripped = stripBinaryData(nodes); |
|
||||
|
|
||||
expect(stripped[0].data).not.toHaveProperty("image"); |
|
||||
expect(stripped[0].data).toHaveProperty("imageRef", "img_001"); |
|
||||
expect(stripped[0].data).toHaveProperty("outputImageRef", "img_002"); |
|
||||
expect(stripped[0].data).toHaveProperty("sourceImageRef", "img_003"); |
|
||||
expect(stripped[0].data).toHaveProperty("inputImageRefs"); |
|
||||
expect(stripped[0].data).toHaveProperty("outputVideoRef", "vid_001"); |
|
||||
expect(stripped[0].data).toHaveProperty("outputAudioRef", "aud_001"); |
|
||||
}); |
|
||||
|
|
||||
it("preserves non-binary fields", () => { |
|
||||
const nodes: WorkflowNode[] = [ |
|
||||
{ |
|
||||
id: "node-1", |
|
||||
type: "nanoBanana", |
|
||||
position: { x: 100, y: 200 }, |
|
||||
data: { |
|
||||
image: "data:image/png;base64,ABC123", |
|
||||
imageRef: "img_001", |
|
||||
prompt: "test prompt", |
|
||||
model: "gemini-2.5-flash-image", |
|
||||
aspectRatio: "1:1", |
|
||||
selectedModel: { provider: "gemini", modelId: "test" }, |
|
||||
seed: 12345, |
|
||||
steps: 20, |
|
||||
guidanceScale: 7.5, |
|
||||
}, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const stripped = stripBinaryData(nodes); |
|
||||
|
|
||||
expect(stripped[0].data).not.toHaveProperty("image"); |
|
||||
expect(stripped[0].data).toHaveProperty("prompt", "test prompt"); |
|
||||
expect(stripped[0].data).toHaveProperty("model", "gemini-2.5-flash-image"); |
|
||||
expect(stripped[0].data).toHaveProperty("aspectRatio", "1:1"); |
|
||||
expect(stripped[0].data).toHaveProperty("selectedModel"); |
|
||||
expect(stripped[0].data).toHaveProperty("seed", 12345); |
|
||||
expect(stripped[0].data).toHaveProperty("steps", 20); |
|
||||
expect(stripped[0].data).toHaveProperty("guidanceScale", 7.5); |
|
||||
}); |
|
||||
|
|
||||
it("does not mutate original nodes", () => { |
|
||||
const nodes: WorkflowNode[] = [ |
|
||||
{ |
|
||||
id: "node-1", |
|
||||
type: "imageInput", |
|
||||
position: { x: 0, y: 0 }, |
|
||||
data: { |
|
||||
image: "data:image/png;base64,ABC123", |
|
||||
imageRef: "img_001", |
|
||||
prompt: "test", |
|
||||
}, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const originalImage = nodes[0].data.image; |
|
||||
stripBinaryData(nodes); |
|
||||
|
|
||||
expect(nodes[0].data.image).toBe(originalImage); |
|
||||
expect(nodes[0].data).toHaveProperty("image", "data:image/png;base64,ABC123"); |
|
||||
}); |
|
||||
|
|
||||
it("handles empty nodes array", () => { |
|
||||
const nodes: WorkflowNode[] = []; |
|
||||
const stripped = stripBinaryData(nodes); |
|
||||
|
|
||||
expect(stripped).toEqual([]); |
|
||||
}); |
|
||||
|
|
||||
it("handles nodes with no binary data", () => { |
|
||||
const nodes: WorkflowNode[] = [ |
|
||||
{ |
|
||||
id: "node-1", |
|
||||
type: "prompt", |
|
||||
position: { x: 0, y: 0 }, |
|
||||
data: { |
|
||||
prompt: "test prompt", |
|
||||
variableName: "myPrompt", |
|
||||
}, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const stripped = stripBinaryData(nodes); |
|
||||
|
|
||||
expect(stripped[0].data).toEqual({ |
|
||||
prompt: "test prompt", |
|
||||
variableName: "myPrompt", |
|
||||
}); |
|
||||
}); |
|
||||
|
|
||||
it("handles mixed nodes: some with refs, some without", () => { |
|
||||
const nodes: WorkflowNode[] = [ |
|
||||
{ |
|
||||
id: "node-1", |
|
||||
type: "imageInput", |
|
||||
position: { x: 0, y: 0 }, |
|
||||
data: { |
|
||||
image: "data:image/png;base64,SAVED", |
|
||||
imageRef: "img_001", // Has ref → strip
|
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
id: "node-2", |
|
||||
type: "imageInput", |
|
||||
position: { x: 100, y: 0 }, |
|
||||
data: { |
|
||||
image: "data:image/png;base64,UNSAVED", |
|
||||
// No imageRef → keep
|
|
||||
}, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const stripped = stripBinaryData(nodes); |
|
||||
|
|
||||
// Node 1: stripped (has ref)
|
|
||||
expect(stripped[0].data).not.toHaveProperty("image"); |
|
||||
expect(stripped[0].data).toHaveProperty("imageRef", "img_001"); |
|
||||
|
|
||||
// Node 2: kept (no ref)
|
|
||||
expect(stripped[1].data).toHaveProperty("image", "data:image/png;base64,UNSAVED"); |
|
||||
}); |
|
||||
}); |
|
||||
|
|
||||
describe("undoStateEquality", () => { |
|
||||
const createMockState = () => ({ |
|
||||
nodes: [ |
|
||||
{ |
|
||||
id: "node-1", |
|
||||
type: "prompt" as const, |
|
||||
position: { x: 0, y: 0 }, |
|
||||
data: { prompt: "test" }, |
|
||||
}, |
|
||||
], |
|
||||
edges: [ |
|
||||
{ |
|
||||
id: "edge-1", |
|
||||
source: "node-1", |
|
||||
target: "node-2", |
|
||||
data: {}, |
|
||||
}, |
|
||||
] as WorkflowEdge[], |
|
||||
edgeStyle: "curved" as EdgeStyle, |
|
||||
groups: {} as Record<string, NodeGroup>, |
|
||||
}); |
|
||||
|
|
||||
it("returns true when same object refs (no change)", () => { |
|
||||
const state = createMockState(); |
|
||||
const result = undoStateEquality(state, state); |
|
||||
|
|
||||
expect(result).toBe(true); |
|
||||
}); |
|
||||
|
|
||||
it("returns false when edges array differs", () => { |
|
||||
const state1 = createMockState(); |
|
||||
const state2 = createMockState(); |
|
||||
state2.edges = [...state2.edges]; // New array ref
|
|
||||
|
|
||||
const result = undoStateEquality(state1, state2); |
|
||||
|
|
||||
expect(result).toBe(false); |
|
||||
}); |
|
||||
|
|
||||
it("returns false when edgeStyle differs", () => { |
|
||||
const state1 = createMockState(); |
|
||||
const state2 = createMockState(); |
|
||||
state2.edgeStyle = "angular"; |
|
||||
|
|
||||
const result = undoStateEquality(state1, state2); |
|
||||
|
|
||||
expect(result).toBe(false); |
|
||||
}); |
|
||||
|
|
||||
it("returns false when groups object differs", () => { |
|
||||
const state1 = createMockState(); |
|
||||
const state2 = createMockState(); |
|
||||
state2.groups = { ...state2.groups }; // New object ref
|
|
||||
|
|
||||
const result = undoStateEquality(state1, state2); |
|
||||
|
|
||||
expect(result).toBe(false); |
|
||||
}); |
|
||||
|
|
||||
it("returns false when node count differs", () => { |
|
||||
const state1 = createMockState(); |
|
||||
const state2 = createMockState(); |
|
||||
state2.nodes = [ |
|
||||
...state2.nodes, |
|
||||
{ |
|
||||
id: "node-2", |
|
||||
type: "prompt" as const, |
|
||||
position: { x: 100, y: 100 }, |
|
||||
data: { prompt: "test2" }, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const result = undoStateEquality(state1, state2); |
|
||||
|
|
||||
expect(result).toBe(false); |
|
||||
}); |
|
||||
|
|
||||
it("returns false when any node ref differs (position change)", () => { |
|
||||
const state1 = createMockState(); |
|
||||
const state2 = createMockState(); |
|
||||
state2.nodes = [ |
|
||||
{ |
|
||||
...state2.nodes[0], |
|
||||
position: { x: 100, y: 100 }, |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const result = undoStateEquality(state1, state2); |
|
||||
|
|
||||
expect(result).toBe(false); |
|
||||
}); |
|
||||
|
|
||||
it("returns true when all node refs are identical even with different wrapper array", () => { |
|
||||
const state1 = createMockState(); |
|
||||
const state2 = { |
|
||||
...state1, |
|
||||
nodes: [...state1.nodes], // New array ref but same node refs
|
|
||||
}; |
|
||||
|
|
||||
const result = undoStateEquality(state1, state2); |
|
||||
|
|
||||
expect(result).toBe(true); |
|
||||
}); |
|
||||
}); |
|
||||
|
|
||||
describe("partializeForUndo", () => { |
|
||||
it("returns object with only nodes, edges, edgeStyle, groups", () => { |
|
||||
const mockState = { |
|
||||
nodes: [], |
|
||||
edges: [], |
|
||||
edgeStyle: "curved" as EdgeStyle, |
|
||||
groups: {}, |
|
||||
isRunning: false, |
|
||||
clipboard: null, |
|
||||
openModalCount: 0, |
|
||||
workflowId: "test-id", |
|
||||
hasUnsavedChanges: true, |
|
||||
}; |
|
||||
|
|
||||
const result = partializeForUndo(mockState); |
|
||||
|
|
||||
expect(Object.keys(result)).toEqual(["nodes", "edges", "edgeStyle", "groups"]); |
|
||||
expect(result).not.toHaveProperty("isRunning"); |
|
||||
expect(result).not.toHaveProperty("clipboard"); |
|
||||
expect(result).not.toHaveProperty("openModalCount"); |
|
||||
expect(result).not.toHaveProperty("workflowId"); |
|
||||
expect(result).not.toHaveProperty("hasUnsavedChanges"); |
|
||||
}); |
|
||||
|
|
||||
it("returned nodes have recoverable binary data stripped", () => { |
|
||||
const mockState = { |
|
||||
nodes: [ |
|
||||
{ |
|
||||
id: "node-1", |
|
||||
type: "imageInput" as const, |
|
||||
position: { x: 0, y: 0 }, |
|
||||
data: { |
|
||||
image: "data:image/png;base64,ABC123", |
|
||||
imageRef: "img_001", |
|
||||
prompt: "test", |
|
||||
}, |
|
||||
}, |
|
||||
], |
|
||||
edges: [], |
|
||||
edgeStyle: "curved" as EdgeStyle, |
|
||||
groups: {}, |
|
||||
isRunning: false, |
|
||||
}; |
|
||||
|
|
||||
const result = partializeForUndo(mockState); |
|
||||
|
|
||||
expect(result.nodes[0].data).not.toHaveProperty("image"); |
|
||||
expect(result.nodes[0].data).toHaveProperty("imageRef", "img_001"); |
|
||||
expect(result.nodes[0].data).toHaveProperty("prompt", "test"); |
|
||||
}); |
|
||||
|
|
||||
it("returned nodes keep unrecoverable binary data", () => { |
|
||||
const mockState = { |
|
||||
nodes: [ |
|
||||
{ |
|
||||
id: "node-1", |
|
||||
type: "imageInput" as const, |
|
||||
position: { x: 0, y: 0 }, |
|
||||
data: { |
|
||||
image: "data:image/png;base64,UNSAVED", |
|
||||
// No imageRef
|
|
||||
prompt: "test", |
|
||||
}, |
|
||||
}, |
|
||||
], |
|
||||
edges: [], |
|
||||
edgeStyle: "curved" as EdgeStyle, |
|
||||
groups: {}, |
|
||||
isRunning: false, |
|
||||
}; |
|
||||
|
|
||||
const result = partializeForUndo(mockState); |
|
||||
|
|
||||
expect(result.nodes[0].data).toHaveProperty("image", "data:image/png;base64,UNSAVED"); |
|
||||
expect(result.nodes[0].data).toHaveProperty("prompt", "test"); |
|
||||
}); |
|
||||
}); |
|
||||
|
|
||||
describe("undoWithMedia", () => { |
|
||||
it("calls undo when pastStates is non-empty", () => { |
|
||||
const undo = vi.fn(); |
|
||||
const pause = vi.fn(); |
|
||||
const resume = vi.fn(); |
|
||||
const mockStore = { |
|
||||
getState: vi.fn(() => ({ nodes: [], edges: [], saveDirectoryPath: null })), |
|
||||
setState: vi.fn(), |
|
||||
temporal: { |
|
||||
getState: vi.fn(() => ({ |
|
||||
pastStates: [{}], |
|
||||
undo, |
|
||||
pause, |
|
||||
resume, |
|
||||
})), |
|
||||
}, |
|
||||
} as any; |
|
||||
|
|
||||
undoWithMedia(mockStore); |
|
||||
|
|
||||
expect(undo).toHaveBeenCalled(); |
|
||||
expect(mockStore.setState).toHaveBeenCalledWith({ hasUnsavedChanges: true }); |
|
||||
}); |
|
||||
|
|
||||
it("does nothing when pastStates is empty", () => { |
|
||||
const undo = vi.fn(); |
|
||||
const mockStore = { |
|
||||
getState: vi.fn(), |
|
||||
setState: vi.fn(), |
|
||||
temporal: { |
|
||||
getState: vi.fn(() => ({ |
|
||||
pastStates: [], |
|
||||
undo, |
|
||||
})), |
|
||||
}, |
|
||||
} as any; |
|
||||
|
|
||||
undoWithMedia(mockStore); |
|
||||
|
|
||||
expect(undo).not.toHaveBeenCalled(); |
|
||||
expect(mockStore.setState).not.toHaveBeenCalled(); |
|
||||
}); |
|
||||
}); |
|
||||
|
|
||||
describe("redoWithMedia", () => { |
|
||||
it("calls redo when futureStates is non-empty", () => { |
|
||||
const redo = vi.fn(); |
|
||||
const pause = vi.fn(); |
|
||||
const resume = vi.fn(); |
|
||||
const mockStore = { |
|
||||
getState: vi.fn(() => ({ nodes: [], edges: [], saveDirectoryPath: null })), |
|
||||
setState: vi.fn(), |
|
||||
temporal: { |
|
||||
getState: vi.fn(() => ({ |
|
||||
futureStates: [{}], |
|
||||
redo, |
|
||||
pause, |
|
||||
resume, |
|
||||
})), |
|
||||
}, |
|
||||
} as any; |
|
||||
|
|
||||
redoWithMedia(mockStore); |
|
||||
|
|
||||
expect(redo).toHaveBeenCalled(); |
|
||||
expect(mockStore.setState).toHaveBeenCalledWith({ hasUnsavedChanges: true }); |
|
||||
}); |
|
||||
|
|
||||
it("does nothing when futureStates is empty", () => { |
|
||||
const redo = vi.fn(); |
|
||||
const mockStore = { |
|
||||
getState: vi.fn(), |
|
||||
setState: vi.fn(), |
|
||||
temporal: { |
|
||||
getState: vi.fn(() => ({ |
|
||||
futureStates: [], |
|
||||
redo, |
|
||||
})), |
|
||||
}, |
|
||||
} as any; |
|
||||
|
|
||||
redoWithMedia(mockStore); |
|
||||
|
|
||||
expect(redo).not.toHaveBeenCalled(); |
|
||||
expect(mockStore.setState).not.toHaveBeenCalled(); |
|
||||
}); |
|
||||
}); |
|
||||
}); |
|
||||
@ -1,152 +0,0 @@ |
|||||
import type { WorkflowNode, WorkflowEdge, NodeGroup } from "@/types"; |
|
||||
import type { EdgeStyle } from "./workflowStore"; |
|
||||
import { hydrateWorkflowImages } from "@/utils/imageStorage"; |
|
||||
|
|
||||
/** |
|
||||
* Mapping of binary data fields to their corresponding ref fields. |
|
||||
* Only fields with a ref can be recovered from disk after undo/redo, |
|
||||
* so only these are stripped from snapshots. |
|
||||
* |
|
||||
* Fields WITHOUT refs (imageA, imageB, capturedImage, video, images, |
|
||||
* audioFile, glbUrl, output3dUrl, etc.) are kept in snapshots since |
|
||||
* they're unrecoverable otherwise. |
|
||||
*/ |
|
||||
export const BINARY_TO_REF: Record<string, string> = { |
|
||||
image: "imageRef", |
|
||||
outputImage: "outputImageRef", |
|
||||
sourceImage: "sourceImageRef", |
|
||||
inputImages: "inputImageRefs", |
|
||||
outputVideo: "outputVideoRef", |
|
||||
outputAudio: "outputAudioRef", |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* Strips binary data from node data objects to reduce undo snapshot size. |
|
||||
* Only strips fields that have a corresponding ref (recoverable from disk). |
|
||||
* Fields without refs are kept in the snapshot since they can't be recovered. |
|
||||
* |
|
||||
* @param nodes - Array of workflow nodes |
|
||||
* @returns New array of nodes with recoverable binary data stripped |
|
||||
*/ |
|
||||
export function stripBinaryData(nodes: WorkflowNode[]): WorkflowNode[] { |
|
||||
return nodes.map(node => { |
|
||||
const data = node.data as Record<string, any>; |
|
||||
const strippedData: Record<string, any> = {}; |
|
||||
|
|
||||
for (const key of Object.keys(data)) { |
|
||||
const refField = BINARY_TO_REF[key]; |
|
||||
if (refField && data[refField]) { |
|
||||
// Has a ref → strip binary (recoverable from disk)
|
|
||||
continue; |
|
||||
} |
|
||||
strippedData[key] = data[key]; |
|
||||
} |
|
||||
|
|
||||
return { |
|
||||
...node, |
|
||||
data: strippedData as typeof node.data, |
|
||||
}; |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* State shape tracked by undo/redo. |
|
||||
* Only includes fields that affect the workflow graph structure. |
|
||||
*/ |
|
||||
export type UndoState = { |
|
||||
nodes: WorkflowNode[]; |
|
||||
edges: WorkflowEdge[]; |
|
||||
edgeStyle: EdgeStyle; |
|
||||
groups: Record<string, NodeGroup>; |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* Partializes the store state for undo tracking. |
|
||||
* Returns only the fields we want to track in undo history. |
|
||||
* |
|
||||
* @param state - Full workflow store state |
|
||||
* @returns Partialized state with binary data stripped from nodes |
|
||||
*/ |
|
||||
export function partializeForUndo(state: any): UndoState { |
|
||||
return { |
|
||||
nodes: stripBinaryData(state.nodes), |
|
||||
edges: state.edges, |
|
||||
edgeStyle: state.edgeStyle, |
|
||||
groups: state.groups, |
|
||||
}; |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* Fast equality check for undo states using referential comparison. |
|
||||
* Zustand creates new object/array references on every mutation, |
|
||||
* so we can use === checks instead of deep equality. |
|
||||
* |
|
||||
* @param past - Previous undo state |
|
||||
* @param current - Current undo state |
|
||||
* @returns true if states are equal (skip snapshot), false otherwise |
|
||||
*/ |
|
||||
export function undoStateEquality(past: UndoState, current: UndoState): boolean { |
|
||||
// Fast checks for primitive/reference changes
|
|
||||
if (past.edges !== current.edges) return false; |
|
||||
if (past.edgeStyle !== current.edgeStyle) return false; |
|
||||
if (past.groups !== current.groups) return false; |
|
||||
|
|
||||
// Check nodes array
|
|
||||
if (past.nodes.length !== current.nodes.length) return false; |
|
||||
|
|
||||
// Check each node reference (Zustand creates new refs on change)
|
|
||||
for (let i = 0; i < past.nodes.length; i++) { |
|
||||
if (past.nodes[i] !== current.nodes[i]) return false; |
|
||||
} |
|
||||
|
|
||||
// All checks passed - states are equal
|
|
||||
return true; |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* Hydrate missing binary data from refs after undo/redo. |
|
||||
* Uses the existing hydrateWorkflowImages() which checks `if (ref && !binary)` |
|
||||
* before loading, so it only loads what's actually missing. |
|
||||
*/ |
|
||||
async function hydrateAfterUndoRedo(store: typeof import("./workflowStore").useWorkflowStore): Promise<void> { |
|
||||
const state = store.getState(); |
|
||||
const workflowPath = state.saveDirectoryPath; |
|
||||
if (!workflowPath) return; // Unsaved workflow, no refs to hydrate
|
|
||||
|
|
||||
try { |
|
||||
const workflow = { version: 1 as const, name: "", nodes: state.nodes, edges: state.edges, edgeStyle: state.edgeStyle }; |
|
||||
const hydrated = await hydrateWorkflowImages(workflow, workflowPath); |
|
||||
|
|
||||
// Pause temporal so hydration doesn't create undo snapshots
|
|
||||
const temporal = store.temporal.getState(); |
|
||||
temporal.pause(); |
|
||||
store.setState({ nodes: hydrated.nodes }); |
|
||||
temporal.resume(); |
|
||||
} catch (err) { |
|
||||
console.warn("Failed to hydrate after undo/redo:", err); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* Undo with media hydration. Calls undo(), marks unsaved, then |
|
||||
* asynchronously hydrates any binary data that was stripped from the snapshot. |
|
||||
*/ |
|
||||
export function undoWithMedia(store: typeof import("./workflowStore").useWorkflowStore): void { |
|
||||
const temporal = store.temporal.getState(); |
|
||||
if (temporal.pastStates.length === 0) return; |
|
||||
temporal.undo(); |
|
||||
store.setState({ hasUnsavedChanges: true }); |
|
||||
hydrateAfterUndoRedo(store); |
|
||||
} |
|
||||
|
|
||||
/** |
|
||||
* Redo with media hydration. Calls redo(), marks unsaved, then |
|
||||
* asynchronously hydrates any binary data that was stripped from the snapshot. |
|
||||
*/ |
|
||||
export function redoWithMedia(store: typeof import("./workflowStore").useWorkflowStore): void { |
|
||||
const temporal = store.temporal.getState(); |
|
||||
if (temporal.futureStates.length === 0) return; |
|
||||
temporal.redo(); |
|
||||
store.setState({ hasUnsavedChanges: true }); |
|
||||
hydrateAfterUndoRedo(store); |
|
||||
} |
|
||||
Loading…
Reference in new issue