From d232ec8b85790a6011e162eed677284ee97b77a4 Mon Sep 17 00:00:00 2001
From: Philipp Fromme <philippfromme@outlook.com>
Date: Thu, 2 Apr 2020 09:23:11 +0200
Subject: [PATCH] feat(drd): add padding when getting orientation

* padding helps prevent ugly connections
---
 .../src/features/modeling/DrdLayouter.js          |  4 +++-
 .../modeling/behavior/LayoutConnectionBehavior.js | 15 +++++++++------
 .../src/features/snapping/DrdBendpointSnapping.js |  4 +++-
 .../src/features/snapping/DrdConnectSnapping.js   |  4 +++-
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/dmn-js-drd/src/features/modeling/DrdLayouter.js b/packages/dmn-js-drd/src/features/modeling/DrdLayouter.js
index 3c7ca1c70..af23cff8f 100644
--- a/packages/dmn-js-drd/src/features/modeling/DrdLayouter.js
+++ b/packages/dmn-js-drd/src/features/modeling/DrdLayouter.js
@@ -9,6 +9,8 @@ import {
 
 import { is } from 'dmn-js-shared/lib/util/ModelUtil';
 
+export var ORIENTATION_PADDING = 25;
+
 var ADDITIONAL_WAYPOINT_DISTANCE = 20;
 
 
@@ -33,7 +35,7 @@ DrdLayouter.prototype.layoutConnection = function(connection, hints) {
       waypoints = hints.waypoints || connection.waypoints || [],
       connectionStart = hints.connectionStart,
       connectionEnd = hints.connectionEnd,
-      orientation = getOrientation(source, target);
+      orientation = getOrientation(source, target, ORIENTATION_PADDING);
 
   if (!connectionStart) {
     connectionStart = getConnectionDocking(waypoints[ 0 ], source);
diff --git a/packages/dmn-js-drd/src/features/modeling/behavior/LayoutConnectionBehavior.js b/packages/dmn-js-drd/src/features/modeling/behavior/LayoutConnectionBehavior.js
index bbc831dfb..c0a4d83d0 100644
--- a/packages/dmn-js-drd/src/features/modeling/behavior/LayoutConnectionBehavior.js
+++ b/packages/dmn-js-drd/src/features/modeling/behavior/LayoutConnectionBehavior.js
@@ -13,6 +13,8 @@ import {
   getOrientation
 } from 'diagram-js/lib/layout/LayoutUtil';
 
+import { ORIENTATION_PADDING } from '../DrdLayouter';
+
 import {
   assign,
   forEach
@@ -47,7 +49,7 @@ export default function LayoutConnectionBehavior(injector, layouter, modeling, r
       return;
     }
 
-    var orientation = getOrientation(source, target);
+    var orientation = getOrientation(source, target, ORIENTATION_PADDING);
 
     if (!context.hints) {
       context.hints = {};
@@ -128,11 +130,11 @@ export default function LayoutConnectionBehavior(injector, layouter, modeling, r
       return;
     }
 
-    var orientation = getOrientation(source, target);
+    var orientation = getOrientation(source, target, ORIENTATION_PADDING);
 
     // update all information requirements with same orientation
     var informationRequirements = target.incoming.filter(incoming => {
-      var incomingOrientation = getOrientation(incoming.source, incoming.target);
+      var incomingOrientation = getOrientation(incoming.source, incoming.target, ORIENTATION_PADDING);
 
       return is(incoming, 'dmn:InformationRequirement')
         && isSameOrientation(incomingOrientation, orientation);
@@ -155,11 +157,11 @@ export default function LayoutConnectionBehavior(injector, layouter, modeling, r
       return;
     }
 
-    var orientation = getOrientation(source, target);
+    var orientation = getOrientation(source, target, ORIENTATION_PADDING);
 
     // update all information requirements with same orientation except reconnected
     var informationRequirements = target.incoming.filter(incoming => {
-      var incomingOrientation = getOrientation(incoming.source, incoming.target);
+      var incomingOrientation = getOrientation(incoming.source, incoming.target, ORIENTATION_PADDING);
 
       return incoming !== connection
         && is(incoming, 'dmn:InformationRequirement')
@@ -323,7 +325,8 @@ function getInformationRequirementsByOrientation(target, informationRequirements
   var incomingInformationRequirementsByOrientation = {};
 
   informationRequirements.forEach(function(incoming) {
-    var orientation = getOrientation(incoming.source, target).split('-').shift();
+    var orientation =
+      getOrientation(incoming.source, target, ORIENTATION_PADDING).split('-').shift();
 
     if (!incomingInformationRequirementsByOrientation[ orientation ]) {
       incomingInformationRequirementsByOrientation[ orientation ] = [];
diff --git a/packages/dmn-js-drd/src/features/snapping/DrdBendpointSnapping.js b/packages/dmn-js-drd/src/features/snapping/DrdBendpointSnapping.js
index 94d13e882..ba9c3dd6d 100644
--- a/packages/dmn-js-drd/src/features/snapping/DrdBendpointSnapping.js
+++ b/packages/dmn-js-drd/src/features/snapping/DrdBendpointSnapping.js
@@ -4,6 +4,8 @@ import {
   getOrientation
 } from 'diagram-js/lib/layout/LayoutUtil';
 
+import { ORIENTATION_PADDING } from '../modeling/DrdLayouter';
+
 import {
   isAny
 } from 'dmn-js-shared/lib/util/ModelUtil';
@@ -47,7 +49,7 @@ export default function DrdBendpointSnapping(eventBus) {
 
     var reconnect = type === RECONNECT_START || type === RECONNECT_END;
 
-    var orientation = getOrientation(source, target);
+    var orientation = getOrientation(source, target, ORIENTATION_PADDING);
 
     if (reconnect && hover === source) {
 
diff --git a/packages/dmn-js-drd/src/features/snapping/DrdConnectSnapping.js b/packages/dmn-js-drd/src/features/snapping/DrdConnectSnapping.js
index 992bcb573..2aef1bd45 100644
--- a/packages/dmn-js-drd/src/features/snapping/DrdConnectSnapping.js
+++ b/packages/dmn-js-drd/src/features/snapping/DrdConnectSnapping.js
@@ -4,6 +4,8 @@ import {
   getOrientation
 } from 'diagram-js/lib/layout/LayoutUtil';
 
+import { ORIENTATION_PADDING } from '../modeling/DrdLayouter';
+
 var LOW_PRIORITY = 250;
 
 
@@ -20,7 +22,7 @@ export default function DrdConnectSnapping(eventBus) {
         target = context.target;
 
     if (canExecute && canExecute.type === 'dmn:InformationRequirement') {
-      var orientation = getOrientation(source, target);
+      var orientation = getOrientation(source, target, ORIENTATION_PADDING);
 
       // snap source
       context.connectionStart = getMid(source);