Remove option to turn off zoom

src/app.tsx

@@ -178,7 +178,6 @@ interface Arguments {
   chartType: ChartType;
   gedcom?: string;
   images?: Map<string, string>;
-  enableZoom: boolean;
 }
 
 /**
@@ -225,7 +224,6 @@ function getArguments(location: H.Location<any>): Arguments {
 
     gedcom: location.state && location.state.data,
     images: location.state && location.state.images,
-    enableZoom: getParam('enableZoom') !== 'false', // True by default.
   };
 }
 
@@ -265,8 +263,6 @@ interface State {
   /** Source of the data. */
   source?: DataSourceEnum;
   loadingMore?: boolean;
-  /** Whether the zoom functionality is enabled. */
-  enableZoom: boolean;
 }
 
 export class App extends React.Component<RouteComponentProps, {}> {
@@ -276,7 +272,6 @@ export class App extends React.Component<RouteComponentProps, {}> {
     standalone: true,
     chartType: ChartType.Hourglass,
     showErrorPopup: false,
-    enableZoom: false,
   };
   chartRef: Chart | null = null;
 
@@ -392,7 +387,6 @@ export class App extends React.Component<RouteComponentProps, {}> {
           standalone: args.standalone,
           chartType: args.chartType,
           source: args.source,
-          enableZoom: args.enableZoom,
         }),
       );
       try {
@@ -411,7 +405,6 @@ export class App extends React.Component<RouteComponentProps, {}> {
             standalone: args.standalone,
             chartType: args.chartType,
             source: args.source,
-            enableZoom: args.enableZoom,
           }),
         );
       } catch (error) {
@@ -445,7 +438,6 @@ export class App extends React.Component<RouteComponentProps, {}> {
             standalone: args.standalone,
             chartType: args.chartType,
             source: args.source,
-            enableZoom: args.enableZoom,
             loadingMore: false,
           }),
         );
@@ -549,7 +541,6 @@ export class App extends React.Component<RouteComponentProps, {}> {
             chartType={this.state.chartType}
             onSelection={this.onSelection}
             ref={(ref) => (this.chartRef = ref)}
-            enableZoom={this.state.enableZoom}
           />
           {this.state.showSidePanel ? (
             <Responsive minWidth={768} id="sidePanel">

src/chart.tsx

@@ -14,7 +14,7 @@ import {
   FancyChart,
   CircleRenderer,
 } from 'topola';
-import { Responsive } from 'semantic-ui-react';
+import {Responsive} from 'semantic-ui-react';
 
 /** How much to zoom when using the +/- buttons. */
 const ZOOM_FACTOR = 1.3;
@@ -24,30 +24,28 @@ const ZOOM_FACTOR = 1.3;
  *
  * @param size the size of the chart
  */
-function zoomed(size: [number, number], enableZoom: boolean) {
+function zoomed(size: [number, number]) {
   const parent = d3.select('#svgContainer').node() as Element;
 
-  if (enableZoom) {
+  const scale = d3.event.transform.k;
-    const scale = d3.event.transform.k;
+  const offsetX = d3.max([0, (parent.clientWidth - size[0] * scale) / 2]);
-    const offsetX = d3.max([0, (parent.clientWidth - size[0] * scale) / 2]);
+  const offsetY = d3.max([0, (parent.clientHeight - size[1] * scale) / 2]);
-    const offsetY = d3.max([0, (parent.clientHeight - size[1] * scale) / 2]);
+  d3.select('#chartSvg')
-    d3.select('#chartSvg')
+    .attr('width', size[0] * scale)
-      .attr('width', size[0] * scale)
+    .attr('height', size[1] * scale)
-      .attr('height', size[1] * scale)
+    .attr('transform', `translate(${offsetX}, ${offsetY})`);
-      .attr('transform', `translate(${offsetX}, ${offsetY})`);
+  d3.select('#chart').attr('transform', `scale(${scale})`);
-    d3.select('#chart').attr('transform', `scale(${scale})`);
-  }
 
   parent.scrollLeft = -d3.event.transform.x;
   parent.scrollTop = -d3.event.transform.y;
 }
 
 /** Called when the scrollbars are used. */
-function scrolled(enableZoom: boolean) {
+function scrolled() {
   const parent = d3.select('#svgContainer').node() as Element;
   const x = parent.scrollLeft + parent.clientWidth / 2;
   const y = parent.scrollTop + parent.clientHeight / 2;
-  const scale = enableZoom ? d3.zoomTransform(parent).k : 1;
+  const scale = d3.zoomTransform(parent).k;
   d3.select(parent).call(d3.zoom().translateTo, x / scale, y / scale);
 }
 
@@ -135,7 +133,6 @@ export interface ChartProps {
   selection: IndiInfo;
   chartType: ChartType;
   onSelection: (indiInfo: IndiInfo) => void;
-  enableZoom: boolean;
 }
 
 /** Component showing the genealogy chart and handling transition animations. */
@@ -216,24 +213,22 @@ export class Chart extends React.PureComponent<ChartProps, {}> {
     const svg = d3.select('#chartSvg');
     const parent = d3.select('#svgContainer').node() as Element;
 
-    const scale = this.props.enableZoom ? d3.zoomTransform(parent).k : 1;
+    const scale = d3.zoomTransform(parent).k;
     const zoomOutFactor = d3.min([
       1,
       scale,
       parent.clientWidth / chartInfo.size[0],
       parent.clientHeight / chartInfo.size[1],
     ])!;
-    const extent: [number, number] = this.props.enableZoom
+    const extent: [number, number] = [d3.max([0.1, zoomOutFactor])!, 2];
-      ? [d3.max([0.1, zoomOutFactor])!, 2]
-      : [1, 1];
 
     this.zoomBehavior = d3
       .zoom()
       .scaleExtent(extent)
       .translateExtent([[0, 0], chartInfo.size])
-      .on('zoom', () => zoomed(chartInfo.size, this.props.enableZoom));
+      .on('zoom', () => zoomed(chartInfo.size));
     d3.select(parent)
-      .on('scroll', () => scrolled(this.props.enableZoom))
+      .on('scroll', scrolled)
       .call(this.zoomBehavior);
 
     const scrollTopTween = (scrollTop: number) => {
@@ -309,19 +304,17 @@ export class Chart extends React.PureComponent<ChartProps, {}> {
   render() {
     return (
       <div id="svgContainer">
-        {this.props.enableZoom ? (
+        <Responsive minWidth={768} className="zoom">
-          <Responsive minWidth={768} className="zoom">
+          <button className="zoom-in" onClick={() => this.zoom(ZOOM_FACTOR)}>
-            <button className="zoom-in" onClick={() => this.zoom(ZOOM_FACTOR)}>
+            +
-              +
+          </button>
-            </button>
+          <button
-            <button
+            className="zoom-out"
-              className="zoom-out"
+            onClick={() => this.zoom(1 / ZOOM_FACTOR)}
-              onClick={() => this.zoom(1 / ZOOM_FACTOR)}
+          >
-            >
+            −
-              −
+          </button>
-            </button>
+        </Responsive>
-          </Responsive>
-        ) : null}
         <svg id="chartSvg">
           <g id="chart" />
         </svg>
@@ -334,19 +327,18 @@ export class Chart extends React.PureComponent<ChartProps, {}> {
     const svg = document.getElementById('chartSvg')!.cloneNode(true) as Element;
 
     svg.removeAttribute('transform');
-    if (this.props.enableZoom) {
+    const parent = d3.select('#svgContainer').node() as Element;
-      const parent = d3.select('#svgContainer').node() as Element;
+    const scale = d3.zoomTransform(parent).k;
-      const scale = d3.zoomTransform(parent).k;
+    svg.setAttribute(
-      svg.setAttribute(
+      'width',
-        'width',
+      String(Number(svg.getAttribute('width')) / scale),
-        String(Number(svg.getAttribute('width')) / scale),
+    );
-      );
+    svg.setAttribute(
-      svg.setAttribute(
+      'height',
-        'height',
+      String(Number(svg.getAttribute('height')) / scale),
-        String(Number(svg.getAttribute('height')) / scale),
+    );
-      );
+    svg.querySelector('#chart')!.removeAttribute('transform');
-      svg.querySelector('#chart')!.removeAttribute('transform');
+
-    }
     return svg;
   }