Drag-and-drop interface to edit, dissect and-rearrange tree structures with arbitrary data sitting in their nodes. Structured as a TEA component defining its own init, update and view, elm-arborist allows you to easily initialize a tree editor, keep its state in an opaque model, and access the edited result at any time.
Module messages
Update function handling changes in the model.
View function for an individual node, depending on its context, and its value. This value is expressed as a maybe because the node may contain an insert new node-type placeholder.
Styled version of NodeView, using elm-css.
Styled version of view, using elm-css.
Subscriptions responsible for obtaining animation frames used to smoothly center an activated tree node. Using these subscriptions is completely optional - if they aren't wired up in your app, the editor will simply jump to the activated node without an animation. We recommend adding these subscriptions as you familiarize yourself with the package, as it is a significant user experience improvement.
Apply a new list of settings to the model.
Resize the canvas by passing a new width and a new height. Note that you can reproduce this using applySettings as follows:
resize 600 400 arborist == applySettings [ Settings.canvasWidth 600, Settings.canvasHeight 400 ] arboristOpaque type for a tree.
Non-empty node, constructed from a single root node and an array of children represented as trees.
node "Parent" [ node "Child1" [], node "Child2" [] ]Empty tree.
Expand a tree into a raw data structure that can be recursed by the user:
Nothing.Just ( currentNode, childtrees )Compared to the tree example on Elm's website, the Empty and Node constructors are deliberately not exposed by this library, in order to accommodate a few not-so-common node use-cases that make said union type complicated for a newcomer to the library.
Flatten tree into a list of ( path, node ) tuples.
Tree decoder as a function of the node's decoder. Assumes a value and children fields, holding the current node contents and an array of children, respectively.
Encodes a tree into JSON, given its node encoder.
Access the current state of the tree through this getter (returns structure defined in the Arborist.Tree module). The result reflects all changes since it was initialized.
Returns the current active node as a tuple of Maybe node (as the node maybe a placeholder for a new node), as well as some contextual information as a two-field record:
position : ( Float, Float ): the node's position on the canvas (useful for rendering an edit pop-up).context: view context, identical to the one provided in NodeView.Sets a new node at the active position. This may be adding a completely new node from scratch (in case the current node is a placeholder), or modifying an existing one. Typically, the modification is based off an original value provided by the activeNodeWithContext method.
Delete the active node from a tree, including all of its children. If a placeholder is active, this method does nothing.
Restores the original pan position of the tree.
Remove active node
The state of a node at a given time. May be normal one of the following:
Normal: node in rest stateHovered: a hovered over nodeActive: an activated node. Overrides hoverDropTarget: indicates that a swap or insert of the dragged subtree will take place at this node upon releaseView context. Contains the following fields:
parent: the item at the parent, not available for the root nodesiblings: a list of all direct siblingschildren: a list of all direct childrenstate: node state
Opaque type for the editor's model, dependent on a node type variable. You can only use this for type annotation - to initialize a new model, see init.