#

luxiaotao1123

2024-03-12 72a18eeceeeb8fec3b7a099bdfc850e7f0fc80a8

#

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

File was renamed from zy-asrs-flow/src/pages/map/components/subSettings.jsx
@@ -4,13 +4,12 @@
import { createStyles } from 'antd-style';
import * as Utils from '../utils'
import * as PIXI from 'pixi.js';
import Http from '@/utils/http';

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

})

const SubSpriteSettings = (props) => {
const MapCopySettings = (props) => {
    const intl = useIntl();
    const { styles } = useStyles();
    const { curSprite } = props;
@@ -140,4 +139,4 @@
    )
}

export default SubSpriteSettings;
export default MapCopySettings;

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

New file
@@ -0,0 +1,406 @@
import React, { useState, useRef, useEffect } from 'react';
import { Col, Form, Input, Row, Checkbox, Slider, Select, Drawer, Space, Button, InputNumber, Card } from 'antd';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
import { createStyles } from 'antd-style';
import * as Utils from '../utils'
import * as PIXI from 'pixi.js';
import MapCopySettings from './mapCopySettings';

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

})

const MapSettings = (props) => {
    const intl = useIntl();
    const { styles } = useStyles();
    const { curSprite, mapForm: form } = props;

    const [childrenDrawer, setChildrenDrawer] = useState(false);
    const [lastCopiedSprites, setLastCopiedSprites] = useState([]);

    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,

                copyDire: 'right',
                copyCount: 1,
            })
        }
    }, [form, props])

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

    const formValuesChange = (changeList) => {
        if (curSprite && 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.y = 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) => {
    };

    const handleOnCopy = (values) => {
        if (!curSprite) {
            return;
        }
        setLastCopiedSprites([]);
        for (let i = 0; i < values.copyCount; i++) {
            const copiedSprite = Utils.copySprite(curSprite);
            switch (values.copyDire) {
                case 'left':
                    copiedSprite.position.x -= (i + 1) * (values.copyGap + copiedSprite.width);
                    break;
                case 'right':
                    copiedSprite.position.x += (i + 1) * (values.copyGap + copiedSprite.width);
                    break;
                case 'top':
                    copiedSprite.position.y -= (i + 1) * (values.copyGap + copiedSprite.height);
                    break;
                case 'bottom':
                    copiedSprite.position.y += (i + 1) * (values.copyGap + copiedSprite.height);
                    break;
                default:
                    break;
            }
            Utils.getMapContainer().addChild(copiedSprite);
            Utils.beSettings(copiedSprite, props.setSpriteBySettings, props.setDidClickSprite);

            setLastCopiedSprites(prevArr => [...prevArr, copiedSprite]);
        }
        setChildrenDrawer(false);
    }

    return (
        <>
            <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}>
                        <Row gutter={24}>
                            <Col span={18}>
                                <Form.Item
                                    label={intl.formatMessage({ id: 'map.settings.type', defaultMessage: '类型' })}
                                    labelCol={{ span: 4 }}
                                >
                                    <span>{curSprite?.data?.type}</span>
                                </Form.Item>
                            </Col>
                        </Row>
                    </Col>

                    {/* position */}
                    <Col span={24}>
                        <Row gutter={24}>
                            <Col span={18}>
                                <Form.Item
                                    label={intl.formatMessage({ id: 'map.settings.position', defaultMessage: '坐标' })}
                                    labelCol={{ span: 4 }}
                                >
                                    <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>
                        </Row>
                    </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>

                    {/* copy */}
                    <Col span={24}>
                        <Row gutter={0}>
                            <Col span={20}>
                                <Form.Item
                                    label={intl.formatMessage({ id: 'map.settings.copy', defaultMessage: '复制' })}
                                    labelCol={{ span: 4 }}
                                >
                                    <Space.Compact>
                                        <Form.Item
                                            noStyle
                                            name="copyDire"
                                        >
                                            <Select
                                                style={{ width: 100 }}
                                                options={[
                                                    { value: 'left', label: intl.formatMessage({ id: 'map.settings.left', defaultMessage: '左' }) },
                                                    { value: 'right', label: intl.formatMessage({ id: 'map.settings.right', defaultMessage: '右' }) },
                                                    { value: 'top', label: intl.formatMessage({ id: 'map.settings.top', defaultMessage: '上' }) },
                                                    { value: 'bottom', label: intl.formatMessage({ id: 'map.settings.bottom', defaultMessage: '下' }) },
                                                ]}
                                            />
                                        </Form.Item>
                                        <Form.Item
                                            name='copyCount'
                                            noStyle
                                            rules={[
                                                {
                                                    required: true,
                                                },
                                            ]}
                                        >
                                            <InputNumber
                                                addonBefore={<Space.Compact></Space.Compact>}
                                                style={{
                                                    width: '50%',
                                                }}
                                                min={1}
                                                step={1}
                                            />
                                        </Form.Item>
                                        <Form.Item>
                                            <Button
                                                onClick={() => {
                                                    setChildrenDrawer(true);
                                                }}
                                            >
                                                <FormattedMessage id='common.execute' defaultMessage='执行' />
                                            </Button>
                                            <MapCopySettings
                                                open={childrenDrawer}
                                                refCurr={props.refCurr}
                                                curSprite={props.curSprite}
                                                values={form.getFieldsValue()}
                                                submit={handleOnCopy}
                                                onClose={() => {
                                                    setChildrenDrawer(false)
                                                }}
                                            />
                                        </Form.Item>

                                    </Space.Compact>
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={0}>
                            <Col offset={16} span={8}>
                                <Form.Item>
                                    <Button
                                        type="dashed"
                                        onClick={() => {
                                            if (lastCopiedSprites) {
                                                lastCopiedSprites.forEach(copiedSprite => {
                                                    Utils.getMapContainer().removeChild(copiedSprite);
                                                })
                                                setLastCopiedSprites([]);
                                            }
                                        }}
                                    >
                                        <FormattedMessage id='map.settings.sub.copy.undo.last.copies' defaultMessage='撤回复制' />
                                    </Button>
                                </Form.Item>
                            </Col>
                        </Row>
                    </Col>

                    {/* more */}
                    <Col span={24}>
                        <Row gutter={24}>
                            <Col span={18}>
                                <Form.Item
                                    label={intl.formatMessage({ id: 'map.settings.more', defaultMessage: '更多' })}
                                    labelCol={{ span: 4 }}
                                >
                                    <Button
                                        type="dashed"
                                        danger
                                        onClick={() => {
                                            Utils.getMapContainer().removeChild(curSprite);
                                            props.setSpriteBySettings(null);
                                            Utils.removeSelectedEffect();
                                            form.resetFields();
                                        }}
                                    >
                                        <FormattedMessage id='map.settings.delete' defaultMessage='删除' />
                                    </Button>
                                </Form.Item>
                            </Col>
                        </Row>
                    </Col>

                </Row>
            </Form>
        </>
    )
}

export default MapSettings;

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

@@ -3,10 +3,8 @@
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
import { createStyles } from 'antd-style';
import * as Utils from '../utils'
import * as PIXI from 'pixi.js';
import moment from 'moment';
import Http from '@/utils/http';
import SubSpriteSettings from './subSettings';
import MapSettings from './mapSettings';

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

@@ -20,7 +18,7 @@

    const contentList = {
        map: (
            <SpriteSettings
            <MapSettings
                refCurr={props.refCurr}
                curSprite={props.curSprite}
                setSpriteBySettings={props.setSpriteBySettings}
@@ -91,399 +89,6 @@
                </Card>

            </Drawer >
        </>
    )
}

const SpriteSettings = (props) => {
    const intl = useIntl();
    const { styles } = useStyles();
    const { curSprite, mapForm: form } = props;

    const [childrenDrawer, setChildrenDrawer] = useState(false);
    const [lastCopiedSprites, setLastCopiedSprites] = useState([]);

    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,

                copyDire: 'right',
                copyCount: 1,
            })
        }
    }, [form, props])

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

    const formValuesChange = (changeList) => {
        if (curSprite && 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.y = 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) => {
    };

    const handleOnCopy = (values) => {
        if (!curSprite) {
            return;
        }
        setLastCopiedSprites([]);
        for (let i = 0; i < values.copyCount; i++) {
            const copiedSprite = Utils.copySprite(curSprite);
            switch (values.copyDire) {
                case 'left':
                    copiedSprite.position.x -= (i + 1) * (values.copyGap + copiedSprite.width);
                    break;
                case 'right':
                    copiedSprite.position.x += (i + 1) * (values.copyGap + copiedSprite.width);
                    break;
                case 'top':
                    copiedSprite.position.y -= (i + 1) * (values.copyGap + copiedSprite.height);
                    break;
                case 'bottom':
                    copiedSprite.position.y += (i + 1) * (values.copyGap + copiedSprite.height);
                    break;
                default:
                    break;
            }
            Utils.getMapContainer().addChild(copiedSprite);
            Utils.beSettings(copiedSprite, props.setSpriteBySettings, props.setDidClickSprite);

            setLastCopiedSprites(prevArr => [...prevArr, copiedSprite]);
        }
        setChildrenDrawer(false);
    }

    return (
        <>
            <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}>
                        <Row gutter={24}>
                            <Col span={18}>
                                <Form.Item
                                    label={intl.formatMessage({ id: 'map.settings.type', defaultMessage: '类型' })}
                                    labelCol={{ span: 4 }}
                                >
                                    <span>{curSprite?.data?.type}</span>
                                </Form.Item>
                            </Col>
                        </Row>
                    </Col>

                    {/* position */}
                    <Col span={24}>
                        <Row gutter={24}>
                            <Col span={18}>
                                <Form.Item
                                    label={intl.formatMessage({ id: 'map.settings.position', defaultMessage: '坐标' })}
                                    labelCol={{ span: 4 }}
                                >
                                    <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>
                        </Row>
                    </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>

                    {/* copy */}
                    <Col span={24}>
                        <Row gutter={0}>
                            <Col span={20}>
                                <Form.Item
                                    label={intl.formatMessage({ id: 'map.settings.copy', defaultMessage: '复制' })}
                                    labelCol={{ span: 4 }}
                                >
                                    <Space.Compact>
                                        <Form.Item
                                            noStyle
                                            name="copyDire"
                                        >
                                            <Select
                                                style={{ width: 100 }}
                                                options={[
                                                    { value: 'left', label: intl.formatMessage({ id: 'map.settings.left', defaultMessage: '左' }) },
                                                    { value: 'right', label: intl.formatMessage({ id: 'map.settings.right', defaultMessage: '右' }) },
                                                    { value: 'top', label: intl.formatMessage({ id: 'map.settings.top', defaultMessage: '上' }) },
                                                    { value: 'bottom', label: intl.formatMessage({ id: 'map.settings.bottom', defaultMessage: '下' }) },
                                                ]}
                                            />
                                        </Form.Item>
                                        <Form.Item
                                            name='copyCount'
                                            noStyle
                                            rules={[
                                                {
                                                    required: true,
                                                },
                                            ]}
                                        >
                                            <InputNumber
                                                addonBefore={<Space.Compact></Space.Compact>}
                                                style={{
                                                    width: '50%',
                                                }}
                                                min={1}
                                                step={1}
                                            />
                                        </Form.Item>
                                        <Form.Item>
                                            <Button
                                                onClick={() => {
                                                    setChildrenDrawer(true);
                                                }}
                                            >
                                                <FormattedMessage id='common.execute' defaultMessage='执行' />
                                            </Button>
                                            <SubSpriteSettings
                                                open={childrenDrawer}
                                                refCurr={props.refCurr}
                                                curSprite={props.curSprite}
                                                values={form.getFieldsValue()}
                                                submit={handleOnCopy}
                                                onClose={() => {
                                                    setChildrenDrawer(false)
                                                }}
                                            />
                                        </Form.Item>

                                    </Space.Compact>
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={0}>
                            <Col offset={16} span={8}>
                                <Form.Item>
                                    <Button
                                        type="dashed"
                                        onClick={() => {
                                            if (lastCopiedSprites) {
                                                lastCopiedSprites.forEach(copiedSprite => {
                                                    Utils.getMapContainer().removeChild(copiedSprite);
                                                })
                                                setLastCopiedSprites([]);
                                            }
                                        }}
                                    >
                                        <FormattedMessage id='map.settings.sub.copy.undo.last.copies' defaultMessage='撤回复制' />
                                    </Button>
                                </Form.Item>
                            </Col>
                        </Row>
                    </Col>

                    {/* more */}
                    <Col span={24}>
                        <Row gutter={24}>
                            <Col span={18}>
                                <Form.Item
                                    label={intl.formatMessage({ id: 'map.settings.more', defaultMessage: '更多' })}
                                    labelCol={{ span: 4 }}
                                >
                                    <Button
                                        type="dashed"
                                        danger
                                        onClick={() => {
                                            Utils.getMapContainer().removeChild(curSprite);
                                            props.setSpriteBySettings(null);
                                            Utils.removeSelectedEffect();
                                            form.resetFields();
                                        }}
                                    >
                                        <FormattedMessage id='map.settings.delete' defaultMessage='删除' />
                                    </Button>
                                </Form.Item>
                            </Col>
                        </Row>
                    </Col>

                </Row>
            </Form>
        </>
    )
}