maxGraph · tbouffard · May 2, 2025 · May 1, 2025 · May 1, 2025 · May 1, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,7 +10,11 @@ For more details on the contents of a release, see [the GitHub release page] (ht
 _**Note:** Yet to be released breaking changes appear here._
 
 **Breaking Changes**:
-- the `SHAPE` enum has been removed. Use values of the `ShapeValue` type instead.
+- Some enums have been removed. Use the string counterparts from related types:
+  - `constants.ARROW` --> `ArrowValue` 
+  - `constants.EDGESTYLE` --> `EdgeStyleValue` 
+  - `constants.PERIMETER` --> `PerimeterValue`
+  - `constants.SHAPE` --> `ShapeValue`
 
 ## 0.19.0
 

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -930,6 +930,9 @@ export type OverflowValue = 'fill' | 'width' | 'auto' | 'hidden' | 'scroll' | 'v
 export type WhiteSpaceValue = 'normal' | 'wrap' | 'nowrap' | 'pre';
 /**
  * Names used to register the edge markers provided out-of-the-box by maxGraph with {@link MarkerShape.addMarker}.
+ *
+ * Can be used as a value for {@link CellStateStyle.startArrow} and {@link CellStateStyle.endArrow}.
+ *
  * @category Style
  */
 export type ArrowValue =
@@ -1228,6 +1231,8 @@ export type PerimeterFunction = (
 /**
  * Names used to register the perimeter provided out-of-the-box by maxGraph with {@link StyleRegistry.putValue}.
  *
+ * Can be used as a value for {@link CellStateStyle.perimeter}.
+ *
  * @category Perimeter
  */
 export type PerimeterValue =
@@ -1259,6 +1264,9 @@ export type EdgeStyleFunction = (
 
 /**
  * Names used to register the edge styles (a.k.a. connectors) provided out-of-the-box by maxGraph with {@link StyleRegistry.putValue}.
+ *
+ * Can be used as a value for {@link CellStateStyle.edgeStyle}.
+ *
  * @since 0.14.0
  * @category EdgeStyle
  */

diff --git a/packages/core/src/util/Constants.ts b/packages/core/src/util/Constants.ts
@@ -442,27 +442,6 @@ export enum FONT {
   STRIKETHROUGH = 8,
 }
 
-export enum ARROW {
-  /** for classic arrow markers. */
-  CLASSIC = 'classic',
-  /** for thin classic arrow markers. */
-  CLASSIC_THIN = 'classicThin',
-  /** for block arrow markers. */
-  BLOCK = 'block',
-  /** for thin block arrow markers. */
-  BLOCK_THIN = 'blockThin',
-  /** for open arrow markers. */
-  OPEN = 'open',
-  /** for thin open arrow markers. */
-  OPEN_THIN = 'openThin',
-  /** for oval arrow markers. */
-  OVAL = 'oval',
-  /** for diamond arrow markers. */
-  DIAMOND = 'diamond',
-  /** for thin diamond arrow markers. */
-  DIAMOND_THIN = 'diamondThin',
-}
-
 export enum ALIGN {
   /** left horizontal alignment. */
   LEFT = 'left',
@@ -518,30 +497,3 @@ export enum ELBOW {
   VERTICAL = 'vertical',
   HORIZONTAL = 'horizontal',
 }
-
-/**
- * Names used to register the edge styles (a.k.a. connectors) provided out-of-the-box by maxGraph with {@link StyleRegistry.putValue}.
- * Can be used as a value for {@link CellStateStyle.edgeStyle}.
- */
-export enum EDGESTYLE {
-  ELBOW = 'elbowEdgeStyle',
-  ENTITY_RELATION = 'entityRelationEdgeStyle',
-  LOOP = 'loopEdgeStyle',
-  SIDETOSIDE = 'sideToSideEdgeStyle',
-  TOPTOBOTTOM = 'topToBottomEdgeStyle',
-  ORTHOGONAL = 'orthogonalEdgeStyle',
-  SEGMENT = 'segmentEdgeStyle',
-  MANHATTAN = 'manhattanEdgeStyle',
-}
-
-/**
- * Names used to register the perimeters provided out-of-the-box by maxGraph with {@link StyleRegistry.putValue}.
- * Can be used as a value for {@link CellStateStyle.perimeter}.
- */
-export enum PERIMETER {
-  ELLIPSE = 'ellipsePerimeter',
-  RECTANGLE = 'rectanglePerimeter',
-  RHOMBUS = 'rhombusPerimeter',
-  HEXAGON = 'hexagonPerimeter',
-  TRIANGLE = 'trianglePerimeter',
-}
diff --git a/packages/core/src/view/style/Stylesheet.ts b/packages/core/src/view/style/Stylesheet.ts
@@ -133,7 +133,7 @@ export class Stylesheet {
    * ```javascript
    * const style = {} as CellStateStyle;
    * style.shape = 'rectangle';
-   * style.perimeter = PERIMETER.RECTANGLE;
+   * style.perimeter = 'rectanglePerimeter';
    * style.rounded = true;
    * graph.getStylesheet().putCellStyle('rounded', style);
    * ```

diff --git a/packages/core/src/view/style/edge/Elbow.ts b/packages/core/src/view/style/edge/Elbow.ts
@@ -27,6 +27,8 @@ import type { EdgeStyleFunction } from '../../../types';
 /**
  * Uses either {@link SideToSide} or {@link TopToBottom} depending on the horizontal flag in the cell style.
  * {@link SideToSide} is used if horizontal is `true` or unspecified.
+ *
+ * This EdgeStyle is registered under `elbowEdgeStyle` in {@link StyleRegistry} when using {@link Graph} or calling {@link registerDefaultEdgeStyles}.
  */
 export const ElbowConnector: EdgeStyleFunction = (
   state: CellState,
@@ -48,7 +50,7 @@ export const ElbowConnector: EdgeStyleFunction = (
       const top = Math.min(source.y, target.y);
       const bottom = Math.max(source.y + source.height, target.y + target.height);
 
-      pt = <Point>state.view.transformControlPoint(state, pt);
+      pt = state.view.transformControlPoint(state, pt)!;
       vertical = pt.y < top || pt.y > bottom;
       horizontal = pt.x < left || pt.x > right;
     } else {

diff --git a/packages/core/src/view/style/edge/EntityRelation.ts b/packages/core/src/view/style/edge/EntityRelation.ts
@@ -25,15 +25,17 @@ import type { EdgeStyleFunction } from '../../../types';
 import { EntityRelationConnectorConfig } from '../config';
 
 /**
- * Implements an entity relation style for edges (as used in database
- * schema diagrams). At the time the function is called, the result
- * array contains a placeholder (null) for the first absolute point,
+ * Implements an entity relation style for edges (as used in database schema diagrams).
+ *
+ * At the time the function is called, the result array contains a placeholder (`null`) for the first absolute point,
  * that is, the point where the edge and source terminal are connected.
- * The implementation of the style then adds all intermediate waypoints
- * except for the last point, that is, the connection point between the
- * edge and the target terminal. The first ant the last point in the
- * result array are then replaced with Point that take into account
- * the terminal's perimeter and next point on the edge.
+ *
+ * The implementation of the style then adds all intermediate waypoints except for the last point,
+ * that is, the connection point between the edge and the target terminal.
+ *
+ * The first and the last point in the result array are then replaced with Point that take into account the terminal's perimeter and next point on the edge.
+ *
+ * This EdgeStyle is registered under `entityRelationEdgeStyle` in {@link StyleRegistry} when using {@link Graph} or calling {@link registerDefaultEdgeStyles}.
  *
  * @param state {@link CellState} that represents the edge to be updated.
  * @param source {@link CellState} that represents the source terminal.

diff --git a/packages/core/src/view/style/edge/Loop.ts b/packages/core/src/view/style/edge/Loop.ts
@@ -25,6 +25,8 @@ import type { EdgeStyleFunction } from '../../../types';
 
 /**
  * Implements a self-reference, aka. loop.
+ *
+ * This EdgeStyle is registered under `loopEdgeStyle` in {@link StyleRegistry} when using {@link Graph} or calling {@link registerDefaultEdgeStyles}.
  */
 export const Loop: EdgeStyleFunction = (
   state: CellState,

diff --git a/packages/core/src/view/style/edge/Manhattan.ts b/packages/core/src/view/style/edge/Manhattan.ts
@@ -28,6 +28,8 @@ import { SegmentConnector } from './Segment';
  * ManhattanConnector code is based on code from https://github.com/mwangm/mxgraph-manhattan-connector
  *
  * Implements router to find the shortest route that avoids cells using manhattan distance as metric.
+ *
+ * This EdgeStyle is registered under `manhattanEdgeStyle` in {@link StyleRegistry} when using {@link Graph} or calling {@link registerDefaultEdgeStyles}.
  */
 export const ManhattanConnector: EdgeStyleFunction = (
   state: CellState,

diff --git a/packages/core/src/view/style/edge/Orthogonal.ts b/packages/core/src/view/style/edge/Orthogonal.ts
@@ -144,6 +144,8 @@ function getJettySize(state: CellState, isSource: boolean): number {
 /**
  * Implements a local orthogonal router between the given cells.
  *
+ * This EdgeStyle is registered under `orthogonalEdgeStyle` in {@link StyleRegistry} when using {@link Graph} or calling {@link registerDefaultEdgeStyles}.
+ *
  * @param state {@link CellState} that represents the edge to be updated.
  * @param sourceScaled {@link CellState} that represents the source terminal.
  * @param targetScaled {@link CellState} that represents the target terminal.

diff --git a/packages/core/src/view/style/edge/Segment.ts b/packages/core/src/view/style/edge/Segment.ts
@@ -27,6 +27,8 @@ import type { EdgeStyleFunction } from '../../../types';
  * Implements an orthogonal edge style.
  * Use {@link EdgeSegmentHandler} as an interactive handler for this style.
  *
+ * This EdgeStyle is registered under `segmentEdgeStyle` in {@link StyleRegistry} when using {@link Graph} or calling {@link registerDefaultEdgeStyles}.
+ *
  * @param state {@link CellState} that represents the edge to be updated.
  * @param sourceScaled {@link CellState} that represents the source terminal.
  * @param targetScaled {@link CellState} that represents the target terminal.

diff --git a/packages/core/src/view/style/edge/SideToSide.ts b/packages/core/src/view/style/edge/SideToSide.ts
@@ -24,6 +24,8 @@ import type { EdgeStyleFunction } from '../../../types';
 
 /**
  * Implements a horizontal elbow edge.
+ *
+ * This EdgeStyle is registered under `sideToSideEdgeStyle` in {@link StyleRegistry} when using {@link Graph} or calling {@link registerDefaultEdgeStyles}.
  */
 export const SideToSide: EdgeStyleFunction = (
   state: CellState,

diff --git a/packages/core/src/view/style/edge/TopToBottom.ts b/packages/core/src/view/style/edge/TopToBottom.ts
@@ -24,6 +24,8 @@ import type { EdgeStyleFunction } from '../../../types';
 
 /**
  * Implements a vertical elbow edge.
+ *
+ * This EdgeStyle is registered under `topToBottomEdgeStyle` in {@link StyleRegistry} when using {@link Graph} or calling {@link registerDefaultEdgeStyles}.
  */
 export const TopToBottom: EdgeStyleFunction = (
   state: CellState,

diff --git a/packages/core/src/view/style/perimeter/EllipsePerimeter.ts b/packages/core/src/view/style/perimeter/EllipsePerimeter.ts
@@ -22,6 +22,8 @@ import Point from '../../geometry/Point';
 import type { PerimeterFunction } from '../../../types';
 
 /**
+ * This perimeter is registered under `ellipsePerimeter` in {@link StyleRegistry} when using {@link Graph} or calling {@link registerDefaultPerimeters}.
+ *
  * @category Perimeter
  */
 export const EllipsePerimeter: PerimeterFunction = (

diff --git a/packages/core/src/view/style/perimeter/HexagonPerimeter.ts b/packages/core/src/view/style/perimeter/HexagonPerimeter.ts
@@ -24,6 +24,8 @@ import { DIRECTION } from '../../../util/Constants';
 import { intersection } from '../../../util/mathUtils';
 
 /**
+ * This perimeter is registered under `hexagonPerimeter` in {@link StyleRegistry} when using {@link Graph} or calling {@link registerDefaultPerimeters}.
+ *
  * @category Perimeter
  */
 export const HexagonPerimeter: PerimeterFunction = (

diff --git a/packages/core/src/view/style/perimeter/RectanglePerimeter.ts b/packages/core/src/view/style/perimeter/RectanglePerimeter.ts
@@ -24,6 +24,8 @@ import type { PerimeterFunction } from '../../../types';
 /**
  * Describes a rectangular perimeter for the given bounds.
  *
+ * This perimeter is registered under `rectanglePerimeter` in {@link StyleRegistry} when using {@link Graph} or calling {@link registerDefaultPerimeters}.
+ *
  * @category Perimeter
  */
 export const RectanglePerimeter: PerimeterFunction = (

diff --git a/packages/core/src/view/style/perimeter/RhombusPerimeter.ts b/packages/core/src/view/style/perimeter/RhombusPerimeter.ts
@@ -23,6 +23,8 @@ import type { PerimeterFunction } from '../../../types';
 import { intersection } from '../../../util/mathUtils';
 
 /**
+ * This perimeter is registered under `rhombusPerimeter` in {@link StyleRegistry} when using {@link Graph} or calling {@link registerDefaultPerimeters}.
+ *
  * @category Perimeter
  */
 export const RhombusPerimeter: PerimeterFunction = (

diff --git a/packages/core/src/view/style/perimeter/TrianglePerimeter.ts b/packages/core/src/view/style/perimeter/TrianglePerimeter.ts
@@ -24,6 +24,8 @@ import { DIRECTION } from '../../../util/Constants';
 import { intersection } from '../../../util/mathUtils';
 
 /**
+ * This perimeter is registered under `trianglePerimeter` in {@link StyleRegistry} when using {@link Graph} or calling {@link registerDefaultPerimeters}.
+ *
  * @category Perimeter
  */
 export const TrianglePerimeter: PerimeterFunction = (

diff --git a/packages/html/stories/SwimLanes.stories.ts b/packages/html/stories/SwimLanes.stories.ts
@@ -20,7 +20,6 @@ import {
   ImageBox,
   Perimeter,
   Point,
-  constants,
   cloneUtils,
   InternalEvent,
   SwimlaneManager,
@@ -141,16 +140,16 @@ const Template = ({ label, ...args }: Record<string, string>) => {
   graph.getStylesheet().putCellStyle('end', style);
 
   style = graph.getStylesheet().getDefaultEdgeStyle();
-  style.edgeStyle = constants.EDGESTYLE.ELBOW;
-  style.endArrow = constants.ARROW.BLOCK;
+  style.edgeStyle = 'elbowEdgeStyle';
+  style.endArrow = 'block';
   style.rounded = true;
   style.fontColor = 'black';
   style.strokeColor = 'black';
 
   style = cloneUtils.clone(style);
   style.dashed = true;
-  style.endArrow = constants.ARROW.OPEN;
-  style.startArrow = constants.ARROW.OVAL;
+  style.endArrow = 'open';
+  style.startArrow = 'oval';
   graph.getStylesheet().putCellStyle('crossover', style);
 
   // Installs double click on middle control point and

diff --git a/packages/ts-example-selected-features/vite.config.js b/packages/ts-example-selected-features/vite.config.js
@@ -27,7 +27,7 @@ export default defineConfig(({ mode }) => {
           },
         },
       },
-      chunkSizeWarningLimit: 381, // @maxgraph/core
+      chunkSizeWarningLimit: 380, // @maxgraph/core
     },
   };
 });
diff --git a/packages/ts-example-without-defaults/vite.config.js b/packages/ts-example-without-defaults/vite.config.js
@@ -27,7 +27,7 @@ export default defineConfig(({ mode }) => {
           },
         },
       },
-      chunkSizeWarningLimit: 330, // @maxgraph/core
+      chunkSizeWarningLimit: 329, // @maxgraph/core
     },
   };
 });
diff --git a/packages/ts-example/vite.config.js b/packages/ts-example/vite.config.js
@@ -27,7 +27,7 @@ export default defineConfig(({ mode }) => {
           },
         },
       },
-      chunkSizeWarningLimit: 439, // @maxgraph/core
+      chunkSizeWarningLimit: 438, // @maxgraph/core
     },
   };
 });
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,7 +27,7 @@ export default defineConfig(({ mode }) => { @@
               },
             },
           },
-          chunkSizeWarningLimit: 381, // @maxgraph/core
+          chunkSizeWarningLimit: 380, // @maxgraph/core
         },
       };
     });