elm-arborist/examples/Simple.elm at master · peterszerzo/elm-arborist · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
module Simple exposing (main)

{-| This is a simple `Arborist` app showing a basic conversation flow
-}

import Arborist
import Arborist.Settings as Settings
import Arborist.Tree as Tree
import Browser
import Html exposing (text)
import Json.Encode as Encode


{-| Entry point
-}
main : Program Encode.Value Model Msg
main =
    Browser.element
        { init = init
        , update = update
        , view = view
        , subscriptions = subscriptions
        }


{-| The Node data type held in each of the tree's nodes
-}
type alias MyNode =
    { answer : String
    , question : String
    }


{-| The application model
-}
type alias Model =
    { arboristState : Arborist.State
    , tree : Tree.Tree MyNode
    }


{-| This is the starting tree, built up recursively using the `Arborist.Tree` module
-}
startingTree : Tree.Tree MyNode
startingTree =
    Tree.Node (MyNode "How are you?" "Fine, thanks")
        [ Tree.Node (MyNode "Great. Would you like coffee?" "Absolutely") []
        ]


{-| We are ready to initialize the model
-}
init : Encode.Value -> ( Model, Cmd Msg )
init _ =
    ( { arboristState = Arborist.init
      , tree = startingTree
      }
    , Cmd.none
    )


{-| Some basic settings for the tree
-}
arboristSettings : List (Arborist.Setting MyNode)
arboristSettings =
    [ Settings.keyboardNavigation True
    , Settings.defaultNode (MyNode "What question?" "But what an answer")
    , Settings.nodeWidth 100
    , Settings.level 80
    , Settings.gutter 20
    ]


{-| Arborist needs a single message, passing an `Updater`
-}
type Msg
    = Arborist (Arborist.Updater MyNode)


{-| The `update` method will use the updater to figure out the new tree and the new internal state
-}
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Arborist updater ->
            let
                ( newState, newTree ) =
                    updater model.arboristState model.tree
            in
            ( { model
                | arboristState = newState
                , tree = newTree
              }
            , Cmd.none
            )


{-| Everything is prepared for the view (almost!)
-}
view : Model -> Html.Html Msg
view model =
    Arborist.view
        []
        { state = model.arboristState
        , tree = model.tree

        -- This method describes how a node should render based on its content
        , nodeView = nodeView
        , settings = arboristSettings
        , toMsg = Arborist
        }


{-| As you see above, it is enough to specify how a single node looks to render a tree with a full layout
-}
nodeView : Arborist.NodeView MyNode Msg
nodeView _ maybeNode =
    case maybeNode of
        Just node ->
            text node.question

        Nothing ->
            text "+ add node"


{-| Subscriptions are not mandatory, but they take care of important convenience features like keyboard navigation
-}
subscriptions : Model -> Sub Msg
subscriptions model =
    Arborist.subscriptions
        arboristSettings
        model.arboristState
        model.tree
        |> Sub.map
            (\( newState, newTree ) ->
                Arborist (\_ _ -> ( newState, newTree ))
            )