feat(welcomeScreen): add custom story markers to globe (#448)

* feat(welcomeScreen): add story markers to globe

* feat(welcomeScreen): add custom billboard entities

* feat(welcomeScreen): remove comment

* fix(layer-selector): change animation type back to lower case

* feat(fonts): add NotesEsa font to markers

* feat(markers): hide markers in layer selection

* refactor(welcomeScreen): remove showMarker from store and pass markers to globe directly

* refactor(welcomeScreen): add custom hook for story markers

* refactor(welcomeScreen): change return

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

@@ -24,6 +24,7 @@ import Globes from '../globes/globes';
 import translations from '../../i18n';
 
 import styles from './app.styl';
+import {useStoryMarkers} from '../../hooks/use-story-markers';
 
 // create redux store
 const store = createReduxStore();
@@ -36,6 +37,7 @@ const App: FunctionComponent = () => (
 
 const TranslatedApp: FunctionComponent = () => {
   const language = useSelector(languageSelector);
+  const markers = useStoryMarkers();
 
   return (
     <Router>
@@ -58,7 +60,7 @@ const TranslatedApp: FunctionComponent = () => {
             <div className={styles.logo}>
               <EsaLogo />
             </div>
-            <Globes />
+            <Globes markers={markers} />
             <Navigation />
             <GlobeNavigation />
             <TimeSlider />

src/scripts/components/globe/globe.tsx

@@ -21,9 +21,11 @@ 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 {GlobeProjectionState} from '../../types/globe-projection-state';
 import {BasemapId} from '../../types/basemap';
+import {Marker} from '../../types/marker-type';
 
 import styles from './globe.styl';
 
@@ -52,6 +54,7 @@ interface Props {
   basemap: BasemapId | null;
   zoomLevels: number;
   flyTo: GlobeView | null;
+  markers?: Marker[];
   onMouseEnter: () => void;
   onTouchStart: () => void;
   onChange: (view: GlobeView) => void;
@@ -79,6 +82,7 @@ const Globe: FunctionComponent<Props> = ({
   zoomLevels,
   active,
   flyTo,
+  markers = [],
   onMouseEnter,
   onTouchStart,
   onChange,
@@ -295,6 +299,8 @@ const Globe: FunctionComponent<Props> = ({
     flyToGlobeView(viewer, flyTo);
   }, [viewer, flyTo]);
 
+  useMarkers(viewer, markers);
+
   return (
     <div
       className={styles.globe}

src/scripts/components/globes/globes.tsx

@@ -22,8 +22,13 @@ import {selectedLayerIdsSelector} from '../../selectors/layers/selected-ids';
 import {GlobeView} from '../../types/globe-view';
 
 import styles from './globes.styl';
+import {Marker} from '../../types/marker-type';
 
-const Globes: FunctionComponent = () => {
+interface Props {
+  markers?: Marker[];
+}
+
+const Globes: FunctionComponent<Props> = ({markers = []}) => {
   const dispatch = useDispatch();
   const selectedLayerIds = useSelector(selectedLayerIdsSelector);
   const projectionState = useSelector(projectionSelector);
@@ -84,6 +89,7 @@ const Globes: FunctionComponent = () => {
         />
       )}
       <Globe
+        markers={markers}
         active={isMainActive}
         view={currentView}
         projectionState={projectionState}

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

@@ -71,9 +71,7 @@ const LayerSelector: FunctionComponent = () => {
               <Button
                 className={styles.button}
                 icon={CloseIcon}
-                onClick={() => {
-                  dispatch(showLayerSelectorAction(false));
-                }}
+                onClick={() => dispatch(showLayerSelectorAction(false))}
               />
             </div>
             {selectedMainLayer && (

src/scripts/components/navigation/navigation.tsx

@@ -13,8 +13,8 @@ import {MenuIcon} from '../icons/menu-icon';
 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}>

src/scripts/components/splash-screen/splash-screen.styl

@@ -21,7 +21,7 @@
     text-transform: uppercase
     font-weight: bold
     font-size: emCalc(36px)
-    font-family: NotesEsa
+    font-family: NotesEsaBold
     line-height: emCalc(16px)
 
   p

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,47 @@
+import {useEffect} from 'react';
+import {useDispatch} from 'react-redux';
+import {useHistory} from 'react-router-dom';
+import {
+  Viewer,
+  ScreenSpaceEventHandler,
+  defined,
+  ScreenSpaceEventType
+} from 'cesium';
+
+import {createMarker} from '../libs/create-marker';
+
+import {Marker} from '../types/marker-type';
+
+export const useMarkers = (viewer: Viewer | null, markers: Marker[]) => {
+  const history = useHistory();
+  const dispatch = useDispatch();
+
+  // create marker for each story
+  useEffect(() => {
+    if (!viewer) {
+      return;
+    }
+
+    const scene = viewer.scene;
+    const handler = new ScreenSpaceEventHandler(
+      scene.canvas as HTMLCanvasElement
+    );
+
+    handler.setInputAction(movement => {
+      const pickedObject = scene.pick(movement.position);
+      if (defined(pickedObject)) {
+        history.push(`/stories/${pickedObject.id._id}/0`);
+      }
+    }, ScreenSpaceEventType.LEFT_CLICK);
+
+    Promise.all(markers.map(marker => createMarker(marker))).then(entities => {
+      viewer.entities.removeAll();
+      entities.forEach(entity => viewer.entities.add(entity));
+    });
+
+    // eslint-disable-next-line consistent-return
+    return () => handler.destroy();
+  }, [dispatch, history, markers, viewer]);
+
+  return;
+};

src/scripts/hooks/use-story-markers.ts

@@ -0,0 +1,24 @@
+import {useSelector} from 'react-redux';
+
+import {selectedLayerIdsSelector} from '../selectors/layers/selected-ids';
+import {StoriesStateSelector} from '../selectors/story/story-state';
+
+export const useStoryMarkers = () => {
+  const selectedLayers = useSelector(selectedLayerIdsSelector);
+  const stories = useSelector(StoriesStateSelector).list;
+  const hideMarkers = Boolean(
+    selectedLayers.mainId || selectedLayers.compareId
+  );
+
+  if (hideMarkers) {
+    return [];
+  }
+
+  const storyMarkers = stories.map(story => ({
+    id: story.id,
+    title: story.title,
+    position: story.position
+  }));
+
+  return storyMarkers;
+};