package-lock.json

@@ -12,8 +12,7 @@
                 "@uidotdev/usehooks": "^2.4.1",
                 "lodash": "^4.17.21",
                 "react": "^18.2.0",
-                "react-dom": "^18.2.0",
+                "react-dom": "^18.2.0"
-                "recoil": "^0.7.7"
             },
             "devDependencies": {
                 "@types/lodash": "^4.14.202",
@@ -1777,11 +1776,6 @@
             "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
             "dev": true
         },
-        "node_modules/hamt_plus": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz",
-            "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA=="
-        },
         "node_modules/handle-thing": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -3124,25 +3118,6 @@
                 "node": ">= 10.13.0"
             }
         },
-        "node_modules/recoil": {
-            "version": "0.7.7",
-            "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.7.tgz",
-            "integrity": "sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ==",
-            "dependencies": {
-                "hamt_plus": "1.0.2"
-            },
-            "peerDependencies": {
-                "react": ">=16.13.1"
-            },
-            "peerDependenciesMeta": {
-                "react-dom": {
-                    "optional": true
-                },
-                "react-native": {
-                    "optional": true
-                }
-            }
-        },
         "node_modules/relateurl": {
             "version": "0.2.7",
             "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
@@ -5774,11 +5749,6 @@
             "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
             "dev": true
         },
-        "hamt_plus": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz",
-            "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA=="
-        },
         "handle-thing": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -6759,14 +6729,6 @@
                 "resolve": "^1.20.0"
             }
         },
-        "recoil": {
-            "version": "0.7.7",
-            "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.7.tgz",
-            "integrity": "sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ==",
-            "requires": {
-                "hamt_plus": "1.0.2"
-            }
-        },
         "relateurl": {
             "version": "0.2.7",
             "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",

package.json

@@ -31,7 +31,6 @@
         "@uidotdev/usehooks": "^2.4.1",
         "lodash": "^4.17.21",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "react-dom": "^18.2.0"
-        "recoil": "^0.7.7"
     }
 }

src/atoms.ts

@@ -1,8 +0,0 @@
-import { atom } from 'recoil';
-
-export const DEFAULT_COLOR = '#339ad6';
-
-export const currentColorState = atom({
-    key: 'colorState',
-    default: DEFAULT_COLOR,
-});

src/components/app/index.tsx

@@ -1,15 +1,8 @@
 import { FC } from 'react';
-import { RecoilRoot } from 'recoil';
 import Grid from '../grid/grid';
-import GridConfig from '../grid/grid-config';
 
 const App: FC = () => {
-    return (
+    return <Grid />;
-        <RecoilRoot>
-            <Grid />
-            <GridConfig />
-        </RecoilRoot>
-    );
 };
 
 export default App;

src/components/grid/grid-config.scss

@@ -1,39 +0,0 @@
-.grid-config {
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    > * {
-        margin: 20px;
-    }
-
-    .color-config {
-        background-color: #000;
-        border-radius: 5px;
-        padding: 5px;
-
-        .color-options {
-            display: grid;
-            grid-template-columns: auto auto;
-
-            .color-option {
-                margin: 5px;
-                padding: 7px;
-                background-color: #283f56;
-                border: 2px solid #283f56;
-                border-radius: 5px;
-
-                &.active {
-                    background-color: #265584;
-                    border-color: #458bd1;
-                }
-
-                .sample {
-                    width: 24px;
-                    height: 13px;
-                    border-radius: 3px;
-                }
-            }
-        }
-    }
-}

src/components/grid/grid-config.tsx

@@ -1,52 +0,0 @@
-import { FC } from 'react';
-import { useRecoilState } from 'recoil';
-import { currentColorState, DEFAULT_COLOR } from '../../atoms';
-
-import './grid-config.scss';
-
-interface ColorOptionProps {
-    color: string;
-}
-
-const ColorOption: FC<ColorOptionProps> = (props: ColorOptionProps) => {
-    const { color } = props;
-    const [currentColor, setCurrentColor] = useRecoilState(currentColorState);
-
-    return (
-        <div
-            className={
-                color === currentColor ? 'color-option active' : 'color-option'
-            }
-            onClick={() => setCurrentColor(color)}
-        >
-            <div className="sample" style={{ backgroundColor: color }} />
-        </div>
-    );
-};
-
-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>
-        </div>
-    );
-};
-
-const GridConfig: FC = () => {
-    return (
-        <div className="grid-config">
-            <ColorConfig />
-        </div>
-    );
-};
-
-export default GridConfig;

src/components/grid/grid.tsx

@@ -12,8 +12,6 @@ import {
 import './grid.scss';
 
 import * as lodash from 'lodash';
-import { useRecoilValue } from 'recoil';
-import { currentColorState } from '../../atoms';
 
 interface Point {
     x: number;
@@ -124,10 +122,9 @@ const Grid: FC = () => {
         return lines_thin.concat(lines_thick);
     }, [range, GAP]);
 
-    const [userLines, setUserLines] = useState<Line[]>([]);
+    const [userLines, setUserLines] = useState<Range[]>([]);
-    const [userRedoLines, setUserRedoLines] = useState<Line[]>([]);
+    const [userRedoLines, setUserRedoLines] = useState<Range[]>([]);
     const [userStartPoint, setUserStartPoint] = useState<Point | null>(null);
-    const userLineColor = useRecoilValue(currentColorState);
 
     // mouse clicks create lines
     const onGridClick = useCallback(
@@ -149,7 +146,7 @@ const Grid: FC = () => {
             }
 
             const line = pointsToRange(userStartPoint, point);
-            setUserLines([...userLines, { ...line, stroke: userLineColor }]);
+            setUserLines([...userLines, line]);
 
             if (event.shiftKey == false) {
                 setUserStartPoint(null);
@@ -157,14 +154,7 @@ const Grid: FC = () => {
                 setUserStartPoint(point);
             }
         },
-        [
+        [userStartPoint, setUserStartPoint, setUserLines, GAP, mousePoint]
-            userLineColor,
-            userStartPoint,
-            setUserStartPoint,
-            setUserLines,
-            GAP,
-            mousePoint,
-        ]
     );
 
     const onGridContextMenu = useCallback(
@@ -220,7 +210,7 @@ const Grid: FC = () => {
                 y1={userStartPoint.y}
                 x2={point.x}
                 y2={point.y}
-                stroke={userLineColor}
+                stroke="#ff0000"
                 strokeWidth="2"
             />
         );
@@ -233,7 +223,7 @@ const Grid: FC = () => {
                 cx={point.x}
                 cy={point.y}
                 r="3"
-                fill={userLineColor}
+                fill="#ff0000"
             />
         );
     }, [userStartPoint, mousePoint]);
@@ -247,7 +237,7 @@ const Grid: FC = () => {
                 y1={line.y0}
                 x2={line.x1}
                 y2={line.y1}
-                stroke={line.stroke}
+                stroke="#ff0000"
                 strokeWidth="2"
             />
         ));