One of the things I want to change about this project is the way the data is organized. Right now there are three different components:
- The Editor which encapsulates everything CodeMirror
- The PathEditor which adds functionality related to paths specifically
- The App which renders both the PathEditor and the path visualizer (which has its own state)
Currently things are a bit awkward. The App is working with a string representation of the path, and the PathEditor is working with a codemirror-parsed version (I think).
Ideally each line is associated with its path segment:
const commands = [
{
lineNumber: 0,
command: "M",
x: 10
y: 80,
absolute: {
command: 'M',
x: 10,
y: 80,
x0: 0,
y0: 0
}
},
];
The 'active command' is then whatever command the cursor is currently over.