#

luxiaotao1123

2024-10-11 cfc0e56fb656d127716f3c77c1fd57a98bf3a337

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

@@ -70,287 +70,293 @@
    };

    return (
        <Box component="form" onSubmit={handleSubmit(onFormSubmit)} noValidate sx={{ mt: 0 }}>
            <Grid container spacing={1.4}>
                {/* position */}
                <Grid item xs={12}>
                    <Typography variant="inherit">
                        {translate('page.map.settings.map.base.position')}
                    </Typography>
                </Grid>
                <Grid item xs={6} pt={0} sx={{
                    paddingTop: '8px !important',
                }}>
                    <Controller
                        name="x"
                        control={control}
                        render={({ field }) => (
                            <TextField
                                {...field}
                                label="X"
                                type="number"
                                fullWidth
                                onChange={(e) => {
                                    const value = parseFloat(e.target.value);
                                    field.onChange(e);
                                    if (!isNaN(value)) {
                                        updateSprite({ ...watchAllFields, x: value });
                                    }
                                }}
                            />
                        )}
                    />
                </Grid>
                <Grid item xs={6} sx={{
                    paddingTop: '8px !important',
                }}>
                    <Controller
                        name="y"
                        control={control}
                        render={({ field }) => (
                            <TextField
                                {...field}
                                label="Y"
                                type="number"
                                fullWidth
                                onChange={(e) => {
                                    const value = parseFloat(e.target.value);
                                    field.onChange(e);
                                    if (!isNaN(value)) {
                                        updateSprite({ ...watchAllFields, y: value });
                                    }
                                }}
                            />
                        )}
                    />
                </Grid>
        <>
            <Box component="form" onSubmit={handleSubmit(onFormSubmit)} noValidate sx={{ mt: 0 }}>
                <Grid container spacing={1.4}>
                    {/* position */}
                    <Grid item xs={12}>
                        <Typography variant="inherit">
                            {translate('page.map.settings.map.base.position')}
                        </Typography>
                    </Grid>
                    <Grid item xs={6} pt={0} sx={{
                        paddingTop: '8px !important',
                    }}>
                        <Controller
                            name="x"
                            control={control}
                            render={({ field }) => (
                                <TextField
                                    {...field}
                                    label="X"
                                    type="number"
                                    fullWidth
                                    onChange={(e) => {
                                        const value = parseFloat(e.target.value);
                                        field.onChange(e);
                                        if (!isNaN(value)) {
                                            updateSprite({ ...watchAllFields, x: value });
                                        }
                                    }}
                                />
                            )}
                        />
                    </Grid>
                    <Grid item xs={6} sx={{
                        paddingTop: '8px !important',
                    }}>
                        <Controller
                            name="y"
                            control={control}
                            render={({ field }) => (
                                <TextField
                                    {...field}
                                    label="Y"
                                    type="number"
                                    fullWidth
                                    onChange={(e) => {
                                        const value = parseFloat(e.target.value);
                                        field.onChange(e);
                                        if (!isNaN(value)) {
                                            updateSprite({ ...watchAllFields, y: value });
                                        }
                                    }}
                                />
                            )}
                        />
                    </Grid>

                {/* scale */}
                <Grid item xs={12}>
                    <Typography variant="inherit">
                        {translate('page.map.settings.map.base.scale')}
                    </Typography>
                </Grid>
                <Grid item xs={6} sx={{
                    paddingTop: '8px !important',
                }}>
                    <Controller
                        name="scaleX"
                        control={control}
                        render={({ field }) => (
                            <TextField
                                {...field}
                                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);
                                    if (!isNaN(value)) {
                                        updateSprite({ ...watchAllFields, scaleX: value });
                                    }
                                }}
                            />
                        )}
                    />
                </Grid>
                <Grid item xs={6} sx={{
                    paddingTop: '8px !important',
                }}>
                    <Controller
                        name="scaleY"
                        control={control}
                        render={({ field }) => (
                            <TextField
                                {...field}
                                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);
                                    if (!isNaN(value)) {
                                        updateSprite({ ...watchAllFields, scaleY: value });
                                    }
                                }}
                            />
                        )}
                    />
                </Grid>
                    {/* scale */}
                    <Grid item xs={12}>
                        <Typography variant="inherit">
                            {translate('page.map.settings.map.base.scale')}
                        </Typography>
                    </Grid>
                    <Grid item xs={6} sx={{
                        paddingTop: '8px !important',
                    }}>
                        <Controller
                            name="scaleX"
                            control={control}
                            render={({ field }) => (
                                <TextField
                                    {...field}
                                    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);
                                        if (!isNaN(value)) {
                                            updateSprite({ ...watchAllFields, scaleX: value });
                                        }
                                    }}
                                />
                            )}
                        />
                    </Grid>
                    <Grid item xs={6} sx={{
                        paddingTop: '8px !important',
                    }}>
                        <Controller
                            name="scaleY"
                            control={control}
                            render={({ field }) => (
                                <TextField
                                    {...field}
                                    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);
                                        if (!isNaN(value)) {
                                            updateSprite({ ...watchAllFields, scaleY: value });
                                        }
                                    }}
                                />
                            )}
                        />
                    </Grid>

                {/* rotation */}
                <Grid item xs={12}>
                    <Typography variant="inherit">
                        {translate('page.map.settings.map.base.rotation')}
                    </Typography>
                </Grid>
                <Grid item xs={12}>
                    <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)) {
                    {/* rotation */}
                    <Grid item xs={12}>
                        <Typography variant="inherit">
                            {translate('page.map.settings.map.base.rotation')}
                        </Typography>
                    </Grid>
                    <Grid item xs={12}>
                        <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 });
                                            }
                                        }}
                                        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 >
                                <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>
                    </Box>
                </Grid>
                    </Grid>

                <Grid item xs={12}>
                    <Divider />
                </Grid>
                    <Grid item xs={12}>
                        <Divider />
                    </Grid>

                {/* 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
                    {/* 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>
                                    </Select>
                                </FormControl>
                            )}
                        />
                    </Grid>
                    <Grid item xs={6} sx={{
                        paddingTop: '8px !important',
                    }}>
                        <Controller
                            name="copyCount"
                            control={control}
                            render={({ field }) => (
                                <TextField
                                    {...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} sx={{
                    paddingTop: '8px !important',
                }}>
                    <Controller
                        name="copyCount"
                        control={control}
                        render={({ field }) => (
                            <TextField
                                {...field}
                                label={translate('page.map.settings.map.copy.count')}
                                type="number"
                                fullWidth
                                inputProps={{ min: 1 }}
                            />
                        )}
                    />
                </Grid>
                <Grid item xs={12}>
                    <Stack direction="row" spacing={2}>
                        <Button variant="contained" color="primary" onClick={() => {
                            setCopyVisible(true);
                        }}>
                            {translate('page.map.settings.map.copy.execute')}
                        </Button>
                        <Button variant="text" color="primary">
                            {translate('page.map.settings.map.copy.reverse')}
                        </Button>
                    </Stack>
                </Grid>
                                    label={translate('page.map.settings.map.copy.count')}
                                    type="number"
                                    fullWidth
                                    inputProps={{ min: 1 }}
                                />
                            )}
                        />
                    </Grid>
                    <Grid item xs={12}>
                        <Stack direction="row" spacing={2}>
                            <Button variant="contained" color="primary" onClick={() => {
                                setCopyVisible(true);
                            }}>
                                {translate('page.map.settings.map.copy.execute')}
                            </Button>
                            <Button variant="text" color="primary">
                                {translate('page.map.settings.map.copy.reverse')}
                            </Button>
                        </Stack>
                    </Grid>

                <CopyDrawer
                    open={copyVisible}
                    onCancel={() => {
                        setCopyVisible(false);
                    }}
                    width={width}
                />
                    <Grid item xs={12}>
                        <Divider />
                    </Grid>

                <Grid item xs={12}>
                    <Divider />
                    {/* 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" onClick={() => {
                                Tool.getMapContainer().removeChild(sprite);
                                setSpriteSettings(null);
                                Tool.removeSelectedEffect();
                                reset();
                            }}>
                                {translate('ra.action.delete')}
                            </Button>
                            {/* <ConfirmButton /> */}
                        </Stack>
                    </Grid>
                </Grid>
            </Box>

                {/* 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" onClick={() => {
                            Tool.getMapContainer().removeChild(sprite);
                            setSpriteSettings(null);
                            Tool.removeSelectedEffect();
                            reset();
                        }}>
                            {translate('ra.action.delete')}
                        </Button>
                        {/* <ConfirmButton /> */}
                    </Stack>
                </Grid>
            </Grid>
        </Box>
            <CopyDrawer
                open={copyVisible}
                onCancel={() => {
                    setCopyVisible(false);
                }}
                width={width}
                sprite={sprite}
                handleOnCopy={() => {

                }}
            />
        </>
    );
};