#

luxiaotao1123

2024-10-10 cc91a835ff9fbf3e9e33ac5a9ea51432f9f3bf24

#

 zy-acs-flow/src/map/settings/MapSettings.jsx

@@ -12,14 +12,21 @@
    InputLabel,
    FormControl,
    Stack,
    Divider,
} from '@mui/material';
import MuiInput from '@mui/material/Input';
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();

    const { control, handleSubmit, reset, watch, setValue } = useForm({
    const { control, handleSubmit, reset, watch } = useForm({
        defaultValues: {
            x: sprite?.position.x || 0,
            y: sprite?.position.y || 0,
@@ -79,14 +86,17 @@

    return (
        <Box component="form" onSubmit={handleSubmit(onFormSubmit)} noValidate sx={{ mt: 0 }}>
            <Grid container spacing={1}>
            <Grid container spacing={2}>
                {/* 位置 */}
                <Grid item xs={12}>
                    <Typography variant="button">
                    <Typography variant="inherit">
                        {translate('page.map.settings.map.base.position')}
                    </Typography>
                </Grid>
                <Grid item xs={6}>
                <Grid item xs={6} pt={0} sx={{
                    paddingTop: '8px !important',
                    paddingLeft: '8px !important',
                }}>
                    <Controller
                        name="x"
                        control={control}
@@ -97,14 +107,20 @@
                                type="number"
                                fullWidth
                                onChange={(e) => {
                                    const value = parseFloat(e.target.value);
                                    field.onChange(e);
                                    updateSprite({ ...watchAllFields, x: parseFloat(e.target.value) });
                                    if (!isNaN(value)) {
                                        updateSprite({ ...watchAllFields, x: value });
                                    }
                                }}
                            />
                        )}
                    />
                </Grid>
                <Grid item xs={6}>
                <Grid item xs={6} sx={{
                    paddingTop: '8px !important',
                    paddingLeft: '8px !important',
                }}>
                    <Controller
                        name="y"
                        control={control}
@@ -115,8 +131,11 @@
                                type="number"
                                fullWidth
                                onChange={(e) => {
                                    const value = parseFloat(e.target.value);
                                    field.onChange(e);
                                    updateSprite({ ...watchAllFields, y: parseFloat(e.target.value) });
                                    if (!isNaN(value)) {
                                        updateSprite({ ...watchAllFields, y: value });
                                    }
                                }}
                            />
                        )}
@@ -125,43 +144,55 @@

                {/* 缩放 */}
                <Grid item xs={12}>
                    <Typography variant="button">
                    <Typography variant="inherit">
                        {translate('page.map.settings.map.base.scale')}
                    </Typography>
                </Grid>
                <Grid item xs={6}>
                <Grid item xs={6} sx={{
                    paddingTop: '8px !important',
                    paddingLeft: '8px !important',
                }}>
                    <Controller
                        name="scaleX"
                        control={control}
                        render={({ field }) => (
                            <TextField
                                {...field}
                                label="Scale X"
                                label="X"
                                type="number"
                                fullWidth
                                inputProps={{ step: 0.1, min: 0.1, max: 10 }}
                                onChange={(e) => {
                                    const value = parseFloat(e.target.value);
                                    field.onChange(e);
                                    updateSprite({ ...watchAllFields, scaleX: parseFloat(e.target.value) });
                                    if (!isNaN(value)) {
                                        updateSprite({ ...watchAllFields, scaleX: value });
                                    }
                                }}
                            />
                        )}
                    />
                </Grid>
                <Grid item xs={6}>
                <Grid item xs={6} sx={{
                    paddingTop: '8px !important',
                    paddingLeft: '8px !important',
                }}>
                    <Controller
                        name="scaleY"
                        control={control}
                        render={({ field }) => (
                            <TextField
                                {...field}
                                label="Scale Y"
                                label="Y"
                                type="number"
                                fullWidth
                                inputProps={{ step: 0.1, min: 0.1, max: 10 }}
                                onChange={(e) => {
                                    const value = parseFloat(e.target.value);
                                    field.onChange(e);
                                    updateSprite({ ...watchAllFields, scaleY: parseFloat(e.target.value) });
                                    if (!isNaN(value)) {
                                        updateSprite({ ...watchAllFields, scaleY: value });
                                    }
                                }}
                            />
                        )}
@@ -170,58 +201,71 @@

                {/* 旋转 */}
                <Grid item xs={12}>
                    <Typography variant="button">
                    <Typography variant="inherit">
                        {translate('page.map.settings.map.base.rotation')}
                    </Typography>
                </Grid>
                <Grid item xs={8}>
                    <Controller
                        name="rotation"
                        control={control}
                        render={({ field }) => (
                            <Slider
                                {...field}
                                min={0}
                                max={360}
                                step={1}
                                marks={rotationMarks}
                                valueLabelDisplay="auto"
                                valueLabelFormat={(value) => `${value}°`}
                                onChange={(e, value) => {
                                    field.onChange(value);
                                    updateSprite({ ...watchAllFields, rotation: value });
                                }}
                <Grid item xs={12}>
                    <Box display="flex" alignItems="center">
                        <Box flex={1} mr={2}>
                            <Controller
                                name="rotation"
                                control={control}
                                render={({ field }) => (
                                    <Slider
                                        {...field}
                                        size="small"
                                        min={0}
                                        max={360}
                                        step={1}
                                        valueLabelDisplay="auto"
                                        valueLabelFormat={(value) => `${value}°`}
                                        onChange={(e, value) => {
                                            field.onChange(value);
                                            updateSprite({ ...watchAllFields, rotation: value });
                                        }}
                                    />
                                )}
                            />
                        )}
                    />
                        </Box>
                        <Box width={80}>
                            <Controller
                                name="rotation"
                                control={control}
                                render={({ field }) => (
                                    <TextField
                                        {...field}
                                        label=""
                                        type="number"
                                        fullWidth
                                        inputProps={{ min: 0, max: 360 }}
                                        onChange={(e) => {
                                            const value = parseFloat(e.target.value);
                                            if (!isNaN(value)) {
                                                field.onChange(value);
                                                updateSprite({ ...watchAllFields, rotation: value });
                                            }
                                        }}
                                    />
                                )}
                            />
                        </Box>
                    </Box>
                </Grid>
                <Grid item xs={4}>
                    <Controller
                        name="rotation"
                        control={control}
                        render={({ field }) => (
                            <TextField
                                {...field}
                                label={`${translate('page.map.settings.map.base.rotation')} (°)`}
                                type="number"
                                fullWidth
                                inputProps={{ min: 0, max: 360 }}
                                onChange={(e) => {
                                    field.onChange(e);
                                    updateSprite({ ...watchAllFields, rotation: parseFloat(e.target.value) });
                                }}
                            />
                        )}
                    />
                <Grid item xs={12}>
                    <Divider />
                </Grid>

                {/* 复制 */}
                <Grid item xs={12}>
                    <Typography variant="button">
                    <Typography variant="inherit">
                        {translate('page.map.settings.map.copy.title')}
                    </Typography>
                </Grid>
                <Grid item xs={6}>
                <Grid item xs={6} sx={{
                    paddingTop: '8px !important',
                    paddingLeft: '8px !important',
                }}>
                    <Controller
                        name="copyDirection"
                        control={control}
@@ -251,7 +295,10 @@
                        )}
                    />
                </Grid>
                <Grid item xs={6}>
                <Grid item xs={6} sx={{
                    paddingTop: '8px !important',
                    paddingLeft: '8px !important',
                }}>
                    <Controller
                        name="copyCount"
                        control={control}