From d71bf49951b25e322b61aeb31f875002f6b59cbc Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期六, 02 三月 2024 17:01:50 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/pages/map/player.js | 36 ++++++++++++++++++
zy-asrs-flow/src/pages/map/components/edit.jsx | 1
zy-asrs-flow/src/pages/map/index.jsx | 57 ++++++----------------------
3 files changed, 48 insertions(+), 46 deletions(-)
diff --git a/zy-asrs-flow/src/pages/map/components/edit.jsx b/zy-asrs-flow/src/pages/map/components/edit.jsx
index 3a3600f..e83ff62 100644
--- a/zy-asrs-flow/src/pages/map/components/edit.jsx
+++ b/zy-asrs-flow/src/pages/map/components/edit.jsx
@@ -8,7 +8,6 @@
const Edit = (props) => {
const [dragging, setDragging] = useState(false);
const [dragSprite, setDragSprite] = useState(null);
- const { mapContainer } = props;
useEffect(() => {
const handleMouseMove = (e) => {
diff --git a/zy-asrs-flow/src/pages/map/index.jsx b/zy-asrs-flow/src/pages/map/index.jsx
index 9e38601..7e2e4bb 100644
--- a/zy-asrs-flow/src/pages/map/index.jsx
+++ b/zy-asrs-flow/src/pages/map/index.jsx
@@ -7,6 +7,7 @@
import { createStyles } from 'antd-style';
import Edit from './components/edit'
import * as Utils from './utils'
+import Player from './player';
const useStyles = createStyles(({ token }) => {
let dark = token.colorBgBase === '#000';
@@ -39,30 +40,19 @@
const contentRef = React.useRef();
const [editModalVisible, setEditModalVisible] = React.useState(false);
-
- const [app, setApp] = React.useState(() => {
- return new PIXI.Application({
- background: '#F8FAFB',
- antialias: true,
- })
- })
- const [mapContainer, setMapContainer] = React.useState(() => {
- const mapContainer = new PIXI.Container();
- mapContainer.name = "mapContainer";
- mapContainer.data = {};
- app.stage.addChild(mapContainer);
- return mapContainer;
- })
-
const [windowSize, setWindowSize] = React.useState({
width: window.innerWidth,
height: window.innerHeight,
});
+ const [app, setApp] = React.useState(null)
+ const [mapContainer, setMapContainer] = React.useState(null)
React.useEffect(() => {
-
- Utils.syncApp(app);
- Utils.syncMapContainer(mapContainer);
+ const player = new Player(mapRef.current);
+ setApp(player.app);
+ setMapContainer(player.mapContainer);
+ Utils.syncApp(player.app);
+ Utils.syncMapContainer(player.mapContainer);
const handleResize = () => {
setWindowSize({
@@ -71,38 +61,16 @@
});
};
window.addEventListener('resize', handleResize);
-
- setTimeout(() => {
- // app init
- app.stage.eventMode = 'auto';
- app.stage.hitArea = app.screen;
- globalThis.__PIXI_APP__ = app;
- mapRef.current.appendChild(app.view);
-
- const texture = PIXI.Texture.from('https://pixijs.com/assets/bunny.png');
- const bunny = new PIXI.Sprite(texture);
- bunny.anchor.set(0.5);
- bunny.x = app.screen.width / 2;
- bunny.y = app.screen.height / 2;
-
- mapContainer.addChild(bunny);
-
- app.ticker.add((delta) => {
- bunny.rotation -= 0.01 * delta;
- });
-
- return () => {
- app.destroy(true, true);
- }
- }, 300)
-
}, []);
React.useEffect(() => {
+ if (!app) {
+ return;
+ }
const width = contentRef.current.offsetWidth;
const height = contentRef.current.offsetHeight;
app.renderer.resize(width, height);
- }, [windowSize]);
+ }, [app, mapContainer, windowSize])
const editHandle = () => {
setEditModalVisible(true);
@@ -135,7 +103,6 @@
}}
refCurr={mapRef.current}
onDrop={onDrop}
- mapContainer={mapContainer}
/>
</>
)
diff --git a/zy-asrs-flow/src/pages/map/player.js b/zy-asrs-flow/src/pages/map/player.js
new file mode 100644
index 0000000..2287e49
--- /dev/null
+++ b/zy-asrs-flow/src/pages/map/player.js
@@ -0,0 +1,36 @@
+import * as PIXI from 'pixi.js';
+import * as TWEEDLE from 'tweedle.js';
+
+export default class Player {
+
+ constructor(dom) {
+ this.app = generatePixiApp();
+ dom.appendChild(this.app.view);
+
+ globalThis.__PIXI_APP__ = this.app;
+
+ this.mapContainer = generatePixiContainer('mapContainer');
+ this.app.stage.addChild(this.mapContainer);
+ }
+
+
+
+
+}
+
+function generatePixiApp() {
+ const app = new PIXI.Application({
+ background: '#F8FAFB',
+ antialias: true,
+ })
+ app.stage.eventMode = 'auto';
+ app.stage.hitArea = app.screen;
+ return app;
+}
+
+function generatePixiContainer(name) {
+ const mapContainer = new PIXI.Container();
+ mapContainer.name = name;
+ mapContainer.data = {};
+ return mapContainer;
+}
\ No newline at end of file
--
Gitblit v1.9.1