| | |
| | | import React, { useState, useRef, useEffect } from 'react'; |
| | | import moment from 'moment'; |
| | | 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 * as Utils from '../utils' |
| | | import * as PIXI from 'pixi.js'; |
| | | import moment from 'moment'; |
| | | import Http from '@/utils/http'; |
| | | |
| | | const useStyles = createStyles(({ token, css }) => { |
| | |
| | | useEffect(() => { |
| | | form.resetFields(); |
| | | if (curSprite) { |
| | | console.log(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) |
| | | scaleSlider: Math.max(curSprite.scale.x, curSprite.scale.y), |
| | | rotation: curSprite.rotation * 180 / Math.PI, |
| | | rotationSlider: curSprite.rotation * 180 / Math.PI, |
| | | }) |
| | | } |
| | | }, [form, props]) |
| | |
| | | } |
| | | |
| | | const handleFinish = async (values) => { |
| | | console.log(values); return |
| | | props.onSubmit({ ...values }); |
| | | } |
| | | |
| | |
| | | changeList.forEach(change => { |
| | | const { name: nameList, value } = change; |
| | | nameList.forEach(name => { |
| | | console.log(name, value); |
| | | switch (name) { |
| | | case 'x': |
| | | curSprite.position.x = value; |
| | |
| | | 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 prefixSelector = ( |
| | | <Form.Item name="prefix" noStyle> |
| | | <Select |
| | | style={{ |
| | | width: 70, |
| | | }} |
| | | > |
| | | <Option value="86">+86</Option> |
| | | <Option value="87">+87</Option> |
| | | </Select> |
| | | </Form.Item> |
| | | ); |
| | | |
| | | return ( |
| | | <> |
| | |
| | | |
| | | {/* */} |
| | | <Col span={24}> |
| | | <Form.Item label="type" labelCol={{ span: 2 }}> |
| | | <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="position"> |
| | | <Form.Item |
| | | label={intl.formatMessage({ id: 'map.settings.position', defaultMessage: '坐标' })} |
| | | > |
| | | <Space.Compact> |
| | | <Form.Item |
| | | name='x' |
| | |
| | | <Row gutter={24}> |
| | | <Col span={18}> |
| | | <Form.Item |
| | | label="scale" |
| | | label={intl.formatMessage({ id: 'map.settings.scale', defaultMessage: '缩放' })} |
| | | name="scaleSlider" |
| | | labelCol={{ span: 4 }} |
| | | > |
| | |
| | | > |
| | | <InputNumber |
| | | changeOnWheel |
| | | min={0.1} max={10} defaultValue={1} |
| | | min={0.1} max={10} defaultValue={1} step={0.1} |
| | | rules={[ |
| | | { |
| | | required: true, |
| | |
| | | <Row gutter={24}> |
| | | <Col span={18}> |
| | | <Form.Item |
| | | label="rotation" |
| | | label={intl.formatMessage({ id: 'map.settings.rotation', defaultMessage: '角度' })} |
| | | name="rotationSlider" |
| | | labelCol={{ span: 4 }} |
| | | > |