From f659bf38610310ff063e9bdbad378688cf61850d Mon Sep 17 00:00:00 2001 From: Zoran Kokeza Date: Sat, 6 Aug 2022 11:45:30 +0200 Subject: [PATCH 01/12] fix: move map credits to map column so chart don't hide it --- CHANGES.md | 2 ++ lib/ReactViews/StandardUserInterface/MapColumn.jsx | 11 +++++++++++ .../StandardUserInterface/StandardUserInterface.tsx | 8 +------- 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index bd44995d8c8..2ee195934b9 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -23,6 +23,8 @@ Change Log * Fix `SearchBoxAndResults` Trans values * Fix `generateCatalogIndex` for nested references * Fix `SearchBox` handling of `searchWithDebounce` when `debounceDuration` prop changes. It now fushes instead of cancels. +* Move map credits to map column so it don't get hidden by chart panel +* [The next improvement] #### release 8.2.10 - 2022-08-02 diff --git a/lib/ReactViews/StandardUserInterface/MapColumn.jsx b/lib/ReactViews/StandardUserInterface/MapColumn.jsx index f1eb25f7433..037a2b31bbe 100644 --- a/lib/ReactViews/StandardUserInterface/MapColumn.jsx +++ b/lib/ReactViews/StandardUserInterface/MapColumn.jsx @@ -6,6 +6,7 @@ import React from "react"; import { withTranslation } from "react-i18next"; import FeatureDetection from "terriajs-cesium/Source/Core/FeatureDetection"; import BottomDock from "../BottomDock/BottomDock"; +import { MapCredits } from "../Credits"; import Loader from "../Loader"; import BottomLeftBar from "../Map/BottomLeftBar/BottomLeftBar"; import DistanceLegend from "../Map/Legend/DistanceLegend"; @@ -117,6 +118,16 @@ const MapColumn = observer( /> +
= observer( allBaseMaps={allBaseMaps} animationDuration={animationDuration} /> -
From 642b1d5b4a6371bbe00b18d3ae8227da49f0e0aa Mon Sep 17 00:00:00 2001 From: Zoran Kokeza Date: Mon, 8 Aug 2022 10:55:53 +0200 Subject: [PATCH 02/12] feat: tsify map column and reorganize some of the components --- lib/Models/Terria.ts | 2 +- lib/ReactViewModels/MouseCoords.ts | 10 +- lib/ReactViews/BottomDock/BottomDock.tsx | 6 +- .../ContextProviders.tsx | 2 +- .../ViewStateContext.tsx | 0 lib/ReactViews/Context/index.ts | 2 + lib/ReactViews/Credits/index.ts | 2 - lib/ReactViews/Custom/ExternalLink.tsx | 2 +- lib/ReactViews/Disclaimer.jsx | 2 +- lib/ReactViews/DragDropFile.tsx | 5 +- lib/ReactViews/DragDropNotification.jsx | 2 +- .../ExplorerWindow/ExplorerWindow.tsx | 2 +- .../FeatureInfo/FeatureInfoPanel.jsx | 2 +- lib/ReactViews/Feedback/FeedbackForm.tsx | 5 +- .../HelpScreens/SatelliteHelpPrompt.jsx | 2 +- lib/ReactViews/Map/BottomBar/BottomBar.tsx | 31 +++ .../{ => Map/BottomBar}/Credits/Credit.tsx | 2 +- .../BottomBar}/Credits/Credit.type.ts | 0 .../{ => Map/BottomBar}/Credits/Credits.tsx | 0 .../BottomBar}/Credits/CreditsContainer.tsx | 12 +- .../DataAttribution/DataAttributionModal.tsx | 15 +- .../BottomBar/Credits}/MapCreditLogo.tsx | 6 +- .../BottomBar/Credits}/MapCredits.tsx | 14 +- .../{ => Map/BottomBar}/Credits/Spacer.tsx | 0 .../BottomBar}/Credits/TerriaLogo.tsx | 4 +- lib/ReactViews/Map/BottomBar/Credits/index.ts | 2 + .../Map/BottomBar/DistanceLegend.tsx | 243 ++++++++++++++++++ lib/ReactViews/Map/BottomBar/LocationBar.tsx | 88 +++++++ lib/ReactViews/Map/BottomBar/index.ts | 1 + .../Map/BottomLeftBar/BottomLeftBar.tsx | 34 ++- .../Map/HelpButton/help-button.scss | 4 - lib/ReactViews/Map/Legend/DistanceLegend.jsx | 233 ----------------- lib/ReactViews/Map/Legend/LocationBar.jsx | 82 ------ lib/ReactViews/Map/Legend/legend.scss | 75 ------ lib/ReactViews/Map/Legend/legend.scss.d.ts | 15 -- lib/ReactViews/Map/MapColumn.tsx | 136 ++++++++++ .../CollapsedNavigation.tsx} | 24 +- .../Items/AugmentedVirtualityTool.tsx | 0 .../Items/CatalogShortcut.jsx | 0 .../Items/CloseToolButton.tsx | 19 +- .../Items/Compass}/Compass.tsx | 50 ++-- .../Items/Compass}/GyroscopeGuidance.jsx | 18 +- .../Map/MapNavigation/Items/Compass/index.ts | 1 + .../Items/MapNavigationItem.tsx | 4 +- .../Items/MeasureTool.ts | 2 +- .../Items/MyLocation.ts | 4 +- .../Items/ToggleSplitterTool.ts | 0 .../Items/ToolButton.tsx | 0 .../Items/ZoomControl.tsx | 7 +- .../Map/MapNavigation/Items/index.ts | 14 + .../MapNavigation.tsx | 34 +-- .../filterViewerAndScreenSize.ts | 25 ++ lib/ReactViews/Map/MapNavigation/index.ts | 2 + .../registerMapNavigations.tsx | 20 +- .../{ => MenuBar}/HelpButton/HelpButton.tsx | 8 +- .../Map/MenuBar/HelpButton/help-button.scss | 4 + .../HelpButton/help-button.scss.d.ts | 0 lib/ReactViews/Map/{ => MenuBar}/MenuBar.jsx | 11 +- .../{ => MenuBar}/StoryButton/StoryButton.tsx | 14 +- .../Map/MenuBar/StoryButton/story-button.scss | 13 + .../StoryButton/story-button.scss.d.ts | 0 .../Map/{ => MenuBar}/menu-bar.scss | 12 +- .../Map/{ => MenuBar}/menu-bar.scss.d.ts | 0 .../Map/Navigation/FullScreenButton.jsx | 60 ----- .../Map/Panels/HelpPanel/HelpPanel.jsx | 2 +- .../Map/Panels/HelpPanel/HelpPanelItem.jsx | 2 +- .../Map/Panels/LangPanel/LangPanel.tsx | 2 +- .../Map/Panels/SharePanel/Print/PrintView.tsx | 16 +- lib/ReactViews/Map/ProgressBar.jsx | 105 -------- lib/ReactViews/Map/ProgressBar.tsx | 90 +++++++ lib/ReactViews/Map/Splitter.jsx | 230 ----------------- .../Map/StoryButton/story-button.scss | 13 - lib/ReactViews/Map/TerriaViewerWrapper.jsx | 57 ---- .../TerriaViewerWrapper/Splitter/Splitter.tsx | 102 ++++++++ .../TerriaViewerWrapper/Splitter/dragHook.ts | 166 ++++++++++++ .../TerriaViewerWrapper.tsx | 84 ++++++ .../Map/TerriaViewerWrapper/index.ts | 1 + .../{StandardUserInterface => Map}/Toast.tsx | 0 lib/ReactViews/Map/experimental-features.scss | 22 -- .../Map/experimental-features.scss.d.ts | 9 - lib/ReactViews/Map/progress-bar.scss | 31 --- lib/ReactViews/Map/progress-bar.scss.d.ts | 12 - lib/ReactViews/Map/splitter.scss | 42 --- lib/ReactViews/Map/splitter.scss.d.ts | 10 - lib/ReactViews/Map/terria-viewer-wrapper.scss | 57 ---- .../Map/terria-viewer-wrapper.scss.d.ts | 10 - lib/ReactViews/Mobile/MobileHeader.jsx | 4 +- lib/ReactViews/Mobile/MobileMenu.jsx | 1 - .../Notification/MapInteractionWindow.tsx | 2 +- lib/ReactViews/Notification/Notification.tsx | 2 +- lib/ReactViews/SidePanel/Branding.tsx | 2 +- lib/ReactViews/SidePanel/FullScreenButton.jsx | 2 +- lib/ReactViews/SidePanel/SidePanel.tsx | 6 +- .../ExperimentalFeatures.tsx | 4 +- .../GlobalTerriaStyles.ts | 15 ++ .../StandardUserInterface/MapColumn.jsx | 219 ---------------- .../SidePanelContainer.tsx | 2 +- .../StandardUserInterface.tsx | 21 +- .../TrainerBar/TrainerBar.tsx | 5 +- .../WorkflowPanelContainer.tsx | 4 +- .../customizable}/MenuButton.jsx | 2 +- .../customizable/MenuItem.jsx | 2 +- .../customizable}/menu-button.scss | 4 +- .../customizable}/menu-button.scss.d.ts | 0 lib/ReactViews/StandardUserInterface/index.ts | 5 + .../StandardUserInterface/map-column.scss | 99 ------- .../map-column.scss.d.ts | 29 --- lib/ReactViews/Story/StoryBuilder.tsx | 5 +- .../Story/StoryPanel/StoryPanel.tsx | 7 +- lib/ReactViews/Tools/DiffTool/DiffTool.tsx | 3 +- .../Tools/PedestrianMode/PedestrianMode.tsx | 2 +- lib/ReactViews/Tools/Tool.tsx | 2 +- lib/ReactViews/Tour/TourPortal.jsx | 2 +- .../WelcomeMessage/WelcomeMessage.jsx | 2 +- .../{Map/Panels => Workbench}/TerrainSide.tsx | 14 +- .../Workbench/WorkbenchSplitScreen.tsx | 2 +- .../Workflow/SelectableDimensionWorkflow.tsx | 2 +- lib/Styled/Text.tsx | 9 +- .../terriajs-cesium-extra/index.d.ts | 1 + test/Map/StyledHtmlSpec.tsx | 2 +- test/ReactViews/ClipboardSpec.tsx | 2 +- .../DimensionSelectorSectionSpec.tsx | 2 +- test/ReactViews/Generic/PromptSpec.tsx | 2 +- .../Map/Navigation/Compass/CompassSpec.tsx | 6 +- .../Compass}/GyroscopeGuidanceSpec.tsx | 8 +- .../Map/Panels/HelpPanel/VideoGuideSpec.tsx | 2 +- test/ReactViews/MeasureToolSpec.jsx | 2 +- test/ReactViews/Preview/DescriptionSpec.tsx | 2 +- test/ReactViews/Search/BreadcrumbsSpec.tsx | 2 +- .../Search/SearchBoxAndResultsSpec.tsx | 2 +- test/ReactViews/Search/SearchBoxSpec.tsx | 2 +- test/ReactViews/ShortReportSpec.tsx | 2 +- .../TrainerBar/TrainerBarSpec.tsx | 2 +- .../TrainerBar/test-help-content.js | 0 test/ReactViews/WarningBoxSpec.tsx | 2 +- test/ReactViews/withContext.tsx | 4 +- 136 files changed, 1261 insertions(+), 1716 deletions(-) rename lib/ReactViews/{StandardUserInterface => Context}/ContextProviders.tsx (91%) rename lib/ReactViews/{StandardUserInterface => Context}/ViewStateContext.tsx (100%) create mode 100644 lib/ReactViews/Context/index.ts delete mode 100644 lib/ReactViews/Credits/index.ts create mode 100644 lib/ReactViews/Map/BottomBar/BottomBar.tsx rename lib/ReactViews/{ => Map/BottomBar}/Credits/Credit.tsx (89%) rename lib/ReactViews/{ => Map/BottomBar}/Credits/Credit.type.ts (100%) rename lib/ReactViews/{ => Map/BottomBar}/Credits/Credits.tsx (100%) rename lib/ReactViews/{ => Map/BottomBar}/Credits/CreditsContainer.tsx (62%) rename lib/ReactViews/{ => Map/BottomBar}/Credits/DataAttribution/DataAttributionModal.tsx (86%) rename lib/ReactViews/{Credits/MapCredits => Map/BottomBar/Credits}/MapCreditLogo.tsx (75%) rename lib/ReactViews/{Credits/MapCredits => Map/BottomBar/Credits}/MapCredits.tsx (84%) rename lib/ReactViews/{ => Map/BottomBar}/Credits/Spacer.tsx (100%) rename lib/ReactViews/{ => Map/BottomBar}/Credits/TerriaLogo.tsx (71%) create mode 100644 lib/ReactViews/Map/BottomBar/Credits/index.ts create mode 100644 lib/ReactViews/Map/BottomBar/DistanceLegend.tsx create mode 100644 lib/ReactViews/Map/BottomBar/LocationBar.tsx create mode 100644 lib/ReactViews/Map/BottomBar/index.ts delete mode 100644 lib/ReactViews/Map/HelpButton/help-button.scss delete mode 100644 lib/ReactViews/Map/Legend/DistanceLegend.jsx delete mode 100644 lib/ReactViews/Map/Legend/LocationBar.jsx delete mode 100644 lib/ReactViews/Map/Legend/legend.scss delete mode 100644 lib/ReactViews/Map/Legend/legend.scss.d.ts create mode 100644 lib/ReactViews/Map/MapColumn.tsx rename lib/ReactViews/Map/{Navigation/Items/OverflowNavigationItem.tsx => MapNavigation/CollapsedNavigation.tsx} (84%) rename lib/ReactViews/Map/{Navigation => MapNavigation}/Items/AugmentedVirtualityTool.tsx (100%) rename lib/ReactViews/Map/{Navigation => MapNavigation}/Items/CatalogShortcut.jsx (100%) rename lib/ReactViews/Map/{Navigation => MapNavigation}/Items/CloseToolButton.tsx (65%) rename lib/ReactViews/Map/{Navigation/Items => MapNavigation/Items/Compass}/Compass.tsx (94%) rename lib/ReactViews/{GyroscopeGuidance => Map/MapNavigation/Items/Compass}/GyroscopeGuidance.jsx (91%) create mode 100644 lib/ReactViews/Map/MapNavigation/Items/Compass/index.ts rename lib/ReactViews/Map/{Navigation => MapNavigation}/Items/MapNavigationItem.tsx (94%) rename lib/ReactViews/Map/{Navigation => MapNavigation}/Items/MeasureTool.ts (99%) rename lib/ReactViews/Map/{Navigation => MapNavigation}/Items/MyLocation.ts (98%) rename lib/ReactViews/Map/{Navigation => MapNavigation}/Items/ToggleSplitterTool.ts (100%) rename lib/ReactViews/Map/{Navigation => MapNavigation}/Items/ToolButton.tsx (100%) rename lib/ReactViews/Map/{Navigation => MapNavigation}/Items/ZoomControl.tsx (97%) create mode 100644 lib/ReactViews/Map/MapNavigation/Items/index.ts rename lib/ReactViews/Map/{Navigation => MapNavigation}/MapNavigation.tsx (90%) create mode 100644 lib/ReactViews/Map/MapNavigation/filterViewerAndScreenSize.ts create mode 100644 lib/ReactViews/Map/MapNavigation/index.ts rename lib/ReactViews/Map/{Navigation => MapNavigation}/registerMapNavigations.tsx (92%) rename lib/ReactViews/Map/{ => MenuBar}/HelpButton/HelpButton.tsx (86%) create mode 100644 lib/ReactViews/Map/MenuBar/HelpButton/help-button.scss rename lib/ReactViews/Map/{ => MenuBar}/HelpButton/help-button.scss.d.ts (100%) rename lib/ReactViews/Map/{ => MenuBar}/MenuBar.jsx (91%) rename lib/ReactViews/Map/{ => MenuBar}/StoryButton/StoryButton.tsx (88%) create mode 100644 lib/ReactViews/Map/MenuBar/StoryButton/story-button.scss rename lib/ReactViews/Map/{ => MenuBar}/StoryButton/story-button.scss.d.ts (100%) rename lib/ReactViews/Map/{ => MenuBar}/menu-bar.scss (83%) rename lib/ReactViews/Map/{ => MenuBar}/menu-bar.scss.d.ts (100%) delete mode 100644 lib/ReactViews/Map/Navigation/FullScreenButton.jsx delete mode 100644 lib/ReactViews/Map/ProgressBar.jsx create mode 100644 lib/ReactViews/Map/ProgressBar.tsx delete mode 100644 lib/ReactViews/Map/Splitter.jsx delete mode 100644 lib/ReactViews/Map/StoryButton/story-button.scss delete mode 100644 lib/ReactViews/Map/TerriaViewerWrapper.jsx create mode 100644 lib/ReactViews/Map/TerriaViewerWrapper/Splitter/Splitter.tsx create mode 100644 lib/ReactViews/Map/TerriaViewerWrapper/Splitter/dragHook.ts create mode 100644 lib/ReactViews/Map/TerriaViewerWrapper/TerriaViewerWrapper.tsx create mode 100644 lib/ReactViews/Map/TerriaViewerWrapper/index.ts rename lib/ReactViews/{StandardUserInterface => Map}/Toast.tsx (100%) delete mode 100644 lib/ReactViews/Map/experimental-features.scss delete mode 100644 lib/ReactViews/Map/experimental-features.scss.d.ts delete mode 100644 lib/ReactViews/Map/progress-bar.scss delete mode 100644 lib/ReactViews/Map/progress-bar.scss.d.ts delete mode 100644 lib/ReactViews/Map/splitter.scss delete mode 100644 lib/ReactViews/Map/splitter.scss.d.ts delete mode 100644 lib/ReactViews/Map/terria-viewer-wrapper.scss delete mode 100644 lib/ReactViews/Map/terria-viewer-wrapper.scss.d.ts rename lib/ReactViews/{Map => StandardUserInterface}/ExperimentalFeatures.tsx (91%) delete mode 100644 lib/ReactViews/StandardUserInterface/MapColumn.jsx rename lib/ReactViews/{Map => StandardUserInterface}/TrainerBar/TrainerBar.tsx (99%) rename lib/ReactViews/{Map => StandardUserInterface/customizable}/MenuButton.jsx (95%) rename lib/ReactViews/{Map => StandardUserInterface/customizable}/menu-button.scss (74%) rename lib/ReactViews/{Map => StandardUserInterface/customizable}/menu-button.scss.d.ts (100%) create mode 100644 lib/ReactViews/StandardUserInterface/index.ts delete mode 100644 lib/ReactViews/StandardUserInterface/map-column.scss delete mode 100644 lib/ReactViews/StandardUserInterface/map-column.scss.d.ts rename lib/ReactViews/{Map/Panels => Workbench}/TerrainSide.tsx (92%) rename test/ReactViews/{GyroscopeGuidance => Map/Navigation/Compass}/GyroscopeGuidanceSpec.tsx (74%) rename test/ReactViews/{Map => StandardUserInterface}/TrainerBar/TrainerBarSpec.tsx (96%) rename test/ReactViews/{Map => StandardUserInterface}/TrainerBar/test-help-content.js (100%) diff --git a/lib/Models/Terria.ts b/lib/Models/Terria.ts index 388e7609c60..abfaf1c15dd 100644 --- a/lib/Models/Terria.ts +++ b/lib/Models/Terria.ts @@ -58,7 +58,7 @@ import TimeVarying from "../ModelMixins/TimeVarying"; import { HelpContentItem } from "../ReactViewModels/defaultHelpContent"; import { defaultTerms, Term } from "../ReactViewModels/defaultTerms"; import NotificationState from "../ReactViewModels/NotificationState"; -import { ICredit } from "../ReactViews/Credits"; +import { ICredit } from "../ReactViews/Map/BottomBar/Credits"; import { SHARE_VERSION } from "../ReactViews/Map/Panels/SharePanel/BuildShareLink"; import { shareConvertNotification } from "../ReactViews/Notification/shareConvertNotification"; import MappableTraits from "../Traits/TraitsClasses/MappableTraits"; diff --git a/lib/ReactViewModels/MouseCoords.ts b/lib/ReactViewModels/MouseCoords.ts index c018c17cc0c..7c2caf39368 100644 --- a/lib/ReactViewModels/MouseCoords.ts +++ b/lib/ReactViewModels/MouseCoords.ts @@ -38,11 +38,11 @@ export default class MouseCoords { tileRequestInFlight?: unknown; @observable elevation?: string; - @observable utmZone?: unknown; + @observable utmZone?: string; @observable latitude?: string; @observable longitude?: string; - @observable north?: unknown; - @observable east?: unknown; + @observable north?: string; + @observable east?: string; @observable cartographic?: Cartographic; @observable useProjection = false; @@ -64,11 +64,12 @@ export default class MouseCoords { ); } - @action + @action.bound toggleUseProjection() { this.useProjection = !this.useProjection; } + @action updateCoordinatesFromCesium(terria: Terria, position: Cartesian2) { if (!terria.cesium) { return; @@ -156,6 +157,7 @@ export default class MouseCoords { } } + @action updateCoordinatesFromLeaflet(terria: Terria, mouseMoveEvent: MouseEvent) { if (!terria.leaflet) { return; diff --git a/lib/ReactViews/BottomDock/BottomDock.tsx b/lib/ReactViews/BottomDock/BottomDock.tsx index b5ce4e93357..fe83d947f90 100644 --- a/lib/ReactViews/BottomDock/BottomDock.tsx +++ b/lib/ReactViews/BottomDock/BottomDock.tsx @@ -10,13 +10,13 @@ import Styles from "./bottom-dock.scss"; import ChartDisclaimer from "./ChartDisclaimer"; import Timeline from "./Timeline/Timeline"; -interface PropsType extends MeasureElementProps { +interface PropsType { terria: Terria; viewState: ViewState; } @observer -class BottomDock extends React.Component { +class BottomDock extends React.Component { refToMeasure: HTMLDivElement | null = null; handleClick() { @@ -25,7 +25,7 @@ class BottomDock extends React.Component { }); } - componentDidUpdate(prevProps: PropsType) { + componentDidUpdate(prevProps: PropsType & MeasureElementProps) { if ( prevProps.heightFromMeasureElementHOC !== this.props.heightFromMeasureElementHOC diff --git a/lib/ReactViews/StandardUserInterface/ContextProviders.tsx b/lib/ReactViews/Context/ContextProviders.tsx similarity index 91% rename from lib/ReactViews/StandardUserInterface/ContextProviders.tsx rename to lib/ReactViews/Context/ContextProviders.tsx index 44bc042c5e6..06854c0c0de 100644 --- a/lib/ReactViews/StandardUserInterface/ContextProviders.tsx +++ b/lib/ReactViews/Context/ContextProviders.tsx @@ -3,7 +3,7 @@ import { DefaultTheme, ThemeProvider } from "styled-components"; import ViewState from "../../ReactViewModels/ViewState"; import { ViewStateProvider } from "./ViewStateContext"; -export default (props: { +export const ContextProviders = (props: { viewState: ViewState; theme: DefaultTheme | ((theme: DefaultTheme) => DefaultTheme); children: React.ReactNode[]; diff --git a/lib/ReactViews/StandardUserInterface/ViewStateContext.tsx b/lib/ReactViews/Context/ViewStateContext.tsx similarity index 100% rename from lib/ReactViews/StandardUserInterface/ViewStateContext.tsx rename to lib/ReactViews/Context/ViewStateContext.tsx diff --git a/lib/ReactViews/Context/index.ts b/lib/ReactViews/Context/index.ts new file mode 100644 index 00000000000..fba95c1445c --- /dev/null +++ b/lib/ReactViews/Context/index.ts @@ -0,0 +1,2 @@ +export * from "./ViewStateContext"; +export * from "./ContextProviders"; diff --git a/lib/ReactViews/Credits/index.ts b/lib/ReactViews/Credits/index.ts deleted file mode 100644 index c64853d9cd8..00000000000 --- a/lib/ReactViews/Credits/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { ICredit } from "./Credit.type"; -export { MapCredits } from "./MapCredits/MapCredits"; diff --git a/lib/ReactViews/Custom/ExternalLink.tsx b/lib/ReactViews/Custom/ExternalLink.tsx index a82e7964c3e..5d6669b974e 100644 --- a/lib/ReactViews/Custom/ExternalLink.tsx +++ b/lib/ReactViews/Custom/ExternalLink.tsx @@ -1,7 +1,7 @@ import { AnchorHTMLAttributes, default as React } from "react"; import { useTranslation } from "react-i18next"; import styled from "styled-components"; -import { useViewState } from "../StandardUserInterface/ViewStateContext"; +import { useViewState } from "../Context"; const Icon = require("../../Styled/Icon").default; const { StyledIcon } = require("../../Styled/Icon"); diff --git a/lib/ReactViews/Disclaimer.jsx b/lib/ReactViews/Disclaimer.jsx index 7ee23f377c6..6cabf1c1326 100644 --- a/lib/ReactViews/Disclaimer.jsx +++ b/lib/ReactViews/Disclaimer.jsx @@ -12,7 +12,7 @@ import Button from "../Styled/Button"; import Spacing from "../Styled/Spacing"; import Text from "../Styled/Text"; import parseCustomMarkdownToReact from "./Custom/parseCustomMarkdownToReact"; -import { withViewState } from "./StandardUserInterface/ViewStateContext"; +import { withViewState } from "./Context"; import FadeIn from "./Transitions/FadeIn/FadeIn"; const TopElementBox = styled(Box)` diff --git a/lib/ReactViews/DragDropFile.tsx b/lib/ReactViews/DragDropFile.tsx index e0162f9591f..777df0f0515 100644 --- a/lib/ReactViews/DragDropFile.tsx +++ b/lib/ReactViews/DragDropFile.tsx @@ -14,10 +14,7 @@ import MappableMixin from "../ModelMixins/MappableMixin"; import addUserFiles from "../Models/Catalog/addUserFiles"; import { BaseModel } from "../Models/Definition/Model"; import Styles from "./drag-drop-file.scss"; -import { - WithViewState, - withViewState -} from "./StandardUserInterface/ViewStateContext"; +import { WithViewState, withViewState } from "./Context"; interface PropsType extends WithTranslation, WithViewState {} diff --git a/lib/ReactViews/DragDropNotification.jsx b/lib/ReactViews/DragDropNotification.jsx index fec17f6ab94..63bf30c8c7d 100644 --- a/lib/ReactViews/DragDropNotification.jsx +++ b/lib/ReactViews/DragDropNotification.jsx @@ -6,7 +6,7 @@ import PropTypes from "prop-types"; import React from "react"; import Icon from "../Styled/Icon"; import Styles from "./drag-drop-notification.scss"; -import { withViewState } from "./StandardUserInterface/ViewStateContext"; +import { withViewState } from "./Context"; @observer class DragDropNotification extends React.Component { diff --git a/lib/ReactViews/ExplorerWindow/ExplorerWindow.tsx b/lib/ReactViews/ExplorerWindow/ExplorerWindow.tsx index 91dac320a8b..5ed52578fe7 100644 --- a/lib/ReactViews/ExplorerWindow/ExplorerWindow.tsx +++ b/lib/ReactViews/ExplorerWindow/ExplorerWindow.tsx @@ -2,7 +2,7 @@ import { action } from "mobx"; import { observer } from "mobx-react"; import React from "react"; import ViewState from "../../ReactViewModels/ViewState"; -import { useViewState } from "../StandardUserInterface/ViewStateContext"; +import { useViewState } from "../Context"; import ModalPopup from "./ModalPopup"; import Tabs from "./Tabs"; diff --git a/lib/ReactViews/FeatureInfo/FeatureInfoPanel.jsx b/lib/ReactViews/FeatureInfo/FeatureInfoPanel.jsx index 8a3c3c92219..1ecd8cd561c 100644 --- a/lib/ReactViews/FeatureInfo/FeatureInfoPanel.jsx +++ b/lib/ReactViews/FeatureInfo/FeatureInfoPanel.jsx @@ -22,7 +22,7 @@ import { import Icon from "../../Styled/Icon"; import DragWrapper from "../DragWrapper"; import Loader from "../Loader"; -import { withViewState } from "../StandardUserInterface/ViewStateContext"; +import { withViewState } from "../Context"; import Styles from "./feature-info-panel.scss"; import FeatureInfoCatalogItem from "./FeatureInfoCatalogItem"; diff --git a/lib/ReactViews/Feedback/FeedbackForm.tsx b/lib/ReactViews/Feedback/FeedbackForm.tsx index 564bcbba485..4524f8eb34b 100644 --- a/lib/ReactViews/Feedback/FeedbackForm.tsx +++ b/lib/ReactViews/Feedback/FeedbackForm.tsx @@ -16,10 +16,7 @@ import Text from "../../Styled/Text"; import parseCustomMarkdownToReact, { parseCustomMarkdownToReactWithOptions } from "../Custom/parseCustomMarkdownToReact"; -import { - WithViewState, - withViewState -} from "../StandardUserInterface/ViewStateContext"; +import { WithViewState, withViewState } from "../Context"; import { applyTranslationIfExists } from "./../../Language/languageHelpers"; interface IProps extends WithTranslation, WithViewState { diff --git a/lib/ReactViews/HelpScreens/SatelliteHelpPrompt.jsx b/lib/ReactViews/HelpScreens/SatelliteHelpPrompt.jsx index 57aa0fbfcd2..5bf038c3956 100644 --- a/lib/ReactViews/HelpScreens/SatelliteHelpPrompt.jsx +++ b/lib/ReactViews/HelpScreens/SatelliteHelpPrompt.jsx @@ -1,7 +1,7 @@ import { observer } from "mobx-react"; import React from "react"; import { useTranslation } from "react-i18next"; -import { useViewState } from "../StandardUserInterface/ViewStateContext"; +import { useViewState } from "../Context"; import HelpPrompt from "./HelpPrompt"; export const SATELLITE_HELP_PROMPT_KEY = "satelliteGuidance"; diff --git a/lib/ReactViews/Map/BottomBar/BottomBar.tsx b/lib/ReactViews/Map/BottomBar/BottomBar.tsx new file mode 100644 index 00000000000..5e04dc4b151 --- /dev/null +++ b/lib/ReactViews/Map/BottomBar/BottomBar.tsx @@ -0,0 +1,31 @@ +import React, { VFC } from "react"; +import Box from "../../../Styled/Box"; +import { MapCredits } from "./Credits"; +import { useViewState } from "../../Context"; +import { DistanceLegend } from "./DistanceLegend"; +import { LocationBar } from "./LocationBar"; + +export const BottomBar: VFC = () => { + const viewState = useViewState(); + return ( + + + + + + + + ); +}; diff --git a/lib/ReactViews/Credits/Credit.tsx b/lib/ReactViews/Map/BottomBar/Credits/Credit.tsx similarity index 89% rename from lib/ReactViews/Credits/Credit.tsx rename to lib/ReactViews/Map/BottomBar/Credits/Credit.tsx index 5901407ea9c..751297ff0f7 100644 --- a/lib/ReactViews/Credits/Credit.tsx +++ b/lib/ReactViews/Map/BottomBar/Credits/Credit.tsx @@ -1,6 +1,6 @@ import React, { FC } from "react"; import { useTranslation } from "react-i18next"; -import { ExternalLinkIcon } from "../Custom/ExternalLink"; +import { ExternalLinkIcon } from "../../../Custom/ExternalLink"; import { ICredit } from "./Credit.type"; import { Spacer } from "./Spacer"; diff --git a/lib/ReactViews/Credits/Credit.type.ts b/lib/ReactViews/Map/BottomBar/Credits/Credit.type.ts similarity index 100% rename from lib/ReactViews/Credits/Credit.type.ts rename to lib/ReactViews/Map/BottomBar/Credits/Credit.type.ts diff --git a/lib/ReactViews/Credits/Credits.tsx b/lib/ReactViews/Map/BottomBar/Credits/Credits.tsx similarity index 100% rename from lib/ReactViews/Credits/Credits.tsx rename to lib/ReactViews/Map/BottomBar/Credits/Credits.tsx diff --git a/lib/ReactViews/Credits/CreditsContainer.tsx b/lib/ReactViews/Map/BottomBar/Credits/CreditsContainer.tsx similarity index 62% rename from lib/ReactViews/Credits/CreditsContainer.tsx rename to lib/ReactViews/Map/BottomBar/Credits/CreditsContainer.tsx index 5d06fef8d7b..06c7d15afa7 100644 --- a/lib/ReactViews/Credits/CreditsContainer.tsx +++ b/lib/ReactViews/Map/BottomBar/Credits/CreditsContainer.tsx @@ -1,19 +1,12 @@ import styled from "styled-components"; -import Box from "../../Styled/Box"; +import Box from "../../../../Styled/Box"; export const CreditsContainer = styled(Box).attrs(() => ({ - fullWidth: true, styledHeight: "30px", styledMaxHeight: "30px", verticalCenter: true, - gap: true, - position: "absolute" + gap: true }))` - z-index: 0; - bottom: 0; - background: linear-gradient(180deg, #000000 0%, #000000 100%); - font-size: 0.7rem; - opacity: 0.75; a { text-decoration: underline; cursor: pointer; @@ -21,7 +14,6 @@ export const CreditsContainer = styled(Box).attrs(() => ({ display: flex; align-items: center; } - img { height: 24px; } diff --git a/lib/ReactViews/Credits/DataAttribution/DataAttributionModal.tsx b/lib/ReactViews/Map/BottomBar/Credits/DataAttribution/DataAttributionModal.tsx similarity index 86% rename from lib/ReactViews/Credits/DataAttribution/DataAttributionModal.tsx rename to lib/ReactViews/Map/BottomBar/Credits/DataAttribution/DataAttributionModal.tsx index 192a77f4956..a93d967a0e3 100644 --- a/lib/ReactViews/Credits/DataAttribution/DataAttributionModal.tsx +++ b/lib/ReactViews/Map/BottomBar/Credits/DataAttribution/DataAttributionModal.tsx @@ -3,13 +3,13 @@ import React, { FC } from "react"; import ReactDOM from "react-dom"; import { useTranslation } from "react-i18next"; import styled from "styled-components"; -import Box from "../../../Styled/Box"; -import { Li } from "../../../Styled/List"; -import Spacing from "../../../Styled/Spacing"; -import Text from "../../../Styled/Text"; -import parseCustomHtmlToReact from "../../Custom/parseCustomHtmlToReact"; -import CloseButton from "../../Generic/CloseButton"; -import { PrefaceBox } from "../../Generic/PrefaceBox"; +import Box from "../../../../../Styled/Box"; +import { Li } from "../../../../../Styled/List"; +import Spacing from "../../../../../Styled/Spacing"; +import Text from "../../../../../Styled/Text"; +import parseCustomHtmlToReact from "../../../../Custom/parseCustomHtmlToReact"; +import CloseButton from "../../../../Generic/CloseButton"; +import { PrefaceBox } from "../../../../Generic/PrefaceBox"; interface IDataAttributionModalProps { closeModal: () => void; @@ -20,7 +20,6 @@ const AttributionText = styled(Text).attrs(() => ({ medium: true }))` a { color: ${props => props.theme.textDark}; text-decoration: underline; - img { height: 19px; vertical-align: middle; diff --git a/lib/ReactViews/Credits/MapCredits/MapCreditLogo.tsx b/lib/ReactViews/Map/BottomBar/Credits/MapCreditLogo.tsx similarity index 75% rename from lib/ReactViews/Credits/MapCredits/MapCreditLogo.tsx rename to lib/ReactViews/Map/BottomBar/Credits/MapCreditLogo.tsx index 9ba2b6be382..7f0cffb0b18 100644 --- a/lib/ReactViews/Credits/MapCredits/MapCreditLogo.tsx +++ b/lib/ReactViews/Map/BottomBar/Credits/MapCreditLogo.tsx @@ -1,8 +1,8 @@ import React, { FC } from "react"; import CreditDisplay from "terriajs-cesium/Source/Scene/CreditDisplay"; -import GlobeOrMap from "../../../Models/GlobeOrMap"; -import Leaflet from "../../../Models/Leaflet"; -import parseCustomHtmlToReact from "../../Custom/parseCustomHtmlToReact"; +import GlobeOrMap from "../../../../Models/GlobeOrMap"; +import Leaflet from "../../../../Models/Leaflet"; +import parseCustomHtmlToReact from "../../../Custom/parseCustomHtmlToReact"; interface IMapCreditLogoProps { currentViewer: GlobeOrMap; diff --git a/lib/ReactViews/Credits/MapCredits/MapCredits.tsx b/lib/ReactViews/Map/BottomBar/Credits/MapCredits.tsx similarity index 84% rename from lib/ReactViews/Credits/MapCredits/MapCredits.tsx rename to lib/ReactViews/Map/BottomBar/Credits/MapCredits.tsx index 404abdeeb8b..05a8a30a118 100644 --- a/lib/ReactViews/Credits/MapCredits/MapCredits.tsx +++ b/lib/ReactViews/Map/BottomBar/Credits/MapCredits.tsx @@ -2,13 +2,13 @@ import { reaction } from "mobx"; import { observer } from "mobx-react"; import React, { FC, useCallback, useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; -import GlobeOrMap from "../../../Models/GlobeOrMap"; -import { ICredit } from "../Credit.type"; -import { Credits } from "../Credits"; -import { CreditsContainer } from "../CreditsContainer"; -import { DataAttributionModal } from "../DataAttribution/DataAttributionModal"; -import { Spacer } from "../Spacer"; -import { TerriaLogo } from "../TerriaLogo"; +import GlobeOrMap from "../../../../Models/GlobeOrMap"; +import { ICredit } from "./Credit.type"; +import { Credits } from "./Credits"; +import { CreditsContainer } from "./CreditsContainer"; +import { DataAttributionModal } from "./DataAttribution/DataAttributionModal"; +import { Spacer } from "./Spacer"; +import { TerriaLogo } from "./TerriaLogo"; import { MapCreditLogo } from "./MapCreditLogo"; interface IMapCreditsProps { diff --git a/lib/ReactViews/Credits/Spacer.tsx b/lib/ReactViews/Map/BottomBar/Credits/Spacer.tsx similarity index 100% rename from lib/ReactViews/Credits/Spacer.tsx rename to lib/ReactViews/Map/BottomBar/Credits/Spacer.tsx diff --git a/lib/ReactViews/Credits/TerriaLogo.tsx b/lib/ReactViews/Map/BottomBar/Credits/TerriaLogo.tsx similarity index 71% rename from lib/ReactViews/Credits/TerriaLogo.tsx rename to lib/ReactViews/Map/BottomBar/Credits/TerriaLogo.tsx index ab56a9046ed..fd035fd8688 100644 --- a/lib/ReactViews/Credits/TerriaLogo.tsx +++ b/lib/ReactViews/Map/BottomBar/Credits/TerriaLogo.tsx @@ -1,7 +1,7 @@ import React, { FC } from "react"; -import Box from "../../Styled/Box"; +import Box from "../../../../Styled/Box"; -const logo = require("../../../wwwroot/images/terria-watermark.svg"); +const logo = require("../../../../../wwwroot/images/terria-watermark.svg"); export const TerriaLogo: FC = () => { return ( diff --git a/lib/ReactViews/Map/BottomBar/Credits/index.ts b/lib/ReactViews/Map/BottomBar/Credits/index.ts new file mode 100644 index 00000000000..ebd9ea095ca --- /dev/null +++ b/lib/ReactViews/Map/BottomBar/Credits/index.ts @@ -0,0 +1,2 @@ +export { ICredit } from "./Credit.type"; +export { MapCredits } from "./MapCredits"; diff --git a/lib/ReactViews/Map/BottomBar/DistanceLegend.tsx b/lib/ReactViews/Map/BottomBar/DistanceLegend.tsx new file mode 100644 index 00000000000..6236d49259f --- /dev/null +++ b/lib/ReactViews/Map/BottomBar/DistanceLegend.tsx @@ -0,0 +1,243 @@ +"use strict"; +import L from "leaflet"; +import { runInAction } from "mobx"; +import { observer } from "mobx-react"; +import React, { FC, useEffect, useState, memo } from "react"; +import { useTheme } from "styled-components"; +import Cartesian2 from "terriajs-cesium/Source/Core/Cartesian2"; +import EllipsoidGeodesic from "terriajs-cesium/Source/Core/EllipsoidGeodesic"; +import CesiumEvent from "terriajs-cesium/Source/Core/Event"; +import getTimestamp from "terriajs-cesium/Source/Core/getTimestamp"; +import Scene from "terriajs-cesium/Source/Scene/Scene"; +import isDefined from "../../../Core/isDefined"; +import Box from "../../../Styled/Box"; +import Text from "../../../Styled/Text"; +import { useViewState } from "../../Context"; + +const geodesic = new EllipsoidGeodesic(); + +const distances = [ + 1, + 2, + 3, + 5, + 10, + 20, + 30, + 50, + 100, + 200, + 300, + 500, + 1000, + 2000, + 3000, + 5000, + 10000, + 20000, + 30000, + 50000, + 100000, + 200000, + 300000, + 500000, + 1000000, + 2000000, + 3000000, + 5000000, + 10000000, + 20000000, + 30000000, + 50000000 +]; + +interface IDistanceLegendProps { + scale?: number; + isPrintMode?: boolean; +} + +export const DistanceLegend: FC = observer( + ({ scale = 1, isPrintMode = false }) => { + const [distanceLabel, setDistanceLabel] = useState(); + const [barWidth, setBarWidth] = useState(0); + + const { terria } = useViewState(); + const theme = useTheme(); + + let removeUpdateSubscription: + | CesiumEvent.RemoveCallback + | (() => void) + | undefined; + + useEffect(() => { + const viewerSubscriptions: CesiumEvent.RemoveCallback[] = []; + + removeUpdateSubscription = addUpdateSubscription(); + + return () => { + if (removeUpdateSubscription) { + removeUpdateSubscription(); + } + viewerSubscriptions.forEach(clear => clear()); + }; + }, [terria.cesium, terria.leaflet]); + + const addUpdateSubscription = (): + | CesiumEvent.RemoveCallback + | (() => void) + | undefined => { + if (isDefined(terria.cesium)) { + const scene = terria.cesium.scene; + let removeUpdateSubscription: + | CesiumEvent.RemoveCallback + | undefined = scene.postRender.addEventListener(() => { + updateDistanceLegendCesium(scene); + if (isPrintMode) { + removeUpdateSubscription?.(); + removeUpdateSubscription = undefined; + } + }); + return removeUpdateSubscription; + } else if (isDefined(terria.leaflet)) { + const map = terria.leaflet.map; + let removeUpdateSubscription: (() => void) | undefined = undefined; + + if (!isPrintMode) { + const potentialChangeCallback = function potentialChangeCallback() { + updateDistanceLegendLeaflet(map); + }; + removeUpdateSubscription = function() { + map.off("zoomend", potentialChangeCallback); + map.off("moveend", potentialChangeCallback); + }; + + map.on("zoomend", potentialChangeCallback); + map.on("moveend", potentialChangeCallback); + } + + updateDistanceLegendLeaflet(map); + return removeUpdateSubscription; + } + }; + + const updateDistanceLegendCesium = (scene: Scene) => { + const now = getTimestamp(); + + // Find the distance between two pixels at the bottom center of the screen. + const width = scene.canvas.clientWidth; + const height = scene.canvas.clientHeight; + + const left = scene.camera.getPickRay( + new Cartesian2((width / 2) | 0, height - 1) + ); + const right = scene.camera.getPickRay( + new Cartesian2((1 + width / 2) | 0, height - 1) + ); + + const globe = scene.globe; + + if (!isDefined(left) || !isDefined(right)) { + return; + } + + const leftPosition = globe.pick(left, scene); + const rightPosition = globe.pick(right, scene); + + if (!isDefined(leftPosition) || !isDefined(rightPosition)) { + setBarWidth(0); + setDistanceLabel(undefined); + return; + } + + const leftCartographic = globe.ellipsoid.cartesianToCartographic( + leftPosition + ); + const rightCartographic = globe.ellipsoid.cartesianToCartographic( + rightPosition + ); + + geodesic.setEndPoints(leftCartographic, rightCartographic); + const pixelDistance = geodesic.surfaceDistance; + runInAction(() => (terria.mainViewer.scale = pixelDistance)); + + // Find the first distance that makes the scale bar less than 100 pixels. + const maxBarWidth = 100; + let distance; + for (let i = distances.length - 1; !isDefined(distance) && i >= 0; --i) { + if (distances[i] / pixelDistance < maxBarWidth) { + distance = distances[i]; + } + } + + if (isDefined(distance)) { + let label; + if (distance >= 1000) { + label = (distance / 1000).toString() + " km"; + } else { + label = distance.toString() + " m"; + } + setBarWidth(((distance / pixelDistance) * scale) | 0); + setDistanceLabel(label); + } else { + setBarWidth(0); + setDistanceLabel(undefined); + } + }; + + const updateDistanceLegendLeaflet = (map: L.Map) => { + const halfHeight = map.getSize().y / 2; + const maxPixelWidth = 100; + const maxMeters = map + .containerPointToLatLng([0, halfHeight]) + .distanceTo(map.containerPointToLatLng([maxPixelWidth, halfHeight])); + + runInAction(() => (terria.mainViewer.scale = maxMeters / 100)); + // @ts-ignore + const meters = L.control.scale()._getRoundNum(maxMeters); + const label = meters < 1000 ? meters + " m" : meters / 1000 + " km"; + + setBarWidth((meters / maxMeters) * maxPixelWidth * scale); + setDistanceLabel(label); + }; + + const barStyle = { + width: barWidth + "px", + left: 5 + (125 - barWidth) / 2 + "px", + height: "2px" + }; + + return distanceLabel ? ( + + + {distanceLabel} + +
+ + ) : null; + } +); diff --git a/lib/ReactViews/Map/BottomBar/LocationBar.tsx b/lib/ReactViews/Map/BottomBar/LocationBar.tsx new file mode 100644 index 00000000000..67ee4c5798b --- /dev/null +++ b/lib/ReactViews/Map/BottomBar/LocationBar.tsx @@ -0,0 +1,88 @@ +import { observer } from "mobx-react"; +import React, { FC } from "react"; +import { useTranslation } from "react-i18next"; +import styled, { useTheme } from "styled-components"; +import MouseCoords from "../../../ReactViewModels/MouseCoords"; +import Box from "../../../Styled/Box"; +import { RawButton } from "../../../Styled/Button"; +import { TextSpan } from "../../../Styled/Text"; + +interface ILocationBarProps { + mouseCoords: MouseCoords; +} + +const Section = styled(Box).attrs({ + paddedHorizontally: true +})``; + +const StyledText = styled(TextSpan).attrs({ + textLight: true, + mono: true, + noWrap: true +})` + font-size: 0.7rem; + padding: 0 5px 0 5px; +`; + +export const LocationBar: FC = observer( + ({ mouseCoords }) => { + const theme = useTheme(); + const { t } = useTranslation(); + + return ( + + + {!mouseCoords.useProjection ? ( + <> +
+ {t("legend.lat")} + {mouseCoords.latitude} +
+
+ {t("legend.lon")} + {mouseCoords.longitude} +
+ + ) : ( + <> +
+ {t("legend.zone")} + {mouseCoords.utmZone} +
+
+ {t("legend.e")} + {mouseCoords.east} +
+
+ {t("legend.n")} + {mouseCoords.north} +
+ + )} +
+ {t("legend.elev")} + {mouseCoords.elevation} +
+ + + ); + } +); diff --git a/lib/ReactViews/Map/BottomBar/index.ts b/lib/ReactViews/Map/BottomBar/index.ts new file mode 100644 index 00000000000..c8b81e2ff08 --- /dev/null +++ b/lib/ReactViews/Map/BottomBar/index.ts @@ -0,0 +1 @@ +export { BottomBar } from "./BottomBar"; diff --git a/lib/ReactViews/Map/BottomLeftBar/BottomLeftBar.tsx b/lib/ReactViews/Map/BottomLeftBar/BottomLeftBar.tsx index 8099e7325da..c4440c11864 100644 --- a/lib/ReactViews/Map/BottomLeftBar/BottomLeftBar.tsx +++ b/lib/ReactViews/Map/BottomLeftBar/BottomLeftBar.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { FC } from "react"; import { useTranslation } from "react-i18next"; import ViewState from "../../../ReactViewModels/ViewState"; @@ -10,47 +10,43 @@ import MapDataCount from "../../BottomDock/MapDataCount"; import Terria from "../../../Models/Terria"; import MapIconButton from "../../MapIconButton/MapIconButton"; import defined from "terriajs-cesium/Source/Core/defined"; - -interface Props { - terria: Terria; - viewState: ViewState; -} +import { useViewState } from "../../Context"; const BottomLeftContainer = styled(Box)` position: absolute; bottom: 40px; - @media (max-width: ${props => props.theme.mobile}px) { bottom: 35px; } `; -const shouldShowPlayStoryButton = (props: Props) => - props.terria.configParameters.storyEnabled && - defined(props.terria.stories) && - props.terria.stories.length > 0 && - props.viewState.useSmallScreenInterface; +const shouldShowPlayStoryButton = (viewState: ViewState) => + viewState.terria.configParameters.storyEnabled && + defined(viewState.terria.stories) && + viewState.terria.stories.length > 0 && + viewState.useSmallScreenInterface; -const BottomLeftBar = (props: Props) => { +const BottomLeftBar: FC = () => { const { t } = useTranslation(); const theme = useTheme(); + const viewState = useViewState(); const isNotificationActive = - props.terria.notificationState.currentNotification; + viewState.terria.notificationState.currentNotification; return ( - {shouldShowPlayStoryButton(props) ? ( + {shouldShowPlayStoryButton(viewState) ? ( } - onClick={() => props.viewState.runStories()} + onClick={() => viewState.runStories()} primary={!isNotificationActive} > {t("story.playStory")} diff --git a/lib/ReactViews/Map/HelpButton/help-button.scss b/lib/ReactViews/Map/HelpButton/help-button.scss deleted file mode 100644 index c89132566d1..00000000000 --- a/lib/ReactViews/Map/HelpButton/help-button.scss +++ /dev/null @@ -1,4 +0,0 @@ -.helpBtn { - composes: btn from "../../../Sass/common/_buttons.scss"; - composes: btn--map from "../../../Sass/common/_buttons.scss"; -} diff --git a/lib/ReactViews/Map/Legend/DistanceLegend.jsx b/lib/ReactViews/Map/Legend/DistanceLegend.jsx deleted file mode 100644 index e163b318901..00000000000 --- a/lib/ReactViews/Map/Legend/DistanceLegend.jsx +++ /dev/null @@ -1,233 +0,0 @@ -"use strict"; -import React from "react"; -import PropTypes from "prop-types"; -import L from "leaflet"; -import Cartesian2 from "terriajs-cesium/Source/Core/Cartesian2"; -import defined from "terriajs-cesium/Source/Core/defined"; -import EllipsoidGeodesic from "terriajs-cesium/Source/Core/EllipsoidGeodesic"; -import getTimestamp from "terriajs-cesium/Source/Core/getTimestamp"; -import Styles from "./legend.scss"; -import { observer, disposeOnUnmount } from "mobx-react"; -import { autorun, runInAction } from "mobx"; - -const geodesic = new EllipsoidGeodesic(); - -const distances = [ - 1, - 2, - 3, - 5, - 10, - 20, - 30, - 50, - 100, - 200, - 300, - 500, - 1000, - 2000, - 3000, - 5000, - 10000, - 20000, - 30000, - 50000, - 100000, - 200000, - 300000, - 500000, - 1000000, - 2000000, - 3000000, - 5000000, - 10000000, - 20000000, - 30000000, - 50000000 -]; - -@observer -class DistanceLegend extends React.Component { - constructor(props) { - super(props); - this.state = { - distanceLabel: undefined, - barWidth: 0 - }; - } - static displayName = "DistanceLegend"; - static propTypes = { - terria: PropTypes.object, - scale: PropTypes.number, - isPrintMode: PropTypes.bool - }; - - /* eslint-disable-next-line camelcase */ - UNSAFE_componentWillMount() { - this.viewerSubscriptions = []; - this.removeUpdateSubscription = undefined; - - this._lastLegendUpdate = undefined; - this.viewerSubscriptions.push( - this.props.terria.mainViewer.beforeViewerChanged.addEventListener(() => { - if (defined(this.removeUpdateSubscription)) { - this.removeUpdateSubscription(); - this.removeUpdateSubscription = undefined; - } - }) - ); - disposeOnUnmount( - this, - autorun(() => this.addUpdateSubscription()) - ); - } - - componentWillUnmount() { - this.removeUpdateSubscription && this.removeUpdateSubscription(); - this.viewerSubscriptions.forEach(remove => remove()); - } - - addUpdateSubscription() { - const that = this; - if (defined(this.props.terria.cesium)) { - const scene = this.props.terria.cesium.scene; - this.removeUpdateSubscription = scene.postRender.addEventListener(() => { - this.updateDistanceLegendCesium(scene); - if (this.props.isPrintMode) { - this.removeUpdateSubscription(); - this.removeUpdateSubscription = null; - } - }); - } else if (defined(this.props.terria.leaflet)) { - const map = this.props.terria.leaflet.map; - - const potentialChangeCallback = function potentialChangeCallback() { - that.updateDistanceLegendLeaflet(map); - }; - if (!this.props.isPrintMode) { - that.removeUpdateSubscription = function() { - map.off("zoomend", potentialChangeCallback); - map.off("moveend", potentialChangeCallback); - }; - - map.on("zoomend", potentialChangeCallback); - map.on("moveend", potentialChangeCallback); - } - - that.updateDistanceLegendLeaflet(map); - } - } - - updateDistanceLegendCesium(scene) { - const now = getTimestamp(); - if (now < this._lastLegendUpdate + 250) { - return; - } - - this._lastLegendUpdate = now; - - // Find the distance between two pixels at the bottom center of the screen. - const width = scene.canvas.clientWidth; - const height = scene.canvas.clientHeight; - - const left = scene.camera.getPickRay( - new Cartesian2((width / 2) | 0, height - 1) - ); - const right = scene.camera.getPickRay( - new Cartesian2((1 + width / 2) | 0, height - 1) - ); - - const globe = scene.globe; - const leftPosition = globe.pick(left, scene); - const rightPosition = globe.pick(right, scene); - - if (!defined(leftPosition) || !defined(rightPosition)) { - this.setState({ - barWidth: undefined, - distanceLabel: undefined - }); - return; - } - - const leftCartographic = globe.ellipsoid.cartesianToCartographic( - leftPosition - ); - const rightCartographic = globe.ellipsoid.cartesianToCartographic( - rightPosition - ); - - geodesic.setEndPoints(leftCartographic, rightCartographic); - const pixelDistance = geodesic.surfaceDistance; - runInAction(() => (this.props.terria.mainViewer.scale = pixelDistance)); - - // Find the first distance that makes the scale bar less than 100 pixels. - const maxBarWidth = 100; - let distance; - for (let i = distances.length - 1; !defined(distance) && i >= 0; --i) { - if (distances[i] / pixelDistance < maxBarWidth) { - distance = distances[i]; - } - } - - if (defined(distance)) { - let label; - if (distance >= 1000) { - label = (distance / 1000).toString() + " km"; - } else { - label = distance.toString() + " m"; - } - - this.setState({ - barWidth: ((distance / pixelDistance) * this.props.scale) | 0, - distanceLabel: label - }); - } else { - this.setState({ - barWidth: undefined, - distanceLabel: undefined - }); - } - } - - updateDistanceLegendLeaflet(map) { - const halfHeight = map.getSize().y / 2; - const maxPixelWidth = 100; - const maxMeters = map - .containerPointToLatLng([0, halfHeight]) - .distanceTo(map.containerPointToLatLng([maxPixelWidth, halfHeight])); - - runInAction(() => (this.props.terria.mainViewer.scale = maxMeters / 100)); - - const meters = L.control.scale()._getRoundNum(maxMeters); - const label = meters < 1000 ? meters + " m" : meters / 1000 + " km"; - - this.setState({ - barWidth: (meters / maxMeters) * maxPixelWidth * this.props.scale, - distanceLabel: label - }); - } - - render() { - const barStyle = { - width: this.state.barWidth + "px", - left: 5 + (125 - this.state.barWidth) / 2 + "px", - height: "2px" - }; - - const distanceLabel = this.state.distanceLabel ? ( -
- -
-
- ) : null; - - return distanceLabel; - } -} -DistanceLegend.defaultProps = { - scale: 1, - isPrintMode: false -}; - -export default DistanceLegend; diff --git a/lib/ReactViews/Map/Legend/LocationBar.jsx b/lib/ReactViews/Map/Legend/LocationBar.jsx deleted file mode 100644 index 47ea185d906..00000000000 --- a/lib/ReactViews/Map/Legend/LocationBar.jsx +++ /dev/null @@ -1,82 +0,0 @@ -"use strict"; -import classNames from "classnames"; -import createReactClass from "create-react-class"; -import { observer } from "mobx-react"; -import PropTypes from "prop-types"; -import { withTranslation } from "react-i18next"; -import React from "react"; -import Styles from "./legend.scss"; - -const LocationBar = observer( - createReactClass({ - displayName: "LocationBar", - - propTypes: { - terria: PropTypes.object, - showUtmZone: PropTypes.bool, - mouseCoords: PropTypes.object.isRequired, - t: PropTypes.func.isRequired - }, - - getDefaultProps: function() { - return { - showUtmZone: true - }; - }, - - toggleUseProjection() { - this.props.mouseCoords.toggleUseProjection(); - }, - - render() { - const { t } = this.props; - return ( - - ); - } - }) -); - -module.exports = withTranslation()(LocationBar); diff --git a/lib/ReactViews/Map/Legend/legend.scss b/lib/ReactViews/Map/Legend/legend.scss deleted file mode 100644 index 58110a76b6e..00000000000 --- a/lib/ReactViews/Map/Legend/legend.scss +++ /dev/null @@ -1,75 +0,0 @@ -@import "~terriajs-variables"; -@import "../../../Sass/common/mixins"; - -$distance-bg: rgba($dark, 0.9); - -.baseLegend { - box-sizing: border-box; - font-family: $font-base; - float: left; - background-color: #fff; - color: $text-dark; - padding: $padding-small $padding-small; - font-size: $font-size-mid-mini; - text-align: center; - line-height: 1; - border: 0; - outline: 0; - font-family: $font-mono; - max-height: 21px; - margin-top: $padding-mini; - &:hover { - background: $faint-bg; - } - - .bar { - background: #fff; - margin: 0 auto; - display: block; - @include transition(all 0.5s ease-in-out); - } -} - -.locationBar, -.distanceLegend { - composes: baseLegend; - // Adjust colors to match btn--map. - background-color: unset; - margin-bottom: $padding-mini; - color: $text-light; - &:hover { - // background: $color-primary; - } - // - margin-right: $padding-small; - span { - padding: 0 $padding-small; - } - - li, - div { - display: inline-block; - padding: 0 $padding-small; - text-align: left; - } - - .section-long { - width: 130px; - } - - .section { - width: 112px; - } - - .section-short { - width: 70px; - } -} - -.distanceLegend { - &:hover { - background: $charcoal-grey; - } - text-align: center; - width: 110px; -} diff --git a/lib/ReactViews/Map/Legend/legend.scss.d.ts b/lib/ReactViews/Map/Legend/legend.scss.d.ts deleted file mode 100644 index 2216fd3b3ba..00000000000 --- a/lib/ReactViews/Map/Legend/legend.scss.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -// This file is automatically generated. -// Please do not change this file! -interface CssExports { - 'bar': string; - 'baseLegend': string; - 'distanceLegend': string; - 'locationBar': string; - 'section': string; - 'section-long': string; - 'section-short': string; - 'sectionLong': string; - 'sectionShort': string; -} -declare var cssExports: CssExports; -export = cssExports; diff --git a/lib/ReactViews/Map/MapColumn.tsx b/lib/ReactViews/Map/MapColumn.tsx new file mode 100644 index 00000000000..25f647c9164 --- /dev/null +++ b/lib/ReactViews/Map/MapColumn.tsx @@ -0,0 +1,136 @@ +import { observer } from "mobx-react"; +import React, { FC } from "react"; +import { useTranslation } from "react-i18next"; +import Box from "../../Styled/Box"; +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"; + +interface IMapColumnProps { + customFeedbacks: any; + animationDuration: number; + customElements: any; +} + +/** + * 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: FC = observer( + ({ customFeedbacks, customElements, animationDuration }) => { + const viewState = useViewState(); + const { t } = useTranslation(); + + return ( + + +
+ +
+ {!viewState.hideMapUi && ( + <> + + + + )} + + + + {!viewState.hideMapUi && ( + <> + + + + + + + + + + + {viewState.terria.configParameters.printDisclaimer && ( + + {viewState.terria.configParameters.printDisclaimer.text} + + )} + + )} + +
+ {true && ( + + )} +
+ + ); + } +); + +export default MapColumn; diff --git a/lib/ReactViews/Map/Navigation/Items/OverflowNavigationItem.tsx b/lib/ReactViews/Map/MapNavigation/CollapsedNavigation.tsx similarity index 84% rename from lib/ReactViews/Map/Navigation/Items/OverflowNavigationItem.tsx rename to lib/ReactViews/Map/MapNavigation/CollapsedNavigation.tsx index 78e2ee980cc..b43925c5d84 100644 --- a/lib/ReactViews/Map/Navigation/Items/OverflowNavigationItem.tsx +++ b/lib/ReactViews/Map/MapNavigation/CollapsedNavigation.tsx @@ -3,16 +3,16 @@ import { observer } from "mobx-react"; import React, { useEffect } from "react"; import { useTranslation } from "react-i18next"; import styled, { useTheme } from "styled-components"; -import { applyTranslationIfExists } from "../../../../Language/languageHelpers"; -import Box, { BoxSpan } from "../../../../Styled/Box"; -import { StyledIcon } from "../../../../Styled/Icon"; -import Spacing from "../../../../Styled/Spacing"; -import Text from "../../../../Styled/Text"; -import { IMapNavigationItem } from "../../../../ViewModels/MapNavigation/MapNavigationModel"; -import CloseButton from "../../../Generic/CloseButton"; -import { PrefaceBox } from "../../../Generic/PrefaceBox"; -import { useViewState } from "../../../StandardUserInterface/ViewStateContext"; -import { filterViewerAndScreenSize } from "../MapNavigation"; +import { applyTranslationIfExists } from "../../../Language/languageHelpers"; +import Box, { BoxSpan } from "../../../Styled/Box"; +import { StyledIcon } from "../../../Styled/Icon"; +import Spacing from "../../../Styled/Spacing"; +import Text from "../../../Styled/Text"; +import { IMapNavigationItem } from "../../../ViewModels/MapNavigation/MapNavigationModel"; +import { useViewState } from "../../Context"; +import CloseButton from "../../Generic/CloseButton"; +import { PrefaceBox } from "../../Generic/PrefaceBox"; +import { filterViewerAndScreenSize } from "./filterViewerAndScreenSize"; interface PropTypes { items: IMapNavigationItem[]; @@ -128,7 +128,7 @@ const CollapsedNavigationPanel: React.FC = observer( ); const CollapsedNavigationDisplayName = "CollapsedNavigation"; -const CollapsedNavigation: React.FC = observer(() => { +export const CollapsedNavigation: React.FC = observer(() => { const viewState = useViewState(); useEffect(() => autorun(() => { @@ -163,5 +163,3 @@ const CollapsedNavigation: React.FC = observer(() => { ); }); - -export default CollapsedNavigation; diff --git a/lib/ReactViews/Map/Navigation/Items/AugmentedVirtualityTool.tsx b/lib/ReactViews/Map/MapNavigation/Items/AugmentedVirtualityTool.tsx similarity index 100% rename from lib/ReactViews/Map/Navigation/Items/AugmentedVirtualityTool.tsx rename to lib/ReactViews/Map/MapNavigation/Items/AugmentedVirtualityTool.tsx diff --git a/lib/ReactViews/Map/Navigation/Items/CatalogShortcut.jsx b/lib/ReactViews/Map/MapNavigation/Items/CatalogShortcut.jsx similarity index 100% rename from lib/ReactViews/Map/Navigation/Items/CatalogShortcut.jsx rename to lib/ReactViews/Map/MapNavigation/Items/CatalogShortcut.jsx diff --git a/lib/ReactViews/Map/Navigation/Items/CloseToolButton.tsx b/lib/ReactViews/Map/MapNavigation/Items/CloseToolButton.tsx similarity index 65% rename from lib/ReactViews/Map/Navigation/Items/CloseToolButton.tsx rename to lib/ReactViews/Map/MapNavigation/Items/CloseToolButton.tsx index 719b03526d0..377e116533d 100644 --- a/lib/ReactViews/Map/Navigation/Items/CloseToolButton.tsx +++ b/lib/ReactViews/Map/MapNavigation/Items/CloseToolButton.tsx @@ -1,15 +1,12 @@ -import React from "react"; -import { withTranslation, WithTranslation } from "react-i18next"; -import ViewState from "../../../../ReactViewModels/ViewState"; +import React, { FC } from "react"; +import { useTranslation } from "react-i18next"; import Icon from "../../../../Styled/Icon"; +import { useViewState } from "../../../Context"; import MapIconButton from "../../../MapIconButton/MapIconButton"; -interface PropsType extends WithTranslation { - viewState: ViewState; - t: any; -} - -function CloseToolButton({ viewState, t }: PropsType) { +export const CloseToolButton: FC = () => { + const { t } = useTranslation(); + const viewState = useViewState(); const closeText = t("tool.closeButtonTitle", { toolName: viewState.currentTool?.toolName }); @@ -31,6 +28,4 @@ function CloseToolButton({ viewState, t }: PropsType) { {closeText} ); -} - -export default withTranslation()(CloseToolButton); +}; diff --git a/lib/ReactViews/Map/Navigation/Items/Compass.tsx b/lib/ReactViews/Map/MapNavigation/Items/Compass/Compass.tsx similarity index 94% rename from lib/ReactViews/Map/Navigation/Items/Compass.tsx rename to lib/ReactViews/Map/MapNavigation/Items/Compass/Compass.tsx index e25167822b7..22206c308dd 100644 --- a/lib/ReactViews/Map/Navigation/Items/Compass.tsx +++ b/lib/ReactViews/Map/MapNavigation/Items/Compass/Compass.tsx @@ -23,21 +23,21 @@ import CesiumMath from "terriajs-cesium/Source/Core/Math"; import Matrix4 from "terriajs-cesium/Source/Core/Matrix4"; import Ray from "terriajs-cesium/Source/Core/Ray"; import Transforms from "terriajs-cesium/Source/Core/Transforms"; -import isDefined from "../../../../Core/isDefined"; -import Terria from "../../../../Models/Terria"; -import ViewState from "../../../../ReactViewModels/ViewState"; -import Box from "../../../../Styled/Box"; -import Icon, { StyledIcon } from "../../../../Styled/Icon"; -import GyroscopeGuidance from "../../../GyroscopeGuidance/GyroscopeGuidance"; -import { withTerriaRef } from "../../../HOCs/withTerriaRef"; -import FadeIn from "../../../Transitions/FadeIn/FadeIn"; +import isDefined from "../../../../../Core/isDefined"; +import Terria from "../../../../../Models/Terria"; +import ViewState from "../../../../../ReactViewModels/ViewState"; +import Box from "../../../../../Styled/Box"; +import Icon, { StyledIcon } from "../../../../../Styled/Icon"; +import { GyroscopeGuidance } from "./GyroscopeGuidance"; +import { withTerriaRef } from "../../../../HOCs/withTerriaRef"; +import FadeIn from "../../../../Transitions/FadeIn/FadeIn"; const CameraFlightPath = require("terriajs-cesium/Source/Scene/CameraFlightPath") .default; export const COMPASS_LOCAL_PROPERTY_KEY = "CompassHelpPrompted"; -// Map Compass +// Map CompassBase // // Markup: // @@ -63,7 +63,7 @@ const StyledCompass = styled.div` `; /** - * Take a compass width and scale it up 10px, instead of hardcoding values like: + * Take a compassbase width and scale it up 10px, instead of hardcoding values like: * // const compassScaleRatio = 66 / 56; */ const getCompassScaleRatio = (compassWidth: string) => @@ -80,7 +80,7 @@ const getCompassScaleRatio = (compassWidth: string) => * - chrome (not even another webkit browser) * - "default browser zoom" (doesn't happen when you are even at 110%, but will * when shrunk down enough) - * - the way our compass is composed + * - the way our compassbase is composed * * The action of triggering the 'active' state (scaled up to * `getCompassScaleRatio()`) & back down means that the "InnerRing" will look @@ -88,10 +88,10 @@ const getCompassScaleRatio = (compassWidth: string) => * chrome will decide to render it in the correct position. * * I haven't dug further to the root cause as doing it like this means wew now - * have a beautiful animating compass. + * have a beautiful animating compassbase. * * So please leave scale(0.9999) alone unless you can fix the rendering issue in - * chrome, or if you want to develop a burning hatred for the compass 🙏🔥 + * chrome, or if you want to develop a burning hatred for the compassbase 🙏🔥 * **/ const StyledCompassOuterRing = styled.div` @@ -149,8 +149,8 @@ type IStateTypes = { activeForTransition: boolean; }; -// the compass on map -class Compass extends React.Component { +// the compassbase on map +class CompassBase extends React.Component { _unsubscribeFromPostRender: any; _unsubscribeFromAnimationFrame: any; private _unsubscribeFromViewerChange?: CesiumEvent.RemoveCallback; @@ -325,7 +325,7 @@ class Compass extends React.Component { }; const { t } = this.props; const active = this.state.active; - const description = t("compass.description"); + const description = t("compassbase.description"); const showGuidance = !this.props.viewState.terria.getLocalProperty( COMPASS_LOCAL_PROPERTY_KEY ); @@ -368,7 +368,7 @@ class Compass extends React.Component { {/* "Center circle icon" */} - + { this.setState({ active: true })} onMouseOut={() => { @@ -443,7 +443,7 @@ const windowPositionScratch = new Cartesian2(); const pickRayScratch = new Ray(); function rotate( - viewModel: Compass, + viewModel: CompassBase, compassElement: Element, cursorVector: Cartesian2 ) { @@ -568,7 +568,7 @@ function rotate( } function orbit( - viewModel: Compass, + viewModel: CompassBase, compassElement: Element, cursorVector: Cartesian2 ) { @@ -732,7 +732,7 @@ function orbit( ); } -function subscribeToAnimationFrame(viewModel: Compass) { +function subscribeToAnimationFrame(viewModel: CompassBase) { viewModel._unsubscribeFromAnimationFrame = (id => () => cancelAnimationFrame(id))( requestAnimationFrame(() => { @@ -744,7 +744,7 @@ function subscribeToAnimationFrame(viewModel: Compass) { ); } -function viewerChange(viewModel: Compass) { +function viewerChange(viewModel: CompassBase) { runInAction(() => { if (isDefined(viewModel.props.terria.cesium)) { if (viewModel._unsubscribeFromPostRender) { @@ -772,7 +772,7 @@ function viewerChange(viewModel: Compass) { } export const COMPASS_NAME = "MapNavigationCompassOuterRing"; -export const COMPASS_TOOL_ID = "compass"; -export default withTranslation()( - withTheme(withTerriaRef(Compass, COMPASS_NAME)) +export const COMPASS_TOOL_ID = "compassbase"; +export const Compass = withTranslation()( + withTheme(withTerriaRef(CompassBase, COMPASS_NAME)) ); diff --git a/lib/ReactViews/GyroscopeGuidance/GyroscopeGuidance.jsx b/lib/ReactViews/Map/MapNavigation/Items/Compass/GyroscopeGuidance.jsx similarity index 91% rename from lib/ReactViews/GyroscopeGuidance/GyroscopeGuidance.jsx rename to lib/ReactViews/Map/MapNavigation/Items/Compass/GyroscopeGuidance.jsx index 88abd356266..329ca1f50fc 100644 --- a/lib/ReactViews/GyroscopeGuidance/GyroscopeGuidance.jsx +++ b/lib/ReactViews/Map/MapNavigation/Items/Compass/GyroscopeGuidance.jsx @@ -3,15 +3,15 @@ import styled, { css } from "styled-components"; import PropTypes from "prop-types"; import { useTranslation } from "react-i18next"; -import Icon from "../../Styled/Icon"; -import Box from "../../Styled/Box"; -import { TextSpan } from "../../Styled/Text"; -import { RawButton } from "../../Styled/Button"; -import Spacing from "../../Styled/Spacing"; -import MapIconButton from "../MapIconButton/MapIconButton"; +import Icon from "../../../../../Styled/Icon"; +import Box from "../../../../../Styled/Box"; +import { TextSpan } from "../../../../../Styled/Text"; +import { RawButton } from "../../../../../Styled/Button"; +import Spacing from "../../../../../Styled/Spacing"; +import MapIconButton from "../../../../MapIconButton/MapIconButton"; // import MenuPanel from "../StandardUserInterface/customizable/MenuPanel"; -import CleanDropdownPanel from "../CleanDropdownPanel/CleanDropdownPanel"; -import { COMPASS_LOCAL_PROPERTY_KEY } from "../Map/Navigation/Items/Compass"; +import CleanDropdownPanel from "../../../../CleanDropdownPanel/CleanDropdownPanel"; +import { COMPASS_LOCAL_PROPERTY_KEY } from "./Compass"; GyroscopeGuidance.propTypes = { viewState: PropTypes.object.isRequired, @@ -129,7 +129,7 @@ GyroscopeGuidancePanel.propTypes = { onClose: PropTypes.func.isRequired }; -export default function GyroscopeGuidance(props) { +export function GyroscopeGuidance(props) { const [controlPanelOpen, setControlPanelOpen] = useState(false); const controlsMapIcon = useRef(); const { t } = useTranslation(); diff --git a/lib/ReactViews/Map/MapNavigation/Items/Compass/index.ts b/lib/ReactViews/Map/MapNavigation/Items/Compass/index.ts new file mode 100644 index 00000000000..fca157c39b0 --- /dev/null +++ b/lib/ReactViews/Map/MapNavigation/Items/Compass/index.ts @@ -0,0 +1 @@ +export { Compass, COMPASS_TOOL_ID } from "./Compass"; diff --git a/lib/ReactViews/Map/Navigation/Items/MapNavigationItem.tsx b/lib/ReactViews/Map/MapNavigation/Items/MapNavigationItem.tsx similarity index 94% rename from lib/ReactViews/Map/Navigation/Items/MapNavigationItem.tsx rename to lib/ReactViews/Map/MapNavigation/Items/MapNavigationItem.tsx index 83e0ac7aa29..75e7591a82a 100644 --- a/lib/ReactViews/Map/Navigation/Items/MapNavigationItem.tsx +++ b/lib/ReactViews/Map/MapNavigation/Items/MapNavigationItem.tsx @@ -19,7 +19,7 @@ interface PropTypes { } @observer -class MapNavigationItem extends React.Component { +class MapNavigationItemBase extends React.Component { constructor(props: PropTypes) { super(props); } @@ -73,4 +73,4 @@ export const Control = styled(Box).attrs({ text-align: center; `; -export default withTranslation()(MapNavigationItem); +export const MapNavigationItem = withTranslation()(MapNavigationItemBase); diff --git a/lib/ReactViews/Map/Navigation/Items/MeasureTool.ts b/lib/ReactViews/Map/MapNavigation/Items/MeasureTool.ts similarity index 99% rename from lib/ReactViews/Map/Navigation/Items/MeasureTool.ts rename to lib/ReactViews/Map/MapNavigation/Items/MeasureTool.ts index c07fc0cab17..4aaa58bce46 100644 --- a/lib/ReactViews/Map/Navigation/Items/MeasureTool.ts +++ b/lib/ReactViews/Map/MapNavigation/Items/MeasureTool.ts @@ -21,7 +21,7 @@ interface MeasureToolOptions { onClose(): void; } -export default class MeasureTool extends MapNavigationItemController { +export class MeasureTool extends MapNavigationItemController { static id = "measure-tool"; static displayName = "MeasureTool"; diff --git a/lib/ReactViews/Map/Navigation/Items/MyLocation.ts b/lib/ReactViews/Map/MapNavigation/Items/MyLocation.ts similarity index 98% rename from lib/ReactViews/Map/Navigation/Items/MyLocation.ts rename to lib/ReactViews/Map/MapNavigation/Items/MyLocation.ts index 211da462262..300b97d82bd 100644 --- a/lib/ReactViews/Map/Navigation/Items/MyLocation.ts +++ b/lib/ReactViews/Map/MapNavigation/Items/MyLocation.ts @@ -19,7 +19,7 @@ interface PropTypes { terria: Terria; } -class MyLocation extends MapNavigationItemController { +export class MyLocation extends MapNavigationItemController { static id = "my-location"; static displayName = "MyLocation"; readonly terria: Terria; @@ -188,5 +188,3 @@ class MyLocation extends MapNavigationItemController { } } } - -export default MyLocation; diff --git a/lib/ReactViews/Map/Navigation/Items/ToggleSplitterTool.ts b/lib/ReactViews/Map/MapNavigation/Items/ToggleSplitterTool.ts similarity index 100% rename from lib/ReactViews/Map/Navigation/Items/ToggleSplitterTool.ts rename to lib/ReactViews/Map/MapNavigation/Items/ToggleSplitterTool.ts diff --git a/lib/ReactViews/Map/Navigation/Items/ToolButton.tsx b/lib/ReactViews/Map/MapNavigation/Items/ToolButton.tsx similarity index 100% rename from lib/ReactViews/Map/Navigation/Items/ToolButton.tsx rename to lib/ReactViews/Map/MapNavigation/Items/ToolButton.tsx diff --git a/lib/ReactViews/Map/Navigation/Items/ZoomControl.tsx b/lib/ReactViews/Map/MapNavigation/Items/ZoomControl.tsx similarity index 97% rename from lib/ReactViews/Map/Navigation/Items/ZoomControl.tsx rename to lib/ReactViews/Map/MapNavigation/Items/ZoomControl.tsx index 1e641ee161a..5b2eaf92563 100644 --- a/lib/ReactViews/Map/Navigation/Items/ZoomControl.tsx +++ b/lib/ReactViews/Map/MapNavigation/Items/ZoomControl.tsx @@ -17,7 +17,7 @@ import Box from "../../../../Styled/Box"; import { RawButton } from "../../../../Styled/Button"; import Icon, { GLYPHS } from "../../../../Styled/Icon"; import Ul, { Li } from "../../../../Styled/List"; -import Terria from "./../../../../Models/Terria"; +import Terria from "../../../../Models/Terria"; const Tween = require("terriajs-cesium/Source/ThirdParty/Tween").default; @@ -29,7 +29,7 @@ interface PropTypes extends WithTranslation { export const ZOOM_CONTROL_ID = "zoom"; -class ZoomControl extends React.Component { +class ZoomControlBase extends React.Component { static displayName = "ZoomControl"; constructor(props: PropTypes) { @@ -236,10 +236,9 @@ const StyledZoomControl = styled(Box).attrs(props => ({ width: 20px; fill: ${props => props.theme.darkWithOverlay}; } - ${Li} { margin: 5px 0; } `; -export default withTranslation()(withTheme(ZoomControl)); +export const ZoomControl = withTranslation()(withTheme(ZoomControlBase)); diff --git a/lib/ReactViews/Map/MapNavigation/Items/index.ts b/lib/ReactViews/Map/MapNavigation/Items/index.ts new file mode 100644 index 00000000000..7d28299b240 --- /dev/null +++ b/lib/ReactViews/Map/MapNavigation/Items/index.ts @@ -0,0 +1,14 @@ +export { + AR_TOOL_ID, + AugmentedVirtualityController, + AugmentedVirtualityHoverController, + AugmentedVirtualityRealign, + AugmentedVirtualityRealignController +} from "./AugmentedVirtualityTool"; +export { CloseToolButton } from "./CloseToolButton"; +export * from "./Compass"; +export { Control, MapNavigationItem } from "./MapNavigationItem"; +export { MeasureTool } from "./MeasureTool"; +export { MyLocation } from "./MyLocation"; +export { ToggleSplitterController } from "./ToggleSplitterTool"; +export { ZoomControl, ZOOM_CONTROL_ID } from "./ZoomControl"; diff --git a/lib/ReactViews/Map/Navigation/MapNavigation.tsx b/lib/ReactViews/Map/MapNavigation/MapNavigation.tsx similarity index 90% rename from lib/ReactViews/Map/Navigation/MapNavigation.tsx rename to lib/ReactViews/Map/MapNavigation/MapNavigation.tsx index f7c7ce7d06e..d66609c783f 100644 --- a/lib/ReactViews/Map/Navigation/MapNavigation.tsx +++ b/lib/ReactViews/Map/MapNavigation/MapNavigation.tsx @@ -12,7 +12,6 @@ import { observer } from "mobx-react"; import React from "react"; import { WithTranslation, withTranslation } from "react-i18next"; import styled, { DefaultTheme, withTheme } from "styled-components"; -import isDefined from "../../../Core/isDefined"; import ViewState from "../../../ReactViewModels/ViewState"; import Box from "../../../Styled/Box"; import Icon, { GLYPHS } from "../../../Styled/Icon"; @@ -22,9 +21,9 @@ import MapNavigationModel, { } from "../../../ViewModels/MapNavigation/MapNavigationModel"; import withControlledVisibility from "../../HOCs/withControlledVisibility"; import MapIconButton from "../../MapIconButton/MapIconButton"; -import MapNavigationItem, { Control } from "./Items/MapNavigationItem"; +import { filterViewerAndScreenSize } from "./filterViewerAndScreenSize"; +import { Control, MapNavigationItem } from "./Items"; import { registerMapNavigations } from "./registerMapNavigations"; -import { ScreenSize } from "../../../ViewModels/CompositeBar/CompositeBarModel"; const OVERFLOW_ACTION_SIZE = 42; @@ -55,11 +54,9 @@ const StyledMapNavigation = styled.div` } } pointer-events: none; - button { pointer-events: auto; } - ${p => p.trainerBarVisible && ` @@ -89,7 +86,7 @@ enum Orientation { } @observer -class MapNavigation extends React.Component { +class MapNavigationBase extends React.Component { static displayName = "MapNavigation"; private navigationRef = React.createRef(); private readonly resizeListener: () => any; @@ -328,27 +325,6 @@ class MapNavigation extends React.Component { } } -export default withTranslation()( - withTheme(withControlledVisibility(MapNavigation)) +export const MapNavigation = withTranslation()( + withTheme(withControlledVisibility(MapNavigationBase)) ); - -export function filterViewerAndScreenSize( - item: IMapNavigationItem, - viewState: ViewState -) { - const currentViewer = viewState.terria.mainViewer.viewerMode; - const screenSize: ScreenSize = item.screenSize ?? "any"; - if (viewState.useSmallScreenInterface) { - return ( - (!isDefined(item.controller.viewerMode) || - item.controller.viewerMode === currentViewer) && - (screenSize === "any" || item.screenSize === "small") - ); - } else { - return ( - (!isDefined(item.controller.viewerMode) || - item.controller.viewerMode === currentViewer) && - (screenSize === "any" || item.screenSize === "medium") - ); - } -} diff --git a/lib/ReactViews/Map/MapNavigation/filterViewerAndScreenSize.ts b/lib/ReactViews/Map/MapNavigation/filterViewerAndScreenSize.ts new file mode 100644 index 00000000000..d555f60305a --- /dev/null +++ b/lib/ReactViews/Map/MapNavigation/filterViewerAndScreenSize.ts @@ -0,0 +1,25 @@ +import isDefined from "../../../Core/isDefined"; +import ViewState from "../../../ReactViewModels/ViewState"; +import { ScreenSize } from "../../../ViewModels/CompositeBar/CompositeBarModel"; +import { IMapNavigationItem } from "../../../ViewModels/MapNavigation/MapNavigationModel"; + +export function filterViewerAndScreenSize( + item: IMapNavigationItem, + viewState: ViewState +) { + const currentViewer = viewState.terria.mainViewer.viewerMode; + const screenSize: ScreenSize = item.screenSize ?? "any"; + if (viewState.useSmallScreenInterface) { + return ( + (!isDefined(item.controller.viewerMode) || + item.controller.viewerMode === currentViewer) && + (screenSize === "any" || item.screenSize === "small") + ); + } else { + return ( + (!isDefined(item.controller.viewerMode) || + item.controller.viewerMode === currentViewer) && + (screenSize === "any" || item.screenSize === "medium") + ); + } +} diff --git a/lib/ReactViews/Map/MapNavigation/index.ts b/lib/ReactViews/Map/MapNavigation/index.ts new file mode 100644 index 00000000000..0511deeab3f --- /dev/null +++ b/lib/ReactViews/Map/MapNavigation/index.ts @@ -0,0 +1,2 @@ +export { CollapsedNavigation } from "./CollapsedNavigation"; +export { MapNavigation } from "./MapNavigation"; diff --git a/lib/ReactViews/Map/Navigation/registerMapNavigations.tsx b/lib/ReactViews/Map/MapNavigation/registerMapNavigations.tsx similarity index 92% rename from lib/ReactViews/Map/Navigation/registerMapNavigations.tsx rename to lib/ReactViews/Map/MapNavigation/registerMapNavigations.tsx index 2a3a731c1e2..3c48d555e87 100644 --- a/lib/ReactViews/Map/Navigation/registerMapNavigations.tsx +++ b/lib/ReactViews/Map/MapNavigation/registerMapNavigations.tsx @@ -18,14 +18,16 @@ import { AugmentedVirtualityController, AugmentedVirtualityHoverController, AugmentedVirtualityRealign, - AugmentedVirtualityRealignController -} from "./Items/AugmentedVirtualityTool"; -import CloseToolButton from "./Items/CloseToolButton"; -import Compass, { COMPASS_TOOL_ID } from "./Items/Compass"; -import MeasureTool from "./Items/MeasureTool"; -import MyLocation from "./Items/MyLocation"; -import { ToggleSplitterController } from "./Items/ToggleSplitterTool"; -import ZoomControl, { ZOOM_CONTROL_ID } from "./Items/ZoomControl"; + AugmentedVirtualityRealignController, + CloseToolButton, + Compass, + COMPASS_TOOL_ID, + MeasureTool, + MyLocation, + ToggleSplitterController, + ZoomControl, + ZOOM_CONTROL_ID +} from "./Items"; export const CLOSE_TOOL_ID = "close-tool"; @@ -135,7 +137,7 @@ export const registerMapNavigations = (viewState: ViewState) => { location: "TOP", screenSize: undefined, controller: closeToolButtonController, - render: , + render: , order: 7 }); closeToolButtonController.setVisible(false); diff --git a/lib/ReactViews/Map/HelpButton/HelpButton.tsx b/lib/ReactViews/Map/MenuBar/HelpButton/HelpButton.tsx similarity index 86% rename from lib/ReactViews/Map/HelpButton/HelpButton.tsx rename to lib/ReactViews/Map/MenuBar/HelpButton/HelpButton.tsx index 90b73e41868..91a1fbeafce 100644 --- a/lib/ReactViews/Map/HelpButton/HelpButton.tsx +++ b/lib/ReactViews/Map/MenuBar/HelpButton/HelpButton.tsx @@ -1,10 +1,10 @@ import React from "react"; import { useTranslation } from "react-i18next"; -import ViewState from "../../../ReactViewModels/ViewState"; -import Icon from "../../../Styled/Icon"; -import Text from "../../../Styled/Text"; -import Prompt from "../../Generic/Prompt"; +import ViewState from "../../../../ReactViewModels/ViewState"; +import Icon from "../../../../Styled/Icon"; +import Text from "../../../../Styled/Text"; +import Prompt from "../../../Generic/Prompt"; import Styles from "./help-button.scss"; import { runInAction } from "mobx"; diff --git a/lib/ReactViews/Map/MenuBar/HelpButton/help-button.scss b/lib/ReactViews/Map/MenuBar/HelpButton/help-button.scss new file mode 100644 index 00000000000..fa774176e12 --- /dev/null +++ b/lib/ReactViews/Map/MenuBar/HelpButton/help-button.scss @@ -0,0 +1,4 @@ +.helpBtn { + composes: btn from "../../../../Sass/common/_buttons.scss"; + composes: btn--map from "../../../../Sass/common/_buttons.scss"; +} diff --git a/lib/ReactViews/Map/HelpButton/help-button.scss.d.ts b/lib/ReactViews/Map/MenuBar/HelpButton/help-button.scss.d.ts similarity index 100% rename from lib/ReactViews/Map/HelpButton/help-button.scss.d.ts rename to lib/ReactViews/Map/MenuBar/HelpButton/help-button.scss.d.ts diff --git a/lib/ReactViews/Map/MenuBar.jsx b/lib/ReactViews/Map/MenuBar/MenuBar.jsx similarity index 91% rename from lib/ReactViews/Map/MenuBar.jsx rename to lib/ReactViews/Map/MenuBar/MenuBar.jsx index 601021c5d8e..18bdef81b51 100644 --- a/lib/ReactViews/Map/MenuBar.jsx +++ b/lib/ReactViews/Map/MenuBar/MenuBar.jsx @@ -3,17 +3,17 @@ import styled from "styled-components"; import PropTypes from "prop-types"; import classNames from "classnames"; -import SettingPanel from "./Panels/SettingPanel"; -import SharePanel from "./Panels/SharePanel/SharePanel"; -import ToolsPanel from "./Panels/ToolsPanel/ToolsPanel"; +import SettingPanel from "../Panels/SettingPanel"; +import SharePanel from "../Panels/SharePanel/SharePanel"; +import ToolsPanel from "../Panels/ToolsPanel/ToolsPanel"; import StoryButton from "./StoryButton/StoryButton"; -import LangPanel from "./Panels/LangPanel/LangPanel"; +import LangPanel from "../Panels/LangPanel/LangPanel"; import Styles from "./menu-bar.scss"; import { runInAction } from "mobx"; import { observer } from "mobx-react"; -import withControlledVisibility from "../../ReactViews/HOCs/withControlledVisibility"; +import withControlledVisibility from "../../HOCs/withControlledVisibility"; import HelpButton from "./HelpButton/HelpButton"; const StyledMenuBar = styled.div` @@ -117,7 +117,6 @@ MenuBar.displayName = "MenuBar"; MenuBar.propTypes = { terria: PropTypes.object, viewState: PropTypes.object.isRequired, - allBaseMaps: PropTypes.array, // Not implemented yet animationDuration: PropTypes.number, menuItems: PropTypes.arrayOf(PropTypes.element), menuLeftItems: PropTypes.arrayOf(PropTypes.element) diff --git a/lib/ReactViews/Map/StoryButton/StoryButton.tsx b/lib/ReactViews/Map/MenuBar/StoryButton/StoryButton.tsx similarity index 88% rename from lib/ReactViews/Map/StoryButton/StoryButton.tsx rename to lib/ReactViews/Map/MenuBar/StoryButton/StoryButton.tsx index 2f9e2713f80..3be439d76b5 100644 --- a/lib/ReactViews/Map/StoryButton/StoryButton.tsx +++ b/lib/ReactViews/Map/MenuBar/StoryButton/StoryButton.tsx @@ -2,13 +2,13 @@ import React, { Ref } from "react"; import { Trans, useTranslation } from "react-i18next"; import { DefaultTheme } from "styled-components"; -import triggerResize from "../../../Core/triggerResize"; -import Terria from "../../../Models/Terria"; -import ViewState from "../../../ReactViewModels/ViewState"; -import Icon from "../../../Styled/Icon"; -import Text from "../../../Styled/Text"; -import Prompt from "../../Generic/Prompt"; -import { useRefForTerria } from "../../Hooks/useRefForTerria"; +import triggerResize from "../../../../Core/triggerResize"; +import Terria from "../../../../Models/Terria"; +import ViewState from "../../../../ReactViewModels/ViewState"; +import Icon from "../../../../Styled/Icon"; +import Text from "../../../../Styled/Text"; +import Prompt from "../../../Generic/Prompt"; +import { useRefForTerria } from "../../../Hooks/useRefForTerria"; import Styles from "./story-button.scss"; diff --git a/lib/ReactViews/Map/MenuBar/StoryButton/story-button.scss b/lib/ReactViews/Map/MenuBar/StoryButton/story-button.scss new file mode 100644 index 00000000000..b3aa3dad359 --- /dev/null +++ b/lib/ReactViews/Map/MenuBar/StoryButton/story-button.scss @@ -0,0 +1,13 @@ +@import "~terriajs-variables"; + +.storyBtn { + composes: btn from "../../../../Sass/common/_buttons.scss"; + composes: btn--map from "../../../../Sass/common/_buttons.scss"; + + &:hover, + &:focus { + svg { + fill: #ffffff; + } + } +} diff --git a/lib/ReactViews/Map/StoryButton/story-button.scss.d.ts b/lib/ReactViews/Map/MenuBar/StoryButton/story-button.scss.d.ts similarity index 100% rename from lib/ReactViews/Map/StoryButton/story-button.scss.d.ts rename to lib/ReactViews/Map/MenuBar/StoryButton/story-button.scss.d.ts diff --git a/lib/ReactViews/Map/menu-bar.scss b/lib/ReactViews/Map/MenuBar/menu-bar.scss similarity index 83% rename from lib/ReactViews/Map/menu-bar.scss rename to lib/ReactViews/Map/MenuBar/menu-bar.scss index 97656d4e0df..0508b8c6abc 100644 --- a/lib/ReactViews/Map/menu-bar.scss +++ b/lib/ReactViews/Map/MenuBar/menu-bar.scss @@ -22,9 +22,9 @@ margin-left: 165px; } .menu { - composes: list-reset from "../../Sass/common/_base.scss"; - composes: clearfix from "../../Sass/common/_base.scss"; - composes: sm-show from "../../Sass/common/_base.scss"; + composes: list-reset from "../../../Sass/common/_base.scss"; + composes: clearfix from "../../../Sass/common/_base.scss"; + composes: sm-show from "../../../Sass/common/_base.scss"; margin: 0 $padding-small $padding-small $padding-small; @@ -75,11 +75,11 @@ } .flex { - composes: flex from "../../Sass/common/_base.scss"; + composes: flex from "../../../Sass/common/_base.scss"; } .langBtn { - composes: btn from "../../Sass/common/_buttons.scss"; - composes: btn--map from "../../Sass/common/_buttons.scss"; + composes: btn from "../../../Sass/common/_buttons.scss"; + composes: btn--map from "../../../Sass/common/_buttons.scss"; text-transform: uppercase; } diff --git a/lib/ReactViews/Map/menu-bar.scss.d.ts b/lib/ReactViews/Map/MenuBar/menu-bar.scss.d.ts similarity index 100% rename from lib/ReactViews/Map/menu-bar.scss.d.ts rename to lib/ReactViews/Map/MenuBar/menu-bar.scss.d.ts diff --git a/lib/ReactViews/Map/Navigation/FullScreenButton.jsx b/lib/ReactViews/Map/Navigation/FullScreenButton.jsx deleted file mode 100644 index 36b8f1ec15a..00000000000 --- a/lib/ReactViews/Map/Navigation/FullScreenButton.jsx +++ /dev/null @@ -1,60 +0,0 @@ -"use strict"; -const React = require("react"); -const createReactClass = require("create-react-class"); -const PropTypes = require("prop-types"); -import Styles from "./full_screen_button.scss"; -import classNames from "classnames"; -import Icon from "../../../Styled/Icon"; - -// The button to make the map full screen and hide the workbench. -const FullScreenButton = createReactClass({ - displayName: "FullScreenButton", - - propTypes: { - terria: PropTypes.object, - viewState: PropTypes.object.isRequired, - animationDuration: PropTypes.number // Defaults to 1 millisecond. - }, - - getInitialState() { - return { - isActive: false - }; - }, - - toggleFullScreen() { - this.props.viewState.setIsMapFullScreen( - !this.props.viewState.isMapFullScreen - ); - }, - - renderButtonText() { - if (this.props.viewState.isMapFullScreen) { - return Show Workbench; - } else { - return ; - } - }, - - render() { - const btnClassName = classNames(Styles.btn, { - [Styles.isActive]: this.props.viewState.isMapFullScreen - }); - const btnTitle = this.props.viewState.isMapFullScreen - ? "Show workbench" - : "Hide workbench"; - return ( -
- -
- ); - } -}); -module.exports = FullScreenButton; diff --git a/lib/ReactViews/Map/Panels/HelpPanel/HelpPanel.jsx b/lib/ReactViews/Map/Panels/HelpPanel/HelpPanel.jsx index a4ce63e81d9..bb774a57d4f 100644 --- a/lib/ReactViews/Map/Panels/HelpPanel/HelpPanel.jsx +++ b/lib/ReactViews/Map/Panels/HelpPanel/HelpPanel.jsx @@ -14,7 +14,7 @@ import Icon, { StyledIcon } from "../../../../Styled/Icon"; import Spacing from "../../../../Styled/Spacing"; import Text from "../../../../Styled/Text"; import parseCustomMarkdownToReact from "../../../Custom/parseCustomMarkdownToReact"; -import { withViewState } from "../../../StandardUserInterface/ViewStateContext"; +import { withViewState } from "../../../Context"; import HelpPanelItem from "./HelpPanelItem"; export const HELP_PANEL_ID = "help"; diff --git a/lib/ReactViews/Map/Panels/HelpPanel/HelpPanelItem.jsx b/lib/ReactViews/Map/Panels/HelpPanel/HelpPanelItem.jsx index 42bd18c6841..d4086330207 100644 --- a/lib/ReactViews/Map/Panels/HelpPanel/HelpPanelItem.jsx +++ b/lib/ReactViews/Map/Panels/HelpPanel/HelpPanelItem.jsx @@ -10,7 +10,7 @@ import { import { isJsonString } from "../../../../Core/Json"; import Icon, { StyledIcon } from "../../../../Styled/Icon"; import Text from "../../../../Styled/Text"; -import { applyTranslationIfExists } from "./../../../../Language/languageHelpers"; +import { applyTranslationIfExists } from "../../../../Language/languageHelpers"; import HelpVideoPanel from "./HelpVideoPanel"; @observer diff --git a/lib/ReactViews/Map/Panels/LangPanel/LangPanel.tsx b/lib/ReactViews/Map/Panels/LangPanel/LangPanel.tsx index f05b81a990d..2ad49bc15b8 100644 --- a/lib/ReactViews/Map/Panels/LangPanel/LangPanel.tsx +++ b/lib/ReactViews/Map/Panels/LangPanel/LangPanel.tsx @@ -6,7 +6,7 @@ import { RawButton } from "../../../../Styled/Button"; import Icon from "../../../../Styled/Icon"; import Ul, { Li } from "../../../../Styled/List"; import MenuPanel from "../../../StandardUserInterface/customizable/MenuPanel"; -import Styles from "../../menu-bar.scss"; +import Styles from "../../MenuBar/menu-bar.scss"; const stripLangLocale = (lang: string = ""): string => lang.split("-")[0]; diff --git a/lib/ReactViews/Map/Panels/SharePanel/Print/PrintView.tsx b/lib/ReactViews/Map/Panels/SharePanel/Print/PrintView.tsx index 3beb8fa44d5..4507a17913e 100644 --- a/lib/ReactViews/Map/Panels/SharePanel/Print/PrintView.tsx +++ b/lib/ReactViews/Map/Panels/SharePanel/Print/PrintView.tsx @@ -2,9 +2,9 @@ import DOMPurify from "dompurify"; import React, { useEffect, useRef, useState } from "react"; import ReactDOM from "react-dom"; import { StyleSheetManager, ThemeProvider } from "styled-components"; -import { terriaTheme } from "../../../../StandardUserInterface/StandardTheme"; -import { useViewState } from "../../../../StandardUserInterface/ViewStateContext"; -import DistanceLegend from "../../../Legend/DistanceLegend"; +import { terriaTheme } from "../../../../StandardUserInterface"; +import { useViewState } from "../../../../Context"; +import { DistanceLegend } from "../../../BottomBar/DistanceLegend"; import { buildShareLink, buildShortShareLink, @@ -72,10 +72,19 @@ const styles = ` padding: 5px; } + .tjs-legend__distanceLegend > label { + color: black; + } + + .tjs-legend__distanceLegend:hover { + background: #fff; + } + .tjs-legend__bar { border-bottom: 3px solid black; border-right: 3px solid black; border-left: 3px solid black; + margin: 0 auto; } body { @@ -174,7 +183,6 @@ const PrintView = (props: Props) => { {screenshot ? ( 0 ? rawPercentage : 100 - ); - - this.setState({ - percentage: sanitisedPercentage - }); - }, - - setMode(loading) { - this.setState({ loading: loading }); - }, - - componentWillUnmount() { - this.eventHelper.removeAll(); - }, - - /** - * Progress bar is influced by two loading states: - * The base globe where the progress bar shows actual progress, - * Sources where load progress is indeterminate including 3DTilesets where the progress bar is animated. - */ - render() { - const determinateProgress = this.state.percentage + "%"; - const indeterminateStillLoading = this.state.loading; - const allComplete = this.state.percentage === 100 && !this.state.loading; - - // use the baseMapContrastColor to ensure progress bar is visible on light backgrounds. If contrast color is white, use it. If its black, use the primary color of the current theme. - const backgroundColor = - this.props.viewState.terria.baseMapContrastColor === "#ffffff" - ? "#ffffff" - : this.props.theme.colorPrimary; - - return ( -
- ); - } - }) -); - -export default withViewState(withTheme(ProgressBar)); diff --git a/lib/ReactViews/Map/ProgressBar.tsx b/lib/ReactViews/Map/ProgressBar.tsx new file mode 100644 index 00000000000..a35f3f30a5f --- /dev/null +++ b/lib/ReactViews/Map/ProgressBar.tsx @@ -0,0 +1,90 @@ +import React, { VFC, useCallback, useEffect, useMemo, useState } from "react"; +import styled, { keyframes, useTheme } from "styled-components"; +import EventHelper from "terriajs-cesium/Source/Core/EventHelper"; +import { useViewState } from "../Context"; + +export const ProgressBar: VFC = () => { + const [loadPercentage, setLoadPercentage] = useState(0); + const [indeterminateLoading, setIndeterminateLoading] = useState(); + + const theme = useTheme(); + const { terria } = useViewState(); + + const setProgress = useCallback((remaining: number, max: number) => { + const rawPercentage = (1 - remaining / max) * 100; + const sanitisedPercentage = Math.floor(remaining > 0 ? rawPercentage : 100); + setLoadPercentage(sanitisedPercentage); + }, []); + + const setMode = (mode: any) => { + setIndeterminateLoading(mode); + }; + + useEffect(() => { + const eventHelper = new EventHelper(); + + eventHelper.add(terria.tileLoadProgressEvent, setProgress); + + eventHelper.add(terria.indeterminateTileLoadProgressEvent, setMode); + + return () => { + eventHelper.removeAll(); + }; + }, []); + + const backgroundColor = useMemo( + () => + terria.baseMapContrastColor === "#ffffff" + ? "#ffffff" + : theme.colorPrimary, + [] + ); + + const allComplete = loadPercentage === 100 && !indeterminateLoading; + + return ( + + ); +}; + +interface IStyledProgressBarProps { + loadPercentage: string; + complete: boolean; + indeterminate: boolean; + backgroundColor: string; +} + +const StyledProgressBar = styled.div` + height: 5px; + overflow: hidden; + transition: opacity 200ms linear, width 200ms linear, visibility 400ms linear; + background-color: ${props => props.backgroundColor}; + width: ${props => props.loadPercentage}; + + ${props => props.complete && `visibility: hidden;`} + + ${props => + props.indeterminate && + ` + width: 100%; + animation: ${indeterminateAnimation} 1.2s infinite linear; + transform-origin: 0% 50%; + `} +`; + +const indeterminateAnimation = keyframes` + 0% { + transform: translateX(0) scaleX(0); + } + 40% { + transform: translateX(0) scaleX(0.4); + } + 100% { + transform: translateX(100%) scaleX(0.5); + } +}`; diff --git a/lib/ReactViews/Map/Splitter.jsx b/lib/ReactViews/Map/Splitter.jsx deleted file mode 100644 index caf89e9b71d..00000000000 --- a/lib/ReactViews/Map/Splitter.jsx +++ /dev/null @@ -1,230 +0,0 @@ -import React from "react"; -import createReactClass from "create-react-class"; -import PropTypes from "prop-types"; -import { withTranslation } from "react-i18next"; -import { GLYPHS, StyledIcon } from "../../Styled/Icon"; -import Styles from "./splitter.scss"; -import { observer } from "mobx-react"; -import { runInAction } from "mobx"; - -// Feature detect support for passive: true in event subscriptions. -// See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support -let passiveSupported = false; -try { - const options = Object.defineProperty({}, "passive", { - get: function() { - passiveSupported = true; - return true; - } - }); - - window.addEventListener("test", null, options); - window.removeEventListener("test", null, options); -} catch (err) {} - -const notPassive = passiveSupported ? { passive: false } : false; - -const Splitter = observer( - createReactClass({ - displayName: "Splitter", - - propTypes: { - terria: PropTypes.object.isRequired, - viewState: PropTypes.object.isRequired, - thumbSize: PropTypes.number, - padding: PropTypes.number, - t: PropTypes.func.isRequired - }, - - getDefaultProps() { - return { - thumbSize: 42, - padding: 0 - }; - }, - - componentDidMount() { - const that = this; - window.addEventListener("resize", function() { - that.forceRefresh(); - }); - }, - - componentWillUnmount() { - this.unsubscribe(); - }, - - forceRefresh() { - const smallChange = - this.props.terria.splitPosition < 0.5 ? 0.0001 : -0.0001; // Make sure never <0 or >1. - runInAction(() => { - this.props.terria.splitPosition += smallChange; - }); - }, - - startDrag(event) { - const viewer = this.props.terria.currentViewer; - viewer.pauseMapInteraction(); - - // While dragging is in progress, subscribe to document-level movement and up events. - document.addEventListener("mousemove", this.drag, notPassive); - document.addEventListener("touchmove", this.drag, notPassive); - document.addEventListener("mouseup", this.stopDrag, notPassive); - document.addEventListener("touchend", this.stopDrag, notPassive); - - event.preventDefault(); - event.stopPropagation(); - }, - - drag(event) { - let clientX = event.clientX; - let clientY = event.clientY; - if (event.targetTouches && event.targetTouches.length > 0) { - clientX = event.targetTouches.item(0).clientX; - clientY = event.targetTouches.item(0).clientY; - } - - const viewer = this.props.terria.mainViewer.currentViewer; - const container = viewer.getContainer(); - const mapRect = container.getBoundingClientRect(); - - const that = this; - function computeSplitFraction(startBound, endBound, position) { - const difference = endBound - startBound; - const fraction = (position - startBound) / difference; - - const min = - startBound + that.props.padding + that.props.thumbSize * 0.5; - const max = endBound - that.props.padding - that.props.thumbSize * 0.5; - const minFraction = (min - startBound) / difference; - const maxFraction = (max - startBound) / difference; - - return Math.min(maxFraction, Math.max(minFraction, fraction)); - } - let splitFractionX = computeSplitFraction( - mapRect.left, - mapRect.right, - clientX - ); - let splitFractionY = computeSplitFraction( - mapRect.top, - mapRect.bottom, - clientY - ); - - // We compute the maximum and minium windows bounds as a percentage so that we can always apply the bounds - // restriction as a percentage for consistency (we currently use absolute values for X and percentage values for - // Y, but always apply the constraint as a percentage). - // We use absolute pixel values for horizontal restriction because of the fixed UI elements which occupy an - // absolute amount of screen relestate and 100 px seems like a fine amount for the current UI. - const minX = computeSplitFraction( - mapRect.left, - mapRect.right, - mapRect.left + 100 - ); - const maxX = computeSplitFraction( - mapRect.left, - mapRect.right, - mapRect.right - 100 - ); - // Resctrict to within +/-30% of the center vertically (so we don't run into the top and bottom UI elements). - const minY = 0.2; - const maxY = 0.8; - - splitFractionX = Math.min(maxX, Math.max(minX, splitFractionX)); - splitFractionY = Math.min(maxY, Math.max(minY, splitFractionY)); - - runInAction(() => { - this.props.terria.splitPosition = splitFractionX; - this.props.terria.splitPositionVertical = splitFractionY; - }); - - event.preventDefault(); - event.stopPropagation(); - }, - - stopDrag(event) { - this.unsubscribe(); - - const viewer = this.props.terria.currentViewer; - // Ensure splitter stays in sync with map - this.props.viewState.triggerResizeEvent(); - - viewer.resumeMapInteraction(); - - event.preventDefault(); - event.stopPropagation(); - }, - - unsubscribe() { - document.removeEventListener("mousemove", this.drag, notPassive); - document.removeEventListener("touchmove", this.drag, notPassive); - document.removeEventListener("mouseup", this.stopDrag, notPassive); - document.removeEventListener("touchend", this.stopDrag, notPassive); - window.removeEventListener("resize", this.forceRefresh); - }, - - getPosition() { - const canvasWidth = this.props.terria.currentViewer.getContainer() - .clientWidth; - const canvasHeight = this.props.terria.currentViewer.getContainer() - .clientHeight; - return { - x: this.props.terria.splitPosition * canvasWidth, - y: this.props.terria.splitPositionVertical * canvasHeight - }; - }, - - render() { - if ( - !this.props.terria.showSplitter || - !this.props.terria.currentViewer.canShowSplitter || - !this.props.terria.currentViewer.getContainer() - ) { - return null; - } - - const thumbWidth = this.props.thumbSize; - const position = this.getPosition(); - - const dividerStyle = { - left: position.x + "px", - backgroundColor: this.props.terria.baseMapContrastColor - }; - - const thumbStyle = { - left: position.x + "px", - top: position.y + "px", - width: thumbWidth + "px", - height: thumbWidth + "px", - marginLeft: "-" + thumbWidth * 0.5 + "px", - marginTop: "-" + thumbWidth * 0.5 + "px", - lineHeight: thumbWidth - 2 + "px", - borderRadius: thumbWidth * 0.5 + "px", - fontSize: thumbWidth - 12 + "px" - }; - - const { t } = this.props; - - return ( -
-
-
-
- -
- ); - } - }) -); - -module.exports = withTranslation()(Splitter); diff --git a/lib/ReactViews/Map/StoryButton/story-button.scss b/lib/ReactViews/Map/StoryButton/story-button.scss deleted file mode 100644 index 51c17ff0a88..00000000000 --- a/lib/ReactViews/Map/StoryButton/story-button.scss +++ /dev/null @@ -1,13 +0,0 @@ -@import "~terriajs-variables"; - -.storyBtn { - composes: btn from "../../../Sass/common/_buttons.scss"; - composes: btn--map from "../../../Sass/common/_buttons.scss"; - - &:hover, - &:focus { - svg { - fill: #ffffff; - } - } -} diff --git a/lib/ReactViews/Map/TerriaViewerWrapper.jsx b/lib/ReactViews/Map/TerriaViewerWrapper.jsx deleted file mode 100644 index 06888dab80d..00000000000 --- a/lib/ReactViews/Map/TerriaViewerWrapper.jsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from "react"; -import PropTypes from "prop-types"; -import { observer } from "mobx-react"; - -import Styles from "./terria-viewer-wrapper.scss"; - -import Splitter from "./Splitter"; -// eslint-disable-next-line no-unused-vars -import TerriaViewer from "../../ViewModels/TerriaViewer"; - -/** - * @typedef {object} Props - * @prop {Terria} terria - * @prop {ViewState} viewState - * - * @extends {React.Component} - */ -@observer -class TerriaViewerWrapper extends React.Component { - static propTypes = { - terria: PropTypes.object.isRequired, - viewState: PropTypes.object.isRequired - }; - - /** - * @argument {HTMLDivElement} container - */ - containerRef = container => { - this.props.terria.mainViewer.attached && - this.props.terria.mainViewer.detach(); - if (container !== null) { - this.props.terria.mainViewer.attach(container); - } - }; - - componentWillUnmount() { - this.props.terria.mainViewer.attached && - this.props.terria.mainViewer.detach(); - } - - render() { - return ( - - ); - } -} -module.exports = TerriaViewerWrapper; diff --git a/lib/ReactViews/Map/TerriaViewerWrapper/Splitter/Splitter.tsx b/lib/ReactViews/Map/TerriaViewerWrapper/Splitter/Splitter.tsx new file mode 100644 index 00000000000..2865d8a4543 --- /dev/null +++ b/lib/ReactViews/Map/TerriaViewerWrapper/Splitter/Splitter.tsx @@ -0,0 +1,102 @@ +import { runInAction } from "mobx"; +import { observer } from "mobx-react"; +import React, { FC, useCallback, useEffect } from "react"; +import { useTranslation } from "react-i18next"; +import { useTheme } from "styled-components"; +import Terria from "../../../../Models/Terria"; +import { GLYPHS, StyledIcon } from "../../../../Styled/Icon"; +import { useViewState } from "../../../Context"; +import { useDragHook } from "./dragHook"; + +interface ISplitterProps { + thumbSize?: number; + padding?: number; +} + +export const Splitter: FC = observer( + ({ thumbSize = 42, padding = 0 }) => { + const viewState = useViewState(); + const theme = useTheme(); + const { t } = useTranslation(); + + const { startDrag, dragUnsubscribe } = useDragHook( + viewState, + padding, + thumbSize + ); + + const onResize = useCallback(() => { + const smallChange = + viewState.terria.splitPosition < 0.5 ? 0.0001 : -0.0001; // Make sure never <0 or >1. + runInAction(() => { + viewState.terria.splitPosition += smallChange; + }); + }, [viewState]); + + useEffect(() => { + window.addEventListener("resize", onResize); + return () => { + dragUnsubscribe(); + window.removeEventListener("resize", onResize); + }; + }, [onResize, dragUnsubscribe]); + + if ( + !viewState.terria.showSplitter || + !viewState.terria.currentViewer.canShowSplitter || + !viewState.terria.currentViewer.getContainer() + ) { + return null; + } + + const position = getPosition(viewState.terria); + + return ( +
+
+
+
+ +
+ ); + } +); + +const getPosition = (terria: Terria) => { + const canvasWidth = terria.currentViewer.getContainer()?.clientWidth || 0; + const canvasHeight = terria.currentViewer.getContainer()?.clientHeight || 0; + return { + x: terria.splitPosition * canvasWidth, + y: terria.splitPositionVertical * canvasHeight + }; +}; diff --git a/lib/ReactViews/Map/TerriaViewerWrapper/Splitter/dragHook.ts b/lib/ReactViews/Map/TerriaViewerWrapper/Splitter/dragHook.ts new file mode 100644 index 00000000000..69ee2a8a607 --- /dev/null +++ b/lib/ReactViews/Map/TerriaViewerWrapper/Splitter/dragHook.ts @@ -0,0 +1,166 @@ +import { runInAction } from "mobx"; +import { + MouseEvent as ReactMouseEvent, + TouchEvent as ReactTouchEvent, + useCallback +} from "react"; +import ViewState from "../../../../ReactViewModels/ViewState"; + +// Feature detect support for passive: true in event subscriptions. +// See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support +let passiveSupported = false; +try { + const options = Object.defineProperty({}, "passive", { + get: function() { + passiveSupported = true; + return true; + } + }); + + const callback = () => { + return null; + }; + + window.addEventListener("test", callback, options); + window.removeEventListener("test", callback, options); +} catch (err) {} + +const notPassive = passiveSupported ? { passive: false } : false; + +export const useDragHook = ( + viewState: ViewState, + padding: number, + thumbSize: number +) => { + const drag = useCallback( + (e: MouseEvent | TouchEvent) => { + let clientX: number | undefined = undefined; + let clientY: number | undefined = undefined; + if (e instanceof MouseEvent) { + clientX = e.clientX; + clientY = e.clientY; + } else { + if (e.targetTouches && e.targetTouches.length > 0) { + clientX = e.targetTouches.item(0)?.clientX; + clientY = e.targetTouches.item(0)?.clientY; + } + } + if (!clientX || !clientY) return; + + const viewer = viewState.terria.mainViewer.currentViewer; + const container = viewer.getContainer(); + const mapRect = container?.getBoundingClientRect(); + if (!mapRect) return; + + let splitFractionX = computeSplitFraction( + mapRect.left, + mapRect.right, + clientX, + padding, + thumbSize + ); + let splitFractionY = computeSplitFraction( + mapRect.top, + mapRect.bottom, + clientY, + padding, + thumbSize + ); + + // We compute the maximum and minium windows bounds as a percentage so that we can always apply the bounds + // restriction as a percentage for consistency (we currently use absolute values for X and percentage values for + // Y, but always apply the constraint as a percentage). + // We use absolute pixel values for horizontal restriction because of the fixed UI elements which occupy an + // absolute amount of screen relestate and 100 px seems like a fine amount for the current UI. + const minX = computeSplitFraction( + mapRect.left, + mapRect.right, + mapRect.left + 100, + padding, + thumbSize + ); + const maxX = computeSplitFraction( + mapRect.left, + mapRect.right, + mapRect.right - 100, + padding, + thumbSize + ); + // Resctrict to within +/-30% of the center vertically (so we don't run into the top and bottom UI elements). + const minY = 0.2; + const maxY = 0.8; + + splitFractionX = Math.min(maxX, Math.max(minX, splitFractionX)); + splitFractionY = Math.min(maxY, Math.max(minY, splitFractionY)); + + runInAction(() => { + viewState.terria.splitPosition = splitFractionX; + viewState.terria.splitPositionVertical = splitFractionY; + }); + + e.preventDefault(); + e.stopPropagation(); + }, + [viewState] + ); + + const stopDrag = useCallback( + (e: Event) => { + dragUnsubscribe(); + + const viewer = viewState.terria.currentViewer; + // Ensure splitter stays in sync with map + viewState.triggerResizeEvent(); + + viewer.resumeMapInteraction(); + + e.preventDefault(); + e.stopPropagation(); + }, + [viewState] + ); + + const startDrag = useCallback( + (e: ReactMouseEvent | ReactTouchEvent | undefined) => { + const viewer = viewState.terria.currentViewer; + viewer.pauseMapInteraction(); + + // While dragging is in progress, subscribe to document-level movement and up events. + document.addEventListener("mousemove", drag, notPassive); + document.addEventListener("touchmove", drag, notPassive); + document.addEventListener("mouseup", stopDrag, notPassive); + document.addEventListener("touchend", stopDrag, notPassive); + + e?.preventDefault(); + e?.stopPropagation(); + }, + [drag, stopDrag, viewState] + ); + + const dragUnsubscribe = useCallback(() => { + document.removeEventListener("mousemove", drag, notPassive as never); + document.removeEventListener("touchmove", drag, notPassive as never); + document.removeEventListener("mouseup", stopDrag, notPassive as never); + document.removeEventListener("touchend", stopDrag, notPassive as never); + }, [drag, stopDrag]); + + return { startDrag, dragUnsubscribe }; +}; + +function computeSplitFraction( + startBound: number, + endBound: number, + position: number, + padding: number, + thumbSize: number +) { + const difference = endBound - startBound; + const fraction = (position - startBound) / difference; + + const min = startBound + padding + thumbSize * 0.5; + const max = endBound - padding - thumbSize * 0.5; + const minFraction = (min - startBound) / difference; + const maxFraction = (max - startBound) / difference; + + return Math.min(maxFraction, Math.max(minFraction, fraction)); +} diff --git a/lib/ReactViews/Map/TerriaViewerWrapper/TerriaViewerWrapper.tsx b/lib/ReactViews/Map/TerriaViewerWrapper/TerriaViewerWrapper.tsx new file mode 100644 index 00000000000..00ad97196fd --- /dev/null +++ b/lib/ReactViews/Map/TerriaViewerWrapper/TerriaViewerWrapper.tsx @@ -0,0 +1,84 @@ +import React, { FC, useEffect, useRef } from "react"; + +import { Splitter } from "./Splitter/Splitter"; +import { useViewState } from "../../Context"; +import styled from "styled-components"; + +export const TerriaViewerWrapper: FC = () => { + const viewState = useViewState(); + const containerRef = useRef(null); + + useEffect(() => { + if (viewState.terria.mainViewer.attached) { + viewState.terria.mainViewer.detach(); + } + if (containerRef.current) { + viewState.terria.mainViewer.attach(containerRef.current); + } + + return () => { + viewState.terria.mainViewer.detach(); + }; + }, [viewState]); + + return ( + + + Loading the map, please wait... + + +
+ + ); +}; + +const TerrriaViewerContainer = styled.aside` + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +`; + +const StyledMapPlaceholder = styled.div` + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + color: black; + text-align: center; + width: 100%; + height: 25%; + margin: auto; + @media (min-width: ${p => p.theme.sm}px) { + color: white; + } +`; diff --git a/lib/ReactViews/Map/TerriaViewerWrapper/index.ts b/lib/ReactViews/Map/TerriaViewerWrapper/index.ts new file mode 100644 index 00000000000..fb3377a1c87 --- /dev/null +++ b/lib/ReactViews/Map/TerriaViewerWrapper/index.ts @@ -0,0 +1 @@ +export { TerriaViewerWrapper } from "./TerriaViewerWrapper"; diff --git a/lib/ReactViews/StandardUserInterface/Toast.tsx b/lib/ReactViews/Map/Toast.tsx similarity index 100% rename from lib/ReactViews/StandardUserInterface/Toast.tsx rename to lib/ReactViews/Map/Toast.tsx diff --git a/lib/ReactViews/Map/experimental-features.scss b/lib/ReactViews/Map/experimental-features.scss deleted file mode 100644 index c9a98d01566..00000000000 --- a/lib/ReactViews/Map/experimental-features.scss +++ /dev/null @@ -1,22 +0,0 @@ -@import "~terriajs-variables"; - -.experimental-features { - position: absolute; - left: 25px; - bottom: 25px; - z-index: 1; - - @media (min-width: $sm) { - top: auto; - bottom: 100px; - } -} - -.control { - margin: 15px 0; - text-align: center; - - &:last-child { - margin-bottom: 0; - } -} diff --git a/lib/ReactViews/Map/experimental-features.scss.d.ts b/lib/ReactViews/Map/experimental-features.scss.d.ts deleted file mode 100644 index d84db085ee8..00000000000 --- a/lib/ReactViews/Map/experimental-features.scss.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -// This file is automatically generated. -// Please do not change this file! -interface CssExports { - 'control': string; - 'experimental-features': string; - 'experimentalFeatures': string; -} -declare var cssExports: CssExports; -export = cssExports; diff --git a/lib/ReactViews/Map/progress-bar.scss b/lib/ReactViews/Map/progress-bar.scss deleted file mode 100644 index 7e05acb098d..00000000000 --- a/lib/ReactViews/Map/progress-bar.scss +++ /dev/null @@ -1,31 +0,0 @@ -.progress-bar { - z-index: 1; - position: absolute; - top: 0; - left: 0; - height: 5px; - overflow: hidden; - transition: opacity 200ms linear, width 200ms linear, visibility 400ms linear; -} - -.complete { - visibility: hidden; -} - -.indeterminate-bar-animated { - width: 100%; - animation: indeterminateAnimation 1.2s infinite linear; - transform-origin: 0% 50%; -} - -@keyframes indeterminateAnimation { - 0% { - transform: translateX(0) scaleX(0); - } - 40% { - transform: translateX(0) scaleX(0.4); - } - 100% { - transform: translateX(100%) scaleX(0.5); - } -} diff --git a/lib/ReactViews/Map/progress-bar.scss.d.ts b/lib/ReactViews/Map/progress-bar.scss.d.ts deleted file mode 100644 index ae6c7a6c853..00000000000 --- a/lib/ReactViews/Map/progress-bar.scss.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -// This file is automatically generated. -// Please do not change this file! -interface CssExports { - 'complete': string; - 'indeterminate-bar-animated': string; - 'indeterminateAnimation': string; - 'indeterminateBarAnimated': string; - 'progress-bar': string; - 'progressBar': string; -} -declare var cssExports: CssExports; -export = cssExports; diff --git a/lib/ReactViews/Map/splitter.scss b/lib/ReactViews/Map/splitter.scss deleted file mode 100644 index 9849d3c22d8..00000000000 --- a/lib/ReactViews/Map/splitter.scss +++ /dev/null @@ -1,42 +0,0 @@ -@import "~terriajs-variables"; - -.divider-wrapper { - position: absolute; - width: 100%; - height: 100%; -} - -.divider { - position: absolute; - top: 0; - bottom: 0; - left: 50%; - width: 1px; - background-color: #fff; - pointer-events: none; - z-index: 999; -} - -.thumb { - position: absolute; - width: 40px; - height: 40px; - border-radius: 20px; - border: 1px solid lightgrey; - text-align: center; - line-height: 38px; - left: 50%; - top: 50%; - font-size: 28px; - font-family: monospace; - background-color: white; - color: grey; - margin-top: -20px; - margin-left: -20px; - z-index: 999; - padding: 8px; - cursor: ew-resize; - svg { - fill: #000; - } -} diff --git a/lib/ReactViews/Map/splitter.scss.d.ts b/lib/ReactViews/Map/splitter.scss.d.ts deleted file mode 100644 index e6984139b8c..00000000000 --- a/lib/ReactViews/Map/splitter.scss.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -// This file is automatically generated. -// Please do not change this file! -interface CssExports { - 'divider': string; - 'divider-wrapper': string; - 'dividerWrapper': string; - 'thumb': string; -} -declare var cssExports: CssExports; -export = cssExports; diff --git a/lib/ReactViews/Map/terria-viewer-wrapper.scss b/lib/ReactViews/Map/terria-viewer-wrapper.scss deleted file mode 100644 index 21961915fee..00000000000 --- a/lib/ReactViews/Map/terria-viewer-wrapper.scss +++ /dev/null @@ -1,57 +0,0 @@ -@import "~terriajs-variables"; -@import "../../Sass/common/mixins"; - -.container { - top: 0; - right: 0; - bottom: 0; - left: 0; - position: absolute; -} - -.cesium-container { - top: 0; - right: 0; - bottom: 0; - left: 0; - position: absolute; - cursor: auto; - - :global { - .selection-indicator { - pointer-events: none; - position: absolute; - width: 50px; - height: 50px; - } - - #terriaLogoWrapper { - display: inline-block; - } - - .cesium-widget, - .cesium-widget canvas { - position: absolute; - width: 100%; - height: 100%; - touch-action: none; - } - } -} - -.mapPlaceholder { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - color: black; - text-align: center; - width: 100%; - height: 25%; - margin: auto; - - @media (min-width: $sm) { - color: white; - } -} diff --git a/lib/ReactViews/Map/terria-viewer-wrapper.scss.d.ts b/lib/ReactViews/Map/terria-viewer-wrapper.scss.d.ts deleted file mode 100644 index 8f5c50b26cb..00000000000 --- a/lib/ReactViews/Map/terria-viewer-wrapper.scss.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -// This file is automatically generated. -// Please do not change this file! -interface CssExports { - 'cesium-container': string; - 'cesiumContainer': string; - 'container': string; - 'mapPlaceholder': string; -} -declare var cssExports: CssExports; -export = cssExports; diff --git a/lib/ReactViews/Mobile/MobileHeader.jsx b/lib/ReactViews/Mobile/MobileHeader.jsx index b6cdc37dd35..78544200602 100644 --- a/lib/ReactViews/Mobile/MobileHeader.jsx +++ b/lib/ReactViews/Mobile/MobileHeader.jsx @@ -11,7 +11,7 @@ import { RawButton } from "../../Styled/Button"; import Icon, { StyledIcon } from "../../Styled/Icon"; import SearchBox from "../Search/SearchBox"; import Branding from "../SidePanel/Branding"; -import { withViewState } from "../StandardUserInterface/ViewStateContext"; +import { withViewState } from "../Context"; import Styles from "./mobile-header.scss"; import MobileMenu from "./MobileMenu"; import MobileModalWindow from "./MobileModalWindow"; @@ -259,7 +259,6 @@ class MobileHeader extends React.Component { menuItems={this.props.menuItems} menuLeftItems={this.props.menuLeftItems} viewState={this.props.viewState} - allBaseMaps={this.props.allBaseMaps} terria={this.props.viewState.terria} showFeedback={ !!this.props.viewState.terria.configParameters.feedbackUrl @@ -299,7 +298,6 @@ const HamburgerButton = styled(RawButton)` MobileHeader.propTypes = { viewState: PropTypes.object.isRequired, - allBaseMaps: PropTypes.array, version: PropTypes.string, menuLeftItems: PropTypes.array, menuItems: PropTypes.array, diff --git a/lib/ReactViews/Mobile/MobileMenu.jsx b/lib/ReactViews/Mobile/MobileMenu.jsx index 4181ce1a572..95a4f6b12b8 100644 --- a/lib/ReactViews/Mobile/MobileMenu.jsx +++ b/lib/ReactViews/Mobile/MobileMenu.jsx @@ -29,7 +29,6 @@ const MobileMenu = observer( showFeedback: PropTypes.bool, terria: PropTypes.object.isRequired, i18n: PropTypes.object, - allBaseMaps: PropTypes.array.isRequired, t: PropTypes.func.isRequired }, diff --git a/lib/ReactViews/Notification/MapInteractionWindow.tsx b/lib/ReactViews/Notification/MapInteractionWindow.tsx index 96881c44ef9..3fa89412f81 100644 --- a/lib/ReactViews/Notification/MapInteractionWindow.tsx +++ b/lib/ReactViews/Notification/MapInteractionWindow.tsx @@ -10,7 +10,7 @@ import isDefined from "../../Core/isDefined"; import MapInteractionMode, { UIMode } from "../../Models/MapInteractionMode"; import ViewState from "../../ReactViewModels/ViewState"; import parseCustomHtmlToReact from "../Custom/parseCustomHtmlToReact"; -import { withViewState } from "../StandardUserInterface/ViewStateContext"; +import { withViewState } from "../Context"; import Styles from "./map-interaction-window.scss"; const MapInteractionWindowWrapper = styled.div<{ isDiffTool: boolean }>` diff --git a/lib/ReactViews/Notification/Notification.tsx b/lib/ReactViews/Notification/Notification.tsx index bf33f2c27b3..4b7e597d1bc 100644 --- a/lib/ReactViews/Notification/Notification.tsx +++ b/lib/ReactViews/Notification/Notification.tsx @@ -1,7 +1,7 @@ import { observer } from "mobx-react"; import React from "react"; import triggerResize from "../../Core/triggerResize"; -import { useViewState } from "../StandardUserInterface/ViewStateContext"; +import { useViewState } from "../Context"; // Avoid type error caused by importing untyped jsx const NotificationWindow = require("./NotificationWindow").default; diff --git a/lib/ReactViews/SidePanel/Branding.tsx b/lib/ReactViews/SidePanel/Branding.tsx index 0a975a2e615..8b9d4b93a9c 100644 --- a/lib/ReactViews/SidePanel/Branding.tsx +++ b/lib/ReactViews/SidePanel/Branding.tsx @@ -4,7 +4,7 @@ import React from "react"; import isDefined from "../../Core/isDefined"; import ViewState from "../../ReactViewModels/ViewState"; import parseCustomHtmlToReact from "../Custom/parseCustomHtmlToReact"; -import { withViewState } from "../StandardUserInterface/ViewStateContext"; +import { withViewState } from "../Context"; const DEFAULT_BRANDING = ''; diff --git a/lib/ReactViews/SidePanel/FullScreenButton.jsx b/lib/ReactViews/SidePanel/FullScreenButton.jsx index 91fb9427a08..55273d9d57d 100644 --- a/lib/ReactViews/SidePanel/FullScreenButton.jsx +++ b/lib/ReactViews/SidePanel/FullScreenButton.jsx @@ -8,7 +8,7 @@ import { withTranslation } from "react-i18next"; import { Category, ViewAction } from "../../Core/AnalyticEvents/analyticEvents"; import Icon from "../../Styled/Icon"; import withControlledVisibility from "../HOCs/withControlledVisibility"; -import { withViewState } from "../StandardUserInterface/ViewStateContext"; +import { withViewState } from "../Context"; import Styles from "./full_screen_button.scss"; // The button to make the map full screen and hide the workbench. diff --git a/lib/ReactViews/SidePanel/SidePanel.tsx b/lib/ReactViews/SidePanel/SidePanel.tsx index 7e326274167..96917be2a1c 100644 --- a/lib/ReactViews/SidePanel/SidePanel.tsx +++ b/lib/ReactViews/SidePanel/SidePanel.tsx @@ -11,17 +11,21 @@ import Text from "../../Styled/Text"; import { ExplorerWindowElementName } from "../ExplorerWindow/ExplorerWindow"; import { useRefForTerria } from "../Hooks/useRefForTerria"; import SearchBoxAndResults from "../Search/SearchBoxAndResults"; -import { withViewState } from "../StandardUserInterface/ViewStateContext"; +import { withViewState } from "../Context"; import Workbench from "../Workbench/Workbench"; const BoxHelpfulHints = styled(Box)``; const ResponsiveSpacing = styled(Box)` + height: 110px; height: 110px; // Hardcoded px value, TODO: make it not hardcoded @media (max-height: 700px) { height: 3vh; } + @media (max-height: 700px) { + height: 3vh; + } `; const HelpfulHintsIcon = () => { diff --git a/lib/ReactViews/Map/ExperimentalFeatures.tsx b/lib/ReactViews/StandardUserInterface/ExperimentalFeatures.tsx similarity index 91% rename from lib/ReactViews/Map/ExperimentalFeatures.tsx rename to lib/ReactViews/StandardUserInterface/ExperimentalFeatures.tsx index 1f4beec8aed..55ec911cd8f 100644 --- a/lib/ReactViews/Map/ExperimentalFeatures.tsx +++ b/lib/ReactViews/StandardUserInterface/ExperimentalFeatures.tsx @@ -1,7 +1,7 @@ import React from "react"; import styled from "styled-components"; import ViewState from "../../ReactViewModels/ViewState"; -import { withViewState } from "../StandardUserInterface/ViewStateContext"; +import { withViewState } from "../Context"; interface IProps { viewState: ViewState; @@ -13,7 +13,6 @@ const ControlsWrapper = styled.div` left: 25px; bottom: 25px; z-index: 1; - @media (min-width: ${props => props.theme.sm}px) { top: auto; bottom: 100px; @@ -22,7 +21,6 @@ const ControlsWrapper = styled.div` const Control = styled.div` margin: 15px 0; text-align: center; - &:last-child { margin-bottom: 0; } diff --git a/lib/ReactViews/StandardUserInterface/GlobalTerriaStyles.ts b/lib/ReactViews/StandardUserInterface/GlobalTerriaStyles.ts index 18cf6d79dae..6d65b5a65db 100644 --- a/lib/ReactViews/StandardUserInterface/GlobalTerriaStyles.ts +++ b/lib/ReactViews/StandardUserInterface/GlobalTerriaStyles.ts @@ -67,4 +67,19 @@ body { button { cursor: pointer; } + +.selection-indicator { + pointer-events: none; + position: absolute; + width: 50px; + height: 50px; +} + +.cesium-widget, +.cesium-widget canvas { + position: absolute; + width: 100%; + height: 100%; + touch-action: none; +} `; diff --git a/lib/ReactViews/StandardUserInterface/MapColumn.jsx b/lib/ReactViews/StandardUserInterface/MapColumn.jsx deleted file mode 100644 index 037a2b31bbe..00000000000 --- a/lib/ReactViews/StandardUserInterface/MapColumn.jsx +++ /dev/null @@ -1,219 +0,0 @@ -import classNames from "classnames"; -import createReactClass from "create-react-class"; -import { observer } from "mobx-react"; -import PropTypes from "prop-types"; -import React from "react"; -import { withTranslation } from "react-i18next"; -import FeatureDetection from "terriajs-cesium/Source/Core/FeatureDetection"; -import BottomDock from "../BottomDock/BottomDock"; -import { MapCredits } from "../Credits"; -import Loader from "../Loader"; -import BottomLeftBar from "../Map/BottomLeftBar/BottomLeftBar"; -import DistanceLegend from "../Map/Legend/DistanceLegend"; -import LocationBar from "../Map/Legend/LocationBar"; -import MenuBar from "../Map/MenuBar"; -import MapNavigation from "../Map/Navigation/MapNavigation"; -import TerriaViewerWrapper from "../Map/TerriaViewerWrapper"; -import SlideUpFadeIn from "../Transitions/SlideUpFadeIn/SlideUpFadeIn"; -import Styles from "./map-column.scss"; -import Toast from "./Toast"; -import { withViewState } from "./ViewStateContext"; - -const chromeVersion = FeatureDetection.chromeVersion(); - -/** - * Right-hand column that contains the map, controls that sit over the map and sometimes the bottom dock containing - * the timeline and charts. - */ -const MapColumn = observer( - createReactClass({ - displayName: "MapColumn", - - propTypes: { - viewState: PropTypes.object.isRequired, - customFeedbacks: PropTypes.array.isRequired, - allBaseMaps: PropTypes.array.isRequired, - animationDuration: PropTypes.number.isRequired, - customElements: PropTypes.object.isRequired, - t: PropTypes.func.isRequired - }, - - getInitialState() { - return {}; - }, - - render() { - const { customElements } = this.props; - const { t } = this.props; - // TODO: remove? see: https://bugs.chromium.org/p/chromium/issues/detail?id=1001663 - const isAboveChrome75 = - chromeVersion && chromeVersion[0] && Number(chromeVersion[0]) > 75; - const mapCellClass = classNames(Styles.mapCell, { - [Styles.mapCellChrome]: isAboveChrome75 - }); - return ( -
-
-
- -
- - -
- -
- -
- - - - - - - - -
- - -
- - {/* TODO: re-implement/support custom feedbacks */} - {/* -
- -
- */} - - - -
{feedbackItem}
- - -
- - - -
- -
-
- -
-
- -
- ); - } - }) -); - -export default withTranslation()(withViewState(MapColumn)); diff --git a/lib/ReactViews/StandardUserInterface/SidePanelContainer.tsx b/lib/ReactViews/StandardUserInterface/SidePanelContainer.tsx index 6891012b24e..6d2ba957329 100644 --- a/lib/ReactViews/StandardUserInterface/SidePanelContainer.tsx +++ b/lib/ReactViews/StandardUserInterface/SidePanelContainer.tsx @@ -1,7 +1,7 @@ import { action } from "mobx"; import styled from "styled-components"; import ViewState from "../../ReactViewModels/ViewState"; -import { withViewState } from "./ViewStateContext"; +import { withViewState } from "../Context"; type PropsType = { viewState: ViewState; diff --git a/lib/ReactViews/StandardUserInterface/StandardUserInterface.tsx b/lib/ReactViews/StandardUserInterface/StandardUserInterface.tsx index 28a04676ee6..2502918a5f9 100644 --- a/lib/ReactViews/StandardUserInterface/StandardUserInterface.tsx +++ b/lib/ReactViews/StandardUserInterface/StandardUserInterface.tsx @@ -17,12 +17,11 @@ import FeedbackForm from "../Feedback/FeedbackForm"; import { Medium, Small } from "../Generic/Responsive"; import SatelliteHelpPrompt from "../HelpScreens/SatelliteHelpPrompt"; import withFallback from "../HOCs/withFallback"; -import ExperimentalFeatures from "../Map/ExperimentalFeatures"; -import CollapsedNavigation from "../Map/Navigation/Items/OverflowNavigationItem"; +import ExperimentalFeatures from "./ExperimentalFeatures"; +import { CollapsedNavigation } from "../Map/MapNavigation"; import HelpPanel from "../Map/Panels/HelpPanel/HelpPanel"; import PrintView from "../Map/Panels/SharePanel/Print/PrintView"; -import ProgressBar from "../Map/ProgressBar"; -import TrainerBar from "../Map/TrainerBar/TrainerBar"; +import TrainerBar from "./TrainerBar/TrainerBar"; import MobileHeader from "../Mobile/MobileHeader"; import MapInteractionWindow from "../Notification/MapInteractionWindow"; import Notification from "../Notification/Notification"; @@ -35,9 +34,9 @@ import Tool from "../Tools/Tool"; import TourPortal from "../Tour/TourPortal"; import WelcomeMessage from "../WelcomeMessage/WelcomeMessage"; import SelectableDimensionWorkflow from "../Workflow/SelectableDimensionWorkflow"; -import ContextProviders from "./ContextProviders"; +import { ContextProviders } from "../Context"; import { GlobalTerriaStyles } from "./GlobalTerriaStyles"; -import MapColumn from "./MapColumn"; +import MapColumn from "../Map/MapColumn"; import processCustomElements from "./processCustomElements"; import SidePanelContainer from "./SidePanelContainer"; import Styles from "./standard-user-interface.scss"; @@ -49,13 +48,12 @@ export const animationDuration = 250; interface StandardUserInterfaceProps { terria: ViewState["terria"]; viewState: ViewState; - allBaseMaps?: any[]; themeOverrides?: Partial; minimumLargeScreenWidth?: number; version: string; } -const StandardUserInterface: React.FC = observer( +const StandardUserInterfaceBase: React.FC = observer( props => { const { t } = useTranslation(); @@ -134,7 +132,6 @@ const StandardUserInterface: React.FC = observer( ); const terria = props.terria; - const allBaseMaps = props.allBaseMaps; const showStoryBuilder = props.viewState.storyBuilderShown && @@ -177,7 +174,6 @@ const StandardUserInterface: React.FC = observer( menuItems={customElements.menu} menuLeftItems={customElements.menuLeft} version={props.version} - allBaseMaps={allBaseMaps} /> @@ -227,11 +223,9 @@ const StandardUserInterface: React.FC = observer(
-
@@ -310,4 +304,5 @@ const StandardUserInterface: React.FC = observer( } ); -export default withFallback(StandardUserInterface); +export const StandardUserInterface = withFallback(StandardUserInterfaceBase); +export default withFallback(StandardUserInterfaceBase); diff --git a/lib/ReactViews/Map/TrainerBar/TrainerBar.tsx b/lib/ReactViews/StandardUserInterface/TrainerBar/TrainerBar.tsx similarity index 99% rename from lib/ReactViews/Map/TrainerBar/TrainerBar.tsx rename to lib/ReactViews/StandardUserInterface/TrainerBar/TrainerBar.tsx index 531d31d4957..249d36c4f9f 100644 --- a/lib/ReactViews/Map/TrainerBar/TrainerBar.tsx +++ b/lib/ReactViews/StandardUserInterface/TrainerBar/TrainerBar.tsx @@ -17,10 +17,7 @@ import Select from "../../../Styled/Select"; import Spacing from "../../../Styled/Spacing"; import Text, { TextSpan } from "../../../Styled/Text"; import measureElement, { MeasureElementProps } from "../../HOCs/measureElement"; -import { - WithViewState, - withViewState -} from "../../StandardUserInterface/ViewStateContext"; +import { WithViewState, withViewState } from "../../Context"; import { applyTranslationIfExists } from "./../../../Language/languageHelpers"; const StyledHtml: any = require("../../Map/Panels/HelpPanel/StyledHtml") diff --git a/lib/ReactViews/StandardUserInterface/WorkflowPanelContainer.tsx b/lib/ReactViews/StandardUserInterface/WorkflowPanelContainer.tsx index 94ac20446ed..1bd836e38ee 100644 --- a/lib/ReactViews/StandardUserInterface/WorkflowPanelContainer.tsx +++ b/lib/ReactViews/StandardUserInterface/WorkflowPanelContainer.tsx @@ -3,7 +3,7 @@ import styled from "styled-components"; import ViewState from "../../ReactViewModels/ViewState"; import { WorkflowPanelPortalId } from "../Workflow/WorkflowPanel"; import PortalContainer from "./PortalContainer"; -import { withViewState } from "./ViewStateContext"; +import { withViewState } from "../Context"; type PropsType = { viewState: ViewState; @@ -28,10 +28,8 @@ const Container = styled.div<{ show: boolean }>` height: 100vh; width: ${p => p.theme.workflowPanelWidth}px; max-width: ${p => p.theme.workflowPanelWidth}px; - transition: all 0.25s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - visibility: ${p => (p.show ? "visible" : "hidden")}; margin-left: ${p => (p.show ? "0px" : `-${p.theme.workflowPanelWidth}px`)}; opacity: ${p => (p.show ? 1 : 0)}; diff --git a/lib/ReactViews/Map/MenuButton.jsx b/lib/ReactViews/StandardUserInterface/customizable/MenuButton.jsx similarity index 95% rename from lib/ReactViews/Map/MenuButton.jsx rename to lib/ReactViews/StandardUserInterface/customizable/MenuButton.jsx index 52395c1ec2b..626bac2eacf 100644 --- a/lib/ReactViews/Map/MenuButton.jsx +++ b/lib/ReactViews/StandardUserInterface/customizable/MenuButton.jsx @@ -1,6 +1,6 @@ import React from "react"; import classNames from "classnames"; -import Icon from "../../Styled/Icon"; +import Icon from "../../../Styled/Icon"; import PropTypes from "prop-types"; import Styles from "./menu-button.scss"; diff --git a/lib/ReactViews/StandardUserInterface/customizable/MenuItem.jsx b/lib/ReactViews/StandardUserInterface/customizable/MenuItem.jsx index 9a8f1aaf321..897122345f0 100644 --- a/lib/ReactViews/StandardUserInterface/customizable/MenuItem.jsx +++ b/lib/ReactViews/StandardUserInterface/customizable/MenuItem.jsx @@ -1,4 +1,4 @@ -import MenuButton from "../../Map/MenuButton"; +import MenuButton from "./MenuButton"; import responsiveSwitch from "./ResponsiveSwitch"; import withControlledVisibility from "../../HOCs/withControlledVisibility"; import MobileMenuItem from "../../Mobile/MobileMenuItem"; diff --git a/lib/ReactViews/Map/menu-button.scss b/lib/ReactViews/StandardUserInterface/customizable/menu-button.scss similarity index 74% rename from lib/ReactViews/Map/menu-button.scss rename to lib/ReactViews/StandardUserInterface/customizable/menu-button.scss index eac534aec5d..b35fa5b3397 100644 --- a/lib/ReactViews/Map/menu-button.scss +++ b/lib/ReactViews/StandardUserInterface/customizable/menu-button.scss @@ -1,8 +1,8 @@ @import "~terriajs-variables"; .btn--about-link { - composes: btn from "../../Sass/common/_buttons.scss"; - composes: btn--map from "../../Sass/common/_buttons.scss"; + composes: btn from "../../../Sass/common/_buttons.scss"; + composes: btn--map from "../../../Sass/common/_buttons.scss"; border-radius: $radius-small; border: 0; svg { diff --git a/lib/ReactViews/Map/menu-button.scss.d.ts b/lib/ReactViews/StandardUserInterface/customizable/menu-button.scss.d.ts similarity index 100% rename from lib/ReactViews/Map/menu-button.scss.d.ts rename to lib/ReactViews/StandardUserInterface/customizable/menu-button.scss.d.ts diff --git a/lib/ReactViews/StandardUserInterface/index.ts b/lib/ReactViews/StandardUserInterface/index.ts new file mode 100644 index 00000000000..f0f63b85c00 --- /dev/null +++ b/lib/ReactViews/StandardUserInterface/index.ts @@ -0,0 +1,5 @@ +export { + StandardUserInterface, + StandardUserInterface as default +} from "./StandardUserInterface"; +export { terriaTheme } from "./StandardTheme"; diff --git a/lib/ReactViews/StandardUserInterface/map-column.scss b/lib/ReactViews/StandardUserInterface/map-column.scss deleted file mode 100644 index 93bf7fa4475..00000000000 --- a/lib/ReactViews/StandardUserInterface/map-column.scss +++ /dev/null @@ -1,99 +0,0 @@ -@import "~terriajs-variables"; -@import "../../Sass/common/mixins"; - -.map__inner { - display: table; - width: 100%; - height: 100%; - - * { - box-sizing: border-box; - } -} -.map__innerChrome { - // Chrome only :( hack until - // https://bugs.chromium.org/p/chromium/issues/detail?id=1001663 gets resolved - display: flex; - flex-flow: column; -} - -.map__row { - display: table-row; - - &:first-child { - height: 100%; - position: relative; - } -} - -.map__cell { - display: table-cell; - position: relative; - width: 100%; -} -.map__cellChrome { - // Chrome only :( hack until - // https://bugs.chromium.org/p/chromium/issues/detail?id=1001663 gets resolved - display: block; - height: 100%; -} - -@include empty-module("map-cell-map"); - -.map-wrapper { - position: absolute; - top: 0; - width: 100%; - z-index: 0; -} - -@include empty-module("feedback"); - -.location-distance { - composes: clearfix from "../../Sass/common/_base.scss"; - display: none; - @media (min-width: $sm) { - display: block; - } - position: absolute; - bottom: 2px; - right: 3px; - z-index: 1; -} - -.feedback-button-wrapper { - @media (min-width: $sm) { - bottom: 100px; - right: $padding * 2; - margin: 0; - } - - @media (max-width: $mobile) { - position: fixed; - } - position: absolute; - z-index: 0; - bottom: 25px; - right: 16px; - margin: 4px 0; -} - -.with-time-series-controls { - bottom: 58px; - - @media (max-width: $mobile) { - bottom: $mobile-bottom-timeline; - } -} - -.print-disclaimer { - display: none; -} - -@media print { - .print-disclaimer { - display: block; - width: 100%; - clear: both; - } -} diff --git a/lib/ReactViews/StandardUserInterface/map-column.scss.d.ts b/lib/ReactViews/StandardUserInterface/map-column.scss.d.ts deleted file mode 100644 index 8f9308b3b49..00000000000 --- a/lib/ReactViews/StandardUserInterface/map-column.scss.d.ts +++ /dev/null @@ -1,29 +0,0 @@ -// This file is automatically generated. -// Please do not change this file! -interface CssExports { - 'feedback': string; - 'feedback-button-wrapper': string; - 'feedbackButtonWrapper': string; - 'location-distance': string; - 'locationDistance': string; - 'map-cell-map': string; - 'map-wrapper': string; - 'mapCell': string; - 'mapCellChrome': string; - 'mapCellMap': string; - 'mapInner': string; - 'mapInnerChrome': string; - 'mapRow': string; - 'mapWrapper': string; - 'map__cell': string; - 'map__cellChrome': string; - 'map__inner': string; - 'map__innerChrome': string; - 'map__row': string; - 'print-disclaimer': string; - 'printDisclaimer': string; - 'with-time-series-controls': string; - 'withTimeSeriesControls': string; -} -declare var cssExports: CssExports; -export = cssExports; diff --git a/lib/ReactViews/Story/StoryBuilder.tsx b/lib/ReactViews/Story/StoryBuilder.tsx index e017fbd2917..289cbad1251 100644 --- a/lib/ReactViews/Story/StoryBuilder.tsx +++ b/lib/ReactViews/Story/StoryBuilder.tsx @@ -27,10 +27,7 @@ import measureElement, { MeasureElementProps } from "../HOCs/measureElement"; import VideoGuide from "../Map/Panels/HelpPanel/VideoGuide"; import { getShareData } from "../Map/Panels/SharePanel/BuildShareLink"; import SharePanel from "../Map/Panels/SharePanel/SharePanel"; -import { - WithViewState, - withViewState -} from "../StandardUserInterface/ViewStateContext"; +import { WithViewState, withViewState } from "../Context"; import Story from "./Story"; import Styles from "./story-builder.scss"; import StoryEditor from "./StoryEditor.jsx"; diff --git a/lib/ReactViews/Story/StoryPanel/StoryPanel.tsx b/lib/ReactViews/Story/StoryPanel/StoryPanel.tsx index 46aba61d34c..2eaf2430c1e 100644 --- a/lib/ReactViews/Story/StoryPanel/StoryPanel.tsx +++ b/lib/ReactViews/Story/StoryPanel/StoryPanel.tsx @@ -15,11 +15,8 @@ import TerriaError from "../../../Core/TerriaError"; import Terria from "../../../Models/Terria"; import Box from "../../../Styled/Box"; import Hr from "../../../Styled/Hr"; -import { onStoryButtonClick } from "../../Map/StoryButton/StoryButton"; -import { - WithViewState, - withViewState -} from "../../StandardUserInterface/ViewStateContext"; +import { onStoryButtonClick } from "../../Map/MenuBar/StoryButton/StoryButton"; +import { WithViewState, withViewState } from "../../Context"; import { Story } from "../Story"; import Styles from "../story-panel.scss"; import StoryBody from "./StoryBody"; diff --git a/lib/ReactViews/Tools/DiffTool/DiffTool.tsx b/lib/ReactViews/Tools/DiffTool/DiffTool.tsx index 3b6befd5cd9..c23842afd61 100644 --- a/lib/ReactViews/Tools/DiffTool/DiffTool.tsx +++ b/lib/ReactViews/Tools/DiffTool/DiffTool.tsx @@ -44,7 +44,7 @@ import { GLYPHS, StyledIcon } from "../../../Styled/Icon"; import Loader from "../../Loader"; import DatePicker from "./DatePicker"; import LocationPicker from "./LocationPicker"; -import { CLOSE_TOOL_ID } from "../../Map/Navigation/registerMapNavigations"; +import { CLOSE_TOOL_ID } from "../../Map/MapNavigation/registerMapNavigations"; const dateFormat = require("dateformat"); @@ -834,7 +834,6 @@ const CloseDifferenceButton = styled(Button)` left: 50%; transform: translateX(-50%); top: 18px; - padding: 0 20px; `; diff --git a/lib/ReactViews/Tools/PedestrianMode/PedestrianMode.tsx b/lib/ReactViews/Tools/PedestrianMode/PedestrianMode.tsx index 457effff180..de2322bc5df 100644 --- a/lib/ReactViews/Tools/PedestrianMode/PedestrianMode.tsx +++ b/lib/ReactViews/Tools/PedestrianMode/PedestrianMode.tsx @@ -8,7 +8,7 @@ import PositionRightOfWorkbench from "../../Workbench/PositionRightOfWorkbench"; import DropPedestrianToGround from "./DropPedestrianToGround"; import MiniMap, { getViewFromScene, MiniMapView } from "./MiniMap"; import MovementControls from "./MovementControls"; -import MeasureTool from "../../Map/Navigation/Items/MeasureTool"; +import { MeasureTool } from "../../Map/MapNavigation/Items"; // The desired camera height measured from the surface in metres export const PEDESTRIAN_HEIGHT = 1.7; diff --git a/lib/ReactViews/Tools/Tool.tsx b/lib/ReactViews/Tools/Tool.tsx index e096229466d..45176ae799a 100644 --- a/lib/ReactViews/Tools/Tool.tsx +++ b/lib/ReactViews/Tools/Tool.tsx @@ -11,7 +11,7 @@ import Terria from "../../Models/Terria"; import ViewerMode from "../../Models/ViewerMode"; import ViewState from "../../ReactViewModels/ViewState"; import MapNavigationItemController from "../../ViewModels/MapNavigation/MapNavigationItemController"; -import { useViewState } from "../StandardUserInterface/ViewStateContext"; +import { useViewState } from "../Context"; interface ToolProps { toolName: string; diff --git a/lib/ReactViews/Tour/TourPortal.jsx b/lib/ReactViews/Tour/TourPortal.jsx index b853f90fbb5..622fc879823 100644 --- a/lib/ReactViews/Tour/TourPortal.jsx +++ b/lib/ReactViews/Tour/TourPortal.jsx @@ -23,7 +23,7 @@ import { parseCustomMarkdownToReactWithOptions } from "../Custom/parseCustomMark import Caret from "../Generic/Caret"; import CloseButton from "../Generic/CloseButton"; import { useWindowSize } from "../Hooks/useWindowSize"; -import { useViewState } from "../StandardUserInterface/ViewStateContext"; +import { useViewState } from "../Context"; import { applyTranslationIfExists } from "./../../Language/languageHelpers"; import { calculateLeftPosition, diff --git a/lib/ReactViews/WelcomeMessage/WelcomeMessage.jsx b/lib/ReactViews/WelcomeMessage/WelcomeMessage.jsx index 0a594033717..1e1381c0780 100644 --- a/lib/ReactViews/WelcomeMessage/WelcomeMessage.jsx +++ b/lib/ReactViews/WelcomeMessage/WelcomeMessage.jsx @@ -12,7 +12,7 @@ import Text, { TextSpan } from "../../Styled/Text"; import { ExplorerWindowElementName } from "../ExplorerWindow/ExplorerWindow"; import { useKeyPress } from "../Hooks/useKeyPress.js"; import VideoGuide from "../Map/Panels/HelpPanel/VideoGuide"; -import { withViewState } from "../StandardUserInterface/ViewStateContext"; +import { withViewState } from "../Context"; import { TourPortalDisplayName } from "../Tour/TourPortal"; import FadeIn from "../Transitions/FadeIn/FadeIn"; import SlideUpFadeIn from "../Transitions/SlideUpFadeIn/SlideUpFadeIn"; diff --git a/lib/ReactViews/Map/Panels/TerrainSide.tsx b/lib/ReactViews/Workbench/TerrainSide.tsx similarity index 92% rename from lib/ReactViews/Map/Panels/TerrainSide.tsx rename to lib/ReactViews/Workbench/TerrainSide.tsx index 7390ad0fb77..6d9c94fd7b2 100644 --- a/lib/ReactViews/Map/Panels/TerrainSide.tsx +++ b/lib/ReactViews/Workbench/TerrainSide.tsx @@ -4,13 +4,13 @@ import React from "react"; import { useTranslation } from "react-i18next"; import { useTheme } from "styled-components"; import SplitDirection from "terriajs-cesium/Source/Scene/SplitDirection"; -import Terria from "../../../Models/Terria"; -import ViewerMode from "../../../Models/ViewerMode"; -import Box from "../../../Styled/Box"; -import Checkbox from "../../../Styled/Checkbox/Checkbox"; -import { TextSpan } from "../../../Styled/Text"; -import { RawButton } from "./../../../Styled/Button"; -import { Spacing } from "./../../../Styled/Spacing"; +import Terria from "../../Models/Terria"; +import ViewerMode from "../../Models/ViewerMode"; +import Box from "../../Styled/Box"; +import Checkbox from "../../Styled/Checkbox/Checkbox"; +import { TextSpan } from "../../Styled/Text"; +import { RawButton } from "../../Styled/Button"; +import { Spacing } from "../../Styled/Spacing"; const sides = { left: "settingPanel.terrain.left", diff --git a/lib/ReactViews/Workbench/WorkbenchSplitScreen.tsx b/lib/ReactViews/Workbench/WorkbenchSplitScreen.tsx index 924354e1d26..578aa8528f2 100644 --- a/lib/ReactViews/Workbench/WorkbenchSplitScreen.tsx +++ b/lib/ReactViews/Workbench/WorkbenchSplitScreen.tsx @@ -11,7 +11,7 @@ import Box from "../../Styled/Box"; import { RawButton } from "../../Styled/Button"; import { GLYPHS, StyledIcon } from "../../Styled/Icon"; import Spacing from "../../Styled/Spacing"; -import TerrainSide from "../Map/Panels/TerrainSide"; +import TerrainSide from "./TerrainSide"; interface IWorkbenchSplitScreenProps { terria: Terria; diff --git a/lib/ReactViews/Workflow/SelectableDimensionWorkflow.tsx b/lib/ReactViews/Workflow/SelectableDimensionWorkflow.tsx index 84401e5eb66..3989e048f74 100644 --- a/lib/ReactViews/Workflow/SelectableDimensionWorkflow.tsx +++ b/lib/ReactViews/Workflow/SelectableDimensionWorkflow.tsx @@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next"; import { getName } from "../../ModelMixins/CatalogMemberMixin"; import { filterSelectableDimensions } from "../../Models/SelectableDimensions/SelectableDimensions"; import SelectableDimension from "../SelectableDimensions/SelectableDimension"; -import { useViewState } from "../StandardUserInterface/ViewStateContext"; +import { useViewState } from "../Context"; import WorkbenchItemControls, { hideAllControls } from "../Workbench/Controls/WorkbenchItemControls"; diff --git a/lib/Styled/Text.tsx b/lib/Styled/Text.tsx index 4c9cae1c2db..972c869eabe 100644 --- a/lib/Styled/Text.tsx +++ b/lib/Styled/Text.tsx @@ -32,7 +32,7 @@ interface ITextWeight { interface ITextPropsBase { displayBlock?: boolean; isLink?: boolean; - nunito?: boolean; + mono?: boolean; openSans?: boolean; breakWord?: boolean; uppercase?: boolean; @@ -67,6 +67,8 @@ export const Text = styled.div` // TODO: themeify family font-family: ${props => props.theme.fontBase}; + + ${props => props.mono && `font-family: ${props.theme.fontMono};`} ${props => props.breakWord && @@ -184,11 +186,6 @@ export const Text = styled.div` ` font-size: ${props.styledFontSize}; `} - ${props => - props.styledLineHeight && - ` - line-height: ${props.styledLineHeight}; - `} ${props => props.highlightLinks && diff --git a/lib/ThirdParty/terriajs-cesium-extra/index.d.ts b/lib/ThirdParty/terriajs-cesium-extra/index.d.ts index a173ff3c2e6..b39d29200e6 100644 --- a/lib/ThirdParty/terriajs-cesium-extra/index.d.ts +++ b/lib/ThirdParty/terriajs-cesium-extra/index.d.ts @@ -53,4 +53,5 @@ declare interface FeatureDetection { isEdge(): boolean; isInternetExplorer(): boolean; internetExplorerVersion(): number[]; + chromeVersion(): number[]; } diff --git a/test/Map/StyledHtmlSpec.tsx b/test/Map/StyledHtmlSpec.tsx index 1cd3cee964c..ddf46cb2d89 100644 --- a/test/Map/StyledHtmlSpec.tsx +++ b/test/Map/StyledHtmlSpec.tsx @@ -5,7 +5,7 @@ import { ThemeProvider } from "styled-components"; import { act } from "react-dom/test-utils"; import Terria from "../../lib/Models/Terria"; import ViewState from "../../lib/ReactViewModels/ViewState"; -import { terriaTheme } from "../../lib/ReactViews/StandardUserInterface/StandardTheme"; +import { terriaTheme } from "../../lib/ReactViews/StandardUserInterface"; import { StyledHtmlRaw } from "../../lib/ReactViews/Map/Panels/HelpPanel/StyledHtml"; import { TooltipWithButtonLauncher } from "../../lib/ReactViews/Generic/TooltipWrapper"; import registerCustomComponentTypes from "../../lib/ReactViews/Custom/registerCustomComponentTypes"; diff --git a/test/ReactViews/ClipboardSpec.tsx b/test/ReactViews/ClipboardSpec.tsx index 407fceee603..9bb3674a875 100644 --- a/test/ReactViews/ClipboardSpec.tsx +++ b/test/ReactViews/ClipboardSpec.tsx @@ -2,7 +2,7 @@ const create: any = require("react-test-renderer").create; import React from "react"; import { act } from "react-dom/test-utils"; import { ThemeProvider } from "styled-components"; -import { terriaTheme } from "../../lib/ReactViews/StandardUserInterface/StandardTheme"; +import { terriaTheme } from "../../lib/ReactViews/StandardUserInterface"; import Clipboard from "../../lib/ReactViews/Clipboard"; import Input from "../../lib/Styled/Input"; import Button from "../../lib/Styled/Button"; diff --git a/test/ReactViews/DimensionSelectorSectionSpec.tsx b/test/ReactViews/DimensionSelectorSectionSpec.tsx index 37f96fb58d7..7fd2fab99f9 100644 --- a/test/ReactViews/DimensionSelectorSectionSpec.tsx +++ b/test/ReactViews/DimensionSelectorSectionSpec.tsx @@ -15,7 +15,7 @@ import SelectableDimensions, { import Terria from "../../lib/Models/Terria"; import { SelectableDimensionGroup } from "../../lib/ReactViews/SelectableDimensions/Group"; import SelectableDimension from "../../lib/ReactViews/SelectableDimensions/SelectableDimension"; -import { terriaTheme } from "../../lib/ReactViews/StandardUserInterface/StandardTheme"; +import { terriaTheme } from "../../lib/ReactViews/StandardUserInterface"; import SelectableDimensionSection from "../../lib/ReactViews/Workbench/Controls/SelectableDimensionSection"; import Checkbox from "../../lib/Styled/Checkbox"; import CatalogMemberTraits from "../../lib/Traits/TraitsClasses/CatalogMemberTraits"; diff --git a/test/ReactViews/Generic/PromptSpec.tsx b/test/ReactViews/Generic/PromptSpec.tsx index 0f37b725af3..59c41d9c017 100644 --- a/test/ReactViews/Generic/PromptSpec.tsx +++ b/test/ReactViews/Generic/PromptSpec.tsx @@ -5,7 +5,7 @@ import Terria from "../../../lib/Models/Terria"; import ViewState from "../../../lib/ReactViewModels/ViewState"; import { runInAction } from "mobx"; const Prompt: any = require("../../../lib/ReactViews/Generic/Prompt").default; -import { terriaTheme } from "../../../lib/ReactViews/StandardUserInterface/StandardTheme"; +import { terriaTheme } from "../../../lib/ReactViews/StandardUserInterface"; import Caret from "../../../lib/ReactViews/Generic/Caret"; describe("HelpPrompt", function() { diff --git a/test/ReactViews/Map/Navigation/Compass/CompassSpec.tsx b/test/ReactViews/Map/Navigation/Compass/CompassSpec.tsx index 6d985e9cf77..befff7771e9 100644 --- a/test/ReactViews/Map/Navigation/Compass/CompassSpec.tsx +++ b/test/ReactViews/Map/Navigation/Compass/CompassSpec.tsx @@ -5,10 +5,8 @@ import { act } from "react-dom/test-utils"; import Terria from "../../../../../lib/Models/Terria"; import ViewState from "../../../../../lib/ReactViewModels/ViewState"; import { ThemeProvider } from "styled-components"; -import { terriaTheme } from "../../../../../lib/ReactViews/StandardUserInterface/StandardTheme"; -// import Compass from "../../../../../lib/ReactViews/Map/Navigation/Compass"; -const Compass: any = require("../../../../../lib/ReactViews/Map/Navigation/Items/Compass") - .default; +import { terriaTheme } from "../../../../../lib/ReactViews/StandardUserInterface"; +import { Compass } from "../../../../../lib/ReactViews/Map/MapNavigation/Items/Compass/Compass"; import { StyledIcon } from "../../../../../lib/Styled/Icon"; describe("Compass", function() { diff --git a/test/ReactViews/GyroscopeGuidance/GyroscopeGuidanceSpec.tsx b/test/ReactViews/Map/Navigation/Compass/GyroscopeGuidanceSpec.tsx similarity index 74% rename from test/ReactViews/GyroscopeGuidance/GyroscopeGuidanceSpec.tsx rename to test/ReactViews/Map/Navigation/Compass/GyroscopeGuidanceSpec.tsx index 2547dc23091..f1b600f049b 100644 --- a/test/ReactViews/GyroscopeGuidance/GyroscopeGuidanceSpec.tsx +++ b/test/ReactViews/Map/Navigation/Compass/GyroscopeGuidanceSpec.tsx @@ -1,10 +1,10 @@ const create: any = require("react-test-renderer").create; import React from "react"; import { act } from "react-dom/test-utils"; -import Terria from "../../../lib/Models/Terria"; -import ViewState from "../../../lib/ReactViewModels/ViewState"; -import GyroscopeGuidance from "../../../lib/ReactViews/GyroscopeGuidance/GyroscopeGuidance"; -import MapIconButton from "../../../lib/ReactViews/MapIconButton/MapIconButton"; +import Terria from "../../../../../lib/Models/Terria"; +import ViewState from "../../../../../lib/ReactViewModels/ViewState"; +import { GyroscopeGuidance } from "../../../../../lib/ReactViews/Map/MapNavigation/Items/Compass/GyroscopeGuidance"; +import MapIconButton from "../../../../../lib/ReactViews/MapIconButton/MapIconButton"; describe("GyroscopeGuidance", function() { let terria: Terria; diff --git a/test/ReactViews/Map/Panels/HelpPanel/VideoGuideSpec.tsx b/test/ReactViews/Map/Panels/HelpPanel/VideoGuideSpec.tsx index f986b0e52bd..e0a3ccaf01b 100644 --- a/test/ReactViews/Map/Panels/HelpPanel/VideoGuideSpec.tsx +++ b/test/ReactViews/Map/Panels/HelpPanel/VideoGuideSpec.tsx @@ -2,7 +2,7 @@ const create: any = require("react-test-renderer").create; import React from "react"; import { act } from "react-dom/test-utils"; import { ThemeProvider } from "styled-components"; -import { terriaTheme } from "../../../../../lib/ReactViews/StandardUserInterface/StandardTheme"; +import { terriaTheme } from "../../../../../lib/ReactViews/StandardUserInterface"; import Terria from "../../../../../lib/Models/Terria"; import ViewState from "../../../../../lib/ReactViewModels/ViewState"; const VideoGuide: any = require("../../../../../lib/ReactViews/Map/Panels/HelpPanel/VideoGuide") diff --git a/test/ReactViews/MeasureToolSpec.jsx b/test/ReactViews/MeasureToolSpec.jsx index 0b644e087f8..1fbe8b48413 100644 --- a/test/ReactViews/MeasureToolSpec.jsx +++ b/test/ReactViews/MeasureToolSpec.jsx @@ -5,7 +5,7 @@ import React from "react"; import Terria from "../../lib/Models/Terria"; import { getMountedInstance } from "./MoreShallowTools"; -import { MeasureTool } from "../../lib/ReactViews/Map/Navigation/MeasureTool"; +import { MeasureTool } from "../../lib/ReactViews/Map/MapNavigation/MeasureTool"; const Entity = require("terriajs-cesium/Source/DataSources/Entity.js").default; const Ellipsoid = require("terriajs-cesium/Source/Core/Ellipsoid.js").default; const ConstantPositionProperty = require("terriajs-cesium/Source/DataSources/ConstantPositionProperty.js") diff --git a/test/ReactViews/Preview/DescriptionSpec.tsx b/test/ReactViews/Preview/DescriptionSpec.tsx index 93e2951f666..77ae47c5e7b 100644 --- a/test/ReactViews/Preview/DescriptionSpec.tsx +++ b/test/ReactViews/Preview/DescriptionSpec.tsx @@ -7,7 +7,7 @@ import Terria from "../../../lib/Models/Terria"; import updateModelFromJson from "../../../lib/Models/Definition/updateModelFromJson"; import WebMapServiceCatalogItem from "../../../lib/Models/Catalog/Ows/WebMapServiceCatalogItem"; import Description from "../../../lib/ReactViews/Preview/Description"; -import { terriaTheme } from "../../../lib/ReactViews/StandardUserInterface/StandardTheme"; +import { terriaTheme } from "../../../lib/ReactViews/StandardUserInterface"; describe("DescriptionSpec", function() { let testRenderer: ReactTestRenderer; diff --git a/test/ReactViews/Search/BreadcrumbsSpec.tsx b/test/ReactViews/Search/BreadcrumbsSpec.tsx index 346db0ce86e..28c70fb927d 100644 --- a/test/ReactViews/Search/BreadcrumbsSpec.tsx +++ b/test/ReactViews/Search/BreadcrumbsSpec.tsx @@ -9,7 +9,7 @@ const DataCatalogTab: any = require("../../../lib/ReactViews/ExplorerWindow/Tabs .default; import Icon from "../../../lib/Styled/Icon"; import { ThemeProvider } from "styled-components"; -import { terriaTheme } from "../../../lib/ReactViews/StandardUserInterface/StandardTheme"; +import { terriaTheme } from "../../../lib/ReactViews/StandardUserInterface"; import { runInAction } from "mobx"; describe("Breadcrumbs", function() { diff --git a/test/ReactViews/Search/SearchBoxAndResultsSpec.tsx b/test/ReactViews/Search/SearchBoxAndResultsSpec.tsx index 4639acc0e23..3378b541bdb 100644 --- a/test/ReactViews/Search/SearchBoxAndResultsSpec.tsx +++ b/test/ReactViews/Search/SearchBoxAndResultsSpec.tsx @@ -8,7 +8,7 @@ import SearchBoxAndResults, { SearchInDataCatalog } from "../../../lib/ReactViews/Search/SearchBoxAndResults"; import { ThemeProvider } from "styled-components"; -import { terriaTheme } from "../../../lib/ReactViews/StandardUserInterface/StandardTheme"; +import { terriaTheme } from "../../../lib/ReactViews/StandardUserInterface"; describe("SearchBoxAndResults", function() { let terria: Terria; diff --git a/test/ReactViews/Search/SearchBoxSpec.tsx b/test/ReactViews/Search/SearchBoxSpec.tsx index cfa30286881..7125cfdaada 100644 --- a/test/ReactViews/Search/SearchBoxSpec.tsx +++ b/test/ReactViews/Search/SearchBoxSpec.tsx @@ -4,7 +4,7 @@ import { act } from "react-dom/test-utils"; import Terria from "../../../lib/Models/Terria"; import ViewState from "../../../lib/ReactViewModels/ViewState"; import { SearchBox } from "../../../lib/ReactViews/Search/SearchBox"; -import { terriaTheme } from "../../../lib/ReactViews/StandardUserInterface/StandardTheme"; +import { terriaTheme } from "../../../lib/ReactViews/StandardUserInterface"; describe("SearchBox", function() { let terria: Terria; diff --git a/test/ReactViews/ShortReportSpec.tsx b/test/ReactViews/ShortReportSpec.tsx index 8c9255eb427..248c4339c0e 100644 --- a/test/ReactViews/ShortReportSpec.tsx +++ b/test/ReactViews/ShortReportSpec.tsx @@ -8,7 +8,7 @@ import { import { ThemeProvider } from "styled-components"; import WebMapServiceCatalogItem from "../../lib/Models/Catalog/Ows/WebMapServiceCatalogItem"; import Terria from "../../lib/Models/Terria"; -import { terriaTheme } from "../../lib/ReactViews/StandardUserInterface/StandardTheme"; +import { terriaTheme } from "../../lib/ReactViews/StandardUserInterface"; import ShortReport from "../../lib/ReactViews/Workbench/Controls/ShortReport"; import Text from "../../lib/Styled/Text"; diff --git a/test/ReactViews/Map/TrainerBar/TrainerBarSpec.tsx b/test/ReactViews/StandardUserInterface/TrainerBar/TrainerBarSpec.tsx similarity index 96% rename from test/ReactViews/Map/TrainerBar/TrainerBarSpec.tsx rename to test/ReactViews/StandardUserInterface/TrainerBar/TrainerBarSpec.tsx index 4d38ca83333..a701a22bc62 100644 --- a/test/ReactViews/Map/TrainerBar/TrainerBarSpec.tsx +++ b/test/ReactViews/StandardUserInterface/TrainerBar/TrainerBarSpec.tsx @@ -3,7 +3,7 @@ import React from "react"; import { act } from "react-dom/test-utils"; import Terria from "../../../../lib/Models/Terria"; import ViewState from "../../../../lib/ReactViewModels/ViewState"; -import TrainerBar from "../../../../lib/ReactViews/Map/TrainerBar/TrainerBar"; +import TrainerBar from "../../../../lib/ReactViews/StandardUserInterface/TrainerBar/TrainerBar"; import Box from "../../../../lib/Styled/Box"; import { createWithContexts } from "../../withContext"; import TestHelpContent from "./test-help-content"; diff --git a/test/ReactViews/Map/TrainerBar/test-help-content.js b/test/ReactViews/StandardUserInterface/TrainerBar/test-help-content.js similarity index 100% rename from test/ReactViews/Map/TrainerBar/test-help-content.js rename to test/ReactViews/StandardUserInterface/TrainerBar/test-help-content.js diff --git a/test/ReactViews/WarningBoxSpec.tsx b/test/ReactViews/WarningBoxSpec.tsx index 417fc486c8c..9fe254d2f8d 100644 --- a/test/ReactViews/WarningBoxSpec.tsx +++ b/test/ReactViews/WarningBoxSpec.tsx @@ -2,7 +2,7 @@ import { create, ReactTestInstance } from "react-test-renderer"; import React from "react"; import { act } from "react-dom/test-utils"; import { ThemeProvider } from "styled-components"; -import { terriaTheme } from "../../lib/ReactViews/StandardUserInterface/StandardTheme"; +import { terriaTheme } from "../../lib/ReactViews/StandardUserInterface"; import WarningBox from "../../lib/ReactViews/Preview/WarningBox"; import Terria from "../../lib/Models/Terria"; import WebMapServiceCatalogItem from "../../lib/Models/Catalog/Ows/WebMapServiceCatalogItem"; diff --git a/test/ReactViews/withContext.tsx b/test/ReactViews/withContext.tsx index fcdcd03c866..35da0173e4d 100644 --- a/test/ReactViews/withContext.tsx +++ b/test/ReactViews/withContext.tsx @@ -2,8 +2,8 @@ import React from "react"; import { create, TestRendererOptions } from "react-test-renderer"; import { ThemeProvider } from "styled-components"; import ViewState from "../../lib/ReactViewModels/ViewState"; -import { terriaTheme } from "../../lib/ReactViews/StandardUserInterface/StandardTheme"; -import { ViewStateProvider } from "../../lib/ReactViews/StandardUserInterface/ViewStateContext"; +import { terriaTheme } from "../../lib/ReactViews/StandardUserInterface"; +import { ViewStateProvider } from "../../lib/ReactViews/Context/ViewStateContext"; export function withThemeContext(node: React.ReactNode) { return {node}; From 88cf8f6e309ff561f8a940e1b4b22f45adbe99f9 Mon Sep 17 00:00:00 2001 From: Zoran Kokeza Date: Thu, 4 May 2023 13:14:42 +0200 Subject: [PATCH 03/12] organize imports --- lib/ReactViews/Map/BottomBar/BottomBar.tsx | 4 ++-- lib/ReactViews/Map/BottomBar/LocationBar.tsx | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/lib/ReactViews/Map/BottomBar/BottomBar.tsx b/lib/ReactViews/Map/BottomBar/BottomBar.tsx index 5e04dc4b151..1ce3331cefe 100644 --- a/lib/ReactViews/Map/BottomBar/BottomBar.tsx +++ b/lib/ReactViews/Map/BottomBar/BottomBar.tsx @@ -1,7 +1,7 @@ -import React, { VFC } from "react"; +import { VFC } from "react"; import Box from "../../../Styled/Box"; -import { MapCredits } from "./Credits"; import { useViewState } from "../../Context"; +import { MapCredits } from "./Credits"; import { DistanceLegend } from "./DistanceLegend"; import { LocationBar } from "./LocationBar"; diff --git a/lib/ReactViews/Map/BottomBar/LocationBar.tsx b/lib/ReactViews/Map/BottomBar/LocationBar.tsx index 4d5e0d869b9..0eb8b42a2c7 100644 --- a/lib/ReactViews/Map/BottomBar/LocationBar.tsx +++ b/lib/ReactViews/Map/BottomBar/LocationBar.tsx @@ -1,11 +1,10 @@ import { observer } from "mobx-react"; -import React, { FC, RefObject, useEffect, useRef } from "react"; +import { FC, RefObject, useEffect, useRef } from "react"; import { useTranslation } from "react-i18next"; import styled, { useTheme } from "styled-components"; import MouseCoords from "../../../ReactViewModels/MouseCoords"; import Box from "../../../Styled/Box"; import { RawButton } from "../../../Styled/Button"; -import { TextSpan } from "../../../Styled/Text"; interface ILocationBarProps { mouseCoords: MouseCoords; From ec738b2fef25109daf767ade97fb10f0172db861 Mon Sep 17 00:00:00 2001 From: Staf Smith Date: Fri, 14 Jul 2023 10:53:54 +0800 Subject: [PATCH 04/12] Add react imports to ix errors --- lib/ReactViews/Map/BottomBar/BottomBar.tsx | 1 + lib/ReactViews/Map/BottomBar/LocationBar.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/lib/ReactViews/Map/BottomBar/BottomBar.tsx b/lib/ReactViews/Map/BottomBar/BottomBar.tsx index 1ce3331cefe..cd903ba6e3c 100644 --- a/lib/ReactViews/Map/BottomBar/BottomBar.tsx +++ b/lib/ReactViews/Map/BottomBar/BottomBar.tsx @@ -4,6 +4,7 @@ import { useViewState } from "../../Context"; import { MapCredits } from "./Credits"; import { DistanceLegend } from "./DistanceLegend"; import { LocationBar } from "./LocationBar"; +import React from "react"; export const BottomBar: VFC = () => { const viewState = useViewState(); diff --git a/lib/ReactViews/Map/BottomBar/LocationBar.tsx b/lib/ReactViews/Map/BottomBar/LocationBar.tsx index 0eb8b42a2c7..a8b99e2133c 100644 --- a/lib/ReactViews/Map/BottomBar/LocationBar.tsx +++ b/lib/ReactViews/Map/BottomBar/LocationBar.tsx @@ -1,3 +1,4 @@ +import React from "react"; import { observer } from "mobx-react"; import { FC, RefObject, useEffect, useRef } from "react"; import { useTranslation } from "react-i18next"; From 7d9f5b4309854f25151dfff75d4efe1efb05bee8 Mon Sep 17 00:00:00 2001 From: Staf Smith Date: Mon, 17 Jul 2023 15:43:15 +0800 Subject: [PATCH 05/12] Fix import in test --- test/ReactViews/Map/Navigation/Compass/CompassSpec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/ReactViews/Map/Navigation/Compass/CompassSpec.tsx b/test/ReactViews/Map/Navigation/Compass/CompassSpec.tsx index ec3d1e2afc7..d88e6da7f4f 100644 --- a/test/ReactViews/Map/Navigation/Compass/CompassSpec.tsx +++ b/test/ReactViews/Map/Navigation/Compass/CompassSpec.tsx @@ -6,7 +6,7 @@ import Terria from "../../../../../lib/Models/Terria"; import ViewState from "../../../../../lib/ReactViewModels/ViewState"; import { ThemeProvider } from "styled-components"; import { terriaTheme } from "../../../../../lib/ReactViews/StandardUserInterface"; -import { Compass } from "../../../../../lib/ReactViews/Map/MapNavigation/Items/Compass/Compass"; +import Compass from "../../../../../lib/ReactViews/Map/MapNavigation/Items/Compass/Compass"; import { StyledIcon } from "../../../../../lib/Styled/Icon"; describe("Compass", function () { From 053c27fcff5fbcb6e39a3c197b517fbcced76ef2 Mon Sep 17 00:00:00 2001 From: Staf Smith Date: Mon, 17 Jul 2023 16:01:16 +0800 Subject: [PATCH 06/12] Rem Splitter.jsx after checking Splitter.tsx --- lib/ReactViews/Map/Splitter.jsx | 231 -------------------------------- 1 file changed, 231 deletions(-) delete mode 100644 lib/ReactViews/Map/Splitter.jsx diff --git a/lib/ReactViews/Map/Splitter.jsx b/lib/ReactViews/Map/Splitter.jsx deleted file mode 100644 index 9031e37bd44..00000000000 --- a/lib/ReactViews/Map/Splitter.jsx +++ /dev/null @@ -1,231 +0,0 @@ -import React from "react"; -import PropTypes from "prop-types"; -import { withTranslation } from "react-i18next"; -import { GLYPHS, StyledIcon } from "../../Styled/Icon"; -import Styles from "./splitter.scss"; -import { observer } from "mobx-react"; -import { runInAction } from "mobx"; - -// Feature detect support for passive: true in event subscriptions. -// See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support -let passiveSupported = false; -try { - const options = Object.defineProperty({}, "passive", { - get: function () { - passiveSupported = true; - return true; - } - }); - - window.addEventListener("test", null, options); - window.removeEventListener("test", null, options); -} catch (err) {} - -const notPassive = passiveSupported ? { passive: false } : false; - -@observer -class Splitter extends React.Component { - static propTypes = { - terria: PropTypes.object.isRequired, - viewState: PropTypes.object.isRequired, - thumbSize: PropTypes.number, - padding: PropTypes.number, - t: PropTypes.func.isRequired - }; - - static defaultProps = { - thumbSize: 42, - padding: 0 - }; - - constructor(props) { - super(props); - this.forceRefresh = this.forceRefresh.bind(this); - this.drag = this.drag.bind(this); - this.startDrag = this.startDrag.bind(this); - this.stopDrag = this.stopDrag.bind(this); - } - - componentDidMount() { - const that = this; - window.addEventListener("resize", function () { - that.forceRefresh(); - }); - } - - componentWillUnmount() { - this.unsubscribe(); - } - - forceRefresh() { - const smallChange = - this.props.terria.splitPosition < 0.5 ? 0.0001 : -0.0001; // Make sure never <0 or >1. - runInAction(() => { - this.props.terria.splitPosition += smallChange; - }); - } - - startDrag(event) { - const viewer = this.props.terria.currentViewer; - viewer.pauseMapInteraction(); - - // While dragging is in progress, subscribe to document-level movement and up events. - document.addEventListener("mousemove", this.drag, notPassive); - document.addEventListener("touchmove", this.drag, notPassive); - document.addEventListener("mouseup", this.stopDrag, notPassive); - document.addEventListener("touchend", this.stopDrag, notPassive); - - event.preventDefault(); - event.stopPropagation(); - } - - drag(event) { - let clientX = event.clientX; - let clientY = event.clientY; - if (event.targetTouches && event.targetTouches.length > 0) { - clientX = event.targetTouches.item(0).clientX; - clientY = event.targetTouches.item(0).clientY; - } - - const viewer = this.props.terria.mainViewer.currentViewer; - const container = viewer.getContainer(); - const mapRect = container.getBoundingClientRect(); - - const that = this; - function computeSplitFraction(startBound, endBound, position) { - const difference = endBound - startBound; - const fraction = (position - startBound) / difference; - - const min = startBound + that.props.padding + that.props.thumbSize * 0.5; - const max = endBound - that.props.padding - that.props.thumbSize * 0.5; - const minFraction = (min - startBound) / difference; - const maxFraction = (max - startBound) / difference; - - return Math.min(maxFraction, Math.max(minFraction, fraction)); - } - let splitFractionX = computeSplitFraction( - mapRect.left, - mapRect.right, - clientX - ); - let splitFractionY = computeSplitFraction( - mapRect.top, - mapRect.bottom, - clientY - ); - - // We compute the maximum and minium windows bounds as a percentage so that we can always apply the bounds - // restriction as a percentage for consistency (we currently use absolute values for X and percentage values for - // Y, but always apply the constraint as a percentage). - // We use absolute pixel values for horizontal restriction because of the fixed UI elements which occupy an - // absolute amount of screen relestate and 100 px seems like a fine amount for the current UI. - const minX = computeSplitFraction( - mapRect.left, - mapRect.right, - mapRect.left + 100 - ); - const maxX = computeSplitFraction( - mapRect.left, - mapRect.right, - mapRect.right - 100 - ); - // Resctrict to within +/-30% of the center vertically (so we don't run into the top and bottom UI elements). - const minY = 0.2; - const maxY = 0.8; - - splitFractionX = Math.min(maxX, Math.max(minX, splitFractionX)); - splitFractionY = Math.min(maxY, Math.max(minY, splitFractionY)); - - runInAction(() => { - this.props.terria.splitPosition = splitFractionX; - this.props.terria.splitPositionVertical = splitFractionY; - }); - - event.preventDefault(); - event.stopPropagation(); - } - - stopDrag(event) { - this.unsubscribe(); - - const viewer = this.props.terria.currentViewer; - // Ensure splitter stays in sync with map - this.props.viewState.triggerResizeEvent(); - - viewer.resumeMapInteraction(); - - event.preventDefault(); - event.stopPropagation(); - } - - unsubscribe() { - document.removeEventListener("mousemove", this.drag, notPassive); - document.removeEventListener("touchmove", this.drag, notPassive); - document.removeEventListener("mouseup", this.stopDrag, notPassive); - document.removeEventListener("touchend", this.stopDrag, notPassive); - window.removeEventListener("resize", this.forceRefresh); - } - - getPosition() { - const canvasWidth = - this.props.terria.currentViewer.getContainer().clientWidth; - const canvasHeight = - this.props.terria.currentViewer.getContainer().clientHeight; - return { - x: this.props.terria.splitPosition * canvasWidth, - y: this.props.terria.splitPositionVertical * canvasHeight - }; - } - - render() { - if ( - !this.props.terria.showSplitter || - !this.props.terria.currentViewer.canShowSplitter || - !this.props.terria.currentViewer.getContainer() - ) { - return null; - } - - const thumbWidth = this.props.thumbSize; - const position = this.getPosition(); - - const dividerStyle = { - left: position.x + "px", - backgroundColor: this.props.terria.baseMapContrastColor - }; - - const thumbStyle = { - left: position.x + "px", - top: position.y + "px", - width: thumbWidth + "px", - height: thumbWidth + "px", - marginLeft: "-" + thumbWidth * 0.5 + "px", - marginTop: "-" + thumbWidth * 0.5 + "px", - lineHeight: thumbWidth - 2 + "px", - borderRadius: thumbWidth * 0.5 + "px", - fontSize: thumbWidth - 12 + "px" - }; - - const { t } = this.props; - - return ( -
-
-
-
- -
- ); - } -} - -module.exports = withTranslation()(Splitter); From dd4f9901c7b1da473d6f5eafc94dc38d27a64570 Mon Sep 17 00:00:00 2001 From: Staf Smith Date: Tue, 18 Jul 2023 13:22:32 +0800 Subject: [PATCH 07/12] Small changes to ProgressBar.tsx --- lib/ReactViews/Map/ProgressBar.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/lib/ReactViews/Map/ProgressBar.tsx b/lib/ReactViews/Map/ProgressBar.tsx index 694079a4748..9fcc5359d60 100644 --- a/lib/ReactViews/Map/ProgressBar.tsx +++ b/lib/ReactViews/Map/ProgressBar.tsx @@ -1,5 +1,5 @@ import React, { VFC, useCallback, useEffect, useMemo, useState } from "react"; -import styled, { keyframes, useTheme } from "styled-components"; +import styled, { css, keyframes, useTheme } from "styled-components"; import EventHelper from "terriajs-cesium/Source/Core/EventHelper"; import { useViewState } from "../Context"; @@ -16,7 +16,7 @@ export const ProgressBar: VFC = () => { setLoadPercentage(sanitisedPercentage); }, []); - const setMode = (mode: any) => { + const setMode = (mode: boolean) => { setIndeterminateLoading(mode); }; @@ -37,7 +37,7 @@ export const ProgressBar: VFC = () => { terria.baseMapContrastColor === "#ffffff" ? "#ffffff" : theme.colorPrimary, - [] + [terria.baseMapContrastColor] ); const allComplete = loadPercentage === 100 && !indeterminateLoading; @@ -70,11 +70,11 @@ const StyledProgressBar = styled.div` ${(props) => props.indeterminate && - ` - width: 100%; - animation: ${indeterminateAnimation} 1.2s infinite linear; - transform-origin: 0% 50%; - `} + css` + width: 100%; + animation: ${indeterminateAnimation} 1.2s infinite linear; + transform-origin: 0% 50%; + `} `; const indeterminateAnimation = keyframes` From f62bfafb3919ed8ac0499b32c9e0e30e9f3b16dc Mon Sep 17 00:00:00 2001 From: Staf Smith Date: Tue, 18 Jul 2023 13:23:21 +0800 Subject: [PATCH 08/12] Delete ProgressBar.jsx after checking TS version --- lib/ReactViews/Map/ProgressBar.jsx | 99 ------------------------------ 1 file changed, 99 deletions(-) delete mode 100644 lib/ReactViews/Map/ProgressBar.jsx diff --git a/lib/ReactViews/Map/ProgressBar.jsx b/lib/ReactViews/Map/ProgressBar.jsx deleted file mode 100644 index 65cb08c0eaf..00000000000 --- a/lib/ReactViews/Map/ProgressBar.jsx +++ /dev/null @@ -1,99 +0,0 @@ -import classNames from "classnames"; -import { observer } from "mobx-react"; -import PropTypes from "prop-types"; -import React from "react"; -import { withTheme } from "styled-components"; -import EventHelper from "terriajs-cesium/Source/Core/EventHelper"; -import { withViewState } from "../StandardUserInterface/ViewStateContext"; -import Styles from "./progress-bar.scss"; - -// The map navigation region -@observer -class ProgressBar extends React.Component { - static propTypes = { - viewState: PropTypes.object.isRequired, - theme: PropTypes.object.isRequired - }; - - constructor(props) { - super(props); - this.state = { - visible: "hidden" - }; - } - - /* eslint-disable-next-line camelcase */ - UNSAFE_componentWillMount() { - this.eventHelper = new EventHelper(); - - this.eventHelper.add( - this.props.viewState.terria.tileLoadProgressEvent, - this.setProgress.bind(this) - ); - - // Also listen for indeterminate data source loading events - this.eventHelper.add( - this.props.viewState.terria.indeterminateTileLoadProgressEvent, - this.setMode.bind(this) - ); - - // TODO - is this actually needed now? load events always get called when - // changing viewer. if still reuqired, - // clear progress when new viewer observed, rather than mounting to a 'current viewer' - - // // Clear progress when the viewer changes so we're not left with an invalid progress bar hanging on the screen. - // this.eventHelper.add( - // this.props.viewState.terria.currentViewer.beforeViewerChanged, - // this.setProgress.bind(this, 0, 0) - // ); - } - - setProgress(remaining, max) { - const rawPercentage = (1 - remaining / max) * 100; - const sanitisedPercentage = Math.floor(remaining > 0 ? rawPercentage : 100); - - this.setState({ - percentage: sanitisedPercentage - }); - } - - setMode(loading) { - this.setState({ loading: loading }); - } - - componentWillUnmount() { - this.eventHelper.removeAll(); - } - - /** - * Progress bar is influced by two loading states: - * The base globe where the progress bar shows actual progress, - * Sources where load progress is indeterminate including 3DTilesets where the progress bar is animated. - */ - render() { - const determinateProgress = this.state.percentage + "%"; - const indeterminateStillLoading = this.state.loading; - const allComplete = this.state.percentage === 100 && !this.state.loading; - - // use the baseMapContrastColor to ensure progress bar is visible on light backgrounds. If contrast color is white, use it. If its black, use the primary color of the current theme. - const backgroundColor = - this.props.viewState.terria.baseMapContrastColor === "#ffffff" - ? "#ffffff" - : this.props.theme.colorPrimary; - - return ( -
- ); - } -} - -export default withViewState(withTheme(ProgressBar)); From 67237d991bfef5b0fb1598777e61a0ea8eacf6d7 Mon Sep 17 00:00:00 2001 From: Staf Smith Date: Tue, 18 Jul 2023 15:00:46 +0800 Subject: [PATCH 09/12] Delete MapColumn.jsx after checking TS version --- .../StandardUserInterface/MapColumn.jsx | 215 ------------------ 1 file changed, 215 deletions(-) delete mode 100644 lib/ReactViews/StandardUserInterface/MapColumn.jsx diff --git a/lib/ReactViews/StandardUserInterface/MapColumn.jsx b/lib/ReactViews/StandardUserInterface/MapColumn.jsx deleted file mode 100644 index 1a7411ba12e..00000000000 --- a/lib/ReactViews/StandardUserInterface/MapColumn.jsx +++ /dev/null @@ -1,215 +0,0 @@ -import classNames from "classnames"; -import { observer } from "mobx-react"; -import PropTypes from "prop-types"; -import React from "react"; -import { withTranslation } from "react-i18next"; -import FeatureDetection from "terriajs-cesium/Source/Core/FeatureDetection"; -import ActionBarPortal from "../ActionBar/ActionBarPortal"; -import BottomDock from "../BottomDock/BottomDock"; -import { MapCredits } from "../Credits"; -import Loader from "../Loader"; -import BottomLeftBar from "../Map/BottomLeftBar/BottomLeftBar"; -import DistanceLegend from "../Map/Legend/DistanceLegend"; -import LocationBar from "../Map/Legend/LocationBar"; -import MenuBar from "../Map/MenuBar"; -import MapNavigation from "../Map/Navigation/MapNavigation"; -import TerriaViewerWrapper from "../Map/TerriaViewerWrapper"; -import SlideUpFadeIn from "../Transitions/SlideUpFadeIn/SlideUpFadeIn"; -import Styles from "./map-column.scss"; -import Toast from "./Toast"; -import { withViewState } from "./ViewStateContext"; - -const chromeVersion = FeatureDetection.chromeVersion(); - -/** - * Right-hand column that contains the map, controls that sit over the map and sometimes the bottom dock containing - * the timeline and charts. - */ -@observer -class MapColumn extends React.Component { - static propTypes = { - viewState: PropTypes.object.isRequired, - customFeedbacks: PropTypes.array.isRequired, - allBaseMaps: PropTypes.array.isRequired, - animationDuration: PropTypes.number.isRequired, - customElements: PropTypes.object.isRequired, - t: PropTypes.func.isRequired - }; - - constructor(props) { - super(props); - this.state = {}; - } - - render() { - const { customElements } = this.props; - const { t } = this.props; - // TODO: remove? see: https://bugs.chromium.org/p/chromium/issues/detail?id=1001663 - const isAboveChrome75 = - chromeVersion && chromeVersion[0] && Number(chromeVersion[0]) > 75; - const mapCellClass = classNames(Styles.mapCell, { - [Styles.mapCellChrome]: isAboveChrome75 - }); - return ( -
-
-
- -
- - -
- -
- -
- - - - - - - - - -
- - -
- - {/* TODO: re-implement/support custom feedbacks */} - {/* -
- -
- */} - - - -
{feedbackItem}
- - -
- - - -
- -
-
- -
-
- -
- ); - } -} - -export default withTranslation()(withViewState(MapColumn)); From 91335393a83e1d260c8bad9f153fb920802eabec Mon Sep 17 00:00:00 2001 From: Staf Smith Date: Wed, 2 Aug 2023 10:44:36 +0800 Subject: [PATCH 10/12] Redo hide bottom dock with mapUI --- lib/ReactViews/Map/MapColumn.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/ReactViews/Map/MapColumn.tsx b/lib/ReactViews/Map/MapColumn.tsx index a947682cbee..a412cf1e58c 100644 --- a/lib/ReactViews/Map/MapColumn.tsx +++ b/lib/ReactViews/Map/MapColumn.tsx @@ -120,7 +120,7 @@ export const MapColumn: FC = observer( )}
- {true && ( + {!viewState.hideMapUi && ( Date: Wed, 2 Aug 2023 11:04:53 +0800 Subject: [PATCH 11/12] re-implement conditional opacity --- lib/ReactViews/Map/MapColumn.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/lib/ReactViews/Map/MapColumn.tsx b/lib/ReactViews/Map/MapColumn.tsx index a412cf1e58c..eb33ebc28c8 100644 --- a/lib/ReactViews/Map/MapColumn.tsx +++ b/lib/ReactViews/Map/MapColumn.tsx @@ -54,7 +54,11 @@ export const MapColumn: FC = observer(
{!viewState.hideMapUi && ( - <> +
= observer( navItems={customElements.nav} elementConfig={viewState.terria.elements.get("map-navigation")} /> - +
)} Date: Mon, 11 Sep 2023 13:34:13 +0200 Subject: [PATCH 12/12] fix: update changelog --- CHANGES.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 3b63f86bd20..ee136b60633 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -2,6 +2,8 @@ #### next release (8.3.4) +- Move map credits to map column so it don't get hidden by chart panel +- TSify `MapColumn` module and reorganize components directory structure. - [The next improvement] #### next release (8.3.3) @@ -10,7 +12,6 @@ - Fixed rectangle drawing in 2D mode. - Added EPSG:7855 to `Proj4Definitions`. - Fix multi level nesting in ArcGIS Mapserver. -- [The next improvement] #### 8.3.2 - 2023-08-11 @@ -253,8 +254,6 @@ - Fix `SearchBoxAndResults` Trans values - Fix `generateCatalogIndex` for nested references - Fix `SearchBox` handling of `searchWithDebounce` when `debounceDuration` prop changes. It now fushes instead of cancels. -- Move map credits to map column so it don't get hidden by chart panel -- [The next improvement] #### 8.2.10 - 2022-08-02