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

add grid input elements for size

Browse Source
This commit is contained in:
Michael Peters 2024-06-27 13:50:05 -07:00
parent 1581967a28
commit 89ecd65999
3 changed files with 74 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/atoms.ts
View File

@ -17,5 +17,5 @@ export const lineColorState = atom<string>(COLORS[0]!);
export const drawModeState = atom<DrawMode>('line');
export const drawGridWidthState = atom<number>(4);
export const drawGridHeightState = atom<number>(4);
export const drawGridWidthState = atom<number | null>(4);
export const drawGridHeightState = atom<number | null>(4);

27
src/components/grid/grid-config.scss
View File

@ -21,6 +21,33 @@
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,

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

@ -1,5 +1,5 @@
import { FC } from 'react';
import { useAtom, Atom } from 'jotai';
import { ChangeEvent, FC, useCallback } from 'react';
import { PrimitiveAtom, useAtom, WritableAtom } from 'jotai';
import {
COLORS,
drawGridHeightState,
@ -46,17 +46,16 @@ const GridIcon = (
<svg
className="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
width="12"
height="12"
viewBox="0 0 24 12"
viewBox="0 0 12 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="12" y2="0" stroke="#ffffff" strokeWidth="2" />
<line x1="0" y1="6" x2="12" y2="6" stroke="#ffffff" strokeWidth="2" />
<line x1="0" y1="12" x2="12" 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" />
<line x1="6" y1="0" x2="6" y2="12" stroke="#ffffff" strokeWidth="2" />
<line x1="12" y1="0" x2="12" y2="12" stroke="#ffffff" strokeWidth="2" />
</svg>
);
@ -86,17 +85,36 @@ const ColorOption: FC<ColorOptionProps> = (props: ColorOptionProps) => {
};
interface StateInputProps<T> {
state: Atom<T>;
state: PrimitiveAtom<T>;
className?: string;
}
const NumberStateInput: FC<StateInputProps<number>> = (
props: StateInputProps<number>
const NumberStateInput: FC<StateInputProps<number | null>> = (
props: StateInputProps<number | null>
) => {
const { state } = props;
const { state, className } = props;
const [number, setNumber] = useAtom(state);
// TODO
return null;
const handleChange = useCallback(
(e: ChangeEvent<HTMLInputElement>) => {
const re = /^\d*$/;
const v = e.target.value;
if (v === '') {
setNumber(null);
} else if (re.test(v)) {
setNumber(parseInt(v));
}
},
[setNumber]
);
return (
<input
className={className}
value={number ?? ''}
onChange={handleChange}
/>
);
};
const ColorConfig: FC = () => (
@ -109,12 +127,11 @@ const ColorConfig: FC = () => (
const ModeConfig: FC = () => {
const [drawMode, setDrawMode] = useAtom(drawModeState);
const [drawGridWidth, setDrawGridWidth] = useAtom(drawGridWidthState);
const [drawGridHeight, setDrawGridHeight] = useAtom(drawGridHeightState);
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 grid' : 'option grid';
return (
<>
<div className="tool-options">
@ -137,9 +154,15 @@ const ModeConfig: FC = () => {
onClick={() => setDrawMode('grid')}
>
{GridIcon}
<input />
x
<input />
<NumberStateInput
className="grid-size width"
state={drawGridWidthState}
/>
<span className="x">x</span>
<NumberStateInput
className="grid-size height"
state={drawGridHeightState}
/>
</div>
</div>
</>