|  |  | 
 |  |  | 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, Card } from 'antd'; | 
 |  |  | import { FormattedMessage, useIntl, useModel } from '@umijs/max'; | 
 |  |  | import * as PIXI from 'pixi.js'; | 
 |  |  | import { | 
 |  |  |     BranchesOutlined, | 
 |  |  |     BorderOuterOutlined, | 
 |  |  | } from '@ant-design/icons'; | 
 |  |  | import { createStyles } from 'antd-style'; | 
 |  |  | import './index.css' | 
 |  |  | import * as Utils from '../utils' | 
 |  |  | import Http from '@/utils/http'; | 
 |  |  | 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 [activeTabKey, setActiveTabKey] = useState('map'); | 
 |  |  |     const [mapForm] = Form.useForm(); | 
 |  |  |     const [configForm] = Form.useForm(); | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  |  | 
 |  |  |     }, []); | 
 |  |  |  | 
 |  |  |     const handleCancel = () => { | 
 |  |  |         props.onCancel(); | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     const handleOk = () => { | 
 |  |  |         if (activeTabKey === 'map') { | 
 |  |  |             mapForm.submit(); | 
 |  |  |         } | 
 |  |  |         if (activeTabKey === 'config') { | 
 |  |  |             configForm.submit(); | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     const finishSettings = (values, fn) => { | 
 |  |  |         fn(); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     const contentList = { | 
 |  |  |         map: ( | 
 |  |  |             <MapSettings | 
 |  |  |                 refCurr={props.refCurr} | 
 |  |  |                 curSprite={props.curSprite} | 
 |  |  |                 setSpriteBySettings={props.setSpriteBySettings} | 
 |  |  |                 onSubmit={finishSettings} | 
 |  |  |                 mapForm={mapForm} | 
 |  |  |             /> | 
 |  |  |         ), | 
 |  |  |         config: ( | 
 |  |  |             <ConfigSettings | 
 |  |  |                 refCurr={props.refCurr} | 
 |  |  |                 curSprite={props.curSprite} | 
 |  |  |                 setSpriteBySettings={props.setSpriteBySettings} | 
 |  |  |                 onSubmit={finishSettings} | 
 |  |  |                 configForm={configForm} | 
 |  |  |             /> | 
 |  |  |         ), | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     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()}> | 
 |  |  |                         <Button onClick={handleCancel}> | 
 |  |  |                             <FormattedMessage id='common.cancel' defaultMessage='取消' /> | 
 |  |  |                         </Button> | 
 |  |  |                         <Button onClick={() => { }} type="primary"> | 
 |  |  |                         <Button hidden={activeTabKey === 'map' || activeTabKey === 'config'} onClick={handleOk} type="primary"> | 
 |  |  |                             <FormattedMessage id='common.submit' defaultMessage='保存' /> | 
 |  |  |                         </Button> | 
 |  |  |                     </Space> | 
 |  |  |                 } | 
 |  |  |             > | 
 |  |  |                 <Card> | 
 |  |  |                     {/*  | 
 |  |  |                         // position | 
 |  |  |                         // scale | 
 |  |  |                         // rotation | 
 |  |  |                         // copy | 
 |  |  |                     */} | 
 |  |  |                 <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) | 
 |  |  |                     }} | 
 |  |  |                     tabProps={{ | 
 |  |  |                         centered: true, | 
 |  |  |                         size: 'large', | 
 |  |  |                         type: "card", | 
 |  |  |                         style: { | 
 |  |  |                         } | 
 |  |  |                     }} | 
 |  |  |                 > | 
 |  |  |                     {contentList[activeTabKey]} | 
 |  |  |                 </Card> | 
 |  |  |             </Drawer> | 
 |  |  |  | 
 |  |  |             </Drawer > | 
 |  |  |         </> | 
 |  |  |     ) | 
 |  |  | } | 
 |  |  |  | 
 |  |  | export default SpriteSettings; | 
 |  |  | export default Settings; |