@metadev/daga 3.1.5 → 4.0.0

package/index.esm.js

@@ -807,6 +807,64 @@ const numberOfRows = s => {
   return ((_a = s.match(/\n/g)) === null || _a === undefined ? undefined : _a.length) || 0;
 };
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * Converts a configuration for a look into an easier to consult object of fully qualified looks for each case.
+ *
+ * @param lookConfig A look configuration object
+ * @returns An object with four keys for a look with each possible state of being selected or not and being highlighted or not.
+ */
+const extractLooksFromConfig = lookConfig => {
+  const {
+      selected,
+      highlighted
+    } = lookConfig,
+    rest = __rest(lookConfig, ["selected", "highlighted"]);
+  const defaultLook = rest;
+  const selectedLook = Object.assign(Object.assign({}, defaultLook), selected);
+  const highlightedLook = Object.assign(Object.assign({}, defaultLook), highlighted);
+  const selectedAndHighlightedLook = Object.assign(Object.assign(Object.assign({}, defaultLook), highlighted), selected);
+  return {
+    defaultLook,
+    selectedLook,
+    highlightedLook,
+    selectedAndHighlightedLook
+  };
+};
+
 /**
  * Represents a collection of diagram entities of a type that exists as part of a diagram model.
  * @public
@@ -955,6 +1013,10 @@ const DEFAULT_PRIORITY = 0;
  * @see DiagramCanvas
  */
 class DiagramElement {
+  /**
+   * Identifier that uniquely identifies this element within its diagram model. Cannot be an empty string.
+   * @public
+   */
   get id() {
     return this._id;
   }
@@ -1223,7 +1285,6 @@ class ValueSet {
   constructor(propertySet, rootElement) {
     this.displayedProperties = [];
     this.hiddenProperties = [];
-    // TODO JC: make this private after reviewing how it's used from React
     this.values = {};
     this.valueSets = {};
     /**
@@ -1508,7 +1569,7 @@ class ValueSet {
         this.values[key] = structuredClone(property.defaultValue);
       }
       if (rootAttribute !== undefined && rootAttribute !== null) {
-        if (property.defaultValue !== undefined) {
+        if (property.defaultValue !== undefined && !equals(this.values[key], property.defaultValue)) {
           this.setRootElementValue(rootAttribute, this.values[key]);
         } else {
           this.values[key] = this.getRootElementValue(rootAttribute);
@@ -1626,6 +1687,34 @@ const diff = (a, b) => {
   }
   return [aDiff, bDiff];
 };
+/**
+ * Calculates the differences between the two given values of a valueset and returns two objects containing the differences in each relative to the other.
+ *
+ * @param a An object.
+ * @param b An object.
+ * @param valueSet A ValueSet to use as reference for the keys and types of each property.
+ * @returns A tuple of two objects with each containing the keys that have a different value in the corresponding argument compared to the other argument.
+ */
+const diffProperties = (a, b, valueSet) => {
+  const aDiff = {};
+  const bDiff = {};
+  for (const key in valueSet.propertySet.propertyMap) {
+    if (valueSet.propertySet.propertyMap[key].type === Type.Object) {
+      const diffAB = diffProperties(a[key], b[key], valueSet.getSubValueSet(key));
+      // only add the key if differences are detected
+      if (Object.keys(diffAB[0]).length > 0 && Object.keys(diffAB[1]).length > 0) {
+        aDiff[key] = diffAB[0];
+        bDiff[key] = diffAB[1];
+      }
+    } else {
+      if (!equals(a[key], b[key])) {
+        aDiff[key] = a[key];
+        bDiff[key] = b[key];
+      }
+    }
+  }
+  return [aDiff, bDiff];
+};
 /**
  * Checks if the given value is an object.
  * @public
@@ -1641,16 +1730,24 @@ const isObject = x => x !== undefined && x !== null && x.constructor === Object;
  */
 const DIAGRAM_CONNECTION_TYPE_DEFAULTS = {
   name: '',
-  width: 1,
-  shape: LineShape.Straight,
-  style: LineStyle.Solid,
   label: null,
-  defaultStartMarkerLook: null,
-  defaultEndMarkerLook: null,
+  look: {
+    lookType: 'connection-look',
+    color: '#000000',
+    thickness: 1,
+    shape: LineShape.Straight,
+    style: LineStyle.Solid,
+    selected: {
+      color: '#AA00AA'
+    },
+    highlighted: {
+      thickness: 2
+    }
+  },
+  startMarkerLook: undefined,
+  endMarkerLook: undefined,
   startTypes: [],
   endTypes: [],
-  color: '#000000',
-  selectedColor: '#000000',
   properties: []
 };
 /**
@@ -1663,16 +1760,38 @@ class DiagramConnectionType {
     const values = Object.assign(Object.assign({}, DIAGRAM_CONNECTION_TYPE_DEFAULTS), options);
     this.id = values.id;
     this.name = values.name;
-    this.width = values.width;
-    this.shape = values.shape;
-    this.style = values.style;
     this.label = values.label;
-    this.defaultStartMarkerLook = values.defaultStartMarkerLook;
-    this.defaultEndMarkerLook = values.defaultEndMarkerLook;
+    const looks = extractLooksFromConfig(values.look);
+    this.defaultLook = looks.defaultLook;
+    this.selectedLook = looks.selectedLook;
+    this.highlightedLook = looks.highlightedLook;
+    this.selectedAndHighlightedLook = looks.selectedAndHighlightedLook;
+    if (values.startMarkerLook !== undefined) {
+      const startMarkerLooks = extractLooksFromConfig(values.startMarkerLook);
+      this.defaultStartMarkerLook = startMarkerLooks.defaultLook;
+      this.selectedStartMarkerLook = startMarkerLooks.selectedLook;
+      this.highlightedStartMarkerLook = startMarkerLooks.highlightedLook;
+      this.selectedAndHighlightedStartMarkerLook = startMarkerLooks.selectedAndHighlightedLook;
+    } else {
+      this.defaultStartMarkerLook = null;
+      this.selectedStartMarkerLook = null;
+      this.highlightedStartMarkerLook = null;
+      this.selectedAndHighlightedStartMarkerLook = null;
+    }
+    if (values.endMarkerLook !== undefined) {
+      const endMarkerLooks = extractLooksFromConfig(values.endMarkerLook);
+      this.defaultEndMarkerLook = endMarkerLooks.defaultLook;
+      this.selectedEndMarkerLook = endMarkerLooks.selectedLook;
+      this.highlightedEndMarkerLook = endMarkerLooks.highlightedLook;
+      this.selectedAndHighlightedEndMarkerLook = endMarkerLooks.selectedAndHighlightedLook;
+    } else {
+      this.defaultEndMarkerLook = null;
+      this.selectedEndMarkerLook = null;
+      this.highlightedEndMarkerLook = null;
+      this.selectedAndHighlightedEndMarkerLook = null;
+    }
     this.startTypes = values.startTypes;
     this.endTypes = values.endTypes;
-    this.color = values.color;
-    this.selectedColor = values.selectedColor;
     this.propertySet = new PropertySet(values.properties);
   }
   canStartFromType(type) {
@@ -1688,6 +1807,27 @@ class DiagramConnectionType {
  * @see DiagramPort
  */
 class DiagramConnection extends DiagramElement {
+  get type() {
+    return this._type;
+  }
+  set type(type) {
+    var _a, _b;
+    (_b = (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.userSelection) === null || _b === undefined ? undefined : _b.openInPropertyEditor(undefined);
+    this._type = type;
+    if (this.valueSet) {
+      this.valueSet = new ValueSet(type.propertySet, this);
+    }
+    this.updateInView();
+  }
+  get typeString() {
+    return this.type.id;
+  }
+  set typeString(typeString) {
+    const type = this.model.connections.types.get(typeString);
+    if (type) {
+      this.type = type;
+    }
+  }
   /**
    * Name of this connection. Alias for this connection's middle label.
    * @public
@@ -1698,10 +1838,127 @@ class DiagramConnection extends DiagramElement {
   set name(name) {
     this.middleLabel = name;
   }
+  /**
+   * Current look of the connection.
+   * @private
+   */
+  get look() {
+    if (this.selected) {
+      if (this.highlighted) {
+        return this._selectedAndHighlightedLook !== undefined ? this._selectedAndHighlightedLook : this.type.selectedAndHighlightedLook;
+      } else {
+        return this._selectedLook !== undefined ? this._selectedLook : this.type.selectedLook;
+      }
+    } else {
+      if (this.highlighted) {
+        return this._highlightedLook !== undefined ? this._highlightedLook : this.type.highlightedLook;
+      } else {
+        return this._defaultLook !== undefined ? this._defaultLook : this.type.defaultLook;
+      }
+    }
+  }
+  /**
+   * 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);
+      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;
+    }
+  }
+  /**
+   * Current look of the start marker.
+   * @private
+   */
+  get startMarkerLook() {
+    if (this.selected) {
+      if (this.highlighted) {
+        return this._selectedAndHighlightedStartMarkerLook !== undefined ? this._selectedAndHighlightedStartMarkerLook : this.type.selectedAndHighlightedStartMarkerLook;
+      } else {
+        return this._selectedStartMarkerLook !== undefined ? this._selectedStartMarkerLook : this.type.selectedStartMarkerLook;
+      }
+    } else {
+      if (this.highlighted) {
+        return this._highlightedStartMarkerLook !== undefined ? this._highlightedStartMarkerLook : this.type.highlightedStartMarkerLook;
+      } else {
+        return this._defaultStartMarkerLook !== undefined ? this._defaultStartMarkerLook : this.type.defaultStartMarkerLook;
+      }
+    }
+  }
+  /**
+   * 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);
+      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;
+    }
+  }
+  /**
+   * Current look of the end marker.
+   * @private
+   */
+  get endMarkerLook() {
+    if (this.selected) {
+      if (this.highlighted) {
+        return this._selectedAndHighlightedEndMarkerLook !== undefined ? this._selectedAndHighlightedEndMarkerLook : this.type.selectedAndHighlightedEndMarkerLook;
+      } else {
+        return this._selectedEndMarkerLook !== undefined ? this._selectedEndMarkerLook : this.type.selectedEndMarkerLook;
+      }
+    } else {
+      if (this.highlighted) {
+        return this._highlightedEndMarkerLook !== undefined ? this._highlightedEndMarkerLook : this.type.highlightedEndMarkerLook;
+      } else {
+        return this._defaultEndMarkerLook !== undefined ? this._defaultEndMarkerLook : this.type.defaultEndMarkerLook;
+      }
+    }
+  }
+  /**
+   * 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);
+      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;
+    }
+  }
   constructor(model, type, start, end, id) {
     if (model.connections.get(id) !== undefined) {
       throw new Error(`DiagramConnection with id "${id}" already exists`);
     }
+    if (!id) {
+      throw new Error(`DiagramConnection cannot have an empty or null id`);
+    }
     super(model, id);
     /**
      * Coordinates of the start point of this connection.
@@ -1733,11 +1990,9 @@ class DiagramConnection extends DiagramElement {
      * @public
      */
     this.points = [];
-    this.type = type;
+    this._type = type;
     this.valueSet = new ValueSet(type.propertySet, this);
     this.originalData = {};
-    this.startMarkerLook = type.defaultStartMarkerLook;
-    this.endMarkerLook = type.defaultEndMarkerLook;
     this.setStart(start);
     this.setEnd(end);
   }
@@ -1910,7 +2165,7 @@ class DiagramConnectionSet extends DiagramElementSet {
    * @param type The type of the connection given as either the type itself or the id of the type.
    * @param start The start port of the connection.
    * @param end The end port of the connection.
-   * @param id The id of the connection.
+   * @param id The id of the connection. Cannot be an empty string.
    * @returns The instanced connection.
    */
   new(type, start, end, id) {
@@ -2236,30 +2491,6 @@ const getTopPadding$1 = config => {
   }
 };
 
-/**
- * Default values of the look of a diagram section.
- * @private
- * @see DIAGRAM_SECTION_DEFAULTS
- */
-const DIAGRAM_SECTION_LOOK_DEFAULTS = {
-  lookType: 'shaped-look',
-  shape: ClosedShape.Rectangle,
-  fillColor: '#FFFFFF',
-  borderColor: '#000000',
-  selectedFillColor: '#FFFFFF',
-  selectedBorderColor: '#000000'
-};
-/**
- * Default values of the parameters of a diagram section.
- * @private
- * @see DiagramSection
- */
-const DIAGRAM_SECTION_DEFAULTS = {
-  label: null,
-  ports: [],
-  look: DIAGRAM_SECTION_LOOK_DEFAULTS,
-  priority: DEFAULT_PRIORITY
-};
 /**
  * Default value of the default width of a diagram section.
  * @private
@@ -2284,6 +2515,41 @@ const DIAGRAM_SECTION_MIN_WIDTH = 1;
  * @see DiagramSection
  */
 const DIAGRAM_SECTION_MIN_HEIGHT = 1;
+/**
+ * A grid of sections which a node has.
+ * @public
+ * @see DiagramNode
+ * @see SectionGridConfig
+ */
+class DiagramSectionGrid {
+  constructor(options) {
+    this.margin = options.margin || 0;
+    this.defaultWidths = options.defaultWidths || null;
+    this.defaultHeights = options.defaultHeights || null;
+    this.minWidths = options.minWidths || null;
+    this.minHeights = options.minHeights || null;
+    this.sections = [];
+    for (const sectionRow of options.sections) {
+      const sectionList = [];
+      this.sections.push(sectionList);
+      for (const section of sectionRow) {
+        sectionList.push(new DiagramSectionType(section));
+      }
+    }
+  }
+}
+class DiagramSectionType {
+  constructor(options) {
+    this.label = options.label || null;
+    this.ports = options.ports || [];
+    this.priority = options.priority || DEFAULT_PRIORITY;
+    const looks = extractLooksFromConfig(options.look || DIAGRAM_NODE_LOOK_DEFAULTS);
+    this.defaultLook = looks.defaultLook;
+    this.selectedLook = looks.selectedLook;
+    this.highlightedLook = looks.highlightedLook;
+    this.selectedAndHighlightedLook = looks.selectedAndHighlightedLook;
+  }
+}
 /**
  * A section of a node which can have connections and display a property of the node.
  * @public
@@ -2305,10 +2571,52 @@ class DiagramSection extends DiagramElement {
       this.label.text = name;
     }
   }
+  /**
+   * Current look of this port.
+   * @private
+   */
+  get look() {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (this.selected) {
+      if (this.highlighted) {
+        return this._selectedAndHighlightedLook !== undefined ? this._selectedAndHighlightedLook : ((_a = this.type) === null || _a === undefined ? undefined : _a.selectedAndHighlightedLook) || ((_b = this.node) === null || _b === undefined ? undefined : _b.look);
+      } else {
+        return this._selectedLook !== undefined ? this._selectedLook : ((_c = this.type) === null || _c === undefined ? undefined : _c.selectedLook) || ((_d = this.node) === null || _d === undefined ? undefined : _d.look);
+      }
+    } else {
+      if (this.highlighted) {
+        return this._highlightedLook !== undefined ? this._highlightedLook : ((_e = this.type) === null || _e === undefined ? undefined : _e.highlightedLook) || ((_f = this.node) === null || _f === undefined ? undefined : _f.look);
+      } else {
+        return this._defaultLook !== undefined ? this._defaultLook : ((_g = this.type) === null || _g === undefined ? undefined : _g.defaultLook) || ((_h = this.node) === null || _h === undefined ? undefined : _h.look);
+      }
+    }
+  }
+  /**
+   * 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);
+      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;
+    }
+  }
   constructor(model, node, indexXInNode, indexYInNode, coords, width, height, id) {
     if (model.sections.get(id) !== undefined) {
       throw new Error(`DiagramSection with id "${id}" already exists`);
     }
+    if (!id) {
+      throw new Error(`DiagramSection cannot have an empty or null id`);
+    }
     super(model, id);
     /**
      * Ports of this section.
@@ -2347,7 +2655,7 @@ class DiagramSection extends DiagramElement {
       decorator.raise();
     }
   }
-  getConfig() {
+  get type() {
     var _a, _b, _c, _d, _e;
     return (_e = (_d = (_c = (_b = (_a = this.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.sectionGrid) === null || _c === undefined ? undefined : _c.sections) === null || _d === undefined ? undefined : _d[this.indexYInNode]) === null || _e === undefined ? undefined : _e[this.indexXInNode];
   }
@@ -2361,7 +2669,7 @@ class DiagramSection extends DiagramElement {
   }
   getPriority() {
     var _a, _b, _c, _d, _e, _f;
-    return ((_f = (_e = (_d = (_c = (_b = (_a = this.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.sectionGrid) === null || _c === undefined ? undefined : _c.sections) === null || _d === undefined ? undefined : _d[this.indexYInNode]) === null || _e === undefined ? undefined : _e[this.indexXInNode]) === null || _f === undefined ? undefined : _f.priority) || DIAGRAM_SECTION_DEFAULTS.priority;
+    return ((_f = (_e = (_d = (_c = (_b = (_a = this.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.sectionGrid) === null || _c === undefined ? undefined : _c.sections) === null || _d === undefined ? undefined : _d[this.indexYInNode]) === null || _e === undefined ? undefined : _e[this.indexXInNode]) === null || _f === undefined ? undefined : _f.priority) || DEFAULT_PRIORITY;
   }
   /**
    * Get the port of this section which is closest to the given coordinates.
@@ -2512,7 +2820,6 @@ class DiagramSection extends DiagramElement {
    * @public
    */
   setGeometry(geometry) {
-    var _a, _b, _c, _d, _e, _f;
     const oldCoordsX = [this.coords[0], this.coords[0] + this.width];
     const oldCoordsY = [this.coords[1], this.coords[1] + this.height];
     this.coords = [...geometry.coords];
@@ -2525,10 +2832,11 @@ class DiagramSection extends DiagramElement {
       port.move(translatePoint(port.coords, oldCoordsX, oldCoordsY, newCoordsX, newCoordsY));
     }
     // Set label's dimensions as a function of ours.
+    const type = this.type;
     if (this.label) {
-      this.label.coords = [this.coords[0] + getLeftMargin((_a = this.getConfig()) === null || _a === undefined ? undefined : _a.label), this.coords[1] + getTopMargin((_b = this.getConfig()) === null || _b === undefined ? undefined : _b.label)];
-      this.label.width = this.width - getLeftMargin((_c = this.getConfig()) === null || _c === undefined ? undefined : _c.label) - getRightMargin((_d = this.getConfig()) === null || _d === undefined ? undefined : _d.label);
-      this.label.height = this.height - getTopMargin((_e = this.getConfig()) === null || _e === undefined ? undefined : _e.label) - getBottomMargin((_f = this.getConfig()) === null || _f === undefined ? undefined : _f.label);
+      this.label.coords = [this.coords[0] + getLeftMargin(type === null || type === undefined ? undefined : type.label), this.coords[1] + getTopMargin(type === null || type === undefined ? undefined : type.label)];
+      this.label.width = this.width - getLeftMargin(type === null || type === undefined ? undefined : type.label) - getRightMargin(type === null || type === undefined ? undefined : type.label);
+      this.label.height = this.height - getTopMargin(type === null || type === undefined ? undefined : type.label) - getBottomMargin(type === null || type === undefined ? undefined : type.label);
       this.label.updateInView();
     }
     // Move decorators to match the new coords.
@@ -2629,8 +2937,14 @@ const DIAGRAM_NODE_LOOK_DEFAULTS = {
   shape: ClosedShape.Rectangle,
   fillColor: '#FFFFFF',
   borderColor: '#000000',
-  selectedFillColor: '#FFFFFF',
-  selectedBorderColor: '#000000'
+  borderThickness: 1,
+  selected: {
+    fillColor: '#FFAAFF',
+    borderColor: '#AA00AA'
+  },
+  highlighted: {
+    borderThickness: 3
+  }
 };
 /**
  * Default values of the parameters of a diagram node.
@@ -2678,8 +2992,12 @@ class DiagramNodeType {
     this.topPadding = getTopPadding(values);
     this.label = values.label;
     this.ports = values.ports;
-    this.sectionGrid = values.sectionGrid;
-    this.look = values.look;
+    this.sectionGrid = values.sectionGrid ? new DiagramSectionGrid(values.sectionGrid) : null;
+    const looks = extractLooksFromConfig(values.look);
+    this.defaultLook = looks.defaultLook;
+    this.selectedLook = looks.selectedLook;
+    this.highlightedLook = looks.highlightedLook;
+    this.selectedAndHighlightedLook = looks.selectedAndHighlightedLook;
     this.isUnique = values.isUnique;
     this.canBeParentless = values.canBeParentless;
     this.childrenTypes = values.childrenTypes;
@@ -2695,6 +3013,27 @@ class DiagramNodeType {
  * @see DiagramSection
  */
 class DiagramNode extends DiagramElement {
+  get type() {
+    return this._type;
+  }
+  set type(type) {
+    var _a, _b;
+    (_b = (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.userSelection) === null || _b === undefined ? undefined : _b.openInPropertyEditor(undefined);
+    this._type = type;
+    if (this.valueSet) {
+      this.valueSet = new ValueSet(type.propertySet, this);
+    }
+    this.updateInView();
+  }
+  get typeString() {
+    return this.type.id;
+  }
+  set typeString(typeString) {
+    const type = this.model.nodes.types.get(typeString);
+    if (type) {
+      this.type = type;
+    }
+  }
   /**
    * Name of this node. Alias for this node's label's text.
    * @public
@@ -2708,10 +3047,51 @@ class DiagramNode extends DiagramElement {
       this.label.text = name;
     }
   }
+  /**
+   * Current look of this port.
+   * @private
+   */
+  get look() {
+    if (this.selected) {
+      if (this.highlighted) {
+        return this._selectedAndHighlightedLook !== undefined ? this._selectedAndHighlightedLook : this.type.selectedAndHighlightedLook;
+      } else {
+        return this._selectedLook !== undefined ? this._selectedLook : this.type.selectedLook;
+      }
+    } else {
+      if (this.highlighted) {
+        return this._highlightedLook !== undefined ? this._highlightedLook : this.type.highlightedLook;
+      } else {
+        return this._defaultLook !== undefined ? this._defaultLook : this.type.defaultLook;
+      }
+    }
+  }
+  /**
+   * 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);
+      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;
+    }
+  }
   constructor(model, type, coords = [0, 0], id) {
     if (model.nodes.get(id) !== undefined) {
       throw new Error(`DiagramNode with id "${id}" already exists`);
     }
+    if (!id) {
+      throw new Error(`DiagramNode cannot have an empty or null id`);
+    }
     super(model, id);
     /**
      * Nodes contained within this node.
@@ -2738,7 +3118,7 @@ class DiagramNode extends DiagramElement {
      * @public
      */
     this.geometryTimestamp = null;
-    this.type = type;
+    this._type = type;
     this.valueSet = new ValueSet(type.propertySet, this);
     this.originalData = {};
     this.coords = coords;
@@ -3217,7 +3597,7 @@ class DiagramNodeSet extends DiagramElementSet {
    * @public
    * @param type The type of the node given as either the type itself or the id of the type.
    * @param coords The coordinates of the top left corner of the node in the diagram.
-   * @param id The id of the node.
+   * @param id The id of the node. Cannot be an empty string.
    * @returns The instanced node.
    */
   new(type, coords, id) {
@@ -3252,7 +3632,8 @@ class DiagramNodeSet extends DiagramElementSet {
     if (nodeType.ports.length > 0) {
       for (let i = 0; i < nodeType.ports.length; ++i) {
         const portConfig = nodeType.ports[i];
-        const port = this.model.ports.new(portConfig.type !== undefined ? this.model.ports.types.get(portConfig.type) : undefined, node, [node.coords[0] + portConfig.coords[0], node.coords[1] + portConfig.coords[1]], portConfig.connectionPoint !== undefined ? [node.coords[0] + (portConfig.connectionPoint[0] || 0), node.coords[1] + (portConfig.connectionPoint[1] || 0)] : undefined, portConfig.direction, `${node.id}_${i}`);
+        const portType = portConfig.type !== undefined ? this.model.ports.types.get(portConfig.type) : undefined;
+        const port = this.model.ports.new(portType, node, [node.coords[0] + portConfig.coords[0], node.coords[1] + portConfig.coords[1]], portConfig.connectionPoint !== undefined ? [node.coords[0] + (portConfig.connectionPoint[0] || 0), node.coords[1] + (portConfig.connectionPoint[1] || 0)] : undefined, portConfig.direction, `${node.id}_${i}`);
         if ((_e = port.type) === null || _e === undefined ? undefined : _e.label) {
           const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), (_f = port.type) === null || _f === undefined ? undefined : _f.label);
           const labelWidth = 6 * labelConfiguration.fontSize + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
@@ -3449,14 +3830,24 @@ const getTopPadding = config => {
 };
 
 /**
- * Default values of the parameters of a diagram port.
+ * Default values of the look of a diagram port.
  * @private
- * @see DiagramPort
+ * @see DIAGRAM_NODE_TYPE_DEFAULTS
  */
-const DIAGRAM_PORT_DEFAULTS = {
-  highlightedColor: 'cyan',
-  selectedColor: 'violet'
+const DIAGRAM_PORT_LOOK_DEFAULTS = {
+  lookType: 'shaped-look',
+  shape: ClosedShape.Ellipse,
+  fillColor: 'transparent',
+  borderColor: 'transparent',
+  borderThickness: 0,
+  selected: {
+    fillColor: 'rgba(255, 0, 255, 0.5)'
+  },
+  highlighted: {
+    fillColor: 'rgba(0, 255, 255, 0.5)'
+  }
 };
+const DIAGRAM_PORT_LOOKS = extractLooksFromConfig(DIAGRAM_PORT_LOOK_DEFAULTS);
 /**
  * Default values of the parameters of a diagram port.
  * @private
@@ -3467,7 +3858,8 @@ const DIAGRAM_PORT_TYPE_DEFAULTS = {
   label: null,
   allowsOutgoing: true,
   allowsIncoming: true,
-  width: 24
+  width: 24,
+  look: DIAGRAM_PORT_LOOK_DEFAULTS
 };
 /**
  * A port type, which holds properties that ports of this type share in common.
@@ -3483,7 +3875,11 @@ class DiagramPortType {
     this.allowsOutgoing = values.allowsOutgoing;
     this.allowsIncoming = values.allowsIncoming;
     this.width = values.width;
-    this.look = values.look;
+    const looks = extractLooksFromConfig(values.look);
+    this.defaultLook = looks.defaultLook;
+    this.selectedLook = looks.selectedLook;
+    this.highlightedLook = looks.highlightedLook;
+    this.selectedAndHighlightedLook = looks.selectedAndHighlightedLook;
   }
 }
 /**
@@ -3494,6 +3890,27 @@ class DiagramPortType {
  * @see DiagramSection
  */
 class DiagramPort extends DiagramElement {
+  get type() {
+    return this._type;
+  }
+  set type(type) {
+    this._type = type;
+    this.updateInView();
+  }
+  get typeString() {
+    var _a;
+    return (_a = this.type) === null || _a === undefined ? undefined : _a.id;
+  }
+  set typeString(typeString) {
+    if (typeString === undefined) {
+      this.type = undefined;
+    } else {
+      const type = this.model.ports.types.get(typeString);
+      if (type) {
+        this.type = type;
+      }
+    }
+  }
   /**
    * Whether this port can be used as a connection start point.
    */
@@ -3521,10 +3938,67 @@ class DiagramPort extends DiagramElement {
       this.label.text = name;
     }
   }
+  /**
+   * Current look of this port.
+   * @private
+   */
+  get look() {
+    var _a, _b, _c, _d;
+    if (this.selected) {
+      if (this.highlighted) {
+        return this._selectedAndHighlightedLook !== undefined ? this._selectedAndHighlightedLook : (_a = this.type || DIAGRAM_PORT_LOOKS) === null || _a === undefined ? undefined : _a.selectedAndHighlightedLook;
+      } else {
+        return this._selectedLook !== undefined ? this._selectedLook : (_b = this.type || DIAGRAM_PORT_LOOKS) === null || _b === undefined ? undefined : _b.selectedLook;
+      }
+    } else {
+      if (this.highlighted) {
+        return this._highlightedLook !== undefined ? this._highlightedLook : (_c = this.type || DIAGRAM_PORT_LOOKS) === null || _c === undefined ? undefined : _c.highlightedLook;
+      } else {
+        return this._defaultLook !== undefined ? this._defaultLook : (_d = this.type || DIAGRAM_PORT_LOOKS) === null || _d === undefined ? undefined : _d.defaultLook;
+      }
+    }
+  }
+  /**
+   * 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);
+      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;
+    }
+  }
+  /**
+   * Current width of this port.
+   * @private
+   */
+  get width() {
+    var _a;
+    return ((_a = this.type) === null || _a === undefined ? undefined : _a.width) || DIAGRAM_PORT_TYPE_DEFAULTS.width;
+  }
+  /**
+   * Current height of this port. Same as the width.
+   * @private
+   */
+  get height() {
+    return this.width;
+  }
   constructor(model, type, rootElement, coords, connectionPoint, direction, id) {
     if (model.ports.get(id) !== undefined) {
       throw new Error(`DiagramPort with id "${id}" already exists`);
     }
+    if (!id) {
+      throw new Error(`DiagramPort cannot have an empty or null id`);
+    }
     super(model, id);
     /**
      * Connections that start at this port.
@@ -3536,7 +4010,7 @@ class DiagramPort extends DiagramElement {
      * @public
      */
     this.incomingConnections = [];
-    this.type = type;
+    this._type = type;
     this.rootElement = rootElement;
     this.coords = coords;
     this.connectionPoint = connectionPoint || coords;
@@ -5127,7 +5601,10 @@ class DiagramHighlightedEvent extends DiagramEvent {
 class DiagramDecorator extends DiagramElement {
   constructor(model, rootElement, coords, width, height, priority, html, id) {
     if (model.objects.get(id) !== undefined) {
-      throw new Error(`DiagramObject with id "${id}" already exists`);
+      throw new Error(`DiagramDecorator with id "${id}" already exists`);
+    }
+    if (!id) {
+      throw new Error(`DiagramDecorator cannot have an empty or null id`);
     }
     super(model, id);
     this.rootElement = rootElement;
@@ -5176,7 +5653,14 @@ class DiagramDecoratorSet extends DiagramElementSet {
   }
   /**
    * Instance a new decorator and add it to this set.
-   * @private
+   * @public
+   * @param coords The coordinates of the top left corner of the decorator in the diagram.
+   * @param width The dimension of the decorator along the x axis.
+   * @param height The dimension of the decorator along the y axis.
+   * @param priority The priority of the decorator. Used when filtering by priority.
+   * @param html The html contents of the decorator.
+   * @param id The id of the decorator. Cannot be an empty string.
+   * @returns The instanced decorator.
    */
   new(rootElement, coords, width, height, priority, html, id) {
     const decorator = new DiagramDecorator(this.model, rootElement, coords, width, height, priority, html, id);
@@ -5213,6 +5697,9 @@ class DiagramObject extends DiagramElement {
     if (model.objects.get(id) !== undefined) {
       throw new Error(`DiagramObject with id "${id}" already exists`);
     }
+    if (!id) {
+      throw new Error(`DiagramObject cannot have an empty or null id`);
+    }
     super(model, id);
     this.coords = coords;
     this.width = width;
@@ -5259,7 +5746,14 @@ class DiagramObjectSet extends DiagramElementSet {
   }
   /**
    * Instance a new object and add it to this set.
-   * @private
+   * @public
+   * @param coords The coordinates of the top left corner of the object in the diagram.
+   * @param width The dimension of the object along the x axis.
+   * @param height The dimension of the object along the y axis.
+   * @param priority The priority of the object. Used when filtering by priority.
+   * @param html The html contents of the object.
+   * @param id The id of the object. Cannot be an empty string.
+   * @returns The instanced object.
    */
   new(coords, width, height, priority, html, id) {
     const object = new DiagramObject(this.model, coords, width, height, priority, html, id);
@@ -5362,6 +5856,68 @@ class DiagramModel {
   }
 }
 
+/**
+ * Checks if the given mouse event was produced with a secondary button press.
+ * @private
+ * @param event A mouse event.
+ * @returns `true` if the given mouse event was produced with a secondary button press, `false` otherwise.
+ */
+const isSecondaryButton = event => {
+  return !!event.button;
+};
+/**
+ * Get the SVG path of a diagram connection.
+ * @private
+ * @see linePath
+ */
+const getConnectionPath = (shape, startCoords, endCoords, startDirection, endDirection, width, startMarkerWidth, endMarkerWidth) => {
+  return linePath(shape, [startCoords, endCoords], startDirection, endDirection, Math.max(
+  // reasonable value for the minimumDistanceBeforeTurn relative to the line width
+  10, startMarkerWidth || 0, endMarkerWidth || 0) * width);
+};
+const setCursorStyle = style => {
+  if (!style) {
+    d3.select('body').style('cursor', CursorStyle.Auto);
+  } else {
+    d3.select('body').style('cursor', style);
+  }
+};
+const getRelatedNodeOrItself = element => {
+  if (element instanceof DiagramNode) {
+    return element;
+  }
+  if (element instanceof DiagramSection) {
+    return element.node || element;
+  }
+  return element.rootElement instanceof DiagramNode || element.rootElement instanceof DiagramSection || element.rootElement instanceof DiagramPort ? getRelatedNodeOrItself(element.rootElement) : element;
+};
+const initializeLook = selection => {
+  selection.filter('.shaped-look').append('path');
+  selection.filter('.image-look').append('image').attr('preserveAspectRatio', 'none');
+  selection.filter('.stretchable-image-look').append('image').attr('class', 'top-left-image').attr('preserveAspectRatio', 'none');
+  selection.filter('.stretchable-image-look').append('image').attr('class', 'top-image').attr('preserveAspectRatio', 'none');
+  selection.filter('.stretchable-image-look').append('image').attr('class', 'top-right-image').attr('preserveAspectRatio', 'none');
+  selection.filter('.stretchable-image-look').append('image').attr('class', 'left-image').attr('preserveAspectRatio', 'none');
+  selection.filter('.stretchable-image-look').append('image').attr('class', 'center-image').attr('preserveAspectRatio', 'none');
+  selection.filter('.stretchable-image-look').append('image').attr('class', 'right-image').attr('preserveAspectRatio', 'none');
+  selection.filter('.stretchable-image-look').append('image').attr('class', 'bottom-left-image').attr('preserveAspectRatio', 'none');
+  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 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('.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);
+  selection.filter('.stretchable-image-look').select('image.top-right-image').attr('x', d => d.width - d.look.rightMargin).attr('y', 0).attr('width', d => d.look.rightMargin).attr('height', d => d.look.topMargin).attr('href', d => d.look.backgroundImageTopRight);
+  selection.filter('.stretchable-image-look').select('image.left-image').attr('x', 0).attr('y', d => d.look.topMargin).attr('width', d => d.look.leftMargin).attr('height', d => d.height - d.look.bottomMargin - d.look.topMargin).attr('href', d => d.look.backgroundImageLeft);
+  selection.filter('.stretchable-image-look').select('image.center-image').attr('x', d => d.look.leftMargin).attr('y', d => d.look.topMargin).attr('width', d => d.width - d.look.rightMargin - d.look.leftMargin).attr('height', d => d.height - d.look.bottomMargin - d.look.topMargin).attr('href', d => d.look.backgroundImageCenter);
+  selection.filter('.stretchable-image-look').select('image.right-image').attr('x', d => d.width - d.look.rightMargin).attr('y', d => d.look.topMargin).attr('width', d => d.look.rightMargin).attr('height', d => d.height - d.look.bottomMargin - d.look.topMargin).attr('href', d => d.look.backgroundImageRight);
+  selection.filter('.stretchable-image-look').select('image.bottom-left-image').attr('x', 0).attr('y', d => d.height - d.look.bottomMargin).attr('width', d => d.look.leftMargin).attr('height', d => d.look.bottomMargin).attr('href', d => d.look.backgroundImageBottomLeft);
+  selection.filter('.stretchable-image-look').select('image.bottom-image').attr('x', d => d.look.leftMargin).attr('y', d => d.height - d.look.bottomMargin).attr('width', d => d.width - d.look.rightMargin - d.look.leftMargin).attr('height', d => d.look.bottomMargin).attr('href', d => d.look.backgroundImageBottom);
+  selection.filter('.stretchable-image-look').select('image.bottom-right-image').attr('x', d => d.width - d.look.rightMargin).attr('y', d => d.height - d.look.bottomMargin).attr('width', d => d.look.rightMargin).attr('height', d => d.look.bottomMargin).attr('href', d => d.look.backgroundImageBottomRight);
+};
+
 const CONTEXT_MENU_MENU_RADIUS = 96;
 const CONTEXT_MENU_BUTTON_RADIUS = 32;
 const CONTEXT_MENU_TOTAL_RADIUS = CONTEXT_MENU_MENU_RADIUS + CONTEXT_MENU_BUTTON_RADIUS;
@@ -5956,7 +6512,7 @@ class DiagramUserSelection extends DiagramElementSet {
     }
   }
   makeUpdateValuesAction() {
-    var _a, _b;
+    var _a, _b, _c;
     if (this.propertyEditorSelection === undefined || this.propertyEditorValues === undefined) {
       return;
     }
@@ -5968,7 +6524,7 @@ class DiagramUserSelection extends DiagramElementSet {
     }
     const from = this.propertyEditorValues;
     const to = structuredClone((_b = this.propertyEditorSelection) === null || _b === undefined ? undefined : _b.valueSet.getValues());
-    const [fromDiff, toDiff] = diff(from, to);
+    const [fromDiff, toDiff] = diffProperties(from, to, (_c = this.propertyEditorSelection) === null || _c === undefined ? undefined : _c.valueSet);
     const currentAction = new UpdateValuesAction(this.canvas, previousSelectionId, fromDiff, toDiff);
     currentAction.do();
     this.canvas.actionStack.add(currentAction);
@@ -6391,7 +6947,7 @@ class DiagramCanvas {
   updateNodesInView(...ids) {
     let updateSelection = this.selectCanvasElements().selectAll('g.diagram-node').data(this.model.nodes.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
-    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => `diagram-node${d.type.resizableX ? ' resizable-x' : ''}${d.type.resizableY ? ' resizable-y' : ''} ${d.type.look.lookType}`);
+    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => `diagram-node${d.type.resizableX ? ' resizable-x' : ''}${d.type.resizableY ? ' resizable-y' : ''} ${d.type.defaultLook.lookType}`);
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }
@@ -6453,17 +7009,7 @@ class DiagramCanvas {
       }
       this.secondaryButton = false;
     }));
-    enterSelection.filter('.shaped-look').append('path');
-    enterSelection.filter('.image-look').append('image').attr('preserveAspectRatio', 'none');
-    enterSelection.filter('.stretchable-image-look').append('image').attr('class', 'top-left-image').attr('preserveAspectRatio', 'none');
-    enterSelection.filter('.stretchable-image-look').append('image').attr('class', 'top-image').attr('preserveAspectRatio', 'none');
-    enterSelection.filter('.stretchable-image-look').append('image').attr('class', 'top-right-image').attr('preserveAspectRatio', 'none');
-    enterSelection.filter('.stretchable-image-look').append('image').attr('class', 'left-image').attr('preserveAspectRatio', 'none');
-    enterSelection.filter('.stretchable-image-look').append('image').attr('class', 'center-image').attr('preserveAspectRatio', 'none');
-    enterSelection.filter('.stretchable-image-look').append('image').attr('class', 'right-image').attr('preserveAspectRatio', 'none');
-    enterSelection.filter('.stretchable-image-look').append('image').attr('class', 'bottom-left-image').attr('preserveAspectRatio', 'none');
-    enterSelection.filter('.stretchable-image-look').append('image').attr('class', 'bottom-image').attr('preserveAspectRatio', 'none');
-    enterSelection.filter('.stretchable-image-look').append('image').attr('class', 'bottom-right-image').attr('preserveAspectRatio', 'none');
+    initializeLook(enterSelection);
     enterSelection.filter('.resizable-x').append('line').attr('class', 'left-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
@@ -6601,17 +7147,7 @@ class DiagramCanvas {
       setCursorStyle();
     }));
     mergeSelection.attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).attr('opacity', d => d.removed ? 0.5 : 1);
-    mergeSelection.filter('.shaped-look').select('path').attr('d', d => generalClosedPath(d.type.look.shape, 0, 0, d.width, d.height)).attr('fill', d => d.selected ? d.type.look.selectedFillColor : d.type.look.fillColor).attr('stroke', d => d.selected ? d.type.look.selectedBorderColor : d.type.look.borderColor).attr('stroke-width', d => `${d.highlighted ? 3 : 1}px`);
-    mergeSelection.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.selected ? d.type.look.selectedBackgroundImage : d.type.look.backgroundImage);
-    mergeSelection.filter('.stretchable-image-look').select('image.top-left-image').attr('x', 0).attr('y', 0).attr('width', d => d.type.look.leftMargin).attr('height', d => d.type.look.topMargin).attr('href', d => d.selected ? d.type.look.selectedBackgroundImageTopLeft : d.type.look.backgroundImageTopLeft);
-    mergeSelection.filter('.stretchable-image-look').select('image.top-image').attr('x', d => d.type.look.leftMargin).attr('y', 0).attr('width', d => d.width - d.type.look.rightMargin - d.type.look.leftMargin).attr('height', d => d.type.look.topMargin).attr('href', d => d.selected ? d.type.look.selectedBackgroundImageTop : d.type.look.backgroundImageTop);
-    mergeSelection.filter('.stretchable-image-look').select('image.top-right-image').attr('x', d => d.width - d.type.look.rightMargin).attr('y', 0).attr('width', d => d.type.look.rightMargin).attr('height', d => d.type.look.topMargin).attr('href', d => d.selected ? d.type.look.selectedBackgroundImageTopRight : d.type.look.backgroundImageTopRight);
-    mergeSelection.filter('.stretchable-image-look').select('image.left-image').attr('x', 0).attr('y', d => d.type.look.topMargin).attr('width', d => d.type.look.leftMargin).attr('height', d => d.height - d.type.look.bottomMargin - d.type.look.topMargin).attr('href', d => d.selected ? d.type.look.selectedBackgroundImageLeft : d.type.look.backgroundImageLeft);
-    mergeSelection.filter('.stretchable-image-look').select('image.center-image').attr('x', d => d.type.look.leftMargin).attr('y', d => d.type.look.topMargin).attr('width', d => d.width - d.type.look.rightMargin - d.type.look.leftMargin).attr('height', d => d.height - d.type.look.bottomMargin - d.type.look.topMargin).attr('href', d => d.selected ? d.type.look.selectedBackgroundImageCenter : d.type.look.backgroundImageCenter);
-    mergeSelection.filter('.stretchable-image-look').select('image.right-image').attr('x', d => d.width - d.type.look.rightMargin).attr('y', d => d.type.look.topMargin).attr('width', d => d.type.look.rightMargin).attr('height', d => d.height - d.type.look.bottomMargin - d.type.look.topMargin).attr('href', d => d.selected ? d.type.look.selectedBackgroundImageRight : d.type.look.backgroundImageRight);
-    mergeSelection.filter('.stretchable-image-look').select('image.bottom-left-image').attr('x', 0).attr('y', d => d.height - d.type.look.bottomMargin).attr('width', d => d.type.look.leftMargin).attr('height', d => d.type.look.bottomMargin).attr('href', d => d.selected ? d.type.look.selectedBackgroundImageBottomLeft : d.type.look.backgroundImageBottomLeft);
-    mergeSelection.filter('.stretchable-image-look').select('image.bottom-image').attr('x', d => d.type.look.leftMargin).attr('y', d => d.height - d.type.look.bottomMargin).attr('width', d => d.width - d.type.look.rightMargin - d.type.look.leftMargin).attr('height', d => d.type.look.bottomMargin).attr('href', d => d.selected ? d.type.look.selectedBackgroundImageBottom : d.type.look.backgroundImageBottom);
-    mergeSelection.filter('.stretchable-image-look').select('image.bottom-right-image').attr('x', d => d.width - d.type.look.rightMargin).attr('y', d => d.height - d.type.look.bottomMargin).attr('width', d => d.type.look.rightMargin).attr('height', d => d.type.look.bottomMargin).attr('href', d => d.selected ? d.type.look.selectedBackgroundImageBottomRight : d.type.look.backgroundImageBottomRight);
+    updateLook(mergeSelection);
     mergeSelection.filter('.resizable-x').select('line.left-resizer').attr('x1', RESIZER_THICKNESS / 2).attr('x2', RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
     mergeSelection.filter('.resizable-y').select('line.top-resizer').attr('x1', 0).attr('x2', d => d.width).attr('y1', RESIZER_THICKNESS / 2).attr('y2', RESIZER_THICKNESS / 2);
     mergeSelection.filter('.resizable-x').select('line.right-resizer').attr('x1', d => d.width - RESIZER_THICKNESS / 2).attr('x2', d => d.width - RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
@@ -6621,8 +7157,8 @@ class DiagramCanvas {
     let updateSelection = this.selectCanvasElements().selectAll('g.diagram-section').data(this.model.sections.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
     const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => {
-      var _a, _b, _c, _d, _e, _f;
-      return `diagram-section${((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) ? ' resizable-x' : ''}${((_d = (_c = d.node) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.resizableY) ? ' resizable-y' : ''} ${(_f = (_e = d.getConfig()) === null || _e === undefined ? undefined : _e.look) === null || _f === undefined ? undefined : _f.lookType}`;
+      var _a, _b, _c, _d, _e;
+      return `diagram-section${((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) ? ' resizable-x' : ''}${((_d = (_c = d.node) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.resizableY) ? ' resizable-y' : ''} ${(_e = d.look) === null || _e === undefined ? undefined : _e.lookType}`;
     });
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
@@ -6702,17 +7238,7 @@ class DiagramCanvas {
       }
       this.secondaryButton = false;
     }));
-    enterSelection.filter('.shaped-look').append('path');
-    enterSelection.filter('.image-look').append('image').attr('preserveAspectRatio', 'none');
-    enterSelection.filter('.stretchable-image-look').append('image').attr('class', 'top-left-image').attr('preserveAspectRatio', 'none');
-    enterSelection.filter('.stretchable-image-look').append('image').attr('class', 'top-image').attr('preserveAspectRatio', 'none');
-    enterSelection.filter('.stretchable-image-look').append('image').attr('class', 'top-right-image').attr('preserveAspectRatio', 'none');
-    enterSelection.filter('.stretchable-image-look').append('image').attr('class', 'left-image').attr('preserveAspectRatio', 'none');
-    enterSelection.filter('.stretchable-image-look').append('image').attr('class', 'center-image').attr('preserveAspectRatio', 'none');
-    enterSelection.filter('.stretchable-image-look').append('image').attr('class', 'right-image').attr('preserveAspectRatio', 'none');
-    enterSelection.filter('.stretchable-image-look').append('image').attr('class', 'bottom-left-image').attr('preserveAspectRatio', 'none');
-    enterSelection.filter('.stretchable-image-look').append('image').attr('class', 'bottom-image').attr('preserveAspectRatio', 'none');
-    enterSelection.filter('.stretchable-image-look').append('image').attr('class', 'bottom-right-image').attr('preserveAspectRatio', 'none');
+    initializeLook(enterSelection);
     enterSelection.filter('.resizable-x').append('line').attr('class', 'left-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
       var _a, _b;
       if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
@@ -6870,146 +7396,7 @@ class DiagramCanvas {
       setCursorStyle();
     }));
     mergeSelection.attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).attr('opacity', d => d.removed ? 0.5 : 1);
-    mergeSelection.filter('.shaped-look').select('path').attr('d', d => {
-      var _a;
-      return generalClosedPath(((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).shape, 0, 0, d.width, d.height);
-    }).attr('fill', d => {
-      var _a, _b;
-      return d.selected ? ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).selectedFillColor : ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).fillColor;
-    }).attr('stroke', d => {
-      var _a, _b;
-      return d.selected ? ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).selectedBorderColor : ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).borderColor;
-    }).attr('stroke-width', d => `${d.highlighted ? 3 : 1}px`);
-    mergeSelection.filter('.image-look').select('image').attr('x', 0).attr('y', 0).attr('width', d => d.width).attr('height', d => d.height).attr('href', d => {
-      var _a, _b;
-      return d.selected ? ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).selectedBackgroundImage : ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).backgroundImage;
-    });
-    mergeSelection.filter('.stretchable-image-look').select('image.top-left-image').attr('x', 0).attr('y', 0).attr('width', d => {
-      var _a;
-      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).leftMargin;
-    }).attr('height', d => {
-      var _a;
-      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).topMargin;
-    }).attr('href', d => {
-      var _a, _b;
-      return d.selected ? ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).selectedBackgroundImageTopLeft : ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).backgroundImageTopLeft;
-    });
-    mergeSelection.filter('.stretchable-image-look').select('image.top-image').attr('x', d => {
-      var _a;
-      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).leftMargin;
-    }).attr('y', 0).attr('width', d => {
-      var _a, _b;
-      return d.width - ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).rightMargin - ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).leftMargin;
-    }).attr('height', d => {
-      var _a;
-      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).topMargin;
-    }).attr('href', d => {
-      var _a, _b;
-      return d.selected ? ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).selectedBackgroundImageTop : ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).backgroundImageTop;
-    });
-    mergeSelection.filter('.stretchable-image-look').select('image.top-right-image').attr('x', d => {
-      var _a;
-      return d.width - ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).rightMargin;
-    }).attr('y', 0).attr('width', d => {
-      var _a;
-      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).rightMargin;
-    }).attr('height', d => {
-      var _a;
-      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).topMargin;
-    }).attr('href', d => {
-      var _a, _b;
-      return d.selected ? ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).selectedBackgroundImageTopRight : ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).backgroundImageTopRight;
-    });
-    mergeSelection.filter('.stretchable-image-look').select('image.left-image').attr('x', 0).attr('y', d => {
-      var _a;
-      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).topMargin;
-    }).attr('width', d => {
-      var _a;
-      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).leftMargin;
-    }).attr('height', d => {
-      var _a, _b;
-      return d.height - ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).bottomMargin - ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).topMargin;
-    }).attr('href', d => {
-      var _a, _b;
-      return d.selected ? ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).selectedBackgroundImageLeft : ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).backgroundImageLeft;
-    });
-    mergeSelection.filter('.stretchable-image-look').select('image.center-image').attr('x', d => {
-      var _a;
-      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).leftMargin;
-    }).attr('y', d => {
-      var _a;
-      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).topMargin;
-    }).attr('width', d => {
-      var _a, _b;
-      return d.width - ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).rightMargin - ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).leftMargin;
-    }).attr('height', d => {
-      var _a, _b;
-      return d.height - ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).bottomMargin - ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).topMargin;
-    }).attr('href', d => {
-      var _a, _b;
-      return d.selected ? ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).selectedBackgroundImageCenter : ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).backgroundImageCenter;
-    });
-    mergeSelection.filter('.stretchable-image-look').select('image.right-image').attr('x', d => {
-      var _a;
-      return d.width - ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).rightMargin;
-    }).attr('y', d => {
-      var _a;
-      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).topMargin;
-    }).attr('width', d => {
-      var _a;
-      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).rightMargin;
-    }).attr('height', d => {
-      var _a, _b;
-      return d.height - ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).bottomMargin - ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).topMargin;
-    }).attr('href', d => {
-      var _a, _b;
-      return d.selected ? ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).selectedBackgroundImageRight : ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).backgroundImageRight;
-    });
-    mergeSelection.filter('.stretchable-image-look').select('image.bottom-left-image').attr('x', 0).attr('y', d => {
-      var _a;
-      return d.height - ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).bottomMargin;
-    }).attr('width', d => {
-      var _a;
-      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).leftMargin;
-    }).attr('height', d => {
-      var _a;
-      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).bottomMargin;
-    }).attr('href', d => {
-      var _a, _b;
-      return d.selected ? ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).selectedBackgroundImageBottomLeft : ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).backgroundImageBottomLeft;
-    });
-    mergeSelection.filter('.stretchable-image-look').select('image.bottom-image').attr('x', d => {
-      var _a;
-      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).leftMargin;
-    }).attr('y', d => {
-      var _a;
-      return d.height - ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).bottomMargin;
-    }).attr('width', d => {
-      var _a, _b;
-      return d.width - ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).rightMargin - ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).leftMargin;
-    }).attr('height', d => {
-      var _a;
-      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).bottomMargin;
-    }).attr('href', d => {
-      var _a, _b;
-      return d.selected ? ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).selectedBackgroundImageBottom : ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).backgroundImageBottom;
-    });
-    mergeSelection.filter('.stretchable-image-look').select('image.bottom-right-image').attr('x', d => {
-      var _a;
-      return d.width - ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).rightMargin;
-    }).attr('y', d => {
-      var _a;
-      return d.height - ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).bottomMargin;
-    }).attr('width', d => {
-      var _a;
-      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).rightMargin;
-    }).attr('height', d => {
-      var _a;
-      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).bottomMargin;
-    }).attr('href', d => {
-      var _a, _b;
-      return d.selected ? ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).selectedBackgroundImageBottomRight : ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).backgroundImageBottomRight;
-    });
+    updateLook(mergeSelection);
     mergeSelection.filter('.resizable-x').select('line.left-resizer').attr('x1', RESIZER_THICKNESS / 2).attr('x2', RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
     mergeSelection.filter('.resizable-y').select('line.top-resizer').attr('x1', 0).attr('x2', d => d.width).attr('y1', RESIZER_THICKNESS / 2).attr('y2', RESIZER_THICKNESS / 2);
     mergeSelection.filter('.resizable-x').select('line.right-resizer').attr('x1', d => d.width - RESIZER_THICKNESS / 2).attr('x2', d => d.width - RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
@@ -7018,10 +7405,7 @@ class DiagramCanvas {
   updatePortsInView(...ids) {
     let updateSelection = this.selectCanvasElements().selectAll('g.diagram-port').data(this.model.ports.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
-    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => {
-      var _a, _b;
-      return `diagram-port ${((_b = (_a = d.type) === null || _a === undefined ? undefined : _a.look) === null || _b === undefined ? undefined : _b.lookType) || 'default'}`;
-    });
+    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => `diagram-port ${d.look.lookType}`);
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }
@@ -7108,7 +7492,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 === undefined ? undefined : _a.attr('d', getConnectionPath(this.unfinishedConnection.type.shape, this.unfinishedConnection.startCoords, endCoords, this.unfinishedConnection.startDirection, this.unfinishedConnection.endDirection, this.unfinishedConnection.type.width, (_b = this.unfinishedConnection.startMarkerLook) === null || _b === undefined ? undefined : _b.markerWidth, (_c = this.unfinishedConnection.endMarkerLook) === null || _c === undefined ? undefined : _c.markerWidth));
+            (_a = this.unfinishedConnectionTracer) === null || _a === undefined ? undefined : _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 === undefined ? undefined : _b.width, (_c = this.unfinishedConnection.endMarkerLook) === null || _c === undefined ? undefined : _c.width));
             const unfinishedConnectionGhostNode = (_d = this.unfinishedConnectionTracer) === null || _d === undefined ? undefined : _d.node();
             if (unfinishedConnectionGhostNode) {
               let margin = 2;
@@ -7180,14 +7564,10 @@ class DiagramCanvas {
       }
       this.secondaryButton = false;
     }));
-    enterSelection.filter('.default').append('circle');
     enterSelection.filter('.image-look').append('image');
-    mergeSelection.attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).attr('opacity', d => d.removed ? 0.5 : 1);
-    mergeSelection.filter('.default').select('circle').attr('cx', 0).attr('cy', 0).attr('r', DIAGRAM_PORT_TYPE_DEFAULTS.width / 2).attr('fill', d => d.selected ? DIAGRAM_PORT_DEFAULTS.selectedColor : DIAGRAM_PORT_DEFAULTS.highlightedColor).attr('opacity', d => d.highlighted || d.selected ? 0.5 : 0);
-    mergeSelection.filter('.image-look').select('image').attr('x', d => -d.type.width / 2).attr('y', d => -d.type.width / 2).attr('width', d => d.type.width).attr('height', d => d.type.width).attr('href', d => {
-      var _a, _b;
-      return d.selected ? ((_a = d.type) === null || _a === undefined ? undefined : _a.look).selectedBackgroundImage : ((_b = d.type) === null || _b === undefined ? undefined : _b.look).backgroundImage;
-    });
+    initializeLook(enterSelection);
+    mergeSelection.attr('transform', d => `translate(${d.coords[0] - d.width / 2},${d.coords[1] - d.width / 2})`).attr('opacity', d => d.removed ? 0.5 : 1);
+    updateLook(mergeSelection);
   }
   updateConnectionsInView(...ids) {
     const connectionList = this.model.connections.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true);
@@ -7260,14 +7640,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.type.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.type.width, (_a = d.startMarkerLook) === null || _a === undefined ? undefined : _a.markerWidth, (_b = d.endMarkerLook) === null || _b === undefined ? undefined : _b.markerWidth);
-    }).attr('marker-start', d => `url(#${d.id}-start-marker)`).attr('marker-end', d => `url(#${d.id}-end-marker)`).attr('stroke', d => d.selected ? d.type.selectedColor : d.type.color).attr('stroke-width', d => `${d.highlighted ? d.type.width + 1 : d.type.width}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.type.style, d.type.width)).attr('fill', 'none');
+      return getConnectionPath(d.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.look.thickness, (_a = d.startMarkerLook) === null || _a === undefined ? undefined : _a.width, (_b = d.endMarkerLook) === null || _b === undefined ? undefined : _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');
     mergeSelection.select('path.diagram-connection-path-box').attr('d', d => {
       var _a, _b;
-      return getConnectionPath(d.type.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.type.width, (_a = d.startMarkerLook) === null || _a === undefined ? undefined : _a.markerWidth, (_b = d.endMarkerLook) === null || _b === undefined ? undefined : _b.markerWidth);
+      return getConnectionPath(d.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.look.thickness, (_a = d.startMarkerLook) === null || _a === undefined ? undefined : _a.width, (_b = d.endMarkerLook) === null || _b === undefined ? undefined : _b.width);
     }).attr('stroke', 'transparent')
     // allow generating pointer events even when it is transparent
-    .attr('pointer-events', 'stroke').attr('stroke-width', d => `${d.type.width + CONNECTION_PATH_BOX_THICKNESS}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.type.style, d.type.width)).attr('fill', 'none');
+    .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');
     mergeSelection.data().forEach(connection => {
       this.updateConnectionLabelsInView(connection);
       this.updateConnectionMarkersInView(connection);
@@ -7476,7 +7856,7 @@ 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.selected ? connection.type.selectedColor : connection.type.color).attr('stroke', 'none');
+        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})`);
       }
       // bind middle labels
@@ -7487,7 +7867,7 @@ 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.selected ? connection.type.selectedColor : connection.type.color).attr('stroke', 'none');
+        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})`);
       }
       // bind end labels
@@ -7498,7 +7878,7 @@ 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.selected ? connection.type.selectedColor : connection.type.color).attr('stroke', 'none');
+        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})`);
       }
     }
@@ -7508,18 +7888,18 @@ class DiagramCanvas {
     const startMarkerSelection = connectionSelection.select('marker.diagram-connection-start-marker');
     const endMarkerSelection = connectionSelection.select('marker.diagram-connection-end-marker');
     if (connection.startMarkerLook !== null) {
-      startMarkerSelection.attr('orient', 'auto-start-reverse').attr('markerWidth', connection.startMarkerLook.markerWidth).attr('markerHeight', connection.startMarkerLook.markerHeight).attr('refX', connection.startMarkerLook.markerRefX).attr('refY', connection.startMarkerLook.markerRefY).select('image').attr('href', connection.selected ? connection.startMarkerLook.selectedImage : connection.startMarkerLook.image).attr('width', connection.startMarkerLook.markerWidth).attr('height', connection.startMarkerLook.markerHeight);
+      startMarkerSelection.attr('orient', 'auto-start-reverse').attr('markerWidth', connection.startMarkerLook.width).attr('markerHeight', connection.startMarkerLook.height).attr('refX', connection.startMarkerLook.refX).attr('refY', connection.startMarkerLook.refY).select('image').attr('href', connection.startMarkerLook.image).attr('width', connection.startMarkerLook.width).attr('height', connection.startMarkerLook.height);
     } else {
       startMarkerSelection.attr('orient', 'auto-start-reverse').attr('markerWidth', 0).attr('markerHeight', 0);
     }
     if (connection.endMarkerLook !== null) {
-      endMarkerSelection.attr('orient', 'auto-start-reverse').attr('markerWidth', connection.endMarkerLook.markerWidth).attr('markerHeight', connection.endMarkerLook.markerHeight).attr('refX', connection.endMarkerLook.markerRefX).attr('refY', connection.endMarkerLook.markerRefY).select('image').attr('href', connection.selected ? connection.endMarkerLook.selectedImage : connection.endMarkerLook.image).attr('width', connection.endMarkerLook.markerWidth).attr('height', connection.endMarkerLook.markerHeight);
+      endMarkerSelection.attr('orient', 'auto-start-reverse').attr('markerWidth', connection.endMarkerLook.width).attr('markerHeight', connection.endMarkerLook.height).attr('refX', connection.endMarkerLook.refX).attr('refY', connection.endMarkerLook.refY).select('image').attr('href', connection.endMarkerLook.image).attr('width', connection.endMarkerLook.width).attr('height', connection.endMarkerLook.height);
     } else {
       endMarkerSelection.attr('orient', 'auto-start-reverse').attr('markerWidth', 0).attr('markerHeight', 0);
     }
   }
   fitFieldRootInView(id) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c;
     const field = this.model.fields.get(id);
     if (!field) {
       return;
@@ -7561,8 +7941,9 @@ class DiagramCanvas {
       if (fieldDimensions[1] < minimumFieldHeight) {
         fieldDimensions[1] = minimumFieldHeight;
       }
-      let stretchX = fieldDimensions[0] + getLeftMargin((_c = (_b = field.rootElement) === null || _b === undefined ? undefined : _b.getConfig()) === null || _c === undefined ? undefined : _c.label) + getRightMargin((_e = (_d = field.rootElement) === null || _d === undefined ? undefined : _d.getConfig()) === null || _e === undefined ? undefined : _e.label) - field.rootElement.width;
-      let stretchY = fieldDimensions[1] + getTopMargin((_g = (_f = field.rootElement) === null || _f === undefined ? undefined : _f.getConfig()) === null || _g === undefined ? undefined : _g.label) + getBottomMargin((_j = (_h = field.rootElement) === null || _h === undefined ? undefined : _h.getConfig()) === null || _j === undefined ? undefined : _j.label) - field.rootElement.height;
+      const type = field.rootElement.type;
+      let stretchX = fieldDimensions[0] + getLeftMargin(type === null || type === undefined ? undefined : type.label) + getRightMargin(type === null || type === undefined ? undefined : type.label) - field.rootElement.width;
+      let stretchY = fieldDimensions[1] + getTopMargin(type === null || type === undefined ? undefined : type.label) + getBottomMargin(type === null || type === undefined ? undefined : type.label) - field.rootElement.height;
       if (this.snapToGrid) {
         stretchX = Math.ceil(stretchX / this.gridSize) * this.gridSize;
         stretchY = Math.ceil(stretchY / this.gridSize) * this.gridSize;
@@ -7574,8 +7955,8 @@ class DiagramCanvas {
       if (field.rootElement.height + stretchY < (field.rootElement.getMinHeight() || 0)) {
         stretchY = (field.rootElement.getMinHeight() || 0) - field.rootElement.height;
       }
-      (_k = field.rootElement.node) === null || _k === undefined ? undefined : _k.stretchSections(Side.Right, stretchX, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
-      (_l = field.rootElement.node) === null || _l === undefined ? undefined : _l.stretchSections(Side.Bottom, stretchY, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
+      (_b = field.rootElement.node) === null || _b === undefined ? undefined : _b.stretchSections(Side.Right, stretchX, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
+      (_c = field.rootElement.node) === null || _c === undefined ? undefined : _c.stretchSections(Side.Bottom, stretchY, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
     }
   }
   fitNodeInView(id) {
@@ -7906,41 +8287,6 @@ class DiagramCanvas {
   }
 }
 DiagramCanvas.canvasCount = 0;
-/**
- * Checks if the given mouse event was produced with a secondary button press.
- * @private
- * @param event A mouse event.
- * @returns `true` if the given mouse event was produced with a secondary button press, `false` otherwise.
- */
-const isSecondaryButton = event => {
-  return !!event.button;
-};
-/**
- * Get the SVG path of a diagram connection.
- * @private
- * @see linePath
- */
-const getConnectionPath = (shape, startCoords, endCoords, startDirection, endDirection, width, startMarkerWidth, endMarkerWidth) => {
-  return linePath(shape, [startCoords, endCoords], startDirection, endDirection, Math.max(
-  // reasonable value for the minimumDistanceBeforeTurn relative to the line width
-  10, startMarkerWidth || 0, endMarkerWidth || 0) * width);
-};
-const setCursorStyle = style => {
-  if (!style) {
-    d3.select('body').style('cursor', CursorStyle.Auto);
-  } else {
-    d3.select('body').style('cursor', style);
-  }
-};
-const getRelatedNodeOrItself = element => {
-  if (element instanceof DiagramNode) {
-    return element;
-  }
-  if (element instanceof DiagramSection) {
-    return element.node || element;
-  }
-  return element.rootElement instanceof DiagramNode || element.rootElement instanceof DiagramSection || element.rootElement instanceof DiagramPort ? getRelatedNodeOrItself(element.rootElement) : element;
-};
 
 const VERSION = '0.0.1';
 /**