export const FractionWall: React.FC<FractionWallProps> = ( numerator, denominator, onSliceClick ) => const canvasRef = useRef<HTMLCanvasElement>(null);
canvas.renderAll(); return () => canvas.dispose(); , [numerator, denominator]);
for (let i = 0; i < denominator; i++) const rect = new fabric.Rect( left: i * sliceWidth, top: 0, width: sliceWidth - 2, height: height, fill: i < numerator ? '#3b82f6' : '#e2e8f0', stroke: '#1e293b', strokeWidth: 1, selectable: true, hasControls: false, hasBorders: true, data: index: i );
Mathsframe !exclusive! May 2026
export const FractionWall: React.FC<FractionWallProps> = ( numerator, denominator, onSliceClick ) => const canvasRef = useRef<HTMLCanvasElement>(null);
canvas.renderAll(); return () => canvas.dispose(); , [numerator, denominator]); mathsframe
for (let i = 0; i < denominator; i++) const rect = new fabric.Rect( left: i * sliceWidth, top: 0, width: sliceWidth - 2, height: height, fill: i < numerator ? '#3b82f6' : '#e2e8f0', stroke: '#1e293b', strokeWidth: 1, selectable: true, hasControls: false, hasBorders: true, data: index: i ); export const FractionWall: React