feat: better validation; allow hue wrap-around

Author: zackarydev

docs/graph3d/index.html

@@ -395,13 +395,13 @@ <h2 id="Configuration_Options">Configuration Options</h2>
         <td class="indent">surfaceColors.hue.start</td>
         <td>number</td>
         <td>None</td>
-        <td>The hue value of the maximum z value of the surface. Hue is in degrees (0 to 360).</td>
+        <td>The hue value of the maximum z value of the surface. Hue is in degrees with a period of 360.</td>
       </tr>
       <tr parent="surfaceColors" class="hidden">
         <td class="indent">surfaceColors.hue.end</td>
         <td>number</td>
         <td>None</td>
-        <td>The hue value of the minimum z value of the surface. Hue is in degrees (0 to 360).</td>
+        <td>The hue value of the minimum z value of the surface. Hue is in degrees with a period of 360.</td>
       </tr>
       <tr parent="surfaceColors" class="hidden">
         <td class="indent">surfaceColors.hue.saturation</td>

examples/graph3d/16_styling_surface.html

@@ -71,8 +71,8 @@
         if (style === "hue") {
           options.surfaceColors = {
             hue: {
-              start: 40,
-              end: 180,
+              start: -360,
+              end: 360,
               saturation: 50,
               brightness: 100,
               colorStops: 8 // How many colour gradients do we want
@@ -125,8 +125,8 @@
         <code>
           <pre>surfaceColors: {
   hue: {
-    start: 40,
-    end: 180,
+    start: -360,
+    end: 360,
     saturation: 50,
     brightness: 100,
     colorStops: 8,

lib/graph3d/Settings.js

@@ -488,11 +488,27 @@ function setSurfaceColor(surfaceColors, dst) {
   let rgbColors = [];
 
   if(Array.isArray(surfaceColors)) {
-    rgbColors = surfaceColors.map(util.hexToRGB);
+    // https://stackoverflow.com/questions/8027423/how-to-check-if-a-string-is-a-valid-hex-color-representation/8027444
+    const hexTestRegex = /^#([0-9A-F]{3}){1,2}$/i;
+    rgbColors = surfaceColors.map(function(colorCode){
+      if(!hexTestRegex.test(colorCode)) {
+        throw new Error('Invalid hex color code supplied to surfaceColors.');
+      }
+      return util.hexToRGB(colorCode);
+    });
   } else if (typeof surfaceColors === 'object') {
     if(surfaceColors.hue === undefined) {
       throw new Error('Unsupported type of surfaceColors');
     }
+    if(surfaceColors.hue.saturation < 0 || surfaceColors.hue.saturation > 100) {
+      throw new Error('Surface colors saturation is out of bounds. Expected range is 0-100.');
+    }
+    if(surfaceColors.hue.brightness < 0 || surfaceColors.hue.brightness > 100) {
+      throw new Error('Surface colors brightness is out of bounds. Expected range is 0-100.');
+    }
+    if(surfaceColors.hue.colorStops < 2) {
+      throw new Error('Surface colors colorStops is out of bounds. Expected 2 or above.');
+    }
 
     const startHue = Math.min(surfaceColors.hue.start, surfaceColors.hue.end);
     const endHue = Math.max(surfaceColors.hue.start, surfaceColors.hue.end);
@@ -503,9 +519,13 @@ function setSurfaceColor(surfaceColors, dst) {
 
     let currentHue = startHue;
     while (currentHue < endHue) {
+      let calculatedHue = currentHue % 360;
+      if(calculatedHue < 0) {
+        calculatedHue = 360 + calculatedHue;
+      }
       rgbColors.push(
         util.HSVToRGB(
-          (currentHue % 360)/360, 
+          calculatedHue/360,
           saturation/100, 
           brightness/100
         )