Merge pull request #92 from parthivsaikia/feat/72-exit-shortcuts

[Shape-builder]: enable ESC and Double Click to close shape

Author: saurabhraghuvanshii

site/src/components/ShapeBuilder/index.js

@@ -79,7 +79,7 @@ const ShapeBuilder = () => {
       poly.draw("param", "snapToGrid", 0.001);
     }
 
-    if (e.key === "Enter") {
+    if (e.key === "Enter" || e.key === "Escape") {
       poly.draw("done");
       poly.fill("#00B39F");
       showCytoArray();
@@ -172,7 +172,12 @@ const ShapeBuilder = () => {
   return (
     <Wrapper>
       <CanvasContainer>
-        <StyledSVG ref={boardRef} width="100%" height="100%">
+        <StyledSVG
+          ref={boardRef}
+          width="100%"
+          height="100%"
+          onDoubleClick={closeShape}
+        >
           <defs>
             <pattern id="grid" width="16" height="16" patternUnits="userSpaceOnUse">
               <path d="M 16 0 L 0 0 0 16" fill="none" stroke="#797d7a" strokeWidth="1" />

site/src/pages/index.js

@@ -1,41 +1,100 @@
-import React, { useState } from "react";
-import { ThemeProvider } from "styled-components";
+import React from "react";
+import styled, { ThemeProvider } from "styled-components";
 import { GlobalStyle, Main, lightTheme, darkTheme } from "../styles/styles";
 import { useDarkMode } from "../components/useDarkMode";
 import Navigation from "../components/Navigation";
 import Footer from "../components/Footer";
 import ShapeBuilder from "../components/ShapeBuilder";
-import { Button, SistentThemeProviderWithoutBaseLine, Box } from "@sistent/sistent";
-import InstructionsModal from "../components/utils/instructionsModal";
+import { SistentThemeProviderWithoutBaseLine, Box } from "@sistent/sistent";
+
+const Kbd = styled.kbd`
+  background-color: ${({ theme }) =>
+  theme.mode === "light" ? "#f4f4f4" : "#2b2b2b"};
+  border: 1px solid
+    ${({ theme }) => (theme.mode === "light" ? "#d1d5da" : "#444")};
+  border-bottom-color: ${({ theme }) =>
+    theme.mode === "light" ? "#c6cbd1" : "#444"};
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0
+    ${({ theme }) => (theme.mode === "light" ? "#c6cbd1" : "#444")};
+  color: ${({ theme }) => (theme.mode === "light" ? "#444" : "#e6e6e6")};
+  display: inline-block;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  padding: 3px 6px;
+  margin-right: 6px;
+  vertical-align: middle;
+`;
+
+const InstructionsContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 24px;
+  margin-top: 16px;
+  font-size: 0.9rem;
+  color: ${({ theme }) => (theme.mode === "light" ? "#666" : "#aaa")};
+
+  span {
+    display: flex;
+    align-items: center;
+  }
+`;
 
 const IndexPage = () => {
-  // const themesistent = useTheme();
   const [theme, toggleTheme] = useDarkMode();
   const themeMode = theme === "light" ? lightTheme : darkTheme;
-  const [open, setOpen] = useState(false);
+  const activeTheme = { ...themeMode, mode: theme };
 
   return (
     <SistentThemeProviderWithoutBaseLine>
-      <ThemeProvider theme={themeMode}>
+      <ThemeProvider theme={activeTheme}>
         <GlobalStyle />
         <Navigation theme={theme} toggleTheme={toggleTheme} />
         <Main>
           <section className="hero">
-            <h1>Shape Builder</h1>
-            <p className="desc-text">
-              Click on the grid to start creating a polygon. Each click adds a point.
-            </p>
-          </section>
-          <Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
-            <Button
-              variant="contained"
-              sx={{ minWidth: "fit-content" }}
-              onClick={() => setOpen(true)}
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: 2,
+                mb: 4,
+              }}
             >
-              Show Instructions
-            </Button>
-          </Box>
-          <InstructionsModal open={open} onClose={() => setOpen(false)} />
+              <h1>Shape Builder</h1>
+
+              <p className="desc-text" style={{ margin: 0 }}>
+                Click on the grid to start creating a polygon. Each click adds a
+                point.
+              </p>
+
+              <InstructionsContainer theme={activeTheme}>
+                <span>
+                  <Kbd theme={activeTheme}>ENTER</Kbd> /{" "}
+                  <Kbd theme={activeTheme}>ESC</Kbd> Close shape
+                </span>
+
+                <span>
+                  <Kbd theme={activeTheme}>CTRL</Kbd> Snap to grid
+                </span>
+
+                <span>
+                  <Kbd theme={activeTheme}>CTRL</Kbd> +{" "}
+                  <Kbd theme={activeTheme}>Z</Kbd> Undo
+                </span>
+
+                <span>
+                  <Kbd theme={activeTheme}>Maximize</Kbd> Visibility
+                </span>
+              </InstructionsContainer>
+            </Box>
+          </section>
+
           <ShapeBuilder />
         </Main>
         <Footer />