| | |
| | | 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.destroy(); |
| | | window.removeEventListener('resize', handleResize); |
| | | Tool.patchRaLayout(''); |
| | | Tool.isF |
| | | }; |
| | | }, []) |
| | | |
| | |
| | | }, [themeMode]) |
| | | |
| | | const switchMode = (mode) => { |
| | | modeRef.current = mode; |
| | | |
| | | Tool.removeSelectedEffect(); |
| | | player.hideGridLines(); |
| | | |
| | |
| | | agvSprite.position.set(codeSprite.position.x, codeSprite.position.y); |
| | | agvSprite.rotation = targetRotation + agvRotationOffset; |
| | | mapContainer.addChild(agvSprite); |
| | | console.log(agvSprite, setCurSprite); |
| | | beInsight(agvSprite, setCurSprite); |
| | | |
| | | // agvNo sprite |
| | | const agvText = new PIXI.Text(agvNo.toString(), { |
| | |
| | | animateRotation(agvSprite, targetRotation + agvRotationOffset, agvRotationOffset); |
| | | } |
| | | |
| | | beInsight(agvSprite, setCurSprite); |
| | | |
| | | new TWEEDLE.Tween(agvSprite.position) |
| | | .to({ |
| | | x: codeSprite.position.x, |