terriajs
Version:
Geospatial data visualization platform.
69 lines • 4.4 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { observer } from "mobx-react";
import { useRef } from "react";
import { useTranslation } from "react-i18next";
import Box from "../../Styled/Box";
import ActionBarPortal from "../ActionBar/ActionBarPortal";
import BottomDock from "../BottomDock/BottomDock";
import { useViewState } from "../Context";
import Loader from "../Loader";
import SlideUpFadeIn from "../Transitions/SlideUpFadeIn/SlideUpFadeIn";
import { BottomBar } from "./BottomBar";
import BottomLeftBar from "./BottomLeftBar/BottomLeftBar";
import { MapNavigation } from "./MapNavigation";
import MenuBar from "./MenuBar/MenuBar";
import { ProgressBar } from "./ProgressBar";
import { TerriaViewerWrapper } from "./TerriaViewerWrapper";
import Toast from "./Toast";
import { useTheme } from "styled-components";
/**
* Right-hand column that contains the map, controls that sit over the map and sometimes the bottom dock containing
* the timeline and charts.
*/
export const MapColumn = observer(({ customElements, animationDuration }) => {
const viewState = useViewState();
const theme = useTheme();
const { t } = useTranslation();
const loaderRef = useRef(null);
return (_jsx(Box, { column: true, fullWidth: true, fullHeight: true, css: `
* {
box-sizing: border-box;
}
`, children: _jsxs(Box, { column: true, fullWidth: true, fullHeight: true, children: [_jsx("div", { css: {
position: "absolute",
top: "0",
left: "0",
zIndex: 1,
width: "100%"
}, children: _jsx(ProgressBar, {}) }), !viewState.hideMapUi && (_jsxs("div", { css: `
${viewState.explorerPanelIsVisible && "opacity: 0.3;"}
`, children: [_jsx(MenuBar, { menuItems: customElements.menu, menuLeftItems: customElements.menuLeft, animationDuration: animationDuration, elementConfig: viewState.terria.elements.get("menu-bar") }), _jsx(MapNavigation, { viewState: viewState, navItems: customElements.nav, elementConfig: viewState.terria.elements.get("map-navigation") })] })), _jsx(Box, { position: "absolute", css: { top: "0", zIndex: 0 }, fullWidth: true, fullHeight: true, children: _jsx(TerriaViewerWrapper, {}) }), !viewState.hideMapUi && (_jsxs(_Fragment, { children: [_jsx(ActionBarPortal, { show: viewState.isActionBarVisible }), _jsx(SlideUpFadeIn, { isVisible: viewState.isMapZooming, nodeRef: loaderRef, children: _jsx(Toast, { ref: loaderRef, children: _jsx(Loader, { message: t("toast.mapIsZooming"), textProps: {
style: {
padding: "0 5px"
}
} }) }) }), _jsxs("div", { css: `
position: absolute;
margin-left: ${viewState.useSmallScreenInterface
? `0px`
: viewState.isMapFullScreen
? `${theme.workbenchMargin}px`
: `calc(${theme.workbenchWidth}px + 2 * ${theme.workbenchMargin}px)`};
margin-right: ${viewState.useSmallScreenInterface
? `0px`
: `calc(34px + 2 *${theme.workbenchMargin}px)`};
bottom: ${viewState.useSmallScreenInterface
? `0px`
: `${theme.workbenchMargin}px`};
left: 0;
right: 0;
`, children: [_jsx(BottomLeftBar, {}), _jsx(BottomDock, { terria: viewState.terria, viewState: viewState, elementConfig: viewState.terria.elements.get("bottom-dock") }), _jsx(BottomBar, {})] }), viewState.terria.configParameters.printDisclaimer && (_jsx("a", { css: `
display: none;
@media print {
display: block;
width: 100%;
clear: both;
}
`, href: viewState.terria.configParameters.printDisclaimer.url, children: viewState.terria.configParameters.printDisclaimer.text }))] }))] }) }));
});
export default MapColumn;
//# sourceMappingURL=MapColumn.js.map