@metadev/daga 3.1.4 → 4.0.0

package/index.cjs.js

@@ -828,6 +828,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
@@ -976,6 +1034,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;
   }
@@ -1244,7 +1306,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 = {};
     /**
@@ -1529,7 +1590,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);
@@ -1647,6 +1708,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 === exports.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
@@ -1662,16 +1751,24 @@ const isObject = x => x !== undefined && x !== null && x.constructor === Object;
  */
 const DIAGRAM_CONNECTION_TYPE_DEFAULTS = {
   name: '',
-  width: 1,
-  shape: exports.LineShape.Straight,
-  style: exports.LineStyle.Solid,
   label: null,
-  defaultStartMarkerLook: null,
-  defaultEndMarkerLook: null,
+  look: {
+    lookType: 'connection-look',
+    color: '#000000',
+    thickness: 1,
+    shape: exports.LineShape.Straight,
+    style: exports.LineStyle.Solid,
+    selected: {
+      color: '#AA00AA'
+    },
+    highlighted: {
+      thickness: 2
+    }
+  },
+  startMarkerLook: undefined,
+  endMarkerLook: undefined,
   startTypes: [],
   endTypes: [],
-  color: '#000000',
-  selectedColor: '#000000',
   properties: []
 };
 /**
@@ -1684,16 +1781,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) {
@@ -1709,6 +1828,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
@@ -1719,10 +1859,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.
@@ -1754,11 +2011,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);
   }
@@ -1788,11 +2043,11 @@ class DiagramConnection extends DiagramElement {
       if (start !== undefined) {
         start.outgoingConnections.push(this);
         this.startDirection = start === null || start === undefined ? undefined : start.direction;
-        this.startCoords = (start === null || start === undefined ? undefined : start.coords) || [0, 0];
+        this.startCoords = (start === null || start === undefined ? undefined : start.connectionPoint) || [0, 0];
       }
     } else {
       this.startDirection = start === null || start === undefined ? undefined : start.direction;
-      this.startCoords = (start === null || start === undefined ? undefined : start.coords) || [0, 0];
+      this.startCoords = (start === null || start === undefined ? undefined : start.connectionPoint) || [0, 0];
     }
     this.updateInView();
   }
@@ -1811,11 +2066,11 @@ class DiagramConnection extends DiagramElement {
       if (end !== undefined) {
         end.incomingConnections.push(this);
         this.endDirection = end === null || end === undefined ? undefined : end.direction;
-        this.endCoords = (end === null || end === undefined ? undefined : end.coords) || [0, 0];
+        this.endCoords = (end === null || end === undefined ? undefined : end.connectionPoint) || [0, 0];
       }
     } else {
       this.endDirection = end === null || end === undefined ? undefined : end.direction;
-      this.endCoords = (end === null || end === undefined ? undefined : end.coords) || [0, 0];
+      this.endCoords = (end === null || end === undefined ? undefined : end.connectionPoint) || [0, 0];
     }
     this.updateInView();
   }
@@ -1833,6 +2088,10 @@ class DiagramConnection extends DiagramElement {
           // alternative start port not valid, it is the same as the end port
           continue checkAlternativeStartPorts;
         }
+        if (!alternativeStartPort.allowsOutgoing) {
+          // alternative start port not valid, it doesn't allow outgoing connections
+          continue checkAlternativeStartPorts;
+        }
         {
           for (const connection of alternativeStartPort.outgoingConnections) {
             if (connection !== this && connection.end === this.end) {
@@ -1860,24 +2119,28 @@ class DiagramConnection extends DiagramElement {
       const alternativeEndPortsSortedByDistanceAscending = this.end.rootElement.ports.map(p => [p, p.distanceTo(this.start.coords)]).sort((a, b) => a[1] - b[1]).map(a => a[0]);
       checkAlternativeEndPorts: for (const alternativeEndPort of alternativeEndPortsSortedByDistanceAscending) {
         if (alternativeEndPort === this.start) {
-          // alternative start port not valid, it is the same as the end port
+          // alternative end port not valid, it is the same as the end port
+          continue checkAlternativeEndPorts;
+        }
+        if (!alternativeEndPort.allowsIncoming) {
+          // alternative end port not valid, it doesn't allow incoming connections
           continue checkAlternativeEndPorts;
         }
         {
           for (const connection of alternativeEndPort.incomingConnections) {
             if (connection !== this && connection.start === this.start) {
-              // alternative start port not valid, there is a connection whose start and end matches the alternative end port and this connection's start
+              // alternative end port not valid, there is a connection whose start and end matches the alternative end port and this connection's start
               continue checkAlternativeEndPorts;
             }
           }
           for (const connection of alternativeEndPort.outgoingConnections) {
             if (connection !== this && connection.end === this.start) {
-              // alternative start port not valid, there is a connection whose start and end matches the alternative end port and this connection's start
+              // alternative end port not valid, there is a connection whose start and end matches the alternative end port and this connection's start
               continue checkAlternativeEndPorts;
             }
           }
         }
-        // found a valid start port
+        // found a valid end port
         if (alternativeEndPort === this.end) {
           break checkAlternativeEndPorts;
         } else {
@@ -1923,7 +2186,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) {
@@ -2249,30 +2512,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: exports.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
@@ -2297,6 +2536,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
@@ -2318,10 +2592,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.
@@ -2360,7 +2676,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];
   }
@@ -2374,7 +2690,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.
@@ -2525,7 +2841,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];
@@ -2538,10 +2853,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.
@@ -2579,25 +2895,25 @@ class DiagramSectionSet extends DiagramElementSet {
     if (sectionPorts && sectionPorts.length > 0) {
       for (let i = 0; i < sectionPorts.length; ++i) {
         const portConfig = sectionPorts[i];
-        const port = this.model.ports.new(section, [section.coords[0] + (((_e = portConfig === null || portConfig === undefined ? undefined : portConfig.coords) === null || _e === undefined ? undefined : _e[0]) || 0), section.coords[1] + (((_f = portConfig === null || portConfig === undefined ? undefined : portConfig.coords) === null || _f === undefined ? undefined : _f[1]) || 0)], portConfig === null || portConfig === undefined ? undefined : portConfig.direction, `${section.id}_${i}`);
-        if (portConfig.label) {
-          const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), portConfig.label);
+        const port = this.model.ports.new(portConfig.type !== undefined ? this.model.ports.types.get(portConfig.type) : undefined, section, [section.coords[0] + (portConfig.coords[0] || 0), section.coords[1] + (portConfig.coords[1] || 0)], portConfig.connectionPoint !== undefined ? [section.coords[0] + (portConfig.connectionPoint[0] || 0), section.coords[1] + (portConfig.connectionPoint[1] || 0)] : undefined, portConfig === null || portConfig === undefined ? undefined : portConfig.direction, `${section.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);
+          const labelHeight = labelConfiguration.fontSize + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
           let labelCoords;
           switch (port.direction) {
-            case exports.Side.Top:
-            case exports.Side.Left:
-              labelCoords = [port.coords[0] - labelConfiguration.fontSize, port.coords[1] - labelConfiguration.fontSize];
-              break;
             case exports.Side.Bottom:
-              labelCoords = [port.coords[0] - labelConfiguration.fontSize, port.coords[1] + labelConfiguration.fontSize];
-              break;
+            case exports.Side.Left:
             case exports.Side.Right:
-              labelCoords = [port.coords[0] + labelConfiguration.fontSize, port.coords[1] - labelConfiguration.fontSize];
+              labelCoords = [port.coords[0] - labelWidth / 2, port.coords[1] - labelHeight - getBottomMargin(labelConfiguration)];
+              break;
+            case exports.Side.Top:
+              labelCoords = [port.coords[0] - labelWidth / 2, port.coords[1] + getTopMargin(labelConfiguration)];
               break;
             default:
               labelCoords = port.coords;
           }
-          this.model.fields.new(port, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
+          this.model.fields.new(port, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelWidth, labelHeight, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
         }
       }
     }
@@ -2642,8 +2958,14 @@ const DIAGRAM_NODE_LOOK_DEFAULTS = {
   shape: exports.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.
@@ -2691,8 +3013,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;
@@ -2708,6 +3034,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
@@ -2721,10 +3068,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.
@@ -2751,7 +3139,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;
@@ -3230,11 +3618,11 @@ 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) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     let nodeType;
     if (type instanceof DiagramNodeType) {
       nodeType = type;
@@ -3265,25 +3653,26 @@ 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(node, [node.coords[0] + portConfig.coords[0], node.coords[1] + portConfig.coords[1]], portConfig.direction, `${node.id}_${i}`);
-        if (portConfig.label) {
-          const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), portConfig.label);
+        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);
+          const labelHeight = labelConfiguration.fontSize + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
           let labelCoords;
           switch (port.direction) {
-            case exports.Side.Top:
-            case exports.Side.Left:
-              labelCoords = [port.coords[0] - labelConfiguration.fontSize, port.coords[1] - labelConfiguration.fontSize];
-              break;
             case exports.Side.Bottom:
-              labelCoords = [port.coords[0] - labelConfiguration.fontSize, port.coords[1] + labelConfiguration.fontSize];
-              break;
+            case exports.Side.Left:
             case exports.Side.Right:
-              labelCoords = [port.coords[0] + labelConfiguration.fontSize, port.coords[1] - labelConfiguration.fontSize];
+              labelCoords = [port.coords[0] - labelWidth / 2, port.coords[1] - labelHeight - getBottomMargin(labelConfiguration)];
+              break;
+            case exports.Side.Top:
+              labelCoords = [port.coords[0] - labelWidth / 2, port.coords[1] + getTopMargin(labelConfiguration)];
               break;
             default:
               labelCoords = port.coords;
           }
-          this.model.fields.new(port, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
+          this.model.fields.new(port, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelWidth, labelHeight, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
         }
       }
     }
@@ -3293,7 +3682,7 @@ class DiagramNodeSet extends DiagramElementSet {
       this.model.fields.new(node, [node.coords[0] + getLeftMargin(labelConfiguration), node.coords[1] + getTopMargin(labelConfiguration)], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, node.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), node.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
     }
     node.valueSet.resetValues();
-    (_e = node.model.canvas) === null || _e === undefined ? undefined : _e.fitNodeInView(node.id);
+    (_g = node.model.canvas) === null || _g === undefined ? undefined : _g.fitNodeInView(node.id);
     return node;
   }
   remove(id) {
@@ -3461,16 +3850,59 @@ const getTopPadding = config => {
   }
 };
 
+/**
+ * Default values of the look of a diagram port.
+ * @private
+ * @see DIAGRAM_NODE_TYPE_DEFAULTS
+ */
+const DIAGRAM_PORT_LOOK_DEFAULTS = {
+  lookType: 'shaped-look',
+  shape: exports.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
  * @see DiagramPort
  */
-const DIAGRAM_PORT_DEFAULTS = {
-  radius: 12,
-  highlightedColor: 'cyan',
-  selectedColor: 'violet'
+const DIAGRAM_PORT_TYPE_DEFAULTS = {
+  name: '',
+  label: null,
+  allowsOutgoing: true,
+  allowsIncoming: true,
+  width: 24,
+  look: DIAGRAM_PORT_LOOK_DEFAULTS
 };
+/**
+ * A port type, which holds properties that ports of this type share in common.
+ * @public
+ * @see PortTypeConfig
+ */
+class DiagramPortType {
+  constructor(options) {
+    const values = Object.assign(Object.assign({}, DIAGRAM_PORT_TYPE_DEFAULTS), options);
+    this.id = values.id;
+    this.name = values.name;
+    this.label = values.label;
+    this.allowsOutgoing = values.allowsOutgoing;
+    this.allowsIncoming = values.allowsIncoming;
+    this.width = values.width;
+    const looks = extractLooksFromConfig(values.look);
+    this.defaultLook = looks.defaultLook;
+    this.selectedLook = looks.selectedLook;
+    this.highlightedLook = looks.highlightedLook;
+    this.selectedAndHighlightedLook = looks.selectedAndHighlightedLook;
+  }
+}
 /**
  * A port which is part of a node or section and at which connections can start or end.
  * @public
@@ -3479,10 +3911,115 @@ const DIAGRAM_PORT_DEFAULTS = {
  * @see DiagramSection
  */
 class DiagramPort extends DiagramElement {
-  constructor(model, rootElement, coords, direction, id) {
+  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.
+   */
+  get allowsOutgoing() {
+    var _a, _b;
+    return ((_a = this.type) === null || _a === undefined ? undefined : _a.allowsOutgoing) !== undefined ? (_b = this.type) === null || _b === undefined ? undefined : _b.allowsOutgoing : true;
+  }
+  /**
+   * Whether this port can be used as a connection end point.
+   */
+  get allowsIncoming() {
+    var _a, _b;
+    return ((_a = this.type) === null || _a === undefined ? undefined : _a.allowsIncoming) !== undefined ? (_b = this.type) === null || _b === undefined ? undefined : _b.allowsIncoming : true;
+  }
+  /**
+   * Name of this port. Alias for this port's label's text.
+   * @public
+   */
+  get name() {
+    var _a;
+    return ((_a = this.label) === null || _a === undefined ? undefined : _a.text) || '';
+  }
+  set name(name) {
+    if (this.label) {
+      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.
@@ -3494,8 +4031,10 @@ class DiagramPort extends DiagramElement {
      * @public
      */
     this.incomingConnections = [];
+    this._type = type;
     this.rootElement = rootElement;
     this.coords = coords;
+    this.connectionPoint = connectionPoint || coords;
     this.direction = direction;
   }
   get removed() {
@@ -3508,6 +4047,9 @@ class DiagramPort extends DiagramElement {
   raise() {
     var _a;
     (_a = this.select()) === null || _a === undefined ? undefined : _a.raise();
+    if (this.label) {
+      this.label.raise();
+    }
     for (const connection of this.incomingConnections) {
       connection.raise();
     }
@@ -3556,6 +4098,8 @@ class DiagramPort extends DiagramElement {
   move(coords) {
     const coordDifferences = [coords[0] - this.coords[0], coords[1] - this.coords[1]];
     this.coords = coords;
+    this.connectionPoint[0] = this.connectionPoint[0] + coordDifferences[0];
+    this.connectionPoint[1] = this.connectionPoint[1] + coordDifferences[1];
     for (const connection of this.outgoingConnections) {
       connection.setStart(this);
     }
@@ -3578,14 +4122,19 @@ class DiagramPortSet extends DiagramElementSet {
    */
   constructor(model) {
     super();
+    /**
+     * Set of the possible types of port that the ports of this set can have.
+     * @public
+     */
+    this.types = new DiagramEntitySet();
     this.model = model;
   }
   /**
    * Instance a new port and add it to this set. This method is normally called when instancing an element with a port and it is rarely called by itself.
    * @private
    */
-  new(rootElement, coords, direction, id) {
-    const port = new DiagramPort(this.model, rootElement, coords, direction, id);
+  new(type, rootElement, coords, connectionPoint, direction, id) {
+    const port = new DiagramPort(this.model, type, rootElement, coords, connectionPoint, direction, id);
     super.add(port);
     port.updateInView();
     // add this port to its root element
@@ -3694,13 +4243,14 @@ class DagaImporter {
         }
         let portCounter = 0;
         for (const port of section.ports || []) {
-          const newPort = new DiagramPort(model, newSection, port.coords, port.direction, port.id);
+          const newPortType = port.type !== undefined ? model.ports.types.get(port.type) : undefined;
+          const newPort = new DiagramPort(model, newPortType, newSection, port.coords, port.connectionPoint, port.direction, port.id);
           newSection.ports.push(newPort);
           model.ports.add(newPort);
           if (port.label) {
             // add port label
-            if (newNodeType.ports.length > portCounter && newNodeType.ports[portCounter].label) {
-              const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), newNodeType.ports[portCounter].label);
+            if (newNodeType.ports.length > portCounter && (newPortType === null || newPortType === undefined ? undefined : newPortType.label)) {
+              const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), newPortType === null || newPortType === undefined ? undefined : newPortType.label);
               let labelCoords;
               switch (newPort.direction) {
                 case exports.Side.Top:
@@ -3740,13 +4290,14 @@ class DagaImporter {
       }
       let portCounter = 0;
       for (const port of node.ports || []) {
-        const newPort = new DiagramPort(model, newNode, port.coords, port.direction, port.id);
+        const newPortType = port.type !== undefined ? model.ports.types.get(port.type) : undefined;
+        const newPort = new DiagramPort(model, newPortType, newNode, port.coords, port.connectionPoint, port.direction, port.id);
         newNode.ports.push(newPort);
         model.ports.add(newPort);
         if (port.label) {
           // add port label
-          if (newNodeType.ports.length > portCounter && newNodeType.ports[portCounter].label) {
-            const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), newNodeType.ports[portCounter].label);
+          if (newNodeType.ports.length > portCounter && (newPortType === null || newPortType === undefined ? undefined : newPortType.label)) {
+            const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), newPortType === null || newPortType === undefined ? undefined : newPortType.label);
             let labelCoords;
             switch (newPort.direction) {
               case exports.Side.Top:
@@ -3788,6 +4339,8 @@ class DagaImporter {
         newNode.valueSet.setTimestamps(node.collabMeta.dataTimestamps);
       }
       newNode.updateInView();
+      // raise node to sort the render order of the node and its components
+      newNode.raise();
       return newNode;
     }
     return undefined;
@@ -3810,6 +4363,8 @@ class DagaImporter {
         newConnection.valueSet.setTimestamps(connection.collabMeta.dataTimestamps);
       }
       newConnection.updateInView();
+      // raise connection just in case it is necessary to sort the render order
+      newConnection.raise();
       return newConnection;
     }
     return undefined;
@@ -5067,7 +5622,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;
@@ -5116,7 +5674,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);
@@ -5153,6 +5718,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;
@@ -5199,7 +5767,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);
@@ -5302,6 +5877,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__namespace.select('body').style('cursor', exports.CursorStyle.Auto);
+  } else {
+    d3__namespace.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;
@@ -5552,7 +6189,7 @@ class DagaExporter {
     return result;
   }
   exportNode(node, includeCollabMeta = false) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     const children = [];
     for (const child of node.children) {
       children.push(this.exportNode(child, includeCollabMeta));
@@ -5563,9 +6200,11 @@ class DagaExporter {
       for (const port of section.ports) {
         ports.push(Object.assign({
           id: port.id,
+          type: (_a = port.type) === null || _a === undefined ? undefined : _a.id,
           coords: roundPoint(port.coords),
+          connectionPoint: roundPoint(port.connectionPoint),
           direction: port.direction,
-          label: ((_a = port.label) === null || _a === undefined ? undefined : _a.text) || ''
+          label: ((_b = port.label) === null || _b === undefined ? undefined : _b.text) || ''
         }, includeCollabMeta ? {
           collabMeta: Object.assign({
             removed: port.removed,
@@ -5577,7 +6216,7 @@ class DagaExporter {
       sections.push(Object.assign({
         id: section.id,
         ports,
-        label: ((_b = section.label) === null || _b === undefined ? undefined : _b.text) || '',
+        label: ((_c = section.label) === null || _c === undefined ? undefined : _c.text) || '',
         indexXInNode: section.indexXInNode,
         indexYInNode: section.indexYInNode,
         coords: roundPoint(section.coords),
@@ -5595,9 +6234,11 @@ class DagaExporter {
     for (const port of node.ports) {
       ports.push(Object.assign({
         id: port.id,
+        type: (_d = port.type) === null || _d === undefined ? undefined : _d.id,
         coords: roundPoint(port.coords),
+        connectionPoint: roundPoint(port.connectionPoint),
         direction: port.direction,
-        label: ((_c = port.label) === null || _c === undefined ? undefined : _c.text) || ''
+        label: ((_e = port.label) === null || _e === undefined ? undefined : _e.text) || ''
       }, includeCollabMeta ? {
         collabMeta: Object.assign({
           removed: port.removed,
@@ -5612,7 +6253,7 @@ class DagaExporter {
       children,
       sections,
       ports,
-      label: ((_d = node.label) === null || _d === undefined ? undefined : _d.text) || '',
+      label: ((_f = node.label) === null || _f === undefined ? undefined : _f.text) || '',
       coords: roundPoint(node.coords),
       width: node.width,
       height: node.height,
@@ -5892,7 +6533,7 @@ class DiagramUserSelection extends DiagramElementSet {
     }
   }
   makeUpdateValuesAction() {
-    var _a, _b;
+    var _a, _b, _c;
     if (this.propertyEditorSelection === undefined || this.propertyEditorValues === undefined) {
       return;
     }
@@ -5904,7 +6545,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);
@@ -5988,6 +6629,13 @@ class DiagramCanvas {
         this.model.nodes.types.add(nodeType);
       }
     }
+    // load port types
+    if (config.portTypes) {
+      for (const portTypeConfig of config.portTypes) {
+        const portType = new DiagramPortType(Object.assign(Object.assign({}, config.portTypeDefaults), portTypeConfig));
+        this.model.ports.types.add(portType);
+      }
+    }
     // load connection types
     if (config.connectionTypes) {
       for (const connectionTypeConfig of config.connectionTypes) {
@@ -6240,9 +6888,10 @@ class DiagramCanvas {
     }
   }
   center() {
+    var _a;
     // if there are no nodes, we have nothing to do here
     if (this.model.nodes.length > 0) {
-      const canvasViewBoundingBox = this.selectCanvasView().select('rect').node().getBBox();
+      const canvasViewBoundingBox = (_a = this.selectCanvasView().select('rect').node()) === null || _a === undefined ? undefined : _a.getBBox();
       const nonRemovedNodes = this.model.nodes.all();
       const minimumX = Math.min(...nonRemovedNodes.map(n => n.coords[0]));
       const maximumX = Math.max(...nonRemovedNodes.map(n => n.coords[0] + n.width));
@@ -6319,7 +6968,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));
     }
@@ -6381,17 +7030,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(exports.Events.MouseOver, (_event, d) => {
       if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.type.resizableX && !d.removed) {
         setCursorStyle(exports.CursorStyle.EWResize);
@@ -6529,17 +7168,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);
@@ -6549,8 +7178,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));
@@ -6630,17 +7259,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(exports.Events.MouseOver, (_event, d) => {
       var _a, _b;
       if (this.canUserPerformAction(exports.DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
@@ -6798,146 +7417,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);
@@ -6946,21 +7426,29 @@ 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', 'diagram-port');
+    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));
     }
     const mergeSelection = enterSelection.merge(updateSelection);
     exitSelection.remove();
     enterSelection.on(exports.Events.MouseOver, (_event, d) => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
       if (!this.unfinishedConnection && !this.dragging) {
         // if there is an unfinished connection, the port will be highlighted automatically if the pointer is close
         this.userHighlight.focusOn(d);
         this.diagramEvent$.next(new DiagramHighlightedEvent(d));
       }
       if (this.unfinishedConnection) {
-        const canConnectionFinishAtThisPort = this.unfinishedConnection.type.canStartFromType(((_c = (_b = (_a = this.unfinishedConnection.start) === null || _a === undefined ? undefined : _a.getNode()) === null || _b === undefined ? undefined : _b.type) === null || _c === undefined ? undefined : _c.id) || '') && this.unfinishedConnection.type.canFinishOnType(((_e = (_d = d.getNode()) === null || _d === undefined ? undefined : _d.type) === null || _e === undefined ? undefined : _e.id) || '') || this.unfinishedConnection.type.canStartFromType(((_g = (_f = d.getNode()) === null || _f === undefined ? undefined : _f.type) === null || _g === undefined ? undefined : _g.id) || '') && this.unfinishedConnection.type.canFinishOnType(((_k = (_j = (_h = this.unfinishedConnection.start) === null || _h === undefined ? undefined : _h.getNode()) === null || _j === undefined ? undefined : _j.type) === null || _k === undefined ? undefined : _k.id) || '');
+        const canConnectionFinishAtThisPort =
+        // can start at the starting port
+        this.unfinishedConnection.type.canStartFromType(((_c = (_b = (_a = this.unfinishedConnection.start) === null || _a === undefined ? undefined : _a.getNode()) === null || _b === undefined ? undefined : _b.type) === null || _c === undefined ? undefined : _c.id) || '') && ((_d = this.unfinishedConnection.start) === null || _d === undefined ? undefined : _d.allowsOutgoing) &&
+        // can end at the ending port
+        this.unfinishedConnection.type.canFinishOnType(((_f = (_e = d.getNode()) === null || _e === undefined ? undefined : _e.type) === null || _f === undefined ? undefined : _f.id) || '') && d.allowsIncoming ||
+        // can start at the ending port
+        this.unfinishedConnection.type.canStartFromType(((_h = (_g = d.getNode()) === null || _g === undefined ? undefined : _g.type) === null || _h === undefined ? undefined : _h.id) || '') && d.allowsOutgoing &&
+        // can end at the starting port
+        this.unfinishedConnection.type.canFinishOnType(((_l = (_k = (_j = this.unfinishedConnection.start) === null || _j === undefined ? undefined : _j.getNode()) === null || _k === undefined ? undefined : _k.type) === null || _l === undefined ? undefined : _l.id) || '') && ((_m = this.unfinishedConnection.start) === null || _m === undefined ? undefined : _m.allowsIncoming);
         if (!canConnectionFinishAtThisPort) {
           setCursorStyle(exports.CursorStyle.NoDrop);
         }
@@ -7025,7 +7513,7 @@ class DiagramCanvas {
         if (this.canUserPerformAction(exports.DiagramActions.AddConnection) && !d.removed) {
           if (this.unfinishedConnection !== undefined) {
             const endCoords = [event.x, event.y];
-            (_a = this.unfinishedConnectionTracer) === null || _a === 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;
@@ -7097,8 +7585,10 @@ class DiagramCanvas {
       }
       this.secondaryButton = false;
     }));
-    enterSelection.append('circle');
-    mergeSelection.attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).attr('opacity', d => d.removed ? 0.5 : 1).select('circle').attr('cx', 0).attr('cy', 0).attr('r', DIAGRAM_PORT_DEFAULTS.radius).attr('fill', d => d.selected ? DIAGRAM_PORT_DEFAULTS.selectedColor : DIAGRAM_PORT_DEFAULTS.highlightedColor).attr('opacity', d => d.highlighted || d.selected ? 0.5 : 0);
+    enterSelection.filter('.image-look').append('image');
+    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);
@@ -7171,14 +7661,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);
@@ -7387,7 +7877,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
@@ -7398,7 +7888,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
@@ -7409,7 +7899,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})`);
       }
     }
@@ -7419,18 +7909,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;
@@ -7472,8 +7962,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;
@@ -7485,8 +7976,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(exports.Side.Right, stretchX, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
-      (_l = field.rootElement.node) === null || _l === undefined ? undefined : _l.stretchSections(exports.Side.Bottom, stretchY, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
+      (_b = field.rootElement.node) === null || _b === undefined ? undefined : _b.stretchSections(exports.Side.Right, stretchX, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
+      (_c = field.rootElement.node) === null || _c === undefined ? undefined : _c.stretchSections(exports.Side.Bottom, stretchY, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
     }
   }
   fitNodeInView(id) {
@@ -7529,39 +8020,41 @@ class DiagramCanvas {
   // User actions
   startConnection(port) {
     var _a, _b, _c, _d;
-    if (this.connectionType && (this.connectionType.canStartFromType(((_b = (_a = port.getNode()) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.id) || '') || this.connectionType.canFinishOnType(((_d = (_c = port.getNode()) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.id) || ''))) {
-      this.unfinishedConnection = new DiagramConnection(this.model, this.connectionType, port, undefined, UNFINISHED_CONNECTION_ID);
-    } else {
-      if (this.inferConnectionType) {
-        let differentConnectionType = this.model.connections.types.all().find(t => {
-          var _a, _b;
-          return t.canStartFromType(((_b = (_a = port.getNode()) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.id) || '');
-        });
-        if (differentConnectionType === undefined) {
-          differentConnectionType = this.model.connections.types.all().find(t => {
+    if (port.allowsOutgoing || port.allowsIncoming) {
+      if (this.connectionType && (this.connectionType.canStartFromType(((_b = (_a = port.getNode()) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.id) || '') && port.allowsOutgoing || this.connectionType.canFinishOnType(((_d = (_c = port.getNode()) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.id) || '') && port.allowsIncoming)) {
+        this.unfinishedConnection = new DiagramConnection(this.model, this.connectionType, port, undefined, UNFINISHED_CONNECTION_ID);
+      } else {
+        if (this.inferConnectionType) {
+          let differentConnectionType = this.model.connections.types.all().find(t => {
             var _a, _b;
-            return t.canFinishOnType(((_b = (_a = port.getNode()) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.id) || '');
+            return port.allowsOutgoing && t.canStartFromType(((_b = (_a = port.getNode()) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.id) || '');
           });
-        }
-        if (differentConnectionType !== undefined) {
-          this.unfinishedConnection = new DiagramConnection(this.model, differentConnectionType, port, undefined, UNFINISHED_CONNECTION_ID);
+          if (differentConnectionType === undefined) {
+            differentConnectionType = this.model.connections.types.all().find(t => {
+              var _a, _b;
+              return port.allowsIncoming && t.canFinishOnType(((_b = (_a = port.getNode()) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.id) || '');
+            });
+          }
+          if (differentConnectionType !== undefined) {
+            this.unfinishedConnection = new DiagramConnection(this.model, differentConnectionType, port, undefined, UNFINISHED_CONNECTION_ID);
+          }
         }
       }
     }
   }
   finishConnection(port) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     this.userHighlight.clear();
     if (this.unfinishedConnection !== undefined) {
       if (this.unfinishedConnection.start !== port) {
-        if (this.unfinishedConnection.type.canStartFromType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === undefined ? undefined : _a.start) === null || _b === undefined ? undefined : _b.getNode()) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.id) || '') && this.unfinishedConnection.type.canFinishOnType(((_f = (_e = port.getNode()) === null || _e === undefined ? undefined : _e.type) === null || _f === undefined ? undefined : _f.id) || '')) {
-          const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, (_g = this.unfinishedConnection.start) === null || _g === undefined ? undefined : _g.id, port.id);
+        if (this.unfinishedConnection.type.canStartFromType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === undefined ? undefined : _a.start) === null || _b === undefined ? undefined : _b.getNode()) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === undefined ? undefined : _e.start) === null || _f === undefined ? undefined : _f.allowsOutgoing) && this.unfinishedConnection.type.canFinishOnType(((_h = (_g = port.getNode()) === null || _g === undefined ? undefined : _g.type) === null || _h === undefined ? undefined : _h.id) || '') && port.allowsIncoming) {
+          const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, (_j = this.unfinishedConnection.start) === null || _j === undefined ? undefined : _j.id, port.id);
           // clean up the previous unfinished connection
           this.dropConnection();
           addConnectionAction.do();
           this.actionStack.add(addConnectionAction);
-        } else if (this.unfinishedConnection.type.canFinishOnType(((_l = (_k = (_j = (_h = this.unfinishedConnection) === null || _h === undefined ? undefined : _h.start) === null || _j === undefined ? undefined : _j.getNode()) === null || _k === undefined ? undefined : _k.type) === null || _l === undefined ? undefined : _l.id) || '') && this.unfinishedConnection.type.canStartFromType(((_o = (_m = port.getNode()) === null || _m === undefined ? undefined : _m.type) === null || _o === undefined ? undefined : _o.id) || '')) {
-          const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, port.id, (_p = this.unfinishedConnection.start) === null || _p === undefined ? undefined : _p.id);
+        } else if (this.unfinishedConnection.type.canFinishOnType(((_o = (_m = (_l = (_k = this.unfinishedConnection) === null || _k === undefined ? undefined : _k.start) === null || _l === undefined ? undefined : _l.getNode()) === null || _m === undefined ? undefined : _m.type) === null || _o === undefined ? undefined : _o.id) || '') && ((_q = (_p = this.unfinishedConnection) === null || _p === undefined ? undefined : _p.start) === null || _q === undefined ? undefined : _q.allowsIncoming) && this.unfinishedConnection.type.canStartFromType(((_s = (_r = port.getNode()) === null || _r === undefined ? undefined : _r.type) === null || _s === undefined ? undefined : _s.id) || '') && port.allowsOutgoing) {
+          const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, port.id, (_t = this.unfinishedConnection.start) === null || _t === undefined ? undefined : _t.id);
           // clean up the previous unfinished connection
           this.dropConnection();
           addConnectionAction.do();
@@ -7569,19 +8062,19 @@ class DiagramCanvas {
         } else {
           if (this.inferConnectionType) {
             let differentConnectionType = this.model.connections.types.all().find(t => {
-              var _a, _b, _c, _d, _e, _f;
-              return t.canStartFromType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === undefined ? undefined : _a.start) === null || _b === undefined ? undefined : _b.getNode()) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.id) || '') && t.canFinishOnType(((_f = (_e = port.getNode()) === null || _e === undefined ? undefined : _e.type) === null || _f === undefined ? undefined : _f.id) || '');
+              var _a, _b, _c, _d, _e, _f, _g, _h;
+              return t.canStartFromType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === undefined ? undefined : _a.start) === null || _b === undefined ? undefined : _b.getNode()) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === undefined ? undefined : _e.start) === null || _f === undefined ? undefined : _f.allowsOutgoing) && t.canFinishOnType(((_h = (_g = port.getNode()) === null || _g === undefined ? undefined : _g.type) === null || _h === undefined ? undefined : _h.id) || '') && port.allowsIncoming;
             });
             let invertConnection = false;
             if (differentConnectionType === undefined) {
               differentConnectionType = this.model.connections.types.all().find(t => {
-                var _a, _b, _c, _d, _e, _f;
-                return t.canFinishOnType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === undefined ? undefined : _a.start) === null || _b === undefined ? undefined : _b.getNode()) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.id) || '') && t.canStartFromType(((_f = (_e = port.getNode()) === null || _e === undefined ? undefined : _e.type) === null || _f === undefined ? undefined : _f.id) || '');
+                var _a, _b, _c, _d, _e, _f, _g, _h;
+                return t.canFinishOnType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === undefined ? undefined : _a.start) === null || _b === undefined ? undefined : _b.getNode()) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === undefined ? undefined : _e.start) === null || _f === undefined ? undefined : _f.allowsIncoming) && t.canStartFromType(((_h = (_g = port.getNode()) === null || _g === undefined ? undefined : _g.type) === null || _h === undefined ? undefined : _h.id) || '') && port.allowsOutgoing;
               });
               invertConnection = true;
             }
             if (differentConnectionType !== undefined) {
-              const addConnectionAction = new AddConnectionAction(this, differentConnectionType, invertConnection ? port.id : (_q = this.unfinishedConnection.start) === null || _q === undefined ? undefined : _q.id, invertConnection ? (_r = this.unfinishedConnection.start) === null || _r === undefined ? undefined : _r.id : port.id);
+              const addConnectionAction = new AddConnectionAction(this, differentConnectionType, invertConnection ? port.id : (_u = this.unfinishedConnection.start) === null || _u === undefined ? undefined : _u.id, invertConnection ? (_v = this.unfinishedConnection.start) === null || _v === undefined ? undefined : _v.id : port.id);
               // clean up the previous unfinished connection
               this.dropConnection();
               addConnectionAction.do();
@@ -7815,41 +8308,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__namespace.select('body').style('cursor', exports.CursorStyle.Auto);
-  } else {
-    d3__namespace.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';
 /**
@@ -8765,6 +9223,7 @@ exports.DiagramObject = DiagramObject;
 exports.DiagramObjectSet = DiagramObjectSet;
 exports.DiagramPort = DiagramPort;
 exports.DiagramPortSet = DiagramPortSet;
+exports.DiagramPortType = DiagramPortType;
 exports.DiagramSecondaryClickEvent = DiagramSecondaryClickEvent;
 exports.DiagramSection = DiagramSection;
 exports.DiagramSectionSet = DiagramSectionSet;