rcs-flow.git - Gitblit

			@@ -5,20 +5,10 @@
			MenuItem,
			Button,
			Box,
			SpeedDial,
			SpeedDialAction,
			useTheme,
			Fab,
			} from '@mui/material';
			import {
			MoreVert as MoreVertIcon,
			Edit as EditIcon,
			FileCopy as FileCopyIcon,
			Save as SaveIcon,
			Print as PrintIcon,
			Share as ShareIcon,
			} from '@mui/icons-material';
			import { MAP_MODE } from "./constants";
			import { MAP_MODE, MAP_DEFAULT_ROTATION } from "./constants";
			import Player from './player';
			import * as Tool from './tool';
			import { NotificationProvider, useNotification } from './Notification';
			@@ -29,8 +19,13 @@
			import * as Http from './http';
			import WebSocketClient from './websocket'
			import ConfirmButton from "../page/components/ConfirmButton";
			import { FitScreen } from '@mui/icons-material';
			import { FitScreen, RotateRight, Flip } from '@mui/icons-material';
			import MapSearch from "./header/MapSearch";
			import { startupOrShutdown } from "./http";
			import PulseSignal from "../page/components/PulseSignal";
			import FakeFab from "./header/FakeFab";
			import RouteFab from "./header/RouteFab";
			import MoreOperate from "./header/MoreOperate";

			let player;
			let websocket;
			@@ -47,7 +42,8 @@
			const [app, setApp] = useState(null);
			const [mapContainer, setMapContainer] = useState(null);

			const [mode, setMode] = useState(null);
			const [mode, setMode] = useState(MAP_MODE.OBSERVER_MODE);
			const modeRef = useRef(mode);
			const [dataFetched, setDataFetched] = useState(false);
			const [insightVisible, setInsightVisible] = useState(false);
			const [deviceVisible, setDeviceVisible] = useState(false);
			@@ -55,9 +51,10 @@
			const [batchSelectionVisible, setBatchSelectionVisible] = useState(false);

			const [curSprite, setCurSprite] = useState(null);
			const prevCurSpriteRef = useRef();
			const [batchSprites, setBatchSprites] = useState([]);

			const [rcsStatus, setRcsStatus] = useState(null);
			const [showRoutes, setShowRoutes] = useState(false);
			const [curZone, setCurZone] = useState(() => {
			const storedValue = localStorage.getItem('curZone');
			return storedValue !== null ? JSON.parse(storedValue) : null;
			@@ -83,16 +80,19 @@
			Http.setMapContainer(player.mapContainer);
			websocket = new WebSocketClient('/ws/map/websocket');

			await Http.fetchMapData();
			await Http.fetchMapData(curZone, setRcsStatus, setCurSprite);
			websocket.connect();
			websocket.onMessage = (wsMsg) => {
			Tool.generateDynamicGraphic(curZone, JSON.parse(wsMsg));
			if (modeRef.current === MAP_MODE.OBSERVER_MODE) {
			Tool.generateDynamicGraphic(curZone, JSON.parse(wsMsg), setCurSprite);
			}
			}
			setDataFetched(true);
			setMode(MAP_MODE.OBSERVER_MODE);

			player.rotateMap(localStorage.getItem('mapRotation') \|\| Tool.rotationParseNum(MAP_DEFAULT_ROTATION));
			setTimeout(() => {
			player.adaptScreen();
			notify.info(translate('page.map.welcome'));
			player.adaptScreen();
			setDataFetched(true);
			}, 200)
			}
			initialize();
			@@ -109,7 +109,6 @@
			player.destroy();
			window.removeEventListener('resize', handleResize);
			Tool.patchRaLayout('');
			Tool.isF
			};
			}, [])

			@@ -123,7 +122,10 @@
			}, [themeMode])

			const switchMode = (mode) => {
			modeRef.current = mode;

			Tool.removeSelectedEffect();
			player.hideGridLines();

			setInsightVisible(false);
			setDeviceVisible(false);
			@@ -135,11 +137,8 @@

			switch (mode) {
			case MAP_MODE.OBSERVER_MODE:
			player.hideGridLines();
			player.hideStarryBackground();

			player.activateMapMultiSelect((selectedSprites, restartFn) => {
			setBatchSprites(selectedSprites);
			Tool.multipleSelectEnhancer(selectedSprites, setCurSprite, setBatchSprites);
			});

			mapContainer.children.forEach(child => {
			@@ -148,7 +147,7 @@
			break
			case MAP_MODE.MOVABLE_MODE:
			player.showGridLines();
			player.hideStarryBackground();
			Tool.hideRoutes(curZone, setShowRoutes);

			player.activateMapMultiSelect((selectedSprites, restartFn) => {
			Tool.spriteListBeMovable(selectedSprites, () => {
			@@ -161,11 +160,8 @@
			})
			break
			case MAP_MODE.SETTINGS_MODE:
			player.hideGridLines();
			// player.showStarryBackground(); // 0x2f68ac

			player.activateMapMultiSelect((selectedSprites, restartFn) => {
			setBatchSprites(selectedSprites);
			Tool.multipleSelectEnhancer(selectedSprites, setCurSprite, setBatchSprites);
			});

			mapContainer.children.forEach(child => {
			@@ -189,6 +185,9 @@
			sprite.x = mapX;
			sprite.y = mapY;

			// sprite.scale.set(mapContainer.scale.x);
			sprite.rotation = -mapContainer.rotation;

			Tool.initSprite(sprite, type);
			mapContainer.addChild(sprite);
			Tool.beMovable(sprite);
			@@ -199,24 +198,22 @@
			if (!mapContainer) {
			return;
			}
			prevCurSpriteRef.current = curSprite;
			if (curSprite && prevCurSprite !== curSprite) {
			Tool.removeSelectedEffect();
			}
			Tool.removeSelectedEffect();
			if (curSprite) {
			if (mode === MAP_MODE.OBSERVER_MODE) {
			Tool.showSelectedEffect(curSprite)
			setInsightVisible(true)
			Tool.showSelectedEffect(curSprite);
			setInsightVisible(true);
			}
			if (mode === MAP_MODE.SETTINGS_MODE) {
			Tool.showSelectedEffect(curSprite)
			setSettingsVisible(true)
			Tool.showSelectedEffect(curSprite);
			setSettingsVisible(true);
			}
			} else {
			Tool.removeSelectedEffect();
			setInsightVisible(false);
			setSettingsVisible(false);
			}
			}, [curSprite]);
			const prevCurSprite = prevCurSpriteRef.current;

			// watch batchSprites
			React.useEffect(() => {
			@@ -230,14 +227,6 @@
			setBatchSelectionVisible(false)
			}
			}, [batchSprites])

			const actions = [
			{ icon: <FileCopyIcon />, name: '复制' },
			{ icon: <SaveIcon />, name: '保存' },
			{ icon: <PrintIcon />, name: '打印' },
			{ icon: <ShareIcon />, name: '分享' },
			{ icon: <EditIcon />, name: '编辑' },
			];

			return (
			<Box
			@@ -274,16 +263,30 @@

			{mode === MAP_MODE.OBSERVER_MODE && (
			<>
			<Box sx={{ mr: 2, display: 'flex', alignItems: 'center' }}>
			<PulseSignal
			negative
			negativeColor='#a4b0be'
			flag={rcsStatus}
			width={12}
			/>
			</Box>
			<Button
			variant="contained"
			color="primary"
			color={rcsStatus ? 'inherit' : 'primary'}
			sx={{ mr: 2 }}
			onClick={() => {
			startupOrShutdown(() => {
			setRcsStatus(!rcsStatus);
			});
			}}
			>
			{translate('page.map.action.startup')}
			{rcsStatus ? translate('page.map.action.shutdown') : translate('page.map.action.startup')}
			</Button>
			<Button variant="contained" color="primary">
			{translate('page.map.action.monitor')}
			</Button>
			<MoreOperate />
			</>
			)}

			@@ -362,6 +365,20 @@
			flexGrow: 1, // fill remaining of map space
			position: 'relative',
			backgroundColor: '#fff',
			...(mode === MAP_MODE.SETTINGS_MODE && {
			animation: 'settingsPulse 1.5s infinite',
			'@keyframes settingsPulse': {
			'0%': {
			boxShadow: `0 0 3px 1px ${theme.palette.primary.main.replace('rgb', 'rgba').replace(')', `, 0.1)`)}`,
			},
			'50%': {
			boxShadow: `0 0 8px 3px ${theme.palette.primary.main.replace('rgb', 'rgba').replace(')', `, 0.5)`)}`,
			},
			'100%': {
			boxShadow: `0 0 3px 1px ${theme.palette.primary.main.replace('rgb', 'rgba').replace(')', `, 0.1)`)}`,
			},
			},
			})
			}}
			>
			<Box
			@@ -383,20 +400,6 @@
			}} />
			</Box>

			{/* <SpeedDial
			ariaLabel="SpeedDial 示例"
			sx={{ position: 'absolute', bottom: 16, right: 16 }}
			icon={<MoreVertIcon />}
			>
			{actions.map((action) => (
			<SpeedDialAction
			key={action.name}
			icon={action.icon}
			tooltipTitle={action.name}
			/>
			))}
			</SpeedDial> */}

			<Box
			sx={{
			position: 'absolute',
			@@ -404,19 +407,41 @@
			bottom: 30,
			display: 'flex',
			flexDirection: 'column',
			gap: 1
			gap: 2
			}}
			>
			{mode !== MAP_MODE.MOVABLE_MODE && (
			<>
			<RouteFab
			curZone={curZone}
			showRoutes={showRoutes}
			setShowRoutes={setShowRoutes}
			notify={notify}
			/>
			<FakeFab />
			</>
			)}
			<Fab
			variant="extended"
			color="primary"
			size="medium"
			size="small"
			onClick={() => {
			player.rotateMap(Math.PI / 2);
			}}
			>
			<RotateRight />
			{translate('page.map.action.rotate')}
			</Fab>
			<Fab
			variant="extended"
			color="primary"
			size="small"
			onClick={() => {
			player.adaptScreen();
			}}
			>
			<FitScreen />
			{translate('page.map.action.adapt')}
			{translate('page.map.action.adapt')}
			</Fab>
			</Box>
			</Box>
			@@ -425,7 +450,6 @@
			open={insightVisible}
			onCancel={() => {
			setCurSprite(null);
			setInsightVisible(false);
			}}
			sprite={curSprite}
			width={570}
			@@ -444,7 +468,6 @@
			open={settingsVisible}
			onCancel={() => {
			setCurSprite(null);
			setSettingsVisible(false);
			}}
			sprite={curSprite}
			setSpriteSettings={setCurSprite}
			@@ -455,7 +478,6 @@
			open={batchSelectionVisible}
			onCancel={() => {
			setBatchSprites([]);
			setBatchSelectionVisible(false);
			}}
			batchSprites={batchSprites}
			mode={mode}