diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx index 1eb8e76..e68db1d 100644 --- a/src/components/Timeline.jsx +++ b/src/components/Timeline.jsx @@ -256,6 +256,7 @@ class Timeline extends React.Component { /> this.getEventX(e)} getEventY={(e) => this.getEventY(e)} getCategoryColor={this.props.methods.getCategoryColor} diff --git a/src/components/presentational/TimelineEvents.js b/src/components/presentational/TimelineEvents.js index 5dc8dce..2ce4086 100644 --- a/src/components/presentational/TimelineEvents.js +++ b/src/components/presentational/TimelineEvents.js @@ -1,6 +1,6 @@ import React from 'react'; -const TimelineEvents = ({ events, getEventX, getEventY, +const TimelineEvents = ({ events, narrative, getEventX, getEventY, getCategoryColor, onSelect, transitionDuration }) => { function getAllEventsAtOnce(eventPoint) { @@ -11,17 +11,32 @@ const TimelineEvents = ({ events, getEventX, getEventY, } function renderEvent(event) { + let styleProps = ({ + fill: getCategoryColor(event.category), + fillOpacity: 0.8, + transform: `translate(${getEventX(event)}px, ${getEventY(event)}px)`, + transition: `transform ${transitionDuration / 1000}s ease` + }); + + if (narrative) { + const { steps } = narrative + const isInNarrative = steps.map(s => s.id).includes(event.id) + + if (!isInNarrative) { + styleProps = { + ...styleProps, + fillOpacity: 0.1 + } + } + } + return ( {onSelect(getAllEventsAtOnce(event))}} >