108 lines
3.0 KiB
TypeScript
108 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { ScreenElement } from '@/components/slide-renderer/Editor/ScreenElement';
|
|
import { SceneProvider } from '@/lib/contexts/scene-context';
|
|
import { useStageStore } from '@/lib/store/stage';
|
|
import type { PPTElement } from '@openmaic/dsl';
|
|
|
|
const EVAL_STAGE_ID = '__eval_stage__';
|
|
const EVAL_SCENE_ID = '__eval_scene__';
|
|
const CANVAS_WIDTH = 1000;
|
|
const CANVAS_HEIGHT = 563;
|
|
|
|
function WhiteboardCanvas() {
|
|
const [elements, setElements] = useState<PPTElement[]>([]);
|
|
const [ready, setReady] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Bootstrap store with a synthetic stage + scene
|
|
const store = useStageStore.getState();
|
|
store.setStage({
|
|
id: EVAL_STAGE_ID,
|
|
name: 'eval',
|
|
createdAt: 0,
|
|
updatedAt: 0,
|
|
});
|
|
store.setScenes([
|
|
{
|
|
id: EVAL_SCENE_ID,
|
|
stageId: EVAL_STAGE_ID,
|
|
type: 'slide',
|
|
title: 'eval',
|
|
order: 0,
|
|
content: {
|
|
type: 'slide',
|
|
canvas: {
|
|
id: EVAL_SCENE_ID,
|
|
viewportSize: CANVAS_WIDTH,
|
|
viewportRatio: CANVAS_HEIGHT / CANVAS_WIDTH,
|
|
theme: {
|
|
backgroundColor: '#ffffff',
|
|
themeColors: ['#5b9bd5'],
|
|
fontColor: '#333333',
|
|
fontName: 'Microsoft YaHei',
|
|
},
|
|
elements: [],
|
|
},
|
|
},
|
|
},
|
|
]);
|
|
store.setCurrentSceneId(EVAL_SCENE_ID);
|
|
|
|
// Expose setter for Playwright
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
(window as any).__setElements = (incoming: PPTElement[]) => {
|
|
setElements(incoming);
|
|
// Also update the store so SceneProvider/ScreenElement reads the theme
|
|
useStageStore.getState().updateScene(EVAL_SCENE_ID, {
|
|
content: {
|
|
type: 'slide',
|
|
canvas: {
|
|
id: EVAL_SCENE_ID,
|
|
viewportSize: CANVAS_WIDTH,
|
|
viewportRatio: CANVAS_HEIGHT / CANVAS_WIDTH,
|
|
theme: {
|
|
backgroundColor: '#ffffff',
|
|
themeColors: ['#5b9bd5'],
|
|
fontColor: '#333333',
|
|
fontName: 'Microsoft YaHei',
|
|
},
|
|
elements: incoming,
|
|
},
|
|
},
|
|
});
|
|
};
|
|
|
|
// Signal readiness
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
(window as any).__evalReady = true;
|
|
// Defer setReady to avoid cascading render warning
|
|
queueMicrotask(() => setReady(true));
|
|
}, []);
|
|
|
|
if (!ready) return null;
|
|
|
|
return (
|
|
<SceneProvider>
|
|
<div
|
|
style={{
|
|
position: 'relative',
|
|
width: CANVAS_WIDTH,
|
|
height: CANVAS_HEIGHT,
|
|
backgroundColor: '#ffffff',
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
{elements.map((element, index) => (
|
|
<ScreenElement key={element.id} elementInfo={element} elementIndex={index} />
|
|
))}
|
|
</div>
|
|
</SceneProvider>
|
|
);
|
|
}
|
|
|
|
export default function EvalWhiteboardPage() {
|
|
return <WhiteboardCanvas />;
|
|
}
|