Added handling of settings backgroundColor and dataColor

lib/graph3d/Graph3d.js

@@ -82,13 +82,23 @@ var DEFAULTS = {
   axisColor        : '#4D4D4D',
   gridColor        : '#D3D3D3',
   xCenter          : '55%',
-  yCenter          : '50%'
+  yCenter          : '50%',
 
 
   // Following not in defaults (yet) but present in user settings
   // These will be initialized as 'undefined'
   //'showAnimationControls',
   //'animationAutoStart'
+
+  // Following not in OPTIONKEYS because they require special handling,
+
+  backgroundColor  : undefined,
+
+  dataColor        : {
+    fill       : '#7DC1FF',
+    stroke     : '#3267D2',
+    strokeWidth: 1           // px
+  }
 };
 
 
@@ -160,6 +170,8 @@ function Graph3d(container, data, options) {
   this.dataTable = null;  // The original data table
   this.dataPoints = null; // The table with point objects
 
+  // create a frame and canvas
+  this.create();
 
   //
   // Start Settings
@@ -174,6 +186,9 @@ function Graph3d(container, data, options) {
   this.showTooltip = false;
   this.dotSizeRatio = 0.02; // size of the dots as a fraction of the graph width
 
+  // Handle the more complex ('special') fields
+  this._setSpecialSettings(DEFAULTS, this);
+
   // The rest of the fields.
   // These require special attention in some way
   // TODO: handle these
@@ -210,21 +225,10 @@ function Graph3d(container, data, options) {
   this.yBarWidth = 1;
   // TODO: customize axis range
 
-  // colors
-  this.dataColor = {
-    fill: '#7DC1FF',
-    stroke: '#3267D2',
-    strokeWidth: 1  // px
-  };
-
-
   //
   // End Settings
   //
 
-  // create a frame and canvas
-  this.create();
-
   // apply options (also when undefined)
   this.setOptions(options);
 
@@ -381,11 +385,41 @@ Graph3d.prototype._calcTranslations = function(points, sort) {
 };
 
 
+// -----------------------------------------------------------------------------
+//  Methods for handling settings
+// -----------------------------------------------------------------------------
+
+
+/**
+ * Special handling for certain parameters
+ *
+ * 'Special' here means: setting requires more than a simple copy
+ */
+Graph3d.prototype._setSpecialSettings = function(src, dst) {
+
+  if (src.backgroundColor !== undefined) {
+    this._setBackgroundColor(src.backgroundColor, dst);
+  }
+
+  this._setDataColor(src.dataColor, dst);
+
+/* TODO
+  setStyle(src.style, dst);
+
+  if (src.tooltip !== undefined) {
+    dst.showTooltip = src.tooltip;
+  }
+
+  setCameraPosition(src.cameraPosition, dst);
+End TODO */
+}
+
+
 /**
  * Set the background styling for the graph
  * @param {string | {fill: string, stroke: string, strokeWidth: string}} backgroundColor
  */
-Graph3d.prototype._setBackgroundColor = function(backgroundColor) {
+Graph3d.prototype._setBackgroundColor = function(backgroundColor, dst) {
   var fill = 'white';
   var stroke = 'gray';
   var strokeWidth = 1;
@@ -400,20 +434,49 @@ Graph3d.prototype._setBackgroundColor = function(backgroundColor) {
     if (backgroundColor.stroke !== undefined)    stroke = backgroundColor.stroke;
     if (backgroundColor.strokeWidth !== undefined) strokeWidth = backgroundColor.strokeWidth;
   }
-  else if  (backgroundColor === undefined) {
-    // use use defaults
-  }
   else {
     throw new Error('Unsupported type of backgroundColor');
   }
 
-  this.frame.style.backgroundColor = fill;
-  this.frame.style.borderColor = stroke;
-  this.frame.style.borderWidth = strokeWidth + 'px';
-  this.frame.style.borderStyle = 'solid';
+  dst.frame.style.backgroundColor = fill;
+  dst.frame.style.borderColor = stroke;
+  dst.frame.style.borderWidth = strokeWidth + 'px';
+  dst.frame.style.borderStyle = 'solid';
 };
 
 
+Graph3d.prototype._setDataColor = function(dataColor, dst) {
+  if (dataColor === undefined) {
+    return;    // Nothing to do
+  }
+
+  if (dst.dataColor === undefined) {
+    dst.dataColor = {};
+  }
+
+  if (typeof dataColor === 'string') {
+    dst.dataColor.fill   = dataColor;
+    dst.dataColor.stroke = dataColor;
+  }
+  else {
+    if (dataColor.fill) {
+      dst.dataColor.fill = dataColor.fill;
+    }
+    if (dataColor.stroke) {
+      dst.dataColor.stroke = dataColor.stroke;
+    }
+    if (dataColor.strokeWidth !== undefined) {
+      dst.dataColor.strokeWidth = dataColor.strokeWidth;
+    }
+  }
+}
+
+
+// -----------------------------------------------------------------------------
+//  End methods for handling settings
+// -----------------------------------------------------------------------------
+
+
 /// enumerate the available styles
 Graph3d.STYLE = {
   BAR: 0,
@@ -995,6 +1058,9 @@ Graph3d.prototype.setOptions = function (options) {
     // Handle the parameters which can be simply copied over
     safeCopy(options, this, OPTIONKEYS);
 
+    // Handle the more complex ('special') fields
+    this._setSpecialSettings(options, this);
+
     // Handle the rest of the parameters
     if (options.showLegend  !== undefined)      this.defaultShowLegend = options.showLegend; 
 
@@ -1019,7 +1085,6 @@ Graph3d.prototype.setOptions = function (options) {
     if (options.zMax !== undefined) this.defaultZMax = options.zMax;
     if (options.valueMin !== undefined) this.defaultValueMin = options.valueMin;
     if (options.valueMax !== undefined) this.defaultValueMax = options.valueMax;
-    if (options.backgroundColor !== undefined) this._setBackgroundColor(options.backgroundColor);
 
     if (options.cameraPosition !== undefined) cameraPosition = options.cameraPosition;
 
@@ -1027,26 +1092,6 @@ Graph3d.prototype.setOptions = function (options) {
       this.camera.setArmRotation(cameraPosition.horizontal, cameraPosition.vertical);
       this.camera.setArmLength(cameraPosition.distance);
     }
-
-    // colors
-    if (options.dataColor) {
-      if (typeof options.dataColor === 'string') {
-        this.dataColor.fill = options.dataColor;
-        this.dataColor.stroke = options.dataColor;
-      }
-      else {
-        if (options.dataColor.fill) {
-          this.dataColor.fill = options.dataColor.fill;
-        }
-        if (options.dataColor.stroke) {
-          this.dataColor.stroke = options.dataColor.stroke;
-        }
-        if (options.dataColor.strokeWidth !== undefined) {
-          this.dataColor.strokeWidth = options.dataColor.strokeWidth;
-        }
-      }
-    }
-    
   }
 
   this.setSize(this.width, this.height);