<template>
    <line :x1="ox1" :y1="oy1" :x2="ox2" :y2="oy2"></line>
</template>

<script>
export default {
    props:{
        x1: Number, y1: Number, x2: Number, y2: Number,
        o1: Number, o2: Number
    },
    data(){
        return {
            ox1:0, ox2:0, oy1:0, oy2:0
        }
    },
    mounted(){
        this.calc();
        this.$watch(
            (vm) => (vm.x1, vm.y1, vm.x2, vm.y2, vm.o1, vm.o2, Date.now()),
            this.calc
        )
    },
    methods:{
        calc: function(){
            let dx = this.x2 - this.x1, dy = this.y2 - this.y1;
            let a = Math.atan2(dy, dx);
            let h = Math.sqrt(dx*dx + dy*dy);
            this.ox1 = this.x1 + this.o1 * Math.cos(a);
            this.oy1 = this.y1 + this.o1 * Math.sin(a);
            this.ox2 = this.x1 + (h-this.o2) * Math.cos(a);
            this.oy2 = this.y1 + (h-this.o2) * Math.sin(a);
        }
    }
}
</script>