|  |  | 
 |  |  |     Divider, | 
 |  |  | } from '@mui/material'; | 
 |  |  | import MuiInput from '@mui/material/Input'; | 
 |  |  | import { styled } from '@mui/material/styles'; | 
 |  |  | import { useTranslate } from 'react-admin'; | 
 |  |  | import * as Tool from '../tool'; | 
 |  |  | import ConfirmButton from '../../page/components/ConfirmButton'; | 
 |  |  |  | 
 |  |  | const MapSettings = (props) => { | 
 |  |  |     const { sprite, onSubmit } = props; | 
 |  |  |     const { sprite, setSpriteSettings, onSubmit } = props; | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |  | 
 |  |  |     const { control, handleSubmit, reset, watch } = useForm({ | 
 |  |  | 
 |  |  |             rotation: (sprite?.rotation * 180) / Math.PI || 0, | 
 |  |  |             copyDirection: 'right', | 
 |  |  |             copyCount: 1, | 
 |  |  |             // 其他默认值... | 
 |  |  |         }, | 
 |  |  |     }); | 
 |  |  |  | 
 |  |  |     // 监听所有字段的变化 | 
 |  |  |     const watchAllFields = watch(); | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  | 
 |  |  |                 scaleX: sprite.scale.x, | 
 |  |  |                 scaleY: sprite.scale.y, | 
 |  |  |                 rotation: (sprite.rotation * 180) / Math.PI, | 
 |  |  |                 // 设置其他字段的初始值 | 
 |  |  |             }); | 
 |  |  |         } | 
 |  |  |     }, [sprite, reset]); | 
 |  |  |  | 
 |  |  |     // 更新精灵属性的函数 | 
 |  |  |     const updateSprite = (data) => { | 
 |  |  |         if (sprite) { | 
 |  |  |             sprite.position.x = data.x; | 
 |  |  | 
 |  |  |             sprite.scale.x = data.scaleX; | 
 |  |  |             sprite.scale.y = data.scaleY; | 
 |  |  |             sprite.rotation = (data.rotation * Math.PI) / 180; | 
 |  |  |             // 更新其他属性... | 
 |  |  |         } | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     // 处理表单提交 | 
 |  |  |     const onFormSubmit = (data) => { | 
 |  |  |         updateSprite(data); | 
 |  |  |         if (onSubmit) { | 
 |  |  | 
 |  |  |         } | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     // 旋转滑块的刻度 | 
 |  |  |     const rotationMarks = [ | 
 |  |  |         { value: 0, label: '0°' }, | 
 |  |  |         { value: 90, label: '90°' }, | 
 |  |  |         { value: 180, label: '180°' }, | 
 |  |  |         { value: 270, label: '270°' }, | 
 |  |  |         { value: 360, label: '360°' }, | 
 |  |  |     ]; | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <Box component="form" onSubmit={handleSubmit(onFormSubmit)} noValidate sx={{ mt: 0 }}> | 
 |  |  |             <Grid container spacing={2}> | 
 |  |  |             <Grid container spacing={1.4}> | 
 |  |  |                 {/* position */} | 
 |  |  |                 <Grid item xs={12}> | 
 |  |  |                     <Typography variant="inherit"> | 
 |  |  | 
 |  |  |                         </Box> | 
 |  |  |                     </Box> | 
 |  |  |                 </Grid> | 
 |  |  |  | 
 |  |  |                 <Grid item xs={12}> | 
 |  |  |                     <Divider /> | 
 |  |  |                 </Grid> | 
 |  |  | 
 |  |  |                         )} | 
 |  |  |                     /> | 
 |  |  |                 </Grid> | 
 |  |  |                 <Grid item xs={12}> | 
 |  |  |                     <Stack direction="row" spacing={2}> | 
 |  |  |                         <Button variant="contained" color="primary"> | 
 |  |  |                             {translate('page.map.settings.map.copy.execute')} | 
 |  |  |                         </Button> | 
 |  |  |                         <Button variant="text" color="primary"> | 
 |  |  |                             {translate('page.map.settings.map.copy.reverse')} | 
 |  |  |                         </Button> | 
 |  |  |                     </Stack> | 
 |  |  |                 </Grid> | 
 |  |  |  | 
 |  |  |                 <Grid item xs={12}> | 
 |  |  |                     <Divider /> | 
 |  |  |                 </Grid> | 
 |  |  |  | 
 |  |  |                 {/* more */} | 
 |  |  |                 <Grid item xs={12}> | 
 |  |  | 
 |  |  |                 </Grid> | 
 |  |  |                 <Grid item xs={12}> | 
 |  |  |                     <Stack direction="row" spacing={2}> | 
 |  |  |                         <Button variant="outlined" color="error"> | 
 |  |  |                         <Button variant="outlined" color="error" onClick={() => { | 
 |  |  |                             Tool.getMapContainer().removeChild(sprite); | 
 |  |  |                             setSpriteSettings(null); | 
 |  |  |                             Tool.removeSelectedEffect(); | 
 |  |  |                             reset(); | 
 |  |  |                         }}> | 
 |  |  |                             {translate('ra.action.delete')} | 
 |  |  |                         </Button> | 
 |  |  |                         {/* <ConfirmButton /> */} | 
 |  |  |                     </Stack> | 
 |  |  |                 </Grid> | 
 |  |  |             </Grid> |