feat(welcomeScreen): add custom story markers to globe

src/scripts/actions/show-markers.ts

@@ -0,0 +1,13 @@
+export const SHOW_MARKERS = 'SHOW_MARKERS';
+
+export interface ShowMarkersAction {
+  type: typeof SHOW_MARKERS;
+  showMarkers: boolean;
+}
+
+const showMarkersAction = (showMarkers: boolean): ShowMarkersAction => ({
+  type: SHOW_MARKERS,
+  showMarkers
+});
+
+export default showMarkersAction;

src/scripts/components/app/app.styl

@@ -5,6 +5,11 @@
   font-family: NotesEsa
   src: url('../../../../assets/fonts/NotesEsaReg.otf')
 
+@font-face
+  font-style: normal
+  font-family: NotesEsaBold
+  src: url('../../../../assets/fonts/NotesEsaBol.otf')
+
 :global(html), :global(body), :global(#app)
   overflow: hidden
   margin: 0

src/scripts/components/app/app.tsx

@@ -1,5 +1,5 @@
 import React, {FunctionComponent} from 'react';
-import {Provider as StoreProvider, useSelector} from 'react-redux';
+import {Provider as StoreProvider, useSelector, useDispatch} from 'react-redux';
 import {IntlProvider} from 'react-intl';
 import {HashRouter as Router, Switch, Route, Redirect} from 'react-router-dom';
 
@@ -24,6 +24,9 @@ import Globes from '../globes/globes';
 import translations from '../../i18n';
 
 import styles from './app.styl';
+import {StoriesStateSelector} from '../../selectors/story/story-state';
+import {selectedLayerIdsSelector} from '../../selectors/layers/selected-ids';
+import showMarkersAction from '../../actions/show-markers';
 
 // create redux store
 const store = createReduxStore();
@@ -36,6 +39,20 @@ const App: FunctionComponent = () => (
 
 const TranslatedApp: FunctionComponent = () => {
   const language = useSelector(languageSelector);
+  const dispatch = useDispatch();
+
+  const selectedStory = useSelector(StoriesStateSelector);
+  const selectedLayers = useSelector(selectedLayerIdsSelector);
+  console.log(selectedLayers);
+
+  if (
+    (!selectedLayers.mainId && !selectedLayers.compareId) ||
+    !selectedStory.selected
+  ) {
+    dispatch(showMarkersAction(true));
+  } else {
+    dispatch(showMarkersAction(false));
+  }
 
   return (
     <Router>

src/scripts/components/globe/globe.tsx

@@ -1,4 +1,5 @@
 import React, {FunctionComponent, useRef, useEffect, useState} from 'react';
+import {useSelector} from 'react-redux';
 import 'cesium/Build/Cesium/Widgets/widgets.css';
 import {
   Viewer,
@@ -21,6 +22,8 @@ import {isElectron} from '../../libs/electron/index';
 import {GlobeView} from '../../types/globe-view';
 import {GlobeProjection} from '../../types/globe-projection';
 import config from '../../config/main';
+import {useMarkers} from '../../hooks/use-markers';
+import {storyListSelector} from '../../selectors/story/list';
 
 import {GlobeProjectionState} from '../../types/globe-projection-state';
 import {BasemapId} from '../../types/basemap';
@@ -86,6 +89,7 @@ const Globe: FunctionComponent<Props> = ({
 }) => {
   const [viewer, setViewer] = useState<Viewer | null>(null);
   const ref = useRef<HTMLDivElement>(null);
+  const stories = useSelector(storyListSelector);
 
   // make latest "active" value always accessible in camera change handler
   const isActiveRef = useRef<boolean>(active);
@@ -295,6 +299,8 @@ const Globe: FunctionComponent<Props> = ({
     flyToGlobeView(viewer, flyTo);
   }, [viewer, flyTo]);
 
+  useMarkers(viewer, stories);
+
   return (
     <div
       className={styles.globe}

src/scripts/components/layer-selector/layer-selector.tsx

@@ -17,6 +17,7 @@ import {State} from '../../reducers';
 import setFlyToAction from '../../actions/set-fly-to';
 
 import styles from './layer-selector.styl';
+import showMarkersAction from '../../actions/show-markers';
 
 const LayerSelector: FunctionComponent = () => {
   const dispatch = useDispatch();
@@ -73,6 +74,7 @@ const LayerSelector: FunctionComponent = () => {
                 icon={CloseIcon}
                 onClick={() => {
                   dispatch(showLayerSelectorAction(false));
+                  dispatch(showMarkersAction(true));
                 }}
               />
             </div>

src/scripts/components/navigation/navigation.tsx

@@ -9,12 +9,13 @@ import {StoryIcon} from '../icons/story-icon';
 import showLayerSelectorAction from '../../actions/show-layer-selector';
 import Share from '../share/share';
 import {MenuIcon} from '../icons/menu-icon';
+import showMarkersAction from '../../actions/show-markers';
 
 import styles from './navigation.styl';
 
 const Navigation: FunctionComponent = () => {
-  const [showMenu, setShowMenu] = useState(false);
   const dispatch = useDispatch();
+  const [showMenu, setShowMenu] = useState(false);
 
   return (
     <div className={styles.navigation}>
@@ -27,7 +28,10 @@ const Navigation: FunctionComponent = () => {
       <Button
         className={styles.button}
         label="layers"
-        onClick={() => dispatch(showLayerSelectorAction(true))}
+        onClick={() => {
+          dispatch(showLayerSelectorAction(true));
+          dispatch(showMarkersAction(false));
+        }}
         icon={LayersIcon}
       />
       <Share />

src/scripts/custom.d.ts

@@ -2,3 +2,13 @@ declare module '*.styl' {
   const content: any;
   export default content;
 }
+
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.otf' {
+  const content: string;
+  export default content;
+}

src/scripts/hooks/use-markers.ts

@@ -0,0 +1,59 @@
+import {useEffect} from 'react';
+import {useSelector, useDispatch} from 'react-redux';
+import {useHistory} from 'react-router-dom';
+import {
+  Viewer,
+  ScreenSpaceEventHandler,
+  defined,
+  ScreenSpaceEventType
+} from 'cesium';
+
+import {createMarker} from '../libs/create-markers';
+import {showMarkersSelector} from '../selectors/show-markers';
+import showMarkersAction from '../actions/show-markers';
+
+import {StoryList} from '../types/story-list';
+
+export const useMarkers = (viewer: Viewer | null, stories: StoryList) => {
+  const showMarkers = useSelector(showMarkersSelector);
+  const history = useHistory();
+  const dispatch = useDispatch();
+
+  // create marker for each story
+  useEffect(() => {
+    if (!viewer) {
+      return;
+    }
+
+    viewer.entities.removeAll();
+
+    const scene = viewer.scene;
+    const handler = new ScreenSpaceEventHandler(
+      scene.canvas as HTMLCanvasElement
+    );
+
+    handler.setInputAction(movement => {
+      const pickedObject = scene.pick(movement.position);
+      if (defined(pickedObject)) {
+        dispatch(showMarkersAction(false));
+        history.push(`/stories/${pickedObject.id._id}/0`);
+      }
+    }, ScreenSpaceEventType.LEFT_CLICK);
+
+    const markers = showMarkers
+      ? stories.map(story => createMarker(story))
+      : [];
+
+    Promise.all(markers)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      .then((entities: Array<any>) => {
+        entities.forEach(entity => viewer.entities.add(entity));
+      })
+      .catch(error => console.error(error));
+
+    // eslint-disable-next-line consistent-return
+    return () => handler.destroy();
+  }, [showMarkers, dispatch, history, stories, viewer]);
+
+  return;
+};