​

Smart editing mode in DRAKON Editor

Home | Download

DRAKON Editor has a special "smart" mode of diagram editing.

When the user moves an element in the "smart" mode, that element pushes everything that stands in the way, including connectors. This creates an illusion of physics. The elements of the diagram start feeling like material objects and that makes the editing process very intuitive.

Moving a shape or a connector in the "smart" mode affects the diagram in such a way that certain constraints are maintained:

  1. The shapes do not start to overlap with each other.
  2. No new links are created.
  3. The existing links are preserved.
  4. No new intersections or angles are added or removed.

Mathematically speaking, the "smart" mode preserves the graph represented by the diagram. The geometry of the diagram changes, but the way how the nodes are connected remains the same. An important feature of the "smart" mode is that the angles and intersections of the connectors are also considered as nodes of the graph.

In other words, straight line segments are the edges, while shapes, angles and intersections are the nodes of the graph from the point of view of the "smart" mode.

Diagram graph in smart mode

The principles behind this editing mode are not limited to DRAKON diagrams and can work with any diagram as long as the diagram meets the following criteria.

The diagram is a planar image that consists of:

  • Geometrical shapes like rectangles, diamonds, ellipses etc. The shapes are linked to each other with connectors.
  • The connectors are built of line segments. The segments can be either vertical or horizontal.
  • The connectors can have right angles, T-joints and intersections.

Both the shapes and the connectors push each other. The element which is being pushed is also pushing other elements if they block it.

An icon pushing a line segment:
An icon pushing a line segment

An icon pushing another icon:
An icon pushing another icon

The "smart" mode is especially good for the following tasks:

  1. Creating empty space inside the diagram by moving apart existing elements so that new elements could be inserted.
  2. Shrinking the diagram after deleting some inner parts of it.
  3. Aligning the elements to make the diagram look better. This is undoubtedly the most important part since nice visual appearance is crucial for a graphical language.

In order to activate the “smart” mode in the DRAKON Editor, the user should press the Shift key while dragging elements on the diagram.


Posted: May 29, 2012
Copyright 2012 Stepan Mitkin
drakon.editor@gmail.com