@metadev/daga 3.1.4 → 3.1.5

package/Changelog.md

@@ -6,8 +6,22 @@ List of releases and changes.
 
 ## Next release Joyeuse
 
+## v. 3.1.5
+
+Date: _2025-02-07_
+
+- Fix bug with the initial loading of a diagram not working [#226](https://github.com/metadevpro/daga/pull/226)
+- Ensure that the parent element of a diagram has fully loaded before initializing the view [#226](https://github.com/metadevpro/daga/pull/226)
+- Ensure that the elements of a diagram are rendered in the correct order after importing a diagram [#228](https://github.com/metadevpro/daga/pull/228)
+- Add port directionality such that ports can be configured as only allowing incoming connections or only allowing outgoing connections [#229](https://github.com/metadevpro/daga/pull/229)
+- Add port types and enable configuring the look of ports and the start/end point of connections within the port [#230](https://github.com/metadevpro/daga/pull/230)
+- Fix bug where the close icons for some property editor inputs wasn't showing [#231](https://github.com/metadevpro/daga/pull/231)
+- Enable configuring the labels of ports [#233](https://github.com/metadevpro/daga/pull/233)
+
 ## v. 3.1.4
 
+Date: _2025-01-30_
+
 - Make dragging the palette node templates create a clone of the node appended to the diagram root instead of a child of the palette to prevent the palette from being affected by CSS transforms on the diagram [#224](https://github.com/metadevpro/daga/pull/224)
 
 ## v. 3.1.3

package/index.cjs.js

@@ -1788,11 +1788,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 +1811,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 +1833,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 +1864,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 {
@@ -2579,25 +2587,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);
         }
       }
     }
@@ -3234,7 +3242,7 @@ class DiagramNodeSet extends DiagramElementSet {
    * @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 +3273,25 @@ 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 port = this.model.ports.new(portConfig.type !== undefined ? this.model.ports.types.get(portConfig.type) : undefined, node, [node.coords[0] + portConfig.coords[0], node.coords[1] + portConfig.coords[1]], portConfig.connectionPoint !== undefined ? [node.coords[0] + (portConfig.connectionPoint[0] || 0), node.coords[1] + (portConfig.connectionPoint[1] || 0)] : undefined, portConfig.direction, `${node.id}_${i}`);
+        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 +3301,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) {
@@ -3467,10 +3475,38 @@ const getTopPadding = config => {
  * @see DiagramPort
  */
 const DIAGRAM_PORT_DEFAULTS = {
-  radius: 12,
   highlightedColor: 'cyan',
   selectedColor: 'violet'
 };
+/**
+ * Default values of the parameters of a diagram port.
+ * @private
+ * @see DiagramPort
+ */
+const DIAGRAM_PORT_TYPE_DEFAULTS = {
+  name: '',
+  label: null,
+  allowsOutgoing: true,
+  allowsIncoming: true,
+  width: 24
+};
+/**
+ * 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;
+    this.look = values.look;
+  }
+}
 /**
  * A port which is part of a node or section and at which connections can start or end.
  * @public
@@ -3479,7 +3515,34 @@ const DIAGRAM_PORT_DEFAULTS = {
  * @see DiagramSection
  */
 class DiagramPort extends DiagramElement {
-  constructor(model, rootElement, coords, direction, id) {
+  /**
+   * 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;
+    }
+  }
+  constructor(model, type, rootElement, coords, connectionPoint, direction, id) {
     if (model.ports.get(id) !== undefined) {
       throw new Error(`DiagramPort with id "${id}" already exists`);
     }
@@ -3494,8 +3557,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 +3573,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 +3624,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 +3648,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 +3769,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 +3816,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 +3865,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 +3889,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;
@@ -5552,7 +5633,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 +5644,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 +5660,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 +5678,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 +5697,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,
@@ -5988,6 +6073,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 +6332,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));
@@ -6946,21 +7039,32 @@ 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 => {
+      var _a, _b;
+      return `diagram-port ${((_b = (_a = d.type) === null || _a === undefined ? undefined : _a.look) === null || _b === undefined ? undefined : _b.lookType) || 'default'}`;
+    });
     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);
         }
@@ -7097,8 +7201,14 @@ 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('.default').append('circle');
+    enterSelection.filter('.image-look').append('image');
+    mergeSelection.attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).attr('opacity', d => d.removed ? 0.5 : 1);
+    mergeSelection.filter('.default').select('circle').attr('cx', 0).attr('cy', 0).attr('r', DIAGRAM_PORT_TYPE_DEFAULTS.width / 2).attr('fill', d => d.selected ? DIAGRAM_PORT_DEFAULTS.selectedColor : DIAGRAM_PORT_DEFAULTS.highlightedColor).attr('opacity', d => d.highlighted || d.selected ? 0.5 : 0);
+    mergeSelection.filter('.image-look').select('image').attr('x', d => -d.type.width / 2).attr('y', d => -d.type.width / 2).attr('width', d => d.type.width).attr('height', d => d.type.width).attr('href', d => {
+      var _a, _b;
+      return d.selected ? ((_a = d.type) === null || _a === undefined ? undefined : _a.look).selectedBackgroundImage : ((_b = d.type) === null || _b === undefined ? undefined : _b.look).backgroundImage;
+    });
   }
   updateConnectionsInView(...ids) {
     const connectionList = this.model.connections.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true);
@@ -7529,39 +7639,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 +7681,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();
@@ -8765,6 +8877,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;