Liking cljdoc? Tell your friends :D
ClojureScript only.
- -->camelCase
- -->kebab-case
- add-edge
- apply-edge-changes
- apply-node-changes
- background
- base-edge
- bezier-edge
- control-button
- controls
- edge-label-renderer
- edge-text
- FlowBaseEdgeProps
- FlowBezierEdgeProps
- FlowBezierPathOptions
- FlowBox
- FlowConnection
- FlowConnectionLineComponent
- FlowConnectionLineComponentProps
- FlowConnectionLineType
- FlowConnectionMode
- FlowCoordinateExtent
- FlowDefaultEdgeOptions
- FlowDimensions
- FlowEdge
- FlowEdgeAddChange
- FlowEdgeChange
- FlowEdgeMarker
- FlowEdgeMarkerType
- FlowEdgeMouseHandler
- FlowEdgeProps
- FlowEdgeRemoveChange
- FlowEdgeResetChange
- FlowEdgeSelectionChange
- FlowEdgeTextProps
- FlowEdgeTypes
- FlowEdgeTypesWrapped
- FlowFitBounds
- FlowFitBoundsOptions
- FlowFitView
- FlowFitViewOptions
- FlowGetViewport
- FlowGetZoom
- FlowHandleProps
- FlowHandleType
- FlowInstance
- FlowKeyCode
- FlowMarkerType
- FlowNode
- FlowNodeAddChange
- FlowNodeBounds
- FlowNodeChange
- FlowNodeDimensionChange
- FlowNodeDimensionUpdate
- FlowNodeDragHandler
- FlowNodeDragItem
- FlowNodeHandleBounds
- FlowNodeInternals
- FlowNodeMouseHandler
- FlowNodeOrigin
- FlowNodePositionChange
- FlowNodeProps
- FlowNodeRemoveChange
- FlowNodeResetChange
- FlowNodeSelectionChange
- FlowNodeTypes
- FlowNodeTypesWrapped
- FlowOnConnect
- FlowOnConnectEnd
- FlowOnConnectStart
- FlowOnConnectStartParams
- FlowOnEdgesChange
- FlowOnEdgesDelete
- FlowOnEdgeUpdateFunc
- FlowOnInit
- FlowOnMove
- FlowOnMoveEnd
- FlowOnMoveStart
- FlowOnNodesChange
- FlowOnNodesDelete
- FlowOnSelectionChangeFunc
- FlowOnSelectionChangeParams
- FlowOnViewportChange
- FlowPanelPosition
- FlowPanOnScrollMode
- FlowPosition
- FlowProject
- FlowProOptions
- FlowReactFlowActions
- FlowReactFlowInstance
- FlowReactFlowJsonObject
- FlowReactFlowProps
- FlowReactFlowRefType
- FlowReactFlowState
- FlowReactFlowStore
- FlowRect
- FlowSelectionDragHandler
- FlowSetCenter
- FlowSetCenterOptions
- FlowSetViewport
- FlowSmoothStepEdgeProps
- FlowSmoothStepPathOptions
- FlowSnapGrid
- FlowStartHandle
- FlowTransform
- FlowUnselectNodesAndEdgesParams
- FlowUpdateNodeInternals
- FlowViewport
- FlowViewportHelperFunctionOptions
- FlowViewportHelperFunctions
- FlowWrapEdgeProps
- FlowWrapNodeProps
- FlowXYPosition
- FlowXYZPosition
- FlowZoomInOut
- FlowZoomTo
- get-connections-by-node-id
- get-node-by-id
- handle
- mini-map
- node-resize-control
- node-resizer
- node-toolbar
- panel
- position
- reagent-flow
- simple-bezier-edge
- smooth-step-edge
- step-edge
- straight-edge
- use-update-node-internals
reagent-flow.core
A ClojureScript library that wraps ReactFlow
A ClojureScript library that wraps ReactFlow
add-edgecljs
(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-changescljs
(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-changescljs
(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`.
get-connections-by-node-idcljs
(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-idcljs
(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-flowcljs
(reagent-flow params & children)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)]))
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