Skip to content

Commit 50541c4

Browse files
parthivsaikiaparthivsaikia
committed
feat: enable ESC and Double Click to close shape
Signed-off-by: PARTHIV PRATIM SAIKIA <parthivsaikia985@gmail.com>
1 parent 30e22db commit 50541c4

File tree

2 files changed

+143
-43
lines changed

2 files changed

+143
-43
lines changed

‎site/src/components/ShapeBuilder/index.js‎

Lines changed: 63 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
// /* global window */
22
import React, { useEffect, useRef, useState } from "react";
3-
import { Wrapper, CanvasContainer, OutputBox, StyledSVG, CopyButton } from "./shapeBuilder.styles";
3+
import {
4+
Wrapper,
5+
CanvasContainer,
6+
OutputBox,
7+
StyledSVG,
8+
CopyButton,
9+
} from "./shapeBuilder.styles";
410
import { Button, Typography, Box, CopyIcon } from "@sistent/sistent";
511
import { SVG, extend as SVGextend } from "@svgdotjs/svg.js";
612
import draw from "@svgdotjs/svg.draw.js";
@@ -60,13 +66,16 @@ const ShapeBuilder = () => {
6066

6167
const points = getPlottedPoints(poly);
6268
if (!points) return;
63-
const xs = points.map(p => p[0]);
64-
const ys = points.map(p => p[1]);
69+
const xs = points.map((p) => p[0]);
70+
const ys = points.map((p) => p[1]);
6571

6672
const width = Math.abs(Math.max(...xs) - Math.min(...xs));
6773
const height = Math.abs(Math.max(...ys) - Math.min(...ys));
6874

69-
poly.size(width > height ? 520 : undefined, height >= width ? 520 : undefined);
75+
poly.size(
76+
width > height ? 520 : undefined,
77+
height >= width ? 520 : undefined,
78+
);
7079
poly.move(0, 0);
7180
showCytoArray();
7281
};
@@ -79,7 +88,7 @@ const ShapeBuilder = () => {
7988
poly.draw("param", "snapToGrid", 0.001);
8089
}
8190

82-
if (e.key === "Enter") {
91+
if (e.key === "Enter" || e.key === "Escape") {
8392
poly.draw("done");
8493
poly.fill("#00B39F");
8594
showCytoArray();
@@ -172,34 +181,66 @@ const ShapeBuilder = () => {
172181
return (
173182
<Wrapper>
174183
<CanvasContainer>
175-
<StyledSVG ref={boardRef} width="100%" height="100%">
184+
<StyledSVG
185+
ref={boardRef}
186+
width="100%"
187+
height="100%"
188+
onDoubleClick={closeShape}
189+
>
176190
<defs>
177-
<pattern id="grid" width="16" height="16" patternUnits="userSpaceOnUse">
178-
<path d="M 16 0 L 0 0 0 16" fill="none" stroke="#797d7a" strokeWidth="1" />
191+
<pattern
192+
id="grid"
193+
width="16"
194+
height="16"
195+
patternUnits="userSpaceOnUse"
196+
>
197+
<path
198+
d="M 16 0 L 0 0 0 16"
199+
fill="none"
200+
stroke="#797d7a"
201+
strokeWidth="1"
202+
/>
179203
</pattern>
180204
</defs>
181205
<rect className="grid" width="100%" height="100%" fill="url(#grid)" />
182206
</StyledSVG>
183207
{error && (
184-
<div style={{
185-
position: "absolute",
186-
top: "50%",
187-
left: "50%",
188-
transform: "translate(-50%, -50%)",
189-
color: "red",
190-
backgroundColor: "white",
191-
padding: "10px",
192-
borderRadius: "5px"
193-
}}>
208+
<div
209+
style={{
210+
position: "absolute",
211+
top: "50%",
212+
left: "50%",
213+
transform: "translate(-50%, -50%)",
214+
color: "red",
215+
backgroundColor: "white",
216+
padding: "10px",
217+
borderRadius: "5px",
218+
}}
219+
>
194220
{error}
195221
</div>
196222
)}
197223
</CanvasContainer>
198224

199-
<Box sx={{ display: "flex", justifyContent: "center", gap: 2, mt: 3, mb: 3, flexWrap: "wrap" }}>
200-
<Button variant="contained" onClick={clearShape}>Clear</Button>
201-
<Button variant="contained" onClick={closeShape}>Close Shape</Button>
202-
<Button variant="contained" onClick={handleMaximize}>Maximize</Button>
225+
<Box
226+
sx={{
227+
display: "flex",
228+
justifyContent: "center",
229+
gap: 2,
230+
mt: 3,
231+
mb: 3,
232+
flexWrap: "wrap",
233+
}}
234+
>
235+
<Button variant="contained" onClick={clearShape}>
236+
Clear
237+
</Button>
238+
<Button variant="contained" onClick={closeShape}>
239+
Close Shape
240+
</Button>
241+
<Button variant="contained" onClick={handleMaximize}>
242+
Maximize
243+
</Button>
203244
</Box>
204245

205246
<OutputBox>

‎site/src/pages/index.js‎

Lines changed: 80 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,100 @@
1-
import React, { useState } from "react";
2-
import { ThemeProvider } from "styled-components";
1+
import React from "react";
2+
import styled, { ThemeProvider } from "styled-components";
33
import { GlobalStyle, Main, lightTheme, darkTheme } from "../styles/styles";
44
import { useDarkMode } from "../components/useDarkMode";
55
import Navigation from "../components/Navigation";
66
import Footer from "../components/Footer";
77
import ShapeBuilder from "../components/ShapeBuilder";
8-
import { Button, SistentThemeProviderWithoutBaseLine, Box } from "@sistent/sistent";
9-
import InstructionsModal from "../components/utils/instructionsModal";
8+
import { SistentThemeProviderWithoutBaseLine, Box } from "@sistent/sistent";
9+
10+
const Kbd = styled.kbd`
11+
background-color: ${({ theme }) =>
12+
theme.mode === "light" ? "#f4f4f4" : "#2b2b2b"};
13+
border: 1px solid
14+
${({ theme }) => (theme.mode === "light" ? "#d1d5da" : "#444")};
15+
border-bottom-color: ${({ theme }) =>
16+
theme.mode === "light" ? "#c6cbd1" : "#444"};
17+
border-radius: 3px;
18+
box-shadow: inset 0 -1px 0
19+
${({ theme }) => (theme.mode === "light" ? "#c6cbd1" : "#444")};
20+
color: ${({ theme }) => (theme.mode === "light" ? "#444" : "#e6e6e6")};
21+
display: inline-block;
22+
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
23+
font-size: 11px;
24+
font-weight: 600;
25+
line-height: 1;
26+
padding: 3px 6px;
27+
margin-right: 6px;
28+
vertical-align: middle;
29+
`;
30+
31+
const InstructionsContainer = styled.div`
32+
display: flex;
33+
justify-content: center;
34+
align-items: center;
35+
flex-wrap: wrap;
36+
gap: 24px;
37+
margin-top: 16px;
38+
font-size: 0.9rem;
39+
color: ${({ theme }) => (theme.mode === "light" ? "#666" : "#aaa")};
40+
41+
span {
42+
display: flex;
43+
align-items: center;
44+
}
45+
`;
1046

1147
const IndexPage = () => {
12-
// const themesistent = useTheme();
1348
const [theme, toggleTheme] = useDarkMode();
1449
const themeMode = theme === "light" ? lightTheme : darkTheme;
15-
const [open, setOpen] = useState(false);
50+
const activeTheme = { ...themeMode, mode: theme };
1651

1752
return (
1853
<SistentThemeProviderWithoutBaseLine>
19-
<ThemeProvider theme={themeMode}>
54+
<ThemeProvider theme={activeTheme}>
2055
<GlobalStyle />
2156
<Navigation theme={theme} toggleTheme={toggleTheme} />
2257
<Main>
2358
<section className="hero">
24-
<h1>Shape Builder</h1>
25-
<p className="desc-text">
26-
Click on the grid to start creating a polygon. Each click adds a point.
27-
</p>
28-
</section>
29-
<Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
30-
<Button
31-
variant="contained"
32-
sx={{ minWidth: "fit-content" }}
33-
onClick={() => setOpen(true)}
59+
<Box
60+
sx={{
61+
display: "flex",
62+
flexDirection: "column",
63+
alignItems: "center",
64+
justifyContent: "center",
65+
gap: 2,
66+
mb: 4,
67+
}}
3468
>
35-
Show Instructions
36-
</Button>
37-
</Box>
38-
<InstructionsModal open={open} onClose={() => setOpen(false)} />
69+
<h1>Shape Builder</h1>
70+
71+
<p className="desc-text" style={{ margin: 0 }}>
72+
Click on the grid to start creating a polygon. Each click adds a
73+
point.
74+
</p>
75+
76+
<InstructionsContainer theme={activeTheme}>
77+
<span>
78+
<Kbd theme={activeTheme}>ENTER</Kbd> /{" "}
79+
<Kbd theme={activeTheme}>ESC</Kbd> Close shape
80+
</span>
81+
82+
<span>
83+
<Kbd theme={activeTheme}>CTRL</Kbd> Snap to grid
84+
</span>
85+
86+
<span>
87+
<Kbd theme={activeTheme}>CTRL</Kbd> +{" "}
88+
<Kbd theme={activeTheme}>Z</Kbd> Undo
89+
</span>
90+
91+
<span>
92+
<Kbd theme={activeTheme}>Maximize</Kbd> Visibility
93+
</span>
94+
</InstructionsContainer>
95+
</Box>
96+
</section>
97+
3998
<ShapeBuilder />
4099
</Main>
41100
<Footer />

0 commit comments

Comments
 (0)