Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 kcar
|
1ab8aab43c |
@@ -31,7 +31,10 @@ vi.mock('./pages/NotFoundPublic', () => ({ default: () => <div>Public Not Found<
|
||||
vi.mock('./pages/tldraw/TLDrawCanvas', () => ({ default: () => <div>Public Home</div> }));
|
||||
vi.mock('./pages/tldraw/singlePlayerPage', () => ({ default: () => <div>Single Player</div> }));
|
||||
vi.mock('./pages/tldraw/multiplayerUser', () => ({ default: () => <div>Multiplayer</div> }));
|
||||
vi.mock('./pages/exam', () => ({ ExamDashboardPage: () => <div>Exam Marker</div> }));
|
||||
vi.mock('./pages/exam', () => ({
|
||||
ExamDashboardPage: () => <div>Exam Marker</div>,
|
||||
MarkSchemePage: () => <div>Mark Scheme editor</div>,
|
||||
}));
|
||||
vi.mock('./pages/user/calendarPage', () => ({ default: () => <div>Calendar</div> }));
|
||||
vi.mock('./pages/user/settingsPage', () => ({ default: () => <div>Settings</div> }));
|
||||
vi.mock('./pages/tldraw/devPlayerPage', () => ({ default: () => <div>TLDraw Dev</div> }));
|
||||
@@ -122,3 +125,22 @@ describe('/admin route authorization', () => {
|
||||
expect(screen.getByText('Platform Admin Page')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe('exam-marker routes', () => {
|
||||
beforeEach(() => {
|
||||
mockUseAuth.mockReset();
|
||||
});
|
||||
|
||||
it('renders the mark scheme editor route for authenticated users', () => {
|
||||
mockUseAuth.mockReturnValue(authState({
|
||||
user: { id: 'teacher-1', email: '[email protected]', user_type: 'email_teacher' },
|
||||
user_role: 'email_teacher',
|
||||
accessToken: 'token',
|
||||
}));
|
||||
|
||||
renderAt('/exam-marker/template-123/marks');
|
||||
|
||||
expect(screen.getByText('Mark Scheme editor')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
+2
-2
@@ -7,7 +7,7 @@ import LoginPage from './pages/auth/loginPage';
|
||||
import SignupPage from './pages/auth/signupPage';
|
||||
import SinglePlayerPage from './pages/tldraw/singlePlayerPage';
|
||||
import MultiplayerUser from './pages/tldraw/multiplayerUser';
|
||||
import { ExamDashboardPage, ExamTemplateSetupPage } from './pages/exam';
|
||||
import { ExamDashboardPage, MarkSchemePage } from './pages/exam';
|
||||
import { ErrorBoundary } from './components/ErrorBoundary';
|
||||
import CalendarPage from './pages/user/calendarPage';
|
||||
import SettingsPage from './pages/user/settingsPage';
|
||||
@@ -183,7 +183,7 @@ const AppRoutes: React.FC = () => {
|
||||
<Route path="/search" element={<SearxngPage />} />
|
||||
<Route path="/teacher-planner" element={<TeacherPlanner />} />
|
||||
<Route path="/exam-marker" element={<ErrorBoundary><ExamDashboardPage /></ErrorBoundary>} />
|
||||
<Route path="/exam-marker/:templateId/setup" element={<ErrorBoundary><ExamTemplateSetupPage /></ErrorBoundary>} />
|
||||
<Route path="/exam-marker/:templateId/marks" element={<ErrorBoundary><MarkSchemePage /></ErrorBoundary>} />
|
||||
<Route path="/doc-intelligence/:fileId" element={<CCDocumentIntelligence />} />
|
||||
<Route path="/morphic" element={<MorphicPage />} />
|
||||
<Route path="/tldraw-dev" element={<TLDrawDevPage />} />
|
||||
|
||||
@@ -22,6 +22,7 @@ import {
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import ArchiveIcon from '@mui/icons-material/Archive';
|
||||
import AssignmentIcon from '@mui/icons-material/Assignment';
|
||||
import GradingIcon from '@mui/icons-material/Grading';
|
||||
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import { examRepository } from '../../services/exam/examRepository';
|
||||
@@ -168,6 +169,16 @@ const ExamDashboardPage: React.FC = () => {
|
||||
{new Date(t.updated_at).toLocaleDateString()}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack direction="row" spacing={1} sx={{ pt: 1 }}>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
onClick={(e) => { e.stopPropagation(); navigate(`/exam-marker/${t.id}/marks`); }}
|
||||
startIcon={<GradingIcon fontSize="small" />}
|
||||
>
|
||||
Edit marks
|
||||
</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Grid>
|
||||
))}
|
||||
|
||||
@@ -0,0 +1,501 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import {
|
||||
Alert,
|
||||
Autocomplete,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
CardContent,
|
||||
Chip,
|
||||
CircularProgress,
|
||||
Container,
|
||||
Divider,
|
||||
FormControl,
|
||||
Grid,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
Paper,
|
||||
Select,
|
||||
Stack,
|
||||
Tab,
|
||||
Tabs,
|
||||
TextField,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
|
||||
import SaveIcon from '@mui/icons-material/Save';
|
||||
import SyncIcon from '@mui/icons-material/Sync';
|
||||
|
||||
import { logger } from '../../debugConfig';
|
||||
import { examRepository } from '../../services/exam/examRepository';
|
||||
import type {
|
||||
ExamQuestion,
|
||||
ExamTemplateDetail,
|
||||
MarkScheme,
|
||||
MarkSchemeType,
|
||||
SpecPoint,
|
||||
} from '../../types/exam.types';
|
||||
|
||||
type Drafts = Record<string, PartDraft>;
|
||||
|
||||
interface PartDraft {
|
||||
max_marks: string;
|
||||
answer_type: 'written' | 'mcq' | 'short' | 'diagram';
|
||||
spec_ref: string;
|
||||
schemeType: MarkSchemeType;
|
||||
body: string;
|
||||
notes: string;
|
||||
}
|
||||
|
||||
const ANSWER_TYPES: Array<PartDraft['answer_type']> = ['written', 'short', 'mcq', 'diagram'];
|
||||
const SCHEME_TYPES: Array<{ value: MarkSchemeType; label: string; helper: string }> = [
|
||||
{ value: 'points', label: 'Points', helper: 'One mark point per line, e.g. "1 | Mentions resultant force".' },
|
||||
{ value: 'levels', label: 'Levels', helper: 'One level per line, e.g. "L2 | 3-4 | Clear linked explanation".' },
|
||||
{ value: 'parts', label: 'Parts', helper: 'One sub-part per line, e.g. "a | 2 | Correct substitution".' },
|
||||
{ value: 'checklist', label: 'Checklist', helper: 'One checklist item per line, e.g. "1 | Correct unit".' },
|
||||
{ value: 'free', label: 'Free text', helper: 'Paste or type the mark scheme exactly as it should be stored.' },
|
||||
];
|
||||
|
||||
function deriveSpecCode(template: ExamTemplateDetail | null): string {
|
||||
const examCode = template?.exam_code ?? '';
|
||||
const match = examCode.match(/^([A-Z]+-[A-Z]+-\d+)/i);
|
||||
return match?.[1] ?? '';
|
||||
}
|
||||
|
||||
function schemeToDraft(scheme: MarkScheme | null | undefined): Pick<PartDraft, 'schemeType' | 'body' | 'notes'> {
|
||||
const type = (scheme?.type as MarkSchemeType | undefined) ?? 'points';
|
||||
const notes = typeof scheme?.notes === 'string' ? scheme.notes : '';
|
||||
|
||||
if (type === 'levels' && Array.isArray(scheme?.levels)) {
|
||||
return {
|
||||
schemeType: 'levels',
|
||||
body: scheme.levels.map((l) => `${l.level ?? ''} | ${l.min ?? 0}-${l.max ?? 0} | ${l.descriptor ?? ''}`).join('\n'),
|
||||
notes,
|
||||
};
|
||||
}
|
||||
if (type === 'parts' && Array.isArray(scheme?.parts)) {
|
||||
return {
|
||||
schemeType: 'parts',
|
||||
body: scheme.parts.map((p) => `${p.label ?? ''} | ${p.marks ?? 0} | ${p.guidance ?? ''}`).join('\n'),
|
||||
notes,
|
||||
};
|
||||
}
|
||||
if (type === 'checklist' && Array.isArray(scheme?.checklist)) {
|
||||
return {
|
||||
schemeType: 'checklist',
|
||||
body: scheme.checklist.map((item) => `${item.marks ?? 1} | ${item.text ?? ''}`).join('\n'),
|
||||
notes,
|
||||
};
|
||||
}
|
||||
if (type === 'free') {
|
||||
return { schemeType: 'free', body: typeof scheme?.text === 'string' ? scheme.text : '', notes };
|
||||
}
|
||||
if (Array.isArray(scheme?.points)) {
|
||||
return {
|
||||
schemeType: 'points',
|
||||
body: scheme.points.map((p) => `${p.mark ?? 1} | ${p.text ?? ''}`).join('\n'),
|
||||
notes,
|
||||
};
|
||||
}
|
||||
return { schemeType: type, body: '', notes };
|
||||
}
|
||||
|
||||
function parseNumber(value: string, fallback = 0): number {
|
||||
const parsed = Number(value);
|
||||
return Number.isFinite(parsed) ? parsed : fallback;
|
||||
}
|
||||
|
||||
function splitLine(line: string): string[] {
|
||||
return line.split('|').map((part) => part.trim());
|
||||
}
|
||||
|
||||
function draftToScheme(draft: PartDraft): MarkScheme {
|
||||
const lines = draft.body.split('\n').map((line) => line.trim()).filter(Boolean);
|
||||
if (draft.schemeType === 'free') return { type: 'free', text: draft.body, notes: draft.notes || undefined };
|
||||
if (draft.schemeType === 'levels') {
|
||||
return {
|
||||
type: 'levels',
|
||||
levels: lines.map((line, idx) => {
|
||||
const [level, range, descriptor] = splitLine(line);
|
||||
const [minRaw, maxRaw] = (range || '').split('-').map((part) => part.trim());
|
||||
return {
|
||||
level: level || `L${idx + 1}`,
|
||||
min: parseNumber(minRaw, 0),
|
||||
max: parseNumber(maxRaw, parseNumber(minRaw, 0)),
|
||||
descriptor: descriptor || line,
|
||||
};
|
||||
}),
|
||||
notes: draft.notes || undefined,
|
||||
};
|
||||
}
|
||||
if (draft.schemeType === 'parts') {
|
||||
return {
|
||||
type: 'parts',
|
||||
parts: lines.map((line, idx) => {
|
||||
const [label, marks, guidance] = splitLine(line);
|
||||
return { label: label || String(idx + 1), marks: parseNumber(marks, 1), guidance: guidance || line };
|
||||
}),
|
||||
notes: draft.notes || undefined,
|
||||
};
|
||||
}
|
||||
if (draft.schemeType === 'checklist') {
|
||||
return {
|
||||
type: 'checklist',
|
||||
checklist: lines.map((line) => {
|
||||
const [marks, text] = splitLine(line);
|
||||
return { marks: parseNumber(marks, 1), text: text || line };
|
||||
}),
|
||||
notes: draft.notes || undefined,
|
||||
};
|
||||
}
|
||||
return {
|
||||
type: 'points',
|
||||
points: lines.map((line) => {
|
||||
const [mark, text] = splitLine(line);
|
||||
return { mark: parseNumber(mark, 1), text: text || line };
|
||||
}),
|
||||
notes: draft.notes || undefined,
|
||||
};
|
||||
}
|
||||
|
||||
function makeDraft(question: ExamQuestion): PartDraft {
|
||||
const scheme = schemeToDraft(question.mark_scheme);
|
||||
return {
|
||||
max_marks: String(question.max_marks ?? 0),
|
||||
answer_type: (question.answer_type as PartDraft['answer_type'] | null) ?? 'written',
|
||||
spec_ref: question.spec_ref ?? '',
|
||||
schemeType: scheme.schemeType,
|
||||
body: scheme.body,
|
||||
notes: scheme.notes,
|
||||
};
|
||||
}
|
||||
|
||||
const MarkSchemePage: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const { templateId } = useParams<{ templateId: string }>();
|
||||
|
||||
const [template, setTemplate] = useState<ExamTemplateDetail | null>(null);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [drafts, setDrafts] = useState<Drafts>({});
|
||||
const [specCode, setSpecCode] = useState('');
|
||||
const [specPoints, setSpecPoints] = useState<SpecPoint[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [savingId, setSavingId] = useState<string | null>(null);
|
||||
const [syncing, setSyncing] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [notice, setNotice] = useState<string | null>(null);
|
||||
const [specEndpointMissing, setSpecEndpointMissing] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
if (!templateId) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const detail = await examRepository.getTemplate(templateId);
|
||||
const leafParts = detail.questions.filter((q) => !q.is_container).sort((a, b) => a.order - b.order || a.label.localeCompare(b.label));
|
||||
setTemplate(detail);
|
||||
setSelectedId((prev) => prev ?? leafParts[0]?.id ?? null);
|
||||
setDrafts(Object.fromEntries(leafParts.map((q) => [q.id, makeDraft(q)])));
|
||||
setSpecCode((prev) => prev || deriveSpecCode(detail));
|
||||
} catch (e) {
|
||||
const msg = e instanceof Error ? e.message : String(e);
|
||||
logger.error('cc-exam-marker', 'Failed to load mark scheme template', { message: msg, templateId });
|
||||
setError(msg);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [templateId]);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
const loadSpecPoints = useCallback(async () => {
|
||||
if (!specCode.trim()) return;
|
||||
setSpecEndpointMissing(false);
|
||||
try {
|
||||
setSpecPoints(await examRepository.listSpecPoints(specCode.trim()));
|
||||
} catch (e) {
|
||||
const msg = e instanceof Error ? e.message : String(e);
|
||||
logger.warn('cc-exam-marker', 'SpecPoint endpoint unavailable; falling back to manual spec_ref entry', { message: msg, specCode });
|
||||
setSpecEndpointMissing(true);
|
||||
setSpecPoints([]);
|
||||
}
|
||||
}, [specCode]);
|
||||
|
||||
useEffect(() => {
|
||||
void loadSpecPoints();
|
||||
}, [loadSpecPoints]);
|
||||
|
||||
const parts = useMemo(
|
||||
() => (template?.questions ?? []).filter((q) => !q.is_container).sort((a, b) => a.order - b.order || a.label.localeCompare(b.label)),
|
||||
[template],
|
||||
);
|
||||
const selected = parts.find((p) => p.id === selectedId) ?? null;
|
||||
const draft = selected ? drafts[selected.id] : null;
|
||||
const selectedSpecPoint = draft?.spec_ref ? specPoints.find((p) => p.ref === draft.spec_ref) ?? null : null;
|
||||
|
||||
const updateDraft = (questionId: string, patch: Partial<PartDraft>) => {
|
||||
setDrafts((prev) => ({ ...prev, [questionId]: { ...prev[questionId], ...patch } }));
|
||||
};
|
||||
|
||||
const savePart = async (question: ExamQuestion) => {
|
||||
const partDraft = drafts[question.id];
|
||||
if (!partDraft) return;
|
||||
setSavingId(question.id);
|
||||
setError(null);
|
||||
setNotice(null);
|
||||
try {
|
||||
await examRepository.patchQuestion(question.id, {
|
||||
max_marks: parseNumber(partDraft.max_marks, question.max_marks),
|
||||
answer_type: partDraft.answer_type,
|
||||
mark_scheme: draftToScheme(partDraft),
|
||||
spec_ref: partDraft.spec_ref.trim() || null,
|
||||
});
|
||||
setTemplate((prev) => {
|
||||
if (!prev) return prev;
|
||||
return {
|
||||
...prev,
|
||||
questions: prev.questions.map((q) => q.id === question.id ? {
|
||||
...q,
|
||||
max_marks: parseNumber(partDraft.max_marks, question.max_marks),
|
||||
answer_type: partDraft.answer_type,
|
||||
mark_scheme: draftToScheme(partDraft),
|
||||
spec_ref: partDraft.spec_ref.trim() || null,
|
||||
} : q),
|
||||
};
|
||||
});
|
||||
setNotice(`Saved mark scheme for Part ${question.label}.`);
|
||||
} catch (e) {
|
||||
const msg = e instanceof Error ? e.message : String(e);
|
||||
logger.error('cc-exam-marker', 'Save mark scheme failed', { message: msg, questionId: question.id });
|
||||
setError(msg);
|
||||
} finally {
|
||||
setSavingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const syncGraph = async () => {
|
||||
if (!templateId) return;
|
||||
setSyncing(true);
|
||||
setError(null);
|
||||
setNotice(null);
|
||||
try {
|
||||
const res = await examRepository.syncTemplateToGraph(templateId);
|
||||
setNotice(`Neo4j projection ${res.status}; ${JSON.stringify(res.projection ?? {})}`);
|
||||
} catch (e) {
|
||||
const msg = e instanceof Error ? e.message : String(e);
|
||||
logger.error('cc-exam-marker', 'Neo4j sync failed', { message: msg, templateId });
|
||||
setError(msg);
|
||||
} finally {
|
||||
setSyncing(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <Box sx={{ display: 'flex', justifyContent: 'center', py: 10 }}><CircularProgress /></Box>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Container maxWidth="xl" sx={{ py: 4 }}>
|
||||
<Stack spacing={3}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 2 }}>
|
||||
<Box>
|
||||
<Button startIcon={<ArrowBackIcon />} onClick={() => navigate('/exam-marker')} sx={{ mb: 1 }}>
|
||||
Back to templates
|
||||
</Button>
|
||||
<Typography variant="h3" component="h1">Mark Scheme editor</Typography>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
{template?.title ?? 'Template'} · Edit per-Part mark schemes and link assessed specification points.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack direction="row" spacing={1}>
|
||||
{templateId && <Button variant="outlined" onClick={() => navigate(`/exam-marker/${templateId}/setup`)}>Setup canvas</Button>}
|
||||
<Button variant="outlined" startIcon={<SyncIcon />} onClick={syncGraph} disabled={syncing || !templateId}>
|
||||
{syncing ? 'Syncing…' : 'Sync to graph'}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{error && <Alert severity="error" onClose={() => setError(null)}>{error}</Alert>}
|
||||
{notice && <Alert severity="success" onClose={() => setNotice(null)}>{notice}</Alert>}
|
||||
{specEndpointMissing && (
|
||||
<Alert severity="warning">
|
||||
SpecPoint picker endpoint was not available from this API build. You can still type a spec_ref manually; the backend projection resolves it during neo4j-sync.
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Paper variant="outlined" sx={{ p: 2 }}>
|
||||
<Grid container spacing={2} alignItems="center">
|
||||
<Grid item xs={12} md={4}>
|
||||
<TextField
|
||||
label="Specification code"
|
||||
value={specCode}
|
||||
onChange={(e) => setSpecCode(e.target.value)}
|
||||
fullWidth
|
||||
helperText="Example: AQA-PHYS-8463. Used by the SpecPoint picker."
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={8}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Save writes PATCH /api/exam/questions/:id. Spec refs are persisted on the Part and projected as (:Part)-[:ASSESSES]->(:SpecPoint).
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Paper>
|
||||
|
||||
{parts.length === 0 ? (
|
||||
<Alert severity="info">
|
||||
This template has no Parts yet. Draw Part boxes on the setup canvas first, then return here to enter mark schemes.
|
||||
</Alert>
|
||||
) : (
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} md={3}>
|
||||
<Card variant="outlined">
|
||||
<CardContent>
|
||||
<Typography variant="h6" gutterBottom>Parts</Typography>
|
||||
<Tabs
|
||||
orientation="vertical"
|
||||
value={selectedId ?? false}
|
||||
onChange={(_, value) => setSelectedId(value)}
|
||||
variant="scrollable"
|
||||
sx={{ borderRight: 1, borderColor: 'divider', maxHeight: '65vh' }}
|
||||
>
|
||||
{parts.map((part) => (
|
||||
<Tab
|
||||
key={part.id}
|
||||
value={part.id}
|
||||
label={
|
||||
<Box sx={{ textAlign: 'left', width: '100%' }}>
|
||||
<Typography variant="body2">Part {part.label}</Typography>
|
||||
<Stack direction="row" spacing={0.5} sx={{ mt: 0.5, flexWrap: 'wrap' }}>
|
||||
<Chip size="small" label={`${drafts[part.id]?.max_marks ?? part.max_marks} marks`} />
|
||||
{(drafts[part.id]?.spec_ref || part.spec_ref) && <Chip size="small" color="info" label={drafts[part.id]?.spec_ref || part.spec_ref || ''} />}
|
||||
</Stack>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Tabs>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={9}>
|
||||
{selected && draft && (
|
||||
<Card variant="outlined">
|
||||
<CardContent>
|
||||
<Stack spacing={3}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2, flexWrap: 'wrap' }}>
|
||||
<Box>
|
||||
<Typography variant="h5">Part {selected.label}</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{selected.parent_id ? `Parent question ${selected.parent_id}` : 'No parent question'}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<SaveIcon />}
|
||||
disabled={savingId === selected.id}
|
||||
onClick={() => savePart(selected)}
|
||||
>
|
||||
{savingId === selected.id ? 'Saving…' : 'Save part'}
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} sm={4}>
|
||||
<TextField
|
||||
label="Max marks"
|
||||
value={draft.max_marks}
|
||||
onChange={(e) => updateDraft(selected.id, { max_marks: e.target.value })}
|
||||
type="number"
|
||||
inputProps={{ min: 0, step: 0.5 }}
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={4}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel id="answer-type-label">Answer type</InputLabel>
|
||||
<Select
|
||||
labelId="answer-type-label"
|
||||
label="Answer type"
|
||||
value={draft.answer_type}
|
||||
onChange={(e) => updateDraft(selected.id, { answer_type: e.target.value as PartDraft['answer_type'] })}
|
||||
>
|
||||
{ANSWER_TYPES.map((type) => <MenuItem key={type} value={type}>{type}</MenuItem>)}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={4}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel id="scheme-type-label">Scheme form</InputLabel>
|
||||
<Select
|
||||
labelId="scheme-type-label"
|
||||
label="Scheme form"
|
||||
value={draft.schemeType}
|
||||
onChange={(e) => updateDraft(selected.id, { schemeType: e.target.value as MarkSchemeType })}
|
||||
>
|
||||
{SCHEME_TYPES.map((type) => <MenuItem key={type.value} value={type.value}>{type.label}</MenuItem>)}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Autocomplete
|
||||
options={specPoints}
|
||||
value={selectedSpecPoint}
|
||||
onChange={(_, value) => updateDraft(selected.id, { spec_ref: value?.ref ?? '' })}
|
||||
getOptionLabel={(option) => `${option.ref} — ${option.description}`}
|
||||
isOptionEqualToValue={(option, value) => option.ref === value.ref}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
label="SpecPoint picker"
|
||||
helperText={specPoints.length ? 'Choose a seeded SpecPoint, or type below to override.' : 'No picker results loaded; type spec_ref manually below.'}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label="spec_ref"
|
||||
value={draft.spec_ref}
|
||||
onChange={(e) => updateDraft(selected.id, { spec_ref: e.target.value })}
|
||||
helperText="Persisted to exam_questions.spec_ref; graph sync creates the ASSESSES edge when the ref matches a seeded SpecPoint."
|
||||
fullWidth
|
||||
/>
|
||||
|
||||
<Divider />
|
||||
|
||||
<TextField
|
||||
label={`${SCHEME_TYPES.find((type) => type.value === draft.schemeType)?.label ?? 'Mark scheme'} body`}
|
||||
value={draft.body}
|
||||
onChange={(e) => updateDraft(selected.id, { body: e.target.value })}
|
||||
helperText={SCHEME_TYPES.find((type) => type.value === draft.schemeType)?.helper}
|
||||
multiline
|
||||
minRows={10}
|
||||
fullWidth
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label="Internal marking notes"
|
||||
value={draft.notes}
|
||||
onChange={(e) => updateDraft(selected.id, { notes: e.target.value })}
|
||||
multiline
|
||||
minRows={3}
|
||||
fullWidth
|
||||
/>
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
)}
|
||||
</Stack>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default MarkSchemePage;
|
||||
@@ -1,2 +1,2 @@
|
||||
export { default as ExamDashboardPage } from './ExamDashboardPage';
|
||||
export { default as ExamTemplateSetupPage } from './setup/ExamTemplateSetupPage';
|
||||
export { default as MarkSchemePage } from './MarkSchemePage';
|
||||
|
||||
@@ -1,263 +0,0 @@
|
||||
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import { Alert, Box, Button, Chip, CircularProgress, Divider, Paper, Snackbar, Stack, Tooltip, Typography, useTheme } from '@mui/material'
|
||||
import ArrowBackIcon from '@mui/icons-material/ArrowBack'
|
||||
import SaveIcon from '@mui/icons-material/Save'
|
||||
import MouseIcon from '@mui/icons-material/Mouse'
|
||||
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf'
|
||||
import '@tldraw/tldraw/tldraw.css'
|
||||
import { Editor, Tldraw, createShapeId, defaultBindingUtils, TLShape } from '@tldraw/tldraw'
|
||||
import axios from 'axios'
|
||||
|
||||
import { ErrorBoundary } from '../../../components/ErrorBoundary'
|
||||
import { logger } from '../../../debugConfig'
|
||||
import { examRepository } from '../../../services/exam/examRepository'
|
||||
import type { ExamTemplateDetail } from '../../../types/exam.types'
|
||||
import { ExamCanvasShapeModel, PAGE_WIDTH, type PdfPageLayout, serializeCanvasShapes, shapesFromTemplate } from '../../../utils/exam-canvas/model'
|
||||
import { examCanvasShapeUtils, examCanvasTools, ExamCanvasTLShape, PDF_PAGE_SHAPE_TYPE, SHAPE_TYPES, shapeTypeToKind } from './examCanvasShapes'
|
||||
import { renderPdfBackdrop, replacePdfPageShapes } from './pdfLoader'
|
||||
|
||||
const TOOLS = [
|
||||
{ id: 'select', label: 'Select', tip: 'Move, resize, or delete user regions. The PDF backdrop is locked.', color: 'default' as const },
|
||||
{ id: SHAPE_TYPES.boundary, label: 'Boundary', tip: 'Draw one horizontal line. A main question is saved from each top+bottom pair.', color: 'error' as const },
|
||||
{ id: SHAPE_TYPES.part, label: 'Part', tip: 'Draw the markable sub-question box inside a boundary pair.', color: 'warning' as const },
|
||||
{ id: SHAPE_TYPES.response, label: 'Response', tip: 'Draw around where the student writes; saved with response_form=lines.', color: 'primary' as const },
|
||||
{ id: SHAPE_TYPES.context, label: 'Context', tip: 'Draw around stimulus/context material; saved with context_type=generic.', color: 'secondary' as const },
|
||||
{ id: SHAPE_TYPES.question_number, label: 'Q Number', tip: 'Box the printed question number.', color: 'success' as const },
|
||||
{ id: SHAPE_TYPES.mark_area, label: 'Mark Area', tip: 'Box printed marks such as [2].', color: 'success' as const },
|
||||
{ id: SHAPE_TYPES.reference, label: 'Reference', tip: 'Box student resources/reference material.', color: 'info' as const },
|
||||
{ id: SHAPE_TYPES.furniture, label: 'Furniture', tip: 'Mark margins/page numbers/ignored decoration.', color: 'default' as const },
|
||||
]
|
||||
|
||||
function apiMessage(err: unknown): { message: string; conflict: boolean } {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const detail = (err.response?.data as { detail?: string } | undefined)?.detail
|
||||
if (err.response?.status === 409) return { conflict: true, message: detail ?? 'Template has recorded marks; structural full-replace is blocked.' }
|
||||
return { conflict: false, message: detail ?? err.message }
|
||||
}
|
||||
return { conflict: false, message: err instanceof Error ? err.message : String(err) }
|
||||
}
|
||||
|
||||
function stripShapePrefix(id: string) {
|
||||
return id.startsWith('shape:') ? id.slice('shape:'.length) : id
|
||||
}
|
||||
|
||||
function modelFromTLShape(shape: TLShape): ExamCanvasShapeModel | null {
|
||||
const kind = shapeTypeToKind(shape.type)
|
||||
if (!kind) return null
|
||||
const s = shape as ExamCanvasTLShape
|
||||
return {
|
||||
id: s.props.domainId || stripShapePrefix(s.id),
|
||||
kind,
|
||||
x: Number(s.x ?? 0),
|
||||
y: Number(s.y ?? 0),
|
||||
w: Number(s.props.w ?? 1),
|
||||
h: Number(s.props.h ?? 1),
|
||||
label: s.props.label,
|
||||
maxMarks: s.props.maxMarks,
|
||||
responseForm: s.props.responseForm as ExamCanvasShapeModel['responseForm'],
|
||||
contextType: s.props.contextType,
|
||||
questionId: s.props.questionId ?? null,
|
||||
}
|
||||
}
|
||||
|
||||
function loadShapes(editor: Editor, models: ExamCanvasShapeModel[]) {
|
||||
const existing = editor.getCurrentPageShapes().filter((s) => shapeTypeToKind(s.type)).map((s) => s.id)
|
||||
if (existing.length) editor.deleteShapes(existing)
|
||||
if (!models.length) return
|
||||
editor.createShapes(models.map((m) => ({
|
||||
id: createShapeId(m.id),
|
||||
type: SHAPE_TYPES[m.kind],
|
||||
x: m.x,
|
||||
y: m.y,
|
||||
props: { w: m.w, h: m.h, label: m.label ?? m.kind, kind: m.kind, domainId: m.id, maxMarks: m.maxMarks, responseForm: m.responseForm, contextType: m.contextType, questionId: m.questionId },
|
||||
})))
|
||||
}
|
||||
|
||||
function newDomainId() {
|
||||
if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) return crypto.randomUUID()
|
||||
return `manual-${Date.now()}-${Math.random().toString(16).slice(2)}`
|
||||
}
|
||||
|
||||
function seedGuide(editor: Editor) {
|
||||
const current = editor.getCurrentPageShapes().filter((s) => shapeTypeToKind(s.type))
|
||||
if (current.length) return
|
||||
editor.createShapes([
|
||||
{ id: createShapeId(newDomainId()), type: SHAPE_TYPES.boundary, x: 48, y: 120, props: { w: PAGE_WIDTH - 96, h: 8, kind: 'boundary', domainId: newDomainId(), label: 'Q1 start' } },
|
||||
{ id: createShapeId(newDomainId()), type: SHAPE_TYPES.boundary, x: 48, y: 520, props: { w: PAGE_WIDTH - 96, h: 8, kind: 'boundary', domainId: newDomainId(), label: 'Q1 end' } },
|
||||
{ id: createShapeId(newDomainId()), type: SHAPE_TYPES.part, x: 92, y: 180, props: { w: 520, h: 150, kind: 'part', domainId: newDomainId(), label: 'Q1(a)', maxMarks: 3 } },
|
||||
{ id: createShapeId(newDomainId()), type: SHAPE_TYPES.response, x: 116, y: 355, props: { w: 470, h: 120, kind: 'response', domainId: newDomainId(), label: 'Response', responseForm: 'lines' } },
|
||||
])
|
||||
}
|
||||
|
||||
const ExamTemplateSetupInner: React.FC = () => {
|
||||
const { templateId } = useParams<{ templateId: string }>()
|
||||
const navigate = useNavigate()
|
||||
const theme = useTheme()
|
||||
const editorRef = useRef<Editor | null>(null)
|
||||
const pageLayoutsRef = useRef<PdfPageLayout[]>([])
|
||||
const hydratingRef = useRef(false)
|
||||
const [template, setTemplate] = useState<ExamTemplateDetail | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [pdfLoading, setPdfLoading] = useState(false)
|
||||
const [pdfStatus, setPdfStatus] = useState<string>('PDF not loaded')
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [dirty, setDirty] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [conflict, setConflict] = useState<string | null>(null)
|
||||
const [activeTool, setActiveTool] = useState('select')
|
||||
|
||||
const loadPdf = useCallback(async (id: string, editor: Editor) => {
|
||||
setPdfLoading(true)
|
||||
setPdfStatus('Loading PDF…')
|
||||
try {
|
||||
const result = await renderPdfBackdrop(id)
|
||||
hydratingRef.current = true
|
||||
replacePdfPageShapes(editor, result.pages)
|
||||
pageLayoutsRef.current = result.pageLayouts
|
||||
setPdfStatus(`${result.pages.length} PDF page${result.pages.length === 1 ? '' : 's'} loaded`)
|
||||
editor.zoomToFit()
|
||||
} catch (e) {
|
||||
pageLayoutsRef.current = []
|
||||
const msg = apiMessage(e).message
|
||||
setPdfStatus(`PDF unavailable: ${msg}`)
|
||||
logger.warn('cc-exam-marker', 'Template setup PDF backdrop failed', { templateId: id, message: msg })
|
||||
} finally {
|
||||
hydratingRef.current = false
|
||||
setPdfLoading(false)
|
||||
setDirty(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const load = useCallback(async () => {
|
||||
if (!templateId) return
|
||||
setLoading(true); setError(null); setConflict(null)
|
||||
try {
|
||||
const detail = await examRepository.getTemplate(templateId)
|
||||
setTemplate(detail)
|
||||
const editor = editorRef.current
|
||||
if (editor) {
|
||||
hydratingRef.current = true
|
||||
loadShapes(editor, shapesFromTemplate(detail))
|
||||
hydratingRef.current = false
|
||||
await loadPdf(templateId, editor)
|
||||
}
|
||||
setDirty(false)
|
||||
} catch (e) {
|
||||
const msg = apiMessage(e).message
|
||||
logger.warn('cc-exam-marker', 'Template setup load failed', { templateId, message: msg })
|
||||
setError(msg)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [loadPdf, templateId])
|
||||
|
||||
useEffect(() => { void load() }, [load])
|
||||
|
||||
const save = useCallback(async () => {
|
||||
const editor = editorRef.current
|
||||
if (!editor || !templateId || !template) return
|
||||
setSaving(true); setError(null); setConflict(null)
|
||||
try {
|
||||
const shapes = editor.getCurrentPageShapes().filter((s) => s.type !== PDF_PAGE_SHAPE_TYPE).map(modelFromTLShape).filter(Boolean) as ExamCanvasShapeModel[]
|
||||
const payload = serializeCanvasShapes(template, shapes, pageLayoutsRef.current)
|
||||
const saved = await examRepository.replaceTemplate(templateId, payload)
|
||||
setTemplate(saved)
|
||||
hydratingRef.current = true
|
||||
loadShapes(editor, shapesFromTemplate(saved))
|
||||
hydratingRef.current = false
|
||||
setDirty(false)
|
||||
} catch (e) {
|
||||
const msg = apiMessage(e)
|
||||
if (msg.conflict) setConflict(msg.message); else setError(msg.message)
|
||||
logger.warn('cc-exam-marker', 'Template setup save failed', { templateId, message: msg.message })
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}, [template, templateId])
|
||||
|
||||
const toolButtons = useMemo(() => TOOLS.map((tool) => (
|
||||
<Tooltip title={tool.tip} key={tool.id} placement="right">
|
||||
<Button
|
||||
size="small"
|
||||
variant={activeTool === tool.id ? 'contained' : 'outlined'}
|
||||
color={tool.color}
|
||||
startIcon={tool.id === 'select' ? <MouseIcon fontSize="small" /> : undefined}
|
||||
onClick={() => {
|
||||
const editor = editorRef.current
|
||||
if (!editor) return
|
||||
editor.setCurrentTool(tool.id === 'select' ? 'select' : tool.id)
|
||||
setActiveTool(tool.id)
|
||||
}}
|
||||
sx={{ justifyContent: 'flex-start', minWidth: 126 }}
|
||||
>
|
||||
{tool.label}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)), [activeTool])
|
||||
|
||||
return (
|
||||
<Box sx={{ position: 'fixed', inset: 0, zIndex: (t) => t.zIndex.drawer + 20, bgcolor: 'background.default' }}>
|
||||
<Box sx={{ position: 'absolute', inset: 0, '& .tlui-layout': { display: 'none' } }} data-testid="exam-template-setup-canvas">
|
||||
<Tldraw
|
||||
shapeUtils={examCanvasShapeUtils as any}
|
||||
bindingUtils={defaultBindingUtils}
|
||||
tools={examCanvasTools as any}
|
||||
hideUi
|
||||
inferDarkMode={theme.palette.mode === 'dark'}
|
||||
autoFocus
|
||||
onMount={(editor) => {
|
||||
editorRef.current = editor
|
||||
editor.user.updateUserPreferences({ isDarkMode: theme.palette.mode === 'dark' })
|
||||
editor.store.listen((entry) => {
|
||||
const changedPdfOnly = Object.values(entry.changes.added).every((record: any) => record?.type === PDF_PAGE_SHAPE_TYPE)
|
||||
if (!hydratingRef.current && !changedPdfOnly) setDirty(true)
|
||||
}, { scope: 'document' })
|
||||
if (template) {
|
||||
hydratingRef.current = true
|
||||
loadShapes(editor, shapesFromTemplate(template))
|
||||
hydratingRef.current = false
|
||||
if (templateId) void loadPdf(templateId, editor)
|
||||
} else seedGuide(editor)
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Paper elevation={8} sx={{ position: 'absolute', top: 12, left: 12, right: 12, px: 2, py: 1.25, display: 'flex', alignItems: 'center', gap: 1.5, borderRadius: 3, bgcolor: 'background.paper' }}>
|
||||
<Button startIcon={<ArrowBackIcon />} onClick={() => navigate('/exam-marker')} size="small">Back</Button>
|
||||
<Divider orientation="vertical" flexItem />
|
||||
<Box sx={{ minWidth: 0, flex: 1 }}>
|
||||
<Typography variant="subtitle1" noWrap>{template?.title ?? 'Template setup'}</Typography>
|
||||
<Typography variant="caption" color="text.secondary">Exam Marker › Setup · real PDF backdrop is locked; drawn regions persist with PDF-derived page numbers.</Typography>
|
||||
</Box>
|
||||
<Chip size="small" icon={<PictureAsPdfIcon />} color={pdfStatus.includes('loaded') ? 'info' : pdfStatus.includes('unavailable') ? 'warning' : 'default'} label={pdfLoading ? 'Loading PDF…' : pdfStatus} />
|
||||
<Chip size="small" color={dirty ? 'warning' : 'success'} label={dirty ? 'Unsaved' : 'Saved'} />
|
||||
<Button variant="contained" startIcon={saving ? <CircularProgress size={16} color="inherit" /> : <SaveIcon />} onClick={save} disabled={saving || loading || !template}>Save</Button>
|
||||
</Paper>
|
||||
|
||||
<Paper elevation={8} sx={{ position: 'absolute', top: 92, left: 12, p: 1.25, borderRadius: 3, bgcolor: 'background.paper' }}>
|
||||
<Stack spacing={1}>{toolButtons}</Stack>
|
||||
</Paper>
|
||||
|
||||
<Paper elevation={4} sx={{ position: 'absolute', right: 16, bottom: 16, maxWidth: 420, p: 2, borderRadius: 3, bgcolor: 'background.paper' }}>
|
||||
<Typography variant="subtitle2" gutterBottom>Setup guide</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
1) Use the visible PDF pages as the paper coordinate system. 2) Draw top/bottom Boundary lines, Part boxes, then regions over the real paper. 3) Save derives page numbers from the PDF page under each shape and reloads them at the same canvas location.
|
||||
</Typography>
|
||||
</Paper>
|
||||
|
||||
{loading && <Box sx={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', bgcolor: 'rgba(15,23,42,.18)' }}><CircularProgress /></Box>}
|
||||
{conflict && <Alert severity="warning" sx={{ position: 'absolute', top: 86, right: 16, maxWidth: 560 }} onClose={() => setConflict(null)}>{conflict}</Alert>}
|
||||
<Snackbar open={!!error} autoHideDuration={8000} onClose={() => setError(null)}><Alert severity="error" onClose={() => setError(null)}>{error}</Alert></Snackbar>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
const ExamTemplateSetupPage: React.FC = () => (
|
||||
<ErrorBoundary fallback={<Box sx={{ p: 4 }}><Alert severity="error">Template setup canvas crashed. Reload the page and try again.</Alert></Box>}>
|
||||
<ExamTemplateSetupInner />
|
||||
</ErrorBoundary>
|
||||
)
|
||||
|
||||
export default ExamTemplateSetupPage
|
||||
@@ -1,123 +0,0 @@
|
||||
import React from 'react'
|
||||
import { BaseBoxShapeTool, BaseBoxShapeUtil, HTMLContainer, T, TLBaseBoxShape, toDomPrecision } from '@tldraw/tldraw'
|
||||
import type { ExamCanvasRegionKind, ExamCanvasShapeKind } from '../../../utils/exam-canvas/model'
|
||||
|
||||
export const PDF_PAGE_SHAPE_TYPE = 'exam-pdf-page'
|
||||
|
||||
export const SHAPE_TYPES = {
|
||||
boundary: 'exam-boundary',
|
||||
part: 'exam-part',
|
||||
response: 'exam-region-response',
|
||||
context: 'exam-region-context',
|
||||
question_number: 'exam-region-question-number',
|
||||
mark_area: 'exam-region-mark-area',
|
||||
reference: 'exam-region-reference',
|
||||
furniture: 'exam-region-furniture',
|
||||
} as const
|
||||
|
||||
export type PdfPageTLShape = TLBaseBoxShape<typeof PDF_PAGE_SHAPE_TYPE, {
|
||||
w: number
|
||||
h: number
|
||||
src: string
|
||||
pageNumber: number
|
||||
}>
|
||||
|
||||
export type ExamCanvasTLShape = TLBaseBoxShape<typeof SHAPE_TYPES[keyof typeof SHAPE_TYPES], {
|
||||
w: number
|
||||
h: number
|
||||
label: string
|
||||
kind: ExamCanvasShapeKind
|
||||
domainId: string
|
||||
maxMarks?: number
|
||||
responseForm?: string
|
||||
contextType?: string
|
||||
questionId?: string | null
|
||||
}>
|
||||
|
||||
const palette: Record<ExamCanvasShapeKind, { stroke: string; fill: string; dash?: string; label: string }> = {
|
||||
boundary: { stroke: '#ef4444', fill: 'rgba(239,68,68,0.06)', dash: '8 6', label: 'Boundary' },
|
||||
part: { stroke: '#f59e0b', fill: 'rgba(245,158,11,0.16)', label: 'Part' },
|
||||
response: { stroke: '#2563eb', fill: 'rgba(37,99,235,0.16)', label: 'Response' },
|
||||
context: { stroke: '#7c3aed', fill: 'rgba(124,58,237,0.14)', dash: '6 5', label: 'Context' },
|
||||
question_number: { stroke: '#0f766e', fill: 'rgba(15,118,110,0.14)', label: 'Question #' },
|
||||
mark_area: { stroke: '#16a34a', fill: 'rgba(22,163,74,0.14)', label: 'Marks' },
|
||||
reference: { stroke: '#0891b2', fill: 'rgba(8,145,178,0.14)', label: 'Reference' },
|
||||
furniture: { stroke: '#64748b', fill: 'rgba(100,116,139,0.12)', dash: '3 5', label: 'Furniture' },
|
||||
}
|
||||
|
||||
function makeDomainId() {
|
||||
if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) return crypto.randomUUID()
|
||||
return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) =>
|
||||
(Number(c) ^ (Math.random() * 16) >> Number(c) / 4).toString(16),
|
||||
)
|
||||
}
|
||||
|
||||
function renderShape(shape: ExamCanvasTLShape) {
|
||||
const kind = shape.props.kind
|
||||
const p = palette[kind] ?? palette.response
|
||||
const isBoundary = kind === 'boundary'
|
||||
return (
|
||||
<HTMLContainer id={shape.id} style={{ width: toDomPrecision(shape.props.w), height: toDomPrecision(shape.props.h), pointerEvents: 'all' }}>
|
||||
<div style={{
|
||||
width: '100%', height: '100%', boxSizing: 'border-box', border: `${isBoundary ? 2 : 1.5}px solid ${p.stroke}`,
|
||||
borderStyle: p.dash ? 'dashed' : 'solid', borderRadius: isBoundary ? 999 : 10,
|
||||
background: isBoundary ? 'transparent' : p.fill, color: p.stroke, fontFamily: 'Inter, system-ui, sans-serif',
|
||||
display: 'flex', alignItems: isBoundary ? 'center' : 'flex-start', justifyContent: isBoundary ? 'center' : 'space-between',
|
||||
padding: isBoundary ? '0 8px' : 8, boxShadow: isBoundary ? 'none' : '0 10px 22px rgba(15,23,42,0.08)', overflow: 'hidden'
|
||||
}}>
|
||||
<span style={{ fontSize: 12, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0.6, background: 'rgba(255,255,255,0.84)', borderRadius: 999, padding: '2px 7px' }}>
|
||||
{shape.props.label || p.label}
|
||||
</span>
|
||||
{!isBoundary && shape.props.questionId && <span style={{ fontSize: 11, fontWeight: 700, opacity: .75 }}>Attached</span>}
|
||||
</div>
|
||||
</HTMLContainer>
|
||||
)
|
||||
}
|
||||
|
||||
function defaultProps(kind: ExamCanvasShapeKind, w: number, h: number) {
|
||||
const p = palette[kind]
|
||||
return { w, h, label: p.label, kind, domainId: makeDomainId(), responseForm: kind === 'response' ? 'lines' : undefined, contextType: kind === 'context' ? 'generic' : undefined }
|
||||
}
|
||||
|
||||
class PdfPageUtil extends BaseBoxShapeUtil<PdfPageTLShape> {
|
||||
static override type = PDF_PAGE_SHAPE_TYPE
|
||||
static override props = { w: T.number, h: T.number, src: T.string, pageNumber: T.number }
|
||||
override getDefaultProps() { return { w: 780, h: 1100, src: '', pageNumber: 1 } }
|
||||
override canEdit() { return false }
|
||||
override canResize() { return false }
|
||||
override hideResizeHandles() { return true }
|
||||
override hideRotateHandle() { return true }
|
||||
override component(shape: PdfPageTLShape) {
|
||||
return (
|
||||
<HTMLContainer id={shape.id} style={{ width: toDomPrecision(shape.props.w), height: toDomPrecision(shape.props.h), pointerEvents: 'none' }}>
|
||||
<img
|
||||
alt={`PDF page ${shape.props.pageNumber}`}
|
||||
src={shape.props.src}
|
||||
draggable={false}
|
||||
style={{ width: '100%', height: '100%', display: 'block', userSelect: 'none', boxShadow: '0 12px 26px rgba(15,23,42,0.22)', background: '#fff' }}
|
||||
/>
|
||||
</HTMLContainer>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
class BoundaryUtil extends BaseBoxShapeUtil<ExamCanvasTLShape> { static override type = SHAPE_TYPES.boundary; static override props = { w: T.number, h: T.number, label: T.string, kind: T.string, domainId: T.string, maxMarks: T.optional(T.number), responseForm: T.optional(T.string), contextType: T.optional(T.string), questionId: T.optional(T.string) }; override getDefaultProps(){ return defaultProps('boundary', 680, 8) }; override component(shape: ExamCanvasTLShape){ return renderShape(shape) } }
|
||||
class PartUtil extends BaseBoxShapeUtil<ExamCanvasTLShape> { static override type = SHAPE_TYPES.part; static override props = BoundaryUtil.props; override getDefaultProps(){ return defaultProps('part', 420, 170) }; override component(shape: ExamCanvasTLShape){ return renderShape(shape) } }
|
||||
function regionUtil(type: string, kind: ExamCanvasRegionKind, w = 360, h = 120) { return class extends BaseBoxShapeUtil<ExamCanvasTLShape> { static override type = type; static override props = BoundaryUtil.props; override getDefaultProps(){ return defaultProps(kind, w, h) }; override component(shape: ExamCanvasTLShape){ return renderShape(shape) } } }
|
||||
|
||||
class BoundaryTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.boundary; static override initial = 'pointing'; shapeType = SHAPE_TYPES.boundary }
|
||||
class PartTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.part; static override initial = 'pointing'; shapeType = SHAPE_TYPES.part }
|
||||
class ResponseTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.response; static override initial = 'pointing'; shapeType = SHAPE_TYPES.response }
|
||||
class ContextTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.context; static override initial = 'pointing'; shapeType = SHAPE_TYPES.context }
|
||||
class QuestionNumberTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.question_number; static override initial = 'pointing'; shapeType = SHAPE_TYPES.question_number }
|
||||
class MarkAreaTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.mark_area; static override initial = 'pointing'; shapeType = SHAPE_TYPES.mark_area }
|
||||
class ReferenceTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.reference; static override initial = 'pointing'; shapeType = SHAPE_TYPES.reference }
|
||||
class FurnitureTool extends BaseBoxShapeTool { static override id = SHAPE_TYPES.furniture; static override initial = 'pointing'; shapeType = SHAPE_TYPES.furniture }
|
||||
|
||||
export const examCanvasShapeUtils = [PdfPageUtil, BoundaryUtil, PartUtil, regionUtil(SHAPE_TYPES.response, 'response'), regionUtil(SHAPE_TYPES.context, 'context'), regionUtil(SHAPE_TYPES.question_number, 'question_number', 170, 80), regionUtil(SHAPE_TYPES.mark_area, 'mark_area', 170, 80), regionUtil(SHAPE_TYPES.reference, 'reference'), regionUtil(SHAPE_TYPES.furniture, 'furniture')] as const
|
||||
export const examCanvasTools = [BoundaryTool, PartTool, ResponseTool, ContextTool, QuestionNumberTool, MarkAreaTool, ReferenceTool, FurnitureTool] as const
|
||||
|
||||
export function shapeTypeToKind(type: string): ExamCanvasShapeKind | null {
|
||||
const entry = Object.entries(SHAPE_TYPES).find(([, v]) => v === type)
|
||||
return (entry?.[0] as ExamCanvasShapeKind | undefined) ?? null
|
||||
}
|
||||
@@ -1,75 +0,0 @@
|
||||
import type { Editor } from '@tldraw/tldraw'
|
||||
import * as pdfjsLib from 'pdfjs-dist'
|
||||
import pdfWorker from 'pdfjs-dist/build/pdf.worker.mjs?url'
|
||||
|
||||
import { examRepository } from '../../../services/exam/examRepository'
|
||||
import { PAGE_GAP, PAGE_WIDTH, type PdfPageLayout } from '../../../utils/exam-canvas/model'
|
||||
import { PDF_PAGE_SHAPE_TYPE, type PdfPageTLShape } from './examCanvasShapes'
|
||||
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfWorker
|
||||
|
||||
export interface PdfBackdropPage {
|
||||
page: number
|
||||
src: string
|
||||
layout: PdfPageLayout
|
||||
}
|
||||
|
||||
export interface PdfBackdropResult {
|
||||
pages: PdfBackdropPage[]
|
||||
pageLayouts: PdfPageLayout[]
|
||||
}
|
||||
|
||||
export async function renderPdfBackdrop(templateId: string): Promise<PdfBackdropResult> {
|
||||
const bytes = await examRepository.getTemplateSourcePdf(templateId)
|
||||
const loadingTask = pdfjsLib.getDocument({ data: new Uint8Array(bytes) })
|
||||
const pdf = await loadingTask.promise
|
||||
const pages: PdfBackdropPage[] = []
|
||||
let y = 0
|
||||
|
||||
for (let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber += 1) {
|
||||
const page = await pdf.getPage(pageNumber)
|
||||
const nativeViewport = page.getViewport({ scale: 1 })
|
||||
const layoutScale = PAGE_WIDTH / nativeViewport.width
|
||||
const renderScale = layoutScale * Math.min(window.devicePixelRatio || 1, 2)
|
||||
const renderViewport = page.getViewport({ scale: renderScale })
|
||||
const canvas = document.createElement('canvas')
|
||||
const context = canvas.getContext('2d')
|
||||
if (!context) throw new Error('Could not create 2D canvas for PDF rendering')
|
||||
canvas.width = Math.ceil(renderViewport.width)
|
||||
canvas.height = Math.ceil(renderViewport.height)
|
||||
await page.render({ canvasContext: context, viewport: renderViewport }).promise
|
||||
|
||||
const layout: PdfPageLayout = {
|
||||
page: pageNumber,
|
||||
x: 0,
|
||||
y,
|
||||
w: PAGE_WIDTH,
|
||||
h: nativeViewport.height * layoutScale,
|
||||
}
|
||||
pages.push({ page: pageNumber, src: canvas.toDataURL('image/jpeg', 0.9), layout })
|
||||
y += layout.h + PAGE_GAP
|
||||
}
|
||||
|
||||
await pdf.destroy()
|
||||
return { pages, pageLayouts: pages.map((p) => p.layout) }
|
||||
}
|
||||
|
||||
export function replacePdfPageShapes(editor: Editor, pages: PdfBackdropPage[]) {
|
||||
const old = editor.getCurrentPageShapes().filter((shape) => shape.type === PDF_PAGE_SHAPE_TYPE).map((shape) => shape.id)
|
||||
if (old.length) editor.deleteShapes(old)
|
||||
if (!pages.length) return
|
||||
|
||||
editor.createShapes(pages.map((page) => ({
|
||||
id: `shape:pdf-page-${page.page}` as PdfPageTLShape['id'],
|
||||
type: PDF_PAGE_SHAPE_TYPE,
|
||||
x: page.layout.x,
|
||||
y: page.layout.y,
|
||||
isLocked: true,
|
||||
props: {
|
||||
w: page.layout.w,
|
||||
h: page.layout.h,
|
||||
src: page.src,
|
||||
pageNumber: page.page,
|
||||
},
|
||||
})))
|
||||
}
|
||||
@@ -13,7 +13,9 @@ import type {
|
||||
CreateTemplatePayload,
|
||||
ExamTemplate,
|
||||
ExamTemplateDetail,
|
||||
TemplateReplacePayload,
|
||||
Neo4jSyncResult,
|
||||
PatchQuestionPayload,
|
||||
SpecPoint,
|
||||
} from '../../types/exam.types';
|
||||
|
||||
const EXAM_BASE = `${API_BASE}/api/exam`;
|
||||
@@ -48,22 +50,32 @@ export const examRepository = {
|
||||
return res.data;
|
||||
},
|
||||
|
||||
async replaceTemplate(templateId: string, payload: TemplateReplacePayload): Promise<ExamTemplateDetail> {
|
||||
const headers = await authHeaders();
|
||||
const res = await axios.put<ExamTemplateDetail>(`${EXAM_BASE}/templates/${templateId}`, payload, { headers });
|
||||
return res.data;
|
||||
},
|
||||
|
||||
async getTemplateSourcePdf(templateId: string): Promise<ArrayBuffer> {
|
||||
const headers = await authHeaders();
|
||||
const res = await axios.get<ArrayBuffer>(`${EXAM_BASE}/templates/${templateId}/source-pdf`, { headers, responseType: 'arraybuffer' });
|
||||
return res.data;
|
||||
},
|
||||
|
||||
async archiveTemplate(templateId: string): Promise<void> {
|
||||
const headers = await authHeaders();
|
||||
await axios.delete(`${EXAM_BASE}/templates/${templateId}`, { headers });
|
||||
},
|
||||
|
||||
async patchQuestion(questionId: string, payload: PatchQuestionPayload) {
|
||||
const headers = await authHeaders();
|
||||
const res = await axios.patch(`${EXAM_BASE}/questions/${questionId}`, payload, { headers });
|
||||
return res.data;
|
||||
},
|
||||
|
||||
async listSpecPoints(specCode: string, search?: string): Promise<SpecPoint[]> {
|
||||
const headers = await authHeaders();
|
||||
const res = await axios.get<{ points?: SpecPoint[] } | SpecPoint[]>(
|
||||
`${EXAM_BASE}/specs/${encodeURIComponent(specCode)}/points`,
|
||||
{ headers, params: search ? { q: search } : undefined },
|
||||
);
|
||||
if (Array.isArray(res.data)) return res.data;
|
||||
return res.data.points ?? [];
|
||||
},
|
||||
|
||||
async syncTemplateToGraph(templateId: string): Promise<Neo4jSyncResult> {
|
||||
const headers = await authHeaders();
|
||||
const res = await axios.post<Neo4jSyncResult>(`${EXAM_BASE}/templates/${templateId}/neo4j-sync`, {}, { headers });
|
||||
return res.data;
|
||||
},
|
||||
};
|
||||
|
||||
export default examRepository;
|
||||
|
||||
+55
-40
@@ -31,6 +31,42 @@ export interface CreateTemplatePayload {
|
||||
institute_id?: string;
|
||||
}
|
||||
|
||||
export type MarkSchemeType = 'points' | 'levels' | 'parts' | 'checklist' | 'free';
|
||||
|
||||
export interface MarkSchemePoint {
|
||||
mark: number;
|
||||
text: string;
|
||||
}
|
||||
|
||||
export interface MarkSchemeLevel {
|
||||
level: string;
|
||||
min: number;
|
||||
max: number;
|
||||
descriptor: string;
|
||||
}
|
||||
|
||||
export interface MarkSchemePart {
|
||||
label: string;
|
||||
marks: number;
|
||||
guidance: string;
|
||||
}
|
||||
|
||||
export interface MarkSchemeChecklistItem {
|
||||
text: string;
|
||||
marks: number;
|
||||
}
|
||||
|
||||
export interface MarkScheme {
|
||||
type?: MarkSchemeType;
|
||||
points?: MarkSchemePoint[];
|
||||
levels?: MarkSchemeLevel[];
|
||||
parts?: MarkSchemePart[];
|
||||
checklist?: MarkSchemeChecklistItem[];
|
||||
text?: string;
|
||||
notes?: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
/** Canvas children (used from S4-9 onward; defined here so the seam is complete). */
|
||||
export interface ExamQuestion {
|
||||
id: string;
|
||||
@@ -41,7 +77,7 @@ export interface ExamQuestion {
|
||||
max_marks: number;
|
||||
answer_type: string | null;
|
||||
mcq_options: unknown | null;
|
||||
mark_scheme: Record<string, unknown>;
|
||||
mark_scheme: MarkScheme;
|
||||
is_container: boolean;
|
||||
spec_ref: string | null;
|
||||
bounds?: Record<string, number> | null;
|
||||
@@ -80,48 +116,27 @@ export interface ExamTemplateDetail extends ExamTemplate {
|
||||
boundaries: ExamBoundary[];
|
||||
}
|
||||
|
||||
|
||||
export interface TemplateReplacePayload {
|
||||
meta?: {
|
||||
title?: string;
|
||||
subject?: string;
|
||||
page_count?: number;
|
||||
status?: ExamTemplateStatus;
|
||||
};
|
||||
questions: Array<{
|
||||
id?: string;
|
||||
parent_id?: string | null;
|
||||
label: string;
|
||||
export interface PatchQuestionPayload {
|
||||
label?: string;
|
||||
order?: number;
|
||||
max_marks?: number;
|
||||
answer_type?: 'written' | 'mcq' | 'short' | 'diagram' | null;
|
||||
mcq_options?: unknown | null;
|
||||
mark_scheme?: Record<string, unknown>;
|
||||
mcq_options?: unknown;
|
||||
mark_scheme?: MarkScheme;
|
||||
is_container?: boolean;
|
||||
spec_ref?: string | null;
|
||||
bounds?: Record<string, number> | null;
|
||||
page?: number | null;
|
||||
}>;
|
||||
response_areas: Array<{
|
||||
id?: string;
|
||||
question_id: string;
|
||||
page: number;
|
||||
bounds: Record<string, number>;
|
||||
kind: ExamResponseArea['kind'];
|
||||
response_form?: string | null;
|
||||
context_type?: string | null;
|
||||
source?: 'manual' | 'ai';
|
||||
confirmed?: boolean;
|
||||
confidence?: number | null;
|
||||
}>;
|
||||
boundaries: Array<{
|
||||
id?: string;
|
||||
question_id?: string | null;
|
||||
label?: string | null;
|
||||
page_index: number;
|
||||
y: number;
|
||||
bounds?: Record<string, number> | null;
|
||||
source?: 'manual' | 'ai';
|
||||
confirmed?: boolean;
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface SpecPoint {
|
||||
uid?: string;
|
||||
uuid_string?: string;
|
||||
ref: string;
|
||||
description: string;
|
||||
spec_code: string;
|
||||
exam_board_code?: string;
|
||||
}
|
||||
|
||||
export interface Neo4jSyncResult {
|
||||
status: string;
|
||||
projection?: Record<string, unknown>;
|
||||
}
|
||||
|
||||
@@ -1,72 +0,0 @@
|
||||
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import type { ExamTemplateDetail } from '../../types/exam.types'
|
||||
import { serializeCanvasShapes, shapesFromTemplate, type PdfPageLayout } from './model'
|
||||
|
||||
const template: ExamTemplateDetail = {
|
||||
id: 'tpl-1', title: 'Physics', subject: 'Physics', exam_id: null, exam_code: null, source_file_id: null, page_count: 1,
|
||||
institute_id: 'inst', teacher_id: 'teacher', status: 'draft', created_at: 'now', updated_at: 'now', questions: [], response_areas: [], boundaries: [],
|
||||
}
|
||||
|
||||
const ids = {
|
||||
top: '11111111-1111-4111-8111-111111111111',
|
||||
bottom: '22222222-2222-4222-8222-222222222222',
|
||||
main: '33333333-3333-4333-8333-333333333333',
|
||||
part: '44444444-4444-4444-8444-444444444444',
|
||||
response: '55555555-5555-4555-8555-555555555555',
|
||||
}
|
||||
|
||||
describe('exam setup canvas serialization', () => {
|
||||
it('pairs boundaries into a main question, attaches a Part, and attaches a response by containment', () => {
|
||||
const payload = serializeCanvasShapes(template, [
|
||||
{ id: ids.top, kind: 'boundary', questionId: ids.main, x: 40, y: 100, w: 700, h: 8, label: 'Q1 start' },
|
||||
{ id: ids.bottom, kind: 'boundary', questionId: ids.main, x: 40, y: 700, w: 700, h: 8, label: 'Q1 end' },
|
||||
{ id: ids.part, kind: 'part', x: 100, y: 180, w: 400, h: 220, label: 'Q1(a)', maxMarks: 3 },
|
||||
{ id: ids.response, kind: 'response', x: 130, y: 250, w: 300, h: 90, responseForm: 'lines' },
|
||||
])
|
||||
|
||||
const main = payload.questions.find((q) => q.is_container)
|
||||
const part = payload.questions.find((q) => q.id === ids.part)
|
||||
expect(main?.label).toBe('Q1')
|
||||
expect(part?.parent_id).toBe(main?.id)
|
||||
expect(part?.bounds).toEqual({ x: 100, y: 180, w: 400, h: 220 })
|
||||
expect(payload.response_areas[0]).toMatchObject({ id: ids.response, question_id: ids.part, kind: 'response', response_form: 'lines' })
|
||||
expect(payload.boundaries).toHaveLength(2)
|
||||
expect(payload.boundaries.every((b) => b.question_id === main?.id)).toBe(true)
|
||||
})
|
||||
|
||||
it('uses real PDF page layouts to save visual page numbers', () => {
|
||||
const layouts: PdfPageLayout[] = [
|
||||
{ page: 1, x: 0, y: 0, w: 780, h: 1000 },
|
||||
{ page: 2, x: 0, y: 1040, w: 780, h: 980 },
|
||||
]
|
||||
const payload = serializeCanvasShapes(template, [
|
||||
{ id: ids.top, kind: 'boundary', questionId: ids.main, x: 40, y: 1060, w: 700, h: 8, label: 'Q2 start' },
|
||||
{ id: ids.bottom, kind: 'boundary', questionId: ids.main, x: 40, y: 1800, w: 700, h: 8, label: 'Q2 end' },
|
||||
{ id: ids.part, kind: 'part', x: 100, y: 1120, w: 400, h: 220, label: 'Q2(a)', maxMarks: 3 },
|
||||
{ id: ids.response, kind: 'response', x: 130, y: 1250, w: 300, h: 90, responseForm: 'lines' },
|
||||
], layouts)
|
||||
|
||||
expect(payload.boundaries.map((b) => b.page_index)).toEqual([1, 1])
|
||||
expect(payload.questions.find((q) => q.id === ids.part)?.page).toBe(2)
|
||||
expect(payload.response_areas[0].page).toBe(2)
|
||||
expect(payload.meta?.page_count).toBe(2)
|
||||
})
|
||||
|
||||
it('round-trips saved Part geometry and all S4-9 region kinds from API detail', () => {
|
||||
const shapes = shapesFromTemplate({
|
||||
...template,
|
||||
questions: [
|
||||
{ id: ids.main, template_id: 'tpl-1', parent_id: null, label: 'Q1', order: 0, max_marks: 0, answer_type: null, mcq_options: null, mark_scheme: {}, is_container: true, spec_ref: null },
|
||||
{ id: ids.part, template_id: 'tpl-1', parent_id: ids.main, label: 'Q1(a)', order: 0, max_marks: 2, answer_type: 'written', mcq_options: null, mark_scheme: {}, is_container: false, spec_ref: null, bounds: { x: 1, y: 2, w: 3, h: 4 }, page: 1 },
|
||||
],
|
||||
response_areas: [
|
||||
{ id: ids.response, question_id: ids.part, template_id: 'tpl-1', page: 1, bounds: { x: 10, y: 20, w: 30, h: 40 }, kind: 'response', response_form: 'lines', source: 'manual', confirmed: true, confidence: null },
|
||||
{ id: '66666666-6666-4666-8666-666666666666', question_id: ids.part, template_id: 'tpl-1', page: 1, bounds: { x: 11, y: 21, w: 31, h: 41 }, kind: 'furniture', response_form: null, source: 'manual', confirmed: true, confidence: null },
|
||||
],
|
||||
boundaries: [{ id: ids.top, template_id: 'tpl-1', question_id: ids.main, label: 'Q1 start', page_index: 0, y: 100, bounds: { x: 0, y: 100, w: 700, h: 8 }, source: 'manual', confirmed: true }],
|
||||
})
|
||||
expect(shapes.map((s) => s.kind).sort()).toEqual(['boundary', 'furniture', 'part', 'response'])
|
||||
expect(shapes.find((s) => s.kind === 'part')).toMatchObject({ id: ids.part, x: 1, y: 2, w: 3, h: 4 })
|
||||
})
|
||||
})
|
||||
@@ -1,149 +0,0 @@
|
||||
import type { ExamTemplateDetail, TemplateReplacePayload } from '../../types/exam.types'
|
||||
|
||||
export const PAGE_WIDTH = 780
|
||||
export const DEFAULT_PAGE_HEIGHT = 1100
|
||||
export const PAGE_GAP = 40
|
||||
// Back-compat alias for S4-9a callers/tests. Real PDF pages use PdfPageLayout heights.
|
||||
export const PAGE_HEIGHT = DEFAULT_PAGE_HEIGHT + PAGE_GAP
|
||||
|
||||
export type ExamCanvasRegionKind = 'response' | 'context' | 'question_number' | 'mark_area' | 'reference' | 'furniture'
|
||||
export type ExamCanvasShapeKind = 'boundary' | 'part' | ExamCanvasRegionKind
|
||||
|
||||
export interface CanvasBounds { x: number; y: number; w: number; h: number }
|
||||
export interface PdfPageLayout { page: number; x: number; y: number; w: number; h: number }
|
||||
|
||||
export interface ExamCanvasShapeModel {
|
||||
id: string
|
||||
kind: ExamCanvasShapeKind
|
||||
x: number
|
||||
y: number
|
||||
w: number
|
||||
h: number
|
||||
label?: string
|
||||
maxMarks?: number
|
||||
answerType?: 'written' | 'mcq' | 'short' | 'diagram'
|
||||
responseForm?: 'lines' | 'answer-box' | 'working' | 'diagram' | 'tick-boxes' | 'table' | 'blanks'
|
||||
contextType?: string
|
||||
questionId?: string | null
|
||||
}
|
||||
|
||||
export function fallbackPageLayouts(pageCount = 4): PdfPageLayout[] {
|
||||
return Array.from({ length: Math.max(pageCount, 1) }, (_, i) => ({
|
||||
page: i + 1,
|
||||
x: 0,
|
||||
y: i * PAGE_HEIGHT,
|
||||
w: PAGE_WIDTH,
|
||||
h: DEFAULT_PAGE_HEIGHT,
|
||||
}))
|
||||
}
|
||||
|
||||
export function pageForY(y: number, layouts?: PdfPageLayout[]): number {
|
||||
if (!layouts?.length) return Math.max(1, Math.floor(y / PAGE_HEIGHT) + 1)
|
||||
const hit = layouts.find((layout) => y >= layout.y && y <= layout.y + layout.h)
|
||||
if (hit) return hit.page
|
||||
const nearest = layouts.reduce((best, layout) => {
|
||||
const dist = y < layout.y ? layout.y - y : y - (layout.y + layout.h)
|
||||
return dist < best.dist ? { page: layout.page, dist } : best
|
||||
}, { page: layouts[0].page, dist: Number.POSITIVE_INFINITY })
|
||||
return nearest.page
|
||||
}
|
||||
|
||||
export function pageForShape(shape: Pick<ExamCanvasShapeModel, 'y' | 'h'>, layouts?: PdfPageLayout[]): number {
|
||||
return pageForY(shape.y + shape.h / 2, layouts)
|
||||
}
|
||||
|
||||
function bounds(shape: Pick<ExamCanvasShapeModel, 'x' | 'y' | 'w' | 'h'>): CanvasBounds {
|
||||
return { x: shape.x, y: shape.y, w: shape.w, h: shape.h }
|
||||
}
|
||||
|
||||
function contains(outer: CanvasBounds, inner: CanvasBounds): boolean {
|
||||
const ox2 = outer.x + outer.w
|
||||
const oy2 = outer.y + outer.h
|
||||
const ix2 = inner.x + inner.w
|
||||
const iy2 = inner.y + inner.h
|
||||
return inner.x >= outer.x && inner.y >= outer.y && ix2 <= ox2 && iy2 <= oy2
|
||||
}
|
||||
|
||||
function bandContains(top: ExamCanvasShapeModel, bottom: ExamCanvasShapeModel, shape: ExamCanvasShapeModel): boolean {
|
||||
const minY = Math.min(top.y, bottom.y)
|
||||
const maxY = Math.max(top.y, bottom.y)
|
||||
const cy = shape.y + shape.h / 2
|
||||
return cy >= minY && cy <= maxY
|
||||
}
|
||||
|
||||
function uuid(): string {
|
||||
if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) return crypto.randomUUID()
|
||||
return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) =>
|
||||
(Number(c) ^ (Math.random() * 16) >> Number(c) / 4).toString(16),
|
||||
)
|
||||
}
|
||||
|
||||
function stableUuid(id?: string | null): string {
|
||||
return id && /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(id) ? id : uuid()
|
||||
}
|
||||
|
||||
export function serializeCanvasShapes(template: ExamTemplateDetail, shapes: ExamCanvasShapeModel[], pageLayouts?: PdfPageLayout[]): TemplateReplacePayload {
|
||||
const orderedBoundaries = shapes
|
||||
.filter((s) => s.kind === 'boundary')
|
||||
.sort((a, b) => (pageForShape(a, pageLayouts) - pageForShape(b, pageLayouts)) || (a.y - b.y))
|
||||
const parts = shapes.filter((s) => s.kind === 'part')
|
||||
const regions = shapes.filter((s) => s.kind !== 'boundary' && s.kind !== 'part')
|
||||
|
||||
const questions: TemplateReplacePayload['questions'] = []
|
||||
const boundaries: TemplateReplacePayload['boundaries'] = []
|
||||
const bands: Array<{ questionId: string; top: ExamCanvasShapeModel; bottom: ExamCanvasShapeModel }> = []
|
||||
|
||||
for (let i = 0; i < orderedBoundaries.length; i += 2) {
|
||||
const top = orderedBoundaries[i]
|
||||
const bottom = orderedBoundaries[i + 1]
|
||||
if (!top || !bottom) break
|
||||
const qNum = bands.length + 1
|
||||
const questionId = stableUuid(top.questionId || bottom.questionId)
|
||||
const label = top.label?.replace(/\s+(start|end)$/i, '') || bottom.label?.replace(/\s+(start|end)$/i, '') || `Q${qNum}`
|
||||
questions.push({ id: questionId, label, order: qNum - 1, max_marks: 0, is_container: true, mark_scheme: {} })
|
||||
bands.push({ questionId, top, bottom })
|
||||
for (const b of [top, bottom]) {
|
||||
boundaries.push({ id: stableUuid(b.id), question_id: questionId, label: b === top ? `${label} start` : `${label} end`, page_index: pageForShape(b, pageLayouts) - 1, y: b.y, bounds: bounds(b), source: 'manual', confirmed: true })
|
||||
}
|
||||
}
|
||||
|
||||
const partQuestionIds = new Map<string, string>()
|
||||
parts.sort((a, b) => (a.y - b.y) || (a.x - b.x)).forEach((part, index) => {
|
||||
const parentBand = bands.find((band) => bandContains(band.top, band.bottom, part))
|
||||
const qid = stableUuid(part.questionId || part.id)
|
||||
partQuestionIds.set(part.id, qid)
|
||||
questions.push({ id: qid, parent_id: parentBand?.questionId ?? null, label: part.label || `Part ${index + 1}`, order: index, max_marks: Number(part.maxMarks ?? 0), answer_type: part.answerType ?? 'written', mcq_options: null, mark_scheme: {}, is_container: false, spec_ref: null, bounds: bounds(part), page: pageForShape(part, pageLayouts) })
|
||||
})
|
||||
|
||||
const response_areas: TemplateReplacePayload['response_areas'] = []
|
||||
for (const region of regions) {
|
||||
const containingPart = parts.find((part) => contains(bounds(part), bounds(region)))
|
||||
const regionPage = pageForShape(region, pageLayouts)
|
||||
const fallbackPart = parts.find((part) => pageForShape(part, pageLayouts) === regionPage) ?? parts[0]
|
||||
const questionId = containingPart ? partQuestionIds.get(containingPart.id) : fallbackPart ? partQuestionIds.get(fallbackPart.id) : undefined
|
||||
if (!questionId) continue
|
||||
const kind = region.kind as ExamCanvasRegionKind
|
||||
response_areas.push({ id: stableUuid(region.id), question_id: questionId, page: regionPage, bounds: bounds(region), kind, response_form: kind === 'response' ? (region.responseForm ?? 'lines') : null, context_type: kind === 'context' ? (region.contextType ?? 'generic') : null, source: 'manual', confirmed: true, confidence: null })
|
||||
}
|
||||
|
||||
return { meta: { title: template.title, subject: template.subject ?? undefined, page_count: pageLayouts?.length ?? template.page_count ?? undefined, status: template.status }, questions, response_areas, boundaries }
|
||||
}
|
||||
|
||||
export function shapesFromTemplate(detail: ExamTemplateDetail): ExamCanvasShapeModel[] {
|
||||
const shapes: ExamCanvasShapeModel[] = []
|
||||
const questions = new Map(detail.questions.map((q) => [q.id, q]))
|
||||
for (const b of detail.boundaries ?? []) {
|
||||
const bb = b.bounds ?? { x: 48, y: b.y, w: PAGE_WIDTH - 96, h: 8 }
|
||||
shapes.push({ id: stableUuid(b.id), kind: 'boundary', x: Number(bb.x ?? 48), y: Number(bb.y ?? b.y), w: Number(bb.w ?? PAGE_WIDTH - 96), h: Number(bb.h ?? 8), label: b.label ?? undefined, questionId: b.question_id })
|
||||
}
|
||||
for (const q of detail.questions ?? []) {
|
||||
if (q.is_container || !q.bounds) continue
|
||||
shapes.push({ id: stableUuid(q.id), kind: 'part', x: Number(q.bounds.x ?? 80), y: Number(q.bounds.y ?? 120), w: Number(q.bounds.w ?? 420), h: Number(q.bounds.h ?? 180), label: q.label, maxMarks: q.max_marks, answerType: q.answer_type ?? 'written', questionId: q.id })
|
||||
}
|
||||
for (const r of detail.response_areas ?? []) {
|
||||
const bb = r.bounds ?? { x: 100, y: (r.page - 1) * PAGE_HEIGHT + 360, w: 360, h: 120 }
|
||||
const q = questions.get(r.question_id)
|
||||
shapes.push({ id: stableUuid(r.id), kind: r.kind, x: Number(bb.x ?? 100), y: Number(bb.y ?? (r.page - 1) * PAGE_HEIGHT + 360), w: Number(bb.w ?? 360), h: Number(bb.h ?? 120), label: q ? `→ ${q.label}` : r.kind, responseForm: r.response_form ?? undefined, contextType: r.context_type ?? undefined, questionId: r.question_id })
|
||||
}
|
||||
return shapes
|
||||
}
|
||||
Reference in New Issue
Block a user