Only show correct settings (#565)

* Only show correct settings

The logic to display which settings when nothing was selected was incorrect. This PR ensures that they are in sync.

I also removed all the <hr /> which after the redesigned just looked like weird empty spaces

* fix handling editing/text elements

Co-authored-by: David Luzar <luzar.david@gmail.com>

src/index.tsx

@@ -381,17 +381,10 @@ export class App extends React.Component<any, AppState> {
   private renderSelectedShapeActions(elements: readonly ExcalidrawElement[]) {
     const { t } = this.props;
     const { elementType, editingElement } = this.state;
-    const selectedElements = elements.filter(el => el.isSelected);
+    const targetElements = editingElement
-    const hasSelectedElements = selectedElements.length > 0;
+      ? [editingElement]
-    const isTextToolSelected = elementType === "text";
+      : elements.filter(el => el.isSelected);
-    const isShapeToolSelected = elementType !== "selection";
+    if (!targetElements.length && elementType === "selection") {
-    const isEditingText = editingElement && editingElement.type === "text";
-    if (
-      !hasSelectedElements &&
-      !isShapeToolSelected &&
-      !isTextToolSelected &&
-      !isEditingText
-    ) {
       return null;
     }
 
@@ -405,9 +398,8 @@ export class App extends React.Component<any, AppState> {
             this.syncActionResult,
             t,
           )}
-
+          {(hasBackground(elementType) ||
-          {(hasBackground(elements) ||
+            targetElements.some(element => hasBackground(element.type))) && (
-            (isShapeToolSelected && !isTextToolSelected)) && (
             <>
               {this.actionManager.renderAction(
                 "changeBackgroundColor",
@@ -424,12 +416,11 @@ export class App extends React.Component<any, AppState> {
                 this.syncActionResult,
                 t,
               )}
-              <hr />
             </>
           )}
 
-          {(hasStroke(elements) ||
+          {(hasStroke(elementType) ||
-            (isShapeToolSelected && !isTextToolSelected)) && (
+            targetElements.some(element => hasStroke(element.type))) && (
             <>
               {this.actionManager.renderAction(
                 "changeStrokeWidth",
@@ -446,11 +437,11 @@ export class App extends React.Component<any, AppState> {
                 this.syncActionResult,
                 t,
               )}
-              <hr />
             </>
           )}
 
-          {(hasText(elements) || isTextToolSelected || isEditingText) && (
+          {(hasText(elementType) ||
+            targetElements.some(element => hasText(element.type))) && (
             <>
               {this.actionManager.renderAction(
                 "changeFontSize",
@@ -467,7 +458,6 @@ export class App extends React.Component<any, AppState> {
                 this.syncActionResult,
                 t,
               )}
-              <hr />
             </>
           )}
 

src/scene/comparisons.ts

@@ -2,28 +2,17 @@ import { ExcalidrawElement } from "../element/types";
 import { hitTest } from "../element/collision";
 import { getElementAbsoluteCoords } from "../element";
 
-export const hasBackground = (elements: readonly ExcalidrawElement[]) =>
+export const hasBackground = (type: string) =>
-  elements.some(
+  type === "rectangle" || type === "ellipse" || type === "diamond";
-    element =>
-      element.isSelected &&
-      (element.type === "rectangle" ||
-        element.type === "ellipse" ||
-        element.type === "diamond"),
-  );
 
-export const hasStroke = (elements: readonly ExcalidrawElement[]) =>
+export const hasStroke = (type: string) =>
-  elements.some(
+  type === "rectangle" ||
-    element =>
+  type === "ellipse" ||
-      element.isSelected &&
+  type === "diamond" ||
-      (element.type === "rectangle" ||
+  type === "arrow" ||
-        element.type === "ellipse" ||
+  type === "line";
-        element.type === "diamond" ||
-        element.type === "arrow" ||
-        element.type === "line"),
-  );
 
-export const hasText = (elements: readonly ExcalidrawElement[]) =>
+export const hasText = (type: string) => type === "text";
-  elements.some(element => element.isSelected && element.type === "text");
 
 export function getElementAtPosition(
   elements: readonly ExcalidrawElement[],