terriajs
Version:
Geospatial data visualization platform.
46 lines • 2.86 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { observer } from "mobx-react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import defined from "terriajs-cesium/Source/Core/defined";
import ViewerMode from "../../../Models/ViewerMode";
import Box from "../../../Styled/Box";
import Icon from "../../../Styled/Icon";
import Text from "../../../Styled/Text";
import { useViewState } from "../../Context";
import parseCustomHtmlToReact from "../../Custom/parseCustomHtmlToReact";
import MapIconButton from "../../MapIconButton/MapIconButton";
// Use padding to avoid other UI elements
const AttributionsContainer = styled(Text) `
text-shadow: 0 0 2px #000000;
padding-left: 8px;
padding-right: 56px;
@media (max-width: ${(props) => props.theme.mobile}px) {
padding-right: 8px;
padding-bottom: 32px;
}
`;
const shouldShowPlayStoryButton = (viewState) => viewState.terria.configParameters.storyEnabled &&
defined(viewState.terria.stories) &&
viewState.terria.stories.length > 0 &&
viewState.useSmallScreenInterface &&
// Don't show story button if story panel is visible
viewState.storyShown !== true;
const BottomLeftBar = observer(() => {
const { t } = useTranslation();
const viewState = useViewState();
const screenDataAttributions = viewState.terria.cesium?.cesiumScreenDataAttributions;
const isNotificationActive = viewState.terria.notificationState.currentNotification;
const isUsingGooglePhotorealistic3dTiles = viewState.terria.mainViewer.viewerMode === ViewerMode.Cesium &&
viewState.terria.workbench.items
.filter((i) => i.type === "3d-tiles")
.some((i) => i.url?.startsWith("https://tile.googleapis.com/v1/3dtiles/root.json") && i.show);
return (_jsxs(Box, { padded: true, children: [shouldShowPlayStoryButton(viewState) ? (_jsx(Box, { paddedHorizontally: 2, children: _jsx(MapIconButton, { title: t("story.playStory"), neverCollapse: true, iconElement: () => _jsx(Icon, { glyph: Icon.GLYPHS.playStory }), onClick: () => viewState.runStories(), primary: !isNotificationActive, children: t("story.playStory") }) })) : null, isUsingGooglePhotorealistic3dTiles && (_jsx("img", { height: "18px", style: { paddingLeft: "8px" }, src: "build/TerriaJS/images/google_on_non_white_hdpi.png" })), !!screenDataAttributions?.length && (_jsx(AttributionsContainer, { textLight: true, mini: true, children: screenDataAttributions
.flatMap((attributionHtml, i) => [
_jsx("span", { children: parseCustomHtmlToReact(attributionHtml) }, attributionHtml),
_jsx("span", { children: " \u2022 " }, `delimiter-${i}`)
])
.slice(0, -1) }))] }));
});
export default BottomLeftBar;
//# sourceMappingURL=BottomLeftBar.js.map