From 023afca2aa4ae3128d19d6eeb0bbcd20a78bf125 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期二, 12 三月 2024 15:36:52 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/pages/map/components/settings.jsx | 630 +++++++++++++++++++++++++++++++--------------------------
1 files changed, 342 insertions(+), 288 deletions(-)
diff --git a/zy-asrs-flow/src/pages/map/components/settings.jsx b/zy-asrs-flow/src/pages/map/components/settings.jsx
index 85841e2..b98bb02 100644
--- a/zy-asrs-flow/src/pages/map/components/settings.jsx
+++ b/zy-asrs-flow/src/pages/map/components/settings.jsx
@@ -1,8 +1,7 @@
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 { createStyles } from 'antd-style';
-import './index.css';
import * as Utils from '../utils'
import * as PIXI from 'pixi.js';
import moment from 'moment';
@@ -14,11 +13,93 @@
})
+const Settings = (props) => {
+ const intl = useIntl();
+ const { styles } = useStyles();
+ const [activeTabKey, setActiveTabKey] = useState('map');
+ const [mapForm] = Form.useForm();
+
+ const contentList = {
+ map: (
+ <SpriteSettings
+ refCurr={props.refCurr}
+ curSprite={props.curSprite}
+ setSpriteBySettings={props.setSpriteBySettings}
+ setDidClickSprite={props.setDidClickSprite}
+ onSubmit={props.onSubmit}
+ mapForm={mapForm}
+ />
+ ),
+ config: (
+ <h1>Hello</h1>
+ ),
+ };
+
+ const handleCancel = () => {
+ props.onCancel();
+ };
+
+ const handleOk = () => {
+ mapForm.submit();
+ }
+
+ return (
+ <>
+ <Drawer
+ open={props.open}
+ onClose={handleCancel}
+ getContainer={props.refCurr}
+ rootStyle={{ position: "absolute" }}
+ mask={false}
+ width={570}
+ extra={
+ <Space>
+ <Button onClick={handleCancel}>
+ <FormattedMessage id='common.cancel' defaultMessage='鍙栨秷' />
+ </Button>
+ <Button onClick={handleOk} type="primary">
+ <FormattedMessage id='common.submit' defaultMessage='淇濆瓨' />
+ </Button>
+ </Space>
+ }
+ >
+ <Card
+ hoverable
+ bordered={false}
+ tabList={[
+ {
+ key: 'map',
+ tab: '鍦板浘鍙傛暟',
+ },
+ {
+ key: 'config',
+ tab: '閰嶇疆鍙傛暟',
+ },
+ ]}
+ activeTabKey={activeTabKey}
+ onTabChange={(key) => {
+ setActiveTabKey(key)
+ }}
+ tabProps={{
+ centered: true,
+ size: 'large',
+ type: "card",
+ style: {
+ }
+ }}
+ >
+ {contentList[activeTabKey]}
+ </Card>
+
+ </Drawer >
+ </>
+ )
+}
+
const SpriteSettings = (props) => {
const intl = useIntl();
const { styles } = useStyles();
- const { curSprite } = props;
- const [form] = Form.useForm();
+ const { curSprite, mapForm: form } = props;
const [childrenDrawer, setChildrenDrawer] = useState(false);
const [lastCopiedSprites, setLastCopiedSprites] = useState([]);
@@ -44,14 +125,6 @@
}
}, [form, props])
- const handleCancel = () => {
- props.onCancel();
- };
-
- const handleOk = () => {
- form.submit();
- }
-
const handleFinish = async (values) => {
props.onSubmit({ ...values });
}
@@ -66,7 +139,7 @@
curSprite.position.x = value;
break;
case 'y':
- curSprite.position.x = value;
+ curSprite.position.y = value;
break;
case 'scaleSlider':
form.setFieldsValue({
@@ -138,301 +211,282 @@
return (
<>
- <Drawer
- open={props.open}
- onClose={handleCancel}
- getContainer={props.refCurr}
- rootStyle={{ position: "absolute" }}
- mask={false}
- width={570}
- extra={
- <Space>
- <Button onClick={handleCancel}>
- <FormattedMessage id='common.cancel' defaultMessage='鍙栨秷' />
- </Button>
- <Button onClick={handleOk} type="primary">
- <FormattedMessage id='common.submit' defaultMessage='淇濆瓨' />
- </Button>
- </Space>
- }
+ <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'
>
- <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]}>
+ <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>
+ <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}
+ {/* 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,
},
]}
- />
- </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}
+ >
+ <InputNumber
+ addonBefore={<Space.Compact>x</Space.Compact>}
+ style={{
+ width: '50%',
+ }}
+ />
+ </Form.Item>
+ <Form.Item
+ name='y'
+ noStyle
rules={[
{
required: true,
},
]}
- />
- </Form.Item>
- </Col>
- </Row>
- </Col>
+ >
+ <InputNumber
+ addonBefore={<Space.Compact>y</Space.Compact>}
+ style={{
+ width: '50%',
+ }}
+ />
+ </Form.Item>
+ </Space.Compact>
+ </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,
- },
+ {/* 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);
+ }}
>
- <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>
+ <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 }}
+ </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([]);
+ }
+ }}
>
- <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>
+ <FormattedMessage id='map.settings.sub.copy.undo.last.copies' defaultMessage='鎾ゅ洖澶嶅埗' />
+ </Button>
+ </Form.Item>
+ </Col>
+ </Row>
+ </Col>
- </Row>
- </Form>
- </Drawer >
+ {/* 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 SpriteSettings;
\ No newline at end of file
+export default Settings;
\ No newline at end of file
--
Gitblit v1.9.1