Comment and clean late timeline js

src/components/Timeline.jsx

@@ -12,7 +12,6 @@ import TimelineLogic from '../js/timeline/timeline.js';
 import TimelineLabels from './TimelineLabels.jsx';
 import TimelineMarkers from './TimelineMarkers.jsx'
 import TimelineEvents from './TimelineEvents.jsx';
-import TimelineCategories from './TimelineCategories.jsx';
 
 class Timeline extends React.Component {
   constructor(props) {
@@ -26,20 +25,22 @@ class Timeline extends React.Component {
         width_controls: 100,
         height_controls: 115,
         margin_left: 120        
-      }
+      },
+      softTimeUpdate: 0
     };
   }
 
   componentDidMount() {
-    this.timeline = new TimelineLogic(this.svgRef.current, this.props.app, this.props.ui, this.props.methods);
-    this.timeline.update(this.props.domain, this.props.app);
+    this.methods = Object.assign({}, this.props.methods, { onSoftUpdate: (toggle) => { this.setState({ softTimeUpdate: toggle }) }});
+    this.timeline = new TimelineLogic(this.svgRef.current, this.props.ui, this.methods);
+    this.timeline.update(this.props.domain.categories, this.props.app.timerange);
     this.computeDims();
     window.addEventListener('resize', () => { this.computeDims(); });
   }
 
   componentWillReceiveProps(nextProps) {
     if (hash(nextProps) !== hash(this.props)) {
-      this.timeline.update(nextProps.domain, nextProps.app);
+      this.timeline.update(nextProps.domain.categories, nextProps.app.timerange);
     }
   }
 
@@ -69,7 +70,23 @@ class Timeline extends React.Component {
       return this.timeline.applyZoom(zoom);
     }
     return null;
-  }  
+  }
+
+  renderTimelineClip() {
+    const dims = this.state.dims;
+
+    return (
+      <clipPath id="clip">
+        <rect
+          x="120"
+          y="0" 
+          width={dims.width - dims.margin_left - dims.width_controls}
+          height={dims.height - 25}
+        >
+        </rect>
+      </clipPath>
+    );
+  }
 
   renderSVG() {
     const dims = this.state.dims;
@@ -80,17 +97,25 @@ class Timeline extends React.Component {
         width={dims.width}
         height={dims.height}
       >
-        <clipPath id="clip">
-          <rect x="120" y="0" width={dims.width - dims.margin_left - dims.width_controls} height={dims.height - 25}></rect>
-        </clipPath>
-        <TimelineHandles dims={dims} onMoveTime={(dir) => { this.onMoveTime(dir) }} />
-        <TimelineZoomControls zoomLevels={this.props.app.zoomLevels} dims={dims} onApplyZoom={(zoom) => { this.onApplyZoom(zoom); }} />
-        <TimelineLabels dims={dims} timelabels={this.props.app.timerange} />
-        {/*<TimelineCategories categories={this.props.domain.categories}
-          onDragStart={(ev) => { this.timeline.onDragStart(ev) }}
-          onDrag={(ev) => { this.timeline.onDrag(ev); }}
-        />*/}
-        <TimelineMarkers selected={this.props.app.selected} getEventX={(e) => this.timeline.getEventX(e)} getEventY={(e) => this.timeline.getEventY(e)} />
+        {this.renderTimelineClip()}
+        <TimelineHandles
+          dims={dims}
+          onMoveTime={(dir) => { this.onMoveTime(dir) }}
+        />
+        <TimelineZoomControls
+          zoomLevels={this.props.app.zoomLevels}
+          dims={dims}
+          onApplyZoom={(zoom) => { this.onApplyZoom(zoom); }}
+        />
+        <TimelineLabels
+          dims={dims}
+          timelabels={this.props.app.timerange}
+        />
+        <TimelineMarkers
+          selected={this.props.app.selected}
+          getEventX={(e) => this.timeline.getEventX(e)}
+          getEventY={(e) => this.timeline.getEventY(e)}
+        />
         <TimelineEvents
           events={this.props.domain.events}
           getEventX={(e) => this.timeline.getEventX(e)}

src/components/TimelineCategories.jsx

@@ -1,49 +0,0 @@
-import React from 'react';
-
-class TimelineCategories extends React.Component {
-
-  constructor() {
-    super();
-
-    this.state = { 
-      isDragging: false,
-      dragPos0: 0,
-      scaleXDomain
-    }
-  }
-
-  getY(idx) {
-    const h = 76;
-    console.log((idx + 1) * h / this.props.categories.length)
-    return (idx + 1) * h / this.props.categories.length;
-  }
-
-  renderCategory(cat, idx) {
-    return (
-      <g class="tick" opacity="1" transform={`translate(0,${this.getY(idx)})`}>
-        <line 
-          draggable={true}
-          style={{ cursor: 'grab' }}
-          onDragStart={(ev) => { this.props.onDragStart(ev) }}
-          onDrag={(ev) => { this.props.onDrag(ev) }}
-          onMouseDown={this.setState({ isDragging: true })}
-          onMouseUp={this.setState({ isDragging: false })}
-          stroke="red" x2="-720"></line>
-        <text fill="blue" x="-723" dy="0.32em">{cat.category}</text>
-      </g>
-    );
-  }
-
-  render () {
-    return (
-      <g 
-        transform="translate(840, 0)" class="yAxis" fill="none" font-size="10" font-family="sans-serif" text-anchor="end"
-      >
-        <path class="domain" stroke="currentColor" d="M-720,38.5H0.5V76.5H-720"></path>
-        {this.props.categories.map((cat, idx) => { return this.renderCategory(cat, idx); })}
-      </g>    
-    );        
-  }
-}
-
-export default TimelineCategories;

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.5s ease'
+          'transition': 'transform 0.3s ease'
         }}
         r={5}        
         fill={this.props.getCategoryColor(event.category)}

src/components/TimelineMarkers.jsx

@@ -10,7 +10,7 @@ class TimelineMarkers extends React.Component {
         cy={0}
         style={{
           'transform': `translate(${this.props.getEventX(event)}px, ${this.props.getEventY(event)}px)`,
-          'transition': 'transform 0.5s ease',
+          'transition': 'transform 0.3s ease',
           'opacity': 0.9
         }}        
         r="10"