From 71d23129eff75fb89e95e7a33b3683c2017ce72c Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期一, 14 十月 2024 11:21:49 +0800 Subject: [PATCH] # --- zy-acs-flow/src/map/MapPage.jsx | 50 ++++++++++++++++++++++++++++++++------------------ 1 files changed, 32 insertions(+), 18 deletions(-) diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx index 27af6c1..1837b61 100644 --- a/zy-acs-flow/src/map/MapPage.jsx +++ b/zy-acs-flow/src/map/MapPage.jsx @@ -19,6 +19,7 @@ Print as PrintIcon, Share as ShareIcon, } from '@mui/icons-material'; +import { MAP_MODE } from "./constants"; import Player from './player'; import * as Tool from './tool'; import { NotificationProvider, useNotification } from './Notification'; @@ -47,7 +48,7 @@ const [app, setApp] = useState(null); const [mapContainer, setMapContainer] = useState(null); - const [mode, setMode] = useState(MapMode.OBSERVER_MODE); + const [mode, setMode] = useState(MAP_MODE.OBSERVER_MODE); const [insightVisible, setInsightVisible] = useState(false); const [deviceVisible, setDeviceVisible] = useState(false); const [settingsVisible, setSettingsVisible] = useState(false); @@ -125,20 +126,22 @@ setDeviceVisible(false); setSettingsVisible(false); + setBatchSelectionVisible(false); setSpriteSettings(null); + setBatchSprites([]); switch (mode) { - case MapMode.OBSERVER_MODE: + case MAP_MODE.OBSERVER_MODE: player.hideGridLines(); player.hideStarryBackground(); player.activateMapMultiSelect((selectedSprites, restartFn) => { - console.log(selectedSprites); + setBatchSprites(selectedSprites); }); break - case MapMode.MOVABLE_MODE: + case MAP_MODE.MOVABLE_MODE: player.showGridLines(); player.hideStarryBackground(); @@ -152,12 +155,12 @@ Tool.beMovable(child); }) break - case MapMode.SETTINGS_MODE: + case MAP_MODE.SETTINGS_MODE: player.hideGridLines(); player.showStarryBackground(); // 0x2f68ac player.activateMapMultiSelect((selectedSprites, restartFn) => { - console.log(selectedSprites); + setBatchSprites(selectedSprites); }); mapContainer.children.forEach(child => { @@ -204,6 +207,19 @@ }, [spriteSettings, mapContainer]) const prevSpriteSettings = prevSpriteSettingsRef.current; + // watch batchSprites + React.useEffect(() => { + if (!mapContainer) { + return; + } + if (batchSprites?.length > 0) { + setBatchSelectionVisible(true) + } else { + player.clearSelectedSprites(); + setBatchSelectionVisible(false) + } + }, [batchSprites]) + const actions = [ { icon: <FileCopyIcon />, name: '澶嶅埗' }, { icon: <SaveIcon />, name: '淇濆瓨' }, @@ -246,7 +262,7 @@ /> <Box sx={{ flexGrow: 1 }} /> - {mode === MapMode.OBSERVER_MODE && ( + {mode === MAP_MODE.OBSERVER_MODE && ( <> <Button variant="contained" @@ -261,7 +277,7 @@ </> )} - {mode === MapMode.MOVABLE_MODE && ( + {mode === MAP_MODE.MOVABLE_MODE && ( <> <Button variant="outlined" @@ -291,7 +307,7 @@ </> )} - {mode === MapMode.SETTINGS_MODE && ( + {mode === MAP_MODE.SETTINGS_MODE && ( <> <Button variant="outlined" @@ -325,9 +341,9 @@ borderRadius: 1, }} > - <MenuItem value={MapMode.OBSERVER_MODE}>鐩戞帶妯″紡</MenuItem> - <MenuItem value={MapMode.MOVABLE_MODE}>缂栬緫妯″紡</MenuItem> - <MenuItem value={MapMode.SETTINGS_MODE}>閰嶇疆妯″紡</MenuItem> + <MenuItem value={MAP_MODE.OBSERVER_MODE}>鐩戞帶妯″紡</MenuItem> + <MenuItem value={MAP_MODE.MOVABLE_MODE}>缂栬緫妯″紡</MenuItem> + <MenuItem value={MAP_MODE.SETTINGS_MODE}>閰嶇疆妯″紡</MenuItem> </Select> </Box> {/* content */} @@ -426,8 +442,12 @@ <Batch open={batchSelectionVisible} onCancel={() => { + setBatchSprites([]); setBatchSelectionVisible(false); }} + batchSprites={batchSprites} + mode={mode} + width={570} /> </Box> @@ -441,11 +461,5 @@ </NotificationProvider> ) } - -export const MapMode = Object.freeze({ - OBSERVER_MODE: "1", - MOVABLE_MODE: "2", - SETTINGS_MODE: "3", -}) export default MapPage; -- Gitblit v1.9.1