File size: 2,708 Bytes
f56a29b | 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 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
import { ElementTypes, type PPTElement } from '@/lib/types/slides';
import { useMemo } from 'react';
import { BaseImageElement } from '../components/element/ImageElement/BaseImageElement';
import { BaseTextElement } from '../components/element/TextElement/BaseTextElement';
import { BaseShapeElement } from '../components/element/ShapeElement/BaseShapeElement';
import { BaseLineElement } from '../components/element/LineElement/BaseLineElement';
import { BaseChartElement } from '../components/element/ChartElement/BaseChartElement';
import { BaseLatexElement } from '../components/element/LatexElement/BaseLatexElement';
import { BaseTableElement } from '../components/element/TableElement/BaseTableElement';
import { BaseVideoElement } from '../components/element/VideoElement/BaseVideoElement';
import { BaseCodeElement } from '../components/element/CodeElement/BaseCodeElement';
import { useSceneSelector } from '@/lib/contexts/scene-context';
import type { SceneContent } from '@/lib/types/stage';
interface ScreenElementProps {
readonly elementInfo: PPTElement;
readonly elementIndex: number;
readonly animate?: boolean;
}
export function ScreenElement({ elementInfo, elementIndex, animate }: ScreenElementProps) {
const CurrentElementComponent = useMemo(() => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- element components have varying prop signatures
const elementTypeMap: Record<string, any> = {
[ElementTypes.IMAGE]: BaseImageElement,
[ElementTypes.TEXT]: BaseTextElement,
[ElementTypes.SHAPE]: BaseShapeElement,
[ElementTypes.LINE]: BaseLineElement,
[ElementTypes.CHART]: BaseChartElement,
[ElementTypes.LATEX]: BaseLatexElement,
[ElementTypes.TABLE]: BaseTableElement,
[ElementTypes.VIDEO]: BaseVideoElement,
[ElementTypes.CODE]: BaseCodeElement,
// TODO: Add other element types
// [ElementTypes.AUDIO]: BaseAudioElement,
};
return elementTypeMap[elementInfo.type] || null;
}, [elementInfo.type]);
const theme = useSceneSelector<SceneContent, { fontColor: string; fontName: string }>(
(content) => {
if (content.type === 'slide') {
return content.canvas.theme;
}
return {
fontColor: '#333333',
fontName: 'Microsoft YaHei',
};
},
);
if (!CurrentElementComponent) {
return null;
}
return (
<div
className="screen-element"
id={`screen-element-${elementInfo.id}`}
style={{
zIndex: elementIndex,
color: theme.fontColor,
fontFamily: theme.fontName,
}}
>
<CurrentElementComponent elementInfo={elementInfo} animate={animate} />
</div>
);
}
|