# All files / src/lib layout.js

100% Statements 20/20
100% Branches 10/10
100% Functions 8/8
100% Lines 20/20

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75

    15x
    15x

    19x
    26x
    26x
    26x
    26x

    19x

    14x
    19x
    19x

    19x
    12x

    19x

    15x
    12x
    12x

    15x

    11x
    11x

     import { graphlib, layout } from 'dagre';

    export default class Layout {

        constructor() {
            this._graph = new graphlib.Graph();
            this._graph.setGraph({ rankdir: 'LR' });
        }

        setStates(states) {
            for (const state of states) {
                const width = state.width ? state.width : 20;
                const height = state.height ? state.height : 10;
                const stylingClass = state.stylingClass;
                this._graph.setNode(state.id, { label: state.label, width, height, stylingClass });
            }
            layout(this._graph);
        }

        get states() {
            return this._graph.nodes().map(id => {
                const node = this._graph.node(id);
                return {
                    id,
                    label: node.label,
                    center: {
                        x: node.x,
                        y: node.y,
                    },
                    stylingClass: node.stylingClass,
                };
            });
        }

        setTransitions(transitions) {
            for (const transition of transitions) {
                this._graph.setEdge(transition.source, transition.target, {
                    id: transition.id,
                    label: transition.label ? transition.label : '',
                    width: transition.width ? transition.width : 20,
                    height: transition.height ? transition.height : 10,
                    labelpos: 'c',
                    stylingClass: transition.stylingClass,
                });
            }
            layout(this._graph);
        }

        get transitions() {
            const transitions = this._graph.edges().map(ids => {
                const data = this._graph.edge(ids);
                return {
                    id: data.id,
                    path: data.points,
                    label: {
                        point: {
                            x: data.x,
                            y: data.y,
                        },
                        text: data.label,
                    },
                    stylingClass: data.stylingClass,
                };
            });
            return transitions;
        }

        get size() {
            const graph = this._graph.graph();
            return { width: graph.width, height: graph.height };
        }

    }