From 12519b18deb7990fdd6f26586c6d23c06640a663 Mon Sep 17 00:00:00 2001
From: Faustino Kialungila <faustino.kialungila@gmail.com>
Date: Fri, 3 Jan 2020 17:10:09 +0100
Subject: [PATCH] Add ability to choose a color when creating text elements

---
 src/index.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/index.tsx b/src/index.tsx
index 49f097b05..3c2467e11 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -111,6 +111,7 @@ function newElement(
   y: number,
   strokeColor: string,
   backgroundColor: string,
+  textColor: string,
   width = 0,
   height = 0
 ) {
@@ -123,6 +124,7 @@ function newElement(
     isSelected: false,
     strokeColor: strokeColor,
     backgroundColor: backgroundColor,
+    textColor: textColor,
     draw(rc: RoughCanvas, context: CanvasRenderingContext2D) {}
   };
   return element;
@@ -345,6 +347,7 @@ function generateDraw(element: ExcaliburElement) {
     element.draw = (rc, context) => {
       const font = context.font;
       context.font = element.font;
+      context.fillStyle = element.textColor;
       context.fillText(
         element.text,
         element.x,
@@ -415,6 +418,7 @@ type AppState = {
   exportPadding: number;
   currentItemStrokeColor: string;
   currentItemBackgroundColor: string;
+  textColor: string;
   viewBackgroundColor: string;
 };
 
@@ -457,6 +461,7 @@ class App extends React.Component<{}, AppState> {
     exportPadding: 10,
     currentItemStrokeColor: "#000000",
     currentItemBackgroundColor: "#ffffff",
+    textColor: "#000000",
     viewBackgroundColor: "#ffffff"
   };
 
@@ -582,7 +587,8 @@ class App extends React.Component<{}, AppState> {
               x,
               y,
               this.state.currentItemStrokeColor,
-              this.state.currentItemBackgroundColor
+              this.state.currentItemBackgroundColor,
+              this.state.textColor
             );
             let isDraggingElements = false;
             const cursorStyle = document.documentElement.style.cursor;
@@ -764,6 +770,16 @@ class App extends React.Component<{}, AppState> {
             />
             Shape Background
           </label>
+          <label>
+            <input
+              type="color"
+              value={this.state.textColor}
+              onChange={e => {
+                this.setState({ textColor: e.target.value });
+              }}
+            />
+            Text Color
+          </label>
         </fieldset>
         <fieldset>
           <legend>Export</legend>