| | |
| | | useTheme, |
| | | Fab, |
| | | } from '@mui/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'; |
| | |
| | | import * as Http from './http'; |
| | | import WebSocketClient from './websocket' |
| | | import ConfirmButton from "../page/components/ConfirmButton"; |
| | | import { FitScreen, AltRoute, RotateRight } 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; |
| | |
| | | const [mapContainer, setMapContainer] = 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); |
| | |
| | | await Http.fetchMapData(curZone, setRcsStatus, setCurSprite); |
| | | websocket.connect(); |
| | | websocket.onMessage = (wsMsg) => { |
| | | Tool.generateDynamicGraphic(curZone, JSON.parse(wsMsg), setCurSprite); |
| | | if (modeRef.current === MAP_MODE.OBSERVER_MODE) { |
| | | Tool.generateDynamicGraphic(curZone, JSON.parse(wsMsg), setCurSprite); |
| | | } |
| | | } |
| | | |
| | | player.rotateMap(localStorage.getItem('mapRotation')); |
| | | player.rotateMap(localStorage.getItem('mapRotation') || Tool.rotationParseNum(MAP_DEFAULT_ROTATION)); |
| | | setTimeout(() => { |
| | | notify.info(translate('page.map.welcome')); |
| | | player.adaptScreen(); |
| | |
| | | player.destroy(); |
| | | window.removeEventListener('resize', handleResize); |
| | | Tool.patchRaLayout(''); |
| | | Tool.isF |
| | | }; |
| | | }, []) |
| | | |
| | |
| | | }, [themeMode]) |
| | | |
| | | const switchMode = (mode) => { |
| | | modeRef.current = mode; |
| | | |
| | | Tool.removeSelectedEffect(); |
| | | player.hideGridLines(); |
| | | |
| | |
| | | const { mapX, mapY } = Tool.getRealPosition(x, y); |
| | | sprite.x = mapX; |
| | | sprite.y = mapY; |
| | | |
| | | // sprite.scale.set(mapContainer.scale.x); |
| | | sprite.rotation = -mapContainer.rotation; |
| | | |
| | | Tool.initSprite(sprite, type); |
| | | mapContainer.addChild(sprite); |
| | |
| | | <Button variant="contained" color="primary"> |
| | | {translate('page.map.action.monitor')} |
| | | </Button> |
| | | <MoreOperate /> |
| | | </> |
| | | )} |
| | | |
| | |
| | | > |
| | | {mode !== MAP_MODE.MOVABLE_MODE && ( |
| | | <> |
| | | <Fab |
| | | variant="extended" |
| | | color={showRoutes ? 'primary' : 'default'} |
| | | size="small" |
| | | onClick={() => { |
| | | showRoutes ? Tool.hideRoutes(curZone, setShowRoutes) : Tool.showRoutes(curZone, setShowRoutes) |
| | | }} |
| | | > |
| | | <AltRoute /> |
| | | </Fab> |
| | | <FakeFab |
| | | <RouteFab |
| | | curZone={curZone} |
| | | showRoutes={showRoutes} |
| | | setShowRoutes={setShowRoutes} |
| | | notify={notify} |
| | | /> |
| | | <FakeFab /> |
| | | </> |
| | | )} |
| | | <Fab |
| | |
| | | }} |
| | | > |
| | | <RotateRight /> |
| | | {/* {translate('page.map.action.adapt')} */} |
| | | {translate('page.map.action.rotate')} |
| | | </Fab> |
| | | <Fab |
| | | variant="extended" |
| | |
| | | }} |
| | | > |
| | | <FitScreen /> |
| | | {/* {translate('page.map.action.adapt')} */} |
| | | {translate('page.map.action.adapt')} |
| | | </Fab> |
| | | </Box> |
| | | </Box> |