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

Miso.Flow

Contents

Component
Settings
Model
Actions
Update / view (for manual embedding)
Re-exports

Description

Node-based UIs for miso, powered by xyflow. This module wraps the pure ports (Miso.Flow.Types, Miso.Flow.Utils), the view layer (Miso.Flow.View) and the JavaScript gesture bridge (Miso.Flow.Internal.Bridge) into an MVU component:

main :: IO ()
main = startApp defaultEvents $
  flowComponent defaultStoreOptions (text . nodeLabel) id myNodes myEdges

Requires js/miso-flow.js (it defines globalThis.MisoFlow); it ships inside the compiled output (js-sources on the GHCJS/JS backends, a compile-time splice on WASM).

Synopsis

flowComponent :: Eq n => StoreOptions -> FlowSettings -> (n -> View ctx (FlowModel n e) (FlowAction n e)) -> (FlowViewConfig ctx n e (FlowModel n e) (FlowAction n e) -> FlowViewConfig ctx n e (FlowModel n e) (FlowAction n e)) -> [Node n] -> [Edge e] -> Component ctx props (FlowModel n e) (FlowAction n e)
newtype FlowSettings = FlowSettings {
- fsValidateConnection :: Maybe (Connection -> Bool)
}
defaultFlowSettings :: FlowSettings
data FlowModel n e
flowModel :: Eq n => StoreOptions -> [Node n] -> [Edge e] -> FlowModel n e
flowNodes :: FlowModel n e -> [Node n]
flowEdges :: FlowModel n e -> [Edge e]
flowViewport :: FlowModel n e -> Viewport
flowConnection :: FlowModel n e -> ConnectionState n
flowOptions :: FlowModel n e -> StoreOptions
data FlowAction n e
- = FlowCreated DOMRef
- | FlowStoreCreated FlowStore
- | FlowBeforeDestroyed
- | FlowNodeCreated NodeId DOMRef
- | FlowNodeBeforeDestroyed NodeId DOMRef
- | FlowHandleCreated DOMRef
- | FlowViewportChanged Viewport
- | FlowNodeChangesReceived [WireNodeChange]
- | FlowConnectionChanged ConnectionStateWire
- | FlowConnected Connection
- | FlowNodeMouseDown NodeId Bool
- | FlowEdgeClicked EdgeId
- | FlowUnselected
- | FlowSelectionChanged Rect
- | FlowSelectionFinished
- | FlowRemoveNode NodeId
- | FlowReconnected EdgeId Connection
- | FlowResizeStarted NodeId
- | FlowResizeFinished NodeId
- | FlowMinimapClicked XYPosition
- | FlowDeletePressed
- | FlowDimensionsChanged Dimensions
- | FlowResizerCreated NodeId Value DOMRef
- | FlowResizerBeforeDestroyed NodeId DOMRef
- | FlowMinimapCreated MinimapConfig DOMRef
- | FlowEdgeAnchorCreated DOMRef
- | FlowSetNodes [Node n]
- | FlowSetEdges [Edge e]
- | FlowOptionsChanged StoreOptions
- | FlowZoomIn
- | FlowZoomOut
- | FlowZoomTo Double
- | FlowSetCenterOn XYPosition
- | FlowFitBounds Rect
- | FlowFitView
- | FlowErrorRaised MisoString MisoString
updateFlow :: Eq n => FlowAction n e -> Effect ctx props (FlowModel n e) (FlowAction n e)
updateFlowWith :: Eq n => FlowSettings -> FlowAction n e -> Effect ctx props (FlowModel n e) (FlowAction n e)
viewFlow :: FlowViewConfig ctx n e (FlowModel n e) (FlowAction n e) -> FlowModel n e -> View ctx (FlowModel n e) (FlowAction n e)
flowHooks :: FlowHooks (FlowAction n e)
sceneFromModel :: FlowModel n e -> FlowScene n e
data StoreOptions = StoreOptions {
- soFlowId :: MisoString
- soLib :: MisoString
- soMinZoom :: Double
- soMaxZoom :: Double
- soTranslateExtent :: Maybe CoordinateExtent
- soNodeExtent :: Maybe CoordinateExtent
- soNodeOrigin :: NodeOrigin
- soDefaultViewport :: Viewport
- soSnapToGrid :: Bool
- soSnapGrid :: SnapGrid
- soElevateNodesOnSelect :: Bool
- soZIndexMode :: ZIndexMode
- soNodesDraggable :: Bool
- soAutoPanOnNodeDrag :: Bool
- soAutoPanOnConnect :: Bool
- soAutoPanSpeed :: Double
- soNodeDragThreshold :: Double
- soNodeClickDistance :: Double
- soSelectNodesOnDrag :: Bool
- soConnectionMode :: ConnectionMode
- soConnectionRadius :: Double
- soConnectionDragThreshold :: Double
- soPanOnDrag :: PanOnDrag
- soPanOnScroll :: Bool
- soPanOnScrollMode :: PanOnScrollMode
- soPanOnScrollSpeed :: Double
- soZoomOnScroll :: Bool
- soZoomOnPinch :: Bool
- soZoomOnDoubleClick :: Bool
- soPreventScrolling :: Bool
- soPaneClickDistance :: Double
}
defaultStoreOptions :: StoreOptions
module Miso.Flow.Types
module Miso.Flow.View
flowCSS :: CSS
flowStyles :: MisoString
flowBaseCSS :: CSS
flowBaseStyles :: MisoString
flowThemeCSS :: CSS
flowThemeStyles :: MisoString

Component

flowComponent Source #

Arguments

:: Eq n
=> StoreOptions
-> FlowSettings
-> (n -> View ctx (FlowModel n e) (FlowAction n e))	node label
-> (FlowViewConfig ctx n e (FlowModel n e) (FlowAction n e) -> FlowViewConfig ctx n e (FlowModel n e) (FlowAction n e))	view customization (`id` for the defaults)
-> [Node n]
-> [Edge e]
-> Component ctx props (FlowModel n e) (FlowAction n e)

A ready-to-mount flow. The view config passed to the customization function is pre-wired: hooks, flow id and connection mode match the store options, nodes render the given label view.

Settings

newtype FlowSettings Source #

Behavioral settings that cannot live in the (JSON-serialized) StoreOptions or the (Eq-constrained) model.

Constructors

FlowSettings
Fields fsValidateConnection :: Maybe (Connection -> Bool) consulted synchronously by the gesture system while a connection (or reconnection) is dragged; invalid targets render the connection line in the invalid style and refuse to connect

defaultFlowSettings :: FlowSettings Source #

Model

data FlowModel n e Source #

State of one flow: the user graph, its computed internals, and the handle to the JavaScript store.

Instances

Instances details

(Eq n, Eq e) => Eq (FlowModel n e) Source #
Instance details Defined in Miso.Flow Methods (==) :: FlowModel n e -> FlowModel n e -> Bool # (/=) :: FlowModel n e -> FlowModel n e -> Bool #

flowModel :: Eq n => StoreOptions -> [Node n] -> [Edge e] -> FlowModel n e Source #

Initial model from user nodes and edges.

flowNodes :: FlowModel n e -> [Node n] Source #

flowEdges :: FlowModel n e -> [Edge e] Source #

flowViewport :: FlowModel n e -> Viewport Source #

flowConnection :: FlowModel n e -> ConnectionState n Source #

flowOptions :: FlowModel n e -> StoreOptions Source #

Actions

data FlowAction n e Source #

Constructors

FlowCreated DOMRef	container mounted: create the JavaScript store
FlowStoreCreated FlowStore
FlowBeforeDestroyed
FlowNodeCreated NodeId DOMRef
FlowNodeBeforeDestroyed NodeId DOMRef
FlowHandleCreated DOMRef
FlowViewportChanged Viewport
FlowNodeChangesReceived [WireNodeChange]
FlowConnectionChanged ConnectionStateWire
FlowConnected Connection
FlowNodeMouseDown NodeId Bool	id and whether a multi-selection modifier was held
FlowEdgeClicked EdgeId
FlowUnselected
FlowSelectionChanged Rect
FlowSelectionFinished
FlowRemoveNode NodeId
FlowReconnected EdgeId Connection	an edge anchor was dropped on a new valid handle
FlowResizeStarted NodeId	extension point: no-op in `updateFlow`
FlowResizeFinished NodeId	extension point: no-op in `updateFlow`
FlowMinimapClicked XYPosition	centers the viewport on the clicked flow position
FlowDeletePressed	Delete/Backspace: remove the current selection
FlowDimensionsChanged Dimensions
FlowResizerCreated NodeId Value DOMRef
FlowResizerBeforeDestroyed NodeId DOMRef
FlowMinimapCreated MinimapConfig DOMRef
FlowEdgeAnchorCreated DOMRef
FlowSetNodes [Node n]
FlowSetEdges [Edge e]
FlowOptionsChanged StoreOptions	change store options at runtime (zoom limits, snapping, …)
FlowZoomIn
FlowZoomOut
FlowZoomTo Double
FlowSetCenterOn XYPosition	center the viewport on a flow position
FlowFitBounds Rect	fit the viewport to a flow-coordinate rectangle
FlowFitView
FlowErrorRaised MisoString MisoString

Update / view (for manual embedding)

updateFlow :: Eq n => FlowAction n e -> Effect ctx props (FlowModel n e) (FlowAction n e) Source #

updateFlowWith with default settings.

updateFlowWith :: Eq n => FlowSettings -> FlowAction n e -> Effect ctx props (FlowModel n e) (FlowAction n e) Source #

Transition function; embed it directly if you are not using flowComponent.

viewFlow :: FlowViewConfig ctx n e (FlowModel n e) (FlowAction n e) -> FlowModel n e -> View ctx (FlowModel n e) (FlowAction n e) Source #

Draw a model with a view config (see flowViewConfig).

flowHooks :: FlowHooks (FlowAction n e) Source #

The standard wiring of VDOM lifecycle events into FlowActions.

sceneFromModel :: FlowModel n e -> FlowScene n e Source #

The scene flowView draws for a model.

Re-exports

data StoreOptions Source #

Options handed to the JavaScript store; mirrors the union of pane, drag and connection settings across @xyflow/system's modules.

Constructors

StoreOptions

Fields

soFlowId :: MisoString
soLib :: MisoString
soMinZoom :: Double
soMaxZoom :: Double
soTranslateExtent :: Maybe CoordinateExtent
soNodeExtent :: Maybe CoordinateExtent
soNodeOrigin :: NodeOrigin
soDefaultViewport :: Viewport
soSnapToGrid :: Bool
soSnapGrid :: SnapGrid
soElevateNodesOnSelect :: Bool
soZIndexMode :: ZIndexMode
soNodesDraggable :: Bool
soAutoPanOnNodeDrag :: Bool
soAutoPanOnConnect :: Bool
soAutoPanSpeed :: Double
soNodeDragThreshold :: Double
soNodeClickDistance :: Double
soSelectNodesOnDrag :: Bool
soConnectionMode :: ConnectionMode
soConnectionRadius :: Double
soConnectionDragThreshold :: Double
soPanOnDrag :: PanOnDrag
soPanOnScroll :: Bool
soPanOnScrollMode :: PanOnScrollMode
soPanOnScrollSpeed :: Double
soZoomOnScroll :: Bool
soZoomOnPinch :: Bool
soZoomOnDoubleClick :: Bool
soPreventScrolling :: Bool
soPaneClickDistance :: Double

Instances

Instances details

Show StoreOptions Source #
Instance details Defined in Miso.Flow.Internal.Bridge Methods showsPrec :: Int -> StoreOptions -> ShowS # show :: StoreOptions -> String # showList :: [StoreOptions] -> ShowS #
Eq StoreOptions Source #
Instance details Defined in Miso.Flow.Internal.Bridge Methods (==) :: StoreOptions -> StoreOptions -> Bool # (/=) :: StoreOptions -> StoreOptions -> Bool #
ToJSON StoreOptions Source #
Instance details Defined in Miso.Flow.Internal.Bridge Methods toJSON :: StoreOptions -> Value Source # toJSONList :: [StoreOptions] -> Value Source #

defaultStoreOptions :: StoreOptions Source #

Defaults matching xyflow's.

module Miso.Flow.Types

module Miso.Flow.View

flowCSS :: CSS Source #

Base + default theme, ready for a component's styles field.

flowStyles :: MisoString Source #

The full stylesheet: flowBaseStyles plus flowThemeStyles.

flowBaseCSS :: CSS Source #

Structural contract only, for apps shipping their own theme.

flowBaseStyles :: MisoString Source #

Layout and interaction rules the bridge requires; no colors, no decoration. Do not override positioning, transforms or pointer-events in these classes.

flowThemeCSS :: CSS Source #

Default theme only.

flowThemeStyles :: MisoString Source #

The default look. Driven by CSS custom properties on .miso-flow (restyle by overriding them): --mf-bg, --mf-dots, --mf-node-bg, --mf-node-color, --mf-node-border, --mf-node-shadow, --mf-node-shadow-selected, --mf-accent, --mf-accent-soft, --mf-edge, --mf-edge-selected, --mf-edge-label-bg, --mf-handle, --mf-handle-border, --mf-connection, --mf-connection-invalid, --mf-connection-valid, --mf-panel-bg, --mf-panel-border, --mf-panel-color, --mf-minimap-mask, --mf-minimap-node, --mf-selection, --mf-font. Add a dark class on the container for the dark palette.