Add grabbable background to timeline

src/components/Timeline.jsx

@@ -86,7 +86,10 @@ class Timeline extends React.Component {
         <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} />
+        {/*<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)} />
         <TimelineEvents
           events={this.props.domain.events}

src/components/TimelineCategories.jsx

@@ -2,6 +2,16 @@ 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)
@@ -11,16 +21,24 @@ class TimelineCategories extends React.Component {
   renderCategory(cat, idx) {
     return (
       <g class="tick" opacity="1" transform={`translate(0,${this.getY(idx)})`}>
-        <line stroke="red" x2="-720"></line>
+        <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 () {
-    console.log(this.props.categories)
     return (
-      <g transform="translate(840, 0)" class="yAxis" fill="none" font-size="10" font-family="sans-serif" text-anchor="end">
+      <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>    

src/components/TimelineMarkers.jsx

@@ -6,10 +6,14 @@ class TimelineMarkers extends React.Component {
     return (
       <circle
         className="timeline-marker"
-        cx={this.props.getEventX(event)}
-        cy={this.props.getEventY(event)}
+        cx={0}
+        cy={0}
+        style={{
+          'transform': `translate(${this.props.getEventX(event)}px, ${this.props.getEventY(event)}px)`,
+          'transition': 'transform 0.5s ease',
+          'opacity': 0.9
+        }}        
         r="10"
-        style={{ opacity: "0.9" }}
       >
       </circle>
     )
@@ -17,7 +21,9 @@ class TimelineMarkers extends React.Component {
 
   render () {
     return (
-      <g>
+      <g
+        clipPath={"url(#clip)"}
+      >
         {this.props.selected.map(event => this.renderMarker(event))}
       </g>
     );

src/js/timeline/timeline.js

@@ -55,16 +55,14 @@ export default function(svg, newApp, ui, methods) {
 
   dom.axis.x0 = dom.svg.append('g')
     .attr('transform', `translate(0, 25)`)
+    .attr('clip-path', 'url(#clip')
     .attr('class', 'axis xAxis');
 
   dom.axis.x1 = dom.svg.append('g')
     .attr('transform', `translate(0, 105)`)
+    .attr('clip-path', 'url(#clip')
     .attr('class', 'axis axisHourText');
 
-  /*dom.axis.y = dom.svg.append('g')
-    .attr('transform', `translate(${WIDTH}, 0)`)
-    .attr('class', 'yAxis');*/
-
   /*
    * Initialize axis function and element group
    */
@@ -84,13 +82,12 @@ export default function(svg, newApp, ui, methods) {
     .tickSize(0)
     .tickFormat(d3.timeFormat('%H:%M'));
 
-  /*axis.y =
+  axis.y =
     d3.axisLeft(scale.y)
-    .tickValues([]);*/
+    .tickValues([]);
 
   updateAxis();
 
-
   /**
    * Adapt dimensions when resizing
    */
@@ -126,7 +123,6 @@ export default function(svg, newApp, ui, methods) {
     return scale.y(yGroup);
   }
 
-
   /*
    * Get x position of eventPoint, considering the time scale
    * @param {object} eventPoint: regular eventPoint data
@@ -139,6 +135,10 @@ export default function(svg, newApp, ui, methods) {
     return (scale.x.domain()[1].getTime() - scale.x.domain()[0].getTime()) / 60000;
   }
 
+  function getScaleX() {
+    return scale.x;
+  }
+
   /**
    * Apply zoom level to timeline
    * @param {object} zoom: zoom level from zoomLevels
@@ -186,41 +186,41 @@ export default function(svg, newApp, ui, methods) {
   /*
    * Setup drag behavior
    */
+  function onDragStart(ev) {
+    d3.event.sourceEvent.stopPropagation();
+    dragPos0 = d3.event.x;
+    toggleTransition(false);
+  }
+
+  function onDrag() {
+    const drag0 = scale.x.invert(dragPos0).getTime();
+    const dragNow = scale.x.invert(d3.event.x).getTime();
+    const timeShift = (drag0 - dragNow) / 1000;
+
+    const newDomain0 = d3.timeSecond.offset(app.timerange[0], timeShift);
+    const newDomainF = d3.timeSecond.offset(app.timerange[1], timeShift);
+
+    scale.x.domain([newDomain0, newDomainF]);
+    render();
+    //app.timerange = scale.x.domain();
+    //methods.onUpdateTimerange(scale.x.domain());
+  }
+
+  function onDragEnd() {
+    toggleTransition(true);
+    app.timerange = scale.x.domain();
+    methods.onUpdateTimerange(scale.x.domain());
+  }
+
   const drag = d3.drag()
-    .on('start', () => {
-      d3.event.sourceEvent.stopPropagation();
-      dragPos0 = d3.event.x;
-      toggleTransition(false);
-    })
-    .on('drag', () => {
-      const drag0 = scale.x.invert(dragPos0).getTime();
-      const dragNow = scale.x.invert(d3.event.x).getTime();
-      const timeShift = (drag0 - dragNow) / 1000;
-
-      const newDomain0 = d3.timeSecond.offset(app.timerange[0], timeShift);
-      const newDomainF = d3.timeSecond.offset(app.timerange[1], timeShift);
-
-      scale.x.domain([newDomain0, newDomainF]);
-//      render();
-      app.timerange = scale.x.domain();
-      methods.onUpdateTimerange(scale.x.domain());
-    })
-    .on('end', () => {
-      toggleTransition(true);
-      app.timerange = scale.x.domain();
-      methods.onUpdateTimerange(scale.x.domain());
-    });
+    .on('start', onDragStart)
+    .on('drag', onDrag)
+    .on('end', onDragEnd);
 
   /**
    * Render axis on timeline and viewbox boundaries
    */
   function renderAxis() {
-    dom.axis.x0
-      .call(drag);
-
-    dom.axis.x1
-      .call(drag);
-
     dom.axis.x0
       .transition()
       .duration(transitionDuration)
@@ -231,11 +231,26 @@ export default function(svg, newApp, ui, methods) {
       .duration(transitionDuration)
       .call(axis.x1);
 
-    /*axis.y.tickSize(WIDTH - margin.left);
+    axis.y.tickSize(WIDTH - margin.left);
+
+    if (!dom.axis.dragGrabber) {
+      dom.axis.dragGrabber = dom.svg.insert('rect', ':first-child')
+      .attr('class', 'drag-grabber')
+      .attr('x', margin.left)
+      .attr('y', 20)
+      .attr('width', WIDTH - margin.left)
+      .attr('height', 80)
+      .call(drag);
+    }   
+    
+    if (!dom.axis.y) {
+      dom.axis.y = dom.svg.insert('g', ':first-child')
+      .attr('transform', `translate(${WIDTH}, 0)`)
+      .attr('class', 'yAxis');
+    }
 
     dom.axis.y
-      .call(axis.y)
-      .call(drag);*/
+      .call(axis.y);
   }
 
   /**
@@ -253,9 +268,9 @@ export default function(svg, newApp, ui, methods) {
       .domain(domain.categories)
       .range(groupYs);
 
-    /*axis.y =
+    axis.y =
       d3.axisLeft(scale.y)
-        .tickValues(domain.categories.map(c => c.category));*/
+        .tickValues(domain.categories.map(c => c.category));
   }
 
 
@@ -269,13 +284,8 @@ export default function(svg, newApp, ui, methods) {
     const isNewDomain = (hash(domain) !== hash(newDomain));
     const isNewAppProps = (hash(app) !== hash(newApp));
 
-    if (isNewDomain) {
-      domain.categories = newDomain.categories;
-    }
-
-    if (isNewAppProps) {
-      app.timerange = newApp.timerange;
-    }
+    if (isNewDomain) domain.categories = newDomain.categories;
+    if (isNewAppProps) app.timerange = newApp.timerange;
 
     if (isNewDomain || isNewAppProps) render();
   }
@@ -286,10 +296,14 @@ export default function(svg, newApp, ui, methods) {
   }
 
   return {
+    getScaleX,
     getEventX,
     getEventY,
     applyZoom,
     moveTime,
     update,
+    onDragStart,
+    onDrag,
+    onDragEnd
   };
 }

src/scss/timeline.scss

@@ -171,12 +171,20 @@
 
       .yAxis {
         .tick line {
+          stroke: $midwhite;
           stroke-width: 15px;
           cursor: -webkit-grab;
           cursor: -moz-grab;
         }
       }
 
+      .drag-grabber {
+        cursor: -webkit-grab;
+        cursor: -moz-grab;     
+        fill: $offwhite;
+        opacity: 0.05;   
+      }
+
       .axisBoundaries {
         stroke: $offwhite;
         stroke-width: 1;