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

Render shape action on tool selected (#448)

Browse Source
This commit is contained in:
Faustino Kialungila 2020-01-19 00:45:35 +01:00 committed by Christopher Chedeau
parent 5563dd30d7
commit bbabf33d78
2 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/actions/actionProperties.tsx
View File

@ -35,7 +35,10 @@ export const actionChangeStrokeColor: Action = {
<h5>Stroke</h5> <h5>Stroke</h5>
<ColorPicker <ColorPicker
type="elementStroke" type="elementStroke"
color={getSelectedAttribute(elements, element => element.strokeColor)} color={
getSelectedAttribute(elements, element => element.strokeColor) ||
appState.currentItemStrokeColor
}
onChange={updateData} onChange={updateData}
/> />
</> </>
@ -54,15 +57,15 @@ export const actionChangeBackgroundColor: Action = {
appState: { ...appState, currentItemBackgroundColor: value } appState: { ...appState, currentItemBackgroundColor: value }
}; };
}, },
PanelComponent: ({ elements, updateData }) => ( PanelComponent: ({ elements, appState, updateData }) => (
<> <>
<h5>Background</h5> <h5>Background</h5>
<ColorPicker <ColorPicker
type="elementBackground" type="elementBackground"
color={getSelectedAttribute( color={
elements, getSelectedAttribute(elements, element => element.backgroundColor) ||
element => element.backgroundColor appState.currentItemBackgroundColor
)} }
onChange={updateData} onChange={updateData}
/> />
</> </>

14
src/index.tsx
View File

@ -343,8 +343,12 @@ export class App extends React.Component<{}, AppState> {
}; };
private renderSelectedShapeActions(elements: readonly ExcalidrawElement[]) { private renderSelectedShapeActions(elements: readonly ExcalidrawElement[]) {
const { elementType } = this.state;
const selectedElements = elements.filter(el => el.isSelected); const selectedElements = elements.filter(el => el.isSelected);
if (selectedElements.length === 0) { const hasSelectedElements = selectedElements.length > 0;
const isTextToolSelected = elementType === "text";
const isShapeToolSelected = elementType !== "selection";
if (!(hasSelectedElements || isShapeToolSelected || isTextToolSelected)) {
return null; return null;
} }
@ -358,7 +362,8 @@ export class App extends React.Component<{}, AppState> {
this.syncActionResult this.syncActionResult
)} )}
{hasBackground(elements) && ( {(hasBackground(elements) ||
(isShapeToolSelected && !isTextToolSelected)) && (
<> <>
{this.actionManager.renderAction( {this.actionManager.renderAction(
"changeBackgroundColor", "changeBackgroundColor",
@ -377,7 +382,8 @@ export class App extends React.Component<{}, AppState> {
</> </>
)} )}
{hasStroke(elements) && ( {(hasStroke(elements) ||
(isShapeToolSelected && !isTextToolSelected)) && (
<> <>
{this.actionManager.renderAction( {this.actionManager.renderAction(
"changeStrokeWidth", "changeStrokeWidth",
@ -396,7 +402,7 @@ export class App extends React.Component<{}, AppState> {
</> </>
)} )}
{hasText(elements) && ( {(hasText(elements) || isTextToolSelected) && (
<> <>
{this.actionManager.renderAction( {this.actionManager.renderAction(
"changeFontSize", "changeFontSize",