A path is the location of a branch in a tree (or forest). With this package you can use paths to navigate and alter a zwilias/elm-rosetree or a list of them, also called a "forest".
An alternative way of
keeping track of one focus is a Tree.Zipper.
However! Paths are nice if you want to
- keep track of many different locations
- easily deal with potentially focussed nodes etc.
- don't want to pollute
Msges with potentially large, changing tree content
Example: A big tree on the screen where subtrees can be moved and deleted.
import Tree.Path exposing (TreePath)
import Tree.Navigate
type alias Model =
{ tree : Tree { translate : ( Float, Float ) }
, dragged : Maybe TreePath
}
type Msg =
= RightClickedOn ForestPath
| MouseMoved ( Float, Float )
--| ...
viewTree =
Tree.Navigate.restructure
(\sub ->
(...
|> onMouseDown (PressedOn sub.path)
|> (case sub.path |> Tree.Path.step of
Just childPath ->
onRightClick (RightClickedOn childPath)
Nothing ->
-- top level node should not be removable
identity
)
)
:: sub.children
|> group
|> shift sub.label.translate
)
update msg model =
case msg of
RightClickedOn path ->
{ model
| tree =
model.tree
|> Tree.mapChildren
(Forest.Navigate.remove path)
}
MouseMoved mousePosition ->
case model.dragged of
Just path ->
{ model
| tree =
model.tree
|> Tree.Navigate.alter path
(Tree.mapLabel
(\l -> { l | translate = ... })
)
}
Nothing ->
model
--...Complete implementation in example/.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent