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

fix: color pickers not opening on mobile (#3676)

Browse Source
This commit is contained in:
David Luzar 2021-05-30 12:05:07 +02:00 committed by GitHub
parent c819b653bf
commit 035c7affff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 83 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/actions/actionCanvas.tsx
View File

@ -34,9 +34,9 @@ export const actionChangeViewBackgroundColor = register({
type="canvasBackground"
color={appState.viewBackgroundColor}
onChange={(color) => updateData({ viewBackgroundColor: color })}
isActive={appState.openMenu === "canvasColorPicker"}
isActive={appState.openPopup === "canvasColorPicker"}
setActive={(active) =>
updateData({ openMenu: active ? "canvasColorPicker" : null })
updateData({ openPopup: active ? "canvasColorPicker" : null })
}
data-testid="canvas-background-picker"
/>

8
src/actions/actionProperties.tsx
View File

@ -126,9 +126,9 @@ export const actionChangeStrokeColor = register({
appState.currentItemStrokeColor,
)}
onChange={(color) => updateData({ currentItemStrokeColor: color })}
isActive={appState.openMenu === "strokeColorPicker"}
isActive={appState.openPopup === "strokeColorPicker"}
setActive={(active) =>
updateData({ openMenu: active ? "strokeColorPicker" : null })
updateData({ openPopup: active ? "strokeColorPicker" : null })
}
/>
</>
@ -166,9 +166,9 @@ export const actionChangeBackgroundColor = register({
appState.currentItemBackgroundColor,
)}
onChange={(color) => updateData({ currentItemBackgroundColor: color })}
isActive={appState.openMenu === "backgroundColorPicker"}
isActive={appState.openPopup === "backgroundColorPicker"}
setActive={(active) =>
updateData({ openMenu: active ? "backgroundColorPicker" : null })
updateData({ openPopup: active ? "backgroundColorPicker" : null })
}
/>
</>

2
src/appState.ts
View File

@ -52,6 +52,7 @@ export const getDefaultAppState = (): Omit<
multiElement: null,
name: `${t("labels.untitled")}-${getDateTime()}`,
openMenu: null,
openPopup: null,
pasteDialog: { shown: false, data: null },
previousSelectedElementIds: {},
resizingElement: null,
@ -131,6 +132,7 @@ const APP_STATE_STORAGE_CONF = (<
offsetLeft: { browser: false, export: false },
offsetTop: { browser: false, export: false },
openMenu: { browser: true, export: false },
openPopup: { browser: false, export: false },
pasteDialog: { browser: false, export: false },
previousSelectedElementIds: { browser: true, export: false },
resizingElement: { browser: false, export: false },

4
src/components/App.tsx
View File

@ -1651,10 +1651,10 @@ class App extends React.Component<AppProps, AppState> {
);
if (selectedElements.length) {
if (event.key === KEYS.G) {
this.setState({ openMenu: "backgroundColorPicker" });
this.setState({ openPopup: "backgroundColorPicker" });
}
if (event.key === KEYS.S) {
this.setState({ openMenu: "strokeColorPicker" });
this.setState({ openPopup: "strokeColorPicker" });
}
}
}

18
src/tests/__snapshots__/contextmenu.test.tsx.snap
View File

@ -43,6 +43,7 @@ Object {
"offsetLeft": 20,
"offsetTop": 10,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -208,6 +209,7 @@ Object {
"offsetLeft": 20,
"offsetTop": 10,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -519,6 +521,7 @@ Object {
"offsetLeft": 20,
"offsetTop": 10,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -830,6 +833,7 @@ Object {
"offsetLeft": 20,
"offsetTop": 10,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -995,6 +999,7 @@ Object {
"offsetLeft": 20,
"offsetTop": 10,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -1193,6 +1198,7 @@ Object {
"offsetLeft": 20,
"offsetTop": 10,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -1444,6 +1450,7 @@ Object {
"offsetLeft": 20,
"offsetTop": 10,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -1772,7 +1779,8 @@ Object {
"name": "Untitled-201933152653",
"offsetLeft": 20,
"offsetTop": 10,
"openMenu": "backgroundColorPicker",
"openMenu": null,
"openPopup": "backgroundColorPicker",
"pasteDialog": Object {
"data": null,
"shown": false,
@ -2504,6 +2512,7 @@ Object {
"offsetLeft": 20,
"offsetTop": 10,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -2815,6 +2824,7 @@ Object {
"offsetLeft": 20,
"offsetTop": 10,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -3126,6 +3136,7 @@ Object {
"offsetLeft": 20,
"offsetTop": 10,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -3511,6 +3522,7 @@ Object {
"offsetLeft": 20,
"offsetTop": 10,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -3768,6 +3780,7 @@ Object {
"offsetLeft": 20,
"offsetTop": 10,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -4100,6 +4113,7 @@ Object {
"offsetLeft": 20,
"offsetTop": 10,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -4200,6 +4214,7 @@ Object {
"offsetLeft": 20,
"offsetTop": 10,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -4278,6 +4293,7 @@ Object {
"offsetLeft": 20,
"offsetTop": 10,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,

54
src/tests/__snapshots__/regressionTests.test.tsx.snap
View File

@ -43,6 +43,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -510,6 +511,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -983,6 +985,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -1771,6 +1774,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -1977,6 +1981,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -2441,6 +2446,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -2696,6 +2702,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -2861,6 +2868,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -3307,7 +3315,8 @@ Object {
"name": "Untitled-201933152653",
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": "strokeColorPicker",
"openMenu": null,
"openPopup": "strokeColorPicker",
"pasteDialog": Object {
"data": null,
"shown": false,
@ -3547,6 +3556,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -3753,6 +3763,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -4000,6 +4011,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -4254,6 +4266,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -4640,6 +4653,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -4937,6 +4951,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -5212,6 +5227,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -5421,6 +5437,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -5586,6 +5603,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -6045,6 +6063,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -6366,6 +6385,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -8422,6 +8442,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -8787,6 +8808,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -9042,6 +9064,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -9261,6 +9284,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -9543,6 +9567,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -9708,6 +9733,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -9873,6 +9899,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -10038,6 +10065,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -10233,6 +10261,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -10428,6 +10457,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -10635,6 +10665,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -10830,6 +10861,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -10995,6 +11027,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -11160,6 +11193,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -11355,6 +11389,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -11520,6 +11555,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -11727,6 +11763,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -12452,6 +12489,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -12707,6 +12745,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -12809,6 +12848,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -12909,6 +12949,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -13077,6 +13118,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -13401,6 +13443,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -13603,6 +13646,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -14437,6 +14481,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -14537,6 +14582,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -15304,6 +15350,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -15712,6 +15759,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -15987,6 +16035,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -16089,6 +16138,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -16591,6 +16641,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,
@ -16691,6 +16742,7 @@ Object {
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,

1
src/tests/packages/__snapshots__/utils.test.ts.snap
View File

@ -42,6 +42,7 @@ Object {
"multiElement": null,
"name": "name",
"openMenu": null,
"openPopup": null,
"pasteDialog": Object {
"data": null,
"shown": false,

5
src/types.ts
View File

@ -81,9 +81,8 @@ export type AppState = {
isResizing: boolean;
isRotating: boolean;
zoom: Zoom;
openMenu:
| "canvas"
| "shape"
openMenu: "canvas" | "shape" | null;
openPopup:
| "canvasColorPicker"
| "backgroundColorPicker"
| "strokeColorPicker"