michael/grid
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add grid icon

Browse Source
This commit is contained in:
Michael Peters 2024-06-27 11:18:53 -07:00
parent b9ac4a8b17
commit ec21ae7b32
3 changed files with 89 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
package-lock.json generated
View File

@ -205,14 +205,14 @@
"peer": true "peer": true
}, },
"node_modules/@jridgewell/gen-mapping": { "node_modules/@jridgewell/gen-mapping": {
"version": "0.3.2", "version": "0.3.5",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
"integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==", "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@jridgewell/set-array": "^1.0.1", "@jridgewell/set-array": "^1.2.1",
"@jridgewell/sourcemap-codec": "^1.4.10", "@jridgewell/sourcemap-codec": "^1.4.10",
"@jridgewell/trace-mapping": "^0.3.9" "@jridgewell/trace-mapping": "^0.3.24"
}, },
"engines": { "engines": {
"node": ">=6.0.0" "node": ">=6.0.0"
@ -228,9 +228,9 @@
} }
}, },
"node_modules/@jridgewell/set-array": { "node_modules/@jridgewell/set-array": {
"version": "1.1.2", "version": "1.2.1",
"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
"integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
"dev": true, "dev": true,
"engines": { "engines": {
"node": ">=6.0.0" "node": ">=6.0.0"
@ -253,13 +253,13 @@
"dev": true "dev": true
}, },
"node_modules/@jridgewell/trace-mapping": { "node_modules/@jridgewell/trace-mapping": {
"version": "0.3.17", "version": "0.3.25",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
"integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==", "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@jridgewell/resolve-uri": "3.1.0", "@jridgewell/resolve-uri": "^3.1.0",
"@jridgewell/sourcemap-codec": "1.4.14" "@jridgewell/sourcemap-codec": "^1.4.14"
} }
}, },
"node_modules/@leichtgewicht/ip-codec": { "node_modules/@leichtgewicht/ip-codec": {
@ -438,9 +438,9 @@
"dev": true "dev": true
}, },
"node_modules/@types/prop-types": { "node_modules/@types/prop-types": {
"version": "15.7.5", "version": "15.7.12",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
"dev": true "dev": true
}, },
"node_modules/@types/qs": { "node_modules/@types/qs": {
@ -1836,9 +1836,9 @@
} }
}, },
"node_modules/csstype": { "node_modules/csstype": {
"version": "3.1.1", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
"dev": true "dev": true
}, },
"node_modules/debug": { "node_modules/debug": {
@ -7014,14 +7014,14 @@
"peer": true "peer": true
}, },
"@jridgewell/gen-mapping": { "@jridgewell/gen-mapping": {
"version": "0.3.2", "version": "0.3.5",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
"integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==", "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
"dev": true, "dev": true,
"requires": { "requires": {
"@jridgewell/set-array": "^1.0.1", "@jridgewell/set-array": "^1.2.1",
"@jridgewell/sourcemap-codec": "^1.4.10", "@jridgewell/sourcemap-codec": "^1.4.10",
"@jridgewell/trace-mapping": "^0.3.9" "@jridgewell/trace-mapping": "^0.3.24"
} }
}, },
"@jridgewell/resolve-uri": { "@jridgewell/resolve-uri": {
@ -7031,9 +7031,9 @@
"dev": true "dev": true
}, },
"@jridgewell/set-array": { "@jridgewell/set-array": {
"version": "1.1.2", "version": "1.2.1",
"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
"integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
"dev": true "dev": true
}, },
"@jridgewell/source-map": { "@jridgewell/source-map": {
@ -7053,13 +7053,13 @@
"dev": true "dev": true
}, },
"@jridgewell/trace-mapping": { "@jridgewell/trace-mapping": {
"version": "0.3.17", "version": "0.3.25",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
"integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==", "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"@jridgewell/resolve-uri": "3.1.0", "@jridgewell/resolve-uri": "^3.1.0",
"@jridgewell/sourcemap-codec": "1.4.14" "@jridgewell/sourcemap-codec": "^1.4.14"
} }
}, },
"@leichtgewicht/ip-codec": { "@leichtgewicht/ip-codec": {
@ -7223,9 +7223,9 @@
"dev": true "dev": true
}, },
"@types/prop-types": { "@types/prop-types": {
"version": "15.7.5", "version": "15.7.12",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
"dev": true "dev": true
}, },
"@types/qs": { "@types/qs": {
@ -8260,9 +8260,9 @@
"dev": true "dev": true
}, },
"csstype": { "csstype": {
"version": "3.1.1", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
"dev": true "dev": true
}, },
"debug": { "debug": {

2
src/atoms.ts
View File

@ -11,7 +11,7 @@ export const COLORS = [
'#95a5a6', '#95a5a6',
]; ];
type DrawMode = 'line' | 'trash'; type DrawMode = 'line' | 'trash' | 'grid';
export const MODE_LINE = 'line'; export const MODE_LINE = 'line';
export const MODE_TRASH = 'trash'; export const MODE_TRASH = 'trash';

79
src/components/grid/grid-config.tsx
View File

@ -8,6 +8,52 @@ interface ColorOptionProps {
color: string; color: string;
} }
const LineIcon = (
<svg
className="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="13"
viewBox="0 0 24 13"
>
<line x1="6" y1="9" x2="18" y2="4" stroke="#ffffff" strokeWidth="2" />
<circle cx="6" cy="9" r="3" fill="#ffffff" />
<circle cx="18" cy="4" r="3" fill="#ffffff" />
</svg>
);
const TrashIcon = (
<svg
className="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
fill="#ffffff"
fillRule="evenodd"
d="M7 1a2 2 0 00-2 2v2H2a1 1 0 000 2h.884c.036.338.078.754.12 1.213.11 1.202.218 2.664.218 3.787 0 1.47-.183 3.508-.315 4.776a2.015 2.015 0 002 2.224h10.186a2.015 2.015 0 002-2.224c-.132-1.268-.315-3.306-.315-4.776 0-1.123.107-2.585.218-3.787.042-.459.084-.875.12-1.213H18a1 1 0 100-2h-3V3a2 2 0 00-2-2H7zm6 4V3H7v2h6zM4.996 8.03c-.035-.378-.07-.728-.101-1.03h10.21a81.66 81.66 0 00-.1 1.03c-.112 1.212-.227 2.75-.227 3.97 0 1.584.194 3.714.325 4.982v.007a.02.02 0 01-.005.008l-.003.003H4.905a.024.024 0 01-.008-.01v-.008c.131-1.268.325-3.398.325-4.982 0-1.22-.115-2.758-.226-3.97zM8 8a1 1 0 011 1v6a1 1 0 11-2 0V9a1 1 0 011-1zm5 1a1 1 0 10-2 0v6a1 1 0 102 0V9z"
/>
</svg>
);
const GridIcon = (
<svg
className="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="12"
viewBox="0 0 24 12"
>
<line x1="0" y1="0" x2="24" y2="0" stroke="#ffffff" strokeWidth="2" />
<line x1="0" y1="6" x2="24" y2="6" stroke="#ffffff" strokeWidth="2" />
<line x1="0" y1="12" x2="24" y2="12" stroke="#ffffff" strokeWidth="2" />
<line x1="0" y1="0" x2="0" y2="12" stroke="#ffffff" strokeWidth="2" />
<line x1="8" y1="0" x2="8" y2="12" stroke="#ffffff" strokeWidth="2" />
<line x1="16" y1="0" x2="16" y2="12" stroke="#ffffff" strokeWidth="2" />
<line x1="24" y1="0" x2="24" y2="12" stroke="#ffffff" strokeWidth="2" />
</svg>
);
const ColorOption: FC<ColorOptionProps> = (props: ColorOptionProps) => { const ColorOption: FC<ColorOptionProps> = (props: ColorOptionProps) => {
const { color } = props; const { color } = props;
const [lineColor, setLineColor] = useRecoilState(lineColorState); const [lineColor, setLineColor] = useRecoilState(lineColorState);
@ -43,44 +89,19 @@ const ModeConfig: FC = () => {
const lineClassName = drawMode === 'line' ? 'option active' : 'option'; const lineClassName = drawMode === 'line' ? 'option active' : 'option';
const trashClassName = drawMode === 'trash' ? 'option active' : 'option'; const trashClassName = drawMode === 'trash' ? 'option active' : 'option';
const gridClassName = drawMode === 'grid' ? 'option active' : 'option';
return ( return (
<div className="mode options"> <div className="mode options">
<div className={lineClassName} onClick={() => setDrawMode('line')}> <div className={lineClassName} onClick={() => setDrawMode('line')}>
<svg {LineIcon}
className="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="13"
viewBox="0 0 24 13"
>
<line
x1="6"
y1="9"
x2="18"
y2="4"
stroke="#ffffff"
strokeWidth="2"
/>
<circle cx="6" cy="9" r="3" fill="#ffffff" />
<circle cx="18" cy="4" r="3" fill="#ffffff" />
</svg>
</div> </div>
<div <div
className={trashClassName} className={trashClassName}
onClick={() => setDrawMode('trash')} onClick={() => setDrawMode('trash')}
> >
<svg {TrashIcon}
className="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
fill="#ffffff"
fillRule="evenodd"
d="M7 1a2 2 0 00-2 2v2H2a1 1 0 000 2h.884c.036.338.078.754.12 1.213.11 1.202.218 2.664.218 3.787 0 1.47-.183 3.508-.315 4.776a2.015 2.015 0 002 2.224h10.186a2.015 2.015 0 002-2.224c-.132-1.268-.315-3.306-.315-4.776 0-1.123.107-2.585.218-3.787.042-.459.084-.875.12-1.213H18a1 1 0 100-2h-3V3a2 2 0 00-2-2H7zm6 4V3H7v2h6zM4.996 8.03c-.035-.378-.07-.728-.101-1.03h10.21a81.66 81.66 0 00-.1 1.03c-.112 1.212-.227 2.75-.227 3.97 0 1.584.194 3.714.325 4.982v.007a.02.02 0 01-.005.008l-.003.003H4.905a.024.024 0 01-.008-.01v-.008c.131-1.268.325-3.398.325-4.982 0-1.22-.115-2.758-.226-3.97zM8 8a1 1 0 011 1v6a1 1 0 11-2 0V9a1 1 0 011-1zm5 1a1 1 0 10-2 0v6a1 1 0 102 0V9z"
/>
</svg>
</div> </div>
<div className={gridClassName}>{GridIcon}</div>
</div> </div>
); );
}; };