Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | import type { AppDispatch, RootState } from '@/store';
import type { EditorSnapshot } from '@/shared/types';
import { replaceFromSnapshot } from '@/entities/layer/model/slice';
import { applyLayerSnapshots } from '@/entities/layer/lib';
import { layerService } from '@/entities/layer/model';
/**
* 1) Put the snapshot into Redux,
* 2) Wait for the next frame,
* 3) Draw on canvases using stable IDs.
*/
export async function applySnapshot(
snapshot: EditorSnapshot,
api: { dispatch: AppDispatch; getState: () => RootState },
): Promise<void> {
const { projectId, layers } = snapshot;
// Layer replacement in Redux
api.dispatch(
replaceFromSnapshot({
projectId,
layers: layers.map((l) => ({
id: l.id,
name: l.name,
visible: l.visible,
opacity: l.opacity,
zIndex: l.zIndex,
snapshot: l.snapshot,
})),
}),
);
// full replace all layers in Dexie
await layerService.replaceAll(projectId, layers);
// Canvas sizes taken from the current state
const state = api.getState();
const project = state.projects.entities[projectId];
if (!project) return;
const { width, height } = project;
// Wait for canvases to mount/render
await new Promise<void>((r) => requestAnimationFrame(() => r()));
// get canvas by id
const getCanvas = (id: string) =>
document.getElementById(`layer-canvas-${id}`) as HTMLCanvasElement | null;
// Perform drawing
await applyLayerSnapshots(layers, getCanvas, width, height);
}
|