|
import React, {useState} from 'react'; |
|
import FormControlLabel from '@mui/material/FormControlLabel'; |
|
import Checkbox from '@mui/material/Checkbox'; |
|
import {SketchPicker} from 'react-color'; |
|
import {Accordion, AccordionSummary, AccordionDetails} from '@mui/material'; |
|
import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; |
|
import Box from '@mui/material/Box'; |
|
|
|
function CanvasSettingsPanel({setCanvasBgColor, setCanvasGround, setCanvasGrid, setCanvasAxis}) { |
|
const [bgColorChecked, setBgColorChecked] = useState(false); |
|
const [bgColor, setBgColor] = useState(); |
|
const [groundChecked, setGroundChecked] = useState(true); |
|
const [axisChecked, setAxisChecked] = useState(true); |
|
const [gridChecked, setGridChecked] = useState(true); |
|
|
|
return ( |
|
<div> |
|
<Box mb={1} mt={1}> |
|
<Accordion> |
|
<AccordionSummary expandIcon={<ExpandMoreIcon/>}> |
|
Canvas |
|
</AccordionSummary> |
|
<AccordionDetails> |
|
<FormControlLabel |
|
control={ |
|
<Checkbox |
|
checked={bgColorChecked} |
|
onChange={(event) => { |
|
setBgColorChecked(event.target.checked); |
|
}} |
|
color="primary" |
|
/> |
|
} |
|
label={'Background Color'} |
|
/> |
|
{bgColorChecked && ( |
|
<SketchPicker |
|
color={bgColor} |
|
onChangeComplete={(color) => { |
|
setBgColor(color); |
|
setCanvasBgColor(color); |
|
}} |
|
disableAlpha={true} |
|
/> |
|
)} |
|
<FormControlLabel |
|
control={ |
|
<Checkbox |
|
checked={groundChecked} |
|
onChange={(event) => { |
|
setGroundChecked(event.target.checked); |
|
|
|
if (setCanvasGround) { |
|
setCanvasGround(event.target.checked); |
|
} |
|
}} |
|
color="primary" |
|
/> |
|
} |
|
label='Ground' |
|
/> |
|
<FormControlLabel |
|
control={ |
|
<Checkbox |
|
checked={gridChecked} |
|
onChange={(event) => { |
|
setGridChecked(event.target.checked); |
|
setCanvasGrid(event.target.checked) |
|
}} |
|
color="primary" |
|
/> |
|
} |
|
label='Grid' |
|
/> |
|
<FormControlLabel |
|
control={ |
|
<Checkbox |
|
checked={axisChecked} |
|
onChange={(event) => { |
|
setAxisChecked(event.target.checked); |
|
setCanvasAxis(event.target.checked) |
|
}} |
|
color="primary" |
|
/> |
|
} |
|
label='Axis' |
|
/> |
|
</AccordionDetails> |
|
</Accordion> |
|
</Box> |
|
</div> |
|
); |
|
} |
|
|
|
export default CanvasSettingsPanel; |
|
|