peterszerzo/elm-arborist/2.3.1

NOTE: this package is not compatible with Elm 0.19.1

Arborist

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 setup

type Model node

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.

type alias Msg =
Msg

Message type annotation for the program. When wiring up the editor within a larger program, you will define a ArboristMsg Arborist.Msg message type, one that will trigger this package's update function.

init : Tree node -> Model node

Initialize model from a tree.

initWith : List Setting -> Tree node -> Model node

Initialize model from a tree, using a list of settings.

update : Msg -> Model node -> Model node

Update function handling changes in the model.

type alias NodeView node =
Context node -> Maybe node -> Html Msg

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.

view : NodeView node -> List (Attribute Msg) -> Model node -> Html Msg

The editor's view function, taking the following arguments:

  • NodeView: view function for an individual node.
  • a list of html attributes for the container element.
  • the editor's model.
subscriptions : Model node -> Sub Msg

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.

Configuration

applySettings : List Setting -> Model node -> Model node

Apply a new list of settings to the model.

resize : Int -> Int -> Model node -> Model node

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 ] arborist

Tree getters and modifiers

tree : Model node -> Tree node

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.

activeNode : Model node -> Maybe ( Maybe node, ( Float, Float ) )

DEPRECATED, see activeNodeWithContext. Returns the current active node as a tuple of Maybe node (as the node maybe a placeholder for a new node), as well as its position on the screen. This is the older, less detailed version of activeNodeWithContext.

Model node
-> Maybe
( Maybe node
, { position : ( Float, Float )
, context : Context node
}
)

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.
setActiveNode : node -> Model node -> Model node

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.

deleteActiveNode : Model node -> Model node

Delete the active node from a tree, including all of its children. If a placeholder is active, this method does nothing.