diff --git a/src/index.tsx b/src/index.tsx index 5dca0ff3..b90535ef 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -381,17 +381,10 @@ export class App extends React.Component { private renderSelectedShapeActions(elements: readonly ExcalidrawElement[]) { const { t } = this.props; const { elementType, editingElement } = this.state; - const selectedElements = elements.filter(el => el.isSelected); - const hasSelectedElements = selectedElements.length > 0; - const isTextToolSelected = elementType === "text"; - const isShapeToolSelected = elementType !== "selection"; - const isEditingText = editingElement && editingElement.type === "text"; - if ( - !hasSelectedElements && - !isShapeToolSelected && - !isTextToolSelected && - !isEditingText - ) { + const targetElements = editingElement + ? [editingElement] + : elements.filter(el => el.isSelected); + if (!targetElements.length && elementType === "selection") { return null; } @@ -405,9 +398,8 @@ export class App extends React.Component { this.syncActionResult, t, )} - - {(hasBackground(elements) || - (isShapeToolSelected && !isTextToolSelected)) && ( + {(hasBackground(elementType) || + targetElements.some(element => hasBackground(element.type))) && ( <> {this.actionManager.renderAction( "changeBackgroundColor", @@ -424,12 +416,11 @@ export class App extends React.Component { this.syncActionResult, t, )} -
)} - {(hasStroke(elements) || - (isShapeToolSelected && !isTextToolSelected)) && ( + {(hasStroke(elementType) || + targetElements.some(element => hasStroke(element.type))) && ( <> {this.actionManager.renderAction( "changeStrokeWidth", @@ -446,11 +437,11 @@ export class App extends React.Component { this.syncActionResult, t, )} -
)} - {(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 { this.syncActionResult, t, )} -
)} diff --git a/src/scene/comparisons.ts b/src/scene/comparisons.ts index 382fa999..3041cbb2 100644 --- a/src/scene/comparisons.ts +++ b/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[]) => - elements.some( - element => - element.isSelected && - (element.type === "rectangle" || - element.type === "ellipse" || - element.type === "diamond"), - ); +export const hasBackground = (type: string) => + type === "rectangle" || type === "ellipse" || type === "diamond"; -export const hasStroke = (elements: readonly ExcalidrawElement[]) => - elements.some( - element => - element.isSelected && - (element.type === "rectangle" || - element.type === "ellipse" || - element.type === "diamond" || - element.type === "arrow" || - element.type === "line"), - ); +export const hasStroke = (type: string) => + type === "rectangle" || + type === "ellipse" || + type === "diamond" || + type === "arrow" || + type === "line"; -export const hasText = (elements: readonly ExcalidrawElement[]) => - elements.some(element => element.isSelected && element.type === "text"); +export const hasText = (type: string) => type === "text"; export function getElementAtPosition( elements: readonly ExcalidrawElement[],