@metadev/daga 4.2.2 → 4.2.4

package/index.esm.js

@@ -1203,8 +1203,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;
@@ -1724,7 +1725,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);
@@ -2117,11 +2118,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 +2133,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 +2160,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 +2171,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 +2283,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 +2940,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 +2964,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 +3686,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 +3724,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();
   }
   /**
@@ -6215,8 +6234,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: 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 || 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);
@@ -6402,10 +6427,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 +6457,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 +6481,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 +6962,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 +6979,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 +6995,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 +7039,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 +7887,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()
@@ -7858,7 +7906,7 @@ class DiagramCanvas {
         if (this.canUserPerformAction(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;
@@ -7885,7 +7933,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();
@@ -8006,14 +8054,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);
@@ -8290,6 +8338,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 +8417,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 +8428,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 +8439,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 +8612,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.4",
   "dependencies": {},
   "peerDependencies": {
     "d3": "^7.9.0",

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

@@ -1,6 +1,6 @@
 import * as d3 from 'd3';
 import { Point } from '../../util/canvas-util';
-import { LineFunction, LineShape } from '../../util/line';
+import { LineFunction, LineShape, LineStyle } from '../../util/line';
 import { CursorStyle } from '../../util/style';
 import { Side } from '../../util/svg-util';
 import { DiagramField } from '../model/diagram-field';
@@ -24,6 +24,12 @@ export declare const getConnectionPath: (shape: LineShape | LineFunction, startC
 export declare const setCursorStyle: (style?: CursorStyle) => void;
 export declare const getRelatedNodeOrItself: (element: DiagramNode | DiagramSection | DiagramPort | DiagramField) => DiagramNode | DiagramSection | DiagramPort | DiagramField;
 export declare const initializeLook: (selection: d3.Selection<SVGGElement, DiagramNode | DiagramSection | DiagramPort, d3.BaseType, unknown>) => void;
+export declare const SHAPED_LOOK_DEFAULTS: {
+    fillColor: string;
+    borderColor: string;
+    borderThickness: number;
+    borderStyle: LineStyle;
+};
 export declare const updateLook: (selection: d3.Selection<SVGGElement, DiagramNode | DiagramSection | DiagramPort, d3.BaseType, unknown>) => void;
 export declare const GRID_DEFAULTS: {
     enabled: boolean;

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.