|  |  |  | 
|---|
|  |  |  | import React, { useState, useRef, useEffect, useMemo } from "react"; | 
|---|
|  |  |  | import { useTranslate } from "react-admin"; | 
|---|
|  |  |  | import { useTranslate, useRefresh, useSidebarState } from "react-admin"; | 
|---|
|  |  |  | import { | 
|---|
|  |  |  | TextField, | 
|---|
|  |  |  | Select, | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const Map = () => { | 
|---|
|  |  |  | const notify = useNotification(); | 
|---|
|  |  |  | const [sidebarOpen] = useSidebarState(); | 
|---|
|  |  |  | const translate = useTranslate(); | 
|---|
|  |  |  | const theme = useTheme(); | 
|---|
|  |  |  | const themeMode = theme.palette.mode; | 
|---|
|  |  |  | 
|---|
|  |  |  | const storedValue = localStorage.getItem('curZone'); | 
|---|
|  |  |  | return storedValue !== null ? JSON.parse(storedValue) : null; | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const handleResize = () => { | 
|---|
|  |  |  | const width = contentRef.current.offsetWidth; | 
|---|
|  |  |  | const height = contentRef.current.offsetHeight; | 
|---|
|  |  |  | player.resize(width, height); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | useEffect(() => { | 
|---|
|  |  |  | Tool.patchRaLayout('0px'); | 
|---|
|  |  |  | 
|---|
|  |  |  | initialize(); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // resize | 
|---|
|  |  |  | const handleResize = () => { | 
|---|
|  |  |  | const width = contentRef.current.offsetWidth; | 
|---|
|  |  |  | const height = contentRef.current.offsetHeight; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | player.resize(width, height); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | handleResize(); | 
|---|
|  |  |  | window.addEventListener('resize', handleResize); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | Tool.patchRaLayout(''); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | }, []) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | useEffect(() => { | 
|---|
|  |  |  | setTimeout(handleResize, 300) | 
|---|
|  |  |  | }, [sidebarOpen]); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | useEffect(() => { | 
|---|
|  |  |  | player.setTheme(themeMode); | 
|---|
|  |  |  | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <Box | 
|---|
|  |  |  | sx={{ | 
|---|
|  |  |  | width: '100%', | 
|---|
|  |  |  | height: '100%', | 
|---|
|  |  |  | display: 'flex', | 
|---|
|  |  |  | flexDirection: 'column', | 
|---|