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>