From bbabf33d782d17521da186c8727a4b8fde05692a Mon Sep 17 00:00:00 2001
From: Faustino Kialungila <Faustino.kialungila@gmail.com>
Date: Sun, 19 Jan 2020 00:45:35 +0100
Subject: [PATCH] Render shape action on tool selected (#448)

---
 src/actions/actionProperties.tsx | 15 +++++++++------
 src/index.tsx                    | 14 ++++++++++----
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/actions/actionProperties.tsx b/src/actions/actionProperties.tsx
index eba0d21e3..b195c8aaa 100644
--- a/src/actions/actionProperties.tsx
+++ b/src/actions/actionProperties.tsx
@@ -35,7 +35,10 @@ export const actionChangeStrokeColor: Action = {
       <h5>Stroke</h5>
       <ColorPicker
         type="elementStroke"
-        color={getSelectedAttribute(elements, element => element.strokeColor)}
+        color={
+          getSelectedAttribute(elements, element => element.strokeColor) ||
+          appState.currentItemStrokeColor
+        }
         onChange={updateData}
       />
     </>
@@ -54,15 +57,15 @@ export const actionChangeBackgroundColor: Action = {
       appState: { ...appState, currentItemBackgroundColor: value }
     };
   },
-  PanelComponent: ({ elements, updateData }) => (
+  PanelComponent: ({ elements, appState, updateData }) => (
     <>
       <h5>Background</h5>
       <ColorPicker
         type="elementBackground"
-        color={getSelectedAttribute(
-          elements,
-          element => element.backgroundColor
-        )}
+        color={
+          getSelectedAttribute(elements, element => element.backgroundColor) ||
+          appState.currentItemBackgroundColor
+        }
         onChange={updateData}
       />
     </>
diff --git a/src/index.tsx b/src/index.tsx
index 92ffd423e..30abc0b60 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -343,8 +343,12 @@ export class App extends React.Component<{}, AppState> {
   };
 
   private renderSelectedShapeActions(elements: readonly ExcalidrawElement[]) {
+    const { elementType } = this.state;
     const selectedElements = elements.filter(el => el.isSelected);
-    if (selectedElements.length === 0) {
+    const hasSelectedElements = selectedElements.length > 0;
+    const isTextToolSelected = elementType === "text";
+    const isShapeToolSelected = elementType !== "selection";
+    if (!(hasSelectedElements || isShapeToolSelected || isTextToolSelected)) {
       return null;
     }
 
@@ -358,7 +362,8 @@ export class App extends React.Component<{}, AppState> {
             this.syncActionResult
           )}
 
-          {hasBackground(elements) && (
+          {(hasBackground(elements) ||
+            (isShapeToolSelected && !isTextToolSelected)) && (
             <>
               {this.actionManager.renderAction(
                 "changeBackgroundColor",
@@ -377,7 +382,8 @@ export class App extends React.Component<{}, AppState> {
             </>
           )}
 
-          {hasStroke(elements) && (
+          {(hasStroke(elements) ||
+            (isShapeToolSelected && !isTextToolSelected)) && (
             <>
               {this.actionManager.renderAction(
                 "changeStrokeWidth",
@@ -396,7 +402,7 @@ export class App extends React.Component<{}, AppState> {
             </>
           )}
 
-          {hasText(elements) && (
+          {(hasText(elements) || isTextToolSelected) && (
             <>
               {this.actionManager.renderAction(
                 "changeFontSize",