import React, { useState, useRef, useEffect } from 'react';
|
import { Col, Form, Input, Row, message, Slider, Select, Drawer, Space, Button, InputNumber, Card } from 'antd';
|
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
|
import { createStyles } from 'antd-style';
|
import * as Utils from '../utils'
|
import * as PIXI from 'pixi.js';
|
import MapCopySettings from './mapCopySettings';
|
|
const useStyles = createStyles(({ token, css }) => {
|
|
})
|
|
const MapSettings = (props) => {
|
const intl = useIntl();
|
const { styles } = useStyles();
|
const { curSprite, mapForm: form } = props;
|
|
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,
|
scaleX: curSprite.scale.x,
|
scaleSliderX: curSprite.scale.x,
|
scaleY: curSprite.scale.y,
|
scaleSliderY: curSprite.scale.y,
|
rotation: curSprite.rotation * 180 / Math.PI,
|
rotationSlider: curSprite.rotation * 180 / Math.PI,
|
|
copyDire: 'right',
|
copyCount: 1,
|
})
|
}
|
}, [form, props])
|
|
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 'scaleSliderX':
|
form.setFieldsValue({
|
scaleX: value
|
})
|
curSprite.scale.x = value;
|
break;
|
case 'scaleX':
|
form.setFieldsValue({
|
scaleSliderX: value
|
})
|
curSprite.scale.x = value;
|
break;
|
case 'scaleSliderY':
|
form.setFieldsValue({
|
scaleY: value
|
})
|
curSprite.scale.y = value;
|
break;
|
case 'scaleY':
|
form.setFieldsValue({
|
scaleSliderY: value
|
})
|
curSprite.scale.y = 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);
|
// auto-increment-value
|
if (values.autoIncrement && values.type) {
|
switch (values.type) {
|
case Utils.SENSOR_TYPE.SHELF:
|
if (values.incrementValue === 'row') {
|
if (values.incrementMode === 'descending') {
|
copiedSprite.data.row = curSprite.data.row - i - 1;
|
} else {
|
copiedSprite.data.row = curSprite.data.row + i + 1;
|
}
|
}
|
if (values.incrementValue === 'bay') {
|
if (values.incrementMode === 'descending') {
|
copiedSprite.data.bay = curSprite.data.bay - i - 1;
|
} else {
|
copiedSprite.data.bay = curSprite.data.bay + i + 1;
|
}
|
}
|
// reference value
|
if (copiedSprite.data.refx && copiedSprite.data.refy) {
|
switch (values.copyDire) {
|
case 'left':
|
copiedSprite.data.refx -= curSprite.data.left * (i + 1);
|
break;
|
case 'right':
|
copiedSprite.data.refx += curSprite.data.right * (i + 1);
|
break;
|
case 'top':
|
copiedSprite.data.refy -= curSprite.data.top * (i + 1);
|
break;
|
case 'bottom':
|
copiedSprite.data.refy += curSprite.data.bottom * (i + 1);
|
break;
|
default:
|
break;
|
}
|
}
|
if (copiedSprite.data.row && copiedSprite.data.bay) {
|
copiedSprite.data.no = Utils.pureNumStr(copiedSprite.data.row) + '-' + Utils.pureNumStr(copiedSprite.data.bay);
|
}
|
break;
|
case Utils.SENSOR_TYPE.POINT:
|
if (values.incrementValue === 'vertical') {
|
if (values.incrementMode === 'descending') {
|
copiedSprite.data.vertical = curSprite.data.vertical - i - 1;
|
} else {
|
copiedSprite.data.vertical = curSprite.data.vertical + i + 1;
|
}
|
}
|
if (values.incrementValue === 'horizontal') {
|
if (values.incrementMode === 'descending') {
|
copiedSprite.data.horizontal = curSprite.data.horizontal - i - 1;
|
} else {
|
copiedSprite.data.horizontal = curSprite.data.horizontal + i + 1;
|
}
|
}
|
if (copiedSprite.data.vertical && copiedSprite.data.horizontal) {
|
copiedSprite.data.no = Utils.pureNumStr(copiedSprite.data.vertical) + '-' + Utils.pureNumStr(copiedSprite.data.horizontal);
|
}
|
break;
|
case Utils.SENSOR_TYPE.CONVEYOR:
|
if (values.incrementValue === 'no') {
|
if (values.incrementMode === 'descending') {
|
copiedSprite.data.no = Number(curSprite.data.no) - i - 1;
|
} else {
|
copiedSprite.data.no = Number(curSprite.data.no) + i + 1;
|
}
|
}
|
break;
|
case Utils.SENSOR_TYPE.SHUTTLE:
|
if (values.incrementValue === 'no') {
|
if (values.incrementMode === 'descending') {
|
copiedSprite.data.no = Number(curSprite.data.no) - i - 1;
|
} else {
|
copiedSprite.data.no = Number(curSprite.data.no) + i + 1;
|
}
|
}
|
break;
|
case Utils.SENSOR_TYPE.AGV:
|
if (values.incrementValue === 'no') {
|
if (values.incrementMode === 'descending') {
|
copiedSprite.data.no = Number(curSprite.data.no) - i - 1;
|
} else {
|
copiedSprite.data.no = Number(curSprite.data.no) + i + 1;
|
}
|
}
|
break;
|
default:
|
break;
|
}
|
}
|
// graph copy
|
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);
|
|
setLastCopiedSprites(prevArr => [...prevArr, copiedSprite]);
|
}
|
setChildrenDrawer(false);
|
}
|
|
return (
|
<>
|
<Form
|
form={form}
|
onFieldsChange={formValuesChange}
|
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'
|
labelCol={{
|
span: 4,
|
}}
|
wrapperCol={{
|
span: 20,
|
}}
|
initialValues={{
|
scale: 1,
|
rotation: 1
|
}}
|
>
|
<Row gutter={[24, 16]}>
|
<Col span={24} />
|
|
<Col span={24}>
|
<Form.Item
|
label={intl.formatMessage({ id: 'map.settings.component', defaultMessage: '组件' })}
|
>
|
<span>{curSprite?.data?.type}-{curSprite?.data?.uuid}</span>
|
</Form.Item>
|
</Col>
|
|
{/* position */}
|
<Col span={24}>
|
<Form.Item
|
label={intl.formatMessage({ id: 'map.settings.position', defaultMessage: '坐标' })}
|
>
|
<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>
|
|
{/* scale x */}
|
<Col span={18}>
|
<Form.Item
|
name="scaleSliderX"
|
label={intl.formatMessage({ id: 'map.settings.scale.x', defaultMessage: '缩放-x' })}
|
labelCol={{ span: 5 }}
|
>
|
<Slider
|
min={0.1}
|
max={10}
|
step={0.1}
|
marks={{
|
0.1: '0.1',
|
1: '1',
|
10: '10',
|
}}
|
style={{
|
width: '100%'
|
}}
|
/>
|
</Form.Item>
|
</Col>
|
<Col span={6}>
|
<Form.Item
|
name="scaleX"
|
>
|
<InputNumber
|
min={0.1} max={10} step={0.1}
|
rules={[
|
{
|
required: true,
|
},
|
]}
|
/>
|
</Form.Item>
|
</Col>
|
|
{/* scale */}
|
<Col span={18}>
|
<Form.Item
|
name="scaleSliderY"
|
label={intl.formatMessage({ id: 'map.settings.scale.y', defaultMessage: '缩放-y' })}
|
labelCol={{ span: 5 }}
|
>
|
<Slider
|
min={0.1}
|
max={10}
|
step={0.1}
|
marks={{
|
0.1: '0.1',
|
1: '1',
|
10: '10',
|
}}
|
style={{
|
width: '100%'
|
}}
|
/>
|
</Form.Item>
|
</Col>
|
<Col span={6}>
|
<Form.Item
|
name="scaleY"
|
>
|
<InputNumber
|
min={0.1} max={10} step={0.1}
|
rules={[
|
{
|
required: true,
|
},
|
]}
|
/>
|
</Form.Item>
|
</Col>
|
|
{/* rotation */}
|
<Col span={18}>
|
<Form.Item
|
name="rotationSlider"
|
label={intl.formatMessage({ id: 'map.settings.rotation', defaultMessage: '角度' })}
|
labelCol={{ span: 5 }}
|
>
|
<Slider
|
min={0}
|
max={360}
|
step={1}
|
marks={{
|
0: '0°',
|
90: '90°',
|
180: '180°',
|
270: '270°',
|
360: '360°',
|
}}
|
style={{
|
width: '100%'
|
}}
|
/>
|
</Form.Item>
|
</Col>
|
<Col span={6}>
|
<Form.Item
|
name="rotation"
|
>
|
<InputNumber
|
min={0} max={360}
|
rules={[
|
{
|
required: true,
|
},
|
]}
|
/>
|
</Form.Item>
|
</Col>
|
|
{/* copy */}
|
<Col span={24}>
|
<Row gutter={0}>
|
<Form.Item
|
label={intl.formatMessage({ id: 'map.settings.copy', defaultMessage: '复制' })}
|
>
|
<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>
|
<MapCopySettings
|
open={childrenDrawer}
|
refCurr={props.refCurr}
|
curSprite={props.curSprite}
|
values={form.getFieldsValue()}
|
submit={handleOnCopy}
|
onClose={() => {
|
setChildrenDrawer(false)
|
}}
|
/>
|
</Form.Item>
|
<Form.Item>
|
<Button
|
type="link"
|
onClick={() => {
|
if (lastCopiedSprites) {
|
lastCopiedSprites.forEach(copiedSprite => {
|
Utils.getMapContainer().removeChild(copiedSprite);
|
})
|
setLastCopiedSprites([]);
|
}
|
}}
|
>
|
<FormattedMessage id='map.settings.sub.copy.reverse' defaultMessage='撤销' />
|
</Button>
|
</Form.Item>
|
</Space.Compact>
|
</Form.Item>
|
</Row>
|
</Col>
|
|
{/* more */}
|
<Col span={24}>
|
<Form.Item
|
label={intl.formatMessage({ id: 'map.settings.more', defaultMessage: '更多' })}
|
>
|
<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>
|
</Form>
|
</>
|
)
|
}
|
|
export default MapSettings;
|
