Readjust event handlers

src/components/Timeline.jsx

@@ -33,27 +33,25 @@ class Timeline extends React.Component {
       softTimeUpdate: 0,
       scaleX: null,
       scaleY: null,
-      timerange: [null, null]
+      timerange: [null, null],
+      dragPos0: null
     };
   }
 
   componentDidMount() {
-    this.methods = Object.assign({}, this.props.methods, {
-      onSoftUpdate: (toggle) => { this.setState({ softTimeUpdate: toggle }) }
-    });
-    
     this.computeDims();
     window.addEventListener('resize', () => { this.computeDims(); });
   }
 
   componentWillReceiveProps(nextProps) {
     if (hash(nextProps) !== hash(this.props)) {
-      let groupYs = Array.apply(null, Array(nextProps.domain.categories.length));
-      groupYs = groupYs.map((g, i) => (i + 1) * 80 / groupYs.length);
+      const categories = nextProps.domain.categories;
+      const cats = categories.map((g, i) => (i + 1) * 80 / categories.length);
 
       this.setState({
+        timerange: nextProps.app.timerange,
         scaleX: d3.scaleTime().domain(nextProps.app.timerange).range([this.state.dims.margin_left, this.state.dims.width]),
-        scaleY: d3.scaleOrdinal().domain(nextProps.domain.categories).range(groupYs)
+        scaleY: d3.scaleOrdinal().domain(nextProps.domain.categories).range(cats)
       });
     }
   }
@@ -102,7 +100,7 @@ class Timeline extends React.Component {
    * @param {String} direction: 'forward' / 'backwards'
    */
   onMoveTime(direction) {
-    this.methods.onSelect();
+    this.props.methods.onSelect();
     const extent = this.getTimeScaleExtent();
     const newCentralTime = d3.timeMinute.offset(this.state.scaleX.domain()[0], extent / 2);
 
@@ -117,9 +115,17 @@ class Timeline extends React.Component {
     }
 
     this.state.scaleX.domain([domain0, domainF]);
-    this.methods.onUpdateTimerange(this.state.scaleX.domain());
+    this.props.methods.onUpdateTimerange(this.state.scaleX.domain());
   }
 
+  /**
+   * Shift time range by moving forward or backwards
+   * WITHOUT updating the store
+   * @param {String} direction: 'forward' / 'backwards'
+   */
+  onSoftTimeRangeUpdate(timerange) {
+    this.setState({ timerange });
+  }
 
   /**
    * Apply zoom level to timeline
@@ -134,42 +140,48 @@ class Timeline extends React.Component {
       d3.timeMinute.offset(newCentralTime, zoom.duration / 2)
     ]);
 
-    this.methods.onUpdateTimerange(this.state.scaleX.domain());
+    this.props.methods.onUpdateTimerange(this.state.scaleX.domain());
+  }
+
+  toggleTransition(isTransition) {
+    this.setState({ transitionDuration: (isTransition) ? 300 : 0 });
   }
 
   /*
    * Setup drag behavior
    */
-  onDragStart(ev) {
+  onDragStart() {
     d3.event.sourceEvent.stopPropagation();
-    dragPos0 = d3.event.x;
-    this.toggleTransition(false);
+    this.setState({
+      dragPos0: d3.event.x
+    }, () => {
+      this.toggleTransition(false);
+    });
   }
 
   /*
    * Drag and update
    */
   onDrag() {
-    const drag0 = this.state.scaleX.invert(dragPos0).getTime();
+    const drag0 = this.state.scaleX.invert(this.state.dragPos0).getTime();
     const dragNow = this.state.scaleX.invert(d3.event.x).getTime();
     const timeShift = (drag0 - dragNow) / 1000;
 
-    const newDomain0 = d3.timeSecond.offset(timerange[0], timeShift);
-    const newDomainF = d3.timeSecond.offset(timerange[1], timeShift);
+    const newDomain0 = d3.timeSecond.offset(this.state.timerange[0], timeShift);
+    const newDomainF = d3.timeSecond.offset(this.state.timerange[1], timeShift);
 
     this.state.scaleX.domain([newDomain0, newDomainF]);
-    //render();
+
     // Updates components without updating timerange
-    this.methods.onSoftUpdate(1);
+    this.onSoftTimeRangeUpdate([newDomain0, newDomainF]);
   }
 
   onDragEnd() {
-    toggleTransition(true);
+    this.toggleTransition(true);
     this.setState({
       timerange: this.state.scaleX.domain()
     }, () => {
-      this.methods.onSoftUpdate(0);
-      this.methods.onUpdateTimerange(scale.x.domain());  
+      this.props.methods.onUpdateTimerange(this.state.scaleX.domain());  
     });
   }
 
@@ -186,13 +198,14 @@ class Timeline extends React.Component {
         <TimelineAxis
           dims={dims}
           timerange={this.props.app.timerange}
+          transitionDuration={this.state.transitionDuration}
           scaleX={this.state.scaleX}
         />
         <TimelineCategories 
           dims={dims}
-          onDragStart={this.onDragStart}
-          onDrag={this.onDrag}
-          onDragEnd={this.onDragEnd}          
+          onDragStart={() => { this.onDragStart() }}
+          onDrag={() => { this.onDrag() }}
+          onDragEnd={() => { this.onDragEnd() }}
           categories={this.props.domain.categories}
         />
         <TimelineHandles
@@ -206,7 +219,7 @@ class Timeline extends React.Component {
         />
         <TimelineLabels
           dims={dims}
-          timelabels={this.props.app.timerange}
+          timelabels={this.state.timerange}
         />
         <TimelineMarkers
           selected={this.props.app.selected}
@@ -218,6 +231,7 @@ class Timeline extends React.Component {
           getEventX={(e) => this.getEventX(e)}
           getEventY={(e) => this.getEventY(e)}
           getCategoryColor={this.props.methods.getCategoryColor}
+          transitionDuration={this.state.transitionDuration}
           onSelect={this.props.methods.onSelect}
         />
       </svg>
@@ -231,9 +245,9 @@ class Timeline extends React.Component {
     return (
       <div className={classes}>
         <TimelineHeader
-          title={copy[app.language].timeline.info}
-          date0={formatterWithYear(app.timerange[0])}
-          date1={formatterWithYear(app.timerange[1])}
+          title={copy[this.props.app.language].timeline.info}
+          date0={formatterWithYear(this.state.timerange[0])}
+          date1={formatterWithYear(this.state.timerange[1])}
           onClick={() => { this.onClickArrow(); }}
           hideInfo={isNarrative}
         />

src/components/TimelineAxis.jsx

@@ -8,7 +8,6 @@ class TimelineAxis extends React.Component {
     this.xAxis1Ref = React.createRef();
     this.state = {
       isInitialized: false,
-      transitionDuration: 300
     }
   }
 
@@ -35,12 +34,12 @@ class TimelineAxis extends React.Component {
     if (this.state.isInitialized) {
       d3.select(this.xAxis0Ref.current)
         .transition()
-        .duration(this.state.transitionDuration)
+        .duration(this.props.transitionDuration)
         .call(this.x0);
 
       d3.select(this.xAxis1Ref.current)
         .transition()
-        .duration(this.state.transitionDuration)
+        .duration(this.props.transitionDuration)
         .call(this.x1);
     }
   }

src/components/TimelineCategories.jsx

@@ -11,7 +11,7 @@ class TimelineCategories extends React.Component {
   }
 
   componentDidUpdate() {
-    if (!this.state.isInitialized && this.props.timeline) {
+    if (!this.state.isInitialized) {
       const drag = d3.drag()
       .on('start', this.props.onDragStart)
       .on('drag', this.props.onDrag)
@@ -29,10 +29,11 @@ class TimelineCategories extends React.Component {
   }
 
   renderCategory(category, idx) {
+    const dims = this.props.dims;
     return (
       <g class="tick" opacity="1" transform={`translate(0,${this.getY(idx)})`}>
-        <line stroke="currentColor" x1={this.props.dims.margin_left} x2={1026}></line>
-        <text fill="currentColor" x={this.props.dims.margin_left} dy="0.32em">{category.category}</text>
+        <line x1={dims.margin_left} x2={dims.width - dims.width_controls}></line>
+        <text x={dims.margin_left} dy="0.32em">{category.category}</text>
       </g>
     )
   }
@@ -50,7 +51,7 @@ class TimelineCategories extends React.Component {
           class="drag-grabber"
           x={dims.margin_left}
           y="20"
-          width={dims.width - dims.margin_left}
+          width={dims.width - dims.margin_left - dims.width_controls}
           height={dims.trackHeight}
         ></rect>
       </g>

src/components/TimelineEvents.jsx

@@ -17,7 +17,7 @@ class TimelineEvents extends React.Component {
         cy={0}
         style={{
           'transform': `translate(${this.props.getEventX(event)}px, ${this.props.getEventY(event)}px)`,
-          'transition': 'transform 0.3s ease'
+          'transition': `transform ${this.props.transitionDuration / 1000}s ease`
         }}
         r={5}        
         fill={this.props.getCategoryColor(event.category)}