sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Only show correct settings (#565)

Browse Source 
* 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>
This commit is contained in:
Christopher Chedeau 2020-01-26 06:19:43 -08:00 committed by David Luzar
parent 2a87c7381b
commit 141b7409a2
2 changed files with 19 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/index.tsx
View File

@ -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 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<any, AppState> {
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<any, AppState> {
this.syncActionResult,
t,
)}
<hr />
</>
)}
{(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<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 />
</>
)}

29
src/scene/comparisons.ts
View File

@ -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[],