added the ability to toggle axis (#193)

Co-authored-by: Brynjulf <[email protected]>
equinor · Apr 22, 2020 · 17f6eb5 · 17f6eb5
1 parent 81d0533
commit 17f6eb5
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 0 deletions.
diff --git a/.storybook/src/intersection.stories.ts b/.storybook/src/intersection.stories.ts
@@ -233,6 +233,16 @@ export const intersection = () => {
   const btnCompletion = createButton(controller, completionLayer, 'Completion');
   const btnGeomodelLabels = createButton(controller, geomodelLabelsLayer, 'Geo model labels');
   const btnSeismic = createButton(controller, seismicLayer, 'Seismic');
+  let show = true;
+  const toggleAxis = createButtonWithCb('Toggle axis', () => {
+    if (show) {
+      controller.hideAxis();
+      show = false;
+    } else {
+      controller.showAxis();
+      show = true;
+    }
+  });
   const btnLarger = createButtonWithCb('800x600', () => {
     const w = 800;
     const h = 600;
@@ -263,6 +273,7 @@ export const intersection = () => {
   btnContainer.appendChild(btnSeismic);
   btnContainer.appendChild(btnLarger);
   btnContainer.appendChild(btnSmaller);
+  btnContainer.appendChild(toggleAxis);
 
   root.appendChild(container);
   root.appendChild(btnContainer);

diff --git a/src/components/axis.ts b/src/components/axis.ts
@@ -7,6 +7,7 @@ import { OnResizeEvent, OnRescaleEvent } from '../interfaces';
 type Options = {
   offsetX: number;
   offsetY: number;
+  visible: boolean;
 };
 
 export class Axis {
@@ -19,6 +20,7 @@ export class Axis {
   unitOfMeasure: string;
   private _offsetX: number = 0;
   private _offsetY: number = 0;
+  private visible: boolean = true;
 
   constructor(
     mainGroup: Selection<SVGElement, any, null, undefined>,
@@ -39,6 +41,9 @@ export class Axis {
     if (options && options.offsetX) {
       this._offsetY = options.offsetY;
     }
+    if (options && options.visible) {
+      this.visible = options.visible;
+    }
     this._scaleX = scaleLinear().domain([0, 1]).range([0, 1]);
     this._scaleY = scaleLinear().domain([0, 1]).range([0, 1]);
   }
@@ -144,7 +149,22 @@ export class Axis {
     _scaleX.domain([xBounds[0] - offsetX, xBounds[1] - offsetX]).range(xRange);
     _scaleY.domain([yBounds[0] - offsetY, yBounds[1] - offsetY]).range(yRange);
 
+    if (this.visible) {
+      this.render();
+    }
+  }
+
+  show(): Axis {
+    this.visible = true;
+    this.mainGroup.attr('visibility', 'visible');
     this.render();
+    return this;
+  }
+
+  hide(): Axis {
+    this.visible = false;
+    this.mainGroup.attr('visibility', 'hidden');
+    return this;
   }
 
   get offsetX(): number {

diff --git a/src/control/LayerManager.ts b/src/control/LayerManager.ts
@@ -127,6 +127,16 @@ export class LayerManager {
     this.layers.forEach((layer) => (layer.referenceSystem = irs));
   }
 
+  showAxis(): LayerManager {
+    this.axis.show();
+    return this;
+  }
+
+  hideAxis(): LayerManager {
+    this.axis.hide();
+    return this;
+  }
+
   setAxisOffset(x: number, y: number): LayerManager {
     this.axis.offsetX = x;
     this.axis.offsetY = y;

diff --git a/src/control/MainController.ts b/src/control/MainController.ts
@@ -104,6 +104,16 @@ export class Controller {
     return this;
   }
 
+  showAxis(): Controller {
+    this.layerManager.showAxis();
+    return this;
+  }
+
+  hideAxis(): Controller {
+    this.layerManager.hideAxis();
+    return this;
+  }
+
   setAxisOffset(x: number, y: number): Controller {
     this.layerManager.setAxisOffset(x, y);
     return this;