From 62f7184242722786109b2868ae12a0d75fec082f Mon Sep 17 00:00:00 2001 From: Michael Peters Date: Sat, 29 Jun 2024 10:06:26 -0700 Subject: [PATCH] reduce usage of term user in atoms + grid config --- src/atoms.ts | 8 +-- src/components/grid/grid-config.tsx | 107 ++++++++++++++-------------- src/components/grid/grid.tsx | 16 ++--- 3 files changed, 65 insertions(+), 66 deletions(-) diff --git a/src/atoms.ts b/src/atoms.ts index 460616e..d73c952 100644 --- a/src/atoms.ts +++ b/src/atoms.ts @@ -86,8 +86,8 @@ export const lineColorState = atom(COLORS[0]!); export const drawModeState = atom('line'); -export const userLinesState = atom([]); -export const userActionsState = atom([]); -export const userRedoActionsState = atom([]); +export const linesState = atom([]); +export const actionsState = atom([]); +export const redoActionsState = atom([]); -export const userStartPointState = atom(null); +export const startPointState = atom(null); diff --git a/src/components/grid/grid-config.tsx b/src/components/grid/grid-config.tsx index d2bbeb3..d144ae9 100644 --- a/src/components/grid/grid-config.tsx +++ b/src/components/grid/grid-config.tsx @@ -8,10 +8,11 @@ import { isAddLinesAction, isDeleteLinesAction, lineColorState, - userActionsState, - userLinesState, - userRedoActionsState, - userStartPointState, + actionsState, + linesState, + redoActionsState, + startPointState, + getDrawModeInfo, } from '../../atoms'; import './grid-config.scss'; @@ -74,25 +75,25 @@ const ColorOption: FC = (props: ColorOptionProps) => { }; const ColorConfig: FC = () => { - const setUserLineColor = useSetAtom(lineColorState); - const setUserDrawMode = useSetAtom(drawModeState); + const setLineColor = useSetAtom(lineColorState); + const [drawMode, setDrawMode] = useAtom(drawModeState); + const drawModeInfo = getDrawModeInfo(drawMode); - const setUserColorBind = useCallback( - (color: string) => { - setUserLineColor(color); - setUserDrawMode('line'); - }, - [setUserLineColor, setUserDrawMode] - ); + const setColorBind = useCallback((color: string) => { + setLineColor(color); + if (!drawModeInfo.hasColor) { + setDrawMode('line'); + } + }, []); - useKeyPress(() => setUserColorBind(COLORS[0]!), '1'); - useKeyPress(() => setUserColorBind(COLORS[1]!), '2'); - useKeyPress(() => setUserColorBind(COLORS[2]!), '3'); - useKeyPress(() => setUserColorBind(COLORS[3]!), '4'); - useKeyPress(() => setUserColorBind(COLORS[4]!), '5'); - useKeyPress(() => setUserColorBind(COLORS[5]!), '6'); - useKeyPress(() => setUserColorBind(COLORS[6]!), '7'); - useKeyPress(() => setUserColorBind(COLORS[7]!), '8'); + useKeyPress(() => setColorBind(COLORS[0]!), '1'); + useKeyPress(() => setColorBind(COLORS[1]!), '2'); + useKeyPress(() => setColorBind(COLORS[2]!), '3'); + useKeyPress(() => setColorBind(COLORS[3]!), '4'); + useKeyPress(() => setColorBind(COLORS[4]!), '5'); + useKeyPress(() => setColorBind(COLORS[5]!), '6'); + useKeyPress(() => setColorBind(COLORS[6]!), '7'); + useKeyPress(() => setColorBind(COLORS[7]!), '8'); return (
@@ -131,83 +132,81 @@ const ModeConfig: FC = () => { }; const StateConfig: FC = () => { - const [userLines, setUserLines] = useAtom(userLinesState); - const [userActions, setUserActions] = useAtom(userActionsState); - const [userRedoActions, setUserRedoActions] = useAtom(userRedoActionsState); + const [lines, setLines] = useAtom(linesState); + const [actions, setActions] = useAtom(actionsState); + const [redoActions, setRedoActions] = useAtom(redoActionsState); - const [userStartPoint, setUserStartPoint] = useAtom(userStartPointState); + const [startPoint, setStartPoint] = useAtom(startPointState); // ctrl+z/ctrl+y for undo/redo const onUndo = useCallback(() => { - if (!lodash.isNull(userStartPoint)) { + if (!lodash.isNull(startPoint)) { // if the user has a start point, just cancel the pending line - setUserStartPoint(null); + setStartPoint(null); return; } - const action = userActions[userActions.length - 1]; + const action = actions[actions.length - 1]; if (!action) return; if (isAddLineAction(action)) { // remove action.line - setUserLines( - userLines.filter((userLine) => userLine !== action.line) - ); + setLines(lines.filter((line) => line !== action.line)); } else if (isAddLinesAction(action)) { // remove all of action.addLines - setUserLines( - userLines.filter( - (userLine) => + setLines( + lines.filter( + (line) => !action.addLines.find( - (actionLine) => actionLine === userLine + (actionLine) => actionLine === line ) ) ); } else if (isDeleteLinesAction(action)) { // add back all of action.deleteLines // NOTE: this does not preserve layering - setUserLines([...userLines, ...action.deleteLines]); + setLines([...lines, ...action.deleteLines]); } else { console.error('invalid action'); } - setUserActions(userActions.slice(0, -1)); - setUserRedoActions([...userRedoActions, action]); - }, [userLines, userActions, userRedoActions, userStartPoint]); + setActions(actions.slice(0, -1)); + setRedoActions([...redoActions, action]); + }, [lines, actions, redoActions, startPoint]); const onRedo = useCallback(() => { - const action = userRedoActions[userRedoActions.length - 1]; + const action = redoActions[redoActions.length - 1]; if (!action) return; if (isAddLineAction(action)) { // add back action.line - setUserLines([...userLines, action.line]); + setLines([...lines, action.line]); } else if (isAddLinesAction(action)) { // add back all of action.addLines // NOTE: this does not preserve layering - setUserLines([...userLines, ...action.addLines]); + setLines([...lines, ...action.addLines]); } else if (isDeleteLinesAction(action)) { // remove all of action.delteLines - setUserLines( - userLines.filter( - (userLine) => + setLines( + lines.filter( + (line) => !action.deleteLines.find( - (actionLine) => userLine === actionLine + (actionLine) => line === actionLine ) ) ); } else { throw new Error('invalid action'); } - setUserRedoActions(userRedoActions.slice(0, -1)); - setUserActions([...userActions, action]); - }, [userLines, userActions, userRedoActions]); + setRedoActions(redoActions.slice(0, -1)); + setActions([...actions, action]); + }, [lines, actions, redoActions]); const onClear = useCallback(() => { - setUserRedoActions([]); - setUserLines([]); - setUserActions([...userActions, { deleteLines: userLines }]); - setUserStartPoint(null); - }, [userLines, userActions]); + setRedoActions([]); + setLines([]); + setActions([...actions, { deleteLines: lines }]); + setStartPoint(null); + }, [lines, actions]); useKeyPress(onUndo, 'z', true); useKeyPress(onRedo, 'y', true); diff --git a/src/components/grid/grid.tsx b/src/components/grid/grid.tsx index 9b84f32..0adb54b 100644 --- a/src/components/grid/grid.tsx +++ b/src/components/grid/grid.tsx @@ -9,10 +9,10 @@ import { lineColorState, Line, Point, - userLinesState, - userActionsState, - userRedoActionsState, - userStartPointState, + linesState, + actionsState, + redoActionsState, + startPointState, GAP, GAP_THICK, getDrawModeInfo, @@ -143,11 +143,11 @@ const Grid: FC = () => { return lines_thin.concat(lines_thick); }, [range]); - const [userLines, setUserLines] = useAtom(userLinesState); - const [userActions, setUserActions] = useAtom(userActionsState); - const setUserRedoActions = useSetAtom(userRedoActionsState); + const [userLines, setUserLines] = useAtom(linesState); + const [userActions, setUserActions] = useAtom(actionsState); + const setUserRedoActions = useSetAtom(redoActionsState); - const [userStartPoint, setUserStartPoint] = useAtom(userStartPointState); + const [userStartPoint, setUserStartPoint] = useAtom(startPointState); const userLineColor = useAtomValue(lineColorState); const userDrawMode = useAtomValue(drawModeState); const userDrawModeInfo = getDrawModeInfo(userDrawMode);