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