Added methods for drawing Y and Z axis labels

lib/graph3d/Graph3d.js

@@ -1254,6 +1254,48 @@ Graph3d.prototype.drawAxisLabelX = function(ctx, point3d, text, armAngle, yMargi
 }
 
 
+Graph3d.prototype.drawAxisLabelY = function(ctx, point3d, text, armAngle, yMargin) {
+  if (yMargin === undefined) {
+    yMargin = 0;
+  }
+
+  var point2d = this._convert3Dto2D(point3d);
+
+  if (Math.cos(armAngle * 2) < 0) {
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'top';
+    point2d.y += yMargin;
+  }
+  else if (Math.sin(armAngle * 2) > 0){
+    ctx.textAlign = 'right';
+    ctx.textBaseline = 'middle';
+  }
+  else {
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+  }
+
+  ctx.fillStyle = this.axisColor;
+  ctx.fillText(text, point2d.x, point2d.y);
+}
+
+
+Graph3d.prototype.drawAxisLabelZ = function(ctx, point3d, text, offset) {
+  if (offset === undefined) {
+    offset = 0;
+  }
+
+  var point2d = this._convert3Dto2D(point3d);
+  ctx.textAlign = 'right';
+  ctx.textBaseline = 'middle';
+  ctx.fillStyle = this.axisColor;
+  ctx.fillText(text, point2d.x - offset, point2d.y);
+};
+
+
+/**
+
+
 /**
  * Draw a line between 2d points 'from' and 'to'.
  *
@@ -1326,38 +1368,27 @@ Graph3d.prototype._redrawAxis = function() {
   step.start(true);
 
   while (!step.end()) {
+    var y = step.getCurrent();
+
     if (this.showGrid) {
-      from = new Point3d(this.xMin, step.getCurrent(), this.zMin);
-      to   = new Point3d(this.xMax, step.getCurrent(), this.zMin);
+      from = new Point3d(this.xMin, y, this.zMin);
+      to   = new Point3d(this.xMax, y, this.zMin);
       this._line3d(ctx, from, to, this.gridColor);
     }
     else {
-      from = new Point3d(this.xMin, step.getCurrent(), this.zMin);
-      to   = new Point3d(this.xMin+gridLenY, step.getCurrent(), this.zMin);
+      from = new Point3d(this.xMin, y, this.zMin);
+      to   = new Point3d(this.xMin+gridLenY, y, this.zMin);
       this._line3d(ctx, from, to, this.axisColor);
 
-      from = new Point3d(this.xMax, step.getCurrent(), this.zMin);
-      to   = new Point3d(this.xMax-gridLenY, step.getCurrent(), this.zMin);
+      from = new Point3d(this.xMax, y, this.zMin);
+      to   = new Point3d(this.xMax-gridLenY, y, this.zMin);
       this._line3d(ctx, from, to, this.axisColor);
     }
 
-    xText = (Math.sin(armAngle ) > 0) ? this.xMin : this.xMax;
-    text = this._convert3Dto2D(new Point3d(xText, step.getCurrent(), this.zMin));
-    if (Math.cos(armAngle * 2) < 0) {
-      ctx.textAlign = 'center';
-      ctx.textBaseline = 'top';
-      text.y += textMargin;
-    }
-    else if (Math.sin(armAngle * 2) > 0){
-      ctx.textAlign = 'right';
-      ctx.textBaseline = 'middle';
-    }
-    else {
-      ctx.textAlign = 'left';
-      ctx.textBaseline = 'middle';
-    }
-    ctx.fillStyle = this.axisColor;
-    ctx.fillText('  ' + this.yValueLabel(step.getCurrent()) + '  ', text.x, text.y);    
+    xText   = (Math.sin(armAngle ) > 0) ? this.xMin : this.xMax;
+    point3d = new Point3d(xText, y, this.zMin);
+    var msg = '  ' + this.yValueLabel(y) + '  ';    
+    this.drawAxisLabelY(ctx, point3d, msg, armAngle, textMargin);
 
     step.next();
   }
@@ -1370,19 +1401,22 @@ Graph3d.prototype._redrawAxis = function() {
 
   xText = (Math.cos(armAngle ) > 0) ? this.xMin : this.xMax;
   yText = (Math.sin(armAngle ) < 0) ? this.yMin : this.yMax;
+
   while (!step.end()) {
+    var z = step.getCurrent();
+
     // TODO: make z-grid lines really 3d?
-    from = this._convert3Dto2D(new Point3d(xText, yText, step.getCurrent()));
-    to = new Point2d(from.x - textMargin, from.y);
-    this._line(ctx, from, to, this.axisColor);
+    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);
 
-    ctx.textAlign = 'right';
-    ctx.textBaseline = 'middle';
-    ctx.fillStyle = this.axisColor;
-    ctx.fillText(this.zValueLabel(step.getCurrent()) + ' ', from.x - 5, from.y);
+    var msg = this.zValueLabel(z) + ' ';
+    this.drawAxisLabelZ(ctx, from3d, msg, 5);
 
     step.next();
   }
+
   ctx.lineWidth = 1;
   from = new Point3d(xText, yText, this.zMin);
   to   = new Point3d(xText, yText, this.zMax);
@@ -1424,37 +1458,23 @@ Graph3d.prototype._redrawAxis = function() {
   var yLabel = this.yLabel;
   if (yLabel.length > 0) {
     xOffset = 0.1 / this.scale.x;
-    xText = (Math.sin(armAngle ) > 0) ? this.xMin - xOffset : this.xMax + xOffset;
-    yText = (this.yMin + this.yMax) / 2;
-    text = this._convert3Dto2D(new Point3d(xText, yText, this.zMin));
-    if (Math.cos(armAngle * 2) < 0) {
-      ctx.textAlign = 'center';
-      ctx.textBaseline = 'top';
-    }
-    else if (Math.sin(armAngle * 2) > 0){
-      ctx.textAlign = 'right';
-      ctx.textBaseline = 'middle';
-    }
-    else {
-      ctx.textAlign = 'left';
-      ctx.textBaseline = 'middle';
-    }
-    ctx.fillStyle = this.axisColor;
-    ctx.fillText(yLabel, text.x, text.y);
+    xText   = (Math.sin(armAngle ) > 0) ? this.xMin - xOffset : this.xMax + xOffset;
+    yText   = (this.yMin + this.yMax) / 2;
+    text    = new Point3d(xText, yText, this.zMin);
+
+    this.drawAxisLabelY(ctx, text, yLabel, armAngle);
   }
 
   // draw z-label
   var zLabel = this.zLabel;
   if (zLabel.length > 0) {
     offset = 30;  // pixels.  // TODO: relate to the max width of the values on the z axis?
-    xText = (Math.cos(armAngle ) > 0) ? this.xMin : this.xMax;
-    yText = (Math.sin(armAngle ) < 0) ? this.yMin : this.yMax;
-    zText = (this.zMin + this.zMax) / 2;
-    text = this._convert3Dto2D(new Point3d(xText, yText, zText));
-    ctx.textAlign = 'right';
-    ctx.textBaseline = 'middle';
-    ctx.fillStyle = this.axisColor;
-    ctx.fillText(zLabel, text.x - offset, text.y);
+    xText  = (Math.cos(armAngle ) > 0) ? this.xMin : this.xMax;
+    yText  = (Math.sin(armAngle ) < 0) ? this.yMin : this.yMax;
+    zText  = (this.zMin + this.zMax) / 2;
+    text   = new Point3d(xText, yText, zText);
+
+    this.drawAxisLabelZ(ctx, text, zLabel, offset);
   }
 };