Visualize an acyclic digraph as an arc diagram.
view : Layout -> Paint -> AcyclicDigraph -> Html AcyclicDigraph.Node
Create an arc diagram with the specified layout and paint options. The
view produces Node
messages when a node or its label are clicked by the user.
type Msg
= ToggleNode Node
| ...
view : AcyclicDigraph -> Html Msg
view graph =
graph
|> ArcDiagram.view
ArcDiagram.defaultLayout
ArcDiagram.defaultPaint
|> Html.map ToggleNode
Represents values, in pixels, used to layout the diagram.
{ nodePadding : Basics.Int
, edgeSpacing : Basics.Int
, edgeRadius : Basics.Int
, labelWidth : Basics.Int
, labelMinHeight : Basics.Int
}
nodePadding
: Nodes are drawn as rectangles tall enough to fit their
incoming connections and wide enough to fit their outgoing connections. This
determines how much padding to give nodes in addition to the minimum
dimensions required to fit their edge connections.edgeSpacing
: Edges are drawn as 1px lines, and they do not overlap when
connecting to a node. This determines the spacing between each edge
connection.edgeRadius
: Edges are drawn as L-shaped connections with rounded corners.
This determines the corner radius. It can be set to a high number to give the
look of a more traditional arc diagram.labelWidth
: The width for each label.labelMinHeight
: The minimum height for each label. This ensures space for
labels when their node heights are otherwise too small.defaultLayout : Layout
{ nodePadding = 4
, edgeSpacing = 2
, edgeRadius = 4
, labelWidth = 100
, labelMinHeight = 20
}
Represents functions used to draw labels and set the color for each node and edge.
{ viewLabel : AcyclicDigraph.Node -> Svg AcyclicDigraph.Node
, colorNode : AcyclicDigraph.Node -> String
, colorEdge : AcyclicDigraph.Edge -> String
}
Color is represented as a string, and should be a CSS color value.
defaultPaint : Paint
The defaultPaint
will color nodes black, edges gray, and draw labels
displaying the integer represention of each node.
basicPaint : (AcyclicDigraph.Node -> String) -> Paint
Get a Paint
value that uses the default colors and your own label text,
by providing a toLabel function that determines the label text for each node.
view : (Node -> String) -> AcyclicDigraph -> Html Node
view toLabel =
ArcDiagram.view
ArcDiagram.defaultLayout
(ArcDiagram.basicPaint toLabel)