From 1357573c2574aeb629f66b20ad87676351405f0b Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期二, 08 十月 2024 13:05:29 +0800
Subject: [PATCH] #

---
 zy-acs-flow/src/map/player.js   |   21 ++++++----
 zy-acs-flow/src/map/MapPage.jsx |   57 ++++++++++++++++++++++++++--
 2 files changed, 66 insertions(+), 12 deletions(-)

diff --git a/zy-acs-flow/src/map/MapPage.jsx b/zy-acs-flow/src/map/MapPage.jsx
index b632f62..6005182 100644
--- a/zy-acs-flow/src/map/MapPage.jsx
+++ b/zy-acs-flow/src/map/MapPage.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useRef, useEffect, useMemo } from "react";
 import {
     TextField,
     Select,
@@ -16,9 +16,54 @@
     Print as PrintIcon,
     Share as ShareIcon,
 } from '@mui/icons-material';
+import Player from './player';
 
-function MapPage() {
-    const [mode, setMode] = React.useState('monitoring');
+let player;
+
+const MapPage = () => {
+    const mapRef = useRef();
+    const contentRef = useRef();
+    const [app, setApp] = useState(null);
+    const [mapContainer, setMapContainer] = React.useState(null);
+    const [windowSize, setWindowSize] = useState({
+        width: window.innerWidth,
+        height: window.innerHeight,
+    });
+    const [mode, setMode] = useState('monitoring');
+
+    useEffect(() => {
+        const initialize = async () => {
+            player = new Player(mapRef.current);
+            setApp(player.app);
+            setMapContainer(player.mapContainer);
+
+            const handleResize = () => {
+                setWindowSize({
+                    width: window.innerWidth,
+                    height: window.innerHeight,
+                });
+            };
+            window.addEventListener('resize', handleResize);
+
+        }
+
+        initialize();
+        return () => {
+            player.app.destroy(true, { children: true });
+        };
+    }, [])
+
+    // resize
+    React.useEffect(() => {
+        if (!app) {
+            return;
+        }
+        console.log(1);
+
+        const width = contentRef.current.offsetWidth;
+        const height = contentRef.current.offsetHeight;
+        app.renderer.resize(width, height);
+    }, [app, mapContainer, windowSize])
 
     const handleModeChange = (event) => {
         setMode(event.target.value);
@@ -97,12 +142,16 @@
                 }}
             >
                 <Box
+                    ref={contentRef}
                     sx={{
                         width: '100%',
                         height: '100%',
                         backgroundColor: '#e0e0e0',
                     }}
-                />
+                >
+                    <div ref={mapRef} />
+                </Box>
+
                 <SpeedDial
                     ariaLabel="SpeedDial 绀轰緥"
                     sx={{ position: 'absolute', bottom: 16, right: 16 }}
diff --git a/zy-acs-flow/src/map/player.js b/zy-acs-flow/src/map/player.js
index c8fa3af..3e33579 100644
--- a/zy-acs-flow/src/map/player.js
+++ b/zy-acs-flow/src/map/player.js
@@ -4,10 +4,10 @@
 export default class Player {
 
     constructor(dom) {
-        // init
         this.app = new PIXI.Application({
             background: '#f1f2f6',
             antialias: true,
+            // resizeTo: dom, // 鑷姩璋冩暣 canvas 灏哄
         })
         this.app.stage.eventMode = 'static';
         this.app.stage.hitArea = this.app.screen;
@@ -17,25 +17,30 @@
         dom.appendChild(this.app.view);
 
         globalThis.__PIXI_APP__ = this.app;
-        // create a new Sprite from an image path
+
+        this.mapContainer = generateMapContainer('mapContainer');
+
         const bunny = PIXI.Sprite.from('https://pixijs.com/assets/bunny.png');
 
-        // center the sprite's anchor point
         bunny.anchor.set(0.5);
 
-        // move the sprite to the center of the screen
         bunny.x = this.app.screen.width / 2;
         bunny.y = this.app.screen.height / 2;
 
         this.app.stage.addChild(bunny);
 
-        // Listen for animate update
         this.app.ticker.add((delta) => {
-            // just for fun, let's rotate mr rabbit a little
-            // delta is 1 if running at 100% performance
-            // creates frame-independent transformation
             bunny.rotation += 0.1 * delta;
         });
     }
 
+
+}
+
+const generateMapContainer = (name) => {
+    const mapContainer = new PIXI.Container();
+    mapContainer.sortableChildren = true;
+    mapContainer.name = name;
+    mapContainer.data = {};
+    return mapContainer;
 }
\ No newline at end of file

--
Gitblit v1.9.1