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