fix narrativeStepStyles inconsistency

forensic-architecture · Feb 19, 2019 · 2cd9bba · 2cd9bba
1 parent 6ba35ed
commit 2cd9bba
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 68 deletions.
diff --git a/src/components/Map.jsx b/src/components/Map.jsx
@@ -12,7 +12,7 @@ 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 Narratives from './presentational/Map/Narratives'
 import DefsMarkers from './presentational/Map/DefsMarkers.jsx'
 
 // NB: important constants for map, TODO: make statics

diff --git a/...ponents/presentational/Map/Narratives.jsx → ...mponents/presentational/Map/Narratives.js b/...ponents/presentational/Map/Narratives.jsx → ...mponents/presentational/Map/Narratives.js
@@ -3,6 +3,13 @@ import { Portal } from 'react-portal'
 // import { concatStatic } from 'rxjs/operator/concat'
 // import { single } from 'rxjs/operator/single'
 
+const defaultStyles = {
+  strokeOpacity: 1,
+  strokeWidth: 0,
+  strokeDasharray: 'none',
+  stroke: 'none'
+}
+
 function MapNarratives ({ styles, onSelectNarrative, svg, narrative, narratives, projectPoint }) {
   function getNarrativeStyle (narrativeId) {
     const styleName = (narrativeId && narrativeId in styles)
@@ -11,56 +18,10 @@ function MapNarratives ({ styles, onSelectNarrative, svg, narrative, narratives,
     return styles[styleName]
   }
 
-  function getStepStyle (name) {
-    if (name === 'None') return null
-    return styles.stepStyles[name]
-  }
-
   function hasNoLocation (step) {
     return (step.latitude === '' || step.longitude === '')
   }
 
-  function renderNarrativeStep (idx, n) {
-    const step = n.steps[idx]
-    const step2 = n.steps[idx + 1]
-
-    // don't draw if one of the steps has no location
-    if (hasNoLocation(step) || hasNoLocation(step2)) { return null }
-
-    // 0 if not in narrative mode, 1 if active narrative, 0.1 if inactive
-    let styles = {
-      strokeOpacity: (n === null) ? 0
-        : (step && (n.id === narrative.id)) ? 1 : 0.0,
-      strokeWidth: 0,
-      strokeDasharray: 'none',
-      stroke: 'none'
-    }
-
-    const p1 = projectPoint([step.latitude, step.longitude])
-    const p2 = projectPoint([step2.latitude, step2.longitude])
-
-    if (step) {
-      if (process.env.features.NARRATIVE_STEP_STYLES) {
-        const _idx = step.narratives.indexOf(n.id)
-        const stepStyle = step.narrative___stepStyles[_idx]
-
-        return _renderNarrativeStep(
-          p1,
-          p2,
-          { ...styles, ...getStepStyle(stepStyle) }
-        )
-
-      // otherwise steps are styled per narrative
-      } else {
-        styles = {
-          ...styles,
-          ...getNarrativeStyle(n.id)
-        }
-        return _renderNarrativeStep(p1, p2, styles)
-      }
-    }
-  }
-
   function _renderNarrativeStepArrow (p1, p2, styles) {
     const distance = Math.sqrt((p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y))
     const theta = Math.atan2(p2.y - p1.y, p2.x - p1.x) // Angle of narrative step line
@@ -125,26 +86,90 @@ function MapNarratives ({ styles, onSelectNarrative, svg, narrative, narratives,
     )
   }
 
+  function renderBetweenSteps (step1, step2, extraStyles) {
+    // don't draw if one of the steps has no location, or not in narrative
+    if (hasNoLocation(step1) || hasNoLocation(step2)) {
+      return null
+    }
+
+    // don't draw if something else is up
+    if (!step1 || !step2) {
+      return null
+    }
+
+    const p1 = projectPoint([step1.latitude, step1.longitude])
+    const p2 = projectPoint([step2.latitude, step2.longitude])
+
+    return _renderNarrativeStep(p1, p2, {
+      ...defaultStyles,
+      ...(extraStyles || {})
+    })
+  }
+
+  function renderFullNarrative (n) {
+    if (n === null || n.id !== narrative.id) {
+      return null
+    }
+
+    const arrows = []
+
+    for (let idx = 0; idx < n.steps.length - 1; idx += 1) {
+      const step1 = n.steps[idx]
+      const step2 = n.steps[idx + 1]
+      arrows.push(renderBetweenSteps(step1, step2, getNarrativeStyle(n.id)))
+    }
+
+    return arrows
+  }
+
+  function renderBetweenMarked (n) {
+    // this function should only be called if features.NARRATIVE_STEP_STYLES
+    // is true, and thus there is a 'stepStyles' attributes in events
+    if (n === null || n.id !== narrative.id) {
+      return null
+    }
+
+    const arrows = []
+
+    let lastMarked = null
+    for (let idx = 0; idx < n.steps.length; idx += 1) {
+      const step = n.steps[idx]
+      const _idx = step.narratives.indexOf(n.id)
+      const stepStyle = step.narrative___stepStyles[_idx]
+
+      if (stepStyle !== 'None') {
+        if (lastMarked) {
+          arrows.push(renderBetweenSteps(lastMarked, step, styles.stepStyles[stepStyle]))
+        }
+        lastMarked = step
+      }
+    }
+
+    return arrows
+  }
+
   function renderNarrative (n) {
-    const steps = n.steps.slice(0, n.steps.length - 1)
+    const narrativeId = `narrative-${n.id.replace(/ /g, '_')}`
 
     return (
-      <g id={`narrative-${n.id.replace(/ /g, '_')}`} className='narrative'>
-        {steps.map((s, idx) => renderNarrativeStep(idx, n))}
+      <g id={narrativeId} className='narrative'>
+        {(process.env.features.NARRATIVE_STEP_STYLES
+          ? renderBetweenMarked(n)
+          : renderFullNarrative(n)
+        )}
       </g>
     )
   }
 
-  if (narrative === null) return (
-    <Portal node={svg}>
-      <g/>
-    </Portal>
-  )
+  // don't render in explore mode
+  if (narrative === null) {
+    return null
+  }
 
   return (
     <Portal node={svg}>
       <g className='narratives'>
-        {narratives.map(n => renderNarrative(n))}
+        {narratives.map(renderNarrative)}
       </g>
     </Portal>
   )

diff --git a/src/reducers/app.js b/src/reducers/app.js
@@ -118,16 +118,6 @@ function decrementNarrativeCurrent (appState, action) {
   }
 }
 
-function clearTagFilters (appState) {
-  return {
-    ...appState,
-    filters: {
-      ...appState.filters,
-      tags: []
-    }
-  }
-}
-
 function toggleFilter (appState, action) {
   let newTags = appState.filters[action.filter].slice(0)
   if (newTags.includes(action.value)) {
@@ -223,8 +213,6 @@ function app (appState = initial.app, action) {
       return decrementNarrativeCurrent(appState, action)
     case UPDATE_SOURCE:
       return updateSource(appState, action)
-    case RESET_ALLFILTERS:
-      return resetAllFilters(appState, action)
     /* toggles */
     case TOGGLE_LANGUAGE:
       return toggleLanguage(appState, action)