Compare commits
2 Commits
7229c48a9a
...
6251ff5243
| Author | SHA1 | Date | |
|---|---|---|---|
|
6251ff5243 | ||
|
|
3c42c9232c |
@ -7,52 +7,13 @@
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.color-options,
|
||||
.tool-options {
|
||||
.options {
|
||||
background-color: #000;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
|
||||
.grid-options {
|
||||
background-color: #000;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
|
||||
.grid.option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
svg.icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.x {
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
input.grid-size {
|
||||
width: 18px;
|
||||
height: 20px;
|
||||
border: none;
|
||||
padding: 2px 0 4px 0;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
background-color: #131b23;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color-options,
|
||||
.tool-options,
|
||||
.grid-options {
|
||||
.option {
|
||||
margin: 5px;
|
||||
padding: 7px;
|
||||
|
||||
@ -1,16 +1,13 @@
|
||||
import { ChangeEvent, FC, useCallback, useEffect } from 'react';
|
||||
import { FC, useCallback, useEffect } from 'react';
|
||||
import * as lodash from 'lodash';
|
||||
import { PrimitiveAtom, useAtom } from 'jotai';
|
||||
import { useAtom, useSetAtom } from 'jotai';
|
||||
import {
|
||||
Action,
|
||||
COLORS,
|
||||
drawModeState,
|
||||
isAddLineAction,
|
||||
isAddLinesAction,
|
||||
isDeleteLinesAction,
|
||||
Line,
|
||||
lineColorState,
|
||||
Point,
|
||||
userActionsState,
|
||||
userLinesState,
|
||||
userRedoActionsState,
|
||||
@ -18,54 +15,12 @@ import {
|
||||
} from '../../atoms';
|
||||
|
||||
import './grid-config.scss';
|
||||
import { GridIcon, LineIcon, TrashIcon } from './icons';
|
||||
|
||||
interface ColorOptionProps {
|
||||
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"
|
||||
viewBox="0 0 24 13"
|
||||
>
|
||||
<line x1="5" y1="0" x2="18" y2="0" stroke="#ffffff" strokeWidth="4" />
|
||||
<line x1="5" y1="7" x2="18" y2="7" stroke="#ffffff" strokeWidth="2" />
|
||||
<line x1="5" y1="13" x2="18" y2="13" stroke="#ffffff" strokeWidth="4" />
|
||||
<line x1="5" y1="0" x2="5" y2="13" stroke="#ffffff" strokeWidth="2" />
|
||||
<line x1="11" y1="0" x2="11" y2="13" stroke="#ffffff" strokeWidth="2" />
|
||||
<line x1="17" y1="0" x2="17" y2="13" stroke="#ffffff" strokeWidth="2" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
function useKeyPress(
|
||||
callback: (event: KeyboardEvent) => void,
|
||||
key: string,
|
||||
@ -112,8 +67,8 @@ const ColorOption: FC<ColorOptionProps> = (props: ColorOptionProps) => {
|
||||
};
|
||||
|
||||
const ColorConfig: FC = () => {
|
||||
const [userLineColor, setUserLineColor] = useAtom(lineColorState);
|
||||
const [userDrawMode, setUserDrawMode] = useAtom(drawModeState);
|
||||
const setUserLineColor = useSetAtom(lineColorState);
|
||||
const setUserDrawMode = useSetAtom(drawModeState);
|
||||
|
||||
const setUserColorBind = useCallback(
|
||||
(color: string) => {
|
||||
@ -133,7 +88,7 @@ const ColorConfig: FC = () => {
|
||||
useKeyPress(() => setUserColorBind(COLORS[7]!), '8');
|
||||
|
||||
return (
|
||||
<div className="color-options">
|
||||
<div className="color options">
|
||||
{COLORS.map((color) => (
|
||||
<ColorOption key={color} color={color} />
|
||||
))}
|
||||
@ -147,29 +102,29 @@ const ModeConfig: FC = () => {
|
||||
useKeyPress(() => setDrawMode('trash'), 't');
|
||||
|
||||
const lineClassName = drawMode === 'line' ? 'option active' : 'option';
|
||||
const trashClassName = drawMode === 'trash' ? 'option active' : 'option';
|
||||
const gridClassName = drawMode === 'grid' ? 'option active' : 'option';
|
||||
const trashClassName = drawMode === 'trash' ? 'option active' : 'option';
|
||||
return (
|
||||
<>
|
||||
<div className="tool-options">
|
||||
<div className="tool options">
|
||||
<div
|
||||
className={lineClassName}
|
||||
onClick={() => setDrawMode('line')}
|
||||
>
|
||||
{LineIcon}
|
||||
</div>
|
||||
<div
|
||||
className={trashClassName}
|
||||
onClick={() => setDrawMode('trash')}
|
||||
>
|
||||
{TrashIcon}
|
||||
</div>
|
||||
<div
|
||||
className={gridClassName}
|
||||
onClick={() => setDrawMode('grid')}
|
||||
>
|
||||
{GridIcon}
|
||||
</div>
|
||||
<div
|
||||
className={trashClassName}
|
||||
onClick={() => setDrawMode('trash')}
|
||||
>
|
||||
{TrashIcon}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
@ -250,7 +205,14 @@ const StateConfig: FC = () => {
|
||||
useKeyPress(onUndo, 'z', true);
|
||||
useKeyPress(onRedo, 'y', true);
|
||||
|
||||
return null;
|
||||
// TODO: turn onUndo & onRedo into proper buttons with proper icons
|
||||
|
||||
return (
|
||||
<div className="state-options">
|
||||
<div onClick={onUndo}>{LineIcon}</div>
|
||||
<div onClick={onRedo}>{TrashIcon}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const GridConfig: FC = () => {
|
||||
|
||||
42
src/components/grid/icons.tsx
Normal file
42
src/components/grid/icons.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
export 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>
|
||||
);
|
||||
|
||||
export const GridIcon = (
|
||||
<svg
|
||||
className="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 13"
|
||||
>
|
||||
<line x1="5" y1="0" x2="18" y2="0" stroke="#ffffff" strokeWidth="4" />
|
||||
<line x1="5" y1="7" x2="18" y2="7" stroke="#ffffff" strokeWidth="2" />
|
||||
<line x1="5" y1="13" x2="18" y2="13" stroke="#ffffff" strokeWidth="4" />
|
||||
<line x1="5" y1="0" x2="5" y2="13" stroke="#ffffff" strokeWidth="2" />
|
||||
<line x1="11" y1="0" x2="11" y2="13" stroke="#ffffff" strokeWidth="2" />
|
||||
<line x1="17" y1="0" x2="17" y2="13" stroke="#ffffff" strokeWidth="2" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export 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>
|
||||
);
|
||||
Loading…
Reference in New Issue
Block a user