From 01f56670dc916ccffe4820edce4ee123eb032e2f Mon Sep 17 00:00:00 2001
From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com>
Date: Sat, 3 May 2025 19:08:30 +0200
Subject: [PATCH 1/2] refactor!: remove DIRECTION and TEXT_DIRECTION enums

BREAKING CHANGES: some enums have been removed. Use the string counterparts from related types:
  - `constants.DIRECTION` --> `DirectionValue`
  - `constants.TEXT_DIRECTION` --> `TextDirectionValue`
---
 CHANGELOG.md                                  |  4 +-
 .../core/__tests__/util/mathUtils.test.ts     | 42 +++++++++----------
 .../core/__tests__/view/style/config.test.ts  |  5 +--
 packages/core/src/types.ts                    | 10 ++++-
 packages/core/src/util/Constants.ts           | 19 ---------
 packages/core/src/util/mathUtils.ts           | 24 +++++------
 .../core/src/view/canvas/AbstractCanvas2D.ts  |  9 +---
 packages/core/src/view/canvas/SvgCanvas2D.ts  | 17 ++++----
 packages/core/src/view/geometry/Shape.ts      | 33 +++++++--------
 .../src/view/geometry/node/SwimlaneShape.ts   |  8 ++--
 .../core/src/view/geometry/node/TextShape.ts  | 26 ++++++------
 .../src/view/geometry/stencil/StencilShape.ts | 11 ++---
 .../src/view/layout/HierarchicalLayout.ts     | 10 ++---
 .../core/src/view/layout/SwimlaneLayout.ts    | 20 +++++----
 .../hierarchical/CoordinateAssignment.ts      | 42 ++++++-------------
 packages/core/src/view/mixins/CellsMixin.ts   | 14 +++----
 .../core/src/view/mixins/ConnectionsMixin.ts  | 15 ++++---
 .../core/src/view/mixins/SwimlaneMixin.ts     | 20 ++++-----
 packages/core/src/view/style/config.ts        | 16 ++++---
 packages/core/src/view/style/edge/Loop.ts     | 11 +++--
 .../core/src/view/style/edge/Manhattan.ts     | 15 ++-----
 .../view/style/perimeter/HexagonPerimeter.ts  |  5 +--
 .../view/style/perimeter/TrianglePerimeter.ts | 21 +++++-----
 packages/html/stories/AutoLayout.stories.ts   |  3 +-
 24 files changed, 174 insertions(+), 226 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 35f7be08fc..e47be89061 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,11 +12,13 @@ _**Note:** Yet to be released breaking changes appear here._
 **Breaking Changes**:
 - Some enums have been removed. Use the string counterparts from related types:
   - `constants.ALIGN` --> `AlignValue` and `VAlignValue` 
-  - `constants.ARROW` --> `ArrowValue` 
+  - `constants.ARROW` --> `ArrowValue`
+  - `constants.DIRECTION` --> `DirectionValue`
   - `constants.EDGESTYLE` --> `EdgeStyleValue` 
   - `constants.PERIMETER` --> `PerimeterValue`
   - `constants.RENDERING_HINT`: no replacement as it wasn't used
   - `constants.SHAPE` --> `ShapeValue`
+  - `constants.TEXT_DIRECTION` --> `TextDirectionValue`
 
 ## 0.19.0
 
diff --git a/packages/core/__tests__/util/mathUtils.test.ts b/packages/core/__tests__/util/mathUtils.test.ts
index c51553d698..cd25bb9faa 100644
--- a/packages/core/__tests__/util/mathUtils.test.ts
+++ b/packages/core/__tests__/util/mathUtils.test.ts
@@ -16,7 +16,7 @@ limitations under the License.
 
 import { describe, expect, test } from '@jest/globals';
 import { getPortConstraints, isNumeric } from '../../src/util/mathUtils';
-import { DIRECTION, DIRECTION_MASK } from '../../src/util/Constants';
+import { DIRECTION_MASK } from '../../src/util/Constants';
 import CellState from '../../src/view/cell/CellState';
 import { DirectionValue } from '../../src';
 
@@ -39,11 +39,11 @@ describe('getPortConstraints', () => {
 
   test('uses terminal.style.portConstraint over edge style constraints', () => {
     const terminal = new CellState();
-    terminal.style = { portConstraint: DIRECTION.NORTH };
+    terminal.style = { portConstraint: 'north' };
     const edge = new CellState();
     edge.style = {
-      sourcePortConstraint: DIRECTION.SOUTH,
-      targetPortConstraint: DIRECTION.EAST,
+      sourcePortConstraint: 'south',
+      targetPortConstraint: 'east',
     };
 
     expect(getPortConstraints(terminal, edge, true, defaultMask)).toBe(
@@ -66,7 +66,7 @@ describe('getPortConstraints', () => {
     const terminal = new CellState();
     terminal.style = {};
     const edge = new CellState();
-    edge.style = { targetPortConstraint: DIRECTION.SOUTH };
+    edge.style = { targetPortConstraint: 'south' };
 
     expect(getPortConstraints(terminal, edge, false, defaultMask)).toBe(
       DIRECTION_MASK.SOUTH
@@ -74,10 +74,10 @@ describe('getPortConstraints', () => {
   });
 
   test.each([
-    [DIRECTION.NORTH, DIRECTION_MASK.NORTH],
-    [DIRECTION.SOUTH, DIRECTION_MASK.SOUTH],
-    [DIRECTION.EAST, DIRECTION_MASK.EAST],
-    [DIRECTION.WEST, DIRECTION_MASK.WEST],
+    ['north', DIRECTION_MASK.NORTH],
+    ['south', DIRECTION_MASK.SOUTH],
+    ['east', DIRECTION_MASK.EAST],
+    ['west', DIRECTION_MASK.WEST],
   ])('handles single direction %s', (direction: DirectionValue, expectedMask: number) => {
     const terminal = new CellState();
     terminal.style = { portConstraint: direction };
@@ -89,7 +89,7 @@ describe('getPortConstraints', () => {
 
   test('handles array of port constraints (north and south)', () => {
     const terminal = new CellState();
-    terminal.style = { portConstraint: [DIRECTION.NORTH, 'south'] };
+    terminal.style = { portConstraint: ['north', 'south'] };
     const edge = new CellState();
     edge.style = {};
 
@@ -104,7 +104,7 @@ describe('getPortConstraints', () => {
     terminal.style = {}; // No port constraint on terminal
     const edge = new CellState();
     edge.style = {
-      sourcePortConstraint: ['north', DIRECTION.SOUTH],
+      sourcePortConstraint: ['north', 'south'],
     };
 
     // When terminal has no constraint, should use the edge's sourcePortConstraint array
@@ -118,7 +118,7 @@ describe('getPortConstraints', () => {
     terminal.style = {}; // No port constraint on terminal
     const edge = new CellState();
     edge.style = {
-      targetPortConstraint: [DIRECTION.EAST, 'west'],
+      targetPortConstraint: ['east', 'west'],
     };
 
     // When terminal has no constraint, should use the edge's targetPortConstraint array
@@ -130,12 +130,12 @@ describe('getPortConstraints', () => {
   test('terminal portConstraint array takes precedence over edge port constraints', () => {
     const terminal = new CellState();
     terminal.style = {
-      portConstraint: [DIRECTION.NORTH, DIRECTION.WEST],
+      portConstraint: ['north', 'west'],
     };
     const edge = new CellState();
     edge.style = {
-      sourcePortConstraint: DIRECTION.SOUTH,
-      targetPortConstraint: DIRECTION.EAST,
+      sourcePortConstraint: 'south',
+      targetPortConstraint: 'east',
     };
 
     // Terminal's portConstraint should take precedence over edge's sourcePortConstraint
@@ -147,7 +147,7 @@ describe('getPortConstraints', () => {
   test('handles rotated constraints when portConstraintRotation is true', () => {
     const terminal = new CellState();
     terminal.style = {
-      portConstraint: DIRECTION.NORTH,
+      portConstraint: 'north',
       portConstraintRotation: true,
       rotation: 90,
     };
@@ -162,7 +162,7 @@ describe('getPortConstraints', () => {
   test('handles constraints with rotation defaulting to 0', () => {
     const terminal = new CellState();
     terminal.style = {
-      portConstraint: DIRECTION.NORTH,
+      portConstraint: 'north',
       portConstraintRotation: true,
       // rotation not set, should default to 0
     };
@@ -177,7 +177,7 @@ describe('getPortConstraints', () => {
   test('ignores rotation when portConstraintRotation is false', () => {
     const terminal = new CellState();
     terminal.style = {
-      portConstraint: DIRECTION.NORTH,
+      portConstraint: 'north',
       portConstraintRotation: false,
       rotation: 90,
     };
@@ -192,7 +192,7 @@ describe('getPortConstraints', () => {
   test('handles 180 degree rotation', () => {
     const terminal = new CellState();
     terminal.style = {
-      portConstraint: DIRECTION.NORTH,
+      portConstraint: 'north',
       portConstraintRotation: true,
       rotation: 180,
     };
@@ -254,7 +254,7 @@ describe('getPortConstraints', () => {
     test('handles combined directions NORTH and SOUTH', () => {
       const terminal = new CellState();
       // @ts-ignore mxGraph set 'northsouth' as a string
-      terminal.style = { portConstraint: DIRECTION.NORTH + DIRECTION.SOUTH };
+      terminal.style = { portConstraint: 'north' + 'south' };
       const edge = new CellState();
       edge.style = {};
 
@@ -266,7 +266,7 @@ describe('getPortConstraints', () => {
     test('handles combined directions EAST and WEST', () => {
       const terminal = new CellState();
       // @ts-ignore mxGraph set 'eastwest' as a string
-      terminal.style = { portConstraint: DIRECTION.EAST + DIRECTION.WEST };
+      terminal.style = { portConstraint: 'east' + 'west' };
       const edge = new CellState();
       edge.style = {};
 
diff --git a/packages/core/__tests__/view/style/config.test.ts b/packages/core/__tests__/view/style/config.test.ts
index 1c38a5a0b5..6b16c7f100 100644
--- a/packages/core/__tests__/view/style/config.test.ts
+++ b/packages/core/__tests__/view/style/config.test.ts
@@ -21,7 +21,6 @@ import {
   resetManhattanConnectorConfig,
   resetOrthogonalConnectorConfig,
 } from '../../../src';
-import { DIRECTION } from '../../../src/util/Constants';
 
 test('resetOrthogonalConnectorConfig', () => {
   // Keep track of original default values
@@ -60,8 +59,8 @@ describe('resetManhattanConnectorConfig', () => {
     const originalStartDirections = [...ManhattanConnectorConfig.startDirections];
 
     // Change some values
-    ManhattanConnectorConfig.endDirections = [DIRECTION.NORTH, DIRECTION.SOUTH];
-    ManhattanConnectorConfig.startDirections.push(DIRECTION.NORTH, DIRECTION.SOUTH);
+    ManhattanConnectorConfig.endDirections = ['north', 'south'];
+    ManhattanConnectorConfig.startDirections.push('north', 'south');
 
     resetManhattanConnectorConfig();
 
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index cb3f2b321a..3048f3af14 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -919,7 +919,15 @@ export type SpecialStyleColorValue =
 /** @category Style */
 export type DirectionValue = 'north' | 'south' | 'east' | 'west';
 /** @category Style */
-export type TextDirectionValue = '' | 'ltr' | 'rtl' | 'auto';
+export type TextDirectionValue =
+  /** Use this value to use the default text direction of the operating system. */
+  | ''
+  /** Use this value to find the direction for a given text with {@link Text.getAutoDirection}. */
+  | 'auto'
+  /** Use this value for left to right text direction. */
+  | 'ltr'
+  /** Use this value for right to left text direction. */
+  | 'rtl';
 /** @category Style */
 export type AlignValue = 'left' | 'center' | 'right';
 /** @category Style */
diff --git a/packages/core/src/util/Constants.ts b/packages/core/src/util/Constants.ts
index 5d3abd18a6..17257100c4 100644
--- a/packages/core/src/util/Constants.ts
+++ b/packages/core/src/util/Constants.ts
@@ -436,25 +436,6 @@ export enum FONT {
   STRIKETHROUGH = 8,
 }
 
-export enum DIRECTION {
-  NORTH = 'north',
-  SOUTH = 'south',
-  EAST = 'east',
-  WEST = 'west',
-}
-
-export enum TEXT_DIRECTION {
-  /**
-   * Use this value to use the default text direction of the operating system. */
-  DEFAULT = '',
-  /** Use this value to find the direction for a given text with {@link Text#getAutoDirection}. */
-  AUTO = 'auto',
-  /** Use this value for left to right text direction. */
-  LTR = 'ltr',
-  /** Use this value for right to left text direction. */
-  RTL = 'rtl',
-}
-
 /**
  * Bitwise mask for all directions.
  */
diff --git a/packages/core/src/util/mathUtils.ts b/packages/core/src/util/mathUtils.ts
index c7483ef44d..7c4c9a49d0 100644
--- a/packages/core/src/util/mathUtils.ts
+++ b/packages/core/src/util/mathUtils.ts
@@ -16,7 +16,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { DIRECTION, DIRECTION_MASK } from './Constants';
+import { DIRECTION_MASK } from './Constants';
 import Point from '../view/geometry/Point';
 import Rectangle from '../view/geometry/Rectangle';
 import CellState from '../view/cell/CellState';
@@ -254,7 +254,7 @@ export const getPortConstraints = (
     }
   }
 
-  if (directions.indexOf(DIRECTION.NORTH) >= 0) {
+  if (directions.indexOf('north') >= 0) {
     switch (quad) {
       case 0:
         returnValue |= DIRECTION_MASK.NORTH;
@@ -270,7 +270,7 @@ export const getPortConstraints = (
         break;
     }
   }
-  if (directions.indexOf(DIRECTION.WEST) >= 0) {
+  if (directions.indexOf('west') >= 0) {
     switch (quad) {
       case 0:
         returnValue |= DIRECTION_MASK.WEST;
@@ -286,7 +286,7 @@ export const getPortConstraints = (
         break;
     }
   }
-  if (directions.indexOf(DIRECTION.SOUTH) >= 0) {
+  if (directions.indexOf('south') >= 0) {
     switch (quad) {
       case 0:
         returnValue |= DIRECTION_MASK.SOUTH;
@@ -302,7 +302,7 @@ export const getPortConstraints = (
         break;
     }
   }
-  if (directions.indexOf(DIRECTION.EAST) >= 0) {
+  if (directions.indexOf('east') >= 0) {
     switch (quad) {
       case 0:
         returnValue |= DIRECTION_MASK.EAST;
@@ -388,8 +388,8 @@ export const getDirectedBounds = (
   m.height = Math.round(Math.max(0, Math.min(rect.height, m.height)));
 
   if (
-    (flipV && (d === DIRECTION.SOUTH || d === DIRECTION.NORTH)) ||
-    (flipH && (d === DIRECTION.EAST || d === DIRECTION.WEST))
+    (flipV && (d === 'south' || d === 'north')) ||
+    (flipH && (d === 'east' || d === 'west'))
   ) {
     const tmp = m.x;
     m.x = m.width;
@@ -397,8 +397,8 @@ export const getDirectedBounds = (
   }
 
   if (
-    (flipH && (d === DIRECTION.SOUTH || d === DIRECTION.NORTH)) ||
-    (flipV && (d === DIRECTION.EAST || d === DIRECTION.WEST))
+    (flipH && (d === 'south' || d === 'north')) ||
+    (flipV && (d === 'east' || d === 'west'))
   ) {
     const tmp = m.y;
     m.y = m.height;
@@ -407,17 +407,17 @@ export const getDirectedBounds = (
 
   const m2 = Rectangle.fromRectangle(m);
 
-  if (d === DIRECTION.SOUTH) {
+  if (d === 'south') {
     m2.y = m.x;
     m2.x = m.height;
     m2.width = m.y;
     m2.height = m.width;
-  } else if (d === DIRECTION.WEST) {
+  } else if (d === 'west') {
     m2.y = m.height;
     m2.x = m.width;
     m2.width = m.x;
     m2.height = m.y;
-  } else if (d === DIRECTION.NORTH) {
+  } else if (d === 'north') {
     m2.y = m.width;
     m2.x = m.y;
     m2.width = m.height;
diff --git a/packages/core/src/view/canvas/AbstractCanvas2D.ts b/packages/core/src/view/canvas/AbstractCanvas2D.ts
index 704fb9e065..1e0454f7bb 100644
--- a/packages/core/src/view/canvas/AbstractCanvas2D.ts
+++ b/packages/core/src/view/canvas/AbstractCanvas2D.ts
@@ -17,12 +17,7 @@ limitations under the License.
 */
 
 import { arcToCurves, getRotatedPoint } from '../../util/mathUtils';
-import {
-  DEFAULT_FONTFAMILY,
-  DEFAULT_FONTSIZE,
-  DIRECTION,
-  NONE,
-} from '../../util/Constants';
+import { DEFAULT_FONTFAMILY, DEFAULT_FONTSIZE, NONE } from '../../util/Constants';
 import UrlConverter from '../../util/UrlConverter';
 import Point from '../geometry/Point';
 import { clone } from '../../util/cloneUtils';
@@ -165,7 +160,7 @@ abstract class AbstractCanvas2D {
       gradientFillAlpha: 1,
       gradientColor: NONE,
       gradientAlpha: 1,
-      gradientDirection: DIRECTION.EAST,
+      gradientDirection: 'east',
       strokeColor: NONE,
       strokeWidth: 1,
       dashed: false,
diff --git a/packages/core/src/view/canvas/SvgCanvas2D.ts b/packages/core/src/view/canvas/SvgCanvas2D.ts
index e7798b4b9e..1413c3976e 100644
--- a/packages/core/src/view/canvas/SvgCanvas2D.ts
+++ b/packages/core/src/view/canvas/SvgCanvas2D.ts
@@ -24,7 +24,6 @@ import {
   ABSOLUTE_LINE_HEIGHT,
   DEFAULT_FONTFAMILY,
   DEFAULT_FONTSIZE,
-  DIRECTION,
   FONT,
   LINE_HEIGHT,
   NONE,
@@ -514,18 +513,18 @@ class SvgCanvas2D extends AbstractCanvas2D {
     // Wrong gradient directions possible?
     let dir = null;
 
-    if (direction == null || direction === DIRECTION.SOUTH) {
+    if (direction == null || direction === 'south') {
       dir = 's';
-    } else if (direction === DIRECTION.EAST) {
+    } else if (direction === 'east') {
       dir = 'e';
     } else {
       const tmp = start;
       start = end;
       end = tmp;
 
-      if (direction === DIRECTION.NORTH) {
+      if (direction === 'north') {
         dir = 's';
-      } else if (direction === DIRECTION.WEST) {
+      } else if (direction === 'west') {
         dir = 'e';
       }
     }
@@ -597,13 +596,13 @@ class SvgCanvas2D extends AbstractCanvas2D {
     gradient.setAttribute('x2', '0%');
     gradient.setAttribute('y2', '0%');
 
-    if (direction == null || direction === DIRECTION.SOUTH) {
+    if (direction == null || direction === 'south') {
       gradient.setAttribute('y2', '100%');
-    } else if (direction === DIRECTION.EAST) {
+    } else if (direction === 'east') {
       gradient.setAttribute('x2', '100%');
-    } else if (direction === DIRECTION.NORTH) {
+    } else if (direction === 'north') {
       gradient.setAttribute('y1', '100%');
-    } else if (direction === DIRECTION.WEST) {
+    } else if (direction === 'west') {
       gradient.setAttribute('x1', '100%');
     }
 
diff --git a/packages/core/src/view/geometry/Shape.ts b/packages/core/src/view/geometry/Shape.ts
index 9d22df1df7..8b4f3dcb43 100644
--- a/packages/core/src/view/geometry/Shape.ts
+++ b/packages/core/src/view/geometry/Shape.ts
@@ -20,7 +20,6 @@ import Rectangle from './Rectangle';
 import { isNullish } from '../../internal/utils';
 import { getBoundingBox, getDirectedBounds, mod } from '../../util/mathUtils';
 import {
-  DIRECTION,
   LINE_ARCSIZE,
   NONE,
   NS_SVG,
@@ -102,7 +101,7 @@ class Shape {
 
   gradient: ColorValue = NONE;
 
-  gradientDirection: DirectionValue = DIRECTION.EAST;
+  gradientDirection: DirectionValue = 'east';
 
   fillOpacity = 100;
 
@@ -122,7 +121,7 @@ class Shape {
 
   endArrow: ArrowValue | string = NONE;
 
-  direction: DirectionValue = DIRECTION.EAST;
+  direction: DirectionValue = 'east';
 
   flipH = false;
 
@@ -259,7 +258,7 @@ class Shape {
 
   indicatorGradientColor: ColorValue = NONE;
 
-  indicatorDirection: DirectionValue = DIRECTION.EAST;
+  indicatorDirection: DirectionValue = 'east';
 
   indicatorImageSrc: string | null = null;
 
@@ -373,13 +372,13 @@ class Shape {
    * change the rectangle in-place. This implementation returns the given rect.
    */
   getLabelBounds(rect: Rectangle) {
-    const d = this.style?.direction ?? DIRECTION.EAST;
+    const d = this.style?.direction ?? 'east';
     let bounds = rect.clone();
 
     // Normalizes argument for getLabelMargins hook
     if (
-      d !== DIRECTION.SOUTH &&
-      d !== DIRECTION.NORTH &&
+      d !== 'south' &&
+      d !== 'north' &&
       this.state &&
       this.state.text &&
       this.state.text.isPaintBoundsInverted()
@@ -911,13 +910,13 @@ class Shape {
 
     this.fill = NONE;
     this.gradient = NONE;
-    this.gradientDirection = DIRECTION.EAST;
+    this.gradientDirection = 'east';
     this.stroke = NONE;
     this.startSize = 1;
     this.endSize = 1;
     this.startArrow = NONE;
     this.endArrow = NONE;
-    this.direction = DIRECTION.EAST;
+    this.direction = 'east';
 
     this.isShadow = false;
     this.isDashed = false;
@@ -979,7 +978,7 @@ class Shape {
       this.flipH = !!this.style.flipH;
       this.flipV = !!this.style.flipV;
 
-      if (this.direction === DIRECTION.NORTH || this.direction === DIRECTION.SOUTH) {
+      if (this.direction === 'north' || this.direction === 'south') {
         const tmp = this.flipH;
         this.flipH = this.flipV;
         this.flipV = tmp;
@@ -1065,8 +1064,7 @@ class Shape {
 
     const bb = this.bounds.clone();
     if (
-      (this.stencil &&
-        (this.direction === DIRECTION.NORTH || this.direction === DIRECTION.SOUTH)) ||
+      (this.stencil && (this.direction === 'north' || this.direction === 'south')) ||
       this.isPaintBoundsInverted()
     ) {
       bb.rotate90();
@@ -1093,10 +1091,7 @@ class Shape {
    */
   isPaintBoundsInverted() {
     // Stencil implements inversion via aspect
-    return (
-      !this.stencil &&
-      (this.direction === DIRECTION.NORTH || this.direction === DIRECTION.SOUTH)
-    );
+    return !this.stencil && (this.direction === 'north' || this.direction === 'south');
   }
 
   /**
@@ -1125,11 +1120,11 @@ class Shape {
   getShapeRotation() {
     let rot = this.getRotation();
 
-    if (this.direction === DIRECTION.NORTH) {
+    if (this.direction === 'north') {
       rot += 270;
-    } else if (this.direction === DIRECTION.WEST) {
+    } else if (this.direction === 'west') {
       rot += 180;
-    } else if (this.direction === DIRECTION.SOUTH) {
+    } else if (this.direction === 'south') {
       rot += 90;
     }
 
diff --git a/packages/core/src/view/geometry/node/SwimlaneShape.ts b/packages/core/src/view/geometry/node/SwimlaneShape.ts
index 00a7173072..7435d874ab 100644
--- a/packages/core/src/view/geometry/node/SwimlaneShape.ts
+++ b/packages/core/src/view/geometry/node/SwimlaneShape.ts
@@ -19,7 +19,6 @@ import Shape from '../Shape';
 import Rectangle from '../Rectangle';
 import {
   DEFAULT_STARTSIZE,
-  DIRECTION,
   LINE_ARCSIZE,
   NONE,
   RECTANGLE_ROUNDING_FACTOR,
@@ -93,16 +92,15 @@ class SwimlaneShape extends Shape {
     const flipV = this.style?.flipV ?? false;
 
     // East is default
-    const shapeVertical =
-      this.direction === DIRECTION.NORTH || this.direction === DIRECTION.SOUTH;
+    const shapeVertical = this.direction === 'north' || this.direction === 'south';
     const realHorizontal = horizontal == !shapeVertical;
 
     const realFlipH =
       !realHorizontal &&
-      flipH !== (this.direction === DIRECTION.SOUTH || this.direction === DIRECTION.WEST);
+      flipH !== (this.direction === 'south' || this.direction === 'west');
     const realFlipV =
       realHorizontal &&
-      flipV !== (this.direction === DIRECTION.SOUTH || this.direction === DIRECTION.WEST);
+      flipV !== (this.direction === 'south' || this.direction === 'west');
 
     // Shape is horizontal
     if (!shapeVertical) {
diff --git a/packages/core/src/view/geometry/node/TextShape.ts b/packages/core/src/view/geometry/node/TextShape.ts
index 53df8fd36a..455ed764ac 100644
--- a/packages/core/src/view/geometry/node/TextShape.ts
+++ b/packages/core/src/view/geometry/node/TextShape.ts
@@ -26,7 +26,6 @@ import {
   DIALECT,
   FONT,
   NONE,
-  TEXT_DIRECTION,
   WORD_WRAP,
   LINE_HEIGHT,
 } from '../../../util/Constants';
@@ -273,12 +272,12 @@ class TextShape extends Shape {
 
       let dir: TextDirectionValue = this.textDirection;
 
-      if (dir === TEXT_DIRECTION.AUTO && !realHtml) {
+      if (dir === 'auto' && !realHtml) {
         dir = this.getAutoDirection();
       }
 
-      if (dir !== TEXT_DIRECTION.LTR && dir !== TEXT_DIRECTION.RTL) {
-        dir = TEXT_DIRECTION.DEFAULT;
+      if (dir !== 'ltr' && dir !== 'rtl') {
+        dir = '';
       }
 
       c.text(
@@ -398,12 +397,13 @@ class TextShape extends Shape {
   }
 
   /**
-   * Used to determine the automatic text direction. Returns
-   * {@link Constants#TEXT_DIRECTION_LTR} or {@link Constants#TEXT_DIRECTION_RTL}
-   * depending on the contents of <value>. This is not invoked for HTML, wrapped
-   * content or if <value> is a DOM node.
+   * Used to determine the automatic text direction.
+   *
+   * Returns 'ltr' or 'rtl' depending on the contents of {@link value}.
+   *
+   * This is not invoked for HTML, wrapped content or if {@link value} is a DOM node.
    */
-  getAutoDirection() {
+  getAutoDirection(): TextDirectionValue {
     // Looks for strong (directional) characters
     const tmp =
       /[A-Za-z\u05d0-\u065f\u066a-\u06ef\u06fa-\u07ff\ufb1d-\ufdff\ufe70-\ufefc]/.exec(
@@ -411,9 +411,7 @@ class TextShape extends Shape {
       );
 
     // Returns the direction defined by the character
-    return tmp && tmp.length > 0 && tmp[0] > 'z'
-      ? TEXT_DIRECTION.RTL
-      : TEXT_DIRECTION.LTR;
+    return tmp && tmp.length > 0 && tmp[0] > 'z' ? 'rtl' : 'ltr';
   }
 
   /**
@@ -771,11 +769,11 @@ class TextShape extends Shape {
       if (divs.length > 0) {
         let dir = this.textDirection;
 
-        if (dir === TEXT_DIRECTION.AUTO && this.dialect !== DIALECT.STRICTHTML) {
+        if (dir === 'auto' && this.dialect !== DIALECT.STRICTHTML) {
           dir = this.getAutoDirection();
         }
 
-        if (dir === TEXT_DIRECTION.LTR || dir === TEXT_DIRECTION.RTL) {
+        if (dir === 'ltr' || dir === 'rtl') {
           divs[divs.length - 1].setAttribute('dir', dir);
         } else {
           divs[divs.length - 1].removeAttribute('dir');
diff --git a/packages/core/src/view/geometry/stencil/StencilShape.ts b/packages/core/src/view/geometry/stencil/StencilShape.ts
index f7b230ce3b..0aed552929 100644
--- a/packages/core/src/view/geometry/stencil/StencilShape.ts
+++ b/packages/core/src/view/geometry/stencil/StencilShape.ts
@@ -19,12 +19,7 @@ limitations under the License.
 import ConnectionConstraint from '../../other/ConnectionConstraint';
 import Rectangle from '../Rectangle';
 import Shape from '../Shape';
-import {
-  DIRECTION,
-  NONE,
-  RECTANGLE_ROUNDING_FACTOR,
-  TEXT_DIRECTION,
-} from '../../../util/Constants';
+import { NONE, RECTANGLE_ROUNDING_FACTOR } from '../../../util/Constants';
 import StencilShapeRegistry from './StencilShapeRegistry';
 import { getChildNodes, getTextContent } from '../../../util/domUtils';
 import Point from '../Point';
@@ -315,7 +310,7 @@ class StencilShape extends Shape {
     let sx = w / this.w0;
     let sy = h / this.h0;
 
-    const inverse = direction === DIRECTION.NORTH || direction === DIRECTION.SOUTH;
+    const inverse = direction === 'north' || direction === 'south';
 
     if (inverse) {
       sy = w / this.h0;
@@ -561,7 +556,7 @@ class StencilShape extends Shape {
             'auto',
             false,
             rotation,
-            TEXT_DIRECTION.AUTO
+            'auto'
           );
         }
       } else if (name === 'include-shape') {
diff --git a/packages/core/src/view/layout/HierarchicalLayout.ts b/packages/core/src/view/layout/HierarchicalLayout.ts
index 8a12b348ed..7b611b36ad 100644
--- a/packages/core/src/view/layout/HierarchicalLayout.ts
+++ b/packages/core/src/view/layout/HierarchicalLayout.ts
@@ -17,7 +17,7 @@ limitations under the License.
 */
 
 import GraphLayout from './GraphLayout';
-import { DIRECTION } from '../../util/Constants';
+import type { DirectionValue } from '../../types';
 import HierarchicalEdgeStyle from './datatypes/HierarchicalEdgeStyle';
 import Dictionary from '../../util/Dictionary';
 import GraphHierarchyModel from './hierarchical/GraphHierarchyModel';
@@ -39,12 +39,12 @@ class HierarchicalLayout extends GraphLayout {
    * Constructs a new hierarchical layout algorithm.
    *
    * @param graph Reference to the enclosing {@link AbstractGraph}.
-   * @param orientation Optional constant that defines the orientation of this layout. Default is {@link DIRECTION.NORTH}.
+   * @param orientation Optional constant that defines the orientation of this layout. Default is 'north'.
    * @param deterministic Optional boolean that specifies if this layout should be deterministic. Default is true.
    */
   constructor(
     graph: AbstractGraph,
-    orientation: DIRECTION = DIRECTION.NORTH,
+    orientation: DirectionValue = 'north',
     deterministic = true
   ) {
     super(graph);
@@ -109,9 +109,9 @@ class HierarchicalLayout extends GraphLayout {
 
   /**
    * The position of the root node(s) relative to the laid out graph in.
-   * Default is <mxConstants.DIRECTION.NORTH>.
+   * @default north
    */
-  orientation: DIRECTION = DIRECTION.NORTH;
+  orientation: DirectionValue = 'north';
 
   /**
    * Whether or not to perform local optimisations and iterate multiple times
diff --git a/packages/core/src/view/layout/SwimlaneLayout.ts b/packages/core/src/view/layout/SwimlaneLayout.ts
index 773ab320df..72dc1483ee 100644
--- a/packages/core/src/view/layout/SwimlaneLayout.ts
+++ b/packages/core/src/view/layout/SwimlaneLayout.ts
@@ -17,7 +17,7 @@ limitations under the License.
 */
 
 import GraphLayout from './GraphLayout';
-import { DIRECTION } from '../../util/Constants';
+import type { DirectionValue } from '../../types';
 import HierarchicalEdgeStyle from './datatypes/HierarchicalEdgeStyle';
 import Dictionary from '../../util/Dictionary';
 import Rectangle from '../geometry/Rectangle';
@@ -41,12 +41,16 @@ class SwimlaneLayout extends GraphLayout {
    * Constructs a new hierarchical layout algorithm.
    *
    * @param graph Reference to the enclosing {@link AbstractGraph}.
-   * @param orientation Optional constant that defines the orientation of this layout. Default is {@link DIRECTION.NORTH}.
-   * @param deterministic Optional boolean that specifies if this layout should be deterministic. Default is true.
-   */
-  constructor(graph: AbstractGraph, orientation: DIRECTION | null, deterministic = true) {
+   * @param orientation Optional constant that defines the orientation of this layout. Default is 'north'.
+   * @param deterministic Optional boolean that specifies if this layout should be deterministic. Default is `true`.
+   */
+  constructor(
+    graph: AbstractGraph,
+    orientation: DirectionValue | null,
+    deterministic = true
+  ) {
     super(graph);
-    this.orientation = orientation != null ? orientation : DIRECTION.NORTH;
+    this.orientation = orientation != null ? orientation : 'north';
     this.deterministic = deterministic != null ? deterministic : true;
   }
 
@@ -117,9 +121,9 @@ class SwimlaneLayout extends GraphLayout {
 
   /**
    * The position of the root node(s) relative to the laid out graph in.
-   * Default is {@link Constants#DIRECTION_NORTH}.
+   * @default 'north'.
    */
-  orientation: DIRECTION = DIRECTION.NORTH;
+  orientation: DirectionValue = 'north';
 
   /**
    * Whether or not to perform local optimisations and iterate multiple times
diff --git a/packages/core/src/view/layout/hierarchical/CoordinateAssignment.ts b/packages/core/src/view/layout/hierarchical/CoordinateAssignment.ts
index 62feb72f53..573f598ccb 100644
--- a/packages/core/src/view/layout/hierarchical/CoordinateAssignment.ts
+++ b/packages/core/src/view/layout/hierarchical/CoordinateAssignment.ts
@@ -17,7 +17,7 @@ limitations under the License.
 */
 
 import HierarchicalLayoutStage from './HierarchicalLayoutStage';
-import { DIRECTION } from '../../../util/Constants';
+import type { DirectionValue } from '../../../types';
 import { GlobalConfig } from '../../../util/config';
 import WeightedCellSorter from '../util/WeightedCellSorter';
 import Dictionary from '../../../util/Dictionary';
@@ -55,7 +55,7 @@ class CoordinateAssignment extends HierarchicalLayoutStage {
     layout: HierarchicalLayout | SwimlaneLayout,
     intraCellSpacing = 30,
     interRankCellSpacing = 100,
-    orientation: DIRECTION,
+    orientation: DirectionValue,
     initialX: number,
     parallelEdgeSpacing = 10
   ) {
@@ -128,10 +128,10 @@ class CoordinateAssignment extends HierarchicalLayoutStage {
   jettyPositions: { [key: string]: number[] } | null = null;
 
   /**
-   * The position of the root ( start ) node(s) relative to the rest of the
-   * laid out graph. Default is <mxConstants.DIRECTION.NORTH>.
+   * The position of the root ( start ) node(s) relative to the rest of the laid out graph.
+   * @default 'north'
    */
-  orientation: DIRECTION = DIRECTION.NORTH;
+  orientation: DirectionValue = 'north';
 
   /**
    * The minimum x position node placement starts at
@@ -710,10 +710,7 @@ class CoordinateAssignment extends HierarchicalLayoutStage {
         const bounds = this.layout.getVertexBounds((<GraphHierarchyNode>node).cell);
 
         if (bounds != null) {
-          if (
-            this.orientation === DIRECTION.NORTH ||
-            this.orientation === DIRECTION.SOUTH
-          ) {
+          if (this.orientation === 'north' || this.orientation === 'south') {
             node.width = bounds.width;
             node.height = bounds.height;
           } else {
@@ -787,10 +784,7 @@ class CoordinateAssignment extends HierarchicalLayoutStage {
           const bounds = this.layout.getVertexBounds((<GraphHierarchyNode>node).cell);
 
           if (bounds != null) {
-            if (
-              this.orientation === DIRECTION.NORTH ||
-              this.orientation === DIRECTION.SOUTH
-            ) {
+            if (this.orientation === 'north' || this.orientation === 'south') {
               node.width = bounds.width;
               node.height = bounds.height;
             } else {
@@ -840,7 +834,7 @@ class CoordinateAssignment extends HierarchicalLayoutStage {
         maxCellHeight / 2.0 + lastRankMaxCellHeight / 2.0 + this.interRankCellSpacing;
       lastRankMaxCellHeight = maxCellHeight;
 
-      if (this.orientation === DIRECTION.NORTH || this.orientation === DIRECTION.WEST) {
+      if (this.orientation === 'north' || this.orientation === 'west') {
         y += distanceToNextRank;
       } else {
         y -= distanceToNextRank;
@@ -1227,8 +1221,7 @@ class CoordinateAssignment extends HierarchicalLayoutStage {
         ? (<GraphHierarchyNode>cell.target).cell
         : (<GraphHierarchyNode>cell.source).cell;
       const { graph } = this.layout;
-      const layoutReversed =
-        this.orientation === DIRECTION.EAST || this.orientation === DIRECTION.SOUTH;
+      const layoutReversed = this.orientation === 'east' || this.orientation === 'south';
 
       for (let i = 0; i < cell.edges.length; i += 1) {
         const realEdge = cell.edges[i];
@@ -1287,10 +1280,7 @@ class CoordinateAssignment extends HierarchicalLayoutStage {
             }
           }
 
-          if (
-            this.orientation === DIRECTION.NORTH ||
-            this.orientation === DIRECTION.SOUTH
-          ) {
+          if (this.orientation === 'north' || this.orientation === 'south') {
             newPoints.push(new Point(x, y));
             if (this.layout.edgeStyle === HierarchicalEdgeStyle.CURVE) {
               newPoints.push(new Point(x, y + jetty));
@@ -1342,10 +1332,7 @@ class CoordinateAssignment extends HierarchicalLayoutStage {
             bottomChannelY = tmp;
           }
 
-          if (
-            this.orientation === DIRECTION.NORTH ||
-            this.orientation === DIRECTION.SOUTH
-          ) {
+          if (this.orientation === 'north' || this.orientation === 'south') {
             newPoints.push(new Point(positionX, topChannelY));
             newPoints.push(new Point(positionX, bottomChannelY));
           } else {
@@ -1393,10 +1380,7 @@ class CoordinateAssignment extends HierarchicalLayoutStage {
             }
           }
 
-          if (
-            this.orientation === DIRECTION.NORTH ||
-            this.orientation === DIRECTION.SOUTH
-          ) {
+          if (this.orientation === 'north' || this.orientation === 'south') {
             if (this.layout.edgeStyle === HierarchicalEdgeStyle.CURVE) {
               newPoints.push(new Point(x, y - jetty));
             }
@@ -1449,7 +1433,7 @@ class CoordinateAssignment extends HierarchicalLayoutStage {
       positionY + cell.height
     );
 
-    if (this.orientation === DIRECTION.NORTH || this.orientation === DIRECTION.SOUTH) {
+    if (this.orientation === 'north' || this.orientation === 'south') {
       this.layout.setVertexLocation(realCell, positionX, positionY);
     } else {
       this.layout.setVertexLocation(realCell, positionY, positionX);
diff --git a/packages/core/src/view/mixins/CellsMixin.ts b/packages/core/src/view/mixins/CellsMixin.ts
index 86278df0d3..3931ce166b 100644
--- a/packages/core/src/view/mixins/CellsMixin.ts
+++ b/packages/core/src/view/mixins/CellsMixin.ts
@@ -28,7 +28,7 @@ import {
   setCellStyleFlags,
   setCellStyles,
 } from '../../util/styleUtils';
-import { DEFAULT_FONTSIZE, DEFAULT_IMAGESIZE, DIRECTION } from '../../util/Constants';
+import { DEFAULT_FONTSIZE, DEFAULT_IMAGESIZE } from '../../util/Constants';
 import Geometry from '../geometry/Geometry';
 import EventObject from '../event/EventObject';
 import InternalEvent from '../event/InternalEvent';
@@ -1411,21 +1411,21 @@ export const CellsMixin: PartialType = {
           if (this.isSwimlane(parent)) {
             const size = this.getStartSize(parent);
             const style = this.getCurrentCellStyle(parent);
-            const dir = style.direction ?? DIRECTION.EAST;
+            const dir = style.direction ?? 'east';
             const flipH = style.flipH ?? false;
             const flipV = style.flipV ?? false;
 
-            if (dir === DIRECTION.SOUTH || dir === DIRECTION.NORTH) {
+            if (dir === 'south' || dir === 'north') {
               const tmp = size.width;
               size.width = size.height;
               size.height = tmp;
             }
 
             if (
-              (dir === DIRECTION.EAST && !flipV) ||
-              (dir === DIRECTION.NORTH && !flipH) ||
-              (dir === DIRECTION.WEST && flipV) ||
-              (dir === DIRECTION.SOUTH && flipH)
+              (dir === 'east' && !flipV) ||
+              (dir === 'north' && !flipH) ||
+              (dir === 'west' && flipV) ||
+              (dir === 'south' && flipH)
             ) {
               x = size.width;
               y = size.height;
diff --git a/packages/core/src/view/mixins/ConnectionsMixin.ts b/packages/core/src/view/mixins/ConnectionsMixin.ts
index 0f1f94a99c..14c706167e 100644
--- a/packages/core/src/view/mixins/ConnectionsMixin.ts
+++ b/packages/core/src/view/mixins/ConnectionsMixin.ts
@@ -16,7 +16,6 @@ limitations under the License.
 
 import Point from '../geometry/Point';
 import ConnectionConstraint from '../other/ConnectionConstraint';
-import { DIRECTION } from '../../util/Constants';
 import { getRotatedPoint, toRadians } from '../../util/mathUtils';
 import Cell from '../cell/Cell';
 import EventObject from '../event/EventObject';
@@ -90,7 +89,7 @@ export const ConnectionsMixin: PartialType = {
       const bounds = this.getView().getPerimeterBounds(terminalState);
       const direction = terminalState.style.direction;
 
-      if (direction === DIRECTION.NORTH || direction === DIRECTION.SOUTH) {
+      if (direction === 'north' || direction === 'south') {
         bounds.x += bounds.width / 2 - bounds.height / 2;
         bounds.y += bounds.height / 2 - bounds.width / 2;
         const tmp = bounds.width;
@@ -117,7 +116,7 @@ export const ConnectionsMixin: PartialType = {
         let flipH = terminalState.style.flipH;
         let flipV = terminalState.style.flipV;
 
-        if (direction === DIRECTION.NORTH || direction === DIRECTION.SOUTH) {
+        if (direction === 'north' || direction === 'south') {
           const tmp = flipH;
           flipH = flipV;
           flipV = tmp;
@@ -223,16 +222,16 @@ export const ConnectionsMixin: PartialType = {
 
       // Bounds need to be rotated by 90 degrees for further computation
       if (vertex.style.anchorPointDirection) {
-        if (direction === DIRECTION.NORTH) {
+        if (direction === 'north') {
           r1 += 270;
-        } else if (direction === DIRECTION.WEST) {
+        } else if (direction === 'west') {
           r1 += 180;
-        } else if (direction === DIRECTION.SOUTH) {
+        } else if (direction === 'south') {
           r1 += 90;
         }
 
         // Bounds need to be rotated by 90 degrees for further computation
-        if (direction === DIRECTION.NORTH || direction === DIRECTION.SOUTH) {
+        if (direction === 'north' || direction === 'south') {
           bounds.rotate90();
         }
       }
@@ -271,7 +270,7 @@ export const ConnectionsMixin: PartialType = {
           let flipH = vertex.style.flipH;
           let flipV = vertex.style.flipV;
 
-          if (direction === DIRECTION.NORTH || direction === DIRECTION.SOUTH) {
+          if (direction === 'north' || direction === 'south') {
             const temp = flipH;
             flipH = flipV;
             flipV = temp;
diff --git a/packages/core/src/view/mixins/SwimlaneMixin.ts b/packages/core/src/view/mixins/SwimlaneMixin.ts
index 980940525b..dcd268c7ad 100644
--- a/packages/core/src/view/mixins/SwimlaneMixin.ts
+++ b/packages/core/src/view/mixins/SwimlaneMixin.ts
@@ -17,7 +17,7 @@ limitations under the License.
 import Rectangle from '../geometry/Rectangle';
 import { convertPoint } from '../../util/styleUtils';
 import { mod } from '../../util/mathUtils';
-import { DEFAULT_STARTSIZE, DIRECTION } from '../../util/Constants';
+import { DEFAULT_STARTSIZE } from '../../util/Constants';
 import { getClientX, getClientY } from '../../util/EventUtils';
 import type { AbstractGraph } from '../AbstractGraph';
 import type { DirectionValue } from '../../types';
@@ -139,17 +139,17 @@ export const SwimlaneMixin: PartialType = {
   },
 
   getSwimlaneDirection(style) {
-    const dir = style.direction ?? DIRECTION.EAST;
+    const dir = style.direction ?? 'east';
     const flipH = style.flipH;
     const flipV = style.flipV;
     const h = style.horizontal ?? true;
     let n = h ? 0 : 3;
 
-    if (dir === DIRECTION.NORTH) {
+    if (dir === 'north') {
       n--;
-    } else if (dir === DIRECTION.WEST) {
+    } else if (dir === 'west') {
       n += 2;
-    } else if (dir === DIRECTION.SOUTH) {
+    } else if (dir === 'south') {
       n += 1;
     }
 
@@ -163,9 +163,7 @@ export const SwimlaneMixin: PartialType = {
       n += 2;
     }
 
-    return [DIRECTION.NORTH, DIRECTION.EAST, DIRECTION.SOUTH, DIRECTION.WEST][
-      mod(n, 4)
-    ] as DirectionValue;
+    return ['north', 'east', 'south', 'west'][mod(n, 4)] as DirectionValue;
   },
 
   getActualStartSize(swimlane, ignoreState = false) {
@@ -176,11 +174,11 @@ export const SwimlaneMixin: PartialType = {
       const size = style.startSize ?? DEFAULT_STARTSIZE;
       const dir = this.getSwimlaneDirection(style);
 
-      if (dir === DIRECTION.NORTH) {
+      if (dir === 'north') {
         result.y = size;
-      } else if (dir === DIRECTION.WEST) {
+      } else if (dir === 'west') {
         result.x = size;
-      } else if (dir === DIRECTION.SOUTH) {
+      } else if (dir === 'south') {
         result.height = size;
       } else {
         result.width = size;
diff --git a/packages/core/src/view/style/config.ts b/packages/core/src/view/style/config.ts
index 9773bc34d4..e804880487 100644
--- a/packages/core/src/view/style/config.ts
+++ b/packages/core/src/view/style/config.ts
@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { DIRECTION, ENTITY_SEGMENT } from '../../util/Constants';
+import { ENTITY_SEGMENT } from '../../util/Constants';
 import { shallowCopy } from '../../internal/clone-utils';
 import type { DirectionValue } from '../../types';
 
 /**
- * Configure the {@link EdgeStyle.EntityRelation} connector.
+ * Configure the {@link EntityRelation} connector.
  *
  * @experimental subject to change or removal. maxGraph's global configuration may be modified in the future without prior notice.
  * @since 0.15.0
@@ -49,7 +49,7 @@ export const resetEntityRelationConnectorConfig = (): void => {
 };
 
 /**
- * Configure the {@link EdgeStyle.OrthConnector}.
+ * Configure the {@link OrthConnector}.
  *
  * @experimental subject to change or removal. maxGraph's global configuration may be modified in the future without prior notice.
  * @since 0.16.0
@@ -123,8 +123,12 @@ export type ManhattanConnectorConfigType = {
   step: number;
 };
 
+const allDirections = (): DirectionValue[] => {
+  return ['north', 'south', 'east', 'west'];
+};
+
 /**
- * Configure the {@link EdgeStyle.ManhattanConnector}.
+ * Configure the {@link ManhattanConnector}.
  *
  * @experimental subject to change or removal. maxGraph's global configuration may be modified in the future without prior notice.
  * @since 0.16.0
@@ -134,8 +138,8 @@ export type ManhattanConnectorConfigType = {
 export const ManhattanConnectorConfig: ManhattanConnectorConfigType = {
   maxAllowedDirectionChange: 90,
   maxLoops: 2000,
-  endDirections: Object.values(DIRECTION),
-  startDirections: Object.values(DIRECTION),
+  endDirections: allDirections(),
+  startDirections: allDirections(),
   step: 12,
 };
 
diff --git a/packages/core/src/view/style/edge/Loop.ts b/packages/core/src/view/style/edge/Loop.ts
index 837f7813a3..ba1f258a52 100644
--- a/packages/core/src/view/style/edge/Loop.ts
+++ b/packages/core/src/view/style/edge/Loop.ts
@@ -18,7 +18,6 @@ limitations under the License.
 
 import CellState from '../../cell/CellState';
 import Point from '../../geometry/Point';
-import { DIRECTION } from '../../../util/Constants';
 import { contains } from '../../../util/mathUtils';
 
 import type { EdgeStyleFunction } from '../../../types';
@@ -70,9 +69,9 @@ export const Loop: EdgeStyleFunction = (
     let dy = 0;
 
     const seg = (state.style.segment ?? graph.gridSize) * view.scale;
-    const dir = state.style?.direction ?? DIRECTION.WEST;
+    const dir = state.style?.direction ?? 'west';
 
-    if (dir === DIRECTION.NORTH || dir === DIRECTION.SOUTH) {
+    if (dir === 'north' || dir === 'south') {
       x = view.getRoutingCenterX(source);
       dx = seg;
     } else {
@@ -84,11 +83,11 @@ export const Loop: EdgeStyleFunction = (
       if (pt != null) {
         x = pt.x;
         dy = Math.max(Math.abs(y - pt.y), dy);
-      } else if (dir === DIRECTION.NORTH) {
+      } else if (dir === 'north') {
         y = source.y - 2 * dx;
-      } else if (dir === DIRECTION.SOUTH) {
+      } else if (dir === 'south') {
         y = source.y + source.height + 2 * dx;
-      } else if (dir === DIRECTION.EAST) {
+      } else if (dir === 'east') {
         x = source.x - 2 * dy;
       } else {
         x = source.x + source.width + 2 * dy;
diff --git a/packages/core/src/view/style/edge/Manhattan.ts b/packages/core/src/view/style/edge/Manhattan.ts
index 0f2ec4a99d..9653bca253 100644
--- a/packages/core/src/view/style/edge/Manhattan.ts
+++ b/packages/core/src/view/style/edge/Manhattan.ts
@@ -20,7 +20,6 @@ import Point from '../../geometry/Point';
 import Rectangle from '../../geometry/Rectangle';
 import { ManhattanConnectorConfig } from '../config';
 import Geometry from '../../geometry/Geometry';
-import { DIRECTION } from '../../../util/Constants';
 import { OrthogonalConnector } from './Orthogonal';
 import { SegmentConnector } from './Segment';
 
@@ -394,11 +393,9 @@ export const ManhattanConnector: EdgeStyleFunction = (
     const y = isSourceCell ? edgeState.style.exitY : edgeState.style.entryY;
     const onlyHorizontalDirections = isSourceCell
       ? ManhattanConnectorConfig.startDirections.every(
-          (d) => d != DIRECTION.NORTH && d != DIRECTION.SOUTH
+          (d) => d != 'north' && d != 'south'
         )
-      : ManhattanConnectorConfig.endDirections.every(
-          (d) => d != DIRECTION.NORTH && d != DIRECTION.SOUTH
-        );
+      : ManhattanConnectorConfig.endDirections.every((d) => d != 'north' && d != 'south');
 
     if (y != undefined && onlyHorizontalDirections) {
       const cellHeight = cellBounds?.height || 0;
@@ -410,12 +407,8 @@ export const ManhattanConnector: EdgeStyleFunction = (
 
     const x = isSourceCell ? edgeState.style.exitX : edgeState.style.entryX;
     const onlyVerticalDirections = isSourceCell
-      ? ManhattanConnectorConfig.startDirections.every(
-          (d) => d != DIRECTION.WEST && d != DIRECTION.EAST
-        )
-      : ManhattanConnectorConfig.endDirections.every(
-          (d) => d != DIRECTION.WEST && d != DIRECTION.EAST
-        );
+      ? ManhattanConnectorConfig.startDirections.every((d) => d != 'west' && d != 'east')
+      : ManhattanConnectorConfig.endDirections.every((d) => d != 'west' && d != 'east');
     if (x != undefined && onlyVerticalDirections) {
       const cellWidth = cellBounds?.width || 0;
       point.x =
diff --git a/packages/core/src/view/style/perimeter/HexagonPerimeter.ts b/packages/core/src/view/style/perimeter/HexagonPerimeter.ts
index f2d49dce4a..59813a317a 100644
--- a/packages/core/src/view/style/perimeter/HexagonPerimeter.ts
+++ b/packages/core/src/view/style/perimeter/HexagonPerimeter.ts
@@ -20,7 +20,6 @@ import type Rectangle from '../../geometry/Rectangle';
 import type CellState from '../../cell/CellState';
 import Point from '../../geometry/Point';
 import type { PerimeterFunction } from '../../../types';
-import { DIRECTION } from '../../../util/Constants';
 import { intersection } from '../../../util/mathUtils';
 
 /**
@@ -51,8 +50,8 @@ export const HexagonPerimeter: PerimeterFunction = (
 
   let result: Point | null = new Point(cx, cy);
 
-  const direction = vertex?.style?.direction ?? DIRECTION.EAST;
-  const vertical = direction === DIRECTION.NORTH || direction === DIRECTION.SOUTH;
+  const direction = vertex?.style?.direction ?? 'east';
+  const vertical = direction === 'north' || direction === 'south';
   let a = new Point();
   let b = new Point();
 
diff --git a/packages/core/src/view/style/perimeter/TrianglePerimeter.ts b/packages/core/src/view/style/perimeter/TrianglePerimeter.ts
index 08c2169518..6b63391b46 100644
--- a/packages/core/src/view/style/perimeter/TrianglePerimeter.ts
+++ b/packages/core/src/view/style/perimeter/TrianglePerimeter.ts
@@ -20,7 +20,6 @@ import type Rectangle from '../../geometry/Rectangle';
 import type CellState from '../../cell/CellState';
 import Point from '../../geometry/Point';
 import type { PerimeterFunction } from '../../../types';
-import { DIRECTION } from '../../../util/Constants';
 import { intersection } from '../../../util/mathUtils';
 
 /**
@@ -35,7 +34,7 @@ export const TrianglePerimeter: PerimeterFunction = (
   orthogonal = false
 ): Point | null => {
   const direction = vertex != null ? vertex.style.direction : null;
-  const vertical = direction === DIRECTION.NORTH || direction === DIRECTION.SOUTH;
+  const vertical = direction === 'north' || direction === 'south';
 
   const { x } = bounds;
   const { y } = bounds;
@@ -49,14 +48,14 @@ export const TrianglePerimeter: PerimeterFunction = (
   let corner = new Point(x + w, cy);
   let end = new Point(x, y + h);
 
-  if (direction === DIRECTION.NORTH) {
+  if (direction === 'north') {
     start = end;
     corner = new Point(cx, y);
     end = new Point(x + w, y + h);
-  } else if (direction === DIRECTION.SOUTH) {
+  } else if (direction === 'south') {
     corner = new Point(cx, y + h);
     end = new Point(x + w, y);
-  } else if (direction === DIRECTION.WEST) {
+  } else if (direction === 'west') {
     start = new Point(x + w, y);
     corner = new Point(x, cy);
     end = new Point(x + w, y + h);
@@ -70,7 +69,7 @@ export const TrianglePerimeter: PerimeterFunction = (
 
   let base = false;
 
-  if (direction === DIRECTION.NORTH || direction === DIRECTION.WEST) {
+  if (direction === 'north' || direction === 'west') {
     base = alpha > -t && alpha < t;
   } else {
     base = alpha < -Math.PI + t || alpha > Math.PI - t;
@@ -89,11 +88,11 @@ export const TrianglePerimeter: PerimeterFunction = (
       } else {
         result = new Point(start.x, next.y);
       }
-    } else if (direction === DIRECTION.NORTH) {
+    } else if (direction === 'north') {
       result = new Point(x + w / 2 + (h * Math.tan(alpha)) / 2, y + h);
-    } else if (direction === DIRECTION.SOUTH) {
+    } else if (direction === 'south') {
       result = new Point(x + w / 2 - (h * Math.tan(alpha)) / 2, y);
-    } else if (direction === DIRECTION.WEST) {
+    } else if (direction === 'west') {
       result = new Point(x + w, y + h / 2 + (w * Math.tan(alpha)) / 2);
     } else {
       result = new Point(x, y + h / 2 - (w * Math.tan(alpha)) / 2);
@@ -103,11 +102,11 @@ export const TrianglePerimeter: PerimeterFunction = (
       const pt = new Point(cx, cy);
 
       if (next.y >= y && next.y <= y + h) {
-        pt.x = vertical ? cx : direction === DIRECTION.WEST ? x + w : x;
+        pt.x = vertical ? cx : direction === 'west' ? x + w : x;
         pt.y = next.y;
       } else if (next.x >= x && next.x <= x + w) {
         pt.x = next.x;
-        pt.y = !vertical ? cy : direction === DIRECTION.NORTH ? y + h : y;
+        pt.y = !vertical ? cy : direction === 'north' ? y + h : y;
       }
 
       // Compute angle
diff --git a/packages/html/stories/AutoLayout.stories.ts b/packages/html/stories/AutoLayout.stories.ts
index 09cde25c8c..d0d5b8f546 100644
--- a/packages/html/stories/AutoLayout.stories.ts
+++ b/packages/html/stories/AutoLayout.stories.ts
@@ -22,7 +22,6 @@ import {
   CellRenderer,
   EdgeHandler,
   HierarchicalLayout,
-  constants,
   CellOverlay,
   getDefaultPlugins,
   ImageBox,
@@ -157,7 +156,7 @@ const Template = ({ label, ...args }: Record<string, string>) => {
   // is normally the first child of the root (ie. layer 0).
   const parent = graph.getDefaultParent();
 
-  const layout = new HierarchicalLayout(graph, constants.DIRECTION.WEST);
+  const layout = new HierarchicalLayout(graph, 'west');
 
   let vertex1: Cell;
   const executeLayout = (change?: () => void, post?: () => void) => {

From 928d64ab4e35512b7ee4fa8956fe7dee6be31f14 Mon Sep 17 00:00:00 2001
From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com>
Date: Sat, 3 May 2025 19:46:41 +0200
Subject: [PATCH 2/2] fix types in mathUtils test

---
 packages/core/__tests__/util/mathUtils.test.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/core/__tests__/util/mathUtils.test.ts b/packages/core/__tests__/util/mathUtils.test.ts
index cd25bb9faa..db4c9b2039 100644
--- a/packages/core/__tests__/util/mathUtils.test.ts
+++ b/packages/core/__tests__/util/mathUtils.test.ts
@@ -18,7 +18,7 @@ import { describe, expect, test } from '@jest/globals';
 import { getPortConstraints, isNumeric } from '../../src/util/mathUtils';
 import { DIRECTION_MASK } from '../../src/util/Constants';
 import CellState from '../../src/view/cell/CellState';
-import { DirectionValue } from '../../src';
+import type { DirectionValue } from '../../src';
 
 describe('getPortConstraints', () => {
   const defaultMask = DIRECTION_MASK.NONE;
@@ -73,12 +73,12 @@ describe('getPortConstraints', () => {
     );
   });
 
-  test.each([
+  test.each<[DirectionValue, (typeof DIRECTION_MASK)[keyof typeof DIRECTION_MASK]]>([
     ['north', DIRECTION_MASK.NORTH],
     ['south', DIRECTION_MASK.SOUTH],
     ['east', DIRECTION_MASK.EAST],
     ['west', DIRECTION_MASK.WEST],
-  ])('handles single direction %s', (direction: DirectionValue, expectedMask: number) => {
+  ])('handles single direction %s', (direction, expectedMask) => {
     const terminal = new CellState();
     terminal.style = { portConstraint: direction };
     const edge = new CellState();