From cc91a835ff9fbf3e9e33ac5a9ea51432f9f3bf24 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期四, 10 十月 2024 16:11:01 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/settings/MapSettings.jsx | 157 ++++++++++++++++++++++++++++++++++------------------ 1 files changed, 102 insertions(+), 55 deletions(-) diff --git a/zy-acs-flow/src/map/settings/MapSettings.jsx b/zy-acs-flow/src/map/settings/MapSettings.jsx index 1e40325..f482e67 100644 --- a/zy-acs-flow/src/map/settings/MapSettings.jsx +++ b/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} -- Gitblit v1.9.1