@metadev/daga 4.2.2 → 4.2.3

package/Changelog.md

@@ -6,9 +6,15 @@ List of releases and changes.
 
 ## Next release Joyeuse
 
+## v. 4.2.3
+
+- Enable toggling whether individual sections can be highlighted or entire nodes [#308](https://github.com/metadevpro/daga/pull/308)
+- Enable toggling whether connections tighten automatically and whether they can loop and share ports [#309](https://github.com/metadevpro/daga/pull/309)
+- Enable toggling background color of connection label [#310](https://github.com/metadevpro/daga/pull/310)
+
 ## v. 4.2.2
 
-- Fix zoom on double-click [PR 307](https://github.com/metadevpro/daga/pull/307)
+- Fix zoom on double click [#307](https://github.com/metadevpro/daga/pull/307)
 
 ## v. 4.2.1
 

package/index.cjs.js

@@ -2138,11 +2138,14 @@ class DiagramConnection extends DiagramElement {
    * @public
    */
   tighten() {
-    var _a, _b;
-    if (((_a = this.start) === null || _a === void 0 ? void 0 : _a.rootElement) && this.end) {
+    var _a, _b, _c, _d, _e;
+    const allowConnectionLoops = ((_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.allowConnectionLoops) || false;
+    const allowSharingPorts = ((_b = this.model.canvas) === null || _b === void 0 ? void 0 : _b.allowSharingPorts) !== false;
+    const allowSharingBothPorts = ((_c = this.model.canvas) === null || _c === void 0 ? void 0 : _c.allowSharingBothPorts) || false;
+    if (((_d = this.start) === null || _d === void 0 ? void 0 : _d.rootElement) && this.end) {
       const alternativeStartPortsSortedByDistanceAscending = this.start.rootElement.ports.map(p => [p, p.distanceTo(this.end.coords)]).sort((a, b) => a[1] - b[1]).map(a => a[0]);
       checkAlternativeStartPorts: for (const alternativeStartPort of alternativeStartPortsSortedByDistanceAscending) {
-        if (alternativeStartPort === this.end) {
+        if (!allowConnectionLoops && alternativeStartPort === this.end) {
           // alternative start port not valid, it is the same as the end port
           continue checkAlternativeStartPorts;
         }
@@ -2150,7 +2153,11 @@ class DiagramConnection extends DiagramElement {
           // alternative start port not valid, it doesn't allow outgoing connections
           continue checkAlternativeStartPorts;
         }
-        {
+        if (!allowSharingPorts && (alternativeStartPort.incomingConnections.length === 1 && alternativeStartPort.incomingConnections[0] !== this || alternativeStartPort.incomingConnections.length > 1 || alternativeStartPort.outgoingConnections.length === 1 && alternativeStartPort.outgoingConnections[0] !== this || alternativeStartPort.outgoingConnections.length > 1)) {
+          // alternative start port not valid, it already has other connections
+          continue checkAlternativeStartPorts;
+        }
+        if (!allowSharingBothPorts) {
           for (const connection of alternativeStartPort.outgoingConnections) {
             if (connection !== this && connection.end === this.end) {
               // alternative start port not valid, there is a connection whose start and end matches the alternative start port and this connection's end
@@ -2173,10 +2180,10 @@ class DiagramConnection extends DiagramElement {
         }
       }
     }
-    if (((_b = this.end) === null || _b === void 0 ? void 0 : _b.rootElement) && this.start) {
+    if (((_e = this.end) === null || _e === void 0 ? void 0 : _e.rootElement) && this.start) {
       const alternativeEndPortsSortedByDistanceAscending = this.end.rootElement.ports.map(p => [p, p.distanceTo(this.start.coords)]).sort((a, b) => a[1] - b[1]).map(a => a[0]);
       checkAlternativeEndPorts: for (const alternativeEndPort of alternativeEndPortsSortedByDistanceAscending) {
-        if (alternativeEndPort === this.start) {
+        if (!allowConnectionLoops && alternativeEndPort === this.start) {
           // alternative end port not valid, it is the same as the end port
           continue checkAlternativeEndPorts;
         }
@@ -2184,7 +2191,11 @@ class DiagramConnection extends DiagramElement {
           // alternative end port not valid, it doesn't allow incoming connections
           continue checkAlternativeEndPorts;
         }
-        {
+        if (!allowSharingPorts && (alternativeEndPort.outgoingConnections.length === 1 && alternativeEndPort.outgoingConnections[0] !== this || alternativeEndPort.outgoingConnections.length > 1 || alternativeEndPort.incomingConnections.length === 1 && alternativeEndPort.incomingConnections[0] !== this || alternativeEndPort.incomingConnections.length > 1)) {
+          // alternative end port not valid, it already has other connections
+          continue checkAlternativeEndPorts;
+        }
+        if (!allowSharingBothPorts) {
           for (const connection of alternativeEndPort.incomingConnections) {
             if (connection !== this && connection.start === this.start) {
               // alternative end port not valid, there is a connection whose start and end matches the alternative end port and this connection's start
@@ -2292,6 +2303,7 @@ const DIAGRAM_FIELD_DEFAULTS = {
   fontFamily: "'Wonder Unit Sans', sans-serif",
   color: '#000000',
   selectedColor: '#000000',
+  backgroundColor: '#00000000',
   horizontalAlign: exports.HorizontalAlign.Center,
   verticalAlign: exports.VerticalAlign.Center,
   orientation: exports.Side.Top,
@@ -2948,6 +2960,7 @@ class DiagramSection extends DiagramElement {
    * @public
    */
   setGeometry(geometry) {
+    var _a;
     const oldCoordsX = [this.coords[0], this.coords[0] + this.width];
     const oldCoordsY = [this.coords[1], this.coords[1] + this.height];
     this.coords = [...geometry.coords];
@@ -2971,8 +2984,10 @@ class DiagramSection extends DiagramElement {
     for (const decorator of this.decorators) {
       decorator.move(translatePointWithAnchors(decorator.coords, oldCoordsX, oldCoordsY, newCoordsX, newCoordsY, decorator.anchorPointX, decorator.anchorPointY));
     }
+    if (((_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.autoTightenConnections) !== false) {
+      this.getConnections().forEach(c => c.tighten());
+    }
     // Update canvas.
-    this.getConnections().forEach(c => c.tighten());
     this.updateInView();
   }
 }
@@ -3691,6 +3706,7 @@ class DiagramNode extends DiagramElement {
    * @public
    */
   setGeometry(geometry) {
+    var _a;
     this.raise();
     const oldCoordsX = [this.coords[0], this.coords[0] + this.width];
     const oldCoordsY = [this.coords[1], this.coords[1] + this.height];
@@ -3728,8 +3744,10 @@ class DiagramNode extends DiagramElement {
     for (const decorator of this.decorators) {
       decorator.move(translatePointWithAnchors(decorator.coords, oldCoordsX, oldCoordsY, newCoordsX, newCoordsY, decorator.anchorPointX, decorator.anchorPointY));
     }
+    if (((_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.autoTightenConnections) !== false) {
+      this.getConnections().forEach(c => c.tighten());
+    }
     // Update canvas.
-    this.getConnections().forEach(c => c.tighten());
     this.updateInView();
   }
   /**
@@ -6423,10 +6441,11 @@ class DiagramUserHighlight extends DiagramElementSet {
    * @public
    * @param canvas A canvas.
    */
-  constructor(canvas) {
+  constructor(canvas, highlightSections = true) {
     super();
     this.focus = undefined;
     this.canvas = canvas;
+    this.highlightSections = highlightSections;
   }
   /**
    * Gets the focus of the user highlight, which is the element where the current user highlight started regardless of which other elements were highlighted as a consequence.
@@ -6452,6 +6471,20 @@ class DiagramUserHighlight extends DiagramElementSet {
   add(element) {
     super.add(element);
     if (element instanceof DiagramNode) {
+      if (!this.highlightSections) {
+        for (const section of element.sections) {
+          super.add(section);
+          for (const port of section.ports) {
+            super.add(port);
+            this.canvas.updatePortsInView(port.id);
+          }
+          if (section.label) {
+            super.add(section.label);
+            this.canvas.updateFieldsInView(section.label.id);
+          }
+          this.canvas.updateSectionsInView(section.id);
+        }
+      }
       for (const port of element.ports) {
         super.add(port);
         this.canvas.updatePortsInView(port.id);
@@ -6462,15 +6495,19 @@ class DiagramUserHighlight extends DiagramElementSet {
       }
       this.canvas.updateNodesInView(element.id);
     } else if (element instanceof DiagramSection) {
-      for (const port of element.ports) {
-        super.add(port);
-        this.canvas.updatePortsInView(port.id);
-      }
-      if (element.label) {
-        super.add(element.label);
-        this.canvas.updateFieldsInView(element.label.id);
+      if (!this.highlightSections && element.node) {
+        this.add(element.node);
+      } else {
+        for (const port of element.ports) {
+          super.add(port);
+          this.canvas.updatePortsInView(port.id);
+        }
+        if (element.label) {
+          super.add(element.label);
+          this.canvas.updateFieldsInView(element.label.id);
+        }
+        this.canvas.updateSectionsInView(element.id);
       }
-      this.canvas.updateSectionsInView(element.id);
     } else if (element instanceof DiagramPort) {
       if (element.label) {
         super.add(element.label);
@@ -6939,7 +6976,6 @@ const RESIZER_THICKNESS = 6;
  */
 const ACTION_STACK_SIZE = 25;
 const UNFINISHED_CONNECTION_ID = 'diagram-connection-unfinished';
-const MAX_DISTANCE_TO_PORT = 100;
 class DiagramCanvas {
   get connectionType() {
     return this._connectionType;
@@ -6957,7 +6993,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;
+    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;
     this.backgroundPatternId = `daga-background-pattern-id-${DiagramCanvas.canvasCount++}`;
     this.zoomTransform = d3__namespace.zoomIdentity;
     // used to distinguish drags from clicks when dragging elements and during multiple selection
@@ -6973,19 +7009,24 @@ class DiagramCanvas {
     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);
-    this.contextMenu = new DiagramContextMenu(this, (_a = config.canvas) === null || _a === void 0 ? void 0 : _a.contextMenu);
-    this.backgroundColor = ((_b = config.canvas) === null || _b === void 0 ? void 0 : _b.backgroundColor) || '#FFFFFF';
-    this.gridStyle = (_e = (_d = (_c = config.canvas) === null || _c === void 0 ? void 0 : _c.grid) === null || _d === void 0 ? void 0 : _d.style) !== null && _e !== void 0 ? _e : GRID_DEFAULTS.style;
-    this.gridSize = ((_g = (_f = config.canvas) === null || _f === void 0 ? void 0 : _f.grid) === null || _g === void 0 ? void 0 : _g.enabled) === false || ((_h = config.canvas) === null || _h === void 0 ? void 0 : _h.grid) === undefined ? 0 : Math.abs(((_k = (_j = config.canvas) === null || _j === void 0 ? void 0 : _j.grid) === null || _k === void 0 ? void 0 : _k.spacing) || GRID_DEFAULTS.spacing);
-    this.gridThickness = Math.abs(((_m = (_l = config.canvas) === null || _l === void 0 ? void 0 : _l.grid) === null || _m === void 0 ? void 0 : _m.thickness) || GRID_DEFAULTS.thickness);
-    this.gridColor = ((_p = (_o = config.canvas) === null || _o === void 0 ? void 0 : _o.grid) === null || _p === void 0 ? void 0 : _p.color) || GRID_DEFAULTS.color;
-    this.snapToGrid = ((_r = (_q = config.canvas) === null || _q === void 0 ? void 0 : _q.grid) === null || _r === void 0 ? void 0 : _r.enabled) === false || ((_s = config.canvas) === null || _s === void 0 ? void 0 : _s.grid) === undefined ? false : ((_u = (_t = config.canvas) === null || _t === void 0 ? void 0 : _t.grid) === null || _u === void 0 ? void 0 : _u.snap) || GRID_DEFAULTS.snap;
-    this.zoomFactor = ((_v = config.canvas) === null || _v === void 0 ? void 0 : _v.zoomFactor) || 2;
-    this.panRate = ((_w = config.canvas) === null || _w === void 0 ? void 0 : _w.panRate) || 100;
-    this.inferConnectionType = config.inferConnectionType || false;
+    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.multipleSelectionOn = false;
-    this.priorityThresholds = ((_x = config.canvas) === null || _x === void 0 ? void 0 : _x.priorityThresholds) || [];
+    this.priorityThresholds = ((_4 = config.canvas) === null || _4 === void 0 ? void 0 : _4.priorityThresholds) || [];
     this.priorityThreshold = this.priorityThresholds ? this.priorityThresholds[0] : undefined;
     this.layoutFormat = config.layoutFormat;
     this.userActions = config.userActions || {};
@@ -7012,7 +7053,7 @@ class DiagramCanvas {
         const connectionType = new DiagramConnectionType(Object.assign(Object.assign({}, config.connectionTypeDefaults), connectionTypeConfig));
         this.model.connections.types.add(connectionType);
       }
-      this._connectionType = config.defaultConnection !== undefined ? this.model.connections.types.get(config.defaultConnection) : undefined;
+      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;
     }
   }
   addValidator(validator) {
@@ -7860,7 +7901,7 @@ class DiagramCanvas {
       if (this.multipleSelectionOn || this.secondaryButton) {
         this.startMultipleSelection(event);
       } else {
-        if (this.canUserPerformAction(exports.DiagramActions.AddConnection) && !d.removed) {
+        if (this.canUserPerformAction(exports.DiagramActions.AddConnection) && (this.allowSharingPorts || d.incomingConnections.length === 0 && d.outgoingConnections.length === 0) && !d.removed) {
           setCursorStyle(exports.CursorStyle.Grabbing);
           this.startConnection(d);
           // should be true after having called this.startConnection()
@@ -7906,7 +7947,7 @@ class DiagramCanvas {
                   closestPortFound = port;
                 }
               }
-              if (closestPortFound && minDistanceFound < MAX_DISTANCE_TO_PORT) {
+              if (closestPortFound && minDistanceFound < this.portHighlightRadius) {
                 this.userHighlight.focusOn(closestPortFound);
               } else {
                 this.userHighlight.clear();
@@ -8311,6 +8352,77 @@ class DiagramCanvas {
     const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), connection.type.label);
     if (pathNode) {
       const pathLength = pathNode.getTotalLength();
+      let startLabelShiftX = 0;
+      let startLabelShiftY = 0;
+      let middleLabelShiftX = 0;
+      let middleLabelShiftY = 0;
+      let endLabelShiftX = 0;
+      let endLabelShiftY = 0;
+      if (labelConfiguration.backgroundColor === '#00000000') {
+        // background color is transparent / not set, so we find an alternative position for the label
+        const deltaX = connection.endCoords[0] - connection.startCoords[0];
+        const deltaY = connection.endCoords[1] - connection.startCoords[1];
+        switch (connection.startDirection) {
+          case exports.Side.Top:
+            startLabelShiftX = deltaX >= 0 ? 1 : -1;
+            middleLabelShiftX = startLabelShiftX;
+            endLabelShiftX = startLabelShiftX;
+            startLabelShiftY = -1;
+            break;
+          case exports.Side.Bottom:
+            startLabelShiftX = deltaX >= 0 ? 1 : -1;
+            middleLabelShiftX = startLabelShiftX;
+            endLabelShiftX = startLabelShiftX;
+            startLabelShiftY = 1;
+            break;
+          case exports.Side.Left:
+            startLabelShiftX = -1;
+            startLabelShiftY = deltaY > 0 ? 1 : -1;
+            middleLabelShiftY = startLabelShiftY;
+            endLabelShiftY = startLabelShiftY;
+            break;
+          case exports.Side.Right:
+            startLabelShiftX = 1;
+            startLabelShiftY = deltaY > 0 ? 1 : -1;
+            middleLabelShiftY = startLabelShiftY;
+            endLabelShiftY = startLabelShiftY;
+            break;
+          default:
+            startLabelShiftX = 1;
+            middleLabelShiftX = startLabelShiftX;
+            endLabelShiftX = startLabelShiftX;
+            startLabelShiftY = -1;
+            middleLabelShiftY = startLabelShiftY;
+            endLabelShiftY = startLabelShiftY;
+        }
+        switch (connection.endDirection) {
+          case exports.Side.Top:
+            endLabelShiftX = deltaX >= 0 ? 1 : -1;
+            middleLabelShiftX = endLabelShiftX;
+            endLabelShiftY = 1;
+            break;
+          case exports.Side.Bottom:
+            endLabelShiftX = deltaX >= 0 ? 1 : -1;
+            middleLabelShiftX = endLabelShiftX;
+            endLabelShiftY = -1;
+            break;
+          case exports.Side.Left:
+            endLabelShiftX = -1;
+            endLabelShiftY = deltaY > 0 ? 1 : -1;
+            middleLabelShiftY = endLabelShiftY;
+            break;
+          case exports.Side.Right:
+            endLabelShiftX = 1;
+            endLabelShiftY = deltaY > 0 ? 1 : -1;
+            middleLabelShiftY = endLabelShiftY;
+            break;
+          default:
+            endLabelShiftX = 1;
+            middleLabelShiftX = endLabelShiftX;
+            endLabelShiftY = -1;
+            middleLabelShiftY = endLabelShiftY;
+        }
+      }
       // bind start labels
       connectionSelection.select('g.diagram-connection-start-label text').attr('x', 0).attr('y', labelConfiguration.fontSize / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.fontFamily).attr('font-size', labelConfiguration.fontSize).attr('fill', connection.selected ? labelConfiguration.selectedColor : labelConfiguration.color).style('font-kerning', 'none').text(connection.startLabel);
       const startLabelBoundingRect = (_a = connectionSelection.select('g.diagram-connection-start-label text').node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
@@ -8319,8 +8431,8 @@ class DiagramCanvas {
         const boundingWidth = !connection.startLabel ? 0 : startLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
         const boundingHeight = !connection.startLabel ? 0 : startLabelBoundingRect.height / this.zoomTransform.k + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
         const pathStartLabelPoint = pathNode.getPointAtLength(Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
-        connectionSelection.select('g.diagram-connection-start-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', connection.look.color).attr('stroke', 'none');
-        connectionSelection.select('g.diagram-connection-start-label').attr('transform', `translate(${pathStartLabelPoint.x},${pathStartLabelPoint.y})`);
+        connectionSelection.select('g.diagram-connection-start-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', labelConfiguration.backgroundColor).attr('stroke', 'none');
+        connectionSelection.select('g.diagram-connection-start-label').attr('transform', `translate(${pathStartLabelPoint.x + startLabelShiftX * boundingWidth},${pathStartLabelPoint.y + startLabelShiftY * boundingHeight})`);
       }
       // bind middle labels
       connectionSelection.select('g.diagram-connection-middle-label text').attr('x', 0).attr('y', labelConfiguration.fontSize / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.fontFamily).attr('font-size', labelConfiguration.fontSize).attr('fill', connection.selected ? labelConfiguration.selectedColor : labelConfiguration.color).style('font-kerning', 'none').text(connection.middleLabel);
@@ -8330,8 +8442,8 @@ class DiagramCanvas {
         const boundingWidth = !connection.middleLabel ? 0 : middleLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
         const boundingHeight = !connection.middleLabel ? 0 : middleLabelBoundingRect.height / this.zoomTransform.k + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
         const pathMiddleLabelPoint = pathNode.getPointAtLength(pathLength / 2);
-        connectionSelection.select('g.diagram-connection-middle-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', connection.look.color).attr('stroke', 'none');
-        connectionSelection.select('g.diagram-connection-middle-label').attr('transform', `translate(${pathMiddleLabelPoint.x},${pathMiddleLabelPoint.y})`);
+        connectionSelection.select('g.diagram-connection-middle-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', labelConfiguration.backgroundColor).attr('stroke', 'none');
+        connectionSelection.select('g.diagram-connection-middle-label').attr('transform', `translate(${pathMiddleLabelPoint.x + middleLabelShiftX * boundingWidth},${pathMiddleLabelPoint.y + middleLabelShiftY * boundingHeight})`);
       }
       // bind end labels
       connectionSelection.select('g.diagram-connection-end-label text').attr('x', 0).attr('y', labelConfiguration.fontSize / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.fontFamily).attr('font-size', labelConfiguration.fontSize).attr('fill', connection.selected ? labelConfiguration.selectedColor : labelConfiguration.color).style('font-kerning', 'none').text(connection.endLabel);
@@ -8341,8 +8453,8 @@ class DiagramCanvas {
         const boundingWidth = !connection.endLabel ? 0 : endLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
         const boundingHeight = !connection.endLabel ? 0 : endLabelBoundingRect.height / this.zoomTransform.k + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
         const pathEndLabelPoint = pathNode.getPointAtLength(pathLength - Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
-        connectionSelection.select('g.diagram-connection-end-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', connection.look.color).attr('stroke', 'none');
-        connectionSelection.select('g.diagram-connection-end-label').attr('transform', `translate(${pathEndLabelPoint.x},${pathEndLabelPoint.y})`);
+        connectionSelection.select('g.diagram-connection-end-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', labelConfiguration.backgroundColor).attr('stroke', 'none');
+        connectionSelection.select('g.diagram-connection-end-label').attr('transform', `translate(${pathEndLabelPoint.x + endLabelShiftX * boundingWidth},${pathEndLabelPoint.y + endLabelShiftY * boundingHeight})`);
       }
     }
   }
@@ -8514,51 +8626,61 @@ class DiagramCanvas {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     this.userHighlight.clear();
     if (this.unfinishedConnection !== undefined) {
-      if (this.unfinishedConnection.start !== port) {
-        if (this.unfinishedConnection.type.canStartFromType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === void 0 ? void 0 : _e.start) === null || _f === void 0 ? void 0 : _f.allowsOutgoing) && this.unfinishedConnection.type.canFinishOnType(((_h = (_g = port.getNode()) === null || _g === void 0 ? void 0 : _g.type) === null || _h === void 0 ? void 0 : _h.id) || '') && port.allowsIncoming) {
-          const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, (_j = this.unfinishedConnection.start) === null || _j === void 0 ? void 0 : _j.id, port.id);
-          // clean up the previous unfinished connection
-          this.dropConnection();
-          addConnectionAction.do();
-          this.actionStack.add(addConnectionAction);
-        } else if (this.unfinishedConnection.type.canFinishOnType(((_o = (_m = (_l = (_k = this.unfinishedConnection) === null || _k === void 0 ? void 0 : _k.start) === null || _l === void 0 ? void 0 : _l.getNode()) === null || _m === void 0 ? void 0 : _m.type) === null || _o === void 0 ? void 0 : _o.id) || '') && ((_q = (_p = this.unfinishedConnection) === null || _p === void 0 ? void 0 : _p.start) === null || _q === void 0 ? void 0 : _q.allowsIncoming) && this.unfinishedConnection.type.canStartFromType(((_s = (_r = port.getNode()) === null || _r === void 0 ? void 0 : _r.type) === null || _s === void 0 ? void 0 : _s.id) || '') && port.allowsOutgoing) {
-          const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, port.id, (_t = this.unfinishedConnection.start) === null || _t === void 0 ? void 0 : _t.id);
-          // clean up the previous unfinished connection
-          this.dropConnection();
-          addConnectionAction.do();
-          this.actionStack.add(addConnectionAction);
-        } else {
-          if (this.inferConnectionType) {
-            let differentConnectionType = this.model.connections.types.all().find(t => {
+      if (!this.allowConnectionLoops && this.unfinishedConnection.start === port) {
+        this.dropConnection();
+        return;
+      }
+      if (!this.allowSharingPorts && (port.incomingConnections.length > 0 || port.outgoingConnections.length > 0)) {
+        this.dropConnection();
+        return;
+      }
+      if (!this.allowSharingBothPorts && this.model.connections.find(c => {
+        var _a, _b;
+        return c.start === ((_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) && c.end === port || c.end === ((_b = this.unfinishedConnection) === null || _b === void 0 ? void 0 : _b.start) && c.start === port;
+      }) !== undefined) {
+        this.dropConnection();
+        return;
+      }
+      if (this.unfinishedConnection.type.canStartFromType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === void 0 ? void 0 : _e.start) === null || _f === void 0 ? void 0 : _f.allowsOutgoing) && this.unfinishedConnection.type.canFinishOnType(((_h = (_g = port.getNode()) === null || _g === void 0 ? void 0 : _g.type) === null || _h === void 0 ? void 0 : _h.id) || '') && port.allowsIncoming) {
+        const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, (_j = this.unfinishedConnection.start) === null || _j === void 0 ? void 0 : _j.id, port.id);
+        // clean up the previous unfinished connection
+        this.dropConnection();
+        addConnectionAction.do();
+        this.actionStack.add(addConnectionAction);
+      } else if (this.unfinishedConnection.type.canFinishOnType(((_o = (_m = (_l = (_k = this.unfinishedConnection) === null || _k === void 0 ? void 0 : _k.start) === null || _l === void 0 ? void 0 : _l.getNode()) === null || _m === void 0 ? void 0 : _m.type) === null || _o === void 0 ? void 0 : _o.id) || '') && ((_q = (_p = this.unfinishedConnection) === null || _p === void 0 ? void 0 : _p.start) === null || _q === void 0 ? void 0 : _q.allowsIncoming) && this.unfinishedConnection.type.canStartFromType(((_s = (_r = port.getNode()) === null || _r === void 0 ? void 0 : _r.type) === null || _s === void 0 ? void 0 : _s.id) || '') && port.allowsOutgoing) {
+        const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, port.id, (_t = this.unfinishedConnection.start) === null || _t === void 0 ? void 0 : _t.id);
+        // clean up the previous unfinished connection
+        this.dropConnection();
+        addConnectionAction.do();
+        this.actionStack.add(addConnectionAction);
+      } else {
+        if (this.inferConnectionType) {
+          let differentConnectionType = this.model.connections.types.all().find(t => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            return t.canStartFromType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === void 0 ? void 0 : _e.start) === null || _f === void 0 ? void 0 : _f.allowsOutgoing) && t.canFinishOnType(((_h = (_g = port.getNode()) === null || _g === void 0 ? void 0 : _g.type) === null || _h === void 0 ? void 0 : _h.id) || '') && port.allowsIncoming;
+          });
+          let invertConnection = false;
+          if (differentConnectionType === undefined) {
+            differentConnectionType = this.model.connections.types.all().find(t => {
               var _a, _b, _c, _d, _e, _f, _g, _h;
-              return t.canStartFromType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === void 0 ? void 0 : _e.start) === null || _f === void 0 ? void 0 : _f.allowsOutgoing) && t.canFinishOnType(((_h = (_g = port.getNode()) === null || _g === void 0 ? void 0 : _g.type) === null || _h === void 0 ? void 0 : _h.id) || '') && port.allowsIncoming;
+              return t.canFinishOnType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === void 0 ? void 0 : _e.start) === null || _f === void 0 ? void 0 : _f.allowsIncoming) && t.canStartFromType(((_h = (_g = port.getNode()) === null || _g === void 0 ? void 0 : _g.type) === null || _h === void 0 ? void 0 : _h.id) || '') && port.allowsOutgoing;
             });
-            let invertConnection = false;
-            if (differentConnectionType === undefined) {
-              differentConnectionType = this.model.connections.types.all().find(t => {
-                var _a, _b, _c, _d, _e, _f, _g, _h;
-                return t.canFinishOnType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === void 0 ? void 0 : _e.start) === null || _f === void 0 ? void 0 : _f.allowsIncoming) && t.canStartFromType(((_h = (_g = port.getNode()) === null || _g === void 0 ? void 0 : _g.type) === null || _h === void 0 ? void 0 : _h.id) || '') && port.allowsOutgoing;
-              });
-              invertConnection = true;
-            }
-            if (differentConnectionType !== undefined) {
-              const addConnectionAction = new AddConnectionAction(this, differentConnectionType, invertConnection ? port.id : (_u = this.unfinishedConnection.start) === null || _u === void 0 ? void 0 : _u.id, invertConnection ? (_v = this.unfinishedConnection.start) === null || _v === void 0 ? void 0 : _v.id : port.id);
-              // clean up the previous unfinished connection
-              this.dropConnection();
-              addConnectionAction.do();
-              this.actionStack.add(addConnectionAction);
-            } else {
-              // error: connection target of wrong type and no allowed type can be found
-              this.dropConnection();
-            }
+            invertConnection = true;
+          }
+          if (differentConnectionType !== undefined) {
+            const addConnectionAction = new AddConnectionAction(this, differentConnectionType, invertConnection ? port.id : (_u = this.unfinishedConnection.start) === null || _u === void 0 ? void 0 : _u.id, invertConnection ? (_v = this.unfinishedConnection.start) === null || _v === void 0 ? void 0 : _v.id : port.id);
+            // clean up the previous unfinished connection
+            this.dropConnection();
+            addConnectionAction.do();
+            this.actionStack.add(addConnectionAction);
           } else {
-            // error: connection target of wrong type and can't guess for a different type
+            // error: connection target of wrong type and no allowed type can be found
             this.dropConnection();
           }
+        } else {
+          // error: connection target of wrong type and can't guess for a different type
+          this.dropConnection();
         }
-      } else {
-        // error: start port of a connection can't also be the end port
-        this.dropConnection();
       }
     }
   }

package/index.esm.js

@@ -2117,11 +2117,14 @@ class DiagramConnection extends DiagramElement {
    * @public
    */
   tighten() {
-    var _a, _b;
-    if (((_a = this.start) === null || _a === void 0 ? void 0 : _a.rootElement) && this.end) {
+    var _a, _b, _c, _d, _e;
+    const allowConnectionLoops = ((_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.allowConnectionLoops) || false;
+    const allowSharingPorts = ((_b = this.model.canvas) === null || _b === void 0 ? void 0 : _b.allowSharingPorts) !== false;
+    const allowSharingBothPorts = ((_c = this.model.canvas) === null || _c === void 0 ? void 0 : _c.allowSharingBothPorts) || false;
+    if (((_d = this.start) === null || _d === void 0 ? void 0 : _d.rootElement) && this.end) {
       const alternativeStartPortsSortedByDistanceAscending = this.start.rootElement.ports.map(p => [p, p.distanceTo(this.end.coords)]).sort((a, b) => a[1] - b[1]).map(a => a[0]);
       checkAlternativeStartPorts: for (const alternativeStartPort of alternativeStartPortsSortedByDistanceAscending) {
-        if (alternativeStartPort === this.end) {
+        if (!allowConnectionLoops && alternativeStartPort === this.end) {
           // alternative start port not valid, it is the same as the end port
           continue checkAlternativeStartPorts;
         }
@@ -2129,7 +2132,11 @@ class DiagramConnection extends DiagramElement {
           // alternative start port not valid, it doesn't allow outgoing connections
           continue checkAlternativeStartPorts;
         }
-        {
+        if (!allowSharingPorts && (alternativeStartPort.incomingConnections.length === 1 && alternativeStartPort.incomingConnections[0] !== this || alternativeStartPort.incomingConnections.length > 1 || alternativeStartPort.outgoingConnections.length === 1 && alternativeStartPort.outgoingConnections[0] !== this || alternativeStartPort.outgoingConnections.length > 1)) {
+          // alternative start port not valid, it already has other connections
+          continue checkAlternativeStartPorts;
+        }
+        if (!allowSharingBothPorts) {
           for (const connection of alternativeStartPort.outgoingConnections) {
             if (connection !== this && connection.end === this.end) {
               // alternative start port not valid, there is a connection whose start and end matches the alternative start port and this connection's end
@@ -2152,10 +2159,10 @@ class DiagramConnection extends DiagramElement {
         }
       }
     }
-    if (((_b = this.end) === null || _b === void 0 ? void 0 : _b.rootElement) && this.start) {
+    if (((_e = this.end) === null || _e === void 0 ? void 0 : _e.rootElement) && this.start) {
       const alternativeEndPortsSortedByDistanceAscending = this.end.rootElement.ports.map(p => [p, p.distanceTo(this.start.coords)]).sort((a, b) => a[1] - b[1]).map(a => a[0]);
       checkAlternativeEndPorts: for (const alternativeEndPort of alternativeEndPortsSortedByDistanceAscending) {
-        if (alternativeEndPort === this.start) {
+        if (!allowConnectionLoops && alternativeEndPort === this.start) {
           // alternative end port not valid, it is the same as the end port
           continue checkAlternativeEndPorts;
         }
@@ -2163,7 +2170,11 @@ class DiagramConnection extends DiagramElement {
           // alternative end port not valid, it doesn't allow incoming connections
           continue checkAlternativeEndPorts;
         }
-        {
+        if (!allowSharingPorts && (alternativeEndPort.outgoingConnections.length === 1 && alternativeEndPort.outgoingConnections[0] !== this || alternativeEndPort.outgoingConnections.length > 1 || alternativeEndPort.incomingConnections.length === 1 && alternativeEndPort.incomingConnections[0] !== this || alternativeEndPort.incomingConnections.length > 1)) {
+          // alternative end port not valid, it already has other connections
+          continue checkAlternativeEndPorts;
+        }
+        if (!allowSharingBothPorts) {
           for (const connection of alternativeEndPort.incomingConnections) {
             if (connection !== this && connection.start === this.start) {
               // alternative end port not valid, there is a connection whose start and end matches the alternative end port and this connection's start
@@ -2271,6 +2282,7 @@ const DIAGRAM_FIELD_DEFAULTS = {
   fontFamily: "'Wonder Unit Sans', sans-serif",
   color: '#000000',
   selectedColor: '#000000',
+  backgroundColor: '#00000000',
   horizontalAlign: HorizontalAlign.Center,
   verticalAlign: VerticalAlign.Center,
   orientation: Side.Top,
@@ -2927,6 +2939,7 @@ class DiagramSection extends DiagramElement {
    * @public
    */
   setGeometry(geometry) {
+    var _a;
     const oldCoordsX = [this.coords[0], this.coords[0] + this.width];
     const oldCoordsY = [this.coords[1], this.coords[1] + this.height];
     this.coords = [...geometry.coords];
@@ -2950,8 +2963,10 @@ class DiagramSection extends DiagramElement {
     for (const decorator of this.decorators) {
       decorator.move(translatePointWithAnchors(decorator.coords, oldCoordsX, oldCoordsY, newCoordsX, newCoordsY, decorator.anchorPointX, decorator.anchorPointY));
     }
+    if (((_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.autoTightenConnections) !== false) {
+      this.getConnections().forEach(c => c.tighten());
+    }
     // Update canvas.
-    this.getConnections().forEach(c => c.tighten());
     this.updateInView();
   }
 }
@@ -3670,6 +3685,7 @@ class DiagramNode extends DiagramElement {
    * @public
    */
   setGeometry(geometry) {
+    var _a;
     this.raise();
     const oldCoordsX = [this.coords[0], this.coords[0] + this.width];
     const oldCoordsY = [this.coords[1], this.coords[1] + this.height];
@@ -3707,8 +3723,10 @@ class DiagramNode extends DiagramElement {
     for (const decorator of this.decorators) {
       decorator.move(translatePointWithAnchors(decorator.coords, oldCoordsX, oldCoordsY, newCoordsX, newCoordsY, decorator.anchorPointX, decorator.anchorPointY));
     }
+    if (((_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.autoTightenConnections) !== false) {
+      this.getConnections().forEach(c => c.tighten());
+    }
     // Update canvas.
-    this.getConnections().forEach(c => c.tighten());
     this.updateInView();
   }
   /**
@@ -6402,10 +6420,11 @@ class DiagramUserHighlight extends DiagramElementSet {
    * @public
    * @param canvas A canvas.
    */
-  constructor(canvas) {
+  constructor(canvas, highlightSections = true) {
     super();
     this.focus = undefined;
     this.canvas = canvas;
+    this.highlightSections = highlightSections;
   }
   /**
    * Gets the focus of the user highlight, which is the element where the current user highlight started regardless of which other elements were highlighted as a consequence.
@@ -6431,6 +6450,20 @@ class DiagramUserHighlight extends DiagramElementSet {
   add(element) {
     super.add(element);
     if (element instanceof DiagramNode) {
+      if (!this.highlightSections) {
+        for (const section of element.sections) {
+          super.add(section);
+          for (const port of section.ports) {
+            super.add(port);
+            this.canvas.updatePortsInView(port.id);
+          }
+          if (section.label) {
+            super.add(section.label);
+            this.canvas.updateFieldsInView(section.label.id);
+          }
+          this.canvas.updateSectionsInView(section.id);
+        }
+      }
       for (const port of element.ports) {
         super.add(port);
         this.canvas.updatePortsInView(port.id);
@@ -6441,15 +6474,19 @@ class DiagramUserHighlight extends DiagramElementSet {
       }
       this.canvas.updateNodesInView(element.id);
     } else if (element instanceof DiagramSection) {
-      for (const port of element.ports) {
-        super.add(port);
-        this.canvas.updatePortsInView(port.id);
-      }
-      if (element.label) {
-        super.add(element.label);
-        this.canvas.updateFieldsInView(element.label.id);
+      if (!this.highlightSections && element.node) {
+        this.add(element.node);
+      } else {
+        for (const port of element.ports) {
+          super.add(port);
+          this.canvas.updatePortsInView(port.id);
+        }
+        if (element.label) {
+          super.add(element.label);
+          this.canvas.updateFieldsInView(element.label.id);
+        }
+        this.canvas.updateSectionsInView(element.id);
       }
-      this.canvas.updateSectionsInView(element.id);
     } else if (element instanceof DiagramPort) {
       if (element.label) {
         super.add(element.label);
@@ -6918,7 +6955,6 @@ const RESIZER_THICKNESS = 6;
  */
 const ACTION_STACK_SIZE = 25;
 const UNFINISHED_CONNECTION_ID = 'diagram-connection-unfinished';
-const MAX_DISTANCE_TO_PORT = 100;
 class DiagramCanvas {
   get connectionType() {
     return this._connectionType;
@@ -6936,7 +6972,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;
+    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;
     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
@@ -6952,19 +6988,24 @@ class DiagramCanvas {
     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);
-    this.contextMenu = new DiagramContextMenu(this, (_a = config.canvas) === null || _a === void 0 ? void 0 : _a.contextMenu);
-    this.backgroundColor = ((_b = config.canvas) === null || _b === void 0 ? void 0 : _b.backgroundColor) || '#FFFFFF';
-    this.gridStyle = (_e = (_d = (_c = config.canvas) === null || _c === void 0 ? void 0 : _c.grid) === null || _d === void 0 ? void 0 : _d.style) !== null && _e !== void 0 ? _e : GRID_DEFAULTS.style;
-    this.gridSize = ((_g = (_f = config.canvas) === null || _f === void 0 ? void 0 : _f.grid) === null || _g === void 0 ? void 0 : _g.enabled) === false || ((_h = config.canvas) === null || _h === void 0 ? void 0 : _h.grid) === undefined ? 0 : Math.abs(((_k = (_j = config.canvas) === null || _j === void 0 ? void 0 : _j.grid) === null || _k === void 0 ? void 0 : _k.spacing) || GRID_DEFAULTS.spacing);
-    this.gridThickness = Math.abs(((_m = (_l = config.canvas) === null || _l === void 0 ? void 0 : _l.grid) === null || _m === void 0 ? void 0 : _m.thickness) || GRID_DEFAULTS.thickness);
-    this.gridColor = ((_p = (_o = config.canvas) === null || _o === void 0 ? void 0 : _o.grid) === null || _p === void 0 ? void 0 : _p.color) || GRID_DEFAULTS.color;
-    this.snapToGrid = ((_r = (_q = config.canvas) === null || _q === void 0 ? void 0 : _q.grid) === null || _r === void 0 ? void 0 : _r.enabled) === false || ((_s = config.canvas) === null || _s === void 0 ? void 0 : _s.grid) === undefined ? false : ((_u = (_t = config.canvas) === null || _t === void 0 ? void 0 : _t.grid) === null || _u === void 0 ? void 0 : _u.snap) || GRID_DEFAULTS.snap;
-    this.zoomFactor = ((_v = config.canvas) === null || _v === void 0 ? void 0 : _v.zoomFactor) || 2;
-    this.panRate = ((_w = config.canvas) === null || _w === void 0 ? void 0 : _w.panRate) || 100;
-    this.inferConnectionType = config.inferConnectionType || false;
+    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.multipleSelectionOn = false;
-    this.priorityThresholds = ((_x = config.canvas) === null || _x === void 0 ? void 0 : _x.priorityThresholds) || [];
+    this.priorityThresholds = ((_4 = config.canvas) === null || _4 === void 0 ? void 0 : _4.priorityThresholds) || [];
     this.priorityThreshold = this.priorityThresholds ? this.priorityThresholds[0] : undefined;
     this.layoutFormat = config.layoutFormat;
     this.userActions = config.userActions || {};
@@ -6991,7 +7032,7 @@ class DiagramCanvas {
         const connectionType = new DiagramConnectionType(Object.assign(Object.assign({}, config.connectionTypeDefaults), connectionTypeConfig));
         this.model.connections.types.add(connectionType);
       }
-      this._connectionType = config.defaultConnection !== undefined ? this.model.connections.types.get(config.defaultConnection) : undefined;
+      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;
     }
   }
   addValidator(validator) {
@@ -7839,7 +7880,7 @@ class DiagramCanvas {
       if (this.multipleSelectionOn || this.secondaryButton) {
         this.startMultipleSelection(event);
       } else {
-        if (this.canUserPerformAction(DiagramActions.AddConnection) && !d.removed) {
+        if (this.canUserPerformAction(DiagramActions.AddConnection) && (this.allowSharingPorts || d.incomingConnections.length === 0 && d.outgoingConnections.length === 0) && !d.removed) {
           setCursorStyle(CursorStyle.Grabbing);
           this.startConnection(d);
           // should be true after having called this.startConnection()
@@ -7885,7 +7926,7 @@ class DiagramCanvas {
                   closestPortFound = port;
                 }
               }
-              if (closestPortFound && minDistanceFound < MAX_DISTANCE_TO_PORT) {
+              if (closestPortFound && minDistanceFound < this.portHighlightRadius) {
                 this.userHighlight.focusOn(closestPortFound);
               } else {
                 this.userHighlight.clear();
@@ -8290,6 +8331,77 @@ class DiagramCanvas {
     const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), connection.type.label);
     if (pathNode) {
       const pathLength = pathNode.getTotalLength();
+      let startLabelShiftX = 0;
+      let startLabelShiftY = 0;
+      let middleLabelShiftX = 0;
+      let middleLabelShiftY = 0;
+      let endLabelShiftX = 0;
+      let endLabelShiftY = 0;
+      if (labelConfiguration.backgroundColor === '#00000000') {
+        // background color is transparent / not set, so we find an alternative position for the label
+        const deltaX = connection.endCoords[0] - connection.startCoords[0];
+        const deltaY = connection.endCoords[1] - connection.startCoords[1];
+        switch (connection.startDirection) {
+          case Side.Top:
+            startLabelShiftX = deltaX >= 0 ? 1 : -1;
+            middleLabelShiftX = startLabelShiftX;
+            endLabelShiftX = startLabelShiftX;
+            startLabelShiftY = -1;
+            break;
+          case Side.Bottom:
+            startLabelShiftX = deltaX >= 0 ? 1 : -1;
+            middleLabelShiftX = startLabelShiftX;
+            endLabelShiftX = startLabelShiftX;
+            startLabelShiftY = 1;
+            break;
+          case Side.Left:
+            startLabelShiftX = -1;
+            startLabelShiftY = deltaY > 0 ? 1 : -1;
+            middleLabelShiftY = startLabelShiftY;
+            endLabelShiftY = startLabelShiftY;
+            break;
+          case Side.Right:
+            startLabelShiftX = 1;
+            startLabelShiftY = deltaY > 0 ? 1 : -1;
+            middleLabelShiftY = startLabelShiftY;
+            endLabelShiftY = startLabelShiftY;
+            break;
+          default:
+            startLabelShiftX = 1;
+            middleLabelShiftX = startLabelShiftX;
+            endLabelShiftX = startLabelShiftX;
+            startLabelShiftY = -1;
+            middleLabelShiftY = startLabelShiftY;
+            endLabelShiftY = startLabelShiftY;
+        }
+        switch (connection.endDirection) {
+          case Side.Top:
+            endLabelShiftX = deltaX >= 0 ? 1 : -1;
+            middleLabelShiftX = endLabelShiftX;
+            endLabelShiftY = 1;
+            break;
+          case Side.Bottom:
+            endLabelShiftX = deltaX >= 0 ? 1 : -1;
+            middleLabelShiftX = endLabelShiftX;
+            endLabelShiftY = -1;
+            break;
+          case Side.Left:
+            endLabelShiftX = -1;
+            endLabelShiftY = deltaY > 0 ? 1 : -1;
+            middleLabelShiftY = endLabelShiftY;
+            break;
+          case Side.Right:
+            endLabelShiftX = 1;
+            endLabelShiftY = deltaY > 0 ? 1 : -1;
+            middleLabelShiftY = endLabelShiftY;
+            break;
+          default:
+            endLabelShiftX = 1;
+            middleLabelShiftX = endLabelShiftX;
+            endLabelShiftY = -1;
+            middleLabelShiftY = endLabelShiftY;
+        }
+      }
       // bind start labels
       connectionSelection.select('g.diagram-connection-start-label text').attr('x', 0).attr('y', labelConfiguration.fontSize / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.fontFamily).attr('font-size', labelConfiguration.fontSize).attr('fill', connection.selected ? labelConfiguration.selectedColor : labelConfiguration.color).style('font-kerning', 'none').text(connection.startLabel);
       const startLabelBoundingRect = (_a = connectionSelection.select('g.diagram-connection-start-label text').node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
@@ -8298,8 +8410,8 @@ class DiagramCanvas {
         const boundingWidth = !connection.startLabel ? 0 : startLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
         const boundingHeight = !connection.startLabel ? 0 : startLabelBoundingRect.height / this.zoomTransform.k + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
         const pathStartLabelPoint = pathNode.getPointAtLength(Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
-        connectionSelection.select('g.diagram-connection-start-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', connection.look.color).attr('stroke', 'none');
-        connectionSelection.select('g.diagram-connection-start-label').attr('transform', `translate(${pathStartLabelPoint.x},${pathStartLabelPoint.y})`);
+        connectionSelection.select('g.diagram-connection-start-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', labelConfiguration.backgroundColor).attr('stroke', 'none');
+        connectionSelection.select('g.diagram-connection-start-label').attr('transform', `translate(${pathStartLabelPoint.x + startLabelShiftX * boundingWidth},${pathStartLabelPoint.y + startLabelShiftY * boundingHeight})`);
       }
       // bind middle labels
       connectionSelection.select('g.diagram-connection-middle-label text').attr('x', 0).attr('y', labelConfiguration.fontSize / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.fontFamily).attr('font-size', labelConfiguration.fontSize).attr('fill', connection.selected ? labelConfiguration.selectedColor : labelConfiguration.color).style('font-kerning', 'none').text(connection.middleLabel);
@@ -8309,8 +8421,8 @@ class DiagramCanvas {
         const boundingWidth = !connection.middleLabel ? 0 : middleLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
         const boundingHeight = !connection.middleLabel ? 0 : middleLabelBoundingRect.height / this.zoomTransform.k + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
         const pathMiddleLabelPoint = pathNode.getPointAtLength(pathLength / 2);
-        connectionSelection.select('g.diagram-connection-middle-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', connection.look.color).attr('stroke', 'none');
-        connectionSelection.select('g.diagram-connection-middle-label').attr('transform', `translate(${pathMiddleLabelPoint.x},${pathMiddleLabelPoint.y})`);
+        connectionSelection.select('g.diagram-connection-middle-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', labelConfiguration.backgroundColor).attr('stroke', 'none');
+        connectionSelection.select('g.diagram-connection-middle-label').attr('transform', `translate(${pathMiddleLabelPoint.x + middleLabelShiftX * boundingWidth},${pathMiddleLabelPoint.y + middleLabelShiftY * boundingHeight})`);
       }
       // bind end labels
       connectionSelection.select('g.diagram-connection-end-label text').attr('x', 0).attr('y', labelConfiguration.fontSize / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.fontFamily).attr('font-size', labelConfiguration.fontSize).attr('fill', connection.selected ? labelConfiguration.selectedColor : labelConfiguration.color).style('font-kerning', 'none').text(connection.endLabel);
@@ -8320,8 +8432,8 @@ class DiagramCanvas {
         const boundingWidth = !connection.endLabel ? 0 : endLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
         const boundingHeight = !connection.endLabel ? 0 : endLabelBoundingRect.height / this.zoomTransform.k + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
         const pathEndLabelPoint = pathNode.getPointAtLength(pathLength - Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
-        connectionSelection.select('g.diagram-connection-end-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', connection.look.color).attr('stroke', 'none');
-        connectionSelection.select('g.diagram-connection-end-label').attr('transform', `translate(${pathEndLabelPoint.x},${pathEndLabelPoint.y})`);
+        connectionSelection.select('g.diagram-connection-end-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', labelConfiguration.backgroundColor).attr('stroke', 'none');
+        connectionSelection.select('g.diagram-connection-end-label').attr('transform', `translate(${pathEndLabelPoint.x + endLabelShiftX * boundingWidth},${pathEndLabelPoint.y + endLabelShiftY * boundingHeight})`);
       }
     }
   }
@@ -8493,51 +8605,61 @@ class DiagramCanvas {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     this.userHighlight.clear();
     if (this.unfinishedConnection !== undefined) {
-      if (this.unfinishedConnection.start !== port) {
-        if (this.unfinishedConnection.type.canStartFromType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === void 0 ? void 0 : _e.start) === null || _f === void 0 ? void 0 : _f.allowsOutgoing) && this.unfinishedConnection.type.canFinishOnType(((_h = (_g = port.getNode()) === null || _g === void 0 ? void 0 : _g.type) === null || _h === void 0 ? void 0 : _h.id) || '') && port.allowsIncoming) {
-          const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, (_j = this.unfinishedConnection.start) === null || _j === void 0 ? void 0 : _j.id, port.id);
-          // clean up the previous unfinished connection
-          this.dropConnection();
-          addConnectionAction.do();
-          this.actionStack.add(addConnectionAction);
-        } else if (this.unfinishedConnection.type.canFinishOnType(((_o = (_m = (_l = (_k = this.unfinishedConnection) === null || _k === void 0 ? void 0 : _k.start) === null || _l === void 0 ? void 0 : _l.getNode()) === null || _m === void 0 ? void 0 : _m.type) === null || _o === void 0 ? void 0 : _o.id) || '') && ((_q = (_p = this.unfinishedConnection) === null || _p === void 0 ? void 0 : _p.start) === null || _q === void 0 ? void 0 : _q.allowsIncoming) && this.unfinishedConnection.type.canStartFromType(((_s = (_r = port.getNode()) === null || _r === void 0 ? void 0 : _r.type) === null || _s === void 0 ? void 0 : _s.id) || '') && port.allowsOutgoing) {
-          const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, port.id, (_t = this.unfinishedConnection.start) === null || _t === void 0 ? void 0 : _t.id);
-          // clean up the previous unfinished connection
-          this.dropConnection();
-          addConnectionAction.do();
-          this.actionStack.add(addConnectionAction);
-        } else {
-          if (this.inferConnectionType) {
-            let differentConnectionType = this.model.connections.types.all().find(t => {
+      if (!this.allowConnectionLoops && this.unfinishedConnection.start === port) {
+        this.dropConnection();
+        return;
+      }
+      if (!this.allowSharingPorts && (port.incomingConnections.length > 0 || port.outgoingConnections.length > 0)) {
+        this.dropConnection();
+        return;
+      }
+      if (!this.allowSharingBothPorts && this.model.connections.find(c => {
+        var _a, _b;
+        return c.start === ((_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) && c.end === port || c.end === ((_b = this.unfinishedConnection) === null || _b === void 0 ? void 0 : _b.start) && c.start === port;
+      }) !== undefined) {
+        this.dropConnection();
+        return;
+      }
+      if (this.unfinishedConnection.type.canStartFromType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === void 0 ? void 0 : _e.start) === null || _f === void 0 ? void 0 : _f.allowsOutgoing) && this.unfinishedConnection.type.canFinishOnType(((_h = (_g = port.getNode()) === null || _g === void 0 ? void 0 : _g.type) === null || _h === void 0 ? void 0 : _h.id) || '') && port.allowsIncoming) {
+        const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, (_j = this.unfinishedConnection.start) === null || _j === void 0 ? void 0 : _j.id, port.id);
+        // clean up the previous unfinished connection
+        this.dropConnection();
+        addConnectionAction.do();
+        this.actionStack.add(addConnectionAction);
+      } else if (this.unfinishedConnection.type.canFinishOnType(((_o = (_m = (_l = (_k = this.unfinishedConnection) === null || _k === void 0 ? void 0 : _k.start) === null || _l === void 0 ? void 0 : _l.getNode()) === null || _m === void 0 ? void 0 : _m.type) === null || _o === void 0 ? void 0 : _o.id) || '') && ((_q = (_p = this.unfinishedConnection) === null || _p === void 0 ? void 0 : _p.start) === null || _q === void 0 ? void 0 : _q.allowsIncoming) && this.unfinishedConnection.type.canStartFromType(((_s = (_r = port.getNode()) === null || _r === void 0 ? void 0 : _r.type) === null || _s === void 0 ? void 0 : _s.id) || '') && port.allowsOutgoing) {
+        const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, port.id, (_t = this.unfinishedConnection.start) === null || _t === void 0 ? void 0 : _t.id);
+        // clean up the previous unfinished connection
+        this.dropConnection();
+        addConnectionAction.do();
+        this.actionStack.add(addConnectionAction);
+      } else {
+        if (this.inferConnectionType) {
+          let differentConnectionType = this.model.connections.types.all().find(t => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            return t.canStartFromType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === void 0 ? void 0 : _e.start) === null || _f === void 0 ? void 0 : _f.allowsOutgoing) && t.canFinishOnType(((_h = (_g = port.getNode()) === null || _g === void 0 ? void 0 : _g.type) === null || _h === void 0 ? void 0 : _h.id) || '') && port.allowsIncoming;
+          });
+          let invertConnection = false;
+          if (differentConnectionType === undefined) {
+            differentConnectionType = this.model.connections.types.all().find(t => {
               var _a, _b, _c, _d, _e, _f, _g, _h;
-              return t.canStartFromType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === void 0 ? void 0 : _e.start) === null || _f === void 0 ? void 0 : _f.allowsOutgoing) && t.canFinishOnType(((_h = (_g = port.getNode()) === null || _g === void 0 ? void 0 : _g.type) === null || _h === void 0 ? void 0 : _h.id) || '') && port.allowsIncoming;
+              return t.canFinishOnType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === void 0 ? void 0 : _e.start) === null || _f === void 0 ? void 0 : _f.allowsIncoming) && t.canStartFromType(((_h = (_g = port.getNode()) === null || _g === void 0 ? void 0 : _g.type) === null || _h === void 0 ? void 0 : _h.id) || '') && port.allowsOutgoing;
             });
-            let invertConnection = false;
-            if (differentConnectionType === undefined) {
-              differentConnectionType = this.model.connections.types.all().find(t => {
-                var _a, _b, _c, _d, _e, _f, _g, _h;
-                return t.canFinishOnType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === void 0 ? void 0 : _e.start) === null || _f === void 0 ? void 0 : _f.allowsIncoming) && t.canStartFromType(((_h = (_g = port.getNode()) === null || _g === void 0 ? void 0 : _g.type) === null || _h === void 0 ? void 0 : _h.id) || '') && port.allowsOutgoing;
-              });
-              invertConnection = true;
-            }
-            if (differentConnectionType !== undefined) {
-              const addConnectionAction = new AddConnectionAction(this, differentConnectionType, invertConnection ? port.id : (_u = this.unfinishedConnection.start) === null || _u === void 0 ? void 0 : _u.id, invertConnection ? (_v = this.unfinishedConnection.start) === null || _v === void 0 ? void 0 : _v.id : port.id);
-              // clean up the previous unfinished connection
-              this.dropConnection();
-              addConnectionAction.do();
-              this.actionStack.add(addConnectionAction);
-            } else {
-              // error: connection target of wrong type and no allowed type can be found
-              this.dropConnection();
-            }
+            invertConnection = true;
+          }
+          if (differentConnectionType !== undefined) {
+            const addConnectionAction = new AddConnectionAction(this, differentConnectionType, invertConnection ? port.id : (_u = this.unfinishedConnection.start) === null || _u === void 0 ? void 0 : _u.id, invertConnection ? (_v = this.unfinishedConnection.start) === null || _v === void 0 ? void 0 : _v.id : port.id);
+            // clean up the previous unfinished connection
+            this.dropConnection();
+            addConnectionAction.do();
+            this.actionStack.add(addConnectionAction);
           } else {
-            // error: connection target of wrong type and can't guess for a different type
+            // error: connection target of wrong type and no allowed type can be found
             this.dropConnection();
           }
+        } else {
+          // error: connection target of wrong type and can't guess for a different type
+          this.dropConnection();
         }
-      } else {
-        // error: start port of a connection can't also be the end port
-        this.dropConnection();
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metadev/daga",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "dependencies": {},
   "peerDependencies": {
     "d3": "^7.9.0",

package/src/lib/diagram/canvas/diagram-canvas.d.ts

@@ -49,10 +49,15 @@ export declare class DiagramCanvas implements Canvas {
     zoomFactor: number;
     panRate: number;
     inferConnectionType: boolean;
-    multipleSelectionOn: boolean;
     private _connectionType?;
     get connectionType(): DiagramConnectionType | undefined;
     set connectionType(value: DiagramConnectionType | undefined);
+    autoTightenConnections: boolean;
+    allowConnectionLoops: boolean;
+    allowSharingPorts: boolean;
+    allowSharingBothPorts: boolean;
+    portHighlightRadius: number;
+    multipleSelectionOn: boolean;
     layoutFormat?: string;
     validators: DiagramValidator[];
     userActions: {

package/src/lib/diagram/canvas/diagram-user-highlight.d.ts

@@ -8,12 +8,16 @@ import { DiagramElement, DiagramElementSet } from '../model/diagram-element';
 export declare class DiagramUserHighlight extends DiagramElementSet<DiagramElement> {
     private readonly canvas;
     private focus?;
+    /**
+     * Whether sections can be highlighted individually or the whole node must be highlighted when highlighting a section.
+     */
+    private highlightSections;
     /**
      * Constructs a user highlight object.
      * @public
      * @param canvas A canvas.
      */
-    constructor(canvas: Canvas);
+    constructor(canvas: Canvas, highlightSections?: boolean);
     /**
      * Gets the focus of the user highlight, which is the element where the current user highlight started regardless of which other elements were highlighted as a consequence.
      * @public

package/src/lib/diagram/config/diagram-canvas-config.d.ts

@@ -30,6 +30,11 @@ export interface CanvasConfig {
      * @default 100
      */
     panRate?: number;
+    /**
+     * Whether sections can be highlighted individually or the whole node must be highlighted when highlighting a section.
+     * @default true
+     */
+    highlightSections?: boolean;
     /**
      * Possible values of the priority threshold that the user can toggle between to hide nodes whose priority value is below it.
      * If it is possible to toggle the priority threshold via the filter button, it should have at least two values.

package/src/lib/diagram/config/diagram-config.d.ts

@@ -26,15 +26,10 @@ export interface DiagramConfig {
      */
     canvas?: CanvasConfig;
     /**
-     * When true, connections made by the user will have their type assumed based on the type of the source and target nodes.
-     * @default false
-     */
-    inferConnectionType?: boolean;
-    /**
-     * Id of the type of connection that is initially selected for the user to draw when drawing connections. By default, no type is selected.
-     * @default undefined
+     * Configuration regarding the general settings of connections.
+     * @default {}
      */
-    defaultConnection?: string;
+    connectionSettings?: ConnectionSettingsConfig;
     /**
      * Name of the layout format used to arrange the nodes of this diagram when pressing the layout button in the diagram buttons component.
      * @default undefined
@@ -88,6 +83,47 @@ export interface DiagramConfig {
      */
     properties?: Property[];
 }
+/**
+ * Configuration regarding the general settings of connections.
+ * @public
+ */
+export interface ConnectionSettingsConfig {
+    /**
+     * When true, connections made by the user will have their type assumed based on the type of the source and target nodes.
+     * @default false
+     */
+    inferConnectionType?: boolean;
+    /**
+     * Id of the type of connection that is initially selected for the user to draw when drawing connections. By default, no type is selected.
+     * @default undefined
+     */
+    defaultConnection?: string;
+    /**
+     * Automatically try to change the start and end ports of a connection to minimize the distance between them.
+     * @default true
+     */
+    autoTighten?: boolean;
+    /**
+     * Whether a connection can use the same port as start and end.
+     * @default false
+     */
+    allowLoops?: boolean;
+    /**
+     * Whether the same port can be used by two different connections.
+     * @default true
+     */
+    sharePorts?: boolean;
+    /**
+     * Whether two connections can use the same ports.
+     * @default false
+     */
+    shareBothPorts?: boolean;
+    /**
+     * Within what radius the closest port may be highlighted when drawing a new connection as a guide to the user.
+     * @default 100
+     */
+    portHighlightRadius?: number;
+}
 /**
  * Configuration for which user actions are allowed in a diagram.
  * @public
@@ -314,6 +350,11 @@ export interface FieldConfig {
      * @default '#000000'
      */
     color?: string;
+    /**
+     * The background color of the text of this field.
+     * @default '#00000000'
+     */
+    backgroundColor?: string;
     /**
      * The color of the text of this field when selected.
      * @default '#000000'

package/src/lib/diagram/model/diagram-connection.d.ts

@@ -36,22 +36,6 @@ export declare const DIAGRAM_CONNECTION_TYPE_DEFAULTS: {
     endTypes: never[];
     properties: never[];
 };
-/**
- * Whether a connection can have the same port as both its start port and its end port.
- */
-export declare const CAN_A_CONNECTION_END_ON_THE_SAME_PORT_IT_STARTS = false;
-/**
- * Whether a connection can have the same ports as another connection.
- */
-export declare const CAN_A_CONNECTION_HAVE_THE_SAME_PORTS_AS_ANOTHER = false;
-/**
- * Whether a port can have multiple connections.
- */
-export declare const CAN_CONNECTIONS_SHARE_PORTS = true;
-/**
- * Whether tightening connections is allowed.
- */
-export declare const CAN_TIGHTEN_CONNECTIONS = true;
 /**
  * The types allowed for the look of the markers of a connection.
  * @public

package/src/lib/diagram/model/diagram-field.d.ts

@@ -17,6 +17,7 @@ export declare const DIAGRAM_FIELD_DEFAULTS: {
     fontFamily: string;
     color: string;
     selectedColor: string;
+    backgroundColor: string;
     horizontalAlign: HorizontalAlign;
     verticalAlign: VerticalAlign;
     orientation: Side;

package/src/lib/interfaces/canvas.d.ts

@@ -98,15 +98,40 @@ export interface Canvas {
      * @public
      */
     inferConnectionType: boolean;
-    /**
-     * If true, the next drag action will create a multiple selection rectangle.
-     */
-    multipleSelectionOn: boolean;
     /**
      * When a new connection is made, it should have this type.
      * @public
      */
     connectionType?: DiagramConnectionType;
+    /**
+     * Whether the start and end ports should automatically change to try to minimize the distance between them.
+     * @public
+     */
+    autoTightenConnections: boolean;
+    /**
+     * Whether a connection can use the same port as start and end.
+     * @public
+     */
+    allowConnectionLoops: boolean;
+    /**
+     * Whether the same port can be used by two different connections.
+     * @public
+     */
+    allowSharingPorts: boolean;
+    /**
+     * Whether two connections can use the same ports.
+     * @public
+     */
+    allowSharingBothPorts: boolean;
+    /**
+     * Within what radius the closest port may be highlighted when drawing a new connection as a guide to the user.
+     * @public
+     */
+    portHighlightRadius: number;
+    /**
+     * If true, the next drag action will create a multiple selection rectangle.
+     */
+    multipleSelectionOn: boolean;
     /**
      * Identifier of the current layout format used by the diagram.
      * @public