#

luxiaotao1123

2024-03-08 a554a78015cb8bd0b9f1e65a4ac478b42f73f5f9

 zy-asrs-flow/src/pages/map/components/settings.jsx

@@ -1,48 +1,367 @@
import React, { useState, useRef, useEffect } from 'react';
import { Col, Form, Modal, Row, Checkbox, Image, Tree, Drawer, Space, Button, Card, Divider } from 'antd';
import { Col, Form, Input, Row, Checkbox, Slider, Select, Drawer, Space, Button, InputNumber, Switch } from 'antd';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
import * as PIXI from 'pixi.js';
import { createStyles } from 'antd-style';
import './index.css'
import './index.css';
import * as Utils from '../utils'
import * as PIXI from 'pixi.js';
import moment from 'moment';
import Http from '@/utils/http';

const useStyles = createStyles(({ token, css }) => {

})

const SpriteSettings = (props) => {
    const intl = useIntl();
    const { styles } = useStyles();
    const { curSprite } = props;
    const [form] = Form.useForm();

    useEffect(() => {

    }, []);

    useEffect(() => {
        form.resetFields();
        if (curSprite) {
            form.setFieldsValue({
                x: curSprite.position.x,
                y: curSprite.position.y,
                scale: Math.max(curSprite.scale.x, curSprite.scale.y),
                scaleSlider: Math.max(curSprite.scale.x, curSprite.scale.y),
                rotation: curSprite.rotation * 180 / Math.PI,
                rotationSlider: curSprite.rotation * 180 / Math.PI,
            })
        }
    }, [form, props])

    const handleCancel = () => {
        props.onCancel();
    };

    const handleOk = () => {
        form.submit();
    }

    const handleFinish = async (values) => {
        props.onSubmit({ ...values });
    }

    const formValuesChange = (changeList) => {
        if (changeList && changeList.length > 0) {
            changeList.forEach(change => {
                const { name: nameList, value } = change;
                nameList.forEach(name => {
                    switch (name) {
                        case 'x':
                            curSprite.position.x = value;
                            break;
                        case 'y':
                            curSprite.position.x = value;
                            break;
                        case 'scaleSlider':
                            form.setFieldsValue({
                                scale: value
                            })
                            curSprite.scale.set(value);
                            break;
                        case 'scale':
                            form.setFieldsValue({
                                scaleSlider: value
                            })
                            curSprite.scale.set(value);
                            break;
                        case 'rotationSlider':
                            form.setFieldsValue({
                                rotation: value
                            })
                            curSprite.rotation = value * Math.PI / 180;
                            break;
                        case 'rotation':
                            form.setFieldsValue({
                                rotationSlider: value
                            })
                            curSprite.rotation = value * Math.PI / 180;
                            break;
                        default:
                            break;
                    }
                    Utils.removeSelectedEffect();
                    Utils.showSelectedEffect(curSprite);
                })
            })
        }
    }

    const onFinishFailed = (errorInfo) => {
    };

    return (
        <>
            <Drawer
                open={props.open}
                onClose={() => {
                    props.onCancel();
                }}
                onClose={handleCancel}
                getContainer={props.refCurr}
                rootStyle={{ position: "absolute" }}
                mask={false}
                width={570}
                extra={
                    <Space>
                        <Button onClick={() => props.onCancel()}><FormattedMessage id='common.cancel' defaultMessage='取消' /></Button>
                        <Button onClick={handleCancel}>
                            <FormattedMessage id='common.cancel' defaultMessage='取消' />
                        </Button>
                        <Button onClick={handleOk} type="primary">
                            <FormattedMessage id='common.submit' defaultMessage='保存' />
                        </Button>
                    </Space>
                }
            >
                <Card>
                    {/* 
                        // position
                        // scale
                        // rotation
                        // copy
                    */}
                </Card>
                <Form
                    form={form}
                    onFieldsChange={formValuesChange}
                    initialValues={{
                    }}
                    onFinish={handleFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                    style={{
                        maxWidth: 600,
                    }}
                    size='default'    // small | default | large
                    variant='filled'    // outlined | borderless | filled
                    labelWrap   // label 换行
                    disabled={false}
                    layout='horizontal'
                >
                    <Row gutter={[24, 16]}>

                        {/*  */}
                        <Col span={24}>
                            <Form.Item
                                label={intl.formatMessage({ id: 'map.settings.type', defaultMessage: '类型' })}
                                labelCol={{ span: 2 }}
                            >
                                <span className="ant-form-text">China</span>
                            </Form.Item>
                        </Col>

                        {/* position */}
                        <Col span={24}>
                            <Form.Item
                                label={intl.formatMessage({ id: 'map.settings.position', defaultMessage: '坐标' })}
                            >
                                <Space.Compact>
                                    <Form.Item
                                        name='x'
                                        noStyle
                                        rules={[
                                            {
                                                required: true,
                                            },
                                        ]}
                                    >
                                        <InputNumber
                                            addonBefore={<Space.Compact>x</Space.Compact>}
                                            style={{
                                                width: '50%',
                                            }}
                                        />
                                    </Form.Item>
                                    <Form.Item
                                        name='y'
                                        noStyle
                                        rules={[
                                            {
                                                required: true,
                                            },
                                        ]}
                                    >
                                        <InputNumber
                                            addonBefore={<Space.Compact>y</Space.Compact>}
                                            style={{
                                                width: '50%',
                                            }}
                                        />
                                    </Form.Item>
                                </Space.Compact>
                            </Form.Item>
                        </Col>

                        {/* scale */}
                        <Col span={24}>
                            <Row gutter={24}>
                                <Col span={18}>
                                    <Form.Item
                                        label={intl.formatMessage({ id: 'map.settings.scale', defaultMessage: '缩放' })}
                                        name="scaleSlider"
                                        labelCol={{ span: 4 }}
                                    >
                                        <Slider
                                            min={0.1}
                                            max={10}
                                            step={0.1}
                                            marks={{
                                                0.1: '0.1',
                                                1: '1',
                                                10: '10',
                                            }}
                                        />
                                    </Form.Item>
                                </Col>
                                <Col span={6}>
                                    <Form.Item
                                        name="scale"
                                        labelCol={{ span: 4 }}
                                    >
                                        <InputNumber
                                            changeOnWheel
                                            min={0.1} max={10} defaultValue={1} step={0.1}
                                            rules={[
                                                {
                                                    required: true,
                                                },
                                            ]}
                                        />
                                    </Form.Item>
                                </Col>
                            </Row>
                        </Col>

                        {/* rotation */}
                        <Col span={24}>
                            <Row gutter={24}>
                                <Col span={18}>
                                    <Form.Item
                                        label={intl.formatMessage({ id: 'map.settings.rotation', defaultMessage: '角度' })}
                                        name="rotationSlider"
                                        labelCol={{ span: 4 }}
                                    >
                                        <Slider
                                            min={0}
                                            max={360}
                                            step={1}
                                            marks={{
                                                0: '0°',
                                                90: '90°',
                                                180: '180°',
                                                270: '270°',
                                                360: '360°',
                                            }}
                                        />
                                    </Form.Item>
                                </Col>
                                <Col span={6}>
                                    <Form.Item
                                        name="rotation"
                                        labelCol={{ span: 4 }}
                                    >
                                        <InputNumber
                                            changeOnWheel
                                            min={0} max={360} defaultValue={0}
                                            rules={[
                                                {
                                                    required: true,
                                                },
                                            ]}
                                        />
                                    </Form.Item>
                                </Col>
                            </Row>
                        </Col>


                        {/* <Col span={12}>
                            <Form.Item
                                label="Username"
                                name="username"
                                hasFeedback
                                validateTrigger="onBlur"
                                validateDebounce={1000}
                                rules={[
                                    {
                                        required: false,
                                    }
                                ]}
                            >
                                <Input disabled={false} />
                            </Form.Item>
                        </Col>
                        <Col span={24}>
                            <Form.Item
                                label="Switch"
                                valuePropName="checked"
                            >
                                <Switch />
                            </Form.Item>
                        </Col>
                        <Col span={24}>
                            <Form.Item label="Memo">
                                <Input.TextArea />
                            </Form.Item>
                        </Col>
                        <Col span={24}>
                            <Form.Item label="Address">
                                <Space.Compact>
                                    <Form.Item
                                        name={['address', 'province']}
                                        noStyle
                                        rules={[
                                            {
                                                required: false,
                                                message: 'Province is required',
                                            },
                                        ]}
                                    >
                                        <Select placeholder="Select province">
                                            <Option value="Zhejiang">Zhejiang</Option>
                                            <Option value="Jiangsu">Jiangsu</Option>
                                        </Select>
                                    </Form.Item>
                                    <Form.Item
                                        name={['address', 'street']}
                                        noStyle
                                        rules={[
                                            {
                                                required: false,
                                                message: 'Street is required',
                                            },
                                        ]}
                                    >
                                        <Input
                                            style={{
                                                width: '50%',
                                            }}
                                            placeholder="Input street"
                                        />
                                    </Form.Item>
                                </Space.Compact>
                            </Form.Item>
                        </Col>
                        <Col span={24}>
                            <Form.Item
                                name="phone"
                                label="Phone Number"
                                rules={[
                                    {
                                        required: false,
                                        message: 'Please input your phone number!',
                                    },
                                ]}
                            >
                                <Input
                                    addonBefore={prefixSelector}
                                    style={{
                                        width: '100%',
                                    }}
                                />
                            </Form.Item>
                        </Col> */}



                    </Row>
                </Form>
            </Drawer>
        </>
    )