fix(core): removing colors

We're now using canvas directly so color conversions aren't needed.
markmcdowell · Sep 4, 2020 · ceb8217 · ceb8217
1 parent 65e31c4
commit ceb8217
Show file tree

Hide file tree

Showing 11 changed files with 125 additions and 394 deletions.
diff --git a/packages/coordinates/src/EdgeCoordinate.tsx b/packages/coordinates/src/EdgeCoordinate.tsx
@@ -1,9 +1,8 @@
 import * as React from "react";
-import { colorToRGBA, isDefined } from "@react-financial-charts/core";
 
 const helper = (props: any) => {
     const { coordinate: displayCoordinate, show, type, orient, edgeAt, hideLine } = props;
-    const { fill, opacity, fontFamily, fontSize, textFill, lineStroke, lineOpacity, arrowWidth } = props;
+    const { fill, fontFamily, fontSize, textFill, lineStroke, arrowWidth } = props;
     const { rectWidth, rectHeight } = props;
     const { x1, y1, x2, y2 } = props;
 
@@ -31,14 +30,13 @@ const helper = (props: any) => {
     let coordinateBase;
     let coordinate;
     const textAnchor = "middle";
-    if (isDefined(displayCoordinate)) {
+    if (displayCoordinate !== undefined) {
         coordinateBase = {
             edgeXRect,
             edgeYRect,
             rectHeight,
             rectWidth,
             fill,
-            opacity,
             arrowWidth,
         };
         coordinate = {
@@ -55,7 +53,6 @@ const helper = (props: any) => {
     const line = hideLine
         ? undefined
         : {
-              opacity: lineOpacity,
               stroke: lineStroke,
               x1,
               y1,
@@ -73,7 +70,7 @@ const helper = (props: any) => {
 export interface EdgeCoordinateProps {
     readonly className?: string;
     readonly type: "vertical" | "horizontal";
-    readonly coordinate: any;
+    readonly coordinate?: any;
     readonly x1: number;
     readonly y1: number;
     readonly x2: number;
@@ -82,9 +79,9 @@ export interface EdgeCoordinateProps {
     readonly rectWidth?: number;
     readonly hideLine?: boolean;
     readonly fill?: string;
-    readonly opacity?: number;
     readonly fontFamily: string;
     readonly fontSize: number;
+    readonly lineStroke?: string;
 }
 
 export class EdgeCoordinate extends React.Component<EdgeCoordinateProps> {
@@ -93,28 +90,25 @@ export class EdgeCoordinate extends React.Component<EdgeCoordinateProps> {
         orient: "left",
         hideLine: false,
         fill: "#8a8a8a",
-        opacity: 1,
         fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
         fontSize: 13,
         textFill: "#FFFFFF",
-        lineStroke: "#000000",
-        lineOpacity: 0.3,
+        lineStroke: "rgba(0, 0, 0, 0.3)",
         arrowWidth: 10,
     };
 
     public static drawOnCanvasStatic = (ctx: CanvasRenderingContext2D, props: any) => {
         props = { ...EdgeCoordinate.defaultProps, ...props };
 
         const edge = helper(props);
-
         if (edge === null) {
             return;
         }
 
         if (edge.coordinate !== undefined && edge.coordinateBase !== undefined) {
             const { rectWidth, rectHeight, arrowWidth } = edge.coordinateBase;
 
-            ctx.fillStyle = colorToRGBA(edge.coordinateBase.fill, edge.coordinateBase.opacity);
+            ctx.fillStyle = edge.coordinateBase.fill;
 
             const x = edge.coordinateBase.edgeXRect;
             const y = edge.coordinateBase.edgeYRect;
@@ -150,7 +144,7 @@ export class EdgeCoordinate extends React.Component<EdgeCoordinateProps> {
         }
 
         if (edge.line !== undefined) {
-            ctx.strokeStyle = colorToRGBA(edge.line.stroke, edge.line.opacity);
+            ctx.strokeStyle = edge.line.stroke;
 
             ctx.beginPath();
             ctx.moveTo(edge.line.x1, edge.line.y1);
@@ -174,7 +168,6 @@ export class EdgeCoordinate extends React.Component<EdgeCoordinateProps> {
             line = (
                 <line
                     className="react-financial-charts-cross-hair"
-                    opacity={edge.line.opacity}
                     stroke={edge.line.stroke}
                     x1={edge.line.x1}
                     y1={edge.line.y1}
@@ -206,7 +199,6 @@ export class EdgeCoordinate extends React.Component<EdgeCoordinateProps> {
                             height={rectHeight}
                             width={rectWidth}
                             fill={edge.coordinateBase.fill}
-                            opacity={edge.coordinateBase.opacity}
                         />
                     </g>
                 ) : (
@@ -218,7 +210,6 @@ export class EdgeCoordinate extends React.Component<EdgeCoordinateProps> {
                         height={rectHeight}
                         width={rectWidth}
                         fill={edge.coordinateBase.fill}
-                        opacity={edge.coordinateBase.opacity}
                     />
                 );
 

diff --git a/packages/coordinates/src/EdgeCoordinateV2.tsx b/packages/coordinates/src/EdgeCoordinateV2.tsx
@@ -1,7 +1,5 @@
 import * as React from "react";
 
-import { colorToRGBA, isDefined } from "@react-financial-charts/core";
-
 export function renderSVG(props: any) {
     const { className } = props;
 
@@ -13,11 +11,10 @@ export function renderSVG(props: any) {
     let coordinateBase;
     let coordinate;
 
-    if (edge.line !== undefined && isDefined(edge.line)) {
+    if (edge.line !== undefined) {
         line = (
             <line
                 className="react-financial-charts-cross-hair"
-                opacity={edge.line.opacity}
                 stroke={edge.line.stroke}
                 x1={edge.line.x1}
                 y1={edge.line.y1}
@@ -47,7 +44,6 @@ export function renderSVG(props: any) {
                         height={rectHeight}
                         width={rectWidth}
                         fill={edge.coordinateBase.fill}
-                        opacity={edge.coordinateBase.opacity}
                     />
                 </g>
             ) : (
@@ -59,7 +55,6 @@ export function renderSVG(props: any) {
                     height={rectHeight}
                     width={rectWidth}
                     fill={edge.coordinateBase.fill}
-                    opacity={edge.coordinateBase.opacity}
                 />
             );
 
@@ -89,7 +84,7 @@ export function renderSVG(props: any) {
 
 function helper(props: any) {
     const { coordinate: displayCoordinate, show, type, orient, edgeAt, hideLine } = props;
-    const { fill, opacity, fontFamily, fontSize, textFill, lineStroke, lineOpacity, arrowWidth } = props;
+    const { fill, fontFamily, fontSize, textFill, lineStroke, arrowWidth } = props;
     const { rectWidth, rectHeight } = props;
     const { x1, y1, x2, y2, dx } = props;
 
@@ -117,14 +112,13 @@ function helper(props: any) {
     let coordinateBase;
     let coordinate;
     const textAnchor = "middle";
-    if (isDefined(displayCoordinate)) {
+    if (displayCoordinate !== undefined) {
         coordinateBase = {
             edgeXRect,
             edgeYRect,
             rectHeight,
             rectWidth,
             fill,
-            opacity,
             arrowWidth,
         };
         coordinate = {
@@ -141,7 +135,6 @@ function helper(props: any) {
     const line = hideLine
         ? undefined
         : {
-              opacity: lineOpacity,
               stroke: lineStroke,
               x1,
               y1,
@@ -166,7 +159,7 @@ export function drawOnCanvas(ctx: CanvasRenderingContext2D, props: any) {
     if (edge.coordinate !== undefined && edge.coordinateBase !== undefined) {
         const { rectWidth, rectHeight, arrowWidth } = edge.coordinateBase;
 
-        ctx.fillStyle = colorToRGBA(edge.coordinateBase.fill, edge.coordinateBase.opacity);
+        ctx.fillStyle = edge.coordinateBase.fill;
 
         const x = edge.coordinateBase.edgeXRect;
         const y = edge.coordinateBase.edgeYRect;
@@ -200,8 +193,8 @@ export function drawOnCanvas(ctx: CanvasRenderingContext2D, props: any) {
 
         ctx.fillText(edge.coordinate.displayCoordinate, edge.coordinate.edgeXText, edge.coordinate.edgeYText);
     }
-    if (edge.line !== undefined && isDefined(edge.line)) {
-        ctx.strokeStyle = colorToRGBA(edge.line.stroke, edge.line.opacity);
+    if (edge.line !== undefined) {
+        ctx.strokeStyle = edge.line.stroke;
 
         ctx.beginPath();
         ctx.moveTo(edge.line.x1, edge.line.y1);

diff --git a/packages/coordinates/src/EdgeCoordinateV3.tsx b/packages/coordinates/src/EdgeCoordinateV3.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { colorToRGBA, getStrokeDasharray, getStrokeDasharrayCanvas, isDefined } from "@react-financial-charts/core";
+import { getStrokeDasharray, getStrokeDasharrayCanvas, isDefined } from "@react-financial-charts/core";
 
 export const renderSVG = (props: any) => {
     const { className } = props;
@@ -9,15 +9,15 @@ export const renderSVG = (props: any) => {
     if (edge === null) {
         return null;
     }
+
     let line;
     let coordinateBase;
     let coordinate;
 
-    if (edge.line !== undefined && isDefined(edge.line)) {
+    if (edge.line !== undefined) {
         line = (
             <line
                 className="react-financial-charts-cross-hair"
-                strokeOpacity={edge.line.opacity}
                 stroke={edge.line.stroke}
                 strokeDasharray={getStrokeDasharray(edge.line.strokeDasharray)}
                 x1={edge.line.x1}
@@ -47,10 +47,8 @@ export const renderSVG = (props: any) => {
                         width={rectWidth}
                         stroke={edge.coordinateBase.stroke}
                         strokeLinejoin="miter"
-                        strokeOpacity={edge.coordinateBase.strokeOpacity}
                         strokeWidth={edge.coordinateBase.strokeWidth}
                         fill={edge.coordinateBase.fill}
-                        fillOpacity={edge.coordinateBase.opacity}
                     />
                 </g>
             ) : (
@@ -62,7 +60,6 @@ export const renderSVG = (props: any) => {
                     height={rectHeight}
                     width={rectWidth}
                     fill={edge.coordinateBase.fill}
-                    opacity={edge.coordinateBase.opacity}
                 />
             );
 
@@ -100,14 +97,11 @@ const helper = (props: any) => {
         hideLine,
         lineStrokeDasharray,
         fill,
-        opacity,
         fontFamily,
         fontSize,
         textFill,
         lineStroke,
-        lineOpacity,
         stroke,
-        strokeOpacity,
         strokeWidth,
         arrowWidth,
         rectWidth,
@@ -154,10 +148,8 @@ const helper = (props: any) => {
             rectWidth,
             rectRadius,
             fill,
-            opacity,
             arrowWidth,
             stroke,
-            strokeOpacity,
             strokeWidth,
         };
         coordinate = {
@@ -174,7 +166,6 @@ const helper = (props: any) => {
     const line = hideLine
         ? undefined
         : {
-              opacity: lineOpacity,
               stroke: lineStroke,
               strokeDasharray: lineStrokeDasharray,
               x1,
@@ -210,7 +201,7 @@ export const drawOnCanvas = (ctx: CanvasRenderingContext2D, props: any) => {
     if (edge.line !== undefined && isDefined(edge.line)) {
         const dashArray = getStrokeDasharrayCanvas(edge.line.strokeDasharray);
         ctx.setLineDash(dashArray);
-        ctx.strokeStyle = colorToRGBA(edge.line.stroke, edge.line.opacity);
+        ctx.strokeStyle = edge.line.stroke;
         ctx.lineWidth = 1;
         ctx.beginPath();
         ctx.moveTo(edge.line.x1, edge.line.y1);
@@ -223,9 +214,9 @@ export const drawOnCanvas = (ctx: CanvasRenderingContext2D, props: any) => {
     if (edge.coordinateBase !== undefined) {
         const { arrowWidth, rectWidth, rectHeight, rectRadius } = edge.coordinateBase;
 
-        ctx.fillStyle = colorToRGBA(edge.coordinateBase.fill, edge.coordinateBase.opacity);
-        if (isDefined(edge.coordinateBase.stroke)) {
-            ctx.strokeStyle = colorToRGBA(edge.coordinateBase.stroke, edge.coordinateBase.strokeOpacity);
+        ctx.fillStyle = edge.coordinateBase.fill;
+        if (edge.coordinateBase.stroke !== undefined) {
+            ctx.strokeStyle = edge.coordinateBase.stroke;
             ctx.lineWidth = edge.coordinateBase.strokeWidth;
         }