fix: ensure s and g shortcuts work on no selection (#3800)

Co-authored-by: dwelle <luzar.david@gmail.com>

src/components/App.tsx

@@ -156,6 +156,7 @@ import {
   getElementsWithinSelection,
   getNormalizedZoom,
   getSelectedElements,
+  hasBackground,
   isOverScrollBars,
   isSomeElementSelected,
 } from "../scene";
@@ -1582,17 +1583,22 @@ class App extends React.Component<AppProps, AppState> {
       }
 
       if (event.key === KEYS.G || event.key === KEYS.S) {
-        const selectedElements = getSelectedElements(
+        if (this.state.elementType === "selection") {
-          this.scene.getElements(),
+          return;
-          this.state,
+        }
-        );
+
-        if (selectedElements.length) {
+        if (
-          if (event.key === KEYS.G) {
+          event.key === KEYS.G &&
-            this.setState({ openPopup: "backgroundColorPicker" });
+          (hasBackground(this.state.elementType) ||
-          }
+            getSelectedElements(
-          if (event.key === KEYS.S) {
+              this.scene.getElements(),
-            this.setState({ openPopup: "strokeColorPicker" });
+              this.state,
-          }
+            ).some((element) => hasBackground(element.type)))
+        ) {
+          this.setState({ openPopup: "backgroundColorPicker" });
+        }
+        if (event.key === KEYS.S) {
+          this.setState({ openPopup: "strokeColorPicker" });
         }
       }
     },

src/shapes.tsx

@@ -11,7 +11,7 @@ export const SHAPES = [
       </svg>
     ),
     value: "selection",
-    key: [KEYS.V, KEYS.S],
+    key: KEYS.V,
   },
   {
     icon: (