maxGraph · tbouffard · May 3, 2025 · May 3, 2025 · May 3, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,9 +11,11 @@ _**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.EDGESTYLE` --> `EdgeStyleValue` 
   - `constants.PERIMETER` --> `PerimeterValue`
+  - `constants.RENDERING_HINT`: no replacement as it wasn't used
   - `constants.SHAPE` --> `ShapeValue`
 
 ## 0.19.0

diff --git a/packages/core/src/editor/Editor.ts b/packages/core/src/editor/Editor.ts
@@ -33,7 +33,7 @@ import MaxForm from '../gui/MaxForm';
 import Outline from '../view/other/Outline';
 import Cell from '../view/cell/Cell';
 import Geometry from '../view/geometry/Geometry';
-import { ALIGN, FONT } from '../util/Constants';
+import { FONT } from '../util/Constants';
 import type { AbstractGraph } from '../view/AbstractGraph';
 import { Graph } from '../view/Graph';
 import SwimlaneManager from '../view/layout/SwimlaneManager';
@@ -1158,71 +1158,71 @@ export class Editor extends EventSource {
 
     this.addAction('alignCellsLeft', (editor: Editor) => {
       if (editor.graph.isEnabled()) {
-        editor.graph.alignCells(ALIGN.LEFT);
+        editor.graph.alignCells('left');
       }
     });
 
     this.addAction('alignCellsCenter', (editor: Editor) => {
       if (editor.graph.isEnabled()) {
-        editor.graph.alignCells(ALIGN.CENTER);
+        editor.graph.alignCells('center');
       }
     });
 
     this.addAction('alignCellsRight', (editor: Editor) => {
       if (editor.graph.isEnabled()) {
-        editor.graph.alignCells(ALIGN.RIGHT);
+        editor.graph.alignCells('right');
       }
     });
 
     this.addAction('alignCellsTop', (editor: Editor) => {
       if (editor.graph.isEnabled()) {
-        editor.graph.alignCells(ALIGN.TOP);
+        editor.graph.alignCells('top');
       }
     });
 
     this.addAction('alignCellsMiddle', (editor: Editor) => {
       if (editor.graph.isEnabled()) {
-        editor.graph.alignCells(ALIGN.MIDDLE);
+        editor.graph.alignCells('middle');
       }
     });
 
     this.addAction('alignCellsBottom', (editor: Editor) => {
       if (editor.graph.isEnabled()) {
-        editor.graph.alignCells(ALIGN.BOTTOM);
+        editor.graph.alignCells('bottom');
       }
     });
 
     this.addAction('alignFontLeft', (editor: Editor) => {
-      editor.graph.setCellStyles('align', ALIGN.LEFT);
+      editor.graph.setCellStyles('align', 'left');
     });
 
     this.addAction('alignFontCenter', (editor: Editor) => {
       if (editor.graph.isEnabled()) {
-        editor.graph.setCellStyles('align', ALIGN.CENTER);
+        editor.graph.setCellStyles('align', 'center');
       }
     });
 
     this.addAction('alignFontRight', (editor: Editor) => {
       if (editor.graph.isEnabled()) {
-        editor.graph.setCellStyles('align', ALIGN.RIGHT);
+        editor.graph.setCellStyles('align', 'right');
       }
     });
 
     this.addAction('alignFontTop', (editor: Editor) => {
       if (editor.graph.isEnabled()) {
-        editor.graph.setCellStyles('verticalAlign', ALIGN.TOP);
+        editor.graph.setCellStyles('verticalAlign', 'top');
       }
     });
 
     this.addAction('alignFontMiddle', (editor: Editor) => {
       if (editor.graph.isEnabled()) {
-        editor.graph.setCellStyles('verticalAlign', ALIGN.MIDDLE);
+        editor.graph.setCellStyles('verticalAlign', 'middle');
       }
     });
 
     this.addAction('alignFontBottom', (editor: Editor) => {
       if (editor.graph.isEnabled()) {
-        editor.graph.setCellStyles('verticalAlign', ALIGN.BOTTOM);
+        editor.graph.setCellStyles('verticalAlign', 'bottom');
       }
     });
 

diff --git a/packages/core/src/serialization/ObjectCodec.ts b/packages/core/src/serialization/ObjectCodec.ts
@@ -174,16 +174,16 @@ import { doEval, isElement } from '../internal/utils';
  * For decoding JavaScript expressions, the add-node may be used with a text
  * content that contains the JavaScript expression. For example, the following
  * creates a field called foo in the enclosing object and assigns it the value
- * of {@link ALIGN.LEFT}.
+ * of `MyConstant.PROP`.
  *
  * ```javascript
  * <Object>
- *   <add as="foo">constants.ALIGN.LEFT</add>
+ *   <add as="foo">MyConstant.PROP</add>
  * </Object>
  * ```
  *
- * The resulting object has a field called foo with the value "left". Its XML
- * representation looks as follows.
+ * The resulting object has a field called foo with the value "myValue" (assuming that `MyConstant.PROP=myValue`).
+ * Its XML representation looks as follows.
  *
  * ```javascript
  * <Object foo="left"/>

diff --git a/packages/core/src/util/Constants.ts b/packages/core/src/util/Constants.ts
@@ -41,12 +41,6 @@ export const MIN_HOTSPOT_SIZE = 8;
  */
 export const MAX_HOTSPOT_SIZE = 0;
 
-export enum RENDERING_HINT {
-  EXACT = 'exact',
-  FASTER = 'faster',
-  FASTEST = 'fastest',
-}
-
 export enum DIALECT {
   /** the SVG display dialect name. */
   SVG = 'svg',
@@ -442,21 +436,6 @@ export enum FONT {
   STRIKETHROUGH = 8,
 }
 
-export enum ALIGN {
-  /** left horizontal alignment. */
-  LEFT = 'left',
-  /** center horizontal alignment. */
-  CENTER = 'center',
-  /** right horizontal alignment. */
-  RIGHT = 'right',
-  /** top vertical alignment. */
-  TOP = 'top',
-  /** middle vertical alignment. */
-  MIDDLE = 'middle',
-  /** bottom vertical alignment. */
-  BOTTOM = 'bottom',
-}
-
 export enum DIRECTION {
   NORTH = 'north',
   SOUTH = 'south',

diff --git a/packages/core/src/util/styleUtils.ts b/packages/core/src/util/styleUtils.ts
@@ -17,20 +17,20 @@ limitations under the License.
 */
 
 import Client from '../Client';
-import {
-  ALIGN,
-  DEFAULT_FONTFAMILY,
-  DEFAULT_FONTSIZE,
-  FONT,
-  LINE_HEIGHT,
-} from './Constants';
+import { DEFAULT_FONTFAMILY, DEFAULT_FONTSIZE, FONT, LINE_HEIGHT } from './Constants';
 import Point from '../view/geometry/Point';
 import Dictionary from './Dictionary';
 import CellPath from '../view/cell/CellPath';
 import Rectangle from '../view/geometry/Rectangle';
 import Cell from '../view/cell/Cell';
 import GraphDataModel from '../view/GraphDataModel';
-import type { CellStateStyle, CellStyle, NumericCellStateStyleKeys } from '../types';
+import type {
+  AlignValue,
+  CellStateStyle,
+  CellStyle,
+  NumericCellStateStyleKeys,
+  VAlignValue,
+} from '../types';
 import { matchBinaryMask } from '../internal/utils';
 
 /**
@@ -519,23 +519,23 @@ export const sortCells = (cells: Cell[], ascending = true): Cell[] => {
  * X is -0.5 for center, -1 for right and 0 for left alignment.
  * Y is -0.5 for middle, -1 for bottom and 0 for top alignment.
  *
- * Default values for missing arguments is top, left.
+ * Default values for missing arguments is center and middle.
  */
-export const getAlignmentAsPoint = (align: string, valign: string) => {
+export const getAlignmentAsPoint = (align: AlignValue, valign: VAlignValue) => {
   let dx = -0.5;
   let dy = -0.5;
 
   // Horizontal alignment
-  if (align === ALIGN.LEFT) {
+  if (align === 'left') {
     dx = 0;
-  } else if (align === ALIGN.RIGHT) {
+  } else if (align === 'right') {
     dx = -1;
   }
 
   // Vertical alignment
-  if (valign === ALIGN.TOP) {
+  if (valign === 'top') {
     dy = 0;
-  } else if (valign === ALIGN.BOTTOM) {
+  } else if (valign === 'bottom') {
     dy = -1;
   }
 

diff --git a/packages/core/src/view/GraphView.ts b/packages/core/src/view/GraphView.ts
@@ -22,7 +22,7 @@ import Dictionary from '../util/Dictionary';
 import EventSource from './event/EventSource';
 import EventObject from './event/EventObject';
 import RectangleShape from './geometry/node/RectangleShape';
-import { ALIGN, NS_SVG } from '../util/Constants';
+import { NS_SVG } from '../util/Constants';
 import Client from '../Client';
 import InternalEvent from './event/InternalEvent';
 import { convertPoint, getCurrentStyle, getOffset } from '../util/styleUtils';
@@ -1013,9 +1013,9 @@ export class GraphView extends EventSource {
    * @param state {@link CellState} whose absolute offset should be updated.
    */
   updateVertexLabelOffset(state: CellState): void {
-    const h = state.style.labelPosition ?? ALIGN.CENTER;
+    const h = state.style.labelPosition ?? 'center';
 
-    if (h === ALIGN.LEFT) {
+    if (h === 'left') {
       let lw = state.style.labelWidth ?? null;
 
       if (lw != null) {
@@ -1026,20 +1026,20 @@ export class GraphView extends EventSource {
 
       // @ts-ignore
       state.absoluteOffset.x -= lw;
-    } else if (h === ALIGN.RIGHT) {
+    } else if (h === 'right') {
       // @ts-ignore
       state.absoluteOffset.x += state.width;
-    } else if (h === ALIGN.CENTER) {
+    } else if (h === 'center') {
       const lw = state.style.labelWidth ?? null;
 
       if (lw != null) {
         // Aligns text block with given width inside the vertex width
-        const align = state.style.align ?? ALIGN.CENTER;
+        const align = state.style.align ?? 'center';
         let dx = 0;
 
-        if (align === ALIGN.CENTER) {
+        if (align === 'center') {
           dx = 0.5;
-        } else if (align === ALIGN.RIGHT) {
+        } else if (align === 'right') {
           dx = 1;
         }
 
@@ -1050,12 +1050,12 @@ export class GraphView extends EventSource {
       }
     }
 
-    const v = state.style.verticalLabelPosition ?? ALIGN.MIDDLE;
+    const v = state.style.verticalLabelPosition ?? 'middle';
 
-    if (v === ALIGN.TOP) {
+    if (v === 'top') {
       // @ts-ignore
       state.absoluteOffset.y -= state.height;
-    } else if (v === ALIGN.BOTTOM) {
+    } else if (v === 'bottom') {
       // @ts-ignore
       state.absoluteOffset.y += state.height;
     }