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

reduce usage of term user in atoms + grid config

Browse Source
This commit is contained in:
Michael Peters 2024-06-29 10:06:26 -07:00
parent 27a5c8c135
commit 62f7184242
3 changed files with 65 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/atoms.ts
View File

@ -86,8 +86,8 @@ export const lineColorState = atom<string>(COLORS[0]!);
export const drawModeState = atom<DrawMode>('line'); export const drawModeState = atom<DrawMode>('line');
export const userLinesState = atom<Line[]>([]); export const linesState = atom<Line[]>([]);
export const userActionsState = atom<Action[]>([]); export const actionsState = atom<Action[]>([]);
export const userRedoActionsState = atom<Action[]>([]); export const redoActionsState = atom<Action[]>([]);
export const userStartPointState = atom<Point | null>(null); export const startPointState = atom<Point | null>(null);

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

@ -8,10 +8,11 @@ import {
isAddLinesAction, isAddLinesAction,
isDeleteLinesAction, isDeleteLinesAction,
lineColorState, lineColorState,
userActionsState, actionsState,
userLinesState, linesState,
userRedoActionsState, redoActionsState,
userStartPointState, startPointState,
getDrawModeInfo,
} from '../../atoms'; } from '../../atoms';
import './grid-config.scss'; import './grid-config.scss';
@ -74,25 +75,25 @@ const ColorOption: FC<ColorOptionProps> = (props: ColorOptionProps) => {
}; };
const ColorConfig: FC = () => { const ColorConfig: FC = () => {
const setUserLineColor = useSetAtom(lineColorState); const setLineColor = useSetAtom(lineColorState);
const setUserDrawMode = useSetAtom(drawModeState); const [drawMode, setDrawMode] = useAtom(drawModeState);
const drawModeInfo = getDrawModeInfo(drawMode);
const setUserColorBind = useCallback( const setColorBind = useCallback((color: string) => {
(color: string) => { setLineColor(color);
setUserLineColor(color); if (!drawModeInfo.hasColor) {
setUserDrawMode('line'); setDrawMode('line');
}, }
[setUserLineColor, setUserDrawMode] }, []);
);
useKeyPress(() => setUserColorBind(COLORS[0]!), '1'); useKeyPress(() => setColorBind(COLORS[0]!), '1');
useKeyPress(() => setUserColorBind(COLORS[1]!), '2'); useKeyPress(() => setColorBind(COLORS[1]!), '2');
useKeyPress(() => setUserColorBind(COLORS[2]!), '3'); useKeyPress(() => setColorBind(COLORS[2]!), '3');
useKeyPress(() => setUserColorBind(COLORS[3]!), '4'); useKeyPress(() => setColorBind(COLORS[3]!), '4');
useKeyPress(() => setUserColorBind(COLORS[4]!), '5'); useKeyPress(() => setColorBind(COLORS[4]!), '5');
useKeyPress(() => setUserColorBind(COLORS[5]!), '6'); useKeyPress(() => setColorBind(COLORS[5]!), '6');
useKeyPress(() => setUserColorBind(COLORS[6]!), '7'); useKeyPress(() => setColorBind(COLORS[6]!), '7');
useKeyPress(() => setUserColorBind(COLORS[7]!), '8'); useKeyPress(() => setColorBind(COLORS[7]!), '8');
return ( return (
<div className="color options"> <div className="color options">
@ -131,83 +132,81 @@ const ModeConfig: FC = () => {
}; };
const StateConfig: FC = () => { const StateConfig: FC = () => {
const [userLines, setUserLines] = useAtom(userLinesState); const [lines, setLines] = useAtom(linesState);
const [userActions, setUserActions] = useAtom(userActionsState); const [actions, setActions] = useAtom(actionsState);
const [userRedoActions, setUserRedoActions] = useAtom(userRedoActionsState); const [redoActions, setRedoActions] = useAtom(redoActionsState);
const [userStartPoint, setUserStartPoint] = useAtom(userStartPointState); const [startPoint, setStartPoint] = useAtom(startPointState);
// ctrl+z/ctrl+y for undo/redo // ctrl+z/ctrl+y for undo/redo
const onUndo = useCallback(() => { const onUndo = useCallback(() => {
if (!lodash.isNull(userStartPoint)) { if (!lodash.isNull(startPoint)) {
// if the user has a start point, just cancel the pending line // if the user has a start point, just cancel the pending line
setUserStartPoint(null); setStartPoint(null);
return; return;
} }
const action = userActions[userActions.length - 1]; const action = actions[actions.length - 1];
if (!action) return; if (!action) return;
if (isAddLineAction(action)) { if (isAddLineAction(action)) {
// remove action.line // remove action.line
setUserLines( setLines(lines.filter((line) => line !== action.line));
userLines.filter((userLine) => userLine !== action.line)
);
} else if (isAddLinesAction(action)) { } else if (isAddLinesAction(action)) {
// remove all of action.addLines // remove all of action.addLines
setUserLines( setLines(
userLines.filter( lines.filter(
(userLine) => (line) =>
!action.addLines.find( !action.addLines.find(
(actionLine) => actionLine === userLine (actionLine) => actionLine === line
) )
) )
); );
} else if (isDeleteLinesAction(action)) { } else if (isDeleteLinesAction(action)) {
// add back all of action.deleteLines // add back all of action.deleteLines
// NOTE: this does not preserve layering // NOTE: this does not preserve layering
setUserLines([...userLines, ...action.deleteLines]); setLines([...lines, ...action.deleteLines]);
} else { } else {
console.error('invalid action'); console.error('invalid action');
} }
setUserActions(userActions.slice(0, -1)); setActions(actions.slice(0, -1));
setUserRedoActions([...userRedoActions, action]); setRedoActions([...redoActions, action]);
}, [userLines, userActions, userRedoActions, userStartPoint]); }, [lines, actions, redoActions, startPoint]);
const onRedo = useCallback(() => { const onRedo = useCallback(() => {
const action = userRedoActions[userRedoActions.length - 1]; const action = redoActions[redoActions.length - 1];
if (!action) return; if (!action) return;
if (isAddLineAction(action)) { if (isAddLineAction(action)) {
// add back action.line // add back action.line
setUserLines([...userLines, action.line]); setLines([...lines, action.line]);
} else if (isAddLinesAction(action)) { } else if (isAddLinesAction(action)) {
// add back all of action.addLines // add back all of action.addLines
// NOTE: this does not preserve layering // NOTE: this does not preserve layering
setUserLines([...userLines, ...action.addLines]); setLines([...lines, ...action.addLines]);
} else if (isDeleteLinesAction(action)) { } else if (isDeleteLinesAction(action)) {
// remove all of action.delteLines // remove all of action.delteLines
setUserLines( setLines(
userLines.filter( lines.filter(
(userLine) => (line) =>
!action.deleteLines.find( !action.deleteLines.find(
(actionLine) => userLine === actionLine (actionLine) => line === actionLine
) )
) )
); );
} else { } else {
throw new Error('invalid action'); throw new Error('invalid action');
} }
setUserRedoActions(userRedoActions.slice(0, -1)); setRedoActions(redoActions.slice(0, -1));
setUserActions([...userActions, action]); setActions([...actions, action]);
}, [userLines, userActions, userRedoActions]); }, [lines, actions, redoActions]);
const onClear = useCallback(() => { const onClear = useCallback(() => {
setUserRedoActions([]); setRedoActions([]);
setUserLines([]); setLines([]);
setUserActions([...userActions, { deleteLines: userLines }]); setActions([...actions, { deleteLines: lines }]);
setUserStartPoint(null); setStartPoint(null);
}, [userLines, userActions]); }, [lines, actions]);
useKeyPress(onUndo, 'z', true); useKeyPress(onUndo, 'z', true);
useKeyPress(onRedo, 'y', true); useKeyPress(onRedo, 'y', true);

16
src/components/grid/grid.tsx
View File

@ -9,10 +9,10 @@ import {
lineColorState, lineColorState,
Line, Line,
Point, Point,
userLinesState, linesState,
userActionsState, actionsState,
userRedoActionsState, redoActionsState,
userStartPointState, startPointState,
GAP, GAP,
GAP_THICK, GAP_THICK,
getDrawModeInfo, getDrawModeInfo,
@ -143,11 +143,11 @@ const Grid: FC = () => {
return lines_thin.concat(lines_thick); return lines_thin.concat(lines_thick);
}, [range]); }, [range]);
const [userLines, setUserLines] = useAtom(userLinesState); const [userLines, setUserLines] = useAtom(linesState);
const [userActions, setUserActions] = useAtom(userActionsState); const [userActions, setUserActions] = useAtom(actionsState);
const setUserRedoActions = useSetAtom(userRedoActionsState); const setUserRedoActions = useSetAtom(redoActionsState);
const [userStartPoint, setUserStartPoint] = useAtom(userStartPointState); const [userStartPoint, setUserStartPoint] = useAtom(startPointState);
const userLineColor = useAtomValue(lineColorState); const userLineColor = useAtomValue(lineColorState);
const userDrawMode = useAtomValue(drawModeState); const userDrawMode = useAtomValue(drawModeState);
const userDrawModeInfo = getDrawModeInfo(userDrawMode); const userDrawModeInfo = getDrawModeInfo(userDrawMode);