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>
     );