F3 Visual Tools

---

So far I haven't spent time trying to develop serious visual tools to support F3 development, however once the language and API's have stabilized that's definitely something I want to do.

Useful visual tools include simple color choosers, linear and radial gradient editors, widget layout editors like Matisse, vector drawing tools like Inkscape and Illustrator, and image processing tools like Photoshop.

For each such visual tool, there are programmatic means to achieve the same effect. As a result you have to find a balance between hand crafting graphics in a visual tool and generating them programatically. In some cases the former is the more effective approach, in some cases the latter, or a mixture of both.

I don't have definitive proof yet, but I believe using F3 to develop such tools should make it far easier than what the competitors are doing (with the possible exception of Microsoft Expression), since other than Matisse all of those mentioned above are written in C.

As a partial demonstration, here's a basic F3 implementation of a "Pen Tool", which is a tool for drawing a sequence of connected cubic Bezier curves. I am not an expert or even a regular user of any of the above mentioned tools, so it took me a while to figure out how "Pen Tool" is supposed to work, but once I understood that it was straightforward to implement.

Each time you click on the canvas a new point and two new invisible control points are added to the curve. If you drag the mouse before releasing it you can adjust the tangent of the curve at that point (in effect by changing the values of the control points). If you hover near a point you'll see two small circles connected by a line and a larger circle surrounding the point. Dragging the larger circle moves the point. Dragging the smaller circles adjusts the tangent of the curve at that point (there are tooltips to that effect).

In this demo you can't delete points or insert points in the middle of the curve, however it does have infinite undo/redo with CTRL-z (undo) and CTRL-y (redo).

Here's a link to the source code.

The model of the curve is simply an array of points. The first point is a dummy control point. Following that points are added according to the following pattern: [pt, cp, cp, pt, cp, cp, ...], i.e. a point followed by two control points. For each point its preceding and following control point must be collinear (on the same line) with it. The mouse drag handlers for the control points implement this invariant when you drag one of the them by rotating the corresponding control point around the point.

From the array of points a Path is projected (with the F3 bind operator) having a MoveTo element for the first point, and CurveTo elements for each sequence of [cp, cp,  pt] after that, which creates the visual curve. In addition, the circles and lines mentioned above are also projected from and bound to the same points in the array. As a result when the mouse handlers or undo/redo operations add points to the array or modify the coordinates of a point the visual elements (path, circles, lines) are automatically added, moved, or removed accordingly.