From 115546eaccf194291bc3fb3458d01d7f0383859f Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期三, 06 三月 2024 14:25:11 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/locales/en-US/map.ts | 4
zy-asrs-flow/src/pages/map/index.jsx | 121 ++++++++++++++++++++++++----------------
2 files changed, 75 insertions(+), 50 deletions(-)
diff --git a/zy-asrs-flow/src/locales/en-US/map.ts b/zy-asrs-flow/src/locales/en-US/map.ts
index 9621d6e..843e384 100644
--- a/zy-asrs-flow/src/locales/en-US/map.ts
+++ b/zy-asrs-flow/src/locales/en-US/map.ts
@@ -3,8 +3,8 @@
'map.edit.close': 'Exit Edit',
'map.device.add': 'Add New Device',
'map.device.oper': 'Device Settings',
- '': '',
- '': '',
+ 'map.model.observer': 'Observer Pattern',
+ 'map.model.editor': 'Editor Pattern',
'': '',
'': '',
'': '',
diff --git a/zy-asrs-flow/src/pages/map/index.jsx b/zy-asrs-flow/src/pages/map/index.jsx
index 275a47f..0032f74 100644
--- a/zy-asrs-flow/src/pages/map/index.jsx
+++ b/zy-asrs-flow/src/pages/map/index.jsx
@@ -1,7 +1,7 @@
import * as React from 'react'
import * as PIXI from 'pixi.js';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
-import { Layout, Button, Flex, Row, Col, FloatButton } from 'antd';
+import { Layout, Button, Flex, Row, Col, FloatButton, Select } from 'antd';
const { Header, Content } = Layout;
import {
AppstoreAddOutlined,
@@ -38,17 +38,29 @@
backgroundColor: '#F8FAFB',
height: 'calc(100vh - 120px)'
},
+ select: {
+ color: 'red',
+ fontWeight: 'bold',
+ }
};
});
+
+export const MapModel = Object.freeze({
+ OBSERVER_MODEL: "1",
+ MOVABLE_MODEL: "2",
+ SETTINGS_MODEL: "3",
+})
let player;
const Map = () => {
+ const intl = useIntl();
const { initialState, setInitialState } = useModel('@@initialState');
const { styles } = useStyles();
const mapRef = React.useRef();
const contentRef = React.useRef();
+ const [model, setModel] = React.useState(() => MapModel.OBSERVER_MODEL);
const [deviceVisible, setDeviceVisible] = React.useState(false);
const [settingsVisible, setSettingsVisible] = React.useState(false);
const [windowSize, setWindowSize] = React.useState({
@@ -57,8 +69,6 @@
});
const [app, setApp] = React.useState(null);
const [mapContainer, setMapContainer] = React.useState(null);
- const [mapEditModel, setMapEditModel] = React.useState(false);
- const [deviceSettingModel, setDeviceSettingModel] = React.useState(false);
const [didClickSprite, setDidClickSprite] = React.useState(false);
// init func
@@ -88,50 +98,52 @@
app.renderer.resize(width, height);
}, [app, mapContainer, windowSize])
- // Edit Model
+ // model
React.useEffect(() => {
if (!mapContainer) {
return;
}
- if (mapEditModel) {
- player.showGridlines();
- player.activateMapEvent(Utils.MapEvent.SELECTION_BOX);
- mapContainer.children.forEach(child => {
- Utils.beMovable(child, setDidClickSprite);
- })
- } else {
- setDeviceSettingModel(false);
- player.hideGridlines();
- player.activateMapEvent(null);
- mapContainer.children.forEach(child => {
- child.off('pointerup');
- child.off('pointerdown');
- child.off('click');
- })
- }
- }, [mapEditModel]);
+ switch (model) {
+ case MapModel.OBSERVER_MODEL:
- // Settings Model
- React.useEffect(() => {
- if (!mapContainer) {
- return;
- }
- if (deviceSettingModel) {
- player.showStarryBackground();
+ player.hideGridlines();
+ player.hideStarryBackground();
- player.activateMapEvent(null);
- mapContainer.children.forEach(child => {
- Utils.beSettings(child, setSettingsVisible, setDidClickSprite);
- })
- } else {
- player.hideStarryBackground();
+ player.activateMapEvent(null);
- player.activateMapEvent(Utils.MapEvent.SELECTION_BOX);
- mapContainer.children.forEach(child => {
- Utils.beMovable(child, setDidClickSprite);
- })
+ mapContainer.children.forEach(child => {
+ child.off('pointerup');
+ child.off('pointermove');
+ child.off('pointerdown');
+ child.off('click');
+ })
+ break
+ case MapModel.MOVABLE_MODEL:
+
+ player.showGridlines();
+ player.hideStarryBackground();
+
+ player.activateMapEvent(Utils.MapEvent.SELECTION_BOX);
+
+ mapContainer.children.forEach(child => {
+ Utils.beMovable(child, setDidClickSprite);
+ })
+ break
+ case MapModel.SETTINGS_MODEL:
+
+ player.showGridlines();
+ player.showStarryBackground();
+
+ player.activateMapEvent(null);
+
+ mapContainer.children.forEach(child => {
+ Utils.beSettings(child, setSettingsVisible, setDidClickSprite);
+ })
+ break
+ default:
+ break
}
- }, [deviceSettingModel]);
+ }, [model]);
// Add New Device
const onDrop = (sprite, x, y) => {
@@ -161,12 +173,25 @@
<Col span={8} style={{ backgroundColor: '#3C40C6' }}></Col>
<Col span={16} style={{ backgroundColor: '#3C40C6' }}>
<Flex className={styles.flex} gap={'large'} justify={'flex-end'} align={'center'}>
- <Button onClick={() => setMapEditModel(!mapEditModel)} size={'large'}>
- {!mapEditModel
- ? <span style={{ fontWeight: 'bold' }}><FormattedMessage id='map.edit' defaultMessage='缂栬緫鍦板浘' /></span>
- : <span style={{ color: 'red', fontWeight: 'bold' }}><FormattedMessage id='map.edit.close' defaultMessage='閫�鍑虹紪杈�' /></span>
- }
- </Button>
+ <Select
+ className={styles.select}
+ size={'large'}
+ defaultValue={MapModel.OBSERVER_MODEL}
+ style={{
+ width: 180,
+ }}
+ onChange={setModel}
+ options={[
+ {
+ value: MapModel.OBSERVER_MODEL,
+ label: intl.formatMessage({ id: 'map.model.observer', defaultMessage: '瑙傚療鑰呮ā寮�' }),
+ },
+ {
+ value: MapModel.MOVABLE_MODEL,
+ label: intl.formatMessage({ id: 'map.model.editor', defaultMessage: '缂栬緫鑰呮ā寮�' }),
+ },
+ ]}
+ />
</Flex>
</Col>
</Row>
@@ -188,7 +213,7 @@
</FloatButton.Group>
<FloatButton.Group
- hidden={!mapEditModel}
+ hidden={model === MapModel.OBSERVER_MODEL}
trigger="hover"
style={{
right: 35,
@@ -204,11 +229,11 @@
}}
/>
<FloatButton
- type={deviceSettingModel ? 'primary' : 'default'}
+ type={model === MapModel.SETTINGS_MODEL ? 'primary' : 'default'}
tooltip={<div><FormattedMessage id='map.device.oper' defaultMessage='鍙傛暟璁剧疆' /></div>}
icon={<SettingOutlined />}
onClick={() => {
- setDeviceSettingModel(!deviceSettingModel);
+ setModel(model === MapModel.SETTINGS_MODEL ? MapModel.MOVABLE_MODEL : MapModel.SETTINGS_MODEL)
}}
/>
</FloatButton.Group>
--
Gitblit v1.9.1