Controls

Here is a rough sketch of the controls users will get when they hover over a line in Fractal Canvas.

This is obviously not an intricate sketch. It has just the locations and shapes of important elements. I use these rough sketches to figure out what elements I actually need to have, and roughly where they will go.

These tools allow a user to move, delete, and splice line segments. The numbers on top let users change line types. The shaded part in the middle starts a drag-and-drop when you click it, the button on the bottom right deletes the line, and the button on the bottom left splits the line into two segments where the cursor is.

Here is this sketch coded up and running in a web browser:

In the picture, my mouse is hovering over the 4 (which is why it sticks out.) The colors are all semi-transparent, but when your mouse hovers over them they light up.

Edit: It is worth noting that the image above took 160 lines of HTML/CSS to code.