From eaa43a7ce551a02d06c1c77461008759034d0658 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期四, 10 十月 2024 10:58:48 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/MapPage.jsx | 66 +++++++++++++++++++++++++++++---- 1 files changed, 58 insertions(+), 8 deletions(-) diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx index 01df102..a2335b3 100644 --- a/zy-acs-flow/src/map/MapPage.jsx +++ b/zy-acs-flow/src/map/MapPage.jsx @@ -23,14 +23,15 @@ import * as Tool from './tool'; import { NotificationProvider, useNotification } from './Notification'; import Device from "./Device"; +import * as Http from './http'; let player; const Map = () => { - const theme = useTheme(); - const themeMode = theme.palette.mode; const notify = useNotification(); const translate = useTranslate(); + const theme = useTheme(); + const themeMode = theme.palette.mode; const mapRef = useRef(); const contentRef = useRef(); @@ -38,8 +39,11 @@ const [mapContainer, setMapContainer] = useState(null); const [mode, setMode] = useState(MapMode.OBSERVER_MODE); - const [deviceVisible, setDeviceVisible] = React.useState(false); + const [deviceVisible, setDeviceVisible] = useState(false); + const [settingsVisible, setSettingsVisible] = useState(false); + const [spriteSettings, setSpriteSettings] = useState(null); + const prevSpriteSettingsRef = React.useRef(); useEffect(() => { Tool.patchRaLayout('0px'); @@ -49,6 +53,10 @@ setMapContainer(player.mapContainer); Tool.setApp(player.app); Tool.setMapContainer(player.mapContainer); + Tool.setThemeMode(themeMode); + Http.setNotify(notify); + + await Http.fetchMapData(0); } initialize(); @@ -76,11 +84,33 @@ switch (mode) { case MapMode.OBSERVER_MODE: setDeviceVisible(false); + player.hideGridLines(); + + player.activateMapMultiSelect((selectedSprites, restartFn) => { + console.log(selectedSprites); + }); + break case MapMode.MOVABLE_MODE: + player.showGridLines(); + + player.activateMapMultiSelect((selectedSprites, restartFn) => { + Tool.spriteListBeMovable(selectedSprites, () => { + restartFn(); + }); + }); break case MapMode.SETTINGS_MODE: + player.hideGridLines(); setDeviceVisible(false); + + player.activateMapMultiSelect((selectedSprites, restartFn) => { + console.log(selectedSprites); + }); + + mapContainer.children.forEach(child => { + Tool.beSettings(child, setSpriteSettings); + }) break default: break @@ -92,17 +122,37 @@ return } switchMode(mode); - }, [mode]); + }, [mode, mapContainer]); const onDrop = (sprite, type, x, y) => { const { mapX, mapY } = Tool.getRealPosition(x, y); sprite.x = mapX; sprite.y = mapY; - // Utils.initSprite(sprite, type); - // mapContainer.addChild(sprite); - // Utils.beMovable(sprite); + Tool.initSprite(sprite, type); + mapContainer.addChild(sprite); + Tool.beMovable(sprite); }; + + // watch spriteSettings + useEffect(() => { + if (!mapContainer) { + return; + } + console.log(spriteSettings); + + prevSpriteSettingsRef.current = spriteSettings; + if (spriteSettings && prevSpriteSettings !== spriteSettings) { + Tool.removeSelectedEffect(); + } + if (spriteSettings) { + Tool.showSelectedEffect(spriteSettings) + setSettingsVisible(true); + } else { + Tool.removeSelectedEffect(); + } + }, [spriteSettings, mapContainer]) + const prevSpriteSettings = prevSpriteSettingsRef.current; const actions = [ { icon: <FileCopyIcon />, name: '澶嶅埗' }, @@ -168,7 +218,7 @@ sx={{ mr: 1 }} onClick={() => setDeviceVisible(!deviceVisible)} > - 娣诲姞妯″瀷 + {translate('page.map.devices.title')} </Button> </> )} -- Gitblit v1.9.1