smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Add shortcuts for stroke and background color picker (#3318)

Browse source 
* feat: Add shortcuts for opening stroke and background color picker

* Use App.tsx keydown handler

* only get selectedElements if applicable (perf)

* fix tests and snaps

* reuse `appState.openMenu`

Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Arun 2021-05-28 17:22:42 +05:30 • committed by GitHub
parent bc0b6e1888
commit 6c3e4417e1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 201 additions and 215 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/actions/actionCanvas.tsx
View file

@ -22,8 +22,8 @@ export const actionChangeViewBackgroundColor = register({
name: "changeViewBackgroundColor",
perform: (_, appState, value) => {
return {
appState: { ...appState, viewBackgroundColor: value },
commitToHistory: true,
appState: { ...appState, ...value },
commitToHistory: !!value.viewBackgroundColor,
};
},
PanelComponent: ({ appState, updateData }) => {
@ -33,7 +33,11 @@ export const actionChangeViewBackgroundColor = register({
label={t("labels.canvasBackground")}
type="canvasBackground"
color={appState.viewBackgroundColor}
onChange={(color) => updateData(color)}
onChange={(color) => updateData({ viewBackgroundColor: color })}
isActive={appState.openMenu === "canvasColorPicker"}
setActive={(active) =>
updateData({ openMenu: active ? "canvasColorPicker" : null })
}
data-testid="canvas-background-picker"
/>
</div>

50
src/actions/actionProperties.tsx
View file

@ -99,13 +99,18 @@ export const actionChangeStrokeColor = register({
name: "changeStrokeColor",
perform: (elements, appState, value) => {
return {
elements: changeProperty(elements, appState, (el) =>
newElementWith(el, {
strokeColor: value,
}),
),
appState: { ...appState, currentItemStrokeColor: value },
commitToHistory: true,
...(value.currentItemStrokeColor && {
elements: changeProperty(elements, appState, (el) =>
newElementWith(el, {
strokeColor: value.currentItemStrokeColor,
}),
),
}),
appState: {
...appState,
...value,
},
commitToHistory: !!value.currentItemStrokeColor,
};
},
PanelComponent: ({ elements, appState, updateData }) => (
@ -120,7 +125,11 @@ export const actionChangeStrokeColor = register({
(element) => element.strokeColor,
appState.currentItemStrokeColor,
)}
onChange={updateData}
onChange={(color) => updateData({ currentItemStrokeColor: color })}
isActive={appState.openMenu === "strokeColorPicker"}
setActive={(active) =>
updateData({ openMenu: active ? "strokeColorPicker" : null })
}
/>
</>
),
@ -130,13 +139,18 @@ export const actionChangeBackgroundColor = register({
name: "changeBackgroundColor",
perform: (elements, appState, value) => {
return {
elements: changeProperty(elements, appState, (el) =>
newElementWith(el, {
backgroundColor: value,
}),
),
appState: { ...appState, currentItemBackgroundColor: value },
commitToHistory: true,
...(value.currentItemBackgroundColor && {
elements: changeProperty(elements, appState, (el) =>
newElementWith(el, {
backgroundColor: value.currentItemBackgroundColor,
}),
),
}),
appState: {
...appState,
...value,
},
commitToHistory: !!value.currentItemBackgroundColor,
};
},
PanelComponent: ({ elements, appState, updateData }) => (
@ -151,7 +165,11 @@ export const actionChangeBackgroundColor = register({
(element) => element.backgroundColor,
appState.currentItemBackgroundColor,
)}
onChange={updateData}
onChange={(color) => updateData({ currentItemBackgroundColor: color })}
isActive={appState.openMenu === "backgroundColorPicker"}
setActive={(active) =>
updateData({ openMenu: active ? "backgroundColorPicker" : null })
}
/>
</>
),