<template>
  <g
    class="flow-link"
    :class="{'flow-link--pointer':pointer}"
    @click="$emit('click',$event)">
    <path
      class="flow-link__area"
      :d="path"
    />
    <path
      class="flow-link__visible"
      :d="path"
    />

  </g>
</template>
<script>
const curve = 100
export default {
  name: 'FlowLink',
  props: {
    x1: {type: Number, default: 0},
    y1: {type: Number, default: 0},
    x2: {type: Number, default: 0},
    y2: {type: Number, default: 0},
    pointer: {type: Boolean, default: false}
  },
  computed: {
    path () {
      const dx = this.x2 - this.x1
      const dy = this.y2 - this.y1
      let s = curve
      let lineDist = 200

      if (Math.sqrt(dx * dx + dy * dy) < lineDist) {
        s = Math.max(curve - (lineDist - Math.sqrt(dx * dx + dy * dy)), 0)
      }
      s = Math.max(s, 2)
      const x2 = this.x2 - (this.pointer ? 4 : 15.5)
      const x1 = this.x1 + 4
      return `M${x1},${this.y1} C${x1 + s},${this.y1} ${x2 - s},${this.y2} ${x2},${this.y2}`
    }
  }
}
</script>
<style>
.flow-view:not(.activity) .flow-link {
  cursor:pointer;
}

.flow-link__head{
  fill:#333;
}

.flow-link {
  stroke:#333;
}

.flow-link .flow-link__area {
  stroke-width:20;
  stroke: transparent;
  fill: transparent;
}

.flow-link .flow-link__visible{
  stroke-width:2;
  fill: transparent;
  marker-end:url(#head);
}

.flow-link--pointer {
  pointer-events:none;
}
</style>
