feat: canvas flow rework (wip)

This commit is contained in:
psychedelicious
2025-06-05 11:54:06 +10:00
parent c8df7cd2c0
commit ea34690709
10 changed files with 156 additions and 258 deletions

View File

@@ -1,9 +1,7 @@
import type { EphemeralProgressImage } from 'features/controlLayers/store/types';
import type { ProgressImage } from 'features/nodes/types/common';
import { round } from 'lodash-es';
import type { WritableAtom } from 'nanostores';
import { atom, computed, map } from 'nanostores';
import { useEffect, useState } from 'react';
import type { ImageDTO, S } from 'services/api/types';
import type { AppSocket } from 'services/events/types';
import type { ManagerOptions, SocketOptions } from 'socket.io-client';
@@ -27,103 +25,6 @@ export type ProgressData = {
progressImage: ProgressImage | null;
};
export const useProgressData = (
$progressData: WritableAtom<Record<string, ProgressData>>,
sessionId: string
): ProgressData => {
const [value, setValue] = useState<ProgressData>(() => {
return $progressData.get()[sessionId] ?? { sessionId, progressEvent: null, progressImage: null };
});
useEffect(() => {
const unsub = $progressData.subscribe((data) => {
const progressData = data[sessionId];
if (!progressData) {
return;
}
setValue(progressData);
});
return () => {
unsub();
};
}, [$progressData, sessionId]);
return value;
};
export const useHasProgressImage = (
$progressData: WritableAtom<Record<string, ProgressData>>,
sessionId: string
): boolean => {
const [value, setValue] = useState(false);
useEffect(() => {
const unsub = $progressData.subscribe((data) => {
const progressData = data[sessionId];
setValue(Boolean(progressData?.progressImage));
});
return () => {
unsub();
};
}, [$progressData, sessionId]);
return value;
};
export const setProgress = (
$progressData: WritableAtom<Record<string, ProgressData>>,
data: S['InvocationProgressEvent']
) => {
const progressData = $progressData.get();
const current = progressData[data.session_id];
if (current) {
const next = { ...current };
next.progressEvent = data;
if (data.image) {
next.progressImage = data.image;
}
$progressData.set({
...progressData,
[data.session_id]: next,
});
} else {
$progressData.set({
...progressData,
[data.session_id]: {
sessionId: data.session_id,
progressEvent: data,
progressImage: data.image ?? null,
},
});
}
};
export const clearProgressEvent = ($progressData: WritableAtom<Record<string, ProgressData>>, sessionId: string) => {
const progressData = $progressData.get();
const current = progressData[sessionId];
if (!current) {
return;
}
const next = { ...current };
next.progressEvent = null;
$progressData.set({
...progressData,
[sessionId]: next,
});
};
export const clearProgressImage = ($progressData: WritableAtom<Record<string, ProgressData>>, sessionId: string) => {
const progressData = $progressData.get();
const current = progressData[sessionId];
if (!current) {
return;
}
const next = { ...current };
next.progressImage = null;
$progressData.set({
...progressData,
[sessionId]: next,
});
};
export const $lastCanvasProgressEvent = atom<S['InvocationProgressEvent'] | null>(null);
export const $lastCanvasProgressImage = atom<EphemeralProgressImage | null>(null);
export const $lastWorkflowsProgressEvent = atom<S['InvocationProgressEvent'] | null>(null);