fix: define CellStyle.portConstraintRotation as boolean (#299)

It was incorrectly defined as DIRECTION after the migration from
mxGraph.

Also improve the type signature and JSDoc of
mathUtils.getPortConstraints which is the only function that uses the
`portConstraintRotation` property in maxGraph.

packages/core/src/types.ts

@@ -533,7 +533,7 @@ export type CellStateStyle = {
    * - `true` makes the constraints rotate with the vertex.
    * @default false
    */
-  portConstraintRotation?: DIRECTION;
+  portConstraintRotation?: boolean;
   /**
    * This specifies if a cell can be resized.
    *

packages/core/src/util/mathUtils.ts

@@ -206,21 +206,19 @@ export const getRotatedPoint = (pt: Point, cos: number, sin: number, c = new Poi
 
 /**
  * Returns an integer mask of the port constraints of the given map
- * @param dict the style map to determine the port constraints for
- * @param defaultValue Default value to return if the key is undefined.
- * @return the mask of port constraint directions
  *
  * @param terminal {@link CelState} that represents the terminal.
- * @param edge <CellState> that represents the edge.
+ * @param edge {@link CelState} that represents the edge.
  * @param source Boolean that specifies if the terminal is the source terminal.
- * @param defaultValue Default value to be returned.
+ * @param defaultValue Default value to be returned if no port constraint is defined in the terminal.
+ * @return the mask of port constraint directions
  */
 export const getPortConstraints = (
   terminal: CellState,
   edge: CellState,
   source: boolean,
-  defaultValue: any
+  defaultValue: number
-) => {
+): number => {
   const value = getValue(
     terminal.style,
     'portConstraint',
@@ -233,10 +231,10 @@ export const getPortConstraints = (
 
   const directions = value.toString();
   let returnValue = DIRECTION_MASK.NONE;
-  const constraintRotationEnabled = getValue(terminal.style, 'portConstraintRotation', 0);
+  const constraintRotationEnabled = terminal.style.portConstraintRotation ?? false;
   let rotation = 0;
 
-  if (constraintRotationEnabled == 1) {
+  if (constraintRotationEnabled) {
     rotation = terminal.style.rotation ?? 0;
   }
 

packages/core/src/view/cell/CellState.ts

@@ -41,14 +41,6 @@ import { Graph } from '../Graph';
  * let bbox = (state.text != null) ? state.text.boundingBox : null;
  * ```
  *
- * Constructor: CellState
- *
- * Constructs a new object that represents the current state of the given
- * cell in the specified view.
- *
- * @param view {@link GraphView} that contains the state.
- * @param cell <Cell> that this state represents.
- * @param style Array of key, value pairs that constitute the style.
  */
 class CellState extends Rectangle {
   // referenced in mxCellRenderer
@@ -73,13 +65,12 @@ class CellState extends Rectangle {
   view!: GraphView;
 
   /**
-   * Reference to the <Cell> that is represented by this state.
+   * Reference to the {@link Cell} that is represented by this state.
    */
   cell!: Cell;
 
   /**
-   * Contains an array of key, value pairs that represent the style of the
+   * The style of the {@link Cell}.
-   * cell.
    */
   style!: CellStateStyle;
 
@@ -163,6 +154,13 @@ class CellState extends Rectangle {
 
   point: Point | null = null;
 
+  /**
+   * Constructs a new object that represents the current state of the given Cell in the specified view.
+   *
+   * @param view {@link GraphView} that contains the state.
+   * @param cell {@link Cell} that this state represents.
+   * @param style the style of the Cell.
+   */
   constructor(
     view: GraphView | null = null,
     cell: Cell | null = null,

packages/website/docs/usage/migrate-from-mxgraph.md

@@ -425,6 +425,7 @@ Property type changed from `number` (0 or 1) to `boolean` (if not specified, fro
 - `orthogonal`
 - `orthogonalLoop`
 - `pointerEvents`
+- `portConstraintRotation`
 - `resizable`
 - `resizeHeight`
 - `resizeWidth`