From c9c8b33b9a3534f0e4a0be6bbed291163807ac66 Mon Sep 17 00:00:00 2001
From: Junjie <xjj@123>
Date: 星期一, 04 三月 2024 15:34:23 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
zy-asrs-flow/src/pages/map/player.js | 45 ++++++++++++++-
zy-asrs-flow/src/locales/en-US/map.ts | 10 +++
zy-asrs-flow/src/pages/map/index.jsx | 87 ++++++++++++++++++++++++-----
zy-asrs-flow/src/pages/map/components/device.jsx | 4
4 files changed, 125 insertions(+), 21 deletions(-)
diff --git a/zy-asrs-flow/src/locales/en-US/map.ts b/zy-asrs-flow/src/locales/en-US/map.ts
index dd8d415..0926568 100644
--- a/zy-asrs-flow/src/locales/en-US/map.ts
+++ b/zy-asrs-flow/src/locales/en-US/map.ts
@@ -1,3 +1,11 @@
export default {
- 'map.edit': 'Edit Map',
+ 'map.edit': 'Edit Model',
+ 'map.edit.close': 'Exit Edit',
+ 'map.device.add': 'Add New Device',
+ '': '',
+ '': '',
+ '': '',
+ '': '',
+ '': '',
+ '': '',
}
\ No newline at end of file
diff --git a/zy-asrs-flow/src/pages/map/components/edit.jsx b/zy-asrs-flow/src/pages/map/components/device.jsx
similarity index 98%
rename from zy-asrs-flow/src/pages/map/components/edit.jsx
rename to zy-asrs-flow/src/pages/map/components/device.jsx
index e757d1b..81c69af 100644
--- a/zy-asrs-flow/src/pages/map/components/edit.jsx
+++ b/zy-asrs-flow/src/pages/map/components/device.jsx
@@ -34,7 +34,7 @@
import agv from '/public/img/map/agv.svg'
-const Edit = (props) => {
+const Device = (props) => {
const { styles } = useStyles();
const [dragging, setDragging] = useState(false);
const [dragSprite, setDragSprite] = useState(null);
@@ -178,4 +178,4 @@
)
}
-export default Edit;
\ No newline at end of file
+export default Device;
\ No newline at end of file
diff --git a/zy-asrs-flow/src/pages/map/index.jsx b/zy-asrs-flow/src/pages/map/index.jsx
index bb582a3..7956a63 100644
--- a/zy-asrs-flow/src/pages/map/index.jsx
+++ b/zy-asrs-flow/src/pages/map/index.jsx
@@ -1,17 +1,23 @@
import * as React from 'react'
import * as PIXI from 'pixi.js';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
-import { Layout, Button, Flex, } from 'antd';
+import { Layout, Button, Flex, Row, Col, FloatButton } from 'antd';
const { Header, Content } = Layout;
+import {
+ AppstoreAddOutlined,
+ FileAddOutlined,
+ CompressOutlined,
+} from '@ant-design/icons';
import './index.css'
import { createStyles } from 'antd-style';
-import Edit from './components/edit'
+import Edit from './components/device'
import * as Utils from './utils'
import Player from './player';
const useStyles = createStyles(({ token }) => {
let dark = token.colorBgBase === '#000';
return {
+ dark: dark,
layout: {
overflow: 'hidden',
},
@@ -29,9 +35,11 @@
content: {
backgroundColor: '#F8FAFB',
height: 'calc(100vh - 120px)'
- }
+ },
};
});
+
+let player;
const Map = () => {
const { initialState, setInitialState } = useModel('@@initialState');
@@ -39,16 +47,17 @@
const mapRef = React.useRef();
const contentRef = React.useRef();
- const [editModalVisible, setEditModalVisible] = React.useState(false);
+ const [deviceVisible, setDeviceVisible] = React.useState(false);
const [windowSize, setWindowSize] = React.useState({
width: window.innerWidth,
height: window.innerHeight,
});
- const [app, setApp] = React.useState(null)
- const [mapContainer, setMapContainer] = React.useState(null)
+ const [app, setApp] = React.useState(null);
+ const [mapContainer, setMapContainer] = React.useState(null);
+ const [mapEditModel, setMapEditModel] = React.useState(false);
React.useEffect(() => {
- const player = new Player(mapRef.current);
+ player = new Player(mapRef.current, styles.dark);
setApp(player.app);
setMapContainer(player.mapContainer);
Utils.syncApp(player.app);
@@ -72,9 +81,16 @@
app.renderer.resize(width, height);
}, [app, mapContainer, windowSize])
- const editHandle = () => {
- setEditModalVisible(true);
- }
+ React.useEffect(() => {
+ if (!mapContainer) {
+ return;
+ }
+ if (mapEditModel) {
+ player.showGridlines();
+ } else {
+ player.hideGridlines();
+ }
+ }, [mapEditModel]);
const onDrop = (sprite, x, y) => {
const { mapX, mapY } = Utils.getRealPosition(x, y, mapContainer);
@@ -87,19 +103,60 @@
<>
<Layout className={styles.layout}>
<Header className={styles.header}>
- <Flex className={styles.flex} gap={'large'} justify={'flex-end'} align={'center'}>
- <Button onClick={editHandle} size={'large'}><FormattedMessage id='map.edit' defaultMessage='缂栬緫鍦板浘' /></Button>
- </Flex>
+ <Row style={{ height: '100%' }}>
+ <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
+ ? <span style={{ fontWeight: 'bold' }}><FormattedMessage id='map.edit' defaultMessage='缂栬緫鍦板浘' /></span>
+ : <span style={{ color: 'red', fontWeight: 'bold' }}><FormattedMessage id='map.edit.close' defaultMessage='閫�鍑虹紪杈�' /></span>
+ }
+ </Button>
+ </Flex>
+ </Col>
+ </Row>
</Header>
<Content ref={contentRef} className={styles.content}>
<div ref={mapRef} style={{ position: "relative" }} />
+
+ <FloatButton.Group
+ shape="square"
+ style={{
+ left: 35,
+ bottom: 35
+ }}
+ >
+ <FloatButton
+ icon={<CompressOutlined />}
+ />
+ <FloatButton.BackTop visibilityHeight={0} />
+ </FloatButton.Group>
+
+ <FloatButton.Group
+ hidden={!mapEditModel}
+ trigger="hover"
+ style={{
+ right: 35,
+ bottom: 35
+ }}
+ icon={<AppstoreAddOutlined />}
+ >
+ <FloatButton
+ tooltip={<div><FormattedMessage id='map.device.add' defaultMessage='娣诲姞璁惧' /></div>}
+ icon={<FileAddOutlined />}
+ onClick={() => {
+ setDeviceVisible(true);
+ }}
+ />
+ </FloatButton.Group>
</Content>
</Layout>
<Edit
- open={editModalVisible}
+ open={deviceVisible}
onCancel={() => {
- setEditModalVisible(false);
+ setDeviceVisible(false);
}}
refCurr={mapRef.current}
onDrop={onDrop}
diff --git a/zy-asrs-flow/src/pages/map/player.js b/zy-asrs-flow/src/pages/map/player.js
index d78c682..4f2e7b3 100644
--- a/zy-asrs-flow/src/pages/map/player.js
+++ b/zy-asrs-flow/src/pages/map/player.js
@@ -6,7 +6,7 @@
constructor(dom, dark) {
this.darkModel = dark;
// init
- this.app = generatePixiApp();
+ this.app = generatePixiApp(dark);
dom.appendChild(this.app.view);
globalThis.__PIXI_APP__ = this.app;
@@ -77,6 +77,7 @@
fontFamily: 'MicrosoftYaHei',
fontWeight: 'bold',
});
+ coordinatesText.name = 'xyStr'
coordinatesText.position.set(10, 10);
this.app.stage.addChild(coordinatesText);
@@ -88,15 +89,53 @@
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();
}
}
-function generatePixiApp() {
+function generatePixiApp(dark) {
const app = new PIXI.Application({
- background: '#F8FAFB',
+ background: dark ? '#f1f2f6' : '#f1f2f6',
antialias: true,
})
app.stage.eventMode = 'auto';
--
Gitblit v1.9.1