@metadev/daga 4.2.2 → 4.2.4

package/Changelog.md

@@ -6,9 +6,22 @@ List of releases and changes.
 
 ## Next release Joyeuse
 
+## v. 4.2.4
+
+- Enable configuring line style in shaped looks [#313](https://github.com/metadevpro/daga/pull/313)
+- Enable default values for parameters of looks [#313](https://github.com/metadevpro/daga/pull/313)
+- Use optional `label` fields in `Property` [#314](https://github.com/metadevpro/daga/pull/314)
+- Use default values for `basic` and `editable` fields of `Property` [#315](https://github.com/metadevpro/daga/pull/315)
+
+## 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

@@ -1224,8 +1224,9 @@ class DiagramElementSet extends DiagramEntitySet {
  * @see ValueSet
  */
 class Property {
-  constructor(name, type, defaultValue, basic, editable, rootAttribute) {
+  constructor(name, label, type, defaultValue, basic, editable, rootAttribute) {
     this.name = name;
+    this.label = label;
     this.type = type;
     this.defaultValue = defaultValue;
     this.basic = basic;
@@ -1745,7 +1746,7 @@ class ValueSet {
           this.setRootElementValue(rootAttribute, this.values[key]);
         }
       }
-      if (property.basic) {
+      if (property.basic !== false) {
         this.displayedProperties.push(property);
       } else {
         this.hiddenProperties.push(property);
@@ -2138,11 +2139,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 +2154,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 +2181,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 +2192,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 +2304,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 +2961,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 +2985,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 +3707,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 +3745,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();
   }
   /**
@@ -6236,8 +6255,14 @@ const initializeLook = selection => {
   selection.filter('.stretchable-image-look').append('image').attr('class', 'bottom-image').attr('preserveAspectRatio', 'none');
   selection.filter('.stretchable-image-look').append('image').attr('class', 'bottom-right-image').attr('preserveAspectRatio', 'none');
 };
+const SHAPED_LOOK_DEFAULTS = {
+  fillColor: '#FFFFFF',
+  borderColor: '#000000',
+  borderThickness: 1,
+  borderStyle: exports.LineStyle.Solid
+};
 const updateLook = selection => {
-  selection.filter('.shaped-look').select('path').attr('d', d => generalClosedPath(d.look.shape, 0, 0, d.width, d.height)).attr('fill', d => d.look.fillColor).attr('stroke', d => d.look.borderColor).attr('stroke-width', d => `${d.look.borderThickness}px`);
+  selection.filter('.shaped-look').select('path').attr('d', d => generalClosedPath(d.look.shape || exports.ClosedShape.Rectangle, 0, 0, d.width, d.height)).attr('fill', d => d.look.fillColor || SHAPED_LOOK_DEFAULTS.fillColor).attr('stroke', d => d.look.borderColor || SHAPED_LOOK_DEFAULTS.borderColor).attr('stroke-width', d => `${d.look.borderThickness || SHAPED_LOOK_DEFAULTS.borderThickness}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.borderStyle || SHAPED_LOOK_DEFAULTS.borderStyle, d.look.borderThickness || SHAPED_LOOK_DEFAULTS.borderThickness));
   selection.filter('.image-look').select('image').attr('x', 0).attr('y', 0).attr('width', d => d.width).attr('height', d => d.height).attr('href', d => d.look.backgroundImage);
   selection.filter('.stretchable-image-look').select('image.top-left-image').attr('x', 0).attr('y', 0).attr('width', d => d.look.leftMargin).attr('height', d => d.look.topMargin).attr('href', d => d.look.backgroundImageTopLeft);
   selection.filter('.stretchable-image-look').select('image.top-image').attr('x', d => d.look.leftMargin).attr('y', 0).attr('width', d => d.width - d.look.rightMargin - d.look.leftMargin).attr('height', d => d.look.topMargin).attr('href', d => d.look.backgroundImageTop);
@@ -6423,10 +6448,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 +6478,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 +6502,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 +6983,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 +7000,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 +7016,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 +7060,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 +7908,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()
@@ -7879,7 +7927,7 @@ class DiagramCanvas {
         if (this.canUserPerformAction(exports.DiagramActions.AddConnection) && !d.removed) {
           if (this.unfinishedConnection !== undefined) {
             const endCoords = [event.x, event.y];
-            (_a = this.unfinishedConnectionTracer) === null || _a === void 0 ? void 0 : _a.attr('d', getConnectionPath(this.unfinishedConnection.look.shape, this.unfinishedConnection.startCoords, endCoords, this.unfinishedConnection.startDirection, this.unfinishedConnection.endDirection, this.unfinishedConnection.look.thickness, (_b = this.unfinishedConnection.startMarkerLook) === null || _b === void 0 ? void 0 : _b.width, (_c = this.unfinishedConnection.endMarkerLook) === null || _c === void 0 ? void 0 : _c.width));
+            (_a = this.unfinishedConnectionTracer) === null || _a === void 0 ? void 0 : _a.attr('d', getConnectionPath(this.unfinishedConnection.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, this.unfinishedConnection.startCoords, endCoords, this.unfinishedConnection.startDirection, this.unfinishedConnection.endDirection, this.unfinishedConnection.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_b = this.unfinishedConnection.startMarkerLook) === null || _b === void 0 ? void 0 : _b.width, (_c = this.unfinishedConnection.endMarkerLook) === null || _c === void 0 ? void 0 : _c.width));
             const unfinishedConnectionGhostNode = (_d = this.unfinishedConnectionTracer) === null || _d === void 0 ? void 0 : _d.node();
             if (unfinishedConnectionGhostNode) {
               let margin = 2;
@@ -7906,7 +7954,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();
@@ -8027,14 +8075,14 @@ class DiagramCanvas {
     enterSelection.select('g.diagram-connection-end-label').append('text').style('user-select', 'none');
     mergeSelection.attr('opacity', d => d.removed ? 0.5 : 1).select('path.diagram-connection-path').attr('d', d => {
       var _a, _b;
-      return getConnectionPath(d.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.look.thickness, (_a = d.startMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.endMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
-    }).attr('marker-start', d => `url(#${d.id}-start-marker)`).attr('marker-end', d => `url(#${d.id}-end-marker)`).attr('stroke', d => d.look.color).attr('stroke-width', d => `${d.look.thickness}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style, d.look.thickness)).attr('fill', 'none');
+      return getConnectionPath(d.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_a = d.startMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.endMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
+    }).attr('marker-start', d => `url(#${d.id}-start-marker)`).attr('marker-end', d => `url(#${d.id}-end-marker)`).attr('stroke', d => d.look.color || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.color).attr('stroke-width', d => `${d.look.thickness}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.style, d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness)).attr('fill', 'none');
     mergeSelection.select('path.diagram-connection-path-box').attr('d', d => {
       var _a, _b;
-      return getConnectionPath(d.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.look.thickness, (_a = d.startMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.endMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
+      return getConnectionPath(d.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_a = d.startMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.endMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
     }).attr('stroke', 'transparent')
     // allow generating pointer events even when it is transparent
-    .attr('pointer-events', 'stroke').attr('stroke-width', d => `${d.look.thickness + CONNECTION_PATH_BOX_THICKNESS}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style, d.look.thickness)).attr('fill', 'none');
+    .attr('pointer-events', 'stroke').attr('stroke-width', d => `${(d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness) + CONNECTION_PATH_BOX_THICKNESS}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.style, d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness)).attr('fill', 'none');
     mergeSelection.data().forEach(connection => {
       this.updateConnectionLabelsInView(connection);
       this.updateConnectionMarkersInView(connection);
@@ -8311,6 +8359,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 +8438,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 +8449,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 +8460,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 +8633,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();
       }
     }
   }