Make timeline zoom controls reactified

src/components/Timeline.jsx

@@ -7,6 +7,7 @@ import copy from '../js/data/copy.json';
 import { formatterWithYear, isNotNullNorUndefined } from '../js/utilities';
 import TimelineHeader from './presentational/TimelineHeader';
 import TimelineHandles from './TimelineHandles.jsx';
+import TimelineZoomControls from './TimelineZoomControls.jsx';
 import TimelineLogic from '../js/timeline/timeline.js';
 
 
@@ -43,7 +44,7 @@ class Timeline extends React.Component {
 
     if (document.querySelector(`#${this.props.ui.dom.timeline}`) !== null) {
       const boundingClient = document.querySelector(`#${this.props.ui.dom.timeline}`).getBoundingClientRect();
-      WIDTH = boundingClient.width - WIDTH_CONTROLS;
+      WIDTH = boundingClient.width;
     }
     return {
       height: HEIGHT,
@@ -61,19 +62,27 @@ class Timeline extends React.Component {
     return '';
   }
 
+  onApplyZoom(zoom) {
+    if (this.timeline) {
+      return this.timeline.applyZoom(zoom);
+    }
+    return '';
+  }  
+
   renderSVG() {
-    const { width, height, margin_left } = this.getClientDims();
+    const dims = this.getClientDims();
   
     return (
       <svg
         ref={this.svgRef}
-        width={width}
-        height={height}
+        width={dims.width}
+        height={dims.height}
       >
         <clipPath id="clip">
-          <rect x="120" y="0" width={width - margin_left} height={height - 25}></rect>
+          <rect x="120" y="0" width={dims.width - dims.margin_left - dims.width_controls} height={dims.height - 25}></rect>
         </clipPath>
-        <TimelineHandles dims={this.getClientDims()} onMoveTime={(dir) => { this.onMoveTime(dir) }} />
+        <TimelineHandles dims={dims} onMoveTime={(dir) => { this.onMoveTime(dir) }} />
+        <TimelineZoomControls zoomLevels={this.props.app.zoomLevels} dims={dims} onApplyZoom={(zoom) => { this.onApplyZoom(zoom); }} />
       </svg>
     ); 
   }

src/components/TimelineHandles.jsx

@@ -11,7 +11,7 @@ class TimelineHandles extends React.Component {
           </circle>
           <path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z" transform="rotate(270)"></path>
         </g>
-        <g transform={`translate(${dims.width - 20}, 62)`}  onClick={() => this.props.onMoveTime('forward')}>
+        <g transform={`translate(${dims.width - dims.width_controls - 20}, 62)`}  onClick={() => this.props.onMoveTime('forward')}>
           <circle r="15">
           </circle>
           <path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z" transform="rotate(90)"></path>

src/components/TimelineZoomControls.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+class TimelineZoomControls extends React.Component {
+
+  renderZoom(zoom, idx) {
+    return (
+      <text
+        className={`zoom-level-button ${zoom.active ? 'active' : ''}`}
+        x="60"
+        y={(idx * 15) + 20}
+        onClick={() => this.props.onApplyZoom(zoom)}
+      >
+        {zoom.label}
+      </text>
+    )
+  }
+
+  render() {
+    const dims = this.props.dims;
+
+    return (
+      <g transform={`translate(${dims.width - dims.width_controls}, 0)`}>
+        {this.props.zoomLevels.map((z, idx) => this.renderZoom(z, idx))}
+      </g>
+    );
+  }
+}
+
+export default TimelineZoomControls;