#

luxiaotao1123

2024-10-11 ae9f5505eb01efdfd6a7a6ac9d84b77aa741052d

 zy-acs-flow/src/map/settings/MapSettings.jsx

@@ -1,4 +1,4 @@
import React, { useEffect } from 'react';
import React, { useEffect, useState } from 'react';
import { useForm, Controller } from 'react-hook-form';
import {
    Box,
@@ -15,12 +15,15 @@
    Divider,
} from '@mui/material';
import MuiInput from '@mui/material/Input';
import { styled } from '@mui/material/styles';
import { useTranslate } from 'react-admin';
import * as Tool from '../tool';
import ConfirmButton from '../../page/components/ConfirmButton';
import CopyDrawer from './CopyDrawer';

const MapSettings = (props) => {
    const { sprite, onSubmit } = props;
    const { sprite, setSpriteSettings, onSubmit, width } = props;
    const translate = useTranslate();
    const [copyVisible, setCopyVisible] = useState(false);

    const { control, handleSubmit, reset, watch } = useForm({
        defaultValues: {
@@ -31,27 +34,24 @@
            rotation: (sprite?.rotation * 180) / Math.PI || 0,
            copyDirection: 'right',
            copyCount: 1,
            // 其他默认值...
        },
    });

    // 监听所有字段的变化
    const watchAllFields = watch();

    useEffect(() => {
        if (sprite) {
            setCopyVisible(false);
            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;
@@ -59,11 +59,9 @@
            sprite.scale.x = data.scaleX;
            sprite.scale.y = data.scaleY;
            sprite.rotation = (data.rotation * Math.PI) / 180;
            // 更新其他属性...
        }
    };

    // 处理表单提交
    const onFormSubmit = (data) => {
        updateSprite(data);
        if (onSubmit) {
@@ -71,18 +69,9 @@
        }
    };

    // 旋转滑块的刻度
    const rotationMarks = [
        { value: 0, label: '0°' },
        { value: 90, label: '90°' },
        { value: 180, label: '180°' },
        { value: 270, label: '270°' },
        { value: 360, label: '360°' },
    ];

    return (
        <Box component="form" onSubmit={handleSubmit(onFormSubmit)} noValidate sx={{ mt: 0 }}>
            <Grid container spacing={1.5}>
            <Grid container spacing={1.4}>
                {/* position */}
                <Grid item xs={12}>
                    <Typography variant="inherit">
@@ -318,7 +307,9 @@
                </Grid>
                <Grid item xs={12}>
                    <Stack direction="row" spacing={2}>
                        <Button variant="contained" color="primary">
                        <Button variant="contained" color="primary" onClick={() => {
                            setCopyVisible(true);
                        }}>
                            {translate('page.map.settings.map.copy.execute')}
                        </Button>
                        <Button variant="text" color="primary">
@@ -326,6 +317,14 @@
                        </Button>
                    </Stack>
                </Grid>

                <CopyDrawer
                    open={copyVisible}
                    onCancel={() => {
                        setCopyVisible(false);
                    }}
                    width={width}
                />

                <Grid item xs={12}>
                    <Divider />
@@ -339,9 +338,15 @@
                </Grid>
                <Grid item xs={12}>
                    <Stack direction="row" spacing={2}>
                        <Button variant="outlined" color="error">
                        <Button variant="outlined" color="error" onClick={() => {
                            Tool.getMapContainer().removeChild(sprite);
                            setSpriteSettings(null);
                            Tool.removeSelectedEffect();
                            reset();
                        }}>
                            {translate('ra.action.delete')}
                        </Button>
                        {/* <ConfirmButton /> */}
                    </Stack>
                </Grid>
            </Grid>