License	BSD3-style (see the file LICENSE)
Safe Haskell	None
Language	Haskell2010

Miso.Flow.View

Contents

Lifecycle hooks
Configuration
Scene
Views
Minimap
Node resizer
Node toolbar
Edge paths

Description

Pure views rendering the DOM contract that the miso-flow JavaScript bridge (and the imperative @xyflow/system modules behind it) expects:

div.miso-flow[.dark]
  svg.miso-flow__background          (optional dot grid)
  div.miso-flow__pane
    div.miso-flowviewport.xyflowviewport   (viewport transform)
      svg.miso-flow__edges           (edge paths + marker defs)
      div.miso-flow__nodes
        div.miso-flow__node[data-id] (measured + dragged by the bridge)
          …user content…
          div.miso-flow__handle…     (connection handles)
      svg.miso-flow__connectionline  (while connecting)
  div.miso-flow__panel…              (controls, custom panels)

The selector contract: the bridge looks up .miso-flow__pane and .xyflow__viewport, measures handles via the source / target classes and data-handleid / data-handlepos, and resolves connections over data-nodeid / data-id and the connectable / connectablestart / connectableend classes.

Synopsis

data FlowHooks action = FlowHooks {
- hookFlowCreated :: DOMRef -> action
- hookFlowBeforeDestroyed :: action
- hookNodeCreated :: NodeId -> DOMRef -> action
- hookNodeBeforeDestroyed :: NodeId -> DOMRef -> action
- hookHandleCreated :: DOMRef -> action
- hookEdgeClick :: Maybe (EdgeId -> action)
- hookNodeClick :: Maybe (NodeId -> Bool -> action)
- hookResizerCreated :: NodeId -> Value -> DOMRef -> action
- hookResizerBeforeDestroyed :: NodeId -> DOMRef -> action
- hookMinimapCreated :: MinimapConfig -> DOMRef -> action
- hookEdgeAnchorCreated :: DOMRef -> action
}
data FlowViewConfig ctx n e model action = FlowViewConfig {
- fvcFlowId :: MisoString
- fvcDark :: Bool
- fvcConnectionMode :: ConnectionMode
- fvcConnectionLineType :: ConnectionLineType
- fvcShowBackground :: Bool
- fvcNodeContent :: NodeContentRenderer ctx n e model action
- fvcAttrs :: [Attribute model action]
- fvcChildren :: FlowScene n e -> [View ctx model action]
- fvcViewportChildren :: FlowScene n e -> [View ctx model action]
- fvcEdgesReconnectable :: Bool
- fvcHooks :: FlowHooks action
}
flowViewConfig :: FlowHooks action -> (n -> View ctx model action) -> FlowViewConfig ctx n e model action
type NodeContentRenderer ctx n e model action = FlowViewConfig ctx n e model action -> Node n -> [View ctx model action]
data FlowScene n e = FlowScene {
- sceneNodes :: [Node n]
- sceneNodeLookup :: NodeLookup n
- sceneEdges :: [Edge e]
- sceneViewport :: Viewport
- sceneConnection :: ConnectionState n
- sceneDimensions :: Dimensions
- sceneSelectionRect :: Maybe Rect
- sceneOptions :: StoreOptions
}
flowView :: FlowViewConfig ctx n e model action -> FlowScene n e -> View ctx model action
defaultNodeContent :: (Node n -> View ctx model action) -> NodeContentRenderer ctx n e model action
handleView :: FlowViewConfig ctx n e model action -> Node n -> HandleType -> Position -> Maybe MisoString -> View ctx model action
panelView :: PanelPosition -> [View ctx model action] -> View ctx model action
controlsView :: PanelPosition -> [(MisoString, action)] -> View ctx model action
data MinimapConfig = MinimapConfig {
- mmWidth :: !Double
- mmHeight :: !Double
- mmPosition :: !PanelPosition
- mmPannable :: !Bool
- mmZoomable :: !Bool
- mmInversePan :: !Bool
- mmZoomStep :: !Double
- mmNodeBorderRadius :: !Double
- mmOffsetScale :: !Double
}
defaultMinimapConfig :: MinimapConfig
minimapView :: MinimapConfig -> FlowViewConfig ctx n e model action -> FlowScene n e -> View ctx model action
minimapViewScaleFor :: MinimapConfig -> Dimensions -> Viewport -> NodeLookup n -> Double
data ResizerConfig = ResizerConfig {
- rcMinWidth :: !Double
- rcMinHeight :: !Double
- rcMaxWidth :: !(Maybe Double)
- rcMaxHeight :: !(Maybe Double)
- rcKeepAspectRatio :: !Bool
}
defaultResizerConfig :: ResizerConfig
nodeResizerView :: ResizerConfig -> FlowViewConfig ctx n e model action -> Node n -> [View ctx model action]
data ToolbarConfig = ToolbarConfig {
- tbPosition :: !Position
- tbOffset :: !Double
- tbAlign :: !Align
}
defaultToolbarConfig :: ToolbarConfig
nodeToolbarView :: ToolbarConfig -> FlowScene n e -> NodeId -> [View ctx model action] -> [View ctx model action]
edgeToolbarView :: FlowViewConfig ctx n e model action -> FlowScene n e -> EdgeId -> [View ctx model action] -> [View ctx model action]
edgePathFor :: ConnectionMode -> NodeLookup n -> Edge e -> Maybe EdgePath
edgePositionFor :: ConnectionMode -> NodeLookup n -> Edge e -> Maybe EdgePosition
connectionPathFor :: ConnectionLineType -> ConnectionInProgress n -> EdgePath

Lifecycle hooks

data FlowHooks action Source #

Actions dispatched from VDOM lifecycle events; the component layer uses these to create the JavaScript store and attach gestures to the elements as they appear.

Constructors

FlowHooks

Fields

hookFlowCreated :: DOMRef -> action
container inserted: create the store
hookFlowBeforeDestroyed :: action
container about to leave: destroy the store
hookNodeCreated :: NodeId -> DOMRef -> action
node element inserted: observe + attach drag
hookNodeBeforeDestroyed :: NodeId -> DOMRef -> action
node element about to leave: unobserve + detach drag
hookHandleCreated :: DOMRef -> action
handle element inserted: attach connection gestures
hookEdgeClick :: Maybe (EdgeId -> action)
optional: click on an edge's interaction path
hookNodeClick :: Maybe (NodeId -> Bool -> action)
optional: plain click on a node; the Bool is True when a multi-selection modifier (shift/meta/ctrl) was held. Drags don't reach it — d3-drag suppresses the click after a real drag.
hookResizerCreated :: NodeId -> Value -> DOMRef -> action
resize control inserted (the Value carries the XYResizer parameters built by nodeResizerView)
hookResizerBeforeDestroyed :: NodeId -> DOMRef -> action
resize control about to leave
hookMinimapCreated :: MinimapConfig -> DOMRef -> action
minimap svg inserted: attach XYMinimap pan/zoom
hookEdgeAnchorCreated :: DOMRef -> action
edge reconnect anchor inserted: attach the reconnect gesture

Configuration

data FlowViewConfig ctx n e model action Source #

Constructors

FlowViewConfig

Fields

fvcFlowId :: MisoString
must match soFlowId
fvcDark :: Bool
add the dark class (see Miso.Flow.Style)
fvcConnectionMode :: ConnectionMode
must match soConnectionMode
fvcConnectionLineType :: ConnectionLineType
path style of the in-progress connection line
fvcShowBackground :: Bool
render the dot-grid background
fvcNodeContent :: NodeContentRenderer ctx n e model action
fvcAttrs :: [Attribute model action]
extra attributes for the container (id, inline size, …)
fvcChildren :: FlowScene n e -> [View ctx model action]
overlays for the current scene: panels, controls, minimap, …
fvcViewportChildren :: FlowScene n e -> [View ctx model action]
overlays rendered inside the transformed viewport (flow coordinates): edge toolbars, custom labels, …
fvcEdgesReconnectable :: Bool
render reconnect anchors on selected edges
fvcHooks :: FlowHooks action

flowViewConfig Source #

Arguments

:: FlowHooks action
-> (n -> View ctx model action)	node label
-> FlowViewConfig ctx n e model action

Config with xyflow-like defaults; nodes render their nodeData through the given label view.

type NodeContentRenderer ctx n e model action = FlowViewConfig ctx n e model action -> Node n -> [View ctx model action] Source #

Content rendered inside the node wrapper element (the wrapper itself — positioning, classes, lifecycle — is owned by flowView).

Scene

data FlowScene n e Source #

Everything flowView draws in one frame.

Constructors

FlowScene

Fields

sceneNodes :: [Node n]
user nodes, in render order
sceneNodeLookup :: NodeLookup n
internals for sceneNodes (absolute positions, z, measurements)
sceneEdges :: [Edge e]
sceneViewport :: Viewport
sceneConnection :: ConnectionState n
in-progress connection, if any
sceneDimensions :: Dimensions
container size as reported by the bridge (drives the minimap)
sceneSelectionRect :: Maybe Rect
in-progress selection box, in container coordinates
sceneOptions :: StoreOptions
current store options (snapping, zoom limits, …)

Views

flowView :: FlowViewConfig ctx n e model action -> FlowScene n e -> View ctx model action Source #

The full flow container.

defaultNodeContent Source #

Arguments

:: (Node n -> View ctx model action)	label
-> NodeContentRenderer ctx n e model action

Default node content: a target handle, the label, a source handle.

handleView Source #

Arguments

:: FlowViewConfig ctx n e model action
-> Node n
-> HandleType
-> Position
-> Maybe MisoString	handle id (for multi-handle nodes)
-> View ctx model action

A connection handle, carrying all attributes the gesture system reads ('data-id' mirrors the TS template including its null for a missing handle id).

panelView :: PanelPosition -> [View ctx model action] -> View ctx model action Source #

A positioned overlay panel (see .miso-flow__panel in Miso.Flow.Style).

controlsView :: PanelPosition -> [(MisoString, action)] -> View ctx model action Source #

A column of control buttons, one per (label, action).

Minimap

data MinimapConfig Source #

Constructors

MinimapConfig
Fields mmWidth :: !Double mmHeight :: !Double mmPosition :: !PanelPosition mmPannable :: !Bool mmZoomable :: !Bool mmInversePan :: !Bool mmZoomStep :: !Double mmNodeBorderRadius :: !Double mmOffsetScale :: !Double

Instances

Instances details

Show MinimapConfig Source #
Instance details Defined in Miso.Flow.View Methods showsPrec :: Int -> MinimapConfig -> ShowS # show :: MinimapConfig -> String # showList :: [MinimapConfig] -> ShowS #
Eq MinimapConfig Source #
Instance details Defined in Miso.Flow.View Methods (==) :: MinimapConfig -> MinimapConfig -> Bool # (/=) :: MinimapConfig -> MinimapConfig -> Bool #

defaultMinimapConfig :: MinimapConfig Source #

xyflow's minimap defaults (pannable/zoomable on, bottom right).

minimapView :: MinimapConfig -> FlowViewConfig ctx n e model action -> FlowScene n e -> View ctx model action Source #

A pannable/zoomable overview map. Include it in fvcChildren.

minimapViewScaleFor :: MinimapConfig -> Dimensions -> Viewport -> NodeLookup n -> Double Source #

The scale the XYMinimap gesture code needs (the component layer forwards it over the bridge whenever the scene changes).

Node resizer

data ResizerConfig Source #

Constructors

ResizerConfig
Fields rcMinWidth :: !Double rcMinHeight :: !Double rcMaxWidth :: !(Maybe Double) rcMaxHeight :: !(Maybe Double) rcKeepAspectRatio :: !Bool

Instances

Instances details

Show ResizerConfig Source #
Instance details Defined in Miso.Flow.View Methods showsPrec :: Int -> ResizerConfig -> ShowS # show :: ResizerConfig -> String # showList :: [ResizerConfig] -> ShowS #
Eq ResizerConfig Source #
Instance details Defined in Miso.Flow.View Methods (==) :: ResizerConfig -> ResizerConfig -> Bool # (/=) :: ResizerConfig -> ResizerConfig -> Bool #

defaultResizerConfig :: ResizerConfig Source #

nodeResizerView :: ResizerConfig -> FlowViewConfig ctx n e model action -> Node n -> [View ctx model action] Source #

Resize controls for one node: four edge lines plus four corner handles, wired to XYResizer through the bridge. Render them inside the node's content (typically only while the node is selected):

myContent cfg n =
  nodeResizerView defaultResizerConfig cfg n <> defaultNodeContent label cfg n

Node toolbar

data ToolbarConfig Source #

Constructors

ToolbarConfig
Fields tbPosition :: !Position tbOffset :: !Double tbAlign :: !Align

Instances

Instances details

Show ToolbarConfig Source #
Instance details Defined in Miso.Flow.View Methods showsPrec :: Int -> ToolbarConfig -> ShowS # show :: ToolbarConfig -> String # showList :: [ToolbarConfig] -> ShowS #
Eq ToolbarConfig Source #
Instance details Defined in Miso.Flow.View Methods (==) :: ToolbarConfig -> ToolbarConfig -> Bool # (/=) :: ToolbarConfig -> ToolbarConfig -> Bool #

defaultToolbarConfig :: ToolbarConfig Source #

nodeToolbarView Source #

Arguments

:: ToolbarConfig
-> FlowScene n e
-> NodeId
-> [View ctx model action]	toolbar content
-> [View ctx model action]

A toolbar floating next to a node, in container coordinates (it does not scale with the zoom). Include it via fvcChildren:

fvcChildren = \scene ->
  [ v
  | n <- sceneNodes scene, nodeSelected n
  , v <- nodeToolbarView defaultToolbarConfig scene (nodeId n) [ … ]
  ]

edgeToolbarView Source #

Arguments

:: FlowViewConfig ctx n e model action
-> FlowScene n e
-> EdgeId
-> [View ctx model action]	toolbar content
-> [View ctx model action]

A toolbar floating at an edge's label position. Rendered in flow coordinates but inverse-scaled so it keeps a constant size — include it via fvcViewportChildren (it must live inside the viewport):

fvcViewportChildren = scene ->
  [ v
  | e <- sceneEdges scene, edgeSelected e
  , v <- edgeToolbarView cfg scene (edgeId e) [ … ]
  ]

Edge paths

edgePathFor :: ConnectionMode -> NodeLookup n -> Edge e -> Maybe EdgePath Source #

Resolve an edge's endpoints against the lookup and produce its path, honoring the edge's type (default / bezier, straight, step, smoothstep, simplebezier). Nothing until both endpoint nodes are measured.

edgePositionFor :: ConnectionMode -> NodeLookup n -> Edge e -> Maybe EdgePosition Source #

Resolve an edge's endpoints against the lookup; Nothing until both endpoint nodes are measured.

connectionPathFor :: ConnectionLineType -> ConnectionInProgress n -> EdgePath Source #

Path of the in-progress connection line, from the source handle to the pointer.