# All files / src/components TransitionPath.vue

100% Statements 14/14
100% Branches 4/4
100% Functions 2/2
100% Lines 14/14

    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
    95
    96

    3x

    20x
    20x

    20x

    21x

    90x

    90x

    20x

    20x

    2x

    44x
    44x
    44x
    44x

     <template>
        <svg
            :width="width"
            :height="height">
            <g>
                <defs>
                    <marker
                        :id="'markerArrow'+_uid"
                        viewBox="0 0 10 10"
                        markerWidth="3"
                        markerHeight="3"
                        refX="5"
                        refY="5"
                        orient="auto-start-reverse">
                        <path
                            class="vue-workflow-chart-transition-arrow"
                            :class="stylingClassArrow"
                            d="M 0 0 L 10 5 L 0 10 z" />
                    </marker>
                </defs>
                <path
                    ref="transitionPath"
                    :d="svgPath"
                    :marker-end="'url(#markerArrow'+_uid+')'"
                    class="vue-workflow-chart-transition-path"
                    :class="stylingClassPath" />
            </g>
        </svg>
    </template>

    <script>
    import Path from '../lib/PathRounder.js';

    export default {
        name: 'TransitionPath',
        props: {
            path: {
                type: Array,
                required: true,
            },
            radius: {
                type: Number,
                default: 0,
            },
            stylingClass: {
                type: String,
                default: '',
            },
        },
        data() {
            const pathCreator = new Path(this.radius);
            pathCreator.setPath(this.path);

            return { pathCreator };
        },
        computed: {
            svgPath() {
                return this.pathCreator.svgPath;
            },
            width() {
                return this.lengthIn(point => point.x);
            },
            height() {
                return this.lengthIn(point => point.y);
            },
            stylingClassPath() {
                return (this.stylingClass) ? `vue-workflow-chart-transition-path-${this.stylingClass}` : "";
            },
            stylingClassArrow() {
                return (this.stylingClass) ? `vue-workflow-chart-transition-arrow-${this.stylingClass}` : "";
            },
        },
        watch: {
            path() {
                this.pathCreator.setPath(this.path);
            },
        },
        methods: {
            lengthIn(coordinate) {
                const values = this.path.map(coordinate);
                const max = Math.max(...values);
                const min = 0;
                return `${max - min + 20}px`;
            },
        },
    };
    </script>

    <style lang="scss" scoped>
    svg {
        display: inline-block;
        position: absolute;
    }
    </style>