feat(drd): add padding when getting orientation

* padding helps prevent ugly connections
bpmn-io · Apr 2, 2020 · d232ec8 · d232ec8
1 parent 0bd1dc9
commit d232ec8
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);