See below if you are interested in the implementation and coding parts.
The keyboard is the only way to do some things.
|C||Start drawing a new curve|
|L||Start drawing a new line|
|Page Up||Move selected shapes toward you|
|Page Down||Move selected shapes away from you|
|Home||Bring selected shapes to front|
|End||Send selecting shapes to back|
|Ctrl+G||Group selected shapes|
|Ctrl+Shift+G||Un-group selected shapes|
|Shift +||Restore normal zooming|
|Arrow Keys||Move around while zoomed-in|
If you don't want to create an account, the "Save" option will also allow you to download your drawing as an image.
Click on the rectangle or circle tool in the toolbar, and the desired shapes will immediately appear in the upper left of the drawing area. You can then drag them to where you want to go.
No two shapes are alike. If you create two circles, they will be slightly different. However, if you duplicate a shape using Ctrl+D, the duplicate will be exactly the same.
To draw a line, click the line tool in the toolbar, then click anywhere in the drawing window to place the first point. You can then click again to place the second point, and so on. To end the line, double click. If you end the line or curve close enough to where you started it, then it will create a closed shape.
Hint: The line tool can be activated by pressing "L", and the curve tool can be activated by pressing "C".
Lines have a sloppiness property that can be set after drawing it. To set the property, select on the line you have drawn. The options pertaining to the line will appear to the left of the drawing window.
Curves do not have sloppiness, but smoothness. By increasing smoothness, the curve is modified to make rounder corners.
Text is placed the same way as circles or rectangles. Click on the text tool, and some default text is placed in the upper left of the image. You can change what the text says by clicking on the text, and then modifying the "text" property that appears to the right of the canvas.
Example: Editing text using the properties area
You can move, scale, or rotate text. However, in this version of the drawing software, scaling will result in loss of quality. Instead, change the font size in the properties area.
While not in line or curve mode, you can select things by dragging a box around them using the mouse. The box must fully enclose the shapes to select them. You can also add a shape to an existing selection by pressing the shift key while clicking it.
Example: Point edit mode
To avoid having to repeatedly select complex groups of shapes, you can "group" the current selection using Ctrl+G. Now, when you click on any one of the group members, all will be selected. You can break apart any selected groups using Ctrl+Shift+G.
I should write something about the implementation. Hmm, the undo stack is pretty standard stuff but may be new to some people. But the thing I was happiest to find was the concept of abstracted Mouse Behaviours.
Design patterns for mouse behaviour are slim pickings. When a novice programmer designs a mouse-intensive application, he or she will tend to make a very complex function that deals with all possible cases when the mouse is clicked or moved. It can quickly grow to be unmaintainable.
To deal with this complexity, we separate the possible states of the system into various MouseBehaviour objects, which implement onMouseDown(x,y), onMouseUp(x,y), and onMouseMove(x,y). (This is a variation on the State design pattern). The default mouse behaviour is the selection mode. If you press the mouse button while over something, it then replaces the default mouse behaviour with a new mouse behaviour. When you lift the button, the new behaviour ends and reverts back to the previous behaviour. This keeps everything simple. There are several mouse behaviours: