maxGraph · tbouffard · May 1, 2025 · May 1, 2025 · May 1, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,9 @@ 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.
+
 ## 0.19.0
 
 Release date: `2025-04-30`

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -958,25 +958,43 @@ export type StylePortConstraint = DirectionValue | DirectionValue[];
 
 /**
  * Names used to register the shapes provided out-of-the-box by maxGraph with {@link CellRenderer.registerShape}.
+ * They can be used as a value for {@link CellStateStyle.shape}.
+ *
  * @category Style
  */
 export type ShapeValue =
-  | 'rectangle'
-  | 'ellipse'
-  | 'doubleEllipse'
-  | 'rhombus'
-  | 'line'
-  | 'image'
+  /** Name under which {@link ActorShape} is registered by default. */
+  | 'actor'
+  /** Name under which {@link ArrowShape} is registered by default. */
   | 'arrow'
+  /** Name under which {@link ArrowConnectorShape} is registered by default. */
   | 'arrowConnector'
-  | 'label'
+  /** Name under which {@link CloudShape} is registered by default. */
+  | 'cloud'
+  /** Name under which {@link ConnectorShape} is registered by default. */
+  | 'connector'
+  /** Name under which {@link CylinderShape} is registered by default. */
   | 'cylinder'
+  /** Name under which {@link DoubleEllipseShape} is registered by default. */
+  | 'doubleEllipse'
+  /** Name under which {@link EllipseShape} is registered by default. */
+  | 'ellipse'
+  /** Name under which {@link HexagonShape} is registered by default. */
+  | 'hexagon'
+  /** Name under which {@link ImageShape} is registered by default. */
+  | 'image'
+  /** Name under which {@link LabelShape} is registered by default. */
+  | 'label'
+  /** Name under which {@link LineShape} is registered by default. */
+  | 'line'
+  /** Name under which {@link RectangleShape} is registered by default. */
+  | 'rectangle'
+  /** Name under which {@link RhombusShape} is registered by default. */
+  | 'rhombus'
+  /** Name under which {@link SwimlaneShape} is registered by default. */
   | 'swimlane'
-  | 'connector'
-  | 'actor'
-  | 'cloud'
-  | 'triangle'
-  | 'hexagon';
+  /** Name under which {@link TriangleShape} is registered by default. */
+  | 'triangle';
 
 /**
  * {@link ShapeValue} with support for extensions.

diff --git a/packages/core/src/util/Constants.ts b/packages/core/src/util/Constants.ts
@@ -545,89 +545,3 @@ export enum PERIMETER {
   HEXAGON = 'hexagonPerimeter',
   TRIANGLE = 'trianglePerimeter',
 }
-
-/**
- * Names used to register the shapes provided out-of-the-box by maxGraph with {@link CellRenderer.registerShape}.
- * Can be used as a value for {@link CellStateStyle.shape}.
- */
-export enum SHAPE {
-  /**
-   * Name under which {@link RectangleShape} is registered.
-   */
-  RECTANGLE = 'rectangle',
-
-  /**
-   * Name under which {@link Ellipse} is registered.
-   */
-  ELLIPSE = 'ellipse',
-
-  /**
-   * Name under which {@link DoubleEllipse} is registered.
-   */
-  DOUBLE_ELLIPSE = 'doubleEllipse',
-
-  /**
-   * Name under which {@link Rhombus} is registered.
-   */
-  RHOMBUS = 'rhombus',
-
-  /**
-   * Name under which {@link LineShape} is registered.
-   */
-  LINE = 'line',
-
-  /**
-   * Name under which {@link ImageShape} is registered.
-   */
-  IMAGE = 'image',
-
-  /**
-   * Name under which {@link ArrowShape} is registered.
-   */
-  ARROW = 'arrow',
-
-  /**
-   * Name under which {@link ArrowConnectorShape} is registered.
-   */
-  ARROW_CONNECTOR = 'arrowConnector',
-
-  /**
-   * Name under which {@link Label} is registered.
-   */
-  LABEL = 'label',
-
-  /**
-   * Name under which {@link Cylinder} is registered.
-   */
-  CYLINDER = 'cylinder',
-
-  /**
-   * Name under which {@link Swimlane} is registered.
-   */
-  SWIMLANE = 'swimlane',
-
-  /**
-   * Name under which {@link ConnectorShape} is registered.
-   */
-  CONNECTOR = 'connector',
-
-  /**
-   * Name under which {@link Actor} is registered.
-   */
-  ACTOR = 'actor',
-
-  /**
-   * Name under which {@link Cloud} is registered.
-   */
-  CLOUD = 'cloud',
-
-  /**
-   * Name under which {@link Triangle} is registered.
-   */
-  TRIANGLE = 'triangle',
-
-  /**
-   * Name under which {@link Hexagon} is registered.
-   */
-  HEXAGON = 'hexagon',
-}
diff --git a/packages/core/src/view/cell/register-shapes.ts b/packages/core/src/view/cell/register-shapes.ts
@@ -32,7 +32,6 @@ import DoubleEllipseShape from '../geometry/node/DoubleEllipseShape';
 import SwimlaneShape from '../geometry/node/SwimlaneShape';
 import ImageShape from '../geometry/node/ImageShape';
 import LabelShape from '../geometry/node/LabelShape';
-import { SHAPE } from '../../util/Constants';
 
 let isDefaultElementsRegistered = false;
 
@@ -46,22 +45,22 @@ let isDefaultElementsRegistered = false;
 export function registerDefaultShapes() {
   if (!isDefaultElementsRegistered) {
     const shapesToRegister: [ShapeValue, ShapeConstructor][] = [
-      [SHAPE.ACTOR, ActorShape],
-      [SHAPE.ARROW, ArrowShape],
-      [SHAPE.ARROW_CONNECTOR, ArrowConnectorShape],
-      [SHAPE.CLOUD, CloudShape],
-      [SHAPE.CONNECTOR, ConnectorShape],
-      [SHAPE.CYLINDER, CylinderShape],
-      [SHAPE.DOUBLE_ELLIPSE, DoubleEllipseShape],
-      [SHAPE.ELLIPSE, EllipseShape],
-      [SHAPE.HEXAGON, HexagonShape],
-      [SHAPE.IMAGE, ImageShape],
-      [SHAPE.LABEL, LabelShape],
-      [SHAPE.LINE, LineShape],
-      [SHAPE.RECTANGLE, RectangleShape],
-      [SHAPE.RHOMBUS, RhombusShape],
-      [SHAPE.SWIMLANE, SwimlaneShape],
-      [SHAPE.TRIANGLE, TriangleShape],
+      ['actor', ActorShape],
+      ['arrow', ArrowShape],
+      ['arrowConnector', ArrowConnectorShape],
+      ['cloud', CloudShape],
+      ['connector', ConnectorShape],
+      ['cylinder', CylinderShape],
+      ['doubleEllipse', DoubleEllipseShape],
+      ['ellipse', EllipseShape],
+      ['hexagon', HexagonShape],
+      ['image', ImageShape],
+      ['label', LabelShape],
+      ['line', LineShape],
+      ['rectangle', RectangleShape],
+      ['rhombus', RhombusShape],
+      ['swimlane', SwimlaneShape],
+      ['triangle', TriangleShape],
     ];
     for (const [shapeName, shapeClass] of shapesToRegister) {
       CellRenderer.registerShape(shapeName, shapeClass);

diff --git a/packages/core/src/view/geometry/edge/ArrowConnectorShape.ts b/packages/core/src/view/geometry/edge/ArrowConnectorShape.ts
@@ -30,7 +30,7 @@ import { ColorValue } from '../../../types';
  *
  * The shape is used to represent edges, not vertices.
  *
- * By default, this shape is registered under {@link SHAPE.ARROW_CONNECTOR} in {@link CellRenderer}.
+ * This shape is registered under `arrowConnector` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}.
  *
  * @category Edge Shapes
  */

diff --git a/packages/core/src/view/geometry/edge/ArrowShape.ts b/packages/core/src/view/geometry/edge/ArrowShape.ts
@@ -24,9 +24,11 @@ import Point from '../Point';
 import { ColorValue } from '../../../types';
 
 /**
- * Extends {@link Shape} to implement an arrow shape. The shape is used to represent edges, not vertices.
+ * Extends {@link Shape} to implement an arrow shape.
  *
- * By default, this shape is registered under {@link SHAPE.ARROW} in {@link CellRenderer}.
+ * The shape is used to represent edges, not vertices.
+ *
+ * This shape is registered under `arrow` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}.
  *
  * @category Edge Shapes
  */

diff --git a/packages/core/src/view/geometry/edge/ConnectorShape.ts b/packages/core/src/view/geometry/edge/ConnectorShape.ts
@@ -30,7 +30,7 @@ import { ArrowValue, ColorValue } from '../../../types';
  *
  * The shape is used to represent edges, not vertices.
  *
- * This shape is registered under {@link SHAPE.CONNECTOR} in {@link CellRenderer}.
+ * This shape is registered under `connector` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}.
  *
  * @category Edge Shapes
  */

diff --git a/packages/core/src/view/geometry/edge/LineShape.ts b/packages/core/src/view/geometry/edge/LineShape.ts
@@ -26,7 +26,7 @@ import { ColorValue } from '../../../types';
  *
  * The shape is used to represent edges, not vertices.
  *
- * By default, this shape is registered under {@link SHAPE.LINE} in {@link CellRenderer}.
+ * This shape is registered under `line` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}.
  *
  * @category Edge Shapes
  */

diff --git a/packages/core/src/view/geometry/edge/PolylineShape.ts b/packages/core/src/view/geometry/edge/PolylineShape.ts
@@ -27,7 +27,7 @@ import { ColorValue } from '../../../types';
  *
  * The shape is used to represent edges, not vertices.
  *
- * By default, this shape is not registered in {@link CellRenderer}.
+ * This shape is **NOT** registered in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}.
  *
  * @category Edge Shapes
  */

diff --git a/packages/core/src/view/geometry/node/ActorShape.ts b/packages/core/src/view/geometry/node/ActorShape.ts
@@ -24,7 +24,8 @@ import { NONE } from '../../../util/Constants';
 
 /**
  * Extends {@link Shape} to implement an actor shape.
- * This shape is registered by default under {@link SHAPE.ACTOR} in {@link CellRenderer}.
+ *
+ * This shape is registered under `actor` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}.
  *
  * If a custom shape with one filled area is needed, then this shape's {@link redrawPath} method should be overridden
  * like in the following example:

diff --git a/packages/core/src/view/geometry/node/CloudShape.ts b/packages/core/src/view/geometry/node/CloudShape.ts
@@ -22,7 +22,8 @@ import Rectangle from '../Rectangle';
 
 /**
  * Extends {@link ActorShape} to implement a cloud shape.
- * This shape is registered by default under {@link SHAPE.CLOUD} in {@link CellRenderer}.
+ *
+ * This shape is registered under `cloud` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}.
  *
  * @category Vertex Shapes
  */

diff --git a/packages/core/src/view/geometry/node/CylinderShape.ts b/packages/core/src/view/geometry/node/CylinderShape.ts
@@ -23,7 +23,8 @@ import { NONE } from '../../../util/Constants';
 
 /**
  * Extends {@link Shape} to implement a cylinder shape.
- * This shape is registered by default under {@link SHAPE.CYLINDER} in {@link CellRenderer}.
+ *
+ * This shape is registered under `cylinder` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}.
  *
  * If a custom shape with one filled area and an overlay path is needed, then this shape's {@link redrawPath} should be overridden.
  *

diff --git a/packages/core/src/view/geometry/node/DoubleEllipseShape.ts b/packages/core/src/view/geometry/node/DoubleEllipseShape.ts
@@ -22,7 +22,8 @@ import AbstractCanvas2D from '../../../view/canvas/AbstractCanvas2D';
 
 /**
  * Extends {@link Shape} to implement a double ellipse shape.
- * This shape is registered by default under {@link SHAPE.DOUBLE_ELLIPSE} in {@link CellRenderer}.
+ *
+ * This shape is registered under `doubleEllipse` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}.
  *
  * If a custom shape is needed to only fill the inner ellipse, then this shape's {@link paintVertexShape} method should be overridden
  * like in the following example:

diff --git a/packages/core/src/view/geometry/node/EllipseShape.ts b/packages/core/src/view/geometry/node/EllipseShape.ts
@@ -22,7 +22,8 @@ import Rectangle from '../Rectangle';
 
 /**
  * Extends {@link Shape} to implement an ellipse shape.
- * This shape is registered by default under {@link SHAPE.ELLIPSE} in {@link CellRenderer}.
+ *
+ * This shape is registered under `ellipse` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}.
  *
  * @category Vertex Shapes
  */

diff --git a/packages/core/src/view/geometry/node/HexagonShape.ts b/packages/core/src/view/geometry/node/HexagonShape.ts
@@ -24,6 +24,8 @@ import AbstractCanvas2D from '../../canvas/AbstractCanvas2D';
 /**
  * Implementation of the hexagon shape.
  *
+ * This shape is registered under `hexagon` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}.
+ *
  * @category Vertex Shapes
  */
 class HexagonShape extends ActorShape {

diff --git a/packages/core/src/view/geometry/node/ImageShape.ts b/packages/core/src/view/geometry/node/ImageShape.ts
@@ -25,7 +25,8 @@ import { ColorValue } from '../../../types';
 
 /**
  * Extends {@link RectangleShape} to implement an image shape.
- * This shape is registered by default under {@link SHAPE.IMAGE} in {@link CellRenderer}.
+ *
+ * This shape is registered under `image` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}.
  *
  * @category Vertex Shapes
  */

diff --git a/packages/core/src/view/geometry/node/LabelShape.ts b/packages/core/src/view/geometry/node/LabelShape.ts
@@ -24,7 +24,8 @@ import AbstractCanvas2D from '../../canvas/AbstractCanvas2D';
 
 /**
  * Extends {@link RectangleShape} to implement an image shape with a label.
- * This shape is registered by default under {@link SHAPE.LABEL} in {@link CellRenderer}.
+ *
+ * This shape is registered under `label` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}.
  *
  * @category Vertex Shapes
  */

diff --git a/packages/core/src/view/geometry/node/RectangleShape.ts b/packages/core/src/view/geometry/node/RectangleShape.ts
@@ -24,7 +24,8 @@ import { ColorValue } from '../../../types';
 
 /**
  * Extends {@link Shape} to implement a rectangle shape.
- * This shape is registered by default under {@link SHAPE.RECTANGLE} in {@link CellRenderer}.
+ *
+ * This shape is registered under `rectangle` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}.
  *
  * @category Vertex Shapes
  */

diff --git a/packages/core/src/view/geometry/node/RhombusShape.ts b/packages/core/src/view/geometry/node/RhombusShape.ts
@@ -24,7 +24,8 @@ import AbstractCanvas2D from '../../canvas/AbstractCanvas2D';
 
 /**
  * Extends {@link Shape} to implement a rhombus (aka diamond) shape.
- * This shape is registered by default under {@link SHAPE.RHOMBUS} in {@link CellRenderer}.
+ *
+ * This shape is registered under `rhombus` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}.
  *
  * @category Vertex Shapes
  */

diff --git a/packages/core/src/view/geometry/node/SwimlaneShape.ts b/packages/core/src/view/geometry/node/SwimlaneShape.ts
@@ -29,7 +29,8 @@ import AbstractCanvas2D from '../../canvas/AbstractCanvas2D';
 
 /**
  * Extends {@link Shape} to implement a swimlane shape.
- * This shape is registered by default under {@link SHAPE.SWIMLANE} in {@link CellRenderer}.
+ *
+ * This shape is registered under `swimlane` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}.
  *
  * Use:
  * - {@link CellStateStyle.startSize} to define the size of the title region,

diff --git a/packages/core/src/view/geometry/node/TextShape.ts b/packages/core/src/view/geometry/node/TextShape.ts
@@ -53,6 +53,8 @@ import { matchBinaryMask } from '../../../internal/utils';
 /**
  * Extends {@link Shape} to implement a text shape.
  *
+ * This shape is **NOT** registered in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}.
+ *
  * To change vertical text from "bottom to top" to "top to bottom", the following code can be used:
  * ```javascript
  * TextShape.prototype.verticalTextRotation = 90;

diff --git a/packages/core/src/view/geometry/node/TriangleShape.ts b/packages/core/src/view/geometry/node/TriangleShape.ts
@@ -24,6 +24,8 @@ import AbstractCanvas2D from '../../canvas/AbstractCanvas2D';
 /**
  * Implementation of the triangle shape.
  *
+ * This shape is registered under `triangle` in {@link CellRenderer} when using {@link Graph} or calling {@link registerDefaultShapes}.
+ *
  * @category Vertex Shapes
  */
 class TriangleShape extends ActorShape {

diff --git a/packages/core/src/view/mixins/CellsMixin.ts b/packages/core/src/view/mixins/CellsMixin.ts
@@ -33,7 +33,6 @@ import {
   DEFAULT_FONTSIZE,
   DEFAULT_IMAGESIZE,
   DIRECTION,
-  SHAPE,
 } from '../../util/Constants';
 import Geometry from '../geometry/Geometry';
 import EventObject from '../event/EventObject';
@@ -958,7 +957,7 @@ export const CellsMixin: PartialType = {
 
       // Adds dimension of image if shape is a label
       if (state.getImageSrc() || style.image) {
-        if (style.shape === SHAPE.LABEL) {
+        if (style.shape === 'label') {
           if (style.verticalAlign === ALIGN.MIDDLE) {
             dx += style.imageWidth || DEFAULT_IMAGESIZE;
           }