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 userLinesState = atom<Line[]>([]);
export const userActionsState = atom<Action[]>([]);
export const userRedoActionsState = atom<Action[]>([]);
export const linesState = atom<Line[]>([]);
export const actionsState = 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,
isDeleteLinesAction,
lineColorState,
userActionsState,
userLinesState,
userRedoActionsState,
userStartPointState,
actionsState,
linesState,
redoActionsState,
startPointState,
getDrawModeInfo,
} from '../../atoms';
import './grid-config.scss';
@ -74,25 +75,25 @@ const ColorOption: FC<ColorOptionProps> = (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 (
<div className="color options">
@ -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);

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

@ -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);