Fix and test toRgba(). Fix point and connection return values

Author: flekschas

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Stop calling `camera.refresh()` as that is unnecessary since `v1.2.2`
 - Avoid empty lasso events
 - Fix incorrectly initialized `pointConnectionColorBy`, `pointConnectionOpacityBy`, and `pointConnectionSizeBy`
+- Fix an issue with the color conversion to RGBA
 
 ## v0.16.1
 

src/constants.js

@@ -79,17 +79,17 @@ export const DEFAULT_WIDTH = 100;
 export const DEFAULT_HEIGHT = 100;
 
 // Default styles
-export const DEFAULT_POINT_SIZE = [6];
+export const DEFAULT_POINT_SIZE = 6;
 export const DEFAULT_POINT_SIZE_SELECTED = 2;
 export const DEFAULT_POINT_OUTLINE_WIDTH = 2;
 export const DEFAULT_SIZE_BY = null;
-export const DEFAULT_POINT_CONNECTION_SIZE = [2];
+export const DEFAULT_POINT_CONNECTION_SIZE = 2;
 export const DEFAULT_POINT_CONNECTION_SIZE_ACTIVE = 2;
 export const DEFAULT_POINT_CONNECTION_SIZE_BY = null;
 export const DEFAULT_POINT_CONNECTION_OPACITY = null;
 export const DEFAULT_POINT_CONNECTION_OPACITY_BY = null;
 export const DEFAULT_POINT_CONNECTION_OPACITY_ACTIVE = 0.66;
-export const DEFAULT_OPACITY = [1];
+export const DEFAULT_OPACITY = 1;
 export const DEFAULT_OPACITY_BY = null;
 
 // Default colors

src/index.js

@@ -292,10 +292,9 @@ const createScatterplot = (initialProperties = {}) => {
   if (pointConnectionColor === 'inherit') {
     pointConnectionColor = [...pointColor];
   } else {
-    pointConnectionColor =
-      pointConnectionColor === isMultipleColors(pointConnectionColor)
-        ? [...pointConnectionColor]
-        : [pointConnectionColor];
+    pointConnectionColor = isMultipleColors(pointConnectionColor)
+      ? [...pointConnectionColor]
+      : [pointConnectionColor];
     pointConnectionColor = pointConnectionColor.map((color) =>
       toRgba(color, true)
     );
@@ -304,11 +303,9 @@ const createScatterplot = (initialProperties = {}) => {
   if (pointConnectionColorActive === 'inherit') {
     pointConnectionColorActive = [...pointColorActive];
   } else {
-    pointConnectionColorActive =
-      pointConnectionColorActive ===
-      isMultipleColors(pointConnectionColorActive)
-        ? [...pointConnectionColorActive]
-        : [pointConnectionColorActive];
+    pointConnectionColorActive = isMultipleColors(pointConnectionColorActive)
+      ? [...pointConnectionColorActive]
+      : [pointConnectionColorActive];
     pointConnectionColorActive = pointConnectionColorActive.map((color) =>
       toRgba(color, true)
     );
@@ -317,10 +314,9 @@ const createScatterplot = (initialProperties = {}) => {
   if (pointConnectionColorHover === 'inherit') {
     pointConnectionColorHover = [...pointColorHover];
   } else {
-    pointConnectionColorHover =
-      pointConnectionColorHover === isMultipleColors(pointConnectionColorHover)
-        ? [...pointConnectionColorHover]
-        : [pointConnectionColorHover];
+    pointConnectionColorHover = isMultipleColors(pointConnectionColorHover)
+      ? [...pointConnectionColorHover]
+      : [pointConnectionColorHover];
     pointConnectionColorHover = pointConnectionColorHover.map((color) =>
       toRgba(color, true)
     );
@@ -2027,7 +2023,8 @@ const createScatterplot = (initialProperties = {}) => {
       return lassoInitiatorParentElement;
     if (property === 'keyMap') return { ...keyMap };
     if (property === 'mouseMode') return mouseMode;
-    if (property === 'opacity') return opacity;
+    if (property === 'opacity')
+      return opacity.length === 1 ? opacity[0] : opacity;
     if (property === 'opacityBy') return opacityBy;
     if (property === 'pointColor')
       return pointColor.length === 1 ? pointColor[0] : pointColor;
@@ -2040,22 +2037,36 @@ const createScatterplot = (initialProperties = {}) => {
         ? pointColorHover[0]
         : pointColorHover;
     if (property === 'pointOutlineWidth') return pointOutlineWidth;
-    if (property === 'pointSize') return pointSize;
+    if (property === 'pointSize')
+      return pointSize.length === 1 ? pointSize[0] : pointSize;
     if (property === 'pointSizeSelected') return pointSizeSelected;
     if (property === 'pointSizeMouseDetection') return pointSizeMouseDetection;
     if (property === 'showPointConnections') return showPointConnections;
-    if (property === 'pointConnectionColor') return pointConnectionColor;
+    if (property === 'pointConnectionColor')
+      return pointConnectionColor.length === 1
+        ? pointConnectionColor[0]
+        : pointConnectionColor;
     if (property === 'pointConnectionColorActive')
-      return pointConnectionColorActive;
+      return pointConnectionColorActive.length === 1
+        ? pointConnectionColorActive[0]
+        : pointConnectionColorActive;
     if (property === 'pointConnectionColorHover')
-      return pointConnectionColorHover;
+      return pointConnectionColorHover.length === 1
+        ? pointConnectionColorHover[0]
+        : pointConnectionColorHover;
     if (property === 'pointConnectionColorBy') return pointConnectionColorBy;
-    if (property === 'pointConnectionOpacity') return pointConnectionOpacity;
+    if (property === 'pointConnectionOpacity')
+      return pointConnectionOpacity.length === 1
+        ? pointConnectionOpacity[0]
+        : pointConnectionOpacity;
     if (property === 'pointConnectionOpacityBy')
       return pointConnectionOpacityBy;
     if (property === 'pointConnectionOpacityActive')
       return pointConnectionOpacityActive;
-    if (property === 'pointConnectionSize') return pointConnectionSize;
+    if (property === 'pointConnectionSize')
+      return pointConnectionSize.length === 1
+        ? pointConnectionSize[0]
+        : pointConnectionSize;
     if (property === 'pointConnectionSizeActive')
       return pointConnectionSizeActive;
     if (property === 'pointConnectionSizeBy') return pointConnectionSizeBy;

src/utils.js

@@ -299,16 +299,17 @@ export const normNumArray = (a) =>
  * @return  {array}  Quadruple defining an RGBA color.
  */
 export const toRgba = (color, isNormalize) => {
-  if (isRgba(color))
+  if (isRgba(color)) {
+    const base = 255 ** !isNormalize;
     return isNormalize && !isNormFloatArray(color)
       ? normNumArray(color)
-      : color;
+      : normNumArray(color).map((x) => x * base);
+  }
 
-  if (isRgb(color))
-    return [
-      ...(isNormalize ? normNumArray(color) : color),
-      255 ** !isNormalize,
-    ];
+  if (isRgb(color)) {
+    const base = 255 ** !isNormalize;
+    return [...normNumArray(color).map((x) => Math.round(x * base)), base];
+  }
 
   if (isHex(color)) return hexToRgba(color, isNormalize);