architectureDraft

Node

Description: Abstract class implementing basic methods for anything that can be displayed, dragged…

• onClick
• onDrag
• on[Event]
• draw
• destroy

DocumentElement

Description: Content of the document (in contrast to a handle, which is not content itself).

Extends: Node

Properties:

• Children (Collection of DocumentElements)
• Data (JSON)
• Template (String)
• xPos (Number)
• yPos (Number)
• width (Number)
• height (Number)
• Canvas (Canvas)

ControlElement

Description: An element that is not content, but is rather used to change data or to highlight something Extends: Node

Canvas

Description: Container element on which the other elements are drawn. Also holds selection and other central objects.

Extends: Node?

Properties:

• Selection (Collection of DocumentElements)
• Children (Collection of DocumentElements)
• Zoom (Number)

Commands

Command Stack

Description: Stack with commands for undo/redo

Command

Description: For creating editing commands like moveElement, changeElementData… Properties:

• Name methods:
• undo
• do

Notes:

• Instead of relying on inheritance, we could also try to use traits – there are several combinations of behaviors like "needs to have and render children Elements" (for canvas and at least some DocumentElements), "needs to change data based on drag events" (DocumentElements, ControlElements)…
• The management of children element for Canvas and DocumentElements can be fairly simple as there should be no deep hierarchies and whatnot. Simply Redrawing everything on call of a canvas.redraw() should be no problem and adding caching should also be easy, since child elements are not influenced by their parents (except that they, scene-graph-y are moved with their parents