Module

DataViz.Layout.StateMachine

Package: purescript-hylograph-layout
Repository: afcondon/purescript-hylograph-layout

State machine layout for visualization. Provides types and layout algorithms for rendering state machine diagrams with states as circles/ovals and transitions as curved arrows.

Example usage:

import DataViz.Layout.StateMachine (layout, StateMachine)

myMachine :: StateMachine Unit
myMachine =
  { states:
      [ { id: "s0", label: "Start", isInitial: true, isFinal: false, extra: unit }
      , { id: "s1", label: "Running", isInitial: false, isFinal: false, extra: unit }
      , { id: "s2", label: "Done", isInitial: false, isFinal: true, extra: unit }
      ]
  , transitions:
      [ { from: "s0", to: "s1", label: "begin" }
      , { from: "s1", to: "s1", label: "tick" }
      , { from: "s1", to: "s2", label: "finish" }
      ]
  }

rendered = layout myMachine
-- rendered.states contains positioned states
-- rendered.transitions contains arrow paths

Re-exports from DataViz.Layout.StateMachine.Layout

#LayoutConfig Source

type LayoutConfig = { arrowOffset :: Number, initialArrowLength :: Number, layoutRadius :: Number, margin :: Number, selfLoopRadius :: Number, stateRadiusX :: Number, stateRadiusY :: Number }

Configuration for state machine layout

#layoutWithConfig Source

layoutWithConfig :: forall extra. LayoutConfig -> (LayoutConfig -> Array (State extra) -> Array (LayoutState extra)) -> StateMachine extra -> StateMachineLayout extra

Layout with custom configuration and layout strategy

#layout Source

layout :: forall extra. StateMachine extra -> StateMachineLayout extra

Layout a state machine with default configuration using circular layout

#gridLayout Source

gridLayout :: forall extra. LayoutConfig -> Array (State extra) -> Array (LayoutState extra)

Grid layout: arrange states in rows

#defaultConfig Source

defaultConfig :: LayoutConfig

Default layout configuration

#circularLayout Source

circularLayout :: forall extra. LayoutConfig -> Array (State extra) -> Array (LayoutState extra)

Circular layout: arrange states in a circle

Re-exports from DataViz.Layout.StateMachine.Path

#transitionPathD Source

transitionPathD :: TransitionPath -> String

Generate SVG path d attribute for a transition arrow Uses quadratic bezier curve

#stateFinalRing Source

stateFinalRing :: StatePosition -> Number -> { cx :: Number, cy :: Number, rx :: Number, ry :: Number }

Get the inner ring for a final state (double circle effect) Returns slightly smaller ellipse attributes

#stateEllipse Source

stateEllipse :: StatePosition -> { cx :: Number, cy :: Number, rx :: Number, ry :: Number }

Get ellipse attributes for a state Returns { cx, cy, rx, ry } ready for SVG ellipse element

#selfLoopPathD Source

selfLoopPathD :: TransitionPath -> String

Generate SVG path for a self-loop Uses an SVG arc for a clean circular loop The arc radius is computed from the distance between start and control points

#initialArrowPathD Source

initialArrowPathD :: { angle :: Number, x :: Number, y :: Number } -> Number -> String

Generate SVG path for the initial state arrow A simple horizontal arrow pointing right

#arrowheadPathD Source

arrowheadPathD :: Number -> Number -> Number -> Number -> String

Generate SVG path for an arrowhead at the end of a transition Creates a simple triangle pointing in the direction of the arrow

Re-exports from DataViz.Layout.StateMachine.Types

#TransitionPath Source

type TransitionPath = { angle :: Number, controlX :: Number, controlY :: Number, endX :: Number, endY :: Number, isSelfLoop :: Boolean, labelX :: Number, labelY :: Number, startX :: Number, startY :: Number }

Computed path for a transition arrow Uses quadratic bezier for curved arrows

#Transition Source

type Transition = { from :: String, label :: String, to :: String }

A transition between states

#StatePosition Source

type StatePosition = { cx :: Number, cy :: Number, rx :: Number, ry :: Number }

Computed position for a state

#StateMachineLayout Source

type StateMachineLayout extra = { height :: Number, initialArrow :: { angle :: Number, x :: Number, y :: Number }, states :: Array (LayoutState extra), transitions :: Array (LayoutTransition), width :: Number }

Complete layout output ready for rendering

#StateMachine Source

type StateMachine extra = { states :: Array (State extra), transitions :: Array Transition }

Complete state machine definition

#State Source

type State extra = { extra :: extra, id :: String, isFinal :: Boolean, isInitial :: Boolean, label :: String }

A state in the state machine The extra field allows attaching arbitrary data (e.g., phantom type info)

#LayoutTransition Source

type LayoutTransition = { path :: TransitionPath, transition :: Transition }

A transition with computed layout

#LayoutState Source

type LayoutState extra = { position :: StatePosition, state :: State extra }

A state with computed layout

Modules: DataViz.Layout.Adjacency; DataViz.Layout.Adjacency.Layout; DataViz.Layout.Adjacency.Types; DataViz.Layout.Chord; DataViz.Layout.Chord.Layout; DataViz.Layout.Chord.Types; DataViz.Layout.Hierarchy.Cluster; DataViz.Layout.Hierarchy.Core; DataViz.Layout.Hierarchy.EdgeBundle; DataViz.Layout.Hierarchy.EdgeBundle.Bilink; DataViz.Layout.Hierarchy.EdgeBundle.BundleCurve; DataViz.Layout.Hierarchy.EdgeBundle.Hierarchy; DataViz.Layout.Hierarchy.EdgeBundle.RadialCluster; DataViz.Layout.Hierarchy.EdgeBundle.Types; DataViz.Layout.Hierarchy.Link; DataViz.Layout.Hierarchy.Pack; DataViz.Layout.Hierarchy.Partition; DataViz.Layout.Hierarchy.Tree; DataViz.Layout.Hierarchy.TreeStyle; DataViz.Layout.Hierarchy.Treemap; DataViz.Layout.Hierarchy.Types; DataViz.Layout.Pattern; DataViz.Layout.Pattern.Types; DataViz.Layout.Sankey.CSV; DataViz.Layout.Sankey.Compute; DataViz.Layout.Sankey.ComputeWithSteps; DataViz.Layout.Sankey.Path; DataViz.Layout.Sankey.Types; DataViz.Layout.StateMachine; DataViz.Layout.StateMachine.Layout; DataViz.Layout.StateMachine.Path; DataViz.Layout.StateMachine.Types