feat: move todo's in readme to separate heading, add demo.gif

README.md

@@ -15,16 +15,34 @@ This is a React-based canvas drawing application that allows users to draw vario
   - intersections
   - circle centers
   - circle quadrants
-  - circle tangents (TODO)
-  - nearest point on line (TODO)
 - Selection tool to highlight and modify shapes
   - Use CTRL to toggle selection
   - Use shift to add to the current selection
   - drag left, to select by intersecting
   - drag right, to select by containing
 - Export drawing as an SVG file
-- Eraser tool to delete segments (TODO)
-- Zoom and pan (TODO)
+
+### Possible future feature ideas (TODO) in order of likelihood
+- Eraser tool to delete segments
+- Draw with snap points for
+  - circle tangents
+  - nearest point on line
+- Zoom and pan
+- Edit existing lines and circles by dragging endpoints/middle points
+- Move, rotate, scale shapes
+- Undo and redo
+- Select line color and thickness
+- Layers for drawing shapes in different layers that can be toggled on or off
+- Array copy shapes
+- Array radial copy shapes
+- Hatching and fill areas
+- Import SVG files
+- Import images
+- Export to dwg
+- Export to dxf
+- Save and load drawings
+- Import DXF files
+- Import DWG files
 
 
 ## Technologies Used

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@flatten-js/core": "^1.6.1",
+    "canvas-transform-context": "^1.1.1",
     "clsx": "^2.1.1",
     "file-saver": "^2.0.5",
     "react": "^18.3.1",
@@ -19,9 +20,9 @@
     "vite-plugin-svgr": "^4.2.0"
   },
   "devDependencies": {
+    "@types/file-saver": "^2.0.7",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@types/file-saver": "^2.0.7",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",
     "@vitejs/plugin-react-swc": "^3.5.0",

src/App.tsx

@@ -156,19 +156,16 @@ function App() {
     );
   }
 
-  const handleKeyUp = useCallback(
-    (evt: KeyboardEvent) => {
-      if (evt.key === 'Escape') {
-        setActiveEntity(null);
-        setEntities(oldEntities => deSelectAndDeHighlightEntities(oldEntities));
-      } else if (evt.key === 'Delete') {
-        setEntities(oldEntities =>
-          oldEntities.filter(entity => !entity.isSelected),
-        );
-      }
-    },
-    [deSelectAndDeHighlightEntities],
-  );
+  const handleKeyUp = useCallback((evt: KeyboardEvent) => {
+    if (evt.key === 'Escape') {
+      setActiveEntity(null);
+      setEntities(oldEntities => deSelectAndDeHighlightEntities(oldEntities));
+    } else if (evt.key === 'Delete') {
+      setEntities(oldEntities =>
+        oldEntities.filter(entity => !entity.isSelected),
+      );
+    }
+  }, []);
 
   const handleToolClick = useCallback(
     (tool: Tool) => {