| | |
| | | const useStyles = createStyles(({ token }) => { |
| | | return { |
| | | layout: { |
| | | overflow: 'hidden', |
| | | // overflow: 'hidden', |
| | | }, |
| | | header: { |
| | | textAlign: 'center', |
| | |
| | | const Map = () => { |
| | | const { initialState, setInitialState } = useModel('@@initialState'); |
| | | const { styles } = useStyles(); |
| | | |
| | | const mapRef = React.useRef(); |
| | | const contentRef = React.useRef(); |
| | | |
| | | const [app, setApp] = React.useState(() => { |
| | | return new PIXI.Application({ |
| | | background: '#10ac84', |
| | |
| | | }) |
| | | }) |
| | | |
| | | const [windowSize, setWindowSize] = React.useState({ |
| | | width: window.innerWidth, |
| | | height: window.innerHeight, |
| | | }); |
| | | |
| | | React.useEffect(() => { |
| | | // resize |
| | | const onResize = () => { |
| | | if (mapRef) { |
| | | const width = contentRef.current.offsetWidth; |
| | | const height = contentRef.current.offsetHeight; |
| | | app.renderer.resize(width, height); |
| | | } |
| | | } |
| | | window.addEventListener('resize', onResize); |
| | | onResize(); |
| | | const handleResize = () => { |
| | | setWindowSize({ |
| | | width: window.innerWidth, |
| | | height: window.innerHeight, |
| | | }); |
| | | }; |
| | | window.addEventListener('resize', handleResize); |
| | | |
| | | // app init |
| | | app.stage.interactive = true; |
| | | app.stage.hitArea = app.screen; |
| | | globalThis.__PIXI_APP__ = app; |
| | | mapRef.current.appendChild(app.view); |
| | | |
| | | }, []); |
| | | |
| | | React.useEffect(() => { |
| | | const width = contentRef.current.offsetWidth; |
| | | const height = contentRef.current.offsetHeight; |
| | | app.renderer.resize(width, height); |
| | | |
| | | }, [windowSize]); |
| | | |
| | | return ( |
| | | <> |
| | | <Layout className={styles.layout}> |