maxGraph · tbouffard · May 3, 2025 · May 3, 2025 · May 3, 2025 · May 3, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,10 +14,12 @@ _**Note:** Yet to be released breaking changes appear here._
   - `constants.ALIGN` --> `AlignValue` and `VAlignValue`
   - `constants.DIALECT` --> `DialectValue`
   - `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
@@ -16,9 +16,9 @@ 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';
+import type { DirectionValue } from '../../src';
 
 describe('getPortConstraints', () => {
   const defaultMask = DIRECTION_MASK.NONE;
@@ -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,19 +66,19 @@ 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
     );
   });
 
-  test.each([
-    [DIRECTION.NORTH, DIRECTION_MASK.NORTH],
-    [DIRECTION.SOUTH, DIRECTION_MASK.SOUTH],
-    [DIRECTION.EAST, DIRECTION_MASK.EAST],
-    [DIRECTION.WEST, DIRECTION_MASK.WEST],
-  ])('handles single direction %s', (direction: DirectionValue, expectedMask: number) => {
+  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, expectedMask) => {
     const terminal = new CellState();
     terminal.style = { portConstraint: direction };
     const edge = new CellState();
@@ -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
@@ -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
@@ -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
@@ -425,25 +425,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
@@ -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,17 +388,17 @@ 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;
     m.width = tmp;
   }
 
   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
@@ -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
@@ -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%');
     }