iven/zclaw_openfang
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor(classroom): unify whiteboard rendering to WhiteboardCanvas
Some checks failed
CI / Lint & TypeCheck (push) Has been cancelled
Details
CI / Unit Tests (push) Has been cancelled
Details
CI / Build Frontend (push) Has been cancelled
Details
CI / Rust Check (push) Has been cancelled
Details
CI / Security Scan (push) Has been cancelled
Details
CI / E2E Tests (push) Has been cancelled
Details

Browse Source 
Replace inline SVG whiteboard rendering in SceneRenderer with the
dedicated WhiteboardCanvas component, gaining chart/latex support
and eliminating 27 lines of duplicated rendering logic.
This commit is contained in:
iven
2026-04-06 10:53:21 +08:00
parent 828be3cc9e
commit 38e7c7bd9b
2 changed files with 13 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
desktop/src/components/classroom_player/SceneRenderer.tsx
View File

@@ -7,6 +7,7 @@
import { useState, useEffect, useCallback } from 'react';
import type { GeneratedScene, SceneContent, SceneAction, AgentProfile } from '../../types/classroom';
import { WhiteboardCanvas } from './WhiteboardCanvas';
interface SceneRendererProps {
scene: GeneratedScene;
@@ -79,12 +80,8 @@ export function SceneRenderer({ scene, agents, autoPlay = true }: SceneRendererP
{/* Whiteboard area */}
{whiteboardItems.length > 0 && (
<div className="w-80 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 p-2 overflow-auto">
<svg viewBox="0 0 800 600" className="w-full h-full">
{whiteboardItems.map((item, i) => (
<g key={i}>{renderWhiteboardItem(item)}</g>
))}
</svg>
<div className="w-96 shrink-0">
<WhiteboardCanvas items={whiteboardItems} />
</div>
)}
</div>
@@ -127,6 +124,9 @@ function getActionDelay(action: SceneAction): number {
case 'speech': return 2000;
case 'whiteboard_draw_text': return 800;
case 'whiteboard_draw_shape': return 600;
case 'whiteboard_draw_chart': return 1000;
case 'whiteboard_draw_latex': return 1000;
case 'whiteboard_clear': return 300;
case 'quiz_show': return 5000;
case 'discussion': return 10000;
default: return 1000;
@@ -190,30 +190,3 @@ function renderCurrentAction(action: SceneAction, agents: AgentProfile[]) {
}
}
function renderWhiteboardItem(item: { type: string; data: Record<string, unknown> }) {
switch (item.type) {
case 'whiteboard_draw_text': {
const d = item.data;
if ('text' in d && 'x' in d && 'y' in d) {
return (
<text x={typeof d.x === 'number' ? d.x : 100} y={typeof d.y === 'number' ? d.y : 100} fontSize={typeof d.fontSize === 'number' ? d.fontSize : 16} fill={typeof d.color === 'string' ? d.color : '#333'}>
{String(d.text ?? '')}
</text>
);
}
return null;
}
case 'whiteboard_draw_shape': {
const d = item.data as Record<string, unknown>;
const x = typeof d.x === 'number' ? d.x : 0;
const y = typeof d.y === 'number' ? d.y : 0;
const w = typeof d.width === 'number' ? d.width : 100;
const h = typeof d.height === 'number' ? d.height : 50;
const fill = typeof d.fill === 'string' ? d.fill : '#e5e5e5';
return (
<rect x={x} y={y} width={w} height={h} fill={fill} />
);
}
}
}