@metadev/daga 4.2.7 → 4.2.9

package/index.esm.js

@@ -381,7 +381,20 @@ const linePath = (shape, points, startDirection, endDirection, minimumDistanceBe
         result += `M ${points[0][0]} ${points[0][1]}`;
         for (let i = 1; i < points.length; ++i) {
           if (i + 1 >= points.length) {
-            nextDirection = endDirection;
+            switch (endDirection) {
+              case Side.Bottom:
+                nextDirection = Side.Top;
+                break;
+              case Side.Top:
+                nextDirection = Side.Bottom;
+                break;
+              case Side.Right:
+                nextDirection = Side.Left;
+                break;
+              case Side.Left:
+                nextDirection = Side.Right;
+                break;
+            }
           } else {
             if (Math.abs(points[i][0] - points[i - 1][0]) < Math.abs(points[i][1] - points[i - 1][1])) {
               if (points[i][1] > points[i - 1][1]) {
@@ -417,16 +430,16 @@ const linePath = (shape, points, startDirection, endDirection, minimumDistanceBe
             }
             if (nextDirection !== undefined) {
               switch (nextDirection) {
-                case Side.Bottom:
+                case Side.Top:
                   controlPoint2 = `${points[i][0]} ${points[i][1] + controlPointDistance}`;
                   break;
-                case Side.Top:
+                case Side.Bottom:
                   controlPoint2 = `${points[i][0]} ${points[i][1] - controlPointDistance}`;
                   break;
-                case Side.Right:
+                case Side.Left:
                   controlPoint2 = `${points[i][0] + controlPointDistance} ${points[i][1]}`;
                   break;
-                case Side.Left:
+                case Side.Right:
                   controlPoint2 = `${points[i][0] - controlPointDistance} ${points[i][1]}`;
                   break;
               }
@@ -439,16 +452,16 @@ const linePath = (shape, points, startDirection, endDirection, minimumDistanceBe
               let controlPoint = '';
               const controlPointDistance = (Math.abs(points[i][0] - points[i - 1][0]) + Math.abs(points[i][1] - points[i - 1][1])) / 2;
               switch (nextDirection) {
-                case Side.Bottom:
+                case Side.Top:
                   controlPoint = `${points[i][0]} ${points[i][1] + controlPointDistance}`;
                   break;
-                case Side.Top:
+                case Side.Bottom:
                   controlPoint = `${points[i][0]} ${points[i][1] - controlPointDistance}`;
                   break;
-                case Side.Right:
+                case Side.Left:
                   controlPoint = `${points[i][0] + controlPointDistance} ${points[i][1]}`;
                   break;
-                case Side.Left:
+                case Side.Right:
                   controlPoint = `${points[i][0] - controlPointDistance} ${points[i][1]}`;
                   break;
               }
@@ -461,152 +474,443 @@ const linePath = (shape, points, startDirection, endDirection, minimumDistanceBe
         }
         break;
       case LineShape.Square:
+        currentDirection = startDirection;
         result += `M ${points[0][0]} ${points[0][1]}`;
-        if (startDirection) {
-          switch (startDirection) {
-            case Side.Bottom:
-              points.splice(1, 0, [points[0][0], points[0][1] + minimumDistanceBeforeTurn]);
-              break;
-            case Side.Top:
-              points.splice(1, 0, [points[0][0], points[0][1] - minimumDistanceBeforeTurn]);
-              break;
-            case Side.Right:
-              points.splice(1, 0, [points[0][0] + minimumDistanceBeforeTurn, points[0][1]]);
-              break;
-            case Side.Left:
-              points.splice(1, 0, [points[0][0] - minimumDistanceBeforeTurn, points[0][1]]);
-              break;
-          }
-        }
-        if (endDirection) {
-          switch (endDirection) {
-            case Side.Bottom:
-              points.splice(points.length - 1, 0, [points[points.length - 1][0], points[points.length - 1][1] + minimumDistanceBeforeTurn]);
-              break;
-            case Side.Top:
-              points.splice(points.length - 1, 0, [points[points.length - 1][0], points[points.length - 1][1] - minimumDistanceBeforeTurn]);
-              break;
-            case Side.Right:
-              points.splice(points.length - 1, 0, [points[points.length - 1][0] + minimumDistanceBeforeTurn, points[points.length - 1][1]]);
-              break;
-            case Side.Left:
-              points.splice(points.length - 1, 0, [points[points.length - 1][0] - minimumDistanceBeforeTurn, points[points.length - 1][1]]);
-              break;
-          }
-        }
         for (let i = 1; i < points.length; ++i) {
-          if (currentDirection !== undefined) {
-            switch (currentDirection) {
+          if (i + 1 >= points.length) {
+            switch (endDirection) {
               case Side.Bottom:
-                if (points[i][1] < points[i - 1][1] && points[i][0] !== points[i - 1][0]) {
-                  // next point is behind, we turn around
-                  result += ` H ${points[i][0]}`;
-                  result += ` V ${points[i][1]}`;
-                  currentDirection = Side.Top;
-                } else if (points[i][1] < points[i - 1][1] && points[i][0] === points[i - 1][0]) {
-                  // next point is behind on the same line, we turn around
-                  result += ` H ${points[i][0] + minimumDistanceBeforeTurn}`;
-                  result += ` V ${points[i][1]}`;
-                  result += ` H ${points[i][0]}`;
-                  currentDirection = Side.Left;
-                } else if (points[i][1] === points[i - 1][1] && points[i][0] !== points[i - 1][0]) {
-                  // next point is perpendicular to us
-                  result += ` H ${points[i][0]}`;
-                  currentDirection = points[i][0] > points[i - 1][0] ? Side.Right : Side.Left;
-                } else if (points[i][1] > points[i - 1][1] && points[i][0] !== points[i - 1][0]) {
-                  // next point is after us, we turn and continue
-                  result += ` H ${points[i][0]}`;
-                  result += ` V ${points[i][1]}`;
-                } else if (points[i][1] > points[i - 1][1] && points[i][0] === points[i - 1][0]) {
-                  // next point is in the same direction, we continue straight
-                  result += ` V ${points[i][1]}`;
-                }
+                nextDirection = Side.Top;
                 break;
               case Side.Top:
-                if (points[i][1] > points[i - 1][1] && points[i][0] !== points[i - 1][0]) {
-                  // next point is behind, we turn around
-                  result += ` H ${points[i][0]}`;
-                  result += ` V ${points[i][1]}`;
-                  currentDirection = Side.Bottom;
-                } else if (points[i][1] > points[i - 1][1] && points[i][0] === points[i - 1][0]) {
-                  // next point is behind on the same line, we turn around
-                  result += ` H ${points[i][0] - minimumDistanceBeforeTurn}`;
-                  result += ` V ${points[i][1]}`;
-                  result += ` H ${points[i][0]}`;
-                  currentDirection = Side.Right;
-                } else if (points[i][1] === points[i - 1][1] && points[i][0] !== points[i - 1][0]) {
-                  // next point is perpendicular to us
-                  result += ` H ${points[i][0]}`;
-                  currentDirection = points[i][0] > points[i - 1][0] ? Side.Right : Side.Left;
-                } else if (points[i][1] < points[i - 1][1] && points[i][0] !== points[i - 1][0]) {
-                  // next point is after us, we turn and continue
-                  result += ` H ${points[i][0]}`;
-                  result += ` V ${points[i][1]}`;
-                } else if (points[i][1] < points[i - 1][1] && points[i][0] === points[i - 1][0]) {
-                  // next point is in the same direction, we continue straight
-                  result += ` V ${points[i][1]}`;
-                }
+                nextDirection = Side.Bottom;
                 break;
               case Side.Right:
-                if (points[i][0] < points[i - 1][0] && points[i][1] !== points[i - 1][1]) {
-                  // next point is behind, we turn around
-                  result += ` V ${points[i][1]}`;
-                  result += ` H ${points[i][0]}`;
-                  currentDirection = Side.Left;
-                } else if (points[i][0] < points[i - 1][0] && points[i][1] === points[i - 1][1]) {
-                  // next point is behind on the same line, we turn around
-                  result += ` V ${points[i][1] + minimumDistanceBeforeTurn}`;
-                  result += ` H ${points[i][0]}`;
-                  result += ` V ${points[i][1]}`;
-                  currentDirection = Side.Top;
-                } else if (points[i][0] === points[i - 1][0] && points[i][1] !== points[i - 1][1]) {
-                  // next point is perpendicular to us
-                  result += ` V ${points[i][1]}`;
-                  currentDirection = points[i][1] > points[i - 1][1] ? Side.Bottom : Side.Top;
-                } else if (points[i][0] > points[i - 1][0] && points[i][1] !== points[i - 1][1]) {
-                  // next point is after us, we turn and continue
-                  result += ` V ${points[i][1]}`;
-                  result += ` H ${points[i][0]}`;
-                } else if (points[i][0] > points[i - 1][0] && points[i][1] === points[i - 1][1]) {
-                  // next point is in the same direction, we continue straight
-                  result += ` H ${points[i][0]}`;
-                }
+                nextDirection = Side.Left;
                 break;
               case Side.Left:
-                if (points[i][0] > points[i - 1][0] && points[i][1] !== points[i - 1][1]) {
-                  // next point is behind, we turn around
-                  result += ` V ${points[i][1]}`;
-                  result += ` H ${points[i][0]}`;
-                  currentDirection = Side.Right;
-                } else if (points[i][0] > points[i - 1][0] && points[i][1] === points[i - 1][1]) {
-                  // next point is behind on the same line, we turn around
-                  result += ` V ${points[i][1] - minimumDistanceBeforeTurn}`;
+                nextDirection = Side.Right;
+                break;
+            }
+          }
+          switch (currentDirection) {
+            case Side.Bottom:
+              switch (nextDirection) {
+                case Side.Bottom:
+                  if (points[i][1] > points[i - 1][1]) {
+                    if (points[i][0] !== points[i - 1][0]) {
+                      result += ` V ${(points[i][1] + points[i - 1][1]) / 2}`;
+                      result += ` H ${points[i][0]}`;
+                      result += ` V ${points[i][1]}`;
+                    } else {
+                      result += ` V ${points[i][1]}`;
+                    }
+                    currentDirection = nextDirection;
+                  } else {
+                    if (points[i][0] > points[i - 1][0]) {
+                      result += ` V ${points[i - 1][1] + minimumDistanceBeforeTurn}`;
+                      result += ` H ${Math.max(points[i - 1][0], points[i][0]) + minimumDistanceBeforeTurn}`;
+                      result += ` V ${points[i][1] - minimumDistanceBeforeTurn}`;
+                      result += ` H ${points[i][0]}`;
+                      result += ` V ${points[i][1]}`;
+                    } else {
+                      result += ` V ${points[i - 1][1] + minimumDistanceBeforeTurn}`;
+                      result += ` H ${Math.min(points[i - 1][0], points[i][0]) - minimumDistanceBeforeTurn}`;
+                      result += ` V ${points[i][1] - minimumDistanceBeforeTurn}`;
+                      result += ` H ${points[i][0]}`;
+                      result += ` V ${points[i][1]}`;
+                    }
+                  }
+                  break;
+                case Side.Top:
+                  result += ` V ${Math.max(points[i - 1][1], points[i][1]) + minimumDistanceBeforeTurn}`;
                   result += ` H ${points[i][0]}`;
                   result += ` V ${points[i][1]}`;
-                  currentDirection = Side.Bottom;
-                } else if (points[i][0] === points[i - 1][0] && points[i][1] !== points[i - 1][1]) {
-                  // next point is perpendicular to us
+                  break;
+                case Side.Left:
+                  if (points[i][1] > points[i - 1][1] + minimumDistanceBeforeTurn) {
+                    if (points[i][0] < points[i - 1][0] - minimumDistanceBeforeTurn) {
+                      result += ` V ${points[i][1]}`;
+                      result += ` H ${points[i][0]}`;
+                    } else {
+                      result += ` V ${(points[i - 1][1] + points[i][1]) / 2}`;
+                      result += ` H ${points[i][0] + minimumDistanceBeforeTurn}`;
+                      result += ` V ${points[i][1]}`;
+                      result += ` H ${points[i][0]}`;
+                    }
+                  } else {
+                    if (points[i][0] < points[i - 1][0] - minimumDistanceBeforeTurn) {
+                      result += ` V ${points[i - 1][1] + minimumDistanceBeforeTurn}`;
+                      result += ` H ${(points[i - 1][0] + points[i][0]) / 2}`;
+                      result += ` V ${points[i][1]}`;
+                      result += ` H ${points[i][0]}`;
+                    } else {
+                      result += ` V ${points[i - 1][1] + minimumDistanceBeforeTurn}`;
+                      result += ` H ${points[i][0] + minimumDistanceBeforeTurn}`;
+                      result += ` V ${points[i][1]}`;
+                      result += ` H ${points[i][0]}`;
+                    }
+                  }
+                  break;
+                case Side.Right:
+                  if (points[i][1] > points[i - 1][1] + minimumDistanceBeforeTurn) {
+                    if (points[i][0] > points[i - 1][0] + minimumDistanceBeforeTurn) {
+                      result += ` V ${points[i][1]}`;
+                      result += ` H ${points[i][0]}`;
+                    } else {
+                      result += ` V ${(points[i - 1][1] + points[i][1]) / 2}`;
+                      result += ` H ${points[i][0] - minimumDistanceBeforeTurn}`;
+                      result += ` V ${points[i][1]}`;
+                      result += ` H ${points[i][0]}`;
+                    }
+                  } else {
+                    if (points[i][0] > points[i - 1][0] + minimumDistanceBeforeTurn) {
+                      result += ` V ${points[i - 1][1] + minimumDistanceBeforeTurn}`;
+                      result += ` H ${(points[i - 1][0] + points[i][0]) / 2}`;
+                      result += ` V ${points[i][1]}`;
+                      result += ` H ${points[i][0]}`;
+                    } else {
+                      result += ` V ${points[i - 1][1] + minimumDistanceBeforeTurn}`;
+                      result += ` H ${points[i][0] - minimumDistanceBeforeTurn}`;
+                      result += ` V ${points[i][1]}`;
+                      result += ` H ${points[i][0]}`;
+                    }
+                  }
+                  break;
+                default:
+                  if (points[i][1] < points[i - 1][1] + minimumDistanceBeforeTurn) {
+                    result += ` V ${points[i - 1][1] + minimumDistanceBeforeTurn}`;
+                    if (points[i][0] !== points[i - 1][0]) {
+                      result += ` H ${points[i][0]}`;
+                    }
+                    result += ` V ${points[i][1]}`;
+                    currentDirection = Side.Top;
+                  } else {
+                    result += ` V ${points[i][1]}`;
+                    currentDirection = Side.Bottom;
+                    if (points[i][0] !== points[i - 1][0]) {
+                      result += ` H ${points[i][0]}`;
+                      currentDirection = points[i][0] > points[i - 1][0] ? Side.Right : Side.Left;
+                    }
+                  }
+                  break;
+              }
+              break;
+            case Side.Top:
+              switch (nextDirection) {
+                case Side.Top:
+                  if (points[i][1] < points[i - 1][1]) {
+                    if (points[i][0] !== points[i - 1][0]) {
+                      result += ` V ${(points[i][1] + points[i - 1][1]) / 2}`;
+                      result += ` H ${points[i][0]}`;
+                      result += ` V ${points[i][1]}`;
+                    } else {
+                      result += ` V ${points[i][1]}`;
+                    }
+                    currentDirection = nextDirection;
+                  } else {
+                    if (points[i][0] < points[i - 1][0]) {
+                      result += ` V ${points[i - 1][1] - minimumDistanceBeforeTurn}`;
+                      result += ` H ${Math.min(points[i - 1][0], points[i][0]) - minimumDistanceBeforeTurn}`;
+                      result += ` V ${points[i][1] + minimumDistanceBeforeTurn}`;
+                      result += ` H ${points[i][0]}`;
+                      result += ` V ${points[i][1]}`;
+                    } else {
+                      result += ` V ${points[i - 1][1] - minimumDistanceBeforeTurn}`;
+                      result += ` H ${Math.max(points[i - 1][0], points[i][0]) + minimumDistanceBeforeTurn}`;
+                      result += ` V ${points[i][1] + minimumDistanceBeforeTurn}`;
+                      result += ` H ${points[i][0]}`;
+                      result += ` V ${points[i][1]}`;
+                    }
+                  }
+                  break;
+                case Side.Bottom:
+                  result += ` V ${Math.min(points[i - 1][1], points[i][1]) - minimumDistanceBeforeTurn}`;
+                  result += ` H ${points[i][0]}`;
                   result += ` V ${points[i][1]}`;
-                  currentDirection = points[i][1] > points[i - 1][1] ? Side.Bottom : Side.Top;
-                } else if (points[i][0] < points[i - 1][0] && points[i][1] !== points[i - 1][1]) {
-                  // next point is after us, we turn and continue
+                  break;
+                case Side.Right:
+                  if (points[i][1] < points[i - 1][1] - minimumDistanceBeforeTurn) {
+                    if (points[i][0] > points[i - 1][0] + minimumDistanceBeforeTurn) {
+                      result += ` V ${points[i][1]}`;
+                      result += ` H ${points[i][0]}`;
+                    } else {
+                      result += ` V ${(points[i - 1][1] + points[i][1]) / 2}`;
+                      result += ` H ${points[i][0] - minimumDistanceBeforeTurn}`;
+                      result += ` V ${points[i][1]}`;
+                      result += ` H ${points[i][0]}`;
+                    }
+                  } else {
+                    if (points[i][0] > points[i - 1][0] + minimumDistanceBeforeTurn) {
+                      result += ` V ${points[i - 1][1] - minimumDistanceBeforeTurn}`;
+                      result += ` H ${(points[i - 1][0] + points[i][0]) / 2}`;
+                      result += ` V ${points[i][1]}`;
+                      result += ` H ${points[i][0]}`;
+                    } else {
+                      result += ` V ${points[i - 1][1] - minimumDistanceBeforeTurn}`;
+                      result += ` H ${points[i][0] - minimumDistanceBeforeTurn}`;
+                      result += ` V ${points[i][1]}`;
+                      result += ` H ${points[i][0]}`;
+                    }
+                  }
+                  break;
+                case Side.Left:
+                  if (points[i][1] < points[i - 1][1] - minimumDistanceBeforeTurn) {
+                    if (points[i][0] < points[i - 1][0] - minimumDistanceBeforeTurn) {
+                      result += ` V ${points[i][1]}`;
+                      result += ` H ${points[i][0]}`;
+                    } else {
+                      result += ` V ${(points[i - 1][1] + points[i][1]) / 2}`;
+                      result += ` H ${points[i][0] + minimumDistanceBeforeTurn}`;
+                      result += ` V ${points[i][1]}`;
+                      result += ` H ${points[i][0]}`;
+                    }
+                  } else {
+                    if (points[i][0] < points[i - 1][0] - minimumDistanceBeforeTurn) {
+                      result += ` V ${points[i - 1][1] - minimumDistanceBeforeTurn}`;
+                      result += ` H ${(points[i - 1][0] + points[i][0]) / 2}`;
+                      result += ` V ${points[i][1]}`;
+                      result += ` H ${points[i][0]}`;
+                    } else {
+                      result += ` V ${points[i - 1][1] - minimumDistanceBeforeTurn}`;
+                      result += ` H ${points[i][0] + minimumDistanceBeforeTurn}`;
+                      result += ` V ${points[i][1]}`;
+                      result += ` H ${points[i][0]}`;
+                    }
+                  }
+                  break;
+                default:
+                  if (points[i][1] > points[i - 1][1] - minimumDistanceBeforeTurn) {
+                    result += ` V ${points[i - 1][1] - minimumDistanceBeforeTurn}`;
+                    if (points[i][0] !== points[i - 1][0]) {
+                      result += ` H ${points[i][0]}`;
+                    }
+                    result += ` V ${points[i][1]}`;
+                    currentDirection = Side.Bottom;
+                  } else {
+                    result += ` V ${points[i][1]}`;
+                    currentDirection = Side.Top;
+                    if (points[i][0] !== points[i - 1][0]) {
+                      result += ` H ${points[i][0]}`;
+                      currentDirection = points[i][0] > points[i - 1][0] ? Side.Right : Side.Left;
+                    }
+                  }
+                  break;
+              }
+              break;
+            case Side.Left:
+              switch (nextDirection) {
+                case Side.Left:
+                  if (points[i][0] < points[i - 1][0]) {
+                    if (points[i][1] !== points[i - 1][1]) {
+                      result += ` H ${(points[i][0] + points[i - 1][0]) / 2}`;
+                      result += ` V ${points[i][1]}`;
+                      result += ` H ${points[i][0]}`;
+                    } else {
+                      result += ` H ${points[i][0]}`;
+                    }
+                    currentDirection = nextDirection;
+                  } else {
+                    if (points[i][1] < points[i - 1][1]) {
+                      result += ` H ${points[i - 1][0] - minimumDistanceBeforeTurn}`;
+                      result += ` V ${Math.min(points[i - 1][1], points[i][1]) - minimumDistanceBeforeTurn}`;
+                      result += ` H ${points[i][0] + minimumDistanceBeforeTurn}`;
+                      result += ` V ${points[i][1]}`;
+                      result += ` H ${points[i][0]}`;
+                    } else {
+                      result += ` H ${points[i - 1][0] - minimumDistanceBeforeTurn}`;
+                      result += ` V ${Math.max(points[i - 1][1], points[i][1]) + minimumDistanceBeforeTurn}`;
+                      result += ` H ${points[i][0] + minimumDistanceBeforeTurn}`;
+                      result += ` V ${points[i][1]}`;
+                      result += ` H ${points[i][0]}`;
+                    }
+                  }
+                  break;
+                case Side.Right:
+                  result += ` H ${Math.min(points[i - 1][0], points[i][0]) - minimumDistanceBeforeTurn}`;
                   result += ` V ${points[i][1]}`;
                   result += ` H ${points[i][0]}`;
-                } else if (points[i][0] < points[i - 1][0] && points[i][1] === points[i - 1][1]) {
-                  // next point is in the same direction, we continue straight
+                  break;
+                case Side.Bottom:
+                  if (points[i][0] < points[i - 1][0] - minimumDistanceBeforeTurn) {
+                    if (points[i][1] > points[i - 1][1] + minimumDistanceBeforeTurn) {
+                      result += ` H ${points[i][0]}`;
+                      result += ` V ${points[i][1]}`;
+                    } else {
+                      result += ` H ${(points[i - 1][0] + points[i][0]) / 2}`;
+                      result += ` V ${points[i][1] - minimumDistanceBeforeTurn}`;
+                      result += ` H ${points[i][0]}`;
+                      result += ` V ${points[i][1]}`;
+                    }
+                  } else {
+                    if (points[i][1] > points[i - 1][1] + minimumDistanceBeforeTurn) {
+                      result += ` H ${points[i - 1][0] - minimumDistanceBeforeTurn}`;
+                      result += ` V ${(points[i - 1][1] + points[i][1]) / 2}`;
+                      result += ` H ${points[i][0]}`;
+                      result += ` V ${points[i][1]}`;
+                    } else {
+                      result += ` H ${points[i - 1][0] - minimumDistanceBeforeTurn}`;
+                      result += ` V ${points[i][1] - minimumDistanceBeforeTurn}`;
+                      result += ` H ${points[i][0]}`;
+                      result += ` V ${points[i][1]}`;
+                    }
+                  }
+                  break;
+                case Side.Top:
+                  if (points[i][0] < points[i - 1][0] - minimumDistanceBeforeTurn) {
+                    if (points[i][1] < points[i - 1][1] - minimumDistanceBeforeTurn) {
+                      result += ` H ${points[i][0]}`;
+                      result += ` V ${points[i][1]}`;
+                    } else {
+                      result += ` H ${(points[i - 1][0] + points[i][0]) / 2}`;
+                      result += ` V ${points[i][1] + minimumDistanceBeforeTurn}`;
+                      result += ` H ${points[i][0]}`;
+                      result += ` V ${points[i][1]}`;
+                    }
+                  } else {
+                    if (points[i][1] < points[i - 1][1] - minimumDistanceBeforeTurn) {
+                      result += ` H ${points[i - 1][0] - minimumDistanceBeforeTurn}`;
+                      result += ` V ${(points[i - 1][1] + points[i][1]) / 2}`;
+                      result += ` H ${points[i][0]}`;
+                      result += ` V ${points[i][1]}`;
+                    } else {
+                      result += ` H ${points[i - 1][0] - minimumDistanceBeforeTurn}`;
+                      result += ` V ${points[i][1] + minimumDistanceBeforeTurn}`;
+                      result += ` H ${points[i][0]}`;
+                      result += ` V ${points[i][1]}`;
+                    }
+                  }
+                  break;
+                default:
+                  if (points[i][0] > points[i - 1][0] - minimumDistanceBeforeTurn) {
+                    result += ` H ${points[i - 1][0] - minimumDistanceBeforeTurn}`;
+                    if (points[i][1] !== points[i - 1][1]) {
+                      result += ` V ${points[i][1]}`;
+                    }
+                    result += ` H ${points[i][0]}`;
+                    currentDirection = Side.Right;
+                  } else {
+                    result += ` H ${points[i][0]}`;
+                    currentDirection = Side.Left;
+                    if (points[i][1] !== points[i - 1][1]) {
+                      result += ` V ${points[i][1]}`;
+                      currentDirection = points[i][1] > points[i - 1][1] ? Side.Bottom : Side.Top;
+                    }
+                  }
+                  break;
+              }
+              break;
+            case Side.Right:
+              switch (nextDirection) {
+                case Side.Right:
+                  if (points[i][0] > points[i - 1][0]) {
+                    if (points[i][1] !== points[i - 1][1]) {
+                      result += ` H ${(points[i][0] + points[i - 1][0]) / 2}`;
+                      result += ` V ${points[i][1]}`;
+                      result += ` H ${points[i][0]}`;
+                    } else {
+                      result += ` H ${points[i][0]}`;
+                    }
+                    currentDirection = nextDirection;
+                  } else {
+                    if (points[i][1] > points[i - 1][1]) {
+                      result += ` H ${points[i - 1][0] + minimumDistanceBeforeTurn}`;
+                      result += ` V ${Math.max(points[i - 1][1], points[i][1]) + minimumDistanceBeforeTurn}`;
+                      result += ` H ${points[i][0] - minimumDistanceBeforeTurn}`;
+                      result += ` V ${points[i][1]}`;
+                      result += ` H ${points[i][0]}`;
+                    } else {
+                      result += ` H ${points[i - 1][0] + minimumDistanceBeforeTurn}`;
+                      result += ` V ${Math.min(points[i - 1][1], points[i][1]) - minimumDistanceBeforeTurn}`;
+                      result += ` H ${points[i][0] - minimumDistanceBeforeTurn}`;
+                      result += ` V ${points[i][1]}`;
+                      result += ` H ${points[i][0]}`;
+                    }
+                  }
+                  break;
+                case Side.Left:
+                  result += ` H ${Math.max(points[i - 1][0], points[i][0]) + minimumDistanceBeforeTurn}`;
+                  result += ` V ${points[i][1]}`;
                   result += ` H ${points[i][0]}`;
-                }
-                break;
-            }
-          } else {
-            if (points[i][0] !== points[i - 1][0]) {
-              result += ` H ${points[i][0]}`;
-              currentDirection = points[i][0] > points[i - 1][0] ? Side.Right : Side.Left;
-            }
-            if (points[i][1] !== points[i - 1][1]) {
-              result += ` V ${points[i][1]}`;
-              currentDirection = points[i][1] > points[i - 1][1] ? Side.Bottom : Side.Top;
-            }
+                  break;
+                case Side.Top:
+                  if (points[i][0] > points[i - 1][0] + minimumDistanceBeforeTurn) {
+                    if (points[i][1] < points[i - 1][1] - minimumDistanceBeforeTurn) {
+                      result += ` H ${points[i][0]}`;
+                      result += ` V ${points[i][1]}`;
+                    } else {
+                      result += ` H ${(points[i - 1][0] + points[i][0]) / 2}`;
+                      result += ` V ${points[i][1] + minimumDistanceBeforeTurn}`;
+                      result += ` H ${points[i][0]}`;
+                      result += ` V ${points[i][1]}`;
+                    }
+                  } else {
+                    if (points[i][1] < points[i - 1][1] - minimumDistanceBeforeTurn) {
+                      result += ` H ${points[i - 1][0] + minimumDistanceBeforeTurn}`;
+                      result += ` V ${(points[i - 1][1] + points[i][1]) / 2}`;
+                      result += ` H ${points[i][0]}`;
+                      result += ` V ${points[i][1]}`;
+                    } else {
+                      result += ` H ${points[i - 1][0] + minimumDistanceBeforeTurn}`;
+                      result += ` V ${points[i][1] + minimumDistanceBeforeTurn}`;
+                      result += ` H ${points[i][0]}`;
+                      result += ` V ${points[i][1]}`;
+                    }
+                  }
+                  break;
+                case Side.Bottom:
+                  if (points[i][0] > points[i - 1][0] + minimumDistanceBeforeTurn) {
+                    if (points[i][1] > points[i - 1][1] + minimumDistanceBeforeTurn) {
+                      result += ` H ${points[i][0]}`;
+                      result += ` V ${points[i][1]}`;
+                    } else {
+                      result += ` H ${(points[i - 1][0] + points[i][0]) / 2}`;
+                      result += ` V ${points[i][1] - minimumDistanceBeforeTurn}`;
+                      result += ` H ${points[i][0]}`;
+                      result += ` V ${points[i][1]}`;
+                    }
+                  } else {
+                    if (points[i][1] > points[i - 1][1] + minimumDistanceBeforeTurn) {
+                      result += ` H ${points[i - 1][0] + minimumDistanceBeforeTurn}`;
+                      result += ` V ${(points[i - 1][1] + points[i][1]) / 2}`;
+                      result += ` H ${points[i][0]}`;
+                      result += ` V ${points[i][1]}`;
+                    } else {
+                      result += ` H ${points[i - 1][0] + minimumDistanceBeforeTurn}`;
+                      result += ` V ${points[i][1] - minimumDistanceBeforeTurn}`;
+                      result += ` H ${points[i][0]}`;
+                      result += ` V ${points[i][1]}`;
+                    }
+                  }
+                  break;
+                default:
+                  if (points[i][0] < points[i - 1][0] + minimumDistanceBeforeTurn) {
+                    result += ` H ${points[i - 1][0] + minimumDistanceBeforeTurn}`;
+                    if (points[i][1] !== points[i - 1][1]) {
+                      result += ` V ${points[i][1]}`;
+                    }
+                    result += ` H ${points[i][0]}`;
+                    currentDirection = Side.Left;
+                  } else {
+                    result += ` H ${points[i][0]}`;
+                    currentDirection = Side.Right;
+                    if (points[i][1] !== points[i - 1][1]) {
+                      result += ` V ${points[i][1]}`;
+                      currentDirection = points[i][1] > points[i - 1][1] ? Side.Bottom : Side.Top;
+                    }
+                  }
+                  break;
+              }
+              break;
+            default:
+              if (points[i][0] !== points[i - 1][0]) {
+                result += ` H ${points[i][0]}`;
+                currentDirection = points[i][0] > points[i - 1][0] ? Side.Right : Side.Left;
+              }
+              if (points[i][1] !== points[i - 1][1]) {
+                result += ` V ${points[i][1]}`;
+                currentDirection = points[i][1] > points[i - 1][1] ? Side.Bottom : Side.Top;
+              }
           }
         }
         break;
@@ -904,13 +1208,14 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 const extractLooksFromConfig = lookConfig => {
   const {
       selected,
-      highlighted
+      highlighted,
+      selectedAndHighlighted
     } = lookConfig,
-    rest = __rest(lookConfig, ["selected", "highlighted"]);
+    rest = __rest(lookConfig, ["selected", "highlighted", "selectedAndHighlighted"]);
   const defaultLook = rest;
   const selectedLook = Object.assign(Object.assign({}, defaultLook), selected);
   const highlightedLook = Object.assign(Object.assign({}, defaultLook), highlighted);
-  const selectedAndHighlightedLook = Object.assign(Object.assign(Object.assign({}, defaultLook), highlighted), selected);
+  const selectedAndHighlightedLook = Object.assign(Object.assign(Object.assign(Object.assign({}, defaultLook), highlighted), selected), selectedAndHighlighted);
   return {
     defaultLook,
     selectedLook,
@@ -1922,23 +2227,38 @@ class DiagramConnection extends DiagramElement {
       }
     }
   }
+  /**
+   * An alias for the `lookConfig` attribute.
+   * @private
+   */
+  set look(look) {
+    this.lookConfig = look;
+  }
+  /**
+   * Look configuration used to derive the current look of this connection.
+   * @private
+   */
+  get lookConfig() {
+    return this._lookConfig;
+  }
   /**
    * Sets the look configuration of the connection to override the one determined by the type.
    * `undefined` resets it to the one determined by the type.
    * @private
    */
-  set look(look) {
-    if (look) {
-      const looks = extractLooksFromConfig(look);
+  set lookConfig(lookConfig) {
+    this._lookConfig = lookConfig;
+    if (lookConfig) {
+      const looks = extractLooksFromConfig(lookConfig);
       this._defaultLook = Object.assign(Object.assign({}, this._defaultLook), looks.defaultLook);
       this._selectedLook = Object.assign(Object.assign({}, this._selectedLook), looks.selectedLook);
       this._highlightedLook = Object.assign(Object.assign({}, this._highlightedLook), looks.highlightedLook);
       this._selectedAndHighlightedLook = Object.assign(Object.assign({}, this._selectedAndHighlightedLook), looks.selectedAndHighlightedLook);
     } else {
-      this._defaultLook = look;
-      this._selectedLook = look;
-      this._highlightedLook = look;
-      this._selectedAndHighlightedLook = look;
+      this._defaultLook = lookConfig;
+      this._selectedLook = lookConfig;
+      this._highlightedLook = lookConfig;
+      this._selectedAndHighlightedLook = lookConfig;
     }
   }
   /**
@@ -1960,23 +2280,38 @@ class DiagramConnection extends DiagramElement {
       }
     }
   }
+  /**
+   * An alias for the `lookConfig` attribute.
+   * @private
+   */
+  set startMarkerLook(startMarkerLook) {
+    this.startMarkerLookConfig = startMarkerLook;
+  }
+  /**
+   * Look configuration used to derive the current look of the start marker of this connection.
+   * @private
+   */
+  get startMarkerLookConfig() {
+    return this._startMarkerLookConfig;
+  }
   /**
    * Sets the look configuration of the start marker to override the one determined by the type.
    * `null` stands for no marker and `undefined` resets it to the one determined by the type.
    * @private
    */
-  set startMarkerLook(startMarkerLook) {
-    if (startMarkerLook) {
-      const looks = extractLooksFromConfig(startMarkerLook);
+  set startMarkerLookConfig(startMarkerLookConfig) {
+    this._startMarkerLookConfig = startMarkerLookConfig;
+    if (startMarkerLookConfig) {
+      const looks = extractLooksFromConfig(startMarkerLookConfig);
       this._defaultStartMarkerLook = Object.assign(Object.assign({}, this._defaultStartMarkerLook), looks.defaultLook);
       this._selectedStartMarkerLook = Object.assign(Object.assign({}, this._selectedStartMarkerLook), looks.selectedLook);
       this._highlightedStartMarkerLook = Object.assign(Object.assign({}, this._highlightedStartMarkerLook), looks.highlightedLook);
       this._selectedAndHighlightedStartMarkerLook = Object.assign(Object.assign({}, this._selectedAndHighlightedStartMarkerLook), looks.selectedAndHighlightedLook);
     } else {
-      this._defaultStartMarkerLook = startMarkerLook;
-      this._selectedStartMarkerLook = startMarkerLook;
-      this._highlightedStartMarkerLook = startMarkerLook;
-      this._selectedAndHighlightedStartMarkerLook = startMarkerLook;
+      this._defaultStartMarkerLook = startMarkerLookConfig;
+      this._selectedStartMarkerLook = startMarkerLookConfig;
+      this._highlightedStartMarkerLook = startMarkerLookConfig;
+      this._selectedAndHighlightedStartMarkerLook = startMarkerLookConfig;
     }
   }
   /**
@@ -1998,23 +2333,38 @@ class DiagramConnection extends DiagramElement {
       }
     }
   }
+  /**
+   * An alias for the `lookConfig` attribute.
+   * @private
+   */
+  set endMarkerLook(endMarkerLook) {
+    this.endMarkerLookConfig = endMarkerLook;
+  }
+  /**
+   * Look configuration used to derive the current look of the end marker of this connection.
+   * @private
+   */
+  get endMarkerLookConfig() {
+    return this._endMarkerLookConfig;
+  }
   /**
    * Sets the look configuration of the end marker to override the one determined by the type.
    * `null` stands for no marker and `undefined` resets it to the one determined by the type.
    * @private
    */
-  set endMarkerLook(endMarkerLook) {
-    if (endMarkerLook) {
-      const looks = extractLooksFromConfig(endMarkerLook);
+  set endMarkerLookConfig(endMarkerLookConfig) {
+    this._endMarkerLookConfig = endMarkerLookConfig;
+    if (endMarkerLookConfig) {
+      const looks = extractLooksFromConfig(endMarkerLookConfig);
       this._defaultEndMarkerLook = Object.assign(Object.assign({}, this._defaultEndMarkerLook), looks.defaultLook);
       this._selectedEndMarkerLook = Object.assign(Object.assign({}, this._selectedEndMarkerLook), looks.selectedLook);
       this._highlightedEndMarkerLook = Object.assign(Object.assign({}, this._highlightedEndMarkerLook), looks.highlightedLook);
       this._selectedAndHighlightedEndMarkerLook = Object.assign(Object.assign({}, this._selectedAndHighlightedEndMarkerLook), looks.selectedAndHighlightedLook);
     } else {
-      this._defaultEndMarkerLook = endMarkerLook;
-      this._selectedEndMarkerLook = endMarkerLook;
-      this._highlightedEndMarkerLook = endMarkerLook;
-      this._selectedAndHighlightedEndMarkerLook = endMarkerLook;
+      this._defaultEndMarkerLook = endMarkerLookConfig;
+      this._selectedEndMarkerLook = endMarkerLookConfig;
+      this._highlightedEndMarkerLook = endMarkerLookConfig;
+      this._selectedAndHighlightedEndMarkerLook = endMarkerLookConfig;
     }
   }
   constructor(model, type, start, end, id) {
@@ -2689,23 +3039,38 @@ class DiagramSection extends DiagramElement {
       }
     }
   }
+  /**
+   * An alias for the `lookConfig` attribute.
+   * @private
+   */
+  set look(look) {
+    this.lookConfig = look;
+  }
+  /**
+   * Look configuration used to derive the current look of this section.
+   * @private
+   */
+  get lookConfig() {
+    return this._lookConfig;
+  }
   /**
    * Sets the look configuration of the look to override the one determined by the type.
    * `undefined` resets it to the one determined by the type.
    * @private
    */
-  set look(look) {
-    if (look) {
-      const looks = extractLooksFromConfig(look);
+  set lookConfig(lookConfig) {
+    this._lookConfig = lookConfig;
+    if (lookConfig) {
+      const looks = extractLooksFromConfig(lookConfig);
       this._defaultLook = Object.assign(Object.assign({}, this._defaultLook), looks.defaultLook);
       this._selectedLook = Object.assign(Object.assign({}, this._selectedLook), looks.selectedLook);
       this._highlightedLook = Object.assign(Object.assign({}, this._highlightedLook), looks.highlightedLook);
       this._selectedAndHighlightedLook = Object.assign(Object.assign({}, this._selectedAndHighlightedLook), looks.selectedAndHighlightedLook);
     } else {
-      this._defaultLook = look;
-      this._selectedLook = look;
-      this._highlightedLook = look;
-      this._selectedAndHighlightedLook = look;
+      this._defaultLook = lookConfig;
+      this._selectedLook = lookConfig;
+      this._highlightedLook = lookConfig;
+      this._selectedAndHighlightedLook = lookConfig;
     }
   }
   constructor(model, node, indexXInNode, indexYInNode, coords, width, height, id) {
@@ -3088,6 +3453,7 @@ const DIAGRAM_NODE_TYPE_DEFAULTS = {
   minHeight: 1,
   resizableX: false,
   resizableY: false,
+  snapToGridOffset: [0, 0, 0, 0],
   padding: 0,
   label: null,
   ports: [],
@@ -3116,6 +3482,7 @@ class DiagramNodeType {
     this.minHeight = values.minHeight;
     this.resizableX = values.resizableX;
     this.resizableY = values.resizableY;
+    this.snapToGridOffset = values.snapToGridOffset;
     this.bottomPadding = getBottomPadding(values);
     this.leftPadding = getLeftPadding(values);
     this.rightPadding = getRightPadding(values);
@@ -3201,23 +3568,38 @@ class DiagramNode extends DiagramElement {
       }
     }
   }
+  /**
+   * An alias for the `lookConfig` attribute.
+   * @private
+   */
+  set look(look) {
+    this.lookConfig = look;
+  }
+  /**
+   * Look configuration used to derive the current look of this node.
+   * @private
+   */
+  get lookConfig() {
+    return this._lookConfig;
+  }
   /**
    * Sets the look configuration of the look to override the one determined by the type.
    * `undefined` resets it to the one determined by the type.
    * @private
    */
-  set look(look) {
-    if (look) {
-      const looks = extractLooksFromConfig(look);
+  set lookConfig(lookConfig) {
+    this._lookConfig = lookConfig;
+    if (lookConfig) {
+      const looks = extractLooksFromConfig(lookConfig);
       this._defaultLook = Object.assign(Object.assign({}, this._defaultLook), looks.defaultLook);
       this._selectedLook = Object.assign(Object.assign({}, this._selectedLook), looks.selectedLook);
       this._highlightedLook = Object.assign(Object.assign({}, this._highlightedLook), looks.highlightedLook);
       this._selectedAndHighlightedLook = Object.assign(Object.assign({}, this._selectedAndHighlightedLook), looks.selectedAndHighlightedLook);
     } else {
-      this._defaultLook = look;
-      this._selectedLook = look;
-      this._highlightedLook = look;
-      this._selectedAndHighlightedLook = look;
+      this._defaultLook = lookConfig;
+      this._selectedLook = lookConfig;
+      this._highlightedLook = lookConfig;
+      this._selectedAndHighlightedLook = lookConfig;
     }
   }
   constructor(model, type, coords = [0, 0], id) {
@@ -4229,23 +4611,38 @@ class DiagramPort extends DiagramElement {
       }
     }
   }
+  /**
+   * An alias for the `lookConfig` attribute.
+   * @private
+   */
+  set look(look) {
+    this.lookConfig = look;
+  }
+  /**
+   * Look configuration used to derive the current look of this port.
+   * @private
+   */
+  get lookConfig() {
+    return this._lookConfig;
+  }
   /**
    * Sets the look configuration of the look to override the one determined by the type.
    * `undefined` resets it to the one determined by the type.
    * @private
    */
-  set look(look) {
-    if (look) {
-      const looks = extractLooksFromConfig(look);
+  set lookConfig(lookConfig) {
+    this._lookConfig = lookConfig;
+    if (lookConfig) {
+      const looks = extractLooksFromConfig(lookConfig);
       this._defaultLook = Object.assign(Object.assign({}, this._defaultLook), looks.defaultLook);
       this._selectedLook = Object.assign(Object.assign({}, this._selectedLook), looks.selectedLook);
       this._highlightedLook = Object.assign(Object.assign({}, this._highlightedLook), looks.highlightedLook);
       this._selectedAndHighlightedLook = Object.assign(Object.assign({}, this._selectedAndHighlightedLook), looks.selectedAndHighlightedLook);
     } else {
-      this._defaultLook = look;
-      this._selectedLook = look;
-      this._highlightedLook = look;
-      this._selectedAndHighlightedLook = look;
+      this._defaultLook = lookConfig;
+      this._selectedLook = lookConfig;
+      this._highlightedLook = lookConfig;
+      this._selectedAndHighlightedLook = lookConfig;
     }
   }
   /**
@@ -6687,12 +7084,12 @@ class DagaExporter {
 }
 
 /**
- * Text to display as the title of the property editor when editing the properties of a diagram's value set.
+ * Text to display by default as the title of the property editor when editing the properties of a diagram's value set.
  * @private
  * @see PropertyEditorComponent
  * @see ValueSet
  */
-const DIAGRAM_PROPERTIES_TEXT = 'Diagram properties';
+const DIAGRAM_PROPERTIES_DEFAULT_TEXT = 'Diagram properties';
 /**
  * Stores the functionality regarding the user highlight of a diagram canvas.
  * @public
@@ -6704,12 +7101,14 @@ class DiagramUserSelection extends DiagramElementSet {
    * @public
    * @param canvas A canvas.
    */
-  constructor(canvas) {
+  constructor(canvas, diagramPropertiesText) {
     super();
     this.canvas = canvas;
     this.canvas.propertyEditorChanges$.pipe(debounceTime(2000)).subscribe(() => {
       this.makeUpdateValuesAction();
     });
+    console.log(diagramPropertiesText);
+    this.diagramPropertiesText = diagramPropertiesText !== undefined ? diagramPropertiesText : DIAGRAM_PROPERTIES_DEFAULT_TEXT;
   }
   add(element) {
     if (this.contains(element.id)) {
@@ -6904,7 +7303,7 @@ class DiagramUserSelection extends DiagramElementSet {
           propertyEditor.valueSet = undefined;
           propertyEditor.valueSet = selectedValueSet;
         } else {
-          propertyEditor.title = DIAGRAM_PROPERTIES_TEXT;
+          propertyEditor.title = this.diagramPropertiesText;
           // force the update of the valueSet
           propertyEditor.valueSet = undefined;
           propertyEditor.valueSet = selectedValueSet;
@@ -6994,7 +7393,7 @@ class DiagramCanvas {
    * @param config The configuration object used to set the parameters of this canvas.
    */
   constructor(parentComponent, config) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
     this.backgroundPatternId = `daga-background-pattern-id-${DiagramCanvas.canvasCount++}`;
     this.zoomTransform = d3.zoomIdentity;
     // used to distinguish drags from clicks when dragging elements and during multiple selection
@@ -7009,25 +7408,25 @@ class DiagramCanvas {
     this.propertyEditorChanges$ = new Subject();
     this.parentComponent = parentComponent;
     this.model = new DiagramModel(this, undefined, config.name || 'unnamed', '', config.type || '', config.properties || []);
-    this.userSelection = new DiagramUserSelection(this);
-    this.userHighlight = new DiagramUserHighlight(this, ((_a = config.canvas) === null || _a === void 0 ? void 0 : _a.highlightSections) !== false);
-    this.contextMenu = new DiagramContextMenu(this, (_b = config.canvas) === null || _b === void 0 ? void 0 : _b.contextMenu);
-    this.backgroundColor = ((_c = config.canvas) === null || _c === void 0 ? void 0 : _c.backgroundColor) || '#FFFFFF';
-    this.gridStyle = (_f = (_e = (_d = config.canvas) === null || _d === void 0 ? void 0 : _d.grid) === null || _e === void 0 ? void 0 : _e.style) !== null && _f !== void 0 ? _f : GRID_DEFAULTS.style;
-    this.gridSize = ((_h = (_g = config.canvas) === null || _g === void 0 ? void 0 : _g.grid) === null || _h === void 0 ? void 0 : _h.enabled) === false || ((_j = config.canvas) === null || _j === void 0 ? void 0 : _j.grid) === undefined ? 0 : Math.abs(((_l = (_k = config.canvas) === null || _k === void 0 ? void 0 : _k.grid) === null || _l === void 0 ? void 0 : _l.spacing) || GRID_DEFAULTS.spacing);
-    this.gridThickness = Math.abs(((_o = (_m = config.canvas) === null || _m === void 0 ? void 0 : _m.grid) === null || _o === void 0 ? void 0 : _o.thickness) || GRID_DEFAULTS.thickness);
-    this.gridColor = ((_q = (_p = config.canvas) === null || _p === void 0 ? void 0 : _p.grid) === null || _q === void 0 ? void 0 : _q.color) || GRID_DEFAULTS.color;
-    this.snapToGrid = ((_s = (_r = config.canvas) === null || _r === void 0 ? void 0 : _r.grid) === null || _s === void 0 ? void 0 : _s.enabled) === false || ((_t = config.canvas) === null || _t === void 0 ? void 0 : _t.grid) === undefined ? false : ((_v = (_u = config.canvas) === null || _u === void 0 ? void 0 : _u.grid) === null || _v === void 0 ? void 0 : _v.snap) || GRID_DEFAULTS.snap;
-    this.zoomFactor = ((_w = config.canvas) === null || _w === void 0 ? void 0 : _w.zoomFactor) || 2;
-    this.panRate = ((_x = config.canvas) === null || _x === void 0 ? void 0 : _x.panRate) || 100;
-    this.inferConnectionType = ((_y = config.connectionSettings) === null || _y === void 0 ? void 0 : _y.inferConnectionType) || false;
-    this.autoTightenConnections = ((_z = config.connectionSettings) === null || _z === void 0 ? void 0 : _z.autoTighten) !== false;
-    this.allowConnectionLoops = ((_0 = config.connectionSettings) === null || _0 === void 0 ? void 0 : _0.allowLoops) || false;
-    this.allowSharingPorts = ((_1 = config.connectionSettings) === null || _1 === void 0 ? void 0 : _1.sharePorts) !== false;
-    this.allowSharingBothPorts = ((_2 = config.connectionSettings) === null || _2 === void 0 ? void 0 : _2.shareBothPorts) || false;
-    this.portHighlightRadius = ((_3 = config.connectionSettings) === null || _3 === void 0 ? void 0 : _3.portHighlightRadius) || 100;
+    this.userSelection = new DiagramUserSelection(this, (_b = (_a = config.components) === null || _a === void 0 ? void 0 : _a.propertyEditor) === null || _b === void 0 ? void 0 : _b.title);
+    this.userHighlight = new DiagramUserHighlight(this, ((_c = config.canvas) === null || _c === void 0 ? void 0 : _c.highlightSections) !== false);
+    this.contextMenu = new DiagramContextMenu(this, (_d = config.canvas) === null || _d === void 0 ? void 0 : _d.contextMenu);
+    this.backgroundColor = ((_e = config.canvas) === null || _e === void 0 ? void 0 : _e.backgroundColor) || '#FFFFFF';
+    this.gridStyle = (_h = (_g = (_f = config.canvas) === null || _f === void 0 ? void 0 : _f.grid) === null || _g === void 0 ? void 0 : _g.style) !== null && _h !== void 0 ? _h : GRID_DEFAULTS.style;
+    this.gridSize = ((_k = (_j = config.canvas) === null || _j === void 0 ? void 0 : _j.grid) === null || _k === void 0 ? void 0 : _k.enabled) === false || ((_l = config.canvas) === null || _l === void 0 ? void 0 : _l.grid) === undefined ? 0 : Math.abs(((_o = (_m = config.canvas) === null || _m === void 0 ? void 0 : _m.grid) === null || _o === void 0 ? void 0 : _o.spacing) || GRID_DEFAULTS.spacing);
+    this.gridThickness = Math.abs(((_q = (_p = config.canvas) === null || _p === void 0 ? void 0 : _p.grid) === null || _q === void 0 ? void 0 : _q.thickness) || GRID_DEFAULTS.thickness);
+    this.gridColor = ((_s = (_r = config.canvas) === null || _r === void 0 ? void 0 : _r.grid) === null || _s === void 0 ? void 0 : _s.color) || GRID_DEFAULTS.color;
+    this.snapToGrid = ((_u = (_t = config.canvas) === null || _t === void 0 ? void 0 : _t.grid) === null || _u === void 0 ? void 0 : _u.enabled) === false || ((_v = config.canvas) === null || _v === void 0 ? void 0 : _v.grid) === undefined ? false : ((_x = (_w = config.canvas) === null || _w === void 0 ? void 0 : _w.grid) === null || _x === void 0 ? void 0 : _x.snap) || GRID_DEFAULTS.snap;
+    this.zoomFactor = ((_y = config.canvas) === null || _y === void 0 ? void 0 : _y.zoomFactor) || 2;
+    this.panRate = ((_z = config.canvas) === null || _z === void 0 ? void 0 : _z.panRate) || 100;
+    this.inferConnectionType = ((_0 = config.connectionSettings) === null || _0 === void 0 ? void 0 : _0.inferConnectionType) || false;
+    this.autoTightenConnections = ((_1 = config.connectionSettings) === null || _1 === void 0 ? void 0 : _1.autoTighten) !== false;
+    this.allowConnectionLoops = ((_2 = config.connectionSettings) === null || _2 === void 0 ? void 0 : _2.allowLoops) || false;
+    this.allowSharingPorts = ((_3 = config.connectionSettings) === null || _3 === void 0 ? void 0 : _3.sharePorts) !== false;
+    this.allowSharingBothPorts = ((_4 = config.connectionSettings) === null || _4 === void 0 ? void 0 : _4.shareBothPorts) || false;
+    this.portHighlightRadius = ((_5 = config.connectionSettings) === null || _5 === void 0 ? void 0 : _5.portHighlightRadius) || 100;
     this.multipleSelectionOn = false;
-    this.priorityThresholds = ((_4 = config.canvas) === null || _4 === void 0 ? void 0 : _4.priorityThresholds) || [];
+    this.priorityThresholds = ((_6 = config.canvas) === null || _6 === void 0 ? void 0 : _6.priorityThresholds) || [];
     this.priorityThreshold = this.priorityThresholds ? this.priorityThresholds[0] : undefined;
     this.layoutFormat = config.layoutFormat;
     this.userActions = config.userActions || {};
@@ -7054,7 +7453,7 @@ class DiagramCanvas {
         const connectionType = new DiagramConnectionType(Object.assign(Object.assign({}, config.connectionTypeDefaults), connectionTypeConfig));
         this.model.connections.types.add(connectionType);
       }
-      this._connectionType = ((_5 = config === null || config === void 0 ? void 0 : config.connectionSettings) === null || _5 === void 0 ? void 0 : _5.defaultConnection) !== undefined ? this.model.connections.types.get(config.connectionSettings.defaultConnection) : undefined;
+      this._connectionType = ((_7 = config === null || config === void 0 ? void 0 : config.connectionSettings) === null || _7 === void 0 ? void 0 : _7.defaultConnection) !== undefined ? this.model.connections.types.get(config.connectionSettings.defaultConnection) : undefined;
     }
   }
   addValidator(validator) {
@@ -7281,8 +7680,8 @@ class DiagramCanvas {
         const deselectedElements = this.userSelection.all();
         this.userSelection.clear();
         this.diagramEvent$.next(new DiagramSelectionEvent(deselectedElements, false));
-        this.userSelection.openInPropertyEditor(this.model);
       }
+      this.userSelection.openInPropertyEditor(this.model);
     }).call(d3.drag().filter(event => {
       return this.multipleSelectionOn || isSecondaryButton(event);
     }).on(DragEvents.Start, event => {
@@ -7489,7 +7888,9 @@ class DiagramCanvas {
       if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableX && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
-          pointerCoords = this.getClosestGridPoint(pointerCoords);
+          pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[0], pointerCoords[1] - d.type.snapToGridOffset[1]]);
+          pointerCoords[0] += d.type.snapToGridOffset[0];
+          pointerCoords[1] += d.type.snapToGridOffset[1];
         }
         d.stretch(Side.Left, d.coords[0] - pointerCoords[0]);
         this.currentAction.to = d.getGeometry();
@@ -7523,7 +7924,9 @@ class DiagramCanvas {
       if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableY && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
-          pointerCoords = this.getClosestGridPoint(pointerCoords);
+          pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[0], pointerCoords[1] - d.type.snapToGridOffset[1]]);
+          pointerCoords[0] += d.type.snapToGridOffset[0];
+          pointerCoords[1] += d.type.snapToGridOffset[1];
         }
         d.stretch(Side.Top, d.coords[1] - pointerCoords[1]);
         this.currentAction.to = d.getGeometry();
@@ -7557,7 +7960,9 @@ class DiagramCanvas {
       if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableX && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
-          pointerCoords = this.getClosestGridPoint(pointerCoords);
+          pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[2], pointerCoords[1] - d.type.snapToGridOffset[3]]);
+          pointerCoords[0] += d.type.snapToGridOffset[2];
+          pointerCoords[1] += d.type.snapToGridOffset[3];
         }
         d.stretch(Side.Right, pointerCoords[0] - (d.coords[0] + d.width));
         this.currentAction.to = d.getGeometry();
@@ -7591,7 +7996,11 @@ class DiagramCanvas {
       if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableY && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
-          pointerCoords = this.getClosestGridPoint(pointerCoords);
+          if (this.snapToGrid) {
+            pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[2], pointerCoords[1] - d.type.snapToGridOffset[3]]);
+            pointerCoords[0] += d.type.snapToGridOffset[2];
+            pointerCoords[1] += d.type.snapToGridOffset[3];
+          }
         }
         d.stretch(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height));
         this.currentAction.to = d.getGeometry();
@@ -8841,7 +9250,9 @@ class DiagramCanvas {
       if (this.draggingFrom[0] !== event.x || this.draggingFrom[1] !== event.y) {
         let newNodeCoords = [event.x - d.width / 2, event.y - d.height / 2];
         if (this.snapToGrid) {
-          newNodeCoords = this.getClosestGridPoint(newNodeCoords);
+          newNodeCoords = this.getClosestGridPoint([newNodeCoords[0] - d.type.snapToGridOffset[0], newNodeCoords[1] - d.type.snapToGridOffset[1]]);
+          newNodeCoords[0] += d.type.snapToGridOffset[0];
+          newNodeCoords[1] += d.type.snapToGridOffset[1];
         }
         if (this.currentAction instanceof MoveAction) {
           const movingFrom = this.currentAction.delta;
@@ -9535,7 +9946,9 @@ class ForceLayout {
     }
     if (model.canvas && model.canvas.snapToGrid) {
       for (const node of model.nodes) {
-        const snappedCoords = model.canvas.getClosestGridPoint(node.coords);
+        const snappedCoords = model.canvas.getClosestGridPoint([node.coords[0] - node.type.snapToGridOffset[0], node.coords[1] - node.type.snapToGridOffset[1]]);
+        snappedCoords[0] += node.type.snapToGridOffset[0];
+        snappedCoords[1] += node.type.snapToGridOffset[1];
         node.move(snappedCoords);
       }
     }