This demo shows how complex user interface behavioural requirements may be described and implemented using SCXML. The goal is to implement a subset of Inkscape's functionality, and to realize its behavioural requirements, which were obtained through observation (as opposed to analyzing at the code).
There is a canvas, a toolbar, rotation and scale handles. Rectangles and ellipses can be drawn on the canvas.
The toolbar has three buttons corresponding to different tools: a tool for drawing rects, a tool for drawing ellipses, and a tool for transforming them.
Tools are selected by clicking buttons on a toolbar.
Only one tool can be selected at a time.
Rects and ellipses (nodes) can be selected or not selected. When selected, they are surrounded by a dashed rect.
If there are selected nodes, then either the rotate or translate handles will be visible, and will be positioned on the aggregate bounding box of all selected nodes; otherwise, if no nodes are selected, then neither rotate nor transform handles will be shown.
Dragging rotation handle rotates the nodes about the center point of their aggregate bbox. On mouseup, handle positions are reset.
Dragging scale handle scales the nodes.
Dragging selected node results in all selected nodes being dragged.
Dragging non-selected node results in node being selected, and all other nodes being deselected.
Dragging (no shift) on canvas results in marquee being drawn, all nodes inside of marquee being selected, and all other nodes being deselected. (Not yet implemented)
Dragging (with shift) on canvas results in marquee being drawn, all nodes inside of marquee being selected (added to selection). (Not yet implemented)
Mouseclick (no shift) on selected node results in rotation/scale handles being toggled.
Dragging node (no shift) will deselect other nodes, drag the node, and select this node.
Dragging node (with shift) has same effect as dragging on canvas.
Additionally, when no nodes are selected, and nodes are first selected, then the scale rotation handles will be shown first UNLESS, the last time nodes were selected, rotation handles were shown when they were deselected; AND, the way the nodes are being selected now is via a drag (not a click)
Rotate and translate handles will never be visible.
When only one node is selected, then that node's resize/roundness controls will be shown.
Mouseclick (no shift) on selected node HAS NO EFFECT.
Dragging (on canvas, rect, wherever) results in a new element being draw, created and selected. On mouseup, all other elements are deselect.
Mouseclick (no shift) on canvas results in all nodes being selected.
Mouseclick (with shift) on node results in node's selection state being toggled.
Mouseclick (no shift) on non-selected node results in node being selected, and all other nodes being deselected.
Ctrl+A selects all. (Not yet implemented)
Delete deletes selected nodes (and deselects them in the process). (Not yet implemented)
The SCXML representation of this behaviour can be found here.