From 3f44e255fa087e3d2bc1595136fee14276c1e077 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期四, 10 十月 2024 16:52:31 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/map/settings/MapSettings.jsx | 215 +++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 159 insertions(+), 56 deletions(-)
diff --git a/zy-acs-flow/src/map/settings/MapSettings.jsx b/zy-acs-flow/src/map/settings/MapSettings.jsx
index 43995f1..65a703a 100644
--- a/zy-acs-flow/src/map/settings/MapSettings.jsx
+++ b/zy-acs-flow/src/map/settings/MapSettings.jsx
@@ -11,18 +11,17 @@
MenuItem,
InputLabel,
FormControl,
- FormHelperText,
- Checkbox,
- FormControlLabel,
Stack,
+ Divider,
} from '@mui/material';
+import MuiInput from '@mui/material/Input';
import { useTranslate } from 'react-admin';
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,
@@ -35,7 +34,7 @@
},
});
- // 鐩戝惉琛ㄥ崟鍊肩殑鍙樺寲
+ // 鐩戝惉鎵�鏈夊瓧娈电殑鍙樺寲
const watchAllFields = watch();
useEffect(() => {
@@ -63,7 +62,6 @@
}
};
- // 澶勭悊琛ㄥ崟鎻愪氦
const onFormSubmit = (data) => {
updateSprite(data);
if (onSubmit) {
@@ -72,13 +70,17 @@
};
return (
- <Box component="form" onSubmit={handleSubmit(onFormSubmit)} noValidate sx={{ mt: 2 }}>
- <Grid container spacing={2}>
- {/* 浣嶇疆 */}
+ <Box component="form" onSubmit={handleSubmit(onFormSubmit)} noValidate sx={{ mt: 0 }}>
+ <Grid container spacing={1.4}>
+ {/* position */}
<Grid item xs={12}>
- <Typography variant="h6">{translate('page.map.settings.map.base.position')}</Typography>
+ <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',
+ }}>
<Controller
name="x"
control={control}
@@ -89,14 +91,19 @@
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',
+ }}>
<Controller
name="y"
control={control}
@@ -107,103 +114,183 @@
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 });
+ }
}}
/>
)}
/>
</Grid>
- {/* 缂╂斁 */}
+ {/* scale */}
<Grid item xs={12}>
- <Typography variant="h6">{translate('page.map.settings.map.base.scale')}</Typography>
+ <Typography variant="inherit">
+ {translate('page.map.settings.map.base.scale')}
+ </Typography>
</Grid>
- <Grid item xs={6}>
+ <Grid item xs={6} sx={{
+ paddingTop: '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',
+ }}>
<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 });
+ }
}}
/>
)}
/>
</Grid>
- {/* 鏃嬭浆 */}
+ {/* rotation */}
<Grid item xs={12}>
- <Typography variant="h6">{translate('page.map.settings.map.base.rotation')}</Typography>
+ <Typography variant="inherit">
+ {translate('page.map.settings.map.base.rotation')}
+ </Typography>
</Grid>
<Grid item xs={12}>
- <Controller
- name="rotation"
- control={control}
- render={({ field }) => (
- <Slider
- {...field}
- min={0}
- max={360}
- step={1}
- valueLabelDisplay="auto"
- onChange={(e, value) => {
- field.onChange(value);
- updateSprite({ ...watchAllFields, rotation: value });
- }}
+ <Box display="flex" alignItems="center">
+ <Box flex={1} mr={3}>
+ <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 >
+ <Controller
+ name="rotation"
+ control={control}
+ render={({ field }) => (
+ <MuiInput
+ {...field}
+ size="small"
+ value={field.value}
+ onChange={(e) => {
+ 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',
+ }}
+ />
+ )}
+ />
+ </Box>
+ </Box>
</Grid>
- {/* 澶嶅埗 */}
<Grid item xs={12}>
- <Typography variant="h6">{translate('page.map.settings.map.copy.title')}</Typography>
+ <Divider />
</Grid>
- <Grid item xs={6}>
+
+ {/* copy */}
+ <Grid item xs={12}>
+ <Typography variant="inherit">
+ {translate('page.map.settings.map.copy.title')}
+ </Typography>
+ </Grid>
+ <Grid item xs={6} sx={{
+ paddingTop: '8px !important',
+ }}>
<Controller
name="copyDirection"
control={control}
render={({ field }) => (
<FormControl fullWidth>
- <InputLabel>{translate('page.map.settings.map.copy.direction')}</InputLabel>
- <Select {...field} label={translate('page.map.settings.map.copy.direction')}>
- <MenuItem value="left">{translate('page.map.settings.map.copy.left')}</MenuItem>
- <MenuItem value="right">{translate('page.map.settings.map.copy.right')}</MenuItem>
- <MenuItem value="up">{translate('page.map.settings.map.copy.up')}</MenuItem>
- <MenuItem value="down">{translate('page.map.settings.map.copy.down')}</MenuItem>
+ <InputLabel>
+ {translate('page.map.settings.map.copy.direction')}
+ </InputLabel>
+ <Select
+ {...field}
+ label={translate('page.map.settings.map.copy.direction')}
+ >
+ <MenuItem value="left">
+ {translate('page.map.settings.map.copy.left')}
+ </MenuItem>
+ <MenuItem value="right">
+ {translate('page.map.settings.map.copy.right')}
+ </MenuItem>
+ <MenuItem value="up">
+ {translate('page.map.settings.map.copy.up')}
+ </MenuItem>
+ <MenuItem value="down">
+ {translate('page.map.settings.map.copy.down')}
+ </MenuItem>
</Select>
</FormControl>
)}
/>
</Grid>
- <Grid item xs={6}>
+ <Grid item xs={6} sx={{
+ paddingTop: '8px !important',
+ }}>
<Controller
name="copyCount"
control={control}
@@ -218,15 +305,31 @@
)}
/>
</Grid>
-
- {/* 鎻愪氦鎸夐挳 */}
<Grid item xs={12}>
<Stack direction="row" spacing={2}>
- <Button type="submit" variant="contained" color="primary">
- {translate('ra.action.confirm')}
+ <Button variant="contained" color="primary">
+ {translate('page.map.settings.map.copy.execute')}
</Button>
- <Button variant="outlined" color="secondary" onClick={() => reset()}>
- {translate('common.action.reset')}
+ <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}>
+ <Typography variant="inherit">
+ {translate('page.map.settings.map.more.title')}
+ </Typography>
+ </Grid>
+ <Grid item xs={12}>
+ <Stack direction="row" spacing={2}>
+ <Button variant="outlined" color="error">
+ {translate('ra.action.delete')}
</Button>
</Stack>
</Grid>
--
Gitblit v1.9.1