@metadev/daga 2.0.2 → 3.0.0

package/index.cjs.js

@@ -209,6 +209,8 @@ exports.Events = void 0;
   Events["KeyDown"] = "keydown";
   Events["KeyUp"] = "keyup";
   Events["MouseDown"] = "mousedown";
+  Events["MouseEnter"] = "mouseenter";
+  Events["MouseLeave"] = "mouseleave";
   Events["MouseMove"] = "mousemove";
   Events["MouseOut"] = "mouseout";
   Events["MouseOver"] = "mouseover";
@@ -1945,6 +1947,293 @@ class DiagramConnectionSet extends DiagramElementSet {
   }
 }
 
+/**
+ * Default values of the parameters of a diagram field.
+ * @private
+ * @see DiagramField
+ */
+const DIAGRAM_FIELD_DEFAULTS = {
+  editable: true,
+  fontSize: 0,
+  margin: 0,
+  padding: 0,
+  fontFamily: "'Wonder Unit Sans', sans-serif",
+  color: '#000000',
+  selectedColor: '#000000',
+  horizontalAlign: exports.HorizontalAlign.Center,
+  verticalAlign: exports.VerticalAlign.Center,
+  fit: false
+};
+/**
+ * A field which displays text and is part of a diagram element.
+ * @public
+ * @see DiagramNode
+ * @see DiagramPort
+ * @see DiagramSection
+ */
+class DiagramField extends DiagramElement {
+  /**
+   * Text contents of this field.
+   * @public
+   */
+  get text() {
+    return this._text;
+  }
+  set text(value) {
+    var _a;
+    if (value.trim() === '') {
+      value = this.defaultText;
+    }
+    this._text = value;
+    this.updateInView();
+    if (this.fit) {
+      (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.fitFieldRootInView(this.id);
+    }
+  }
+  constructor(model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, text, editable, fit) {
+    const id = `${rootElement === null || rootElement === void 0 ? void 0 : rootElement.id}_field`;
+    if (model.fields.get(id) !== undefined) {
+      throw new Error('DiagramField for rootElement already exists');
+    }
+    super(model, id);
+    /**
+     * Collaborative timestamp for text.
+     * @public
+     */
+    this.textTimestamp = null;
+    this.rootElement = rootElement;
+    this.coords = coords;
+    this.width = width;
+    this.height = height;
+    this.fontSize = fontSize;
+    this.fontFamily = fontFamily;
+    this.color = color;
+    this.selectedColor = selectedColor;
+    this.horizontalAlign = horizontalAlign;
+    this.verticalAlign = verticalAlign;
+    this.defaultText = text;
+    this._text = text;
+    this.editable = editable;
+    this.fit = fit;
+  }
+  select() {
+    var _a, _b;
+    return (_b = (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.selectCanvasView()) === null || _b === void 0 ? void 0 : _b.select(`foreignObject#${this.id}`);
+  }
+  get removed() {
+    return this.selfRemoved || this.rootElement !== undefined && this.rootElement.removed;
+  }
+  updateInView() {
+    var _a;
+    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateFieldsInView(this.id);
+  }
+  /**
+   * Change the coordinates of this field to the given coordinates.
+   * @public
+   * @param coords A point in the diagram.
+   */
+  move(coords) {
+    this.coords = coords;
+    this.updateInView();
+  }
+  getPriority() {
+    var _a;
+    return ((_a = this.rootElement) === null || _a === void 0 ? void 0 : _a.getPriority()) || DEFAULT_PRIORITY;
+  }
+}
+class DiagramFieldSet extends DiagramElementSet {
+  /**
+   * Instance a set of fields for the given model. This method is used internally.
+   * @private
+   */
+  constructor(model) {
+    super();
+    this.model = model;
+  }
+  /**
+   * Instance a new field and add it to this set. This method is normally called when instancing an element with a field and it is rarely called by itself.
+   * @private
+   */
+  new(rootElement, coords, fontSize, fontFamily, color, selectedColor, width, height, horizontalAlign, verticalAlign, text, editable, fit) {
+    const field = new DiagramField(this.model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, text, editable, fit);
+    super.add(field);
+    field.updateInView();
+    // add this field to its root element
+    if (rootElement !== undefined) {
+      rootElement.label = field;
+    }
+    return field;
+  }
+  remove(id) {
+    var _a;
+    const field = this.get(id, true);
+    if (field) {
+      // remove from root element
+      if (((_a = field.rootElement) === null || _a === void 0 ? void 0 : _a.label) !== undefined) {
+        if (field.rootElement.label === field) {
+          field.rootElement.label = undefined;
+        }
+      }
+      // remove from set of fields
+      super.remove(id);
+      // remove from canvas
+      field.updateInView();
+    }
+  }
+}
+const getBottomMargin = config => {
+  if ((config === null || config === void 0 ? void 0 : config.margin) === null || (config === null || config === void 0 ? void 0 : config.margin) === undefined) {
+    return DIAGRAM_FIELD_DEFAULTS.margin;
+  } else if (typeof config.margin === 'number') {
+    return config.margin;
+  } else {
+    if (config.margin.length === 0) {
+      return DIAGRAM_FIELD_DEFAULTS.margin;
+    } else if (config.margin.length === 1) {
+      return config.margin[0];
+    } else if (config.margin.length === 2) {
+      return config.margin[0];
+    } else if (config.margin.length === 3) {
+      return config.margin[2];
+    } else {
+      return config.margin[2];
+    }
+  }
+};
+const getLeftMargin = config => {
+  if ((config === null || config === void 0 ? void 0 : config.margin) === null || (config === null || config === void 0 ? void 0 : config.margin) === undefined) {
+    return DIAGRAM_FIELD_DEFAULTS.margin;
+  } else if (typeof config.margin === 'number') {
+    return config.margin;
+  } else {
+    if (config.margin.length === 0) {
+      return DIAGRAM_FIELD_DEFAULTS.margin;
+    } else if (config.margin.length === 1) {
+      return config.margin[0];
+    } else if (config.margin.length === 2) {
+      return config.margin[1];
+    } else if (config.margin.length === 3) {
+      return config.margin[1];
+    } else {
+      return config.margin[3];
+    }
+  }
+};
+const getRightMargin = config => {
+  if ((config === null || config === void 0 ? void 0 : config.margin) === null || (config === null || config === void 0 ? void 0 : config.margin) === undefined) {
+    return DIAGRAM_FIELD_DEFAULTS.margin;
+  } else if (typeof config.margin === 'number') {
+    return config.margin;
+  } else {
+    if (config.margin.length === 0) {
+      return DIAGRAM_FIELD_DEFAULTS.margin;
+    } else if (config.margin.length === 1) {
+      return config.margin[0];
+    } else if (config.margin.length === 2) {
+      return config.margin[1];
+    } else if (config.margin.length === 3) {
+      return config.margin[1];
+    } else {
+      return config.margin[1];
+    }
+  }
+};
+const getTopMargin = config => {
+  if ((config === null || config === void 0 ? void 0 : config.margin) === null || (config === null || config === void 0 ? void 0 : config.margin) === undefined) {
+    return DIAGRAM_FIELD_DEFAULTS.margin;
+  } else if (typeof config.margin === 'number') {
+    return config.margin;
+  } else {
+    if (config.margin.length === 0) {
+      return DIAGRAM_FIELD_DEFAULTS.margin;
+    } else if (config.margin.length === 1) {
+      return config.margin[0];
+    } else if (config.margin.length === 2) {
+      return config.margin[0];
+    } else if (config.margin.length === 3) {
+      return config.margin[0];
+    } else {
+      return config.margin[0];
+    }
+  }
+};
+const getBottomPadding = config => {
+  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
+    return DIAGRAM_FIELD_DEFAULTS.padding;
+  } else if (typeof config.padding === 'number') {
+    return config.padding;
+  } else {
+    if (config.padding.length === 0) {
+      return DIAGRAM_FIELD_DEFAULTS.padding;
+    } else if (config.padding.length === 1) {
+      return config.padding[0];
+    } else if (config.padding.length === 2) {
+      return config.padding[0];
+    } else if (config.padding.length === 3) {
+      return config.padding[2];
+    } else {
+      return config.padding[2];
+    }
+  }
+};
+const getLeftPadding = config => {
+  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
+    return DIAGRAM_FIELD_DEFAULTS.padding;
+  } else if (typeof config.padding === 'number') {
+    return config.padding;
+  } else {
+    if (config.padding.length === 0) {
+      return DIAGRAM_FIELD_DEFAULTS.padding;
+    } else if (config.padding.length === 1) {
+      return config.padding[0];
+    } else if (config.padding.length === 2) {
+      return config.padding[1];
+    } else if (config.padding.length === 3) {
+      return config.padding[1];
+    } else {
+      return config.padding[3];
+    }
+  }
+};
+const getRightPadding = config => {
+  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
+    return DIAGRAM_FIELD_DEFAULTS.padding;
+  } else if (typeof config.padding === 'number') {
+    return config.padding;
+  } else {
+    if (config.padding.length === 0) {
+      return DIAGRAM_FIELD_DEFAULTS.padding;
+    } else if (config.padding.length === 1) {
+      return config.padding[0];
+    } else if (config.padding.length === 2) {
+      return config.padding[1];
+    } else if (config.padding.length === 3) {
+      return config.padding[1];
+    } else {
+      return config.padding[1];
+    }
+  }
+};
+const getTopPadding = config => {
+  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
+    return DIAGRAM_FIELD_DEFAULTS.padding;
+  } else if (typeof config.padding === 'number') {
+    return config.padding;
+  } else {
+    if (config.padding.length === 0) {
+      return DIAGRAM_FIELD_DEFAULTS.padding;
+    } else if (config.padding.length === 1) {
+      return config.padding[0];
+    } else if (config.padding.length === 2) {
+      return config.padding[0];
+    } else if (config.padding.length === 3) {
+      return config.padding[0];
+    } else {
+      return config.padding[0];
+    }
+  }
+};
+
 /**
  * Default values of the look of a diagram section.
  * @private
@@ -2895,220 +3184,77 @@ class DiagramPort extends DiagramElement {
      * Connections that end at this port.
      * @public
      */
-    this.incomingConnections = [];
-    this.rootElement = rootElement;
-    this.coords = coords;
-    this.direction = direction;
-  }
-  get removed() {
-    return this.selfRemoved || this.rootElement !== undefined && this.rootElement.removed;
-  }
-  updateInView() {
-    var _a;
-    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updatePortsInView(this.id);
-  }
-  /**
-   * Add a connection to this port's list of outgoing connections.
-   * @public
-   * @param connection A connection.
-   */
-  startConnection(connection) {
-    this.outgoingConnections.push(connection);
-  }
-  /**
-   * Add a connection to this port's list of incoming connections.
-   * @public
-   * @param connection A connection.
-   */
-  finishConnection(connection) {
-    this.incomingConnections.push(connection);
-  }
-  /**
-   * Get the root node of this port, which is either its rootElement if it's a node or it's rootElement's node if it's a section.
-   * @public
-   * @returns A node if it could be found, `undefined` otherwise.
-   */
-  getNode() {
-    if (this.rootElement instanceof DiagramNode) {
-      return this.rootElement;
-    } else if (this.rootElement instanceof DiagramSection) {
-      return this.rootElement.node;
-    }
-    return undefined;
-  }
-  getPriority() {
-    var _a;
-    return ((_a = this.rootElement) === null || _a === void 0 ? void 0 : _a.getPriority()) || DEFAULT_PRIORITY;
-  }
-  /**
-   * Change the coordinates of this port to the given coordinates and move its labels correspondingly.
-   * @public
-   * @param coords A point in the diagram.
-   */
-  move(coords) {
-    const coordDifferences = [coords[0] - this.coords[0], coords[1] - this.coords[1]];
-    this.coords = coords;
-    for (const connection of this.outgoingConnections) {
-      connection.setStart(this);
-    }
-    for (const connection of this.incomingConnections) {
-      connection.setEnd(this);
-    }
-    if (this.label) {
-      this.label.move([this.label.coords[0] + coordDifferences[0], this.label.coords[1] + coordDifferences[1]]);
-    }
-    this.updateInView();
-  }
-  distanceTo(coords) {
-    return distanceBetweenPoints(this.coords, coords);
-  }
-}
-class DiagramPortSet extends DiagramElementSet {
-  /**
-   * Instance a set of ports for the given model. This method is used internally.
-   * @private
-   */
-  constructor(model) {
-    super();
-    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);
-    super.add(port);
-    port.updateInView();
-    // add this port to its root element
-    if (rootElement !== undefined) {
-      rootElement.ports.push(port);
-    }
-    return port;
-  }
-  remove(id) {
-    const port = this.get(id, true);
-    if (port) {
-      // remove all connections
-      while (port.outgoingConnections.length > 0) {
-        this.model.connections.remove(port.outgoingConnections[0].id);
-      }
-      while (port.incomingConnections.length > 0) {
-        this.model.connections.remove(port.incomingConnections[0].id);
-      }
-      // remove label
-      if (port.label) {
-        this.model.fields.remove(port.label.id);
-      }
-      // remove from root element
-      if (port.rootElement instanceof DiagramNode || port.rootElement instanceof DiagramSection) {
-        removeIfExists(port.rootElement.ports, port);
-      }
-      // remove from set of ports
-      super.remove(id);
-      // remove from canvas
-      port.updateInView();
-    }
-  }
-}
-
-/**
- * Default values of the parameters of a diagram field.
- * @private
- * @see DiagramField
- */
-const DIAGRAM_FIELD_DEFAULTS = {
-  editable: true,
-  fontSize: 0,
-  margin: 0,
-  padding: 0,
-  fontFamily: "'Wonder Unit Sans', sans-serif",
-  color: '#000000',
-  selectedColor: '#000000',
-  horizontalAlign: exports.HorizontalAlign.Center,
-  verticalAlign: exports.VerticalAlign.Center,
-  fit: false
-};
-/**
- * A field which displays text and is part of a diagram element.
- * @public
- * @see DiagramNode
- * @see DiagramPort
- * @see DiagramSection
- */
-class DiagramField extends DiagramElement {
-  /**
-   * Text contents of this field.
-   * @public
-   */
-  get text() {
-    return this._text;
-  }
-  set text(value) {
-    var _a;
-    if (value.trim() === '') {
-      value = this.defaultText;
-    }
-    this._text = value;
-    this.updateInView();
-    if (this.fit) {
-      (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.fitFieldRootInView(this.id);
-    }
-  }
-  constructor(model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, text, editable, fit) {
-    const id = `${rootElement === null || rootElement === void 0 ? void 0 : rootElement.id}_field`;
-    if (model.fields.get(id) !== undefined) {
-      throw new Error('DiagramField for rootElement already exists');
-    }
-    super(model, id);
-    /**
-     * Collaborative timestamp for text.
-     * @public
-     */
-    this.textTimestamp = null;
-    this.rootElement = rootElement;
-    this.coords = coords;
-    this.width = width;
-    this.height = height;
-    this.fontSize = fontSize;
-    this.fontFamily = fontFamily;
-    this.color = color;
-    this.selectedColor = selectedColor;
-    this.horizontalAlign = horizontalAlign;
-    this.verticalAlign = verticalAlign;
-    this.defaultText = text;
-    this._text = text;
-    this.editable = editable;
-    this.fit = fit;
-  }
-  select() {
-    var _a, _b;
-    return (_b = (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.selectCanvasView()) === null || _b === void 0 ? void 0 : _b.select(`foreignObject#${this.id}`);
+    this.incomingConnections = [];
+    this.rootElement = rootElement;
+    this.coords = coords;
+    this.direction = direction;
   }
   get removed() {
     return this.selfRemoved || this.rootElement !== undefined && this.rootElement.removed;
   }
   updateInView() {
     var _a;
-    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateFieldsInView(this.id);
+    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updatePortsInView(this.id);
   }
   /**
-   * Change the coordinates of this field to the given coordinates.
+   * Add a connection to this port's list of outgoing connections.
+   * @public
+   * @param connection A connection.
+   */
+  startConnection(connection) {
+    this.outgoingConnections.push(connection);
+  }
+  /**
+   * Add a connection to this port's list of incoming connections.
+   * @public
+   * @param connection A connection.
+   */
+  finishConnection(connection) {
+    this.incomingConnections.push(connection);
+  }
+  /**
+   * Get the root node of this port, which is either its rootElement if it's a node or it's rootElement's node if it's a section.
+   * @public
+   * @returns A node if it could be found, `undefined` otherwise.
+   */
+  getNode() {
+    if (this.rootElement instanceof DiagramNode) {
+      return this.rootElement;
+    } else if (this.rootElement instanceof DiagramSection) {
+      return this.rootElement.node;
+    }
+    return undefined;
+  }
+  getPriority() {
+    var _a;
+    return ((_a = this.rootElement) === null || _a === void 0 ? void 0 : _a.getPriority()) || DEFAULT_PRIORITY;
+  }
+  /**
+   * Change the coordinates of this port to the given coordinates and move its labels correspondingly.
    * @public
    * @param coords A point in the diagram.
    */
   move(coords) {
+    const coordDifferences = [coords[0] - this.coords[0], coords[1] - this.coords[1]];
     this.coords = coords;
+    for (const connection of this.outgoingConnections) {
+      connection.setStart(this);
+    }
+    for (const connection of this.incomingConnections) {
+      connection.setEnd(this);
+    }
+    if (this.label) {
+      this.label.move([this.label.coords[0] + coordDifferences[0], this.label.coords[1] + coordDifferences[1]]);
+    }
     this.updateInView();
   }
-  getPriority() {
-    var _a;
-    return ((_a = this.rootElement) === null || _a === void 0 ? void 0 : _a.getPriority()) || DEFAULT_PRIORITY;
+  distanceTo(coords) {
+    return distanceBetweenPoints(this.coords, coords);
   }
 }
-class DiagramFieldSet extends DiagramElementSet {
+class DiagramPortSet extends DiagramElementSet {
   /**
-   * Instance a set of fields for the given model. This method is used internally.
+   * Instance a set of ports for the given model. This method is used internally.
    * @private
    */
   constructor(model) {
@@ -3116,187 +3262,44 @@ class DiagramFieldSet extends DiagramElementSet {
     this.model = model;
   }
   /**
-   * Instance a new field and add it to this set. This method is normally called when instancing an element with a field and it is rarely called by itself.
+   * 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, fontSize, fontFamily, color, selectedColor, width, height, horizontalAlign, verticalAlign, text, editable, fit) {
-    const field = new DiagramField(this.model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, text, editable, fit);
-    super.add(field);
-    field.updateInView();
-    // add this field to its root element
+  new(rootElement, coords, direction, id) {
+    const port = new DiagramPort(this.model, rootElement, coords, direction, id);
+    super.add(port);
+    port.updateInView();
+    // add this port to its root element
     if (rootElement !== undefined) {
-      rootElement.label = field;
+      rootElement.ports.push(port);
     }
-    return field;
+    return port;
   }
   remove(id) {
-    const field = this.get(id, true);
-    if (field) {
+    const port = this.get(id, true);
+    if (port) {
+      // remove all connections
+      while (port.outgoingConnections.length > 0) {
+        this.model.connections.remove(port.outgoingConnections[0].id);
+      }
+      while (port.incomingConnections.length > 0) {
+        this.model.connections.remove(port.incomingConnections[0].id);
+      }
+      // remove label
+      if (port.label) {
+        this.model.fields.remove(port.label.id);
+      }
       // remove from root element
-      if (field.rootElement instanceof DiagramNode || field.rootElement instanceof DiagramSection || field.rootElement instanceof DiagramPort) {
-        if (field.rootElement.label === field) {
-          field.rootElement.label = undefined;
-        }
+      if (port.rootElement instanceof DiagramNode || port.rootElement instanceof DiagramSection) {
+        removeIfExists(port.rootElement.ports, port);
       }
-      // remove from set of fields
+      // remove from set of ports
       super.remove(id);
       // remove from canvas
-      field.updateInView();
+      port.updateInView();
     }
   }
 }
-const getBottomMargin = config => {
-  if ((config === null || config === void 0 ? void 0 : config.margin) === null || (config === null || config === void 0 ? void 0 : config.margin) === undefined) {
-    return DIAGRAM_FIELD_DEFAULTS.margin;
-  } else if (typeof config.margin === 'number') {
-    return config.margin;
-  } else {
-    if (config.margin.length === 0) {
-      return DIAGRAM_FIELD_DEFAULTS.margin;
-    } else if (config.margin.length === 1) {
-      return config.margin[0];
-    } else if (config.margin.length === 2) {
-      return config.margin[0];
-    } else if (config.margin.length === 3) {
-      return config.margin[2];
-    } else {
-      return config.margin[2];
-    }
-  }
-};
-const getLeftMargin = config => {
-  if ((config === null || config === void 0 ? void 0 : config.margin) === null || (config === null || config === void 0 ? void 0 : config.margin) === undefined) {
-    return DIAGRAM_FIELD_DEFAULTS.margin;
-  } else if (typeof config.margin === 'number') {
-    return config.margin;
-  } else {
-    if (config.margin.length === 0) {
-      return DIAGRAM_FIELD_DEFAULTS.margin;
-    } else if (config.margin.length === 1) {
-      return config.margin[0];
-    } else if (config.margin.length === 2) {
-      return config.margin[1];
-    } else if (config.margin.length === 3) {
-      return config.margin[1];
-    } else {
-      return config.margin[3];
-    }
-  }
-};
-const getRightMargin = config => {
-  if ((config === null || config === void 0 ? void 0 : config.margin) === null || (config === null || config === void 0 ? void 0 : config.margin) === undefined) {
-    return DIAGRAM_FIELD_DEFAULTS.margin;
-  } else if (typeof config.margin === 'number') {
-    return config.margin;
-  } else {
-    if (config.margin.length === 0) {
-      return DIAGRAM_FIELD_DEFAULTS.margin;
-    } else if (config.margin.length === 1) {
-      return config.margin[0];
-    } else if (config.margin.length === 2) {
-      return config.margin[1];
-    } else if (config.margin.length === 3) {
-      return config.margin[1];
-    } else {
-      return config.margin[1];
-    }
-  }
-};
-const getTopMargin = config => {
-  if ((config === null || config === void 0 ? void 0 : config.margin) === null || (config === null || config === void 0 ? void 0 : config.margin) === undefined) {
-    return DIAGRAM_FIELD_DEFAULTS.margin;
-  } else if (typeof config.margin === 'number') {
-    return config.margin;
-  } else {
-    if (config.margin.length === 0) {
-      return DIAGRAM_FIELD_DEFAULTS.margin;
-    } else if (config.margin.length === 1) {
-      return config.margin[0];
-    } else if (config.margin.length === 2) {
-      return config.margin[0];
-    } else if (config.margin.length === 3) {
-      return config.margin[0];
-    } else {
-      return config.margin[0];
-    }
-  }
-};
-const getBottomPadding = config => {
-  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
-    return DIAGRAM_FIELD_DEFAULTS.padding;
-  } else if (typeof config.padding === 'number') {
-    return config.padding;
-  } else {
-    if (config.padding.length === 0) {
-      return DIAGRAM_FIELD_DEFAULTS.padding;
-    } else if (config.padding.length === 1) {
-      return config.padding[0];
-    } else if (config.padding.length === 2) {
-      return config.padding[0];
-    } else if (config.padding.length === 3) {
-      return config.padding[2];
-    } else {
-      return config.padding[2];
-    }
-  }
-};
-const getLeftPadding = config => {
-  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
-    return DIAGRAM_FIELD_DEFAULTS.padding;
-  } else if (typeof config.padding === 'number') {
-    return config.padding;
-  } else {
-    if (config.padding.length === 0) {
-      return DIAGRAM_FIELD_DEFAULTS.padding;
-    } else if (config.padding.length === 1) {
-      return config.padding[0];
-    } else if (config.padding.length === 2) {
-      return config.padding[1];
-    } else if (config.padding.length === 3) {
-      return config.padding[1];
-    } else {
-      return config.padding[3];
-    }
-  }
-};
-const getRightPadding = config => {
-  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
-    return DIAGRAM_FIELD_DEFAULTS.padding;
-  } else if (typeof config.padding === 'number') {
-    return config.padding;
-  } else {
-    if (config.padding.length === 0) {
-      return DIAGRAM_FIELD_DEFAULTS.padding;
-    } else if (config.padding.length === 1) {
-      return config.padding[0];
-    } else if (config.padding.length === 2) {
-      return config.padding[1];
-    } else if (config.padding.length === 3) {
-      return config.padding[1];
-    } else {
-      return config.padding[1];
-    }
-  }
-};
-const getTopPadding = config => {
-  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
-    return DIAGRAM_FIELD_DEFAULTS.padding;
-  } else if (typeof config.padding === 'number') {
-    return config.padding;
-  } else {
-    if (config.padding.length === 0) {
-      return DIAGRAM_FIELD_DEFAULTS.padding;
-    } else if (config.padding.length === 1) {
-      return config.padding[0];
-    } else if (config.padding.length === 2) {
-      return config.padding[0];
-    } else if (config.padding.length === 3) {
-      return config.padding[0];
-    } else {
-      return config.padding[0];
-    }
-  }
-};
 
 /**
  * Importer which imports a diagram from its daga model representation.
@@ -5301,6 +5304,15 @@ const ACTION_STACK_SIZE = 25;
 const UNFINISHED_CONNECTION_ID = 'diagram-connection-unfinished';
 const MAX_DISTANCE_TO_PORT = 100;
 class DiagramCanvas {
+  get connectionType() {
+    return this._connectionType;
+  }
+  set connectionType(value) {
+    var _a, _b;
+    this._connectionType = value;
+    // refresh the palette every time connectionType is set so that the palette keeps track of updates to the connectionType
+    (_b = (_a = this.parentComponent) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.refreshPalette();
+  }
   /**
    * Constructs a canvas object.
    * @public
@@ -5357,7 +5369,7 @@ class DiagramCanvas {
         const connectionType = new DiagramConnectionType(Object.assign(Object.assign({}, config.connectionTypeDefaults), connectionTypeConfig));
         this.model.connections.types.add(connectionType);
       }
-      this.connectionType = config.defaultConnection !== undefined ? this.model.connections.types.get(config.defaultConnection) : undefined;
+      this._connectionType = config.defaultConnection !== undefined ? this.model.connections.types.get(config.defaultConnection) : undefined;
     }
   }
   addValidator(validator) {
@@ -6390,6 +6402,8 @@ class DiagramCanvas {
           const userHighlight = this.userHighlight.getFocus();
           if (userHighlight instanceof DiagramPort) {
             this.finishConnection(userHighlight);
+          } else if (userHighlight instanceof DiagramField && userHighlight.rootElement instanceof DiagramPort) {
+            this.finishConnection(userHighlight.rootElement);
           } else if (userHighlight instanceof DiagramNode || userHighlight instanceof DiagramSection || userHighlight instanceof DiagramField) {
             let targetRootElement;
             if (userHighlight instanceof DiagramNode || userHighlight instanceof DiagramSection) {
@@ -7134,7 +7148,7 @@ const getRelatedNodeOrItself = element => {
   if (element instanceof DiagramSection) {
     return element.node || element;
   }
-  return element.rootElement !== undefined ? getRelatedNodeOrItself(element.rootElement) : element;
+  return element.rootElement instanceof DiagramNode || element.rootElement instanceof DiagramSection || element.rootElement instanceof DiagramPort ? getRelatedNodeOrItself(element.rootElement) : element;
 };
 
 const VERSION = '0.0.1';