| | |
| | | import { styled } from '@mui/material/styles'; |
| | | import { useTranslate } from 'react-admin'; |
| | | |
| | | const Input = styled(MuiInput)` |
| | | width: 42px; |
| | | `; |
| | | |
| | | const MapSettings = (props) => { |
| | | const { sprite, onSubmit } = props; |
| | | const translate = useTranslate(); |
| | |
| | | return ( |
| | | <Box component="form" onSubmit={handleSubmit(onFormSubmit)} noValidate sx={{ mt: 0 }}> |
| | | <Grid container spacing={2}> |
| | | {/* 位置 */} |
| | | {/* position */} |
| | | <Grid item xs={12}> |
| | | <Typography variant="inherit"> |
| | | {translate('page.map.settings.map.base.position')} |
| | |
| | | </Grid> |
| | | <Grid item xs={6} pt={0} sx={{ |
| | | paddingTop: '8px !important', |
| | | paddingLeft: '8px !important', |
| | | }}> |
| | | <Controller |
| | | name="x" |
| | |
| | | </Grid> |
| | | <Grid item xs={6} sx={{ |
| | | paddingTop: '8px !important', |
| | | paddingLeft: '8px !important', |
| | | }}> |
| | | <Controller |
| | | name="y" |
| | |
| | | /> |
| | | </Grid> |
| | | |
| | | {/* 缩放 */} |
| | | {/* scale */} |
| | | <Grid item xs={12}> |
| | | <Typography variant="inherit"> |
| | | {translate('page.map.settings.map.base.scale')} |
| | |
| | | </Grid> |
| | | <Grid item xs={6} sx={{ |
| | | paddingTop: '8px !important', |
| | | paddingLeft: '8px !important', |
| | | }}> |
| | | <Controller |
| | | name="scaleX" |
| | |
| | | </Grid> |
| | | <Grid item xs={6} sx={{ |
| | | paddingTop: '8px !important', |
| | | paddingLeft: '8px !important', |
| | | }}> |
| | | <Controller |
| | | name="scaleY" |
| | |
| | | /> |
| | | </Grid> |
| | | |
| | | {/* 旋转 */} |
| | | {/* rotation */} |
| | | <Grid item xs={12}> |
| | | <Typography variant="inherit"> |
| | | {translate('page.map.settings.map.base.rotation')} |
| | |
| | | </Grid> |
| | | <Grid item xs={12}> |
| | | <Box display="flex" alignItems="center"> |
| | | <Box flex={1} mr={2}> |
| | | <Box flex={1} mr={3}> |
| | | <Controller |
| | | name="rotation" |
| | | control={control} |
| | | render={({ field }) => ( |
| | | <Slider |
| | | {...field} |
| | | size="small" |
| | | // size="small" |
| | | min={0} |
| | | max={360} |
| | | step={1} |
| | |
| | | )} |
| | | /> |
| | | </Box> |
| | | <Box width={80}> |
| | | <Box > |
| | | <Controller |
| | | name="rotation" |
| | | control={control} |
| | | render={({ field }) => ( |
| | | <TextField |
| | | <MuiInput |
| | | {...field} |
| | | label="" |
| | | type="number" |
| | | fullWidth |
| | | inputProps={{ min: 0, max: 360 }} |
| | | size="small" |
| | | value={field.value} |
| | | onChange={(e) => { |
| | | const value = parseFloat(e.target.value); |
| | | const value = e.target.value === '' ? 0 : Number(e.target.value); |
| | | if (!isNaN(value)) { |
| | | field.onChange(value); |
| | | updateSprite({ ...watchAllFields, rotation: value }); |
| | | } |
| | | }} |
| | | onBlur={() => { |
| | | if (field.value < 0) { |
| | | field.onChange(0); |
| | | } else if (field.value > 360) { |
| | | field.onChange(360); |
| | | } |
| | | }} |
| | | inputProps={{ |
| | | step: 1, |
| | | min: 0, |
| | | max: 360, |
| | | type: 'number', |
| | | 'aria-labelledby': 'input-slider', |
| | | }} |
| | | /> |
| | | )} |
| | |
| | | <Divider /> |
| | | </Grid> |
| | | |
| | | {/* 复制 */} |
| | | {/* copy */} |
| | | <Grid item xs={12}> |
| | | <Typography variant="inherit"> |
| | | {translate('page.map.settings.map.copy.title')} |
| | |
| | | </Grid> |
| | | <Grid item xs={6} sx={{ |
| | | paddingTop: '8px !important', |
| | | paddingLeft: '8px !important', |
| | | }}> |
| | | <Controller |
| | | name="copyDirection" |
| | |
| | | </Grid> |
| | | <Grid item xs={6} sx={{ |
| | | paddingTop: '8px !important', |
| | | paddingLeft: '8px !important', |
| | | }}> |
| | | <Controller |
| | | name="copyCount" |
| | |
| | | /> |
| | | </Grid> |
| | | |
| | | {/* 提交按钮 */} |
| | | {/* more */} |
| | | <Grid item xs={12}> |
| | | <Typography variant="inherit"> |
| | | {translate('page.map.settings.map.more.title')} |
| | | </Typography> |
| | | </Grid> |
| | | <Grid item xs={12}> |
| | | <Stack direction="row" spacing={2}> |
| | | <Button type="submit" variant="contained" color="primary"> |
| | | {translate('ra.action.confirm')} |
| | | </Button> |
| | | <Button variant="outlined" color="secondary" onClick={() => reset()}> |
| | | {translate('common.action.reset')} |
| | | <Button variant="outlined" color="error"> |
| | | {translate('ra.action.delete')} |
| | | </Button> |
| | | </Stack> |
| | | </Grid> |