Add point draw methods for styles 'dot-color' and 'dot-size'

lib/graph3d/Graph3d.js

@@ -837,9 +837,15 @@ Graph3d.prototype.getPointDrawingMethod = function() {
     case Graph3d.STYLE.DOT:
       pointDrawingMethod = Graph3d.prototype._redrawDotGraphPoint;
       break;
-    case Graph3d.STYLE.DOT:
+    case Graph3d.STYLE.DOTLINE:
       pointDrawingMethod = Graph3d.prototype._redrawDotLineGraphPoint;
       break;
+    case Graph3d.STYLE.DOTCOLOR:
+      pointDrawingMethod = Graph3d.prototype._redrawDotColorGraphPoint;
+      break;
+    case Graph3d.STYLE.DOTSIZE:
+      pointDrawingMethod = Graph3d.prototype._redrawDotSizeGraphPoint;
+      break;
   }
 
   return pointDrawingMethod;
@@ -877,8 +883,8 @@ Graph3d.prototype.redraw = function() {
       this._redrawDataLine();
     }
     else {
-      // style is DOT, DOTLINE, DOTCOLOR, DOTSIZE
-      this._redrawDataDot();
+      // Should not be reached any more.
+      throw new Error('Unknown graph style \'' + this.style + '\'');
     }
   }
 
@@ -893,6 +899,10 @@ Graph3d.prototype.redraw = function() {
 Graph3d.prototype._getContext = function() {
   var canvas = this.frame.canvas;
   var ctx = canvas.getContext('2d');
+
+  ctx.lineJoin = 'round';
+  ctx.lineCap  = 'round';
+
   return ctx;
 };
 
@@ -1430,9 +1440,6 @@ Graph3d.prototype._redrawDataGrid = function() {
     topSideVisible, fillStyle, strokeStyle, lineWidth,
     h, s, v, zAvg;
 
-  ctx.lineJoin = 'round';
-  ctx.lineCap = 'round';
-
   if (this.dataPoints === undefined || this.dataPoints.length <= 0)
     return; // TODO: throw exception?
 
@@ -1522,95 +1529,18 @@ Graph3d.prototype._getStrokeWidth = function(point) {
   return this.dataColor.strokeWidth;
 };
 
-/**
- * Draw all datapoints as dots.
- * This function can be used when the style is 'dot' or 'dot-line'
- */
-Graph3d.prototype._redrawDataDot = function() {
-  var ctx = this._getContext();
-  var i;
-
-  if (this.dataPoints === undefined || this.dataPoints.length <= 0)
-    return;  // TODO: throw exception?
-
-  this._calcTranslations(this.dataPoints);
-
-  // draw the datapoints as colored circles
-  var dotSize = this._dotSize();
-  for (i = 0; i < this.dataPoints.length; i++) {
-    var point = this.dataPoints[i];
-
-    if (this.style === Graph3d.STYLE.DOTLINE) {
-      // draw a vertical line from the bottom to the graph value
-      //var from = this._convert3Dto2D(new Point3d(point.point.x, point.point.y, this.zMin));
-      var from = this._convert3Dto2D(point.bottom);
-      ctx.lineWidth = 1;
-      this._line(ctx, from, point.screen, this.gridColor);
-    }
-
-    // calculate radius for the circle
-    var size;
-    if (this.style === Graph3d.STYLE.DOTSIZE) {
-      size = dotSize/2 + 2*dotSize * (point.point.value - this.valueMin) / (this.valueMax - this.valueMin);
-    }
-    else {
-      size = dotSize;
-    }
-
-    var radius;
-    if (this.showPerspective) {
-      radius = size / -point.trans.z;
-    }
-    else {
-      radius = size * -(this.eye.z / this.camera.getArmLength());
-    }
-    if (radius < 0) {
-      radius = 0;
-    }
-
-    var hue, color, borderColor;
-    if (this.style === Graph3d.STYLE.DOTCOLOR ) {
-      // calculate the color based on the value
-      hue = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240;
-      color = this._hsv2rgb(hue, 1, 1);
-      borderColor = this._hsv2rgb(hue, 1, 0.8);
-    }
-    else if (this.style === Graph3d.STYLE.DOTSIZE) {
-      color = this.dataColor.fill;
-      borderColor = this.dataColor.stroke;
-    }
-    else {
-      // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
-      hue = (1 - (point.point.z - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
-      color = this._hsv2rgb(hue, 1, 1);
-      borderColor = this._hsv2rgb(hue, 1, 0.8);
-    }
-
-    // draw the circle
-    ctx.lineWidth = this._getStrokeWidth(point);
-    ctx.strokeStyle = borderColor;
-    ctx.fillStyle = color;
-    ctx.beginPath();
-    ctx.arc(point.screen.x, point.screen.y, radius, 0, Math.PI*2, true);
-    ctx.fill();
-    ctx.stroke();
-  }
-};
-
 
 // -----------------------------------------------------------------------------
 // Drawing primitives for the graphs
 // -----------------------------------------------------------------------------
 
+
 /**
  * Draw a bar element in the view with the given properties.
  */
 Graph3d.prototype._redrawBar = function(ctx, point, xWidth, yWidth, color, borderColor) {
   var i, j, surface, corners;
 
-  ctx.lineJoin = 'round';
-  ctx.lineCap = 'round';
-
   // calculate all corner points
   var me = this;
   var point3d = point.point;
@@ -1688,7 +1618,12 @@ Graph3d.prototype._redrawBar = function(ctx, point, xWidth, yWidth, color, borde
 };
 
 
-Graph3d.prototype._drawCircle = function(ctx, point, radius, color, borderColor) {
+/**
+ * @param size optional; if not specified use value from 'this._dotSize()`
+ */
+Graph3d.prototype._drawCircle = function(ctx, point, color, borderColor, size) {
+  var radius = this._calcRadius(point, size);
+
   ctx.lineWidth   = this._getStrokeWidth(point);
   ctx.strokeStyle = borderColor;
   ctx.fillStyle   = color;
@@ -1699,7 +1634,10 @@ Graph3d.prototype._drawCircle = function(ctx, point, radius, color, borderColor)
 };
 
 
-Graph3d.prototype._getColorsRegular = function(ctx, point) {
+/**
+ * Determine the colors for the 'regular' graph styles.
+ */
+Graph3d.prototype._getColorsRegular = function(point) {
   // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
   var hue         = (1 - (point.point.z - this.zMin) * this.scale.z  / this.verticalRatio) * 240;
   var color       = this._hsv2rgb(hue, 1, 1);
@@ -1711,6 +1649,63 @@ Graph3d.prototype._getColorsRegular = function(ctx, point) {
   };
 };
 
+
+/**
+ * Get the colors for the 'color' graph styles.
+ * These styles are currently: 'bar-color' and 'dot-color'
+ */
+Graph3d.prototype._getColorsColor = function(point) {
+  // calculate the color based on the value
+  var hue         = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240;
+  var color       = this._hsv2rgb(hue, 1, 1);
+  var borderColor = this._hsv2rgb(hue, 1, 0.8);
+
+  return {
+    fill   : color,
+    border : borderColor 
+  };
+};
+
+
+/**
+ * Get the colors for the 'size' graph styles.
+ * These styles are currently: 'bar-size' and 'dot-size'
+ */
+Graph3d.prototype._getColorsSize = function() {
+  return {
+    fill   : this.dataColor.fill,
+    border : this.dataColor.stroke
+  };
+};
+
+
+/**
+ * Determine the size of a point on-screen, as determined by the
+ * distance to the camera.
+ *
+ * @param size the size that needs to be translated to screen coordinates.
+ *             optional; if not passed, use the default point size.
+ */
+Graph3d.prototype._calcRadius = function(point, size) {
+  if (size === undefined) {
+    size = this._dotSize();
+  }
+
+  var radius;
+  if (this.showPerspective) {
+    radius = size / -point.trans.z;
+  }
+  else {
+    radius = size * -(this.eye.z / this.camera.getArmLength());
+  }
+  if (radius < 0) {
+    radius = 0;
+  }
+
+  return radius;
+};
+
+
 // -----------------------------------------------------------------------------
 // Methods for drawing points per graph style.
 // -----------------------------------------------------------------------------
@@ -1722,7 +1717,7 @@ Graph3d.prototype._getColorsRegular = function(ctx, point) {
 Graph3d.prototype._redrawBarGraphPoint = function(ctx, point) {
   var xWidth = this.xBarWidth / 2;
   var yWidth = this.yBarWidth / 2;
-  var colors = this._getColorsRegular(ctx, point);
+  var colors = this._getColorsRegular(point);
 
   this._redrawBar(ctx, point, xWidth, yWidth, colors.fill, colors.border);
 };
@@ -1734,13 +1729,9 @@ Graph3d.prototype._redrawBarGraphPoint = function(ctx, point) {
 Graph3d.prototype._redrawBarColorGraphPoint = function(ctx, point) {
   var xWidth = this.xBarWidth / 2;
   var yWidth = this.yBarWidth / 2;
+  var colors = this._getColorsColor(point);
 
-  // calculate the color based on the value
-  var hue         = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240;
-  var color       = this._hsv2rgb(hue, 1, 1);
-  var borderColor = this._hsv2rgb(hue, 1, 0.8);
-
-  this._redrawBar(ctx, point, xWidth, yWidth, color, borderColor);
+  this._redrawBar(ctx, point, xWidth, yWidth, colors.fill, colors.border);
 };
 
 
@@ -1753,11 +1744,9 @@ Graph3d.prototype._redrawBarSizeGraphPoint = function(ctx, point) {
   var xWidth   = (this.xBarWidth / 2) * (fraction * 0.8 + 0.2);
   var yWidth   = (this.yBarWidth / 2) * (fraction * 0.8 + 0.2);
 
-  // determine color
-  var color       = this.dataColor.fill;
-  var borderColor = this.dataColor.stroke;
+  var colors   = this._getColorsSize();
 
-  this._redrawBar(ctx, point, xWidth, yWidth, color, borderColor);
+  this._redrawBar(ctx, point, xWidth, yWidth, colors.fill, colors.border);
 };
 
 
@@ -1765,22 +1754,9 @@ Graph3d.prototype._redrawBarSizeGraphPoint = function(ctx, point) {
  * Draw single datapoint for graph style 'dot'.
  */
 Graph3d.prototype._redrawDotGraphPoint = function(ctx, point) {
-  var size = this._dotSize();
+  var colors = this._getColorsRegular(point);
 
-  var radius;
-  if (this.showPerspective) {
-    radius = size / -point.trans.z;
-  }
-  else {
-    radius = size * -(this.eye.z / this.camera.getArmLength());
-  }
-  if (radius < 0) {
-    radius = 0;
-  }
-
-  var colors = this._getColorsRegular(ctx, point);
-
-  this._drawCircle(ctx, point, radius, colors.fill, colors.border);
+  this._drawCircle(ctx, point, colors.fill, colors.border);
 };
 
 
@@ -1797,6 +1773,29 @@ Graph3d.prototype._redrawDotLineGraphPoint = function(ctx, point) {
 };
 
 
+/**
+ * Draw single datapoint for graph style 'dot-color'.
+ */
+Graph3d.prototype._redrawDotColorGraphPoint = function(ctx, point) {
+  var colors = this._getColorsColor(point);
+
+  this._drawCircle(ctx, point, colors.fill, colors.border);
+};
+
+
+/**
+ * Draw single datapoint for graph style 'dot-size'.
+ */
+Graph3d.prototype._redrawDotSizeGraphPoint = function(ctx, point) {
+  var dotSize  = this._dotSize();
+  var fraction = (point.point.value - this.valueMin) / (this.valueMax - this.valueMin);
+  var size     = dotSize/2 + 2*dotSize * fraction;
+  var colors   = this._getColorsSize();
+
+  this._drawCircle(ctx, point, colors.fill, colors.border, size);
+};
+
+
 /**
  * Draw all datapoints for currently selected graph style.
  *
@@ -1843,8 +1842,6 @@ Graph3d.prototype._redrawDataLine = function() {
     point = this.dataPoints[0];
 
     ctx.lineWidth = this._getStrokeWidth(point);
-    ctx.lineJoin = 'round';
-    ctx.lineCap = 'round';
     ctx.strokeStyle = this.dataColor.stroke;
 
     for (i = 0; i < this.dataPoints.length; i++) {