ui for mode support
This commit is contained in:
Michael Peters
parent
851e78bff3
commit
1ecfcb2f88
11
src/atoms.ts
11
src/atoms.ts
@ -2,7 +2,16 @@ import { atom } from 'recoil';
|
||||
|
||||
export const DEFAULT_COLOR = '#339ad6';
|
||||
|
||||
export const currentColorState = atom({
|
||||
type DrawMode = 'line' | 'trash';
|
||||
export const MODE_LINE = 'line';
|
||||
export const MODE_TRASH = 'trash';
|
||||
|
||||
export const lineColorState = atom<string>({
|
||||
key: 'colorState',
|
||||
default: DEFAULT_COLOR,
|
||||
});
|
||||
|
||||
export const drawModeState = atom<DrawMode>({
|
||||
key: 'drawModeState',
|
||||
default: MODE_LINE,
|
||||
});
|
||||
|
||||
@ -7,32 +7,34 @@
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.color-config {
|
||||
.options {
|
||||
background-color: #000;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
|
||||
.color-options {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
.option {
|
||||
margin: 5px;
|
||||
padding: 7px;
|
||||
background-color: #283f56;
|
||||
border: 2px solid #283f56;
|
||||
border-radius: 5px;
|
||||
|
||||
.color-option {
|
||||
margin: 5px;
|
||||
padding: 7px;
|
||||
background-color: #283f56;
|
||||
border: 2px solid #283f56;
|
||||
border-radius: 5px;
|
||||
&.active {
|
||||
background-color: #265584;
|
||||
border-color: #458bd1;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #265584;
|
||||
border-color: #458bd1;
|
||||
}
|
||||
.sample {
|
||||
width: 24px;
|
||||
height: 13px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.sample {
|
||||
width: 24px;
|
||||
height: 13px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
svg.icon {
|
||||
width: 24px;
|
||||
height: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { FC } from 'react';
|
||||
import { useRecoilState } from 'recoil';
|
||||
import { currentColorState, DEFAULT_COLOR } from '../../atoms';
|
||||
import { DEFAULT_COLOR, drawModeState, lineColorState } from '../../atoms';
|
||||
|
||||
import './grid-config.scss';
|
||||
|
||||
@ -10,14 +10,12 @@ interface ColorOptionProps {
|
||||
|
||||
const ColorOption: FC<ColorOptionProps> = (props: ColorOptionProps) => {
|
||||
const { color } = props;
|
||||
const [currentColor, setCurrentColor] = useRecoilState(currentColorState);
|
||||
const [lineColor, setLineColor] = useRecoilState(lineColorState);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
color === currentColor ? 'color-option active' : 'color-option'
|
||||
}
|
||||
onClick={() => setCurrentColor(color)}
|
||||
className={color === lineColor ? 'option active' : 'option'}
|
||||
onClick={() => setLineColor(color)}
|
||||
>
|
||||
<div className="sample" style={{ backgroundColor: color }} />
|
||||
</div>
|
||||
@ -26,16 +24,61 @@ const ColorOption: FC<ColorOptionProps> = (props: ColorOptionProps) => {
|
||||
|
||||
const ColorConfig: FC = () => {
|
||||
return (
|
||||
<div className="color-config">
|
||||
<div className="color-options">
|
||||
<ColorOption color={DEFAULT_COLOR} />
|
||||
<ColorOption color="#d33b3d" />
|
||||
<ColorOption color="#3dd33b" />
|
||||
<ColorOption color="#f1c40f" />
|
||||
<ColorOption color="#d35400" />
|
||||
<ColorOption color="#8e44ad" />
|
||||
<ColorOption color="#eeeeee" />
|
||||
<ColorOption color="#95a5a6" />
|
||||
<div className="color options">
|
||||
<ColorOption color={DEFAULT_COLOR} />
|
||||
<ColorOption color="#d33b3d" />
|
||||
<ColorOption color="#3dd33b" />
|
||||
<ColorOption color="#f1c40f" />
|
||||
<ColorOption color="#d35400" />
|
||||
<ColorOption color="#8e44ad" />
|
||||
<ColorOption color="#eeeeee" />
|
||||
<ColorOption color="#95a5a6" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ModeConfig: FC = () => {
|
||||
const [drawMode, setDrawMode] = useRecoilState(drawModeState);
|
||||
|
||||
const lineClassName = drawMode === 'line' ? 'option active' : 'option';
|
||||
const trashClassName = drawMode === 'trash' ? 'option active' : 'option';
|
||||
return (
|
||||
<div className="mode options">
|
||||
<div className={lineClassName} onClick={() => setDrawMode('line')}>
|
||||
<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>
|
||||
</div>
|
||||
<div
|
||||
className={trashClassName}
|
||||
onClick={() => setDrawMode('trash')}
|
||||
>
|
||||
<svg
|
||||
className="icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fill="#ffffff"
|
||||
fill-rule="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>
|
||||
);
|
||||
@ -45,6 +88,7 @@ const GridConfig: FC = () => {
|
||||
return (
|
||||
<div className="grid-config">
|
||||
<ColorConfig />
|
||||
<ModeConfig />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -13,7 +13,7 @@ import './grid.scss';
|
||||
|
||||
import * as lodash from 'lodash';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { currentColorState } from '../../atoms';
|
||||
import { lineColorState } from '../../atoms';
|
||||
|
||||
interface Point {
|
||||
x: number;
|
||||
@ -127,7 +127,7 @@ const Grid: FC = () => {
|
||||
const [userLines, setUserLines] = useState<Line[]>([]);
|
||||
const [userRedoLines, setUserRedoLines] = useState<Line[]>([]);
|
||||
const [userStartPoint, setUserStartPoint] = useState<Point | null>(null);
|
||||
const userLineColor = useRecoilValue(currentColorState);
|
||||
const userLineColor = useRecoilValue(lineColorState);
|
||||
|
||||
// mouse clicks create lines
|
||||
const onGridClick = useCallback(
|
||||
|
||||
Loading…
Reference in New Issue
Block a user