A ClojureScript library that wraps ReactFlow
A ClojureScript library that wraps ReactFlow
(add-edge edge source)
Returns a vector of edges with edge
added to the source
.
Returns a vector of edges with `edge` added to the `source`.
(apply-edge-changes changes source)
Returns a vector of edges with changes
applied to the source
.
Returns a vector of edges with `changes` applied to the `source`.
(apply-node-changes changes source)
Returns a vector of nodes with changes
applied to the source
.
Returns a vector of nodes with `changes` applied to the `source`.
(change-keys m f)
Walks a map and replaces all keys by applying function to the keys.
Walks a map and replaces all keys by applying function to the keys.
(get-connections-by-node-id connections id & which)
Returns a vector of connections where the node with id
is either
the source or the target.
Returns an empty vector if no connections are found.
Returns a vector of connections where the node with `id` is either the source or the target. Returns an empty vector if no connections are found.
(get-node-by-id nodes id)
Returns a map of the node with id
from nodes
.
The returned map is supplemented with the keyword index
.
Returns nil
if the node is not found.
Returns a map of the node with `id` from `nodes`. The returned map is supplemented with the keyword `index`. Returns `nil` if the node is not found.
(reagent-flow params & children)
This is the main component of reagent-flow
. It differs from
ReactFlow
in a few ways.
on-viewport-(change|start|end)
to listen for changes in the
Viewport.id
.Note!
Node-types & edge-types are called directly from within ReactFlow,
so the parameters returned are in their JavaScript-form. A nice
pattern, is to only rely on the id
from the parameters and do
lookups in your state manually.
Ex.
(defn- custom-node [{:keys [id]}]
(let [node (flow/get-node-by-id @nodes id)
data (:data node)]
[:p (:label data)])
This is the main component of `reagent-flow`. It differs from `ReactFlow` in a few ways. - You pass regular Clojure data-structures to all paramaters, so vectors instead of arrays, maps instead of objects and so on. - Viewport events are baked in, so you use the events `on-viewport-(change|start|end)` to listen for changes in the Viewport. - reagent-flow-provider is also used, so if you need to have multiple flows on the same page, just be sure to give each of them a unique `id`. Note! Node-types & edge-types are called directly from within ReactFlow, so the parameters returned are in their JavaScript-form. A nice pattern, is to only rely on the `id` from the parameters and do lookups in your state manually. Ex. (defn- custom-node [{:keys [id]}] (let [node (flow/get-node-by-id @nodes id) data (:data node)] [:p (:label data)])
cljdoc is a website building & hosting documentation for Clojure/Script libraries
× close