Modify action buttons visibility for desktop (#1156)

src/components/Actions.tsx

@@ -1,7 +1,8 @@
 import React from "react";
+import { AppState } from "../types";
 import { ExcalidrawElement } from "../element/types";
 import { ActionManager } from "../actions/manager";
-import { hasBackground, hasStroke, hasText } from "../scene";
+import { hasBackground, hasStroke, hasText, getTargetElement } from "../scene";
 import { t } from "../i18n";
 import { SHAPES } from "../shapes";
 import { ToolButton } from "./ToolButton";
@@ -11,14 +12,18 @@ import Stack from "./Stack";
 import useIsMobile from "../is-mobile";
 
 export function SelectedShapeActions({
-  targetElements,
+  appState,
+  elements,
   renderAction,
   elementType,
 }: {
-  targetElements: readonly ExcalidrawElement[];
+  appState: AppState;
+  elements: readonly ExcalidrawElement[];
   renderAction: ActionManager["renderAction"];
   elementType: ExcalidrawElement["type"];
 }) {
+  const targetElements = getTargetElement(elements, appState);
+  const isEditing = Boolean(appState.editingElement);
   const isMobile = useIsMobile();
 
   return (
@@ -62,7 +67,7 @@ export function SelectedShapeActions({
           {renderAction("bringForward")}
         </div>
       </fieldset>
-      {!isMobile && (
+      {!isMobile && !isEditing && targetElements.length > 0 && (
         <fieldset>
           <legend>{t("labels.actions")}</legend>
           <div className="buttonList">

src/components/LayerUI.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { showSelectedShapeActions } from "../element";
-import { calculateScrollCenter, getTargetElement } from "../scene";
+import { calculateScrollCenter } from "../scene";
 import { exportCanvas } from "../data";
 
 import { AppState } from "../types";
@@ -137,7 +137,8 @@ export const LayerUI = React.memo(
                 >
                   <Island padding={4}>
                     <SelectedShapeActions
-                      targetElements={getTargetElement(elements, appState)}
+                      appState={appState}
+                      elements={elements}
                       renderAction={actionManager.renderAction}
                       elementType={appState.elementType}
                     />

src/components/MobileMenu.tsx

@@ -9,7 +9,7 @@ import { ExcalidrawElement } from "../element/types";
 import { FixedSideContainer } from "./FixedSideContainer";
 import { Island } from "./Island";
 import { HintViewer } from "./HintViewer";
-import { calculateScrollCenter, getTargetElement } from "../scene";
+import { calculateScrollCenter } from "../scene";
 import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { Section } from "./Section";
 import { RoomDialog } from "./RoomDialog";
@@ -110,7 +110,8 @@ export function MobileMenu({
             showSelectedShapeActions(appState, elements) ? (
             <Section className="App-mobile-menu" heading="selectedShapeActions">
               <SelectedShapeActions
-                targetElements={getTargetElement(elements, appState)}
+                appState={appState}
+                elements={elements}
                 renderAction={actionManager.renderAction}
                 elementType={appState.elementType}
               />