@metadev/daga 4.2.8 → 4.2.9

package/Changelog.md

@@ -6,6 +6,12 @@ List of releases and changes.
 
 ## Next release Joyeuse
 
+## v. 4.2.9
+
+- Enable configuring the text heading the diagram properties component to values other than `'Diagram properties'` [#341](https://github.com/metadevpro/daga/pull/341)
+- Enable opening diagram properties in property editor even without involving a deselection [#342](https://github.com/metadevpro/daga/pull/342)
+- Enable binding properties of diagram elements to the element's `lookConfig` when applicable [#343](https://github.com/metadevpro/daga/pull/343)
+
 ## v. 4.2.8
 
 - Add a snap to grid offset to node types [#337](https://github.com/metadevpro/daga/pull/337)

package/index.cjs.js

@@ -2248,23 +2248,38 @@ class DiagramConnection extends DiagramElement {
       }
     }
   }
+  /**
+   * An alias for the `lookConfig` attribute.
+   * @private
+   */
+  set look(look) {
+    this.lookConfig = look;
+  }
+  /**
+   * Look configuration used to derive the current look of this connection.
+   * @private
+   */
+  get lookConfig() {
+    return this._lookConfig;
+  }
   /**
    * Sets the look configuration of the connection to override the one determined by the type.
    * `undefined` resets it to the one determined by the type.
    * @private
    */
-  set look(look) {
-    if (look) {
-      const looks = extractLooksFromConfig(look);
+  set lookConfig(lookConfig) {
+    this._lookConfig = lookConfig;
+    if (lookConfig) {
+      const looks = extractLooksFromConfig(lookConfig);
       this._defaultLook = Object.assign(Object.assign({}, this._defaultLook), looks.defaultLook);
       this._selectedLook = Object.assign(Object.assign({}, this._selectedLook), looks.selectedLook);
       this._highlightedLook = Object.assign(Object.assign({}, this._highlightedLook), looks.highlightedLook);
       this._selectedAndHighlightedLook = Object.assign(Object.assign({}, this._selectedAndHighlightedLook), looks.selectedAndHighlightedLook);
     } else {
-      this._defaultLook = look;
-      this._selectedLook = look;
-      this._highlightedLook = look;
-      this._selectedAndHighlightedLook = look;
+      this._defaultLook = lookConfig;
+      this._selectedLook = lookConfig;
+      this._highlightedLook = lookConfig;
+      this._selectedAndHighlightedLook = lookConfig;
     }
   }
   /**
@@ -2286,23 +2301,38 @@ class DiagramConnection extends DiagramElement {
       }
     }
   }
+  /**
+   * An alias for the `lookConfig` attribute.
+   * @private
+   */
+  set startMarkerLook(startMarkerLook) {
+    this.startMarkerLookConfig = startMarkerLook;
+  }
+  /**
+   * Look configuration used to derive the current look of the start marker of this connection.
+   * @private
+   */
+  get startMarkerLookConfig() {
+    return this._startMarkerLookConfig;
+  }
   /**
    * Sets the look configuration of the start marker to override the one determined by the type.
    * `null` stands for no marker and `undefined` resets it to the one determined by the type.
    * @private
    */
-  set startMarkerLook(startMarkerLook) {
-    if (startMarkerLook) {
-      const looks = extractLooksFromConfig(startMarkerLook);
+  set startMarkerLookConfig(startMarkerLookConfig) {
+    this._startMarkerLookConfig = startMarkerLookConfig;
+    if (startMarkerLookConfig) {
+      const looks = extractLooksFromConfig(startMarkerLookConfig);
       this._defaultStartMarkerLook = Object.assign(Object.assign({}, this._defaultStartMarkerLook), looks.defaultLook);
       this._selectedStartMarkerLook = Object.assign(Object.assign({}, this._selectedStartMarkerLook), looks.selectedLook);
       this._highlightedStartMarkerLook = Object.assign(Object.assign({}, this._highlightedStartMarkerLook), looks.highlightedLook);
       this._selectedAndHighlightedStartMarkerLook = Object.assign(Object.assign({}, this._selectedAndHighlightedStartMarkerLook), looks.selectedAndHighlightedLook);
     } else {
-      this._defaultStartMarkerLook = startMarkerLook;
-      this._selectedStartMarkerLook = startMarkerLook;
-      this._highlightedStartMarkerLook = startMarkerLook;
-      this._selectedAndHighlightedStartMarkerLook = startMarkerLook;
+      this._defaultStartMarkerLook = startMarkerLookConfig;
+      this._selectedStartMarkerLook = startMarkerLookConfig;
+      this._highlightedStartMarkerLook = startMarkerLookConfig;
+      this._selectedAndHighlightedStartMarkerLook = startMarkerLookConfig;
     }
   }
   /**
@@ -2324,23 +2354,38 @@ class DiagramConnection extends DiagramElement {
       }
     }
   }
+  /**
+   * An alias for the `lookConfig` attribute.
+   * @private
+   */
+  set endMarkerLook(endMarkerLook) {
+    this.endMarkerLookConfig = endMarkerLook;
+  }
+  /**
+   * Look configuration used to derive the current look of the end marker of this connection.
+   * @private
+   */
+  get endMarkerLookConfig() {
+    return this._endMarkerLookConfig;
+  }
   /**
    * Sets the look configuration of the end marker to override the one determined by the type.
    * `null` stands for no marker and `undefined` resets it to the one determined by the type.
    * @private
    */
-  set endMarkerLook(endMarkerLook) {
-    if (endMarkerLook) {
-      const looks = extractLooksFromConfig(endMarkerLook);
+  set endMarkerLookConfig(endMarkerLookConfig) {
+    this._endMarkerLookConfig = endMarkerLookConfig;
+    if (endMarkerLookConfig) {
+      const looks = extractLooksFromConfig(endMarkerLookConfig);
       this._defaultEndMarkerLook = Object.assign(Object.assign({}, this._defaultEndMarkerLook), looks.defaultLook);
       this._selectedEndMarkerLook = Object.assign(Object.assign({}, this._selectedEndMarkerLook), looks.selectedLook);
       this._highlightedEndMarkerLook = Object.assign(Object.assign({}, this._highlightedEndMarkerLook), looks.highlightedLook);
       this._selectedAndHighlightedEndMarkerLook = Object.assign(Object.assign({}, this._selectedAndHighlightedEndMarkerLook), looks.selectedAndHighlightedLook);
     } else {
-      this._defaultEndMarkerLook = endMarkerLook;
-      this._selectedEndMarkerLook = endMarkerLook;
-      this._highlightedEndMarkerLook = endMarkerLook;
-      this._selectedAndHighlightedEndMarkerLook = endMarkerLook;
+      this._defaultEndMarkerLook = endMarkerLookConfig;
+      this._selectedEndMarkerLook = endMarkerLookConfig;
+      this._highlightedEndMarkerLook = endMarkerLookConfig;
+      this._selectedAndHighlightedEndMarkerLook = endMarkerLookConfig;
     }
   }
   constructor(model, type, start, end, id) {
@@ -3015,23 +3060,38 @@ class DiagramSection extends DiagramElement {
       }
     }
   }
+  /**
+   * An alias for the `lookConfig` attribute.
+   * @private
+   */
+  set look(look) {
+    this.lookConfig = look;
+  }
+  /**
+   * Look configuration used to derive the current look of this section.
+   * @private
+   */
+  get lookConfig() {
+    return this._lookConfig;
+  }
   /**
    * Sets the look configuration of the look to override the one determined by the type.
    * `undefined` resets it to the one determined by the type.
    * @private
    */
-  set look(look) {
-    if (look) {
-      const looks = extractLooksFromConfig(look);
+  set lookConfig(lookConfig) {
+    this._lookConfig = lookConfig;
+    if (lookConfig) {
+      const looks = extractLooksFromConfig(lookConfig);
       this._defaultLook = Object.assign(Object.assign({}, this._defaultLook), looks.defaultLook);
       this._selectedLook = Object.assign(Object.assign({}, this._selectedLook), looks.selectedLook);
       this._highlightedLook = Object.assign(Object.assign({}, this._highlightedLook), looks.highlightedLook);
       this._selectedAndHighlightedLook = Object.assign(Object.assign({}, this._selectedAndHighlightedLook), looks.selectedAndHighlightedLook);
     } else {
-      this._defaultLook = look;
-      this._selectedLook = look;
-      this._highlightedLook = look;
-      this._selectedAndHighlightedLook = look;
+      this._defaultLook = lookConfig;
+      this._selectedLook = lookConfig;
+      this._highlightedLook = lookConfig;
+      this._selectedAndHighlightedLook = lookConfig;
     }
   }
   constructor(model, node, indexXInNode, indexYInNode, coords, width, height, id) {
@@ -3529,23 +3589,38 @@ class DiagramNode extends DiagramElement {
       }
     }
   }
+  /**
+   * An alias for the `lookConfig` attribute.
+   * @private
+   */
+  set look(look) {
+    this.lookConfig = look;
+  }
+  /**
+   * Look configuration used to derive the current look of this node.
+   * @private
+   */
+  get lookConfig() {
+    return this._lookConfig;
+  }
   /**
    * Sets the look configuration of the look to override the one determined by the type.
    * `undefined` resets it to the one determined by the type.
    * @private
    */
-  set look(look) {
-    if (look) {
-      const looks = extractLooksFromConfig(look);
+  set lookConfig(lookConfig) {
+    this._lookConfig = lookConfig;
+    if (lookConfig) {
+      const looks = extractLooksFromConfig(lookConfig);
       this._defaultLook = Object.assign(Object.assign({}, this._defaultLook), looks.defaultLook);
       this._selectedLook = Object.assign(Object.assign({}, this._selectedLook), looks.selectedLook);
       this._highlightedLook = Object.assign(Object.assign({}, this._highlightedLook), looks.highlightedLook);
       this._selectedAndHighlightedLook = Object.assign(Object.assign({}, this._selectedAndHighlightedLook), looks.selectedAndHighlightedLook);
     } else {
-      this._defaultLook = look;
-      this._selectedLook = look;
-      this._highlightedLook = look;
-      this._selectedAndHighlightedLook = look;
+      this._defaultLook = lookConfig;
+      this._selectedLook = lookConfig;
+      this._highlightedLook = lookConfig;
+      this._selectedAndHighlightedLook = lookConfig;
     }
   }
   constructor(model, type, coords = [0, 0], id) {
@@ -4557,23 +4632,38 @@ class DiagramPort extends DiagramElement {
       }
     }
   }
+  /**
+   * An alias for the `lookConfig` attribute.
+   * @private
+   */
+  set look(look) {
+    this.lookConfig = look;
+  }
+  /**
+   * Look configuration used to derive the current look of this port.
+   * @private
+   */
+  get lookConfig() {
+    return this._lookConfig;
+  }
   /**
    * Sets the look configuration of the look to override the one determined by the type.
    * `undefined` resets it to the one determined by the type.
    * @private
    */
-  set look(look) {
-    if (look) {
-      const looks = extractLooksFromConfig(look);
+  set lookConfig(lookConfig) {
+    this._lookConfig = lookConfig;
+    if (lookConfig) {
+      const looks = extractLooksFromConfig(lookConfig);
       this._defaultLook = Object.assign(Object.assign({}, this._defaultLook), looks.defaultLook);
       this._selectedLook = Object.assign(Object.assign({}, this._selectedLook), looks.selectedLook);
       this._highlightedLook = Object.assign(Object.assign({}, this._highlightedLook), looks.highlightedLook);
       this._selectedAndHighlightedLook = Object.assign(Object.assign({}, this._selectedAndHighlightedLook), looks.selectedAndHighlightedLook);
     } else {
-      this._defaultLook = look;
-      this._selectedLook = look;
-      this._highlightedLook = look;
-      this._selectedAndHighlightedLook = look;
+      this._defaultLook = lookConfig;
+      this._selectedLook = lookConfig;
+      this._highlightedLook = lookConfig;
+      this._selectedAndHighlightedLook = lookConfig;
     }
   }
   /**
@@ -7015,12 +7105,12 @@ class DagaExporter {
 }
 
 /**
- * Text to display as the title of the property editor when editing the properties of a diagram's value set.
+ * Text to display by default as the title of the property editor when editing the properties of a diagram's value set.
  * @private
  * @see PropertyEditorComponent
  * @see ValueSet
  */
-const DIAGRAM_PROPERTIES_TEXT = 'Diagram properties';
+const DIAGRAM_PROPERTIES_DEFAULT_TEXT = 'Diagram properties';
 /**
  * Stores the functionality regarding the user highlight of a diagram canvas.
  * @public
@@ -7032,12 +7122,14 @@ class DiagramUserSelection extends DiagramElementSet {
    * @public
    * @param canvas A canvas.
    */
-  constructor(canvas) {
+  constructor(canvas, diagramPropertiesText) {
     super();
     this.canvas = canvas;
     this.canvas.propertyEditorChanges$.pipe(rxjs.debounceTime(2000)).subscribe(() => {
       this.makeUpdateValuesAction();
     });
+    console.log(diagramPropertiesText);
+    this.diagramPropertiesText = diagramPropertiesText !== undefined ? diagramPropertiesText : DIAGRAM_PROPERTIES_DEFAULT_TEXT;
   }
   add(element) {
     if (this.contains(element.id)) {
@@ -7232,7 +7324,7 @@ class DiagramUserSelection extends DiagramElementSet {
           propertyEditor.valueSet = undefined;
           propertyEditor.valueSet = selectedValueSet;
         } else {
-          propertyEditor.title = DIAGRAM_PROPERTIES_TEXT;
+          propertyEditor.title = this.diagramPropertiesText;
           // force the update of the valueSet
           propertyEditor.valueSet = undefined;
           propertyEditor.valueSet = selectedValueSet;
@@ -7322,7 +7414,7 @@ class DiagramCanvas {
    * @param config The configuration object used to set the parameters of this canvas.
    */
   constructor(parentComponent, config) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
     this.backgroundPatternId = `daga-background-pattern-id-${DiagramCanvas.canvasCount++}`;
     this.zoomTransform = d3__namespace.zoomIdentity;
     // used to distinguish drags from clicks when dragging elements and during multiple selection
@@ -7337,25 +7429,25 @@ class DiagramCanvas {
     this.propertyEditorChanges$ = new rxjs.Subject();
     this.parentComponent = parentComponent;
     this.model = new DiagramModel(this, undefined, config.name || 'unnamed', '', config.type || '', config.properties || []);
-    this.userSelection = new DiagramUserSelection(this);
-    this.userHighlight = new DiagramUserHighlight(this, ((_a = config.canvas) === null || _a === void 0 ? void 0 : _a.highlightSections) !== false);
-    this.contextMenu = new DiagramContextMenu(this, (_b = config.canvas) === null || _b === void 0 ? void 0 : _b.contextMenu);
-    this.backgroundColor = ((_c = config.canvas) === null || _c === void 0 ? void 0 : _c.backgroundColor) || '#FFFFFF';
-    this.gridStyle = (_f = (_e = (_d = config.canvas) === null || _d === void 0 ? void 0 : _d.grid) === null || _e === void 0 ? void 0 : _e.style) !== null && _f !== void 0 ? _f : GRID_DEFAULTS.style;
-    this.gridSize = ((_h = (_g = config.canvas) === null || _g === void 0 ? void 0 : _g.grid) === null || _h === void 0 ? void 0 : _h.enabled) === false || ((_j = config.canvas) === null || _j === void 0 ? void 0 : _j.grid) === undefined ? 0 : Math.abs(((_l = (_k = config.canvas) === null || _k === void 0 ? void 0 : _k.grid) === null || _l === void 0 ? void 0 : _l.spacing) || GRID_DEFAULTS.spacing);
-    this.gridThickness = Math.abs(((_o = (_m = config.canvas) === null || _m === void 0 ? void 0 : _m.grid) === null || _o === void 0 ? void 0 : _o.thickness) || GRID_DEFAULTS.thickness);
-    this.gridColor = ((_q = (_p = config.canvas) === null || _p === void 0 ? void 0 : _p.grid) === null || _q === void 0 ? void 0 : _q.color) || GRID_DEFAULTS.color;
-    this.snapToGrid = ((_s = (_r = config.canvas) === null || _r === void 0 ? void 0 : _r.grid) === null || _s === void 0 ? void 0 : _s.enabled) === false || ((_t = config.canvas) === null || _t === void 0 ? void 0 : _t.grid) === undefined ? false : ((_v = (_u = config.canvas) === null || _u === void 0 ? void 0 : _u.grid) === null || _v === void 0 ? void 0 : _v.snap) || GRID_DEFAULTS.snap;
-    this.zoomFactor = ((_w = config.canvas) === null || _w === void 0 ? void 0 : _w.zoomFactor) || 2;
-    this.panRate = ((_x = config.canvas) === null || _x === void 0 ? void 0 : _x.panRate) || 100;
-    this.inferConnectionType = ((_y = config.connectionSettings) === null || _y === void 0 ? void 0 : _y.inferConnectionType) || false;
-    this.autoTightenConnections = ((_z = config.connectionSettings) === null || _z === void 0 ? void 0 : _z.autoTighten) !== false;
-    this.allowConnectionLoops = ((_0 = config.connectionSettings) === null || _0 === void 0 ? void 0 : _0.allowLoops) || false;
-    this.allowSharingPorts = ((_1 = config.connectionSettings) === null || _1 === void 0 ? void 0 : _1.sharePorts) !== false;
-    this.allowSharingBothPorts = ((_2 = config.connectionSettings) === null || _2 === void 0 ? void 0 : _2.shareBothPorts) || false;
-    this.portHighlightRadius = ((_3 = config.connectionSettings) === null || _3 === void 0 ? void 0 : _3.portHighlightRadius) || 100;
+    this.userSelection = new DiagramUserSelection(this, (_b = (_a = config.components) === null || _a === void 0 ? void 0 : _a.propertyEditor) === null || _b === void 0 ? void 0 : _b.title);
+    this.userHighlight = new DiagramUserHighlight(this, ((_c = config.canvas) === null || _c === void 0 ? void 0 : _c.highlightSections) !== false);
+    this.contextMenu = new DiagramContextMenu(this, (_d = config.canvas) === null || _d === void 0 ? void 0 : _d.contextMenu);
+    this.backgroundColor = ((_e = config.canvas) === null || _e === void 0 ? void 0 : _e.backgroundColor) || '#FFFFFF';
+    this.gridStyle = (_h = (_g = (_f = config.canvas) === null || _f === void 0 ? void 0 : _f.grid) === null || _g === void 0 ? void 0 : _g.style) !== null && _h !== void 0 ? _h : GRID_DEFAULTS.style;
+    this.gridSize = ((_k = (_j = config.canvas) === null || _j === void 0 ? void 0 : _j.grid) === null || _k === void 0 ? void 0 : _k.enabled) === false || ((_l = config.canvas) === null || _l === void 0 ? void 0 : _l.grid) === undefined ? 0 : Math.abs(((_o = (_m = config.canvas) === null || _m === void 0 ? void 0 : _m.grid) === null || _o === void 0 ? void 0 : _o.spacing) || GRID_DEFAULTS.spacing);
+    this.gridThickness = Math.abs(((_q = (_p = config.canvas) === null || _p === void 0 ? void 0 : _p.grid) === null || _q === void 0 ? void 0 : _q.thickness) || GRID_DEFAULTS.thickness);
+    this.gridColor = ((_s = (_r = config.canvas) === null || _r === void 0 ? void 0 : _r.grid) === null || _s === void 0 ? void 0 : _s.color) || GRID_DEFAULTS.color;
+    this.snapToGrid = ((_u = (_t = config.canvas) === null || _t === void 0 ? void 0 : _t.grid) === null || _u === void 0 ? void 0 : _u.enabled) === false || ((_v = config.canvas) === null || _v === void 0 ? void 0 : _v.grid) === undefined ? false : ((_x = (_w = config.canvas) === null || _w === void 0 ? void 0 : _w.grid) === null || _x === void 0 ? void 0 : _x.snap) || GRID_DEFAULTS.snap;
+    this.zoomFactor = ((_y = config.canvas) === null || _y === void 0 ? void 0 : _y.zoomFactor) || 2;
+    this.panRate = ((_z = config.canvas) === null || _z === void 0 ? void 0 : _z.panRate) || 100;
+    this.inferConnectionType = ((_0 = config.connectionSettings) === null || _0 === void 0 ? void 0 : _0.inferConnectionType) || false;
+    this.autoTightenConnections = ((_1 = config.connectionSettings) === null || _1 === void 0 ? void 0 : _1.autoTighten) !== false;
+    this.allowConnectionLoops = ((_2 = config.connectionSettings) === null || _2 === void 0 ? void 0 : _2.allowLoops) || false;
+    this.allowSharingPorts = ((_3 = config.connectionSettings) === null || _3 === void 0 ? void 0 : _3.sharePorts) !== false;
+    this.allowSharingBothPorts = ((_4 = config.connectionSettings) === null || _4 === void 0 ? void 0 : _4.shareBothPorts) || false;
+    this.portHighlightRadius = ((_5 = config.connectionSettings) === null || _5 === void 0 ? void 0 : _5.portHighlightRadius) || 100;
     this.multipleSelectionOn = false;
-    this.priorityThresholds = ((_4 = config.canvas) === null || _4 === void 0 ? void 0 : _4.priorityThresholds) || [];
+    this.priorityThresholds = ((_6 = config.canvas) === null || _6 === void 0 ? void 0 : _6.priorityThresholds) || [];
     this.priorityThreshold = this.priorityThresholds ? this.priorityThresholds[0] : undefined;
     this.layoutFormat = config.layoutFormat;
     this.userActions = config.userActions || {};
@@ -7382,7 +7474,7 @@ class DiagramCanvas {
         const connectionType = new DiagramConnectionType(Object.assign(Object.assign({}, config.connectionTypeDefaults), connectionTypeConfig));
         this.model.connections.types.add(connectionType);
       }
-      this._connectionType = ((_5 = config === null || config === void 0 ? void 0 : config.connectionSettings) === null || _5 === void 0 ? void 0 : _5.defaultConnection) !== undefined ? this.model.connections.types.get(config.connectionSettings.defaultConnection) : undefined;
+      this._connectionType = ((_7 = config === null || config === void 0 ? void 0 : config.connectionSettings) === null || _7 === void 0 ? void 0 : _7.defaultConnection) !== undefined ? this.model.connections.types.get(config.connectionSettings.defaultConnection) : undefined;
     }
   }
   addValidator(validator) {
@@ -7609,8 +7701,8 @@ class DiagramCanvas {
         const deselectedElements = this.userSelection.all();
         this.userSelection.clear();
         this.diagramEvent$.next(new DiagramSelectionEvent(deselectedElements, false));
-        this.userSelection.openInPropertyEditor(this.model);
       }
+      this.userSelection.openInPropertyEditor(this.model);
     }).call(d3__namespace.drag().filter(event => {
       return this.multipleSelectionOn || isSecondaryButton(event);
     }).on(exports.DragEvents.Start, event => {

package/index.esm.js

@@ -2227,23 +2227,38 @@ class DiagramConnection extends DiagramElement {
       }
     }
   }
+  /**
+   * An alias for the `lookConfig` attribute.
+   * @private
+   */
+  set look(look) {
+    this.lookConfig = look;
+  }
+  /**
+   * Look configuration used to derive the current look of this connection.
+   * @private
+   */
+  get lookConfig() {
+    return this._lookConfig;
+  }
   /**
    * Sets the look configuration of the connection to override the one determined by the type.
    * `undefined` resets it to the one determined by the type.
    * @private
    */
-  set look(look) {
-    if (look) {
-      const looks = extractLooksFromConfig(look);
+  set lookConfig(lookConfig) {
+    this._lookConfig = lookConfig;
+    if (lookConfig) {
+      const looks = extractLooksFromConfig(lookConfig);
       this._defaultLook = Object.assign(Object.assign({}, this._defaultLook), looks.defaultLook);
       this._selectedLook = Object.assign(Object.assign({}, this._selectedLook), looks.selectedLook);
       this._highlightedLook = Object.assign(Object.assign({}, this._highlightedLook), looks.highlightedLook);
       this._selectedAndHighlightedLook = Object.assign(Object.assign({}, this._selectedAndHighlightedLook), looks.selectedAndHighlightedLook);
     } else {
-      this._defaultLook = look;
-      this._selectedLook = look;
-      this._highlightedLook = look;
-      this._selectedAndHighlightedLook = look;
+      this._defaultLook = lookConfig;
+      this._selectedLook = lookConfig;
+      this._highlightedLook = lookConfig;
+      this._selectedAndHighlightedLook = lookConfig;
     }
   }
   /**
@@ -2265,23 +2280,38 @@ class DiagramConnection extends DiagramElement {
       }
     }
   }
+  /**
+   * An alias for the `lookConfig` attribute.
+   * @private
+   */
+  set startMarkerLook(startMarkerLook) {
+    this.startMarkerLookConfig = startMarkerLook;
+  }
+  /**
+   * Look configuration used to derive the current look of the start marker of this connection.
+   * @private
+   */
+  get startMarkerLookConfig() {
+    return this._startMarkerLookConfig;
+  }
   /**
    * Sets the look configuration of the start marker to override the one determined by the type.
    * `null` stands for no marker and `undefined` resets it to the one determined by the type.
    * @private
    */
-  set startMarkerLook(startMarkerLook) {
-    if (startMarkerLook) {
-      const looks = extractLooksFromConfig(startMarkerLook);
+  set startMarkerLookConfig(startMarkerLookConfig) {
+    this._startMarkerLookConfig = startMarkerLookConfig;
+    if (startMarkerLookConfig) {
+      const looks = extractLooksFromConfig(startMarkerLookConfig);
       this._defaultStartMarkerLook = Object.assign(Object.assign({}, this._defaultStartMarkerLook), looks.defaultLook);
       this._selectedStartMarkerLook = Object.assign(Object.assign({}, this._selectedStartMarkerLook), looks.selectedLook);
       this._highlightedStartMarkerLook = Object.assign(Object.assign({}, this._highlightedStartMarkerLook), looks.highlightedLook);
       this._selectedAndHighlightedStartMarkerLook = Object.assign(Object.assign({}, this._selectedAndHighlightedStartMarkerLook), looks.selectedAndHighlightedLook);
     } else {
-      this._defaultStartMarkerLook = startMarkerLook;
-      this._selectedStartMarkerLook = startMarkerLook;
-      this._highlightedStartMarkerLook = startMarkerLook;
-      this._selectedAndHighlightedStartMarkerLook = startMarkerLook;
+      this._defaultStartMarkerLook = startMarkerLookConfig;
+      this._selectedStartMarkerLook = startMarkerLookConfig;
+      this._highlightedStartMarkerLook = startMarkerLookConfig;
+      this._selectedAndHighlightedStartMarkerLook = startMarkerLookConfig;
     }
   }
   /**
@@ -2303,23 +2333,38 @@ class DiagramConnection extends DiagramElement {
       }
     }
   }
+  /**
+   * An alias for the `lookConfig` attribute.
+   * @private
+   */
+  set endMarkerLook(endMarkerLook) {
+    this.endMarkerLookConfig = endMarkerLook;
+  }
+  /**
+   * Look configuration used to derive the current look of the end marker of this connection.
+   * @private
+   */
+  get endMarkerLookConfig() {
+    return this._endMarkerLookConfig;
+  }
   /**
    * Sets the look configuration of the end marker to override the one determined by the type.
    * `null` stands for no marker and `undefined` resets it to the one determined by the type.
    * @private
    */
-  set endMarkerLook(endMarkerLook) {
-    if (endMarkerLook) {
-      const looks = extractLooksFromConfig(endMarkerLook);
+  set endMarkerLookConfig(endMarkerLookConfig) {
+    this._endMarkerLookConfig = endMarkerLookConfig;
+    if (endMarkerLookConfig) {
+      const looks = extractLooksFromConfig(endMarkerLookConfig);
       this._defaultEndMarkerLook = Object.assign(Object.assign({}, this._defaultEndMarkerLook), looks.defaultLook);
       this._selectedEndMarkerLook = Object.assign(Object.assign({}, this._selectedEndMarkerLook), looks.selectedLook);
       this._highlightedEndMarkerLook = Object.assign(Object.assign({}, this._highlightedEndMarkerLook), looks.highlightedLook);
       this._selectedAndHighlightedEndMarkerLook = Object.assign(Object.assign({}, this._selectedAndHighlightedEndMarkerLook), looks.selectedAndHighlightedLook);
     } else {
-      this._defaultEndMarkerLook = endMarkerLook;
-      this._selectedEndMarkerLook = endMarkerLook;
-      this._highlightedEndMarkerLook = endMarkerLook;
-      this._selectedAndHighlightedEndMarkerLook = endMarkerLook;
+      this._defaultEndMarkerLook = endMarkerLookConfig;
+      this._selectedEndMarkerLook = endMarkerLookConfig;
+      this._highlightedEndMarkerLook = endMarkerLookConfig;
+      this._selectedAndHighlightedEndMarkerLook = endMarkerLookConfig;
     }
   }
   constructor(model, type, start, end, id) {
@@ -2994,23 +3039,38 @@ class DiagramSection extends DiagramElement {
       }
     }
   }
+  /**
+   * An alias for the `lookConfig` attribute.
+   * @private
+   */
+  set look(look) {
+    this.lookConfig = look;
+  }
+  /**
+   * Look configuration used to derive the current look of this section.
+   * @private
+   */
+  get lookConfig() {
+    return this._lookConfig;
+  }
   /**
    * Sets the look configuration of the look to override the one determined by the type.
    * `undefined` resets it to the one determined by the type.
    * @private
    */
-  set look(look) {
-    if (look) {
-      const looks = extractLooksFromConfig(look);
+  set lookConfig(lookConfig) {
+    this._lookConfig = lookConfig;
+    if (lookConfig) {
+      const looks = extractLooksFromConfig(lookConfig);
       this._defaultLook = Object.assign(Object.assign({}, this._defaultLook), looks.defaultLook);
       this._selectedLook = Object.assign(Object.assign({}, this._selectedLook), looks.selectedLook);
       this._highlightedLook = Object.assign(Object.assign({}, this._highlightedLook), looks.highlightedLook);
       this._selectedAndHighlightedLook = Object.assign(Object.assign({}, this._selectedAndHighlightedLook), looks.selectedAndHighlightedLook);
     } else {
-      this._defaultLook = look;
-      this._selectedLook = look;
-      this._highlightedLook = look;
-      this._selectedAndHighlightedLook = look;
+      this._defaultLook = lookConfig;
+      this._selectedLook = lookConfig;
+      this._highlightedLook = lookConfig;
+      this._selectedAndHighlightedLook = lookConfig;
     }
   }
   constructor(model, node, indexXInNode, indexYInNode, coords, width, height, id) {
@@ -3508,23 +3568,38 @@ class DiagramNode extends DiagramElement {
       }
     }
   }
+  /**
+   * An alias for the `lookConfig` attribute.
+   * @private
+   */
+  set look(look) {
+    this.lookConfig = look;
+  }
+  /**
+   * Look configuration used to derive the current look of this node.
+   * @private
+   */
+  get lookConfig() {
+    return this._lookConfig;
+  }
   /**
    * Sets the look configuration of the look to override the one determined by the type.
    * `undefined` resets it to the one determined by the type.
    * @private
    */
-  set look(look) {
-    if (look) {
-      const looks = extractLooksFromConfig(look);
+  set lookConfig(lookConfig) {
+    this._lookConfig = lookConfig;
+    if (lookConfig) {
+      const looks = extractLooksFromConfig(lookConfig);
       this._defaultLook = Object.assign(Object.assign({}, this._defaultLook), looks.defaultLook);
       this._selectedLook = Object.assign(Object.assign({}, this._selectedLook), looks.selectedLook);
       this._highlightedLook = Object.assign(Object.assign({}, this._highlightedLook), looks.highlightedLook);
       this._selectedAndHighlightedLook = Object.assign(Object.assign({}, this._selectedAndHighlightedLook), looks.selectedAndHighlightedLook);
     } else {
-      this._defaultLook = look;
-      this._selectedLook = look;
-      this._highlightedLook = look;
-      this._selectedAndHighlightedLook = look;
+      this._defaultLook = lookConfig;
+      this._selectedLook = lookConfig;
+      this._highlightedLook = lookConfig;
+      this._selectedAndHighlightedLook = lookConfig;
     }
   }
   constructor(model, type, coords = [0, 0], id) {
@@ -4536,23 +4611,38 @@ class DiagramPort extends DiagramElement {
       }
     }
   }
+  /**
+   * An alias for the `lookConfig` attribute.
+   * @private
+   */
+  set look(look) {
+    this.lookConfig = look;
+  }
+  /**
+   * Look configuration used to derive the current look of this port.
+   * @private
+   */
+  get lookConfig() {
+    return this._lookConfig;
+  }
   /**
    * Sets the look configuration of the look to override the one determined by the type.
    * `undefined` resets it to the one determined by the type.
    * @private
    */
-  set look(look) {
-    if (look) {
-      const looks = extractLooksFromConfig(look);
+  set lookConfig(lookConfig) {
+    this._lookConfig = lookConfig;
+    if (lookConfig) {
+      const looks = extractLooksFromConfig(lookConfig);
       this._defaultLook = Object.assign(Object.assign({}, this._defaultLook), looks.defaultLook);
       this._selectedLook = Object.assign(Object.assign({}, this._selectedLook), looks.selectedLook);
       this._highlightedLook = Object.assign(Object.assign({}, this._highlightedLook), looks.highlightedLook);
       this._selectedAndHighlightedLook = Object.assign(Object.assign({}, this._selectedAndHighlightedLook), looks.selectedAndHighlightedLook);
     } else {
-      this._defaultLook = look;
-      this._selectedLook = look;
-      this._highlightedLook = look;
-      this._selectedAndHighlightedLook = look;
+      this._defaultLook = lookConfig;
+      this._selectedLook = lookConfig;
+      this._highlightedLook = lookConfig;
+      this._selectedAndHighlightedLook = lookConfig;
     }
   }
   /**
@@ -6994,12 +7084,12 @@ class DagaExporter {
 }
 
 /**
- * Text to display as the title of the property editor when editing the properties of a diagram's value set.
+ * Text to display by default as the title of the property editor when editing the properties of a diagram's value set.
  * @private
  * @see PropertyEditorComponent
  * @see ValueSet
  */
-const DIAGRAM_PROPERTIES_TEXT = 'Diagram properties';
+const DIAGRAM_PROPERTIES_DEFAULT_TEXT = 'Diagram properties';
 /**
  * Stores the functionality regarding the user highlight of a diagram canvas.
  * @public
@@ -7011,12 +7101,14 @@ class DiagramUserSelection extends DiagramElementSet {
    * @public
    * @param canvas A canvas.
    */
-  constructor(canvas) {
+  constructor(canvas, diagramPropertiesText) {
     super();
     this.canvas = canvas;
     this.canvas.propertyEditorChanges$.pipe(debounceTime(2000)).subscribe(() => {
       this.makeUpdateValuesAction();
     });
+    console.log(diagramPropertiesText);
+    this.diagramPropertiesText = diagramPropertiesText !== undefined ? diagramPropertiesText : DIAGRAM_PROPERTIES_DEFAULT_TEXT;
   }
   add(element) {
     if (this.contains(element.id)) {
@@ -7211,7 +7303,7 @@ class DiagramUserSelection extends DiagramElementSet {
           propertyEditor.valueSet = undefined;
           propertyEditor.valueSet = selectedValueSet;
         } else {
-          propertyEditor.title = DIAGRAM_PROPERTIES_TEXT;
+          propertyEditor.title = this.diagramPropertiesText;
           // force the update of the valueSet
           propertyEditor.valueSet = undefined;
           propertyEditor.valueSet = selectedValueSet;
@@ -7301,7 +7393,7 @@ class DiagramCanvas {
    * @param config The configuration object used to set the parameters of this canvas.
    */
   constructor(parentComponent, config) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
     this.backgroundPatternId = `daga-background-pattern-id-${DiagramCanvas.canvasCount++}`;
     this.zoomTransform = d3.zoomIdentity;
     // used to distinguish drags from clicks when dragging elements and during multiple selection
@@ -7316,25 +7408,25 @@ class DiagramCanvas {
     this.propertyEditorChanges$ = new Subject();
     this.parentComponent = parentComponent;
     this.model = new DiagramModel(this, undefined, config.name || 'unnamed', '', config.type || '', config.properties || []);
-    this.userSelection = new DiagramUserSelection(this);
-    this.userHighlight = new DiagramUserHighlight(this, ((_a = config.canvas) === null || _a === void 0 ? void 0 : _a.highlightSections) !== false);
-    this.contextMenu = new DiagramContextMenu(this, (_b = config.canvas) === null || _b === void 0 ? void 0 : _b.contextMenu);
-    this.backgroundColor = ((_c = config.canvas) === null || _c === void 0 ? void 0 : _c.backgroundColor) || '#FFFFFF';
-    this.gridStyle = (_f = (_e = (_d = config.canvas) === null || _d === void 0 ? void 0 : _d.grid) === null || _e === void 0 ? void 0 : _e.style) !== null && _f !== void 0 ? _f : GRID_DEFAULTS.style;
-    this.gridSize = ((_h = (_g = config.canvas) === null || _g === void 0 ? void 0 : _g.grid) === null || _h === void 0 ? void 0 : _h.enabled) === false || ((_j = config.canvas) === null || _j === void 0 ? void 0 : _j.grid) === undefined ? 0 : Math.abs(((_l = (_k = config.canvas) === null || _k === void 0 ? void 0 : _k.grid) === null || _l === void 0 ? void 0 : _l.spacing) || GRID_DEFAULTS.spacing);
-    this.gridThickness = Math.abs(((_o = (_m = config.canvas) === null || _m === void 0 ? void 0 : _m.grid) === null || _o === void 0 ? void 0 : _o.thickness) || GRID_DEFAULTS.thickness);
-    this.gridColor = ((_q = (_p = config.canvas) === null || _p === void 0 ? void 0 : _p.grid) === null || _q === void 0 ? void 0 : _q.color) || GRID_DEFAULTS.color;
-    this.snapToGrid = ((_s = (_r = config.canvas) === null || _r === void 0 ? void 0 : _r.grid) === null || _s === void 0 ? void 0 : _s.enabled) === false || ((_t = config.canvas) === null || _t === void 0 ? void 0 : _t.grid) === undefined ? false : ((_v = (_u = config.canvas) === null || _u === void 0 ? void 0 : _u.grid) === null || _v === void 0 ? void 0 : _v.snap) || GRID_DEFAULTS.snap;
-    this.zoomFactor = ((_w = config.canvas) === null || _w === void 0 ? void 0 : _w.zoomFactor) || 2;
-    this.panRate = ((_x = config.canvas) === null || _x === void 0 ? void 0 : _x.panRate) || 100;
-    this.inferConnectionType = ((_y = config.connectionSettings) === null || _y === void 0 ? void 0 : _y.inferConnectionType) || false;
-    this.autoTightenConnections = ((_z = config.connectionSettings) === null || _z === void 0 ? void 0 : _z.autoTighten) !== false;
-    this.allowConnectionLoops = ((_0 = config.connectionSettings) === null || _0 === void 0 ? void 0 : _0.allowLoops) || false;
-    this.allowSharingPorts = ((_1 = config.connectionSettings) === null || _1 === void 0 ? void 0 : _1.sharePorts) !== false;
-    this.allowSharingBothPorts = ((_2 = config.connectionSettings) === null || _2 === void 0 ? void 0 : _2.shareBothPorts) || false;
-    this.portHighlightRadius = ((_3 = config.connectionSettings) === null || _3 === void 0 ? void 0 : _3.portHighlightRadius) || 100;
+    this.userSelection = new DiagramUserSelection(this, (_b = (_a = config.components) === null || _a === void 0 ? void 0 : _a.propertyEditor) === null || _b === void 0 ? void 0 : _b.title);
+    this.userHighlight = new DiagramUserHighlight(this, ((_c = config.canvas) === null || _c === void 0 ? void 0 : _c.highlightSections) !== false);
+    this.contextMenu = new DiagramContextMenu(this, (_d = config.canvas) === null || _d === void 0 ? void 0 : _d.contextMenu);
+    this.backgroundColor = ((_e = config.canvas) === null || _e === void 0 ? void 0 : _e.backgroundColor) || '#FFFFFF';
+    this.gridStyle = (_h = (_g = (_f = config.canvas) === null || _f === void 0 ? void 0 : _f.grid) === null || _g === void 0 ? void 0 : _g.style) !== null && _h !== void 0 ? _h : GRID_DEFAULTS.style;
+    this.gridSize = ((_k = (_j = config.canvas) === null || _j === void 0 ? void 0 : _j.grid) === null || _k === void 0 ? void 0 : _k.enabled) === false || ((_l = config.canvas) === null || _l === void 0 ? void 0 : _l.grid) === undefined ? 0 : Math.abs(((_o = (_m = config.canvas) === null || _m === void 0 ? void 0 : _m.grid) === null || _o === void 0 ? void 0 : _o.spacing) || GRID_DEFAULTS.spacing);
+    this.gridThickness = Math.abs(((_q = (_p = config.canvas) === null || _p === void 0 ? void 0 : _p.grid) === null || _q === void 0 ? void 0 : _q.thickness) || GRID_DEFAULTS.thickness);
+    this.gridColor = ((_s = (_r = config.canvas) === null || _r === void 0 ? void 0 : _r.grid) === null || _s === void 0 ? void 0 : _s.color) || GRID_DEFAULTS.color;
+    this.snapToGrid = ((_u = (_t = config.canvas) === null || _t === void 0 ? void 0 : _t.grid) === null || _u === void 0 ? void 0 : _u.enabled) === false || ((_v = config.canvas) === null || _v === void 0 ? void 0 : _v.grid) === undefined ? false : ((_x = (_w = config.canvas) === null || _w === void 0 ? void 0 : _w.grid) === null || _x === void 0 ? void 0 : _x.snap) || GRID_DEFAULTS.snap;
+    this.zoomFactor = ((_y = config.canvas) === null || _y === void 0 ? void 0 : _y.zoomFactor) || 2;
+    this.panRate = ((_z = config.canvas) === null || _z === void 0 ? void 0 : _z.panRate) || 100;
+    this.inferConnectionType = ((_0 = config.connectionSettings) === null || _0 === void 0 ? void 0 : _0.inferConnectionType) || false;
+    this.autoTightenConnections = ((_1 = config.connectionSettings) === null || _1 === void 0 ? void 0 : _1.autoTighten) !== false;
+    this.allowConnectionLoops = ((_2 = config.connectionSettings) === null || _2 === void 0 ? void 0 : _2.allowLoops) || false;
+    this.allowSharingPorts = ((_3 = config.connectionSettings) === null || _3 === void 0 ? void 0 : _3.sharePorts) !== false;
+    this.allowSharingBothPorts = ((_4 = config.connectionSettings) === null || _4 === void 0 ? void 0 : _4.shareBothPorts) || false;
+    this.portHighlightRadius = ((_5 = config.connectionSettings) === null || _5 === void 0 ? void 0 : _5.portHighlightRadius) || 100;
     this.multipleSelectionOn = false;
-    this.priorityThresholds = ((_4 = config.canvas) === null || _4 === void 0 ? void 0 : _4.priorityThresholds) || [];
+    this.priorityThresholds = ((_6 = config.canvas) === null || _6 === void 0 ? void 0 : _6.priorityThresholds) || [];
     this.priorityThreshold = this.priorityThresholds ? this.priorityThresholds[0] : undefined;
     this.layoutFormat = config.layoutFormat;
     this.userActions = config.userActions || {};
@@ -7361,7 +7453,7 @@ class DiagramCanvas {
         const connectionType = new DiagramConnectionType(Object.assign(Object.assign({}, config.connectionTypeDefaults), connectionTypeConfig));
         this.model.connections.types.add(connectionType);
       }
-      this._connectionType = ((_5 = config === null || config === void 0 ? void 0 : config.connectionSettings) === null || _5 === void 0 ? void 0 : _5.defaultConnection) !== undefined ? this.model.connections.types.get(config.connectionSettings.defaultConnection) : undefined;
+      this._connectionType = ((_7 = config === null || config === void 0 ? void 0 : config.connectionSettings) === null || _7 === void 0 ? void 0 : _7.defaultConnection) !== undefined ? this.model.connections.types.get(config.connectionSettings.defaultConnection) : undefined;
     }
   }
   addValidator(validator) {
@@ -7588,8 +7680,8 @@ class DiagramCanvas {
         const deselectedElements = this.userSelection.all();
         this.userSelection.clear();
         this.diagramEvent$.next(new DiagramSelectionEvent(deselectedElements, false));
-        this.userSelection.openInPropertyEditor(this.model);
       }
+      this.userSelection.openInPropertyEditor(this.model);
     }).call(d3.drag().filter(event => {
       return this.multipleSelectionOn || isSecondaryButton(event);
     }).on(DragEvents.Start, event => {

package/package.json

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

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

@@ -4,12 +4,12 @@ import { DiagramElement, DiagramElementSet } from '../model/diagram-element';
 import { DiagramModel } from '../model/diagram-model';
 import { ValueSet } from '../property/value';
 /**
- * Text to display as the title of the property editor when editing the properties of a diagram's value set.
+ * Text to display by default as the title of the property editor when editing the properties of a diagram's value set.
  * @private
  * @see PropertyEditorComponent
  * @see ValueSet
  */
-export declare const DIAGRAM_PROPERTIES_TEXT = "Diagram properties";
+export declare const DIAGRAM_PROPERTIES_DEFAULT_TEXT = "Diagram properties";
 /**
  * Stores the functionality regarding the user highlight of a diagram canvas.
  * @public
@@ -17,6 +17,7 @@ export declare const DIAGRAM_PROPERTIES_TEXT = "Diagram properties";
  */
 export declare class DiagramUserSelection extends DiagramElementSet<DiagramElement> {
     private readonly canvas;
+    private readonly diagramPropertiesText;
     private propertyEditorSelection?;
     private propertyEditorValues?;
     /**
@@ -24,7 +25,7 @@ export declare class DiagramUserSelection extends DiagramElementSet<DiagramEleme
      * @public
      * @param canvas A canvas.
      */
-    constructor(canvas: Canvas);
+    constructor(canvas: Canvas, diagramPropertiesText: string | undefined);
     add(element: DiagramElement): void;
     remove(id: string): void;
     /**

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

@@ -163,6 +163,11 @@ export interface PropertyEditorComponentConfig {
      * @default undefined
      */
     height?: string;
+    /**
+     * Title that appears heading this component.
+     * @default 'Diagram properties'
+     */
+    title?: string;
 }
 /**
  * Configuration for a palette.

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

@@ -148,6 +148,7 @@ export declare class DiagramConnection extends DiagramElement {
      */
     get name(): string;
     set name(name: string);
+    private _lookConfig?;
     private _defaultLook?;
     private _selectedLook?;
     private _highlightedLook?;
@@ -157,12 +158,23 @@ export declare class DiagramConnection extends DiagramElement {
      * @private
      */
     get look(): ConnectionLook;
+    /**
+     * An alias for the `lookConfig` attribute.
+     * @private
+     */
+    set look(look: ConnectionLookConfig | undefined);
+    /**
+     * Look configuration used to derive the current look of this connection.
+     * @private
+     */
+    get lookConfig(): ConnectionLookConfig | undefined;
     /**
      * Sets the look configuration of the connection to override the one determined by the type.
      * `undefined` resets it to the one determined by the type.
      * @private
      */
-    set look(look: ConnectionLookConfig | undefined);
+    set lookConfig(lookConfig: ConnectionLookConfig | undefined);
+    private _startMarkerLookConfig?;
     private _defaultStartMarkerLook?;
     private _selectedStartMarkerLook?;
     private _highlightedStartMarkerLook?;
@@ -172,12 +184,23 @@ export declare class DiagramConnection extends DiagramElement {
      * @private
      */
     get startMarkerLook(): MarkerImageLook | null;
+    /**
+     * An alias for the `lookConfig` attribute.
+     * @private
+     */
+    set startMarkerLook(startMarkerLook: MarkerImageLookConfig | null | undefined);
+    /**
+     * Look configuration used to derive the current look of the start marker of this connection.
+     * @private
+     */
+    get startMarkerLookConfig(): MarkerImageLookConfig | null | undefined;
     /**
      * Sets the look configuration of the start marker to override the one determined by the type.
      * `null` stands for no marker and `undefined` resets it to the one determined by the type.
      * @private
      */
-    set startMarkerLook(startMarkerLook: MarkerImageLookConfig | null | undefined);
+    set startMarkerLookConfig(startMarkerLookConfig: MarkerImageLookConfig | null | undefined);
+    private _endMarkerLookConfig?;
     private _defaultEndMarkerLook?;
     private _selectedEndMarkerLook?;
     private _highlightedEndMarkerLook?;
@@ -187,12 +210,22 @@ export declare class DiagramConnection extends DiagramElement {
      * @private
      */
     get endMarkerLook(): MarkerImageLook | null;
+    /**
+     * An alias for the `lookConfig` attribute.
+     * @private
+     */
+    set endMarkerLook(endMarkerLook: MarkerImageLookConfig | null | undefined);
+    /**
+     * Look configuration used to derive the current look of the end marker of this connection.
+     * @private
+     */
+    get endMarkerLookConfig(): MarkerImageLookConfig | null | undefined;
     /**
      * Sets the look configuration of the end marker to override the one determined by the type.
      * `null` stands for no marker and `undefined` resets it to the one determined by the type.
      * @private
      */
-    set endMarkerLook(endMarkerLook: MarkerImageLookConfig | null | undefined);
+    set endMarkerLookConfig(endMarkerLookConfig: MarkerImageLookConfig | null | undefined);
     constructor(model: DiagramModel, type: DiagramConnectionType, start: DiagramPort | undefined, end: DiagramPort | undefined, id: string);
     get removed(): boolean;
     updateInView(): void;

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

@@ -176,6 +176,7 @@ export declare class DiagramNode extends DiagramElement implements LabeledElemen
      */
     get name(): string;
     set name(name: string);
+    private _lookConfig?;
     private _defaultLook?;
     private _selectedLook?;
     private _highlightedLook?;
@@ -185,12 +186,22 @@ export declare class DiagramNode extends DiagramElement implements LabeledElemen
      * @private
      */
     get look(): NodeLook;
+    /**
+     * An alias for the `lookConfig` attribute.
+     * @private
+     */
+    set look(look: ShapedLookConfig | ImageLookConfig | StretchableImageLookConfig | undefined);
+    /**
+     * Look configuration used to derive the current look of this node.
+     * @private
+     */
+    get lookConfig(): ShapedLookConfig | ImageLookConfig | StretchableImageLookConfig | undefined;
     /**
      * Sets the look configuration of the look to override the one determined by the type.
      * `undefined` resets it to the one determined by the type.
      * @private
      */
-    set look(look: ShapedLookConfig | ImageLookConfig | StretchableImageLookConfig | undefined);
+    set lookConfig(lookConfig: ShapedLookConfig | ImageLookConfig | StretchableImageLookConfig | undefined);
     constructor(model: DiagramModel, type: DiagramNodeType, coords: Point | undefined, id: string);
     get removed(): boolean;
     updateInView(): void;

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

@@ -134,6 +134,7 @@ export declare class DiagramPort extends DiagramElement implements LabeledElemen
      */
     get name(): string;
     set name(name: string);
+    private _lookConfig?;
     private _defaultLook?;
     private _selectedLook?;
     private _highlightedLook?;
@@ -143,12 +144,22 @@ export declare class DiagramPort extends DiagramElement implements LabeledElemen
      * @private
      */
     get look(): PortLook;
+    /**
+     * An alias for the `lookConfig` attribute.
+     * @private
+     */
+    set look(look: ShapedLookConfig | ImageLookConfig | undefined);
+    /**
+     * Look configuration used to derive the current look of this port.
+     * @private
+     */
+    get lookConfig(): ShapedLookConfig | ImageLookConfig | undefined;
     /**
      * Sets the look configuration of the look to override the one determined by the type.
      * `undefined` resets it to the one determined by the type.
      * @private
      */
-    set look(look: ShapedLookConfig | ImageLookConfig | undefined);
+    set lookConfig(lookConfig: ShapedLookConfig | ImageLookConfig | undefined);
     /**
      * Current width of this port.
      * @private

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

@@ -122,6 +122,7 @@ export declare class DiagramSection extends DiagramElement implements LabeledEle
      */
     get name(): string;
     set name(name: string);
+    private _lookConfig?;
     private _defaultLook?;
     private _selectedLook?;
     private _highlightedLook?;
@@ -131,12 +132,22 @@ export declare class DiagramSection extends DiagramElement implements LabeledEle
      * @private
      */
     get look(): NodeLook;
+    /**
+     * An alias for the `lookConfig` attribute.
+     * @private
+     */
+    set look(look: ShapedLookConfig | ImageLookConfig | StretchableImageLookConfig | undefined);
+    /**
+     * Look configuration used to derive the current look of this section.
+     * @private
+     */
+    get lookConfig(): ShapedLookConfig | ImageLookConfig | StretchableImageLookConfig | undefined;
     /**
      * Sets the look configuration of the look to override the one determined by the type.
      * `undefined` resets it to the one determined by the type.
      * @private
      */
-    set look(look: ShapedLookConfig | ImageLookConfig | StretchableImageLookConfig | undefined);
+    set lookConfig(lookConfig: ShapedLookConfig | ImageLookConfig | StretchableImageLookConfig | undefined);
     constructor(model: DiagramModel, node: DiagramNode | undefined, indexXInNode: number, indexYInNode: number, coords: Point, width: number, height: number, id: string);
     get removed(): boolean;
     updateInView(): void;