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 | 7x 3x 3x 3x 2x 2x 1x 3x 3x 3x | import React, { useCallback, useMemo } from "react";
import { DrawingGraph } from "graph2d-react";
import { Box } from "@mui/material";
import { GRAPH2D_QUESTION_BANK_CANVAS_SIZE, drawingGraphFrameSx } from "./graphConstants";
import { getEmptyGraphJsonString, parseGraphAxisBounds } from "./graphAnswerUtils";
/** Placeholder canvas; still matches the question's configured range so the empty grid isn't misleading. */
const EmptyGraph = ({ graphId, graphInstance, question }) => {
const bounds = useMemo(() => parseGraphAxisBounds(question?.correctAnswer?.answers), [question]);
const handleGraphReady = useCallback(
(readyGraphId) => {
if (!graphInstance || graphId === undefined) return;
try {
graphInstance.importAnswer(getEmptyGraphJsonString(), readyGraphId ?? graphId);
} catch (error) {
console.warn(`Failed to clear graph answer for graphId ${graphId}:`, error);
}
},
[graphInstance, graphId]
);
const w = GRAPH2D_QUESTION_BANK_CANVAS_SIZE;
const h = GRAPH2D_QUESTION_BANK_CANVAS_SIZE;
return (
<Box sx={{ ...drawingGraphFrameSx, width: "100%", minWidth: 0 }}>
<DrawingGraph
key={`empty-drawing-${graphId}-${bounds.xMin}-${bounds.xMax}-${bounds.yMin}-${bounds.yMax}`}
graphId={graphId}
width={w}
height={h}
instance={graphInstance}
steps={1}
borderPixel={5}
responsive={false}
readOnly
onGraphReady={handleGraphReady}
xMin={bounds.xMin}
xMax={bounds.xMax}
yMin={bounds.yMin}
yMax={bounds.yMax}
/>
</Box>
);
};
export default EmptyGraph;
|