add optional styling for shapes from redux store

src/components/Map.jsx

@@ -9,15 +9,14 @@ import 'leaflet';
 
 import { isNotNullNorUndefined } from '../js/utilities';
 
-import MapSites from './presentational/Map/Sites.jsx';
-import MapShapes from './presentational/Map/Shapes.jsx';
-import MapEvents from './presentational/Map/Events.jsx';
-import MapSelectedEvents from './presentational/Map/SelectedEvents.jsx';
-import MapNarratives from './presentational/Map/Narratives.jsx';
-import MapDefsMarkers from './presentational/Map/DefsMarkers.jsx';
+import Sites from './presentational/Map/Sites.jsx';
+import Shapes from './presentational/Map/Shapes.jsx';
+import Events from './presentational/Map/Events.jsx';
+import SelectedEvents from './presentational/Map/SelectedEvents.jsx';
+import Narratives from './presentational/Map/Narratives.jsx';
+import DefsMarkers from './presentational/Map/DefsMarkers.jsx';
 
 class Map extends React.Component {
-
   constructor() {
     super();
     this.projectPoint = this.projectPoint.bind(this)
@@ -147,7 +146,7 @@ class Map extends React.Component {
 
   renderSites() {
     return (
-      <MapSites
+      <Sites
         sites={this.props.domain.sites}
         projectPoint={this.projectPoint}
         isEnabled={this.props.app.views.sites}
@@ -157,22 +156,23 @@ class Map extends React.Component {
 
   renderShapes() {
     return (
-      <MapShapes
+      <Shapes
         svg={this.svgRef.current}
         shapes={this.props.domain.shapes}
         projectPoint={this.projectPoint}
+        styles={this.props.ui.shapes}
       />
     )
   }
 
   renderNarratives() {
     return (
-      <MapNarratives
+      <Narratives
         svg={this.svgRef.current}
         narratives={this.props.domain.narratives}
         projectPoint={this.projectPoint}
         narrative={this.props.app.narrative}
-        narrativeProps={this.props.ui.narratives}
+        styles={this.props.ui.narratives}
         onSelect={this.props.methods.onSelect}
         onSelectNarrative={this.props.methods.onSelectNarrative}
       />
@@ -198,7 +198,7 @@ class Map extends React.Component {
 
   renderEvents() {
     return (
-      <MapEvents
+      <Events
         svg={this.svgRef.current}
         locations={this.props.domain.locations}
         styleLocation={this.styleLocation}
@@ -214,7 +214,7 @@ class Map extends React.Component {
 
   renderSelected() {
     return (
-      <MapSelectedEvents
+      <SelectedEvents
         svg={this.svgRef.current}
         selected={this.props.app.selected}
         projectPoint={this.projectPoint}
@@ -226,7 +226,7 @@ class Map extends React.Component {
   renderMarkers() {
     return (
       <Portal node={this.svgRef.current}>
-        <MapDefsMarkers />
+        <DefsMarkers />
       </Portal>
     )
   }
@@ -278,7 +278,8 @@ function mapStateToProps(state) {
     },
     ui: {
       dom: state.ui.dom,
-      narratives: state.ui.style.narratives
+      narratives: state.ui.style.narratives,
+      shapes: state.ui.style.shapes
     }
   }
 }

src/components/presentational/Map/Narratives.jsx

@@ -1,17 +1,17 @@
 import React from 'react'
 import { Portal } from 'react-portal'
 
-function MapNarratives ({ narrativeProps, onSelectNarrative, svg, narrative, narratives, projectPoint }) {
+function MapNarratives ({ styles, onSelectNarrative, svg, narrative, narratives, projectPoint }) {
   function getNarrativeStyle(narrativeId) {
-    const styleName = (narrativeId && narrativeId in narrativeProps)
+    const styleName = (narrativeId && narrativeId in styles)
       ? narrativeId
       : 'default'
-    return narrativeProps[styleName]
+    return styles[styleName]
   }
 
   function getStepStyle(name) {
     if (name === 'None') return null
-    return narrativeProps.stepStyles[name]
+    return styles.stepStyles[name]
   }
 
   function hasNoLocation(step) {

src/components/presentational/Map/Shapes.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Portal } from 'react-portal'
 
-function MapShapes({ svg, shapes, projectPoint }) {
-  function renderShape(shape, lineStyle) {
+function MapShapes({ svg, shapes, projectPoint, styles }) {
+  function renderShape(shape) {
     const lineCoords = []
     const points = shape.points
       .map(projectPoint)
@@ -19,15 +19,21 @@ function MapShapes({ svg, shapes, projectPoint }) {
       }
     })
 
-    return lineCoords.map(coords => (
-      <line
-        className={shape.name}
-        markerStart="none"
-        {...coords}
-        style={lineStyle}
-      >
-      </line>
-    ))
+    return lineCoords.map(coords => {
+      const shapeStyles = (shape.name in styles)
+        ? styles[shape.name]
+        : styles.default
+
+      return (
+        <line
+          id={`${shape.name}_style`}
+          markerStart="none"
+          {...coords}
+          style={shapeStyles}
+        >
+        </line>
+      )
+    })
   }
 
   if (!shapes || !shapes.length) return null
@@ -35,10 +41,7 @@ function MapShapes({ svg, shapes, projectPoint }) {
   return (
     <Portal node={svg}>
       <g id={`shapes-layer`} className="narrative">
-        {shapes.map(s => renderShape(s, {
-          strokeWidth: 3,
-          stroke: 'blue'
-        }))}
+        {shapes.map(renderShape)}
       </g>
     </Portal>
   )

src/store/initial.js

@@ -102,6 +102,13 @@ const initial = {
           stroke: 'red',
           strokeWidth: 3
         }
+      },
+      shapes: {
+        default: {
+          stroke: 'blue',
+          strokeWidth: 3,
+          opacity: 0.9
+        }
       }
     },
     dom: {