Adding support for color in curveDefinition/classic (#66)

README.md

@@ -94,6 +94,13 @@ The default definition for the `ios` classic style is:
 
 and it results in 5 different sin-waves with different parameters and amplitude.
 
+You can set 4 attributes for each curve:
+
+- `attenuation`: the power factor determining the attenuation
+- `lineWidth`: the line width
+- `opacity`: the opacity
+- `color`: the color, default to `SiriWave.color`; optional
+
 The `ios9` style definition is instead:
 
 ```js
@@ -107,6 +114,11 @@ The `ios9` style definition is instead:
 
 and it results in 3 different colored waves + 1 support wave that needs to be there.
 
+Here you set:
+
+- `supportLine`: only one of these curves must have this to `true`, it will be used to draw the support line
+- `color`: the color of the wave
+
 #### `start()`
 
 Start the animation

dist/types/index.d.ts

@@ -23,6 +23,7 @@ export declare type IClassicCurveDefinition = {
     attenuation: number;
     lineWidth: number;
     opacity: number;
+    color?: string;
 };
 export declare type ICurveDefinition = IiOS9CurveDefinition | IClassicCurveDefinition;
 export interface ICurve {

src/classic-curve.ts

@@ -35,8 +35,9 @@ export class ClassicCurve implements ICurve {
     ctx.moveTo(0, 0);
     ctx.beginPath();
 
-    const color = this.ctrl.color.replace(/rgb\(/g, "").replace(/\)/g, "");
-    ctx.strokeStyle = `rgba(${color},${this.definition.opacity})`;
+    const finalColor = this.definition.color || this.ctrl.color;
+    const colorHex = finalColor.replace(/rgb\(/g, "").replace(/\)/g, "");
+    ctx.strokeStyle = `rgba(${colorHex},${this.definition.opacity})`;
     ctx.lineWidth = this.definition.lineWidth;
 
     // Cycle the graph from -X to +X every PX_DEPTH and draw the line

src/index.ts

@@ -43,6 +43,7 @@ export type IClassicCurveDefinition = {
   attenuation: number;
   lineWidth: number;
   opacity: number;
+  color?: string;
 };
 
 export type ICurveDefinition = IiOS9CurveDefinition | IClassicCurveDefinition;