# All files / src/components WorkflowChart.vue

100% Statements 12/12
100% Branches 0/0
100% Functions 1/1
100% Lines 12/12

    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
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94

    1x
    1x
    1x
    1x
    1x

    9x

    15x

    15x

    15x

    4x

    11x

    15x

     <template>
        <div class="workflow-chart">
            <state
                v-for="state in layout.states"
                :id="state.id"
                :ref="state.id"
                :key="state.id"
                :label="state.label"
                :center="state.center"
                :stylingClass="state.stylingClass"
                @click="$emit('state-click', $event)" />
            <chart-transition
                v-for="transition in layout.transitions"
                :id="transition.id"
                :ref="transition.id"
                :key="transition.id"
                :transitionPath="transition.path"
                :transitionPathRadius="transitionPathRadius"
                :label="transition.label"
                :stylingClass="transition.stylingClass"
                @click="$emit('transition-click', $event)" />
        </div>
    </template>

    <script>
    import Transition from './Transition.vue';
    import State from './State.vue';
    import Layout from '../lib/layout';
    import Workflow from '../lib/workflow';
    import { size as sizeCalculation } from '../lib/DivElement';

    export default {
        name: 'WorkflowChart',
        components: {
            State,
            chartTransition: Transition,
        },
        props: {
            transitions: {
                type: Array,
                required: true,
            },
            states: {
                type: Array,
                required: true,
            },
            stateSemantics: {
                type: Array,
                default: () => [],
            },
            transitionPathRadius: {
                type: Number,
                default: 12,
            },
            orientation: {
                type: String,
                default: 'horizontal',
            },
        },
        computed: {
            layout() {
                const workflow = new Workflow({ states: this.states, transitions: this.transitions });

                const workflowForLayouting = workflow
                    .addStylingClassesFor(this.stateSemantics)
                    .addLabelSize(sizeCalculation);

                return Layout.from(workflowForLayouting, this.orientation);
            },
        },
        watch: {
            layout() {
                this.emitSize();
            },
        },
        mounted() {
            this.emitSize();
        },
        methods: {
            emitSize() {
                this.$emit('size-change', this.layout.size);
            },
        },
    };
    </script>
    <style lang='scss'>
    @import '../styling.scss';
    </style>
    <style lang='scss' scoped>
    div {
        position: absolute;
    }
    </style>