diff --git a/frontend/src/components/CommandLine.tsx b/frontend/src/components/CommandLine.tsx new file mode 100644 index 0000000..019bd8f --- /dev/null +++ b/frontend/src/components/CommandLine.tsx @@ -0,0 +1,108 @@ +import React, { useState, useRef, useEffect } from 'react'; +import './CommandLine.css'; + +const CommandLine: React.FC = () => { + const [command, setCommand] = useState(''); + const [suggestions, setSuggestions] = useState([]); + const inputRef = useRef(null); + + // Mock command suggestions + const commandList = [ + 'LINE', 'CIRCLE', 'RECTANGLE', 'POLYGON', + 'MOVE', 'COPY', 'ROTATE', 'SCALE', + 'TRIM', 'EXTEND', 'FILLET', 'CHAMFER', + 'DIMLINEAR', 'DIMALIGNED', 'DIMRADIUS', 'DIMDIAMETER', + 'TEXT', 'MTEXT', 'INSERT', 'HATCH' + ]; + + useEffect(() => { + // Focus the input when component mounts + if (inputRef.current) { + inputRef.current.focus(); + } + }, []); + + const handleInputChange = (e: React.ChangeEvent) => { + const value = e.target.value; + setCommand(value); + + // Generate suggestions based on input + if (value.length > 0) { + const filtered = commandList.filter(cmd => + cmd.toLowerCase().startsWith(value.toLowerCase()) + ); + setSuggestions(filtered); + } else { + setSuggestions([]); + } + }; + + const handleSuggestionClick = (suggestion: string) => { + setCommand(suggestion); + setSuggestions([]); + // Focus back to input after selection + if (inputRef.current) { + inputRef.current.focus(); + } + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + // In a real app, this would dispatch the command + console.log('Command submitted:', command); + setCommand(''); + setSuggestions([]); + }; + + return ( +
+
+ +
+ + +
+
+ Type a CAD command and press Enter to execute +
+ {suggestions.length > 0 && ( +
    + {suggestions.map((suggestion, index) => ( +
  • handleSuggestionClick(suggestion)} + role="option" + aria-selected="false" + > + {suggestion} +
  • + ))} +
+ )} +
+
+ ); +}; + +export default CommandLine; \ No newline at end of file