From 429a56010fb52292c5f690f5fc48ce0a2dc542df Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期一, 04 三月 2024 13:17:06 +0800
Subject: [PATCH] #
---
zy-asrs-flow/src/pages/map/player.js | 39 +++++++++++++++++++++++++++++++++++++++
zy-asrs-flow/src/pages/map/index.jsx | 17 +++++++++++------
2 files changed, 50 insertions(+), 6 deletions(-)
diff --git a/zy-asrs-flow/src/pages/map/index.jsx b/zy-asrs-flow/src/pages/map/index.jsx
index d4a899d..40f010b 100644
--- a/zy-asrs-flow/src/pages/map/index.jsx
+++ b/zy-asrs-flow/src/pages/map/index.jsx
@@ -39,6 +39,8 @@
};
});
+let player;
+
const Map = () => {
const { initialState, setInitialState } = useModel('@@initialState');
const { styles } = useStyles();
@@ -55,7 +57,7 @@
const [mapEditModel, setMapEditModel] = React.useState(false);
React.useEffect(() => {
- const player = new Player(mapRef.current, styles.dark);
+ player = new Player(mapRef.current, styles.dark);
setApp(player.app);
setMapContainer(player.mapContainer);
Utils.syncApp(player.app);
@@ -78,13 +80,16 @@
const height = contentRef.current.offsetHeight;
app.renderer.resize(width, height);
}, [app, mapContainer, windowSize])
-
+
React.useEffect(() => {
if (!mapContainer) {
return;
}
-
- console.log(mapEditModel);
+ if (mapEditModel) {
+ player.showGridlines();
+ } else {
+ player.hideGridlines();
+ }
}, [mapEditModel]);
const onDrop = (sprite, x, y) => {
@@ -99,8 +104,8 @@
<Layout className={styles.layout}>
<Header className={styles.header}>
<Row style={{ height: '100%' }}>
- <Col span={8} style={{}}></Col>
- <Col span={16} style={{ backgroundColor: '#3C40C6', }}>
+ <Col span={8} style={{ backgroundColor: '#3C40C6' }}></Col>
+ <Col span={16} style={{ backgroundColor: '#3C40C6' }}>
<Flex className={styles.flex} gap={'large'} justify={'flex-end'} align={'center'}>
<Button onClick={() => setMapEditModel(!mapEditModel)} size={'large'}>
{!mapEditModel
diff --git a/zy-asrs-flow/src/pages/map/player.js b/zy-asrs-flow/src/pages/map/player.js
index abb6437..4f2e7b3 100644
--- a/zy-asrs-flow/src/pages/map/player.js
+++ b/zy-asrs-flow/src/pages/map/player.js
@@ -77,6 +77,7 @@
fontFamily: 'MicrosoftYaHei',
fontWeight: 'bold',
});
+ coordinatesText.name = 'xyStr'
coordinatesText.position.set(10, 10);
this.app.stage.addChild(coordinatesText);
@@ -88,6 +89,44 @@
this.app.view.addEventListener('mousemove', mouseMoveInfoTextHandler);
}
+ showGridlines = () => {
+ if (!this.gridLineContainer) {
+ this.gridLineContainer = generatePixiContainer('gridLineContainer');
+ this.app.stage.addChild(this.gridLineContainer);
+ }
+
+ const inte = 30;
+ const lineDefaultAlpha = .5;;
+ const lineDefaultColor = 0x000000;
+ for (let i = 0; i < this.app.view.width / inte; i++) {
+ const graphics = new PIXI.Graphics();
+ graphics.lineStyle(.3, lineDefaultColor, lineDefaultAlpha);
+ graphics.beginFill(lineDefaultColor);
+ graphics.moveTo(i * inte, 0);
+ graphics.lineTo(i * inte, this.app.view.height);
+ graphics.endFill();
+ this.gridLineContainer.addChild(graphics);
+ }
+
+ for (let i = 0; i < this.app.view.height / inte; i++) {
+ const graphics = new PIXI.Graphics();
+ graphics.lineStyle(.3, lineDefaultColor, lineDefaultAlpha);
+ graphics.beginFill(lineDefaultColor);
+ graphics.moveTo(0, i * inte);
+ graphics.lineTo(this.app.view.width, i * inte);
+ graphics.endFill();
+
+ this.gridLineContainer.addChild(graphics);
+ }
+ }
+
+ hideGridlines = () => {
+ if (this.gridLineContainer) {
+ this.app.stage.removeChild(this.gridLineContainer);
+ this.gridLineContainer = null;
+ }
+ }
+
appTicker = () => {
TWEEDLE.Group.shared.update();
}
--
Gitblit v1.9.1