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

29
src/scene/comparisons.ts
View File

@ -2,28 +2,17 @@ import { ExcalidrawElement } from "../element/types";
import { hitTest } from "../element/collision"; import { hitTest } from "../element/collision";
import { getElementAbsoluteCoords } from "../element"; 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( export function getElementAtPosition(
elements: readonly ExcalidrawElement[], elements: readonly ExcalidrawElement[],