Added showX(YZ)Axis options to Graph3d (#2686)

* Added showX(YZ)Axis to Graph3d

* Added show_Axis options to docs and playground example

* Resolved merge conflict

* Added show_Axis options to docs and playground example

docs/graph3d/index.html

@@ -422,9 +422,27 @@ var options = {
       <td>showGrid</td>
       <td>boolean</td>
       <td>true</td>
-      <td>If true, grid lines are draw in the x-y surface (the bottom of the 3d
+      <td>If true, grid lines are drawn in the x-y surface (the bottom of the 3d
         graph).</td>
     </tr>
+    <tr>
+      <td>showXAxis</td>
+      <td>boolean</td>
+      <td>true</td>
+      <td>If true, X axis and X axis labels are drawn.</td>
+    </tr>
+    <tr>
+      <td>showYAxis</td>
+      <td>boolean</td>
+      <td>true</td>
+      <td>If true, Y axis and Y axis labels are drawn.</td>
+    </tr>
+    <tr>
+      <td>showZAxis</td>
+      <td>boolean</td>
+      <td>true</td>
+      <td>If true, Z axis and Z axis labels are drawn.</td>
+    </tr>
     <tr>
       <td>showPerspective</td>
       <td>boolean</td>

examples/graph3d/playground/index.html

@@ -112,6 +112,19 @@
                 <td>showGrid</td>
                 <td><input type="checkbox" id="showGrid" checked /></td>
             </tr>
+            <tr>
+                <td>showXAxis</td>
+                <td><input type="checkbox" id="showXAxis" checked /></td>
+            </tr>
+            <tr>
+                <td>showYAxis</td>
+                <td><input type="checkbox" id="showYAxis" checked /></td>
+            </tr>
+            <tr>
+                <td>showZAxis</td>
+                <td><input type="checkbox" id="showZAxis" checked /></td>
+            </tr>
+
             <tr>
                 <td>showPerspective</td>
                 <td><input type="checkbox" id="showPerspective" checked /></td>

examples/graph3d/playground/playground.js

@@ -406,6 +406,9 @@ function getOptions() {
     style:              document.getElementById("style").value,
     showAnimationControls: (document.getElementById("showAnimationControls").checked != false),
     showGrid:          (document.getElementById("showGrid").checked != false),
+    showXAxis:         (document.getElementById("showXAxis").checked != false),
+    showYAxis:         (document.getElementById("showYAxis").checked != false),
+    showZAxis:         (document.getElementById("showZAxis").checked != false),
     showPerspective:   (document.getElementById("showPerspective").checked != false),
     showLegend:        (document.getElementById("showLegend").checked != false),
     showShadow:        (document.getElementById("showShadow").checked != false),

lib/graph3d/Graph3d.js

@@ -45,6 +45,9 @@ var DEFAULTS = {
   xValueLabel      : function(v) { return v; },
   yValueLabel      : function(v) { return v; },
   zValueLabel      : function(v) { return v; },
+  showXAxis        : true,
+  showYAxis        : true,
+  showZAxis        : true,
   showGrid         : true,
   showPerspective  : true,
   showShadow       : false,
@@ -1288,7 +1291,7 @@ Graph3d.prototype._redrawAxis = function() {
       to   = new Point3d(x, yRange.max, zRange.min);
       this._line3d(ctx, from, to, this.gridColor);
     }
-    else {
+    else if (this.showXAxis) {
       from = new Point3d(x, yRange.min, zRange.min);
       to   = new Point3d(x, yRange.min+gridLenX, zRange.min);
       this._line3d(ctx, from, to, this.axisColor);
@@ -1298,10 +1301,12 @@ Graph3d.prototype._redrawAxis = function() {
       this._line3d(ctx, from, to, this.axisColor);
     }
 
-    yText       = (armVector.x > 0) ? yRange.min : yRange.max;
-    var point3d = new Point3d(x, yText, zRange.min);
-    var msg     = '  ' + this.xValueLabel(x) + '  ';
-    this.drawAxisLabelX(ctx, point3d, msg, armAngle, textMargin);
+    if (this.showXAxis) {
+      yText       = (armVector.x > 0) ? yRange.min : yRange.max;
+      var point3d = new Point3d(x, yText, zRange.min);
+      var msg     = '  ' + this.xValueLabel(x) + '  ';
+      this.drawAxisLabelX(ctx, point3d, msg, armAngle, textMargin);
+    }
 
     step.next();
   }
@@ -1320,7 +1325,7 @@ Graph3d.prototype._redrawAxis = function() {
       to   = new Point3d(xRange.max, y, zRange.min);
       this._line3d(ctx, from, to, this.gridColor);
     }
-    else {
+    else if (this.showYAxis){
       from = new Point3d(xRange.min, y, zRange.min);
       to   = new Point3d(xRange.min+gridLenY, y, zRange.min);
       this._line3d(ctx, from, to, this.axisColor);
@@ -1330,71 +1335,79 @@ Graph3d.prototype._redrawAxis = function() {
       this._line3d(ctx, from, to, this.axisColor);
     }
 
-    xText   = (armVector.y > 0) ? xRange.min : xRange.max;
-    point3d = new Point3d(xText, y, zRange.min);
-    var msg = '  ' + this.yValueLabel(y) + '  ';
-    this.drawAxisLabelY(ctx, point3d, msg, armAngle, textMargin);
+    if (this.showYAxis) {
+      xText   = (armVector.y > 0) ? xRange.min : xRange.max;
+      point3d = new Point3d(xText, y, zRange.min);
+      var msg = '  ' + this.yValueLabel(y) + '  ';    
+      this.drawAxisLabelY(ctx, point3d, msg, armAngle, textMargin);
+    }
 
     step.next();
   }
 
   // draw z-grid lines and axis
-  ctx.lineWidth = 1;
-  prettyStep = (this.defaultZStep === undefined);
-  step = new StepNumber(zRange.min, zRange.max, this.zStep, prettyStep);
-  step.start(true);
+  if (this.showZAxis) {
+    ctx.lineWidth = 1;
+    prettyStep = (this.defaultZStep === undefined);
+    step = new StepNumber(zRange.min, zRange.max, this.zStep, prettyStep);
+    step.start(true);
 
-  xText = (armVector.x > 0) ? xRange.min : xRange.max;
-  yText = (armVector.y < 0) ? yRange.min : yRange.max;
+    xText = (armVector.x > 0) ? xRange.min : xRange.max;
+    yText = (armVector.y < 0) ? yRange.min : yRange.max;
 
-  while (!step.end()) {
-    var z = step.getCurrent();
+    while (!step.end()) {
+      var z = step.getCurrent();
 
-    // TODO: make z-grid lines really 3d?
-    var from3d = new Point3d(xText, yText, z);
-    var from2d = this._convert3Dto2D(from3d);
-    to = new Point2d(from2d.x - textMargin, from2d.y);
-    this._line(ctx, from2d, to, this.axisColor);
+      // TODO: make z-grid lines really 3d?
+      var from3d = new Point3d(xText, yText, z);
+      var from2d = this._convert3Dto2D(from3d);
+      to = new Point2d(from2d.x - textMargin, from2d.y);
+      this._line(ctx, from2d, to, this.axisColor);
 
-    var msg = this.zValueLabel(z) + ' ';
-    this.drawAxisLabelZ(ctx, from3d, msg, 5);
+      var msg = this.zValueLabel(z) + ' ';
+      this.drawAxisLabelZ(ctx, from3d, msg, 5);
 
-    step.next();
-  }
+      step.next();
+    }
 
-  ctx.lineWidth = 1;
-  from = new Point3d(xText, yText, zRange.min);
-  to   = new Point3d(xText, yText, zRange.max);
-  this._line3d(ctx, from, to, this.axisColor);
+    ctx.lineWidth = 1;
+    from = new Point3d(xText, yText, zRange.min);
+    to   = new Point3d(xText, yText, zRange.max);
+    this._line3d(ctx, from, to, this.axisColor);
+  }
 
   // draw x-axis
-  var xMin2d;
-  var xMax2d;
-  ctx.lineWidth = 1;
+  if (this.showXAxis) {
+    var xMin2d;
+    var xMax2d;
+    ctx.lineWidth = 1;
 
-  // line at yMin
-  xMin2d = new Point3d(xRange.min, yRange.min, zRange.min);
-  xMax2d = new Point3d(xRange.max, yRange.min, zRange.min);
-  this._line3d(ctx, xMin2d, xMax2d, this.axisColor);
-  // line at ymax
-  xMin2d = new Point3d(xRange.min, yRange.max, zRange.min);
-  xMax2d = new Point3d(xRange.max, yRange.max, zRange.min);
-  this._line3d(ctx, xMin2d, xMax2d, this.axisColor);
+    // line at yMin
+    xMin2d = new Point3d(xRange.min, yRange.min, zRange.min);
+    xMax2d = new Point3d(xRange.max, yRange.min, zRange.min);
+    this._line3d(ctx, xMin2d, xMax2d, this.axisColor);
+    // line at ymax
+    xMin2d = new Point3d(xRange.min, yRange.max, zRange.min);
+    xMax2d = new Point3d(xRange.max, yRange.max, zRange.min);
+    this._line3d(ctx, xMin2d, xMax2d, this.axisColor);
+  }
 
   // draw y-axis
-  ctx.lineWidth = 1;
-  // line at xMin
-  from = new Point3d(xRange.min, yRange.min, zRange.min);
-  to   = new Point3d(xRange.min, yRange.max, zRange.min);
-  this._line3d(ctx, from, to, this.axisColor);
-  // line at xMax
-  from = new Point3d(xRange.max, yRange.min, zRange.min);
-  to   = new Point3d(xRange.max, yRange.max, zRange.min);
-  this._line3d(ctx, from, to, this.axisColor);
+  if (this.showYAxis) {
+    ctx.lineWidth = 1;
+    // line at xMin
+    from = new Point3d(xRange.min, yRange.min, zRange.min);
+    to   = new Point3d(xRange.min, yRange.max, zRange.min);
+    this._line3d(ctx, from, to, this.axisColor);
+    // line at xMax
+    from = new Point3d(xRange.max, yRange.min, zRange.min);
+    to   = new Point3d(xRange.max, yRange.max, zRange.min);
+    this._line3d(ctx, from, to, this.axisColor);
+  }
 
   // draw x-label
   var xLabel = this.xLabel;
-  if (xLabel.length > 0) {
+  if (xLabel.length > 0 && this.showXAxis) {
     yOffset = 0.1 / this.scale.y;
     xText   = (xRange.max + 3*xRange.min)/4;
     yText   = (armVector.x > 0) ? yRange.min - yOffset: yRange.max + yOffset;
@@ -1404,7 +1417,7 @@ Graph3d.prototype._redrawAxis = function() {
 
   // draw y-label
   var yLabel = this.yLabel;
-  if (yLabel.length > 0) {
+  if (yLabel.length > 0 && this.showYAxis) {
     xOffset = 0.1 / this.scale.x;
     xText   = (armVector.y > 0) ? xRange.min - xOffset : xRange.max + xOffset;
     yText   = (yRange.max + 3*yRange.min)/4;
@@ -1415,7 +1428,7 @@ Graph3d.prototype._redrawAxis = function() {
 
   // draw z-label
   var zLabel = this.zLabel;
-  if (zLabel.length > 0) {
+  if (zLabel.length > 0 && this.showZAxis) {
     offset = 30;  // pixels.  // TODO: relate to the max width of the values on the z axis?
     xText  = (armVector.x > 0) ? xRange.min : xRange.max;
     yText  = (armVector.y < 0) ? yRange.min : yRange.max;

lib/graph3d/Settings.js

@@ -53,6 +53,9 @@ var OPTIONKEYS = [
   'xValueLabel',
   'yValueLabel',
   'zValueLabel',
+  'showXAxis',
+  'showYAxis',
+  'showZAxis',
   'showGrid',
   'showPerspective',
   'showShadow',