<template>
  <label>border: <input v-model="borderWidth" number /></label>
  <div>
    <label>x1: <input v-model="x1" number /></label>
    <label>y1: <input v-model="y1" number /></label>
  </div>
  <div>
    <label>x2: <input v-model="x2" number /></label>
    <label>y2: <input v-model="y2" number /></label>
  </div>

  <svg width="800" height="400">
    <path :d="splinePath" :stroke-width="borderWidth" stroke="#D1DFE0" stroke-opacity=".4" fill="none" fill-rule="evenodd"></path>

    <path :d="testPath" stroke-width="1" stroke="#D1DFE0" fill="#D1DFE0" stroke-opacity="1" fill-opacity="0.8"></path>

  </svg>
</template>

<script type="text/ecmascript-6">
  export default {
    computed: {
      splinePath() {
        const x1 = this.x1;
        const y1 = this.y1;
        const x2 = this.x2;
        const y2 = this.y2;

        const startWidth = 10;
        const borderWidth = this.borderWidth;
        const part = Math.round((x2 - x1) / 3);

        if (Math.abs(y1 - y2) <= 1) {
          return `M ${x1},${y1 + borderWidth / 2} L ${x2},${y2 + borderWidth / 2}`;
        }

        return `M ${x1},${y1 + borderWidth / 2} L ${x1 + startWidth},${y1 + borderWidth / 2} C ${x1 + part + startWidth},${y1 + borderWidth / 2} ${ x2 - part - startWidth },${y2 + borderWidth / 2} ${ x2 - startWidth },${y2 + borderWidth / 2} L ${x2},${y2 + borderWidth / 2}`;
      },

      testPath() {
        const x1 = this.x1;
        const y1 = this.y1;
        const x2 = this.x2;
        const y2 = this.y2;

        const startWidth = 10;
        const borderWidth = this.borderWidth;
        const part = Math.round((x2 - x1) / 3);

        if (Math.abs(y1 - y2) <= 1) {
          return `M ${x1},${y1 + borderWidth / 2} L ${x2},${y2 + borderWidth / 2}`;
        }

        return `M ${x1},${y1}
                L ${x1 + startWidth},${y1}
                C ${x1 + part + startWidth},${y1} ${x1 + part + startWidth},${y2} ${x2 - startWidth},${y2}
                L ${x2},${y2} ${x2},${y2 + borderWidth} ${x2 - startWidth},${y2 + borderWidth}
                C ${x1 + part + startWidth},${y2} ${x1 + part + startWidth},${y1 + borderWidth} ${x1 + startWidth},${y1 + borderWidth}
                L ${x1},${y1 + borderWidth} Z`;
      }
    },

    data() {
      return {
        borderWidth: 20,
        x1: 0,
        y1: 0,
        x2: 275,
        y2: 175
      };
    }
  };
</script>
