Link improvements

browser/vue-flow/src/components/flow/link.vue

@@ -35,18 +35,48 @@ export default {
   },
   computed: {
     path () {
-      const dx = this.x2 - this.x1
-      const dy = this.y2 - this.y1
+      const x1 = this.x1 + 7
+      const y1 = this.y1
+      const x2 = this.x2 - (this.pointer ? 4 : 15.5)
+      const y2 = this.y2
+
+      const dx = x2 - x1
+      const dy = y2 - y1
+
       let s = curve
       let lineDist = 200
+      let dist = Math.sqrt(dx * dx + dy * dy)
 
-      if (Math.sqrt(dx * dx + dy * dy) < lineDist) {
-        s = Math.max(curve - (lineDist - Math.sqrt(dx * dx + dy * dy)), 0)
+      // Reduce curve with distance
+      if (dist < lineDist) {
+        s = Math.max(curve - (lineDist - dist), 0)
       }
-      s = Math.max(s, 2)
-      const x2 = this.x2 - (this.pointer ? 4 : 15.5)
-      const x1 = this.x1 + 7
-      return `M${x1},${this.y1} C${x1 + s},${this.y1} ${x2 - s},${this.y2} ${x2},${this.y2}`
+      s = Math.min(s, Math.min(dx, 100))
+
+      let ox1 = s
+      let oy1 = 0
+
+      let ox2 = -s
+      let oy2 = 0
+
+      if (dx < 0) {
+        ox1 = Math.min(-dx, 100)
+        ox2 = -Math.min(-dx, 100)
+        oy1 = Math.min(-dx, 150)
+        oy2 = -Math.min(-dx, 150)
+        if (dy < 0) {
+          oy1 = -oy1
+          oy2 = -oy2
+        }
+      }
+
+      return `
+      M${x1},${y1} 
+      C${x1 + ox1},${y1 + oy1} 
+      ${x2 + ox2},${y2 + oy2} 
+      ${x2 - 1},${y2}
+      L${x2} ${y2}
+      `
     }
   }
 }