From cbd9fde3a2f8d4f5c45bea1a5215ad843e8dabc6 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期四, 10 十月 2024 14:32:45 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/settings/index.jsx | 22 ++- zy-acs-flow/src/map/settings/MapSettings.jsx | 238 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 251 insertions(+), 9 deletions(-) diff --git a/zy-acs-flow/src/map/settings/MapSettings.jsx b/zy-acs-flow/src/map/settings/MapSettings.jsx new file mode 100644 index 0000000..c0c4a4b --- /dev/null +++ b/zy-acs-flow/src/map/settings/MapSettings.jsx @@ -0,0 +1,238 @@ +import React, { useEffect } from 'react'; +import { useForm, Controller } from 'react-hook-form'; +import { + Box, + Grid, + Typography, + TextField, + Slider, + Button, + Select, + MenuItem, + InputLabel, + FormControl, + FormHelperText, + Checkbox, + FormControlLabel, + Stack, +} from '@mui/material'; +import { useTranslate } from 'react-admin'; + +const MapSettings = (props) => { + const { sprite, onSubmit } = props; + const translate = useTranslate(); + + const { control, handleSubmit, reset, watch, setValue } = useForm({ + defaultValues: { + x: sprite?.position.x || 0, + y: sprite?.position.y || 0, + scaleX: sprite?.scale.x || 1, + scaleY: sprite?.scale.y || 1, + rotation: (sprite?.rotation * 180) / Math.PI || 0, + copyDirection: 'right', + copyCount: 1, + // 鍏朵粬榛樿鍊�... + }, + }); + + // 鐩戝惉琛ㄥ崟鍊肩殑鍙樺寲 + const watchAllFields = watch(); + + useEffect(() => { + if (sprite) { + reset({ + x: sprite.position.x, + y: sprite.position.y, + 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.position.y = data.y; + sprite.scale.x = data.scaleX; + sprite.scale.y = data.scaleY; + sprite.rotation = (data.rotation * Math.PI) / 180; + // 鏇存柊鍏朵粬灞炴��... + } + }; + + // 澶勭悊琛ㄥ崟鎻愪氦 + const onFormSubmit = (data) => { + updateSprite(data); + if (onSubmit) { + onSubmit(data); + } + }; + + return ( + <Box component="form" onSubmit={handleSubmit(onFormSubmit)} noValidate sx={{ mt: 2 }}> + <Grid container spacing={2}> + {/* 浣嶇疆 */} + <Grid item xs={12}> + <Typography variant="h6">{translate('map.settings.position')}</Typography> + </Grid> + <Grid item xs={6}> + <Controller + name="x" + control={control} + render={({ field }) => ( + <TextField + {...field} + label="X" + type="number" + fullWidth + onChange={(e) => { + field.onChange(e); + updateSprite({ ...watchAllFields, x: parseFloat(e.target.value) }); + }} + /> + )} + /> + </Grid> + <Grid item xs={6}> + <Controller + name="y" + control={control} + render={({ field }) => ( + <TextField + {...field} + label="Y" + type="number" + fullWidth + onChange={(e) => { + field.onChange(e); + updateSprite({ ...watchAllFields, y: parseFloat(e.target.value) }); + }} + /> + )} + /> + </Grid> + + {/* 缂╂斁 */} + <Grid item xs={12}> + <Typography variant="h6">{translate('map.settings.scale')}</Typography> + </Grid> + <Grid item xs={6}> + <Controller + name="scaleX" + control={control} + render={({ field }) => ( + <TextField + {...field} + label="Scale X" + type="number" + fullWidth + inputProps={{ step: 0.1, min: 0.1, max: 10 }} + onChange={(e) => { + field.onChange(e); + updateSprite({ ...watchAllFields, scaleX: parseFloat(e.target.value) }); + }} + /> + )} + /> + </Grid> + <Grid item xs={6}> + <Controller + name="scaleY" + control={control} + render={({ field }) => ( + <TextField + {...field} + label="Scale Y" + type="number" + fullWidth + inputProps={{ step: 0.1, min: 0.1, max: 10 }} + onChange={(e) => { + field.onChange(e); + updateSprite({ ...watchAllFields, scaleY: parseFloat(e.target.value) }); + }} + /> + )} + /> + </Grid> + + {/* 鏃嬭浆 */} + <Grid item xs={12}> + <Typography variant="h6">{translate('map.settings.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 }); + }} + /> + )} + /> + </Grid> + + {/* 澶嶅埗 */} + <Grid item xs={12}> + <Typography variant="h6">{translate('map.settings.copy')}</Typography> + </Grid> + <Grid item xs={6}> + <Controller + name="copyDirection" + control={control} + render={({ field }) => ( + <FormControl fullWidth> + <InputLabel>{translate('map.settings.copyDirection')}</InputLabel> + <Select {...field} label={translate('map.settings.copyDirection')}> + <MenuItem value="left">{translate('map.settings.left')}</MenuItem> + <MenuItem value="right">{translate('map.settings.right')}</MenuItem> + <MenuItem value="up">{translate('map.settings.up')}</MenuItem> + <MenuItem value="down">{translate('map.settings.down')}</MenuItem> + </Select> + </FormControl> + )} + /> + </Grid> + <Grid item xs={6}> + <Controller + name="copyCount" + control={control} + render={({ field }) => ( + <TextField + {...field} + label={translate('map.settings.copyCount')} + type="number" + fullWidth + inputProps={{ min: 1 }} + /> + )} + /> + </Grid> + + {/* 鎻愪氦鎸夐挳 */} + <Grid item xs={12}> + <Stack direction="row" spacing={2}> + <Button type="submit" variant="contained" color="primary"> + {translate('common.submit')} + </Button> + <Button variant="outlined" color="secondary" onClick={() => reset()}> + {translate('common.reset')} + </Button> + </Stack> + </Grid> + </Grid> + </Box> + ); +}; + +export default MapSettings; diff --git a/zy-acs-flow/src/map/settings/index.jsx b/zy-acs-flow/src/map/settings/index.jsx index d4aa0ec..22a7176 100644 --- a/zy-acs-flow/src/map/settings/index.jsx +++ b/zy-acs-flow/src/map/settings/index.jsx @@ -3,6 +3,7 @@ import { Drawer, Box, Typography, Tabs, Tab, IconButton, Stack, useTheme, Card, CardContent, CardHeader, Divider } from '@mui/material'; import CloseIcon from '@mui/icons-material/Close'; import { PAGE_DRAWER_WIDTH } from '@/config/setting'; +import MapSettings from './MapSettings'; const Settings = (props) => { const { open, onCancel, sprite, width = PAGE_DRAWER_WIDTH, title } = props; @@ -70,10 +71,20 @@ <Box p={3}> {activeTab === 0 && ( - <MapSettings sprite={sprite} onSubmit={() => { /* 琛ㄥ崟鎻愪氦閫昏緫 */ }} /> + <MapSettings + sprite={sprite} + onSubmit={() => { + alert('MapSettings') + }} + /> )} {activeTab === 1 && ( - <ConfigSettings sprite={sprite} onSubmit={() => { /* 琛ㄥ崟鎻愪氦閫昏緫 */ }} /> + <ConfigSettings + sprite={sprite} + onSubmit={() => { + alert('ConfigSettings') + }} + /> )} </Box> </CardContent> @@ -83,13 +94,6 @@ )} </Drawer> </> - ) -} - -const MapSettings = () => { - - return ( - <h1>MapSettings</h1> ) } -- Gitblit v1.9.1