From 83c548d3dba59aaed9b52b5d413c6912a87d2efc Mon Sep 17 00:00:00 2001
From: Junjie <fallin.jie@qq.com>
Date: 星期日, 16 六月 2024 15:50:14 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/pages/map/components/settings.jsx | 440 ++++---------------------------------------------------
1 files changed, 32 insertions(+), 408 deletions(-)
diff --git a/zy-asrs-flow/src/pages/map/components/settings.jsx b/zy-asrs-flow/src/pages/map/components/settings.jsx
index f3824f7..0a82de3 100644
--- a/zy-asrs-flow/src/pages/map/components/settings.jsx
+++ b/zy-asrs-flow/src/pages/map/components/settings.jsx
@@ -1,14 +1,15 @@
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 {
+ 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 }) => {
@@ -19,18 +20,29 @@
const { styles } = useStyles();
const [activeTabKey, setActiveTabKey] = useState('map');
+ const [mapForm] = Form.useForm();
+ const [configForm] = Form.useForm();
+
const contentList = {
map: (
- <SpriteSettings
+ <MapSettings
refCurr={props.refCurr}
curSprite={props.curSprite}
setSpriteBySettings={props.setSpriteBySettings}
setDidClickSprite={props.setDidClickSprite}
onSubmit={props.onSubmit}
+ mapForm={mapForm}
/>
),
config: (
- <h1>Hello</h1>
+ <ConfigSettings
+ refCurr={props.refCurr}
+ curSprite={props.curSprite}
+ setSpriteBySettings={props.setSpriteBySettings}
+ setDidClickSprite={props.setDidClickSprite}
+ onSubmit={props.onSubmit}
+ configForm={configForm}
+ />
),
};
@@ -39,6 +51,12 @@
};
const handleOk = () => {
+ if (activeTabKey === 'map') {
+ mapForm.submit();
+ }
+ if (activeTabKey === 'config') {
+ configForm.submit();
+ }
}
return (
@@ -55,7 +73,7 @@
<Button onClick={handleCancel}>
<FormattedMessage id='common.cancel' defaultMessage='鍙栨秷' />
</Button>
- <Button onClick={handleOk} type="primary">
+ <Button hidden={activeTabKey === 'map' || activeTabKey === 'config'} onClick={handleOk} type="primary">
<FormattedMessage id='common.submit' defaultMessage='淇濆瓨' />
</Button>
</Space>
@@ -64,14 +82,18 @@
<Card
hoverable
bordered={false}
+ type='inner'
tabList={[
{
key: 'map',
- tab: '鍦板浘鍙傛暟',
+ tab: intl.formatMessage({ id: 'map.settings.map.param', defaultMessage: '鍦板浘鍙傛暟' }),
+ icon: <BorderOuterOutlined />
+
},
{
key: 'config',
- tab: '閰嶇疆鍙傛暟',
+ tab: intl.formatMessage({ id: 'map.settings.config.param', defaultMessage: '绯荤粺鍙傛暟' }),
+ icon: <BranchesOutlined />
},
]}
activeTabKey={activeTabKey}
@@ -90,404 +112,6 @@
</Card>
</Drawer >
- </>
- )
-}
-
-const SpriteSettings = (props) => {
- const intl = useIntl();
- const { styles } = useStyles();
- const { curSprite } = props;
- const [form] = Form.useForm();
-
- 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 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.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>
</>
)
}
--
Gitblit v1.9.1