Hey dev community! 👋
We’ve been working hard on kulmanlab.com, a browser-based CAD and drafting tool. One of the biggest challenges in building web-based design tools is matching the precision and keyboard-driven UX that engineers and designers expect from desktop software.
Today, we rolled out a major feature that addresses exactly that: Precise X,Y Coordinate Input.
Here is a look at how we designed the user experience, the logic behind the terminal inputs, and what commands now support it.
🧠 The UX Design: Fast, Keyboard-First Input
When you are deep in a drafting workflow, taking your hands off the keyboard to aim with a mouse ruins your momentum. We wanted a seamless transition between mouse-clicking and typing.
Now, whenever a command asks the user to "pick a point," the terminal prompt dynamically updates to display or enter X,Y.
Here is the exact state machine we implemented for the input flow:
X-Value Entry: The user types digits, decimals (.), or a leading negative sign (-).
The Switch: Pressing , (comma) or Space locks the X value and shifts focus to Y. The terminal UI updates to show [X], [cursor].
Commit: The user types the Y value and hits Enter or Space to instantly plot the point.
Smart Backspacing: Pressing backspace deletes the last digit. If the Y field is completely empty, hitting backspace automatically jumps the user back to editing the X value.
Graceful Cancellation: Pressing Escape clears the coordinate input buffer without breaking or canceling the active tool/command.
🛠️ Scaling It Across the Architecture
Instead of hardcoding this input logic into every single tool, we hooked it directly into our global point-snapping and input-resolution engine. Because of this architectural choice, we were able to instantly scale coordinate entry across almost every tool in the app:
Creation Tools: Line, Polyline, Arc, Circle, Ellipse, Rectangle, Spline (fit & CV), Text
Transformations: Move, Copy, Rotate, Scale, Mirror
Dimensions & Math: Leader, Dimension (linear, aligned, continue), Distance, Angle
Viewports: Rectangle & Copy viewports
Top comments (0)