diff --git a/src/actions/actionCanvas.tsx b/src/actions/actionCanvas.tsx index ee903d0e..dacd0ca5 100644 --- a/src/actions/actionCanvas.tsx +++ b/src/actions/actionCanvas.tsx @@ -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" /> diff --git a/src/actions/actionProperties.tsx b/src/actions/actionProperties.tsx index 5ed4e514..45756dca 100644 --- a/src/actions/actionProperties.tsx +++ b/src/actions/actionProperties.tsx @@ -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 }) } /> diff --git a/src/appState.ts b/src/appState.ts index 3b23a23b..13b5dc3b 100644 --- a/src/appState.ts +++ b/src/appState.ts @@ -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 }, diff --git a/src/components/App.tsx b/src/components/App.tsx index 0967d1dc..2bfa6687 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1651,10 +1651,10 @@ class App extends React.Component { ); 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" }); } } } diff --git a/src/tests/__snapshots__/contextmenu.test.tsx.snap b/src/tests/__snapshots__/contextmenu.test.tsx.snap index e2f294f7..ce153536 100644 --- a/src/tests/__snapshots__/contextmenu.test.tsx.snap +++ b/src/tests/__snapshots__/contextmenu.test.tsx.snap @@ -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, diff --git a/src/tests/__snapshots__/regressionTests.test.tsx.snap b/src/tests/__snapshots__/regressionTests.test.tsx.snap index 43ded173..02c4e17c 100644 --- a/src/tests/__snapshots__/regressionTests.test.tsx.snap +++ b/src/tests/__snapshots__/regressionTests.test.tsx.snap @@ -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, diff --git a/src/tests/packages/__snapshots__/utils.test.ts.snap b/src/tests/packages/__snapshots__/utils.test.ts.snap index 6e9382f2..1945f236 100644 --- a/src/tests/packages/__snapshots__/utils.test.ts.snap +++ b/src/tests/packages/__snapshots__/utils.test.ts.snap @@ -42,6 +42,7 @@ Object { "multiElement": null, "name": "name", "openMenu": null, + "openPopup": null, "pasteDialog": Object { "data": null, "shown": false, diff --git a/src/types.ts b/src/types.ts index d624df3c..d4b16204 100644 --- a/src/types.ts +++ b/src/types.ts @@ -81,9 +81,8 @@ export type AppState = { isResizing: boolean; isRotating: boolean; zoom: Zoom; - openMenu: - | "canvas" - | "shape" + openMenu: "canvas" | "shape" | null; + openPopup: | "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker"