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">
                    <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>