Compare commits
2 Commits
7229c48a9a
...
6251ff5243
| Author | SHA1 | Date | |
|---|---|---|---|
|
6251ff5243 | ||
|
|
3c42c9232c |
@ -7,52 +7,13 @@
|
|||||||
margin: 10px;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-options,
|
.options {
|
||||||
.tool-options {
|
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: auto auto;
|
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 {
|
.option {
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
padding: 7px;
|
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 * as lodash from 'lodash';
|
||||||
import { PrimitiveAtom, useAtom } from 'jotai';
|
import { useAtom, useSetAtom } from 'jotai';
|
||||||
import {
|
import {
|
||||||
Action,
|
|
||||||
COLORS,
|
COLORS,
|
||||||
drawModeState,
|
drawModeState,
|
||||||
isAddLineAction,
|
isAddLineAction,
|
||||||
isAddLinesAction,
|
isAddLinesAction,
|
||||||
isDeleteLinesAction,
|
isDeleteLinesAction,
|
||||||
Line,
|
|
||||||
lineColorState,
|
lineColorState,
|
||||||
Point,
|
|
||||||
userActionsState,
|
userActionsState,
|
||||||
userLinesState,
|
userLinesState,
|
||||||
userRedoActionsState,
|
userRedoActionsState,
|
||||||
@ -18,54 +15,12 @@ import {
|
|||||||
} from '../../atoms';
|
} from '../../atoms';
|
||||||
|
|
||||||
import './grid-config.scss';
|
import './grid-config.scss';
|
||||||
|
import { GridIcon, LineIcon, TrashIcon } from './icons';
|
||||||
|
|
||||||
interface ColorOptionProps {
|
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"
|
|
||||||
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(
|
function useKeyPress(
|
||||||
callback: (event: KeyboardEvent) => void,
|
callback: (event: KeyboardEvent) => void,
|
||||||
key: string,
|
key: string,
|
||||||
@ -112,8 +67,8 @@ const ColorOption: FC<ColorOptionProps> = (props: ColorOptionProps) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const ColorConfig: FC = () => {
|
const ColorConfig: FC = () => {
|
||||||
const [userLineColor, setUserLineColor] = useAtom(lineColorState);
|
const setUserLineColor = useSetAtom(lineColorState);
|
||||||
const [userDrawMode, setUserDrawMode] = useAtom(drawModeState);
|
const setUserDrawMode = useSetAtom(drawModeState);
|
||||||
|
|
||||||
const setUserColorBind = useCallback(
|
const setUserColorBind = useCallback(
|
||||||
(color: string) => {
|
(color: string) => {
|
||||||
@ -133,7 +88,7 @@ const ColorConfig: FC = () => {
|
|||||||
useKeyPress(() => setUserColorBind(COLORS[7]!), '8');
|
useKeyPress(() => setUserColorBind(COLORS[7]!), '8');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="color-options">
|
<div className="color options">
|
||||||
{COLORS.map((color) => (
|
{COLORS.map((color) => (
|
||||||
<ColorOption key={color} color={color} />
|
<ColorOption key={color} color={color} />
|
||||||
))}
|
))}
|
||||||
@ -147,29 +102,29 @@ const ModeConfig: FC = () => {
|
|||||||
useKeyPress(() => setDrawMode('trash'), 't');
|
useKeyPress(() => setDrawMode('trash'), 't');
|
||||||
|
|
||||||
const lineClassName = drawMode === 'line' ? 'option active' : 'option';
|
const lineClassName = drawMode === 'line' ? 'option active' : 'option';
|
||||||
const trashClassName = drawMode === 'trash' ? 'option active' : 'option';
|
|
||||||
const gridClassName = drawMode === 'grid' ? 'option active' : 'option';
|
const gridClassName = drawMode === 'grid' ? 'option active' : 'option';
|
||||||
|
const trashClassName = drawMode === 'trash' ? 'option active' : 'option';
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="tool-options">
|
<div className="tool options">
|
||||||
<div
|
<div
|
||||||
className={lineClassName}
|
className={lineClassName}
|
||||||
onClick={() => setDrawMode('line')}
|
onClick={() => setDrawMode('line')}
|
||||||
>
|
>
|
||||||
{LineIcon}
|
{LineIcon}
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
className={trashClassName}
|
|
||||||
onClick={() => setDrawMode('trash')}
|
|
||||||
>
|
|
||||||
{TrashIcon}
|
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
className={gridClassName}
|
className={gridClassName}
|
||||||
onClick={() => setDrawMode('grid')}
|
onClick={() => setDrawMode('grid')}
|
||||||
>
|
>
|
||||||
{GridIcon}
|
{GridIcon}
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
className={trashClassName}
|
||||||
|
onClick={() => setDrawMode('trash')}
|
||||||
|
>
|
||||||
|
{TrashIcon}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
@ -250,7 +205,14 @@ const StateConfig: FC = () => {
|
|||||||
useKeyPress(onUndo, 'z', true);
|
useKeyPress(onUndo, 'z', true);
|
||||||
useKeyPress(onRedo, 'y', 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 = () => {
|
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