vernacular-ai / elm-flow-chart / FlowChart

This library aims to provide a flow chart builder in Elm.

Definition


type alias Model msg =
{ 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


type Msg

flowchart message


type alias FCEvent msg =
FCEventConfig msg -> FCEventConfig msg

Event declaration for event config


type alias FCEventConfig msg =
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

Subscriptions

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

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

Functionalities

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