Diagram Layout
OmniGraffle excels at clarifying complex relationships by providing specialized tools for creating dynamic hierarchical diagrams.
Layout Properties
The Layout class contains the graphic layout information for a canvas. It is the value of the layoutInfo property of the Canvas class. Here are the settable properties:
automaticLayout (boolean) • Whether to re-layout automatically on every change to the canvas.
circularLineLength (Number) • Optimum line length to try to achieve during circular layout.
direction (HierarchicalDirection) • The hierarchical layout orientation.
forceDirectedLineLength (Number) • Optimum line length to try to achieve during force-directed layout.
forceDirectedSeparation (Number) • Separation distance between graphics to try to achieve during force-directed layout.
objectSeparation (Number) • Distance between graphics at the same level during hierarchical layout.
radialSeparation (Number) • Distance between graphics during radial layout.
rankSeparation (Number) • Distance between graphics from one level to an adjacent level higher or lower during hierarchical layout.
type (LayoutType) • Type of layout to perform: hierarchical, circular, radial, or force-directed.
HierarchicalDirection Properties
The HierarchicalDirection properties are the value for the direction property of the Layout class:
Bottom • Root of the hierarchy is at the bottom and tree extends upwards.
Left • Root of the hierarchy is at the left and tree extends rightwards.
Right • Root of the hierarchy is at the right and tree extends leftwards.
Top • Root of the hierarchy is at the top and tree extends downwards.
LayoutType Properties
The LayoutType properties are the value for the type property of the Layout class:
Circular • Tries to arrange sibling shapes in a circle around their parent.
ForceDirected • Grows in semi-random directions from the center.
Hierarchical • Creates layers of equally-ranked objects, extending in one direction.
Radial • Tries to arrange sibling shapes in arcs around their parent.
Layout Command
The layout() function performs automatic layout of all graphics on this canvas.
TIP: To have a script wait for any actions and redrawing triggered by by the layout() command to complete, use it with a Timer function to delay a specified number of seconds before continuing the script:
Layout with Delayed Follow-Up | ||
01 | var cnvs = document.windows[0].selection.canvas | |
02 | cnvs.layout() | |
03 | Timer.once(5,function(timer){ | |
04 | // perform actions here | |
05 | }) |
Hierarchical
The hierarchical layout creates layers of equally-ranked objects, extending in one direction.
direction (HierarchicalDirection) • The hierarchical layout orientation. The direction property changes where the top level objects start, and which way to layer the lower level objects from there.
rankSeparation (Number) • Distance between graphics from one level to an adjacent level higher or lower during hierarchical layout.
objectSeparation (Number) • Distance between graphics at the same level during hierarchical layout.
Hierarchical Layout: Top | ||
01 | cnvs = document.windows[0].selection.canvas | |
02 | cnvs.layoutInfo.automaticLayout = false | |
03 | // hierarchical (top to bottom) | |
04 | cnvs.layoutInfo.type = LayoutType.Hierarchical | |
05 | cnvs.layoutInfo.direction = HierarchicalDirection.Top | |
06 | cnvs.layoutInfo.rankSeparation = 0.5 | |
07 | cnvs.layoutInfo.objectSeparation = 0.25 | |
08 | cnvs.layout() |
Hierarchical Layout: Bottom | ||
01 | cnvs = document.windows[0].selection.canvas | |
02 | cnvs.layoutInfo.automaticLayout = false | |
03 | // hierarchical (bottom to top) | |
04 | cnvs.layoutInfo.type = LayoutType.Hierarchical | |
05 | cnvs.layoutInfo.direction = HierarchicalDirection.Bottom | |
06 | cnvs.layoutInfo.rankSeparation = 0.5 | |
07 | cnvs.layoutInfo.objectSeparation = 0.25 | |
08 | cnvs.layout() |
Force-Directed
The force-directed layout grows in semi-random directions from the center, rather than in one particular direction from the edge. The top slider determines the length of the connecting lines between objects, and the bottom slider determines how far apart the objects appear in the diagram.
forceDirectedLineLength (Number) • Optimum line length to try to achieve during force-directed layout.
forceDirectedSeparation (Number) • Separation distance between graphics to try to achieve during force-directed layout.
Force-Directed Layout | ||
01 | cnvs = document.windows[0].selection.canvas | |
02 | cnvs.layoutInfo.automaticLayout = false | |
03 | // force-directed | |
04 | cnvs.layoutInfo.type = LayoutType.ForceDirected | |
05 | cnvs.layoutInfo.forceDirectedLineLength = 2.0 | |
06 | cnvs.layoutInfo.forceDirectedSeparation = 0.75 | |
07 | cnvs.layout() |
Circular
The circular layout tries to arrange sibling shapes in a circle around their parent.
circularLineLength (Number) • Optimum line length to try to achieve during circular layout.
Circular Layout | ||
01 | cnvs = document.windows[0].selection.canvas | |
02 | cnvs.layoutInfo.automaticLayout = false | |
03 | // circular | |
04 | cnvs.layoutInfo.type = LayoutType.Circular | |
05 | cnvs.layoutInfo.circularLineLength = 72 | |
06 | cnvs.layout() |
Radial
The radial layout tries to arrange sibling shapes in arcs around their parent.
radialSeparation (Number) • Distance between graphics during radial layout.
Radial Layout | ||
01 | cnvs = document.windows[0].selection.canvas | |
02 | cnvs.layoutInfo.automaticLayout = false | |
03 | // radial | |
04 | cnvs.layoutInfo.type = LayoutType.Radial | |
05 | cnvs.layoutInfo.radialSeparation = 170 | |
06 | cnvs.layout() |
Fit Content in View
Here's a script for zooming and centering the diagram in the window view:
Zoom and Center Content | ||
01 | var cnvs = document.windows[0].selection.canvas | |
02 | var g = cnvs.graphics | |
03 | var gr = new Group(g) | |
04 | var rect = gr.geometry | |
05 | gr.ungroup() | |
06 | document.windows[0].selection.view.visibleRect = rect | |
07 | document.windows[0].centerVisiblePoint = rect.center |
This webpage is in the process of being developed. Any content may change and may not be accurate or complete at this time.