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 |   60 ++++++++++++++++++++++++++++++++++++++++++------------------
 1 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx
index 355217f..1837b61 100644
--- a/zy-acs-flow/src/map/MapPage.jsx
+++ b/zy-acs-flow/src/map/MapPage.jsx
@@ -19,12 +19,14 @@
     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';
 import Insight from "./insight";
 import Device from "./Device";
 import Settings from "./settings";
+import Batch from "./batch";
 import * as Http from './http';
 import WebSocketClient from './websocket'
 import ConfirmButton from "../page/components/ConfirmButton";
@@ -46,13 +48,15 @@
     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);
+    const [batchSelectionVisible, setBatchSelectionVisible] = useState(false);
 
     const [spriteSettings, setSpriteSettings] = useState(null);
     const prevSpriteSettingsRef = useRef();
+    const [batchSprites, setBatchSprites] = useState([]);
 
     const [curZone, setCurZone] = useState(() => {
         const storedValue = localStorage.getItem('curZone');
@@ -122,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();
 
@@ -149,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 => {
@@ -201,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: '淇濆瓨' },
@@ -243,7 +262,7 @@
                 />
                 <Box sx={{ flexGrow: 1 }} />
 
-                {mode === MapMode.OBSERVER_MODE && (
+                {mode === MAP_MODE.OBSERVER_MODE && (
                     <>
                         <Button
                             variant="contained"
@@ -258,7 +277,7 @@
                     </>
                 )}
 
-                {mode === MapMode.MOVABLE_MODE && (
+                {mode === MAP_MODE.MOVABLE_MODE && (
                     <>
                         <Button
                             variant="outlined"
@@ -288,7 +307,7 @@
                     </>
                 )}
 
-                {mode === MapMode.SETTINGS_MODE && (
+                {mode === MAP_MODE.SETTINGS_MODE && (
                     <>
                         <Button
                             variant="outlined"
@@ -322,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 */}
@@ -420,6 +439,17 @@
                 width={570}
             />
 
+            <Batch
+                open={batchSelectionVisible}
+                onCancel={() => {
+                    setBatchSprites([]);
+                    setBatchSelectionVisible(false);
+                }}
+                batchSprites={batchSprites}
+                mode={mode}
+                width={570}
+            />
+
         </Box>
     );
 }
@@ -431,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