Render shape action on tool selected (#448)

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}
       />
     </>

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",