This library aims to provide a flow chart builder in Elm.
{ position : Types.Vector2
, nodes : Dict String Types.FCNode
, links : Dict String Link.Model
, currentlyDragging : Internal.DraggableTypes
, dragState : Utils.Draggable.DragState
, targetMsg : Msg -> msg
, portConfig : { portSize : Types.Vector2
, portColor : String }
, linkConfig : { linkSize : Basics.Int
, linkColor : String }
}
flowchart model
flowchart message
FCEventConfig msg -> FCEventConfig msg
Event declaration for event config
Internal.FCEventConfig msg
Config for subscribing to events
onCanvasClick -> when canvas is clicked
onNodeClick FCNode -> when any node is clicked
onLinkClick FCLink -> when any link is clicked
init : Types.FCCanvas -> (Msg -> msg) -> Model msg
** Initiaze the flowchart **
init fcCanvas targetMsg
initEventConfig : List (FCEvent msg) -> FCEventConfig msg
List of events to subscribe
Currently supported are :
onCanvasClick, onNodeClick, onLinkClick
defaultPortConfig : { portSize : Types.Vector2, portColor : String }
Get default port config
portSize = Size of port in Vector2 (20, 20)
portColor = Color of port (grey)
defaultLinkConfig : { linkSize : Basics.Int, linkColor : String }
Get default link config
linkSize = stroke width of link (2px)
linkColor = Color of link (#6495ED)
subscriptions : { m | fcModel : Model msg } -> Platform.Sub.Sub msg
subscriptions
update : FCEventConfig msg -> Msg -> { m | fcModel : Model msg } -> ( { m | fcModel : Model msg }, Platform.Cmd.Cmd msg )
** Update the flowchart **
view : { m | fcModel : Model msg } -> (Types.FCNode -> { m | fcModel : Model msg } -> Html Msg) -> List (Html.Attribute Msg) -> Html msg
** Display the flowchart **
- model -> Model holding flowchart Model
- nodeMap -> function which gives node's html. For example:
nodeMap : FCNode -> Model -> Html FlowChart.Msg
nodeMap fcNode model =
div
[ A.style "width" "100%"
, A.style "height" "100%"
, A.style "background-color" "white"
]
[ text fcNode.id ]
- fcChartStyle -> css attributes for flowchart
addNode : Types.FCNode -> { m | fcModel : Model msg } -> { m | fcModel : Model msg }
add node to canvas
addNode fcNode Model
removeNode : String -> { m | fcModel : Model msg } -> { m | fcModel : Model msg }
remove node from canvas
removeNode "node-id" Model
removeLink : String -> { m | fcModel : Model msg } -> { m | fcModel : Model msg }
remove link from canvas
removeLink "link-id" FlowChartModel
getFCState : Model msg -> { position : Types.Vector2, nodes : List Types.FCNode, links : List Types.FCLink }
Get current flowchart state i.e position of canvas, nodes and links
getFCState FlowChart.Model
setFCState : { position : Types.Vector2, nodes : List Types.FCNode, links : List Types.FCLink } -> Model msg -> Model msg
Set flowchart state i.e will override position of canvas, nodes and links