| | |
|---|
| | | import React, { useState, useRef, useEffect } from 'react'; |
|---|
| | | import { Col, Form, Input, Row, Checkbox, Slider, Select, Drawer, Space, Button, InputNumber, Switch } from 'antd'; |
|---|
| | | import { Col, Form, Input, Row, Checkbox, Slider, Select, Drawer, Space, Button, InputNumber, Card } from 'antd'; |
|---|
| | | import { FormattedMessage, useIntl, useModel } from '@umijs/max'; |
|---|
| | | import { |
|---|
| | | BranchesOutlined, |
|---|
| | | BorderOuterOutlined, |
|---|
| | | } from '@ant-design/icons'; |
|---|
| | | import { createStyles } from 'antd-style'; |
|---|
| | | import './index.css'; |
|---|
| | | 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 { values } from 'lodash'; |
|---|
| | | import MapSettings from './mapSettings'; |
|---|
| | | import ConfigSettings from './configSettings'; |
|---|
| | | |
|---|
| | | const useStyles = createStyles(({ token, css }) => { |
|---|
| | | |
|---|
| | | }) |
|---|
| | | |
|---|
| | | const SpriteSettings = (props) => { |
|---|
| | | const Settings = (props) => { |
|---|
| | | const intl = useIntl(); |
|---|
| | | const { styles } = useStyles(); |
|---|
| | | const { curSprite } = props; |
|---|
| | | const [form] = Form.useForm(); |
|---|
| | | const [activeTabKey, setActiveTabKey] = useState('map'); |
|---|
| | | |
|---|
| | | const [childrenDrawer, setChildrenDrawer] = useState(false); |
|---|
| | | const [lastCopiedSprites, setLastCopiedSprites] = useState([]); |
|---|
| | | const [mapForm] = Form.useForm(); |
|---|
| | | const [configForm] = 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, |
|---|
| | | |
|---|
| | | copyDire: 'right', |
|---|
| | | copyCount: 1, |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, [form, props]) |
|---|
| | | const contentList = { |
|---|
| | | map: ( |
|---|
| | | <MapSettings |
|---|
| | | refCurr={props.refCurr} |
|---|
| | | curSprite={props.curSprite} |
|---|
| | | setSpriteBySettings={props.setSpriteBySettings} |
|---|
| | | setDidClickSprite={props.setDidClickSprite} |
|---|
| | | onSubmit={props.onSubmit} |
|---|
| | | mapForm={mapForm} |
|---|
| | | /> |
|---|
| | | ), |
|---|
| | | config: ( |
|---|
| | | <ConfigSettings |
|---|
| | | refCurr={props.refCurr} |
|---|
| | | curSprite={props.curSprite} |
|---|
| | | setSpriteBySettings={props.setSpriteBySettings} |
|---|
| | | setDidClickSprite={props.setDidClickSprite} |
|---|
| | | onSubmit={props.onSubmit} |
|---|
| | | configForm={configForm} |
|---|
| | | /> |
|---|
| | | ), |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const handleCancel = () => { |
|---|
| | | props.onCancel(); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const handleOk = () => { |
|---|
| | | form.submit(); |
|---|
| | | } |
|---|
| | | |
|---|
| | | 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.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); |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | if (activeTabKey === 'map') { |
|---|
| | | mapForm.submit(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | const onFinishFailed = (errorInfo) => { |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const handleOnCopy = (values) => { |
|---|
| | | if (!curSprite) { |
|---|
| | | return; |
|---|
| | | if (activeTabKey === 'config') { |
|---|
| | | configForm.submit(); |
|---|
| | | } |
|---|
| | | 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 ( |
|---|
| | |
|---|
| | | <Button onClick={handleCancel}> |
|---|
| | | <FormattedMessage id='common.cancel' defaultMessage='取消' /> |
|---|
| | | </Button> |
|---|
| | | <Button onClick={handleOk} type="primary"> |
|---|
| | | <Button hidden={activeTabKey === 'map'} onClick={handleOk} type="primary"> |
|---|
| | | <FormattedMessage id='common.submit' defaultMessage='保存' /> |
|---|
| | | </Button> |
|---|
| | | </Space> |
|---|
| | | } |
|---|
| | | > |
|---|
| | | <Form |
|---|
| | | form={form} |
|---|
| | | onFieldsChange={formValuesChange} |
|---|
| | | initialValues={{ |
|---|
| | | <Card |
|---|
| | | hoverable |
|---|
| | | bordered={false} |
|---|
| | | type='inner' |
|---|
| | | tabList={[ |
|---|
| | | { |
|---|
| | | key: 'map', |
|---|
| | | tab: intl.formatMessage({ id: 'map.settings.map.param', defaultMessage: '地图参数' }), |
|---|
| | | icon: <BorderOuterOutlined /> |
|---|
| | | |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | key: 'config', |
|---|
| | | tab: intl.formatMessage({ id: 'map.settings.config.param', defaultMessage: '系统参数' }), |
|---|
| | | icon: <BranchesOutlined /> |
|---|
| | | }, |
|---|
| | | ]} |
|---|
| | | activeTabKey={activeTabKey} |
|---|
| | | onTabChange={(key) => { |
|---|
| | | setActiveTabKey(key) |
|---|
| | | }} |
|---|
| | | onFinish={handleFinish} |
|---|
| | | onFinishFailed={onFinishFailed} |
|---|
| | | autoComplete="off" |
|---|
| | | style={{ |
|---|
| | | maxWidth: 600, |
|---|
| | | tabProps={{ |
|---|
| | | centered: true, |
|---|
| | | size: 'large', |
|---|
| | | type: "card", |
|---|
| | | style: { |
|---|
| | | } |
|---|
| | | }} |
|---|
| | | size='default' // small | default | large |
|---|
| | | variant='filled' // outlined | borderless | filled |
|---|
| | | labelWrap // label 换行 |
|---|
| | | disabled={false} |
|---|
| | | layout='horizontal' |
|---|
| | | > |
|---|
| | | <Row gutter={[24, 16]}> |
|---|
| | | {contentList[activeTabKey]} |
|---|
| | | </Card> |
|---|
| | | |
|---|
| | | <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> |
|---|
| | | </Drawer > |
|---|
| | | </> |
|---|
| | | ) |
|---|
| | | } |
|---|
| | | |
|---|
| | | export default SpriteSettings; |
|---|
| | | export default Settings; |
|---|
