import * as React from 'react'
|
import * as PIXI from 'pixi.js';
|
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
|
import { Layout, Button, Flex, } from 'antd';
|
const { Header, Content } = Layout;
|
import './index.css'
|
import { createStyles } from 'antd-style';
|
import Edit from './components/edit'
|
|
const useStyles = createStyles(({ token }) => {
|
let dark = token.colorBgBase === '#000';
|
return {
|
layout: {
|
overflow: 'hidden',
|
},
|
header: {
|
height: 64,
|
paddingInline: 48,
|
lineHeight: '64px',
|
padding: 0,
|
},
|
flex: {
|
width: '100%',
|
height: '100%',
|
padding: '0 30px',
|
},
|
content: {
|
backgroundColor: '#F8FAFB',
|
height: 'calc(100vh - 120px)'
|
}
|
};
|
});
|
|
const Map = () => {
|
const { initialState, setInitialState } = useModel('@@initialState');
|
const { styles } = useStyles();
|
const mapRef = React.useRef();
|
const contentRef = React.useRef();
|
|
const [editModalVisible, setEditModalVisible] = React.useState(false);
|
|
const [app, setApp] = React.useState(() => {
|
return new PIXI.Application({
|
background: '#F8FAFB',
|
antialias: true,
|
})
|
})
|
|
const [windowSize, setWindowSize] = React.useState({
|
width: window.innerWidth,
|
height: window.innerHeight,
|
});
|
|
let mapContainer = new PIXI.Container();
|
mapContainer.name = "mapContainer";
|
mapContainer.data = {};
|
app.stage.addChild(mapContainer);
|
|
React.useEffect(() => {
|
const handleResize = () => {
|
setWindowSize({
|
width: window.innerWidth,
|
height: window.innerHeight,
|
});
|
};
|
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(() => {
|
const width = contentRef.current.offsetWidth;
|
const height = contentRef.current.offsetHeight;
|
app.renderer.resize(width, height);
|
}, [windowSize]);
|
|
const editHandle = () => {
|
setEditModalVisible(true);
|
}
|
|
const onDrop = (x, y) => {
|
const bunny = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png');
|
bunny.anchor.set(0.5);
|
bunny.x = x;
|
bunny.y = y;
|
app.stage.addChild(bunny);
|
}
|
|
return (
|
<>
|
<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>
|
</Header>
|
<Content ref={contentRef} className={styles.content}>
|
<div ref={mapRef} style={{ position: "relative" }} />
|
</Content>
|
</Layout>
|
|
<Edit
|
open={editModalVisible}
|
onCancel={
|
() => {
|
setEditModalVisible(false);
|
}
|
}
|
refCurr={mapRef.current}
|
onDrop={onDrop}
|
/>
|
</>
|
)
|
}
|
|
export default Map;
|
