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

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -1447,3 +1447,16 @@ export type GraphCollaboratorsOptions = {
   stylesheet?: Stylesheet;
   view?: (graph: AbstractGraph) => GraphView;
 };
+
+/**
+ * @since 0.20.0
+ */
+export type DialectValue =
+  /** The mixed HTML display dialect name. */
+  | 'mixedHtml'
+  /** The preferred HTML display dialect name. */
+  | 'preferHtml'
+  /** The strict HTML display dialect name. */
+  | 'strictHtml'
+  /** The SVG display dialect name. */
+  | 'svg';
diff --git a/packages/core/src/util/Constants.ts b/packages/core/src/util/Constants.ts
@@ -41,17 +41,6 @@ export const MIN_HOTSPOT_SIZE = 8;
  */
 export const MAX_HOTSPOT_SIZE = 0;
 
-export enum DIALECT {
-  /** the SVG display dialect name. */
-  SVG = 'svg',
-  /** the mixed HTML display dialect name. */
-  MIXEDHTML = 'mixedHtml',
-  /** the preferred HTML display dialect name. */
-  PREFERHTML = 'preferHtml',
-  /** the strict HTML display dialect name. */
-  STRICTHTML = 'strictHtml',
-}
-
 /**
  * Name of the field to be used to store the object ID.
  */

diff --git a/packages/core/src/util/xmlUtils.ts b/packages/core/src/util/xmlUtils.ts
@@ -16,7 +16,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { DIALECT, NODETYPE, NS_SVG } from './Constants';
+import { NODETYPE, NS_SVG } from './Constants';
 import Point from '../view/geometry/Point';
 import type Cell from '../view/cell/Cell';
 import type { AbstractGraph } from '../view/AbstractGraph';
@@ -63,7 +63,7 @@ export const getViewXml = (
   const { drawPane } = view;
   const { overlayPane } = view;
 
-  if (graph.dialect === DIALECT.SVG) {
+  if (graph.dialect === 'svg') {
     view.drawPane = document.createElementNS(NS_SVG, 'g');
     view.canvas.appendChild(view.drawPane);
 

diff --git a/packages/core/src/view/AbstractGraph.ts b/packages/core/src/view/AbstractGraph.ts
@@ -45,6 +45,7 @@ import VertexHandler from './handler/VertexHandler';
 import EdgeSegmentHandler from './handler/EdgeSegmentHandler';
 import ElbowEdgeHandler from './handler/ElbowEdgeHandler';
 import type {
+  DialectValue,
   EdgeStyleFunction,
   GraphCollaboratorsOptions,
   GraphFoldingOptions,
@@ -140,9 +141,9 @@ export abstract class AbstractGraph extends EventSource {
   renderHint: string | null = null;
 
   /**
-   * Dialect to be used for drawing the graph. Possible values are all constants in {@link DIALECT}.
+   * Dialect to be used for drawing the graph.
    */
-  dialect: 'svg' | 'mixedHtml' | 'preferHtml' | 'strictHtml' = 'svg';
+  dialect: DialectValue = 'svg';
 
   /**
    * Value returned by {@link getOverlap} if {@link isAllowOverlapParent} returns

diff --git a/packages/core/src/view/cell/CellHighlight.ts b/packages/core/src/view/cell/CellHighlight.ts
@@ -18,7 +18,6 @@ limitations under the License.
 
 import {
   DEFAULT_VALID_COLOR,
-  DIALECT,
   HIGHLIGHT_OPACITY,
   HIGHLIGHT_STROKEWIDTH,
 } from '../../util/Constants';
@@ -169,11 +168,11 @@ class CellHighlight {
     shape.isDashed = this.dashed;
     shape.isShadow = false;
 
-    shape.dialect = DIALECT.SVG;
+    shape.dialect = 'svg';
     shape.init(this.graph.getView().getOverlayPane());
     InternalEvent.redirectMouseEvents(shape.node, this.graph, this.state);
 
-    if (this.graph.dialect !== DIALECT.SVG) {
+    if (this.graph.dialect !== 'svg') {
       shape.pointerEvents = false;
     } else {
       shape.svgPointerEvents = 'stroke';

diff --git a/packages/core/src/view/cell/CellRenderer.ts b/packages/core/src/view/cell/CellRenderer.ts
@@ -25,7 +25,6 @@ import {
   DEFAULT_FONTSIZE,
   DEFAULT_FONTSTYLE,
   DEFAULT_TEXT_DIRECTION,
-  DIALECT,
   NONE,
 } from '../../util/Constants';
 import { getRotatedPoint, mod, toRadians } from '../../util/mathUtils';
@@ -377,7 +376,7 @@ class CellRenderer {
         state.style.textDirection ?? DEFAULT_TEXT_DIRECTION
       );
       state.text.opacity = state.style.textOpacity ?? 100;
-      state.text.dialect = isForceHtml ? DIALECT.STRICTHTML : graph.dialect;
+      state.text.dialect = isForceHtml ? 'strictHtml' : graph.dialect;
       state.text.style = state.style;
       state.text.state = state;
       this.initializeLabel(state, state.text);
@@ -418,7 +417,7 @@ class CellRenderer {
 
             forceGetCell =
               // @ts-ignore nodeName should exist.
-              graph.dialect !== DIALECT.SVG && source.nodeName === 'IMG';
+              graph.dialect !== 'svg' && source.nodeName === 'IMG';
           }
         },
         (evt: MouseEvent) => {
@@ -459,7 +458,7 @@ class CellRenderer {
    * @param shape {@link Shape} that represents the label.
    */
   initializeLabel(state: CellState, shape: Shape): void {
-    if (Client.IS_SVG && Client.NO_FO && shape.dialect !== DIALECT.SVG) {
+    if (Client.IS_SVG && Client.NO_FO && shape.dialect !== 'svg') {
       const graph = state.view.graph;
       shape.init(graph.container);
     } else {
@@ -653,10 +652,10 @@ class CellRenderer {
     // should go into the graph container directly in order to be clickable. Otherwise
     // it is obscured by the HTML label that overlaps the cell.
     const isForceHtml =
-      graph.isHtmlLabel(state.cell) && Client.NO_FO && graph.dialect === DIALECT.SVG;
+      graph.isHtmlLabel(state.cell) && Client.NO_FO && graph.dialect === 'svg';
 
     if (isForceHtml) {
-      control.dialect = DIALECT.PREFERHTML;
+      control.dialect = 'preferHtml';
       control.init(graph.container);
       control.node.style.zIndex = String(1);
     } else {
@@ -768,7 +767,7 @@ class CellRenderer {
 
       if (
         (source &&
-          graph.dialect !== DIALECT.SVG &&
+          graph.dialect !== 'svg' &&
           // @ts-ignore nodeName should exist
           source.nodeName === 'IMG') ||
         Client.IS_TOUCH
@@ -839,7 +838,7 @@ class CellRenderer {
     const wrapping = graph.isWrapping(state.cell);
     const clipping = graph.isLabelClipped(state.cell);
     const isForceHtml = graph.isHtmlLabel(state.cell) || (value && isNode(value));
-    const dialect = isForceHtml ? DIALECT.STRICTHTML : graph.dialect;
+    const dialect = isForceHtml ? 'strictHtml' : graph.dialect;
     const overflow = state.style.overflow ?? 'visible';
 
     if (

diff --git a/packages/core/src/view/cell/VertexHandle.ts b/packages/core/src/view/cell/VertexHandle.ts
@@ -21,7 +21,6 @@ import Point from '../geometry/Point';
 import ImageShape from '../geometry/node/ImageShape';
 import Rectangle from '../geometry/Rectangle';
 import RectangleShape from '../geometry/node/RectangleShape';
-import { DIALECT } from '../../util/Constants';
 import InternalEvent from '../event/InternalEvent';
 import Shape from '../geometry/Shape';
 import InternalMouseEvent from '../event/InternalMouseEvent';
@@ -205,11 +204,10 @@ class VertexHandle implements CellHandle {
     const shape = this.shape as Shape; // `this.shape` cannot be null.
 
     if (html && shape.isHtmlAllowed()) {
-      shape.dialect = DIALECT.STRICTHTML;
+      shape.dialect = 'strictHtml';
       shape.init(this.graph.container);
     } else {
-      shape.dialect =
-        this.graph.dialect !== DIALECT.SVG ? DIALECT.MIXEDHTML : DIALECT.SVG;
+      shape.dialect = this.graph.dialect !== 'svg' ? 'mixedHtml' : 'svg';
 
       if (this.cursor) {
         shape.init(this.graph.getView().getOverlayPane());

diff --git a/packages/core/src/view/geometry/Shape.ts b/packages/core/src/view/geometry/Shape.ts
@@ -39,6 +39,7 @@ import type {
   ArrowValue,
   CellStateStyle,
   ColorValue,
+  DialectValue,
   DirectionValue,
   GradientMap,
 } from '../../types';
@@ -144,9 +145,8 @@ class Shape {
 
   /**
    * Holds the dialect in which the shape is to be painted.
-   * This can be one of the DIALECT constants in {@link Constants}.
    */
-  dialect: string | null = null;
+  dialect: DialectValue | null = null;
 
   /**
    * Holds the scale in which the shape is being painted.

diff --git a/packages/core/src/view/geometry/node/TextShape.ts b/packages/core/src/view/geometry/node/TextShape.ts
@@ -23,7 +23,6 @@ import {
   DEFAULT_FONTSIZE,
   DEFAULT_FONTSTYLE,
   DEFAULT_TEXT_DIRECTION,
-  DIALECT,
   FONT,
   NONE,
   TEXT_DIRECTION,
@@ -250,7 +249,7 @@ class TextShape extends Shape {
       );
     } else {
       // Checks if text contains HTML markup
-      const realHtml = isNode(this.value) || this.dialect === DIALECT.STRICTHTML;
+      const realHtml = isNode(this.value) || this.dialect === 'strictHtml';
 
       // Always renders labels as HTML in VML
       const fmt = realHtml ? 'html' : '';
@@ -308,7 +307,7 @@ class TextShape extends Shape {
       this.checkBounds() &&
       this.cacheEnabled &&
       this.lastValue === this.value &&
-      (isNode(this.value) || this.dialect === DIALECT.STRICTHTML)
+      (isNode(this.value) || this.dialect === 'strictHtml')
     ) {
       if (this.node.nodeName === 'DIV') {
         this.redrawHtmlShape();
@@ -328,7 +327,7 @@ class TextShape extends Shape {
     } else {
       super.redraw();
 
-      if (isNode(this.value) || this.dialect === DIALECT.STRICTHTML) {
+      if (isNode(this.value) || this.dialect === 'strictHtml') {
         this.lastValue = this.value;
       } else {
         this.lastValue = null;
@@ -574,8 +573,7 @@ class TextShape extends Shape {
   getHtmlValue() {
     let val = this.value as string;
 
-    if (this.dialect !== DIALECT.STRICTHTML) {
-      // @ts-ignore
+    if (this.dialect !== 'strictHtml') {
       val = htmlEntities(val, false);
     }
 
@@ -699,7 +697,7 @@ class TextShape extends Shape {
     } else {
       let val = this.value as string;
 
-      if (this.dialect !== DIALECT.STRICTHTML) {
+      if (this.dialect !== 'strictHtml') {
         // LATER: Can be cached in updateValue
         val = htmlEntities(val, false);
       }
@@ -725,7 +723,7 @@ class TextShape extends Shape {
     } else {
       let val = this.value as string;
 
-      if (this.dialect !== DIALECT.STRICTHTML) {
+      if (this.dialect !== 'strictHtml') {
         val = htmlEntities(val, false);
       }
 
@@ -771,7 +769,7 @@ class TextShape extends Shape {
       if (divs.length > 0) {
         let dir = this.textDirection;
 
-        if (dir === TEXT_DIRECTION.AUTO && this.dialect !== DIALECT.STRICTHTML) {
+        if (dir === TEXT_DIRECTION.AUTO && this.dialect !== 'strictHtml') {
           dir = this.getAutoDirection();
         }
 

diff --git a/packages/core/src/view/handler/ConstraintHandler.ts b/packages/core/src/view/handler/ConstraintHandler.ts
@@ -20,7 +20,6 @@ import Image from '../image/ImageBox';
 import Client from '../../Client';
 import {
   DEFAULT_VALID_COLOR,
-  DIALECT,
   HIGHLIGHT_OPACITY,
   HIGHLIGHT_SIZE,
   HIGHLIGHT_STROKEWIDTH,
@@ -321,7 +320,7 @@ class ConstraintHandler {
 
             if (!this.focusHighlight) {
               const hl = this.createHighlightShape();
-              hl.dialect = DIALECT.SVG;
+              hl.dialect = 'svg';
               hl.pointerEvents = false;
 
               hl.init(this.graph.getView().getOverlayPane());
@@ -416,8 +415,7 @@ class ConstraintHandler {
           img.height
         );
         const icon = new ImageShape(bounds, src);
-        icon.dialect =
-          this.graph.dialect !== DIALECT.SVG ? DIALECT.MIXEDHTML : DIALECT.SVG;
+        icon.dialect = this.graph.dialect !== 'svg' ? 'mixedHtml' : 'svg';
         icon.preserveImageAspect = false;
         icon.init(this.graph.getView().getDecoratorPane());
 

diff --git a/packages/core/src/view/handler/EdgeHandler.ts b/packages/core/src/view/handler/EdgeHandler.ts
@@ -23,7 +23,6 @@ import {
   DEFAULT_HOTSPOT,
   DEFAULT_INVALID_COLOR,
   DEFAULT_VALID_COLOR,
-  DIALECT,
   HIGHLIGHT_STROKEWIDTH,
   LOCKED_HANDLE_FILLCOLOR,
   NONE,
@@ -243,8 +242,7 @@ class EdgeHandler implements MouseListenerSet {
     // for the initial configuration and preview
     this.abspoints = this.getSelectionPoints(this.state);
     this.shape = this.createSelectionShape(this.abspoints);
-    this.shape.dialect =
-      this.graph.dialect !== DIALECT.SVG ? DIALECT.MIXEDHTML : DIALECT.SVG;
+    this.shape.dialect = this.graph.dialect !== 'svg' ? 'mixedHtml' : 'svg';
     this.shape.init(this.graph.getView().getOverlayPane());
     this.shape.pointerEvents = false;
     this.shape.setCursor(CURSOR.MOVABLE_EDGE);
@@ -361,7 +359,7 @@ class EdgeHandler implements MouseListenerSet {
         if (parent && parent.isVertex() && pstate && !pstate.parentHighlight) {
           this.parentHighlight = this.createParentHighlightShape(pstate);
           // VML dialect required here for event transparency in IE
-          this.parentHighlight.dialect = DIALECT.SVG;
+          this.parentHighlight.dialect = 'svg';
           this.parentHighlight.pointerEvents = false;
           if (pstate.style.rotation) {
             this.parentHighlight.rotation = pstate.style.rotation;
@@ -670,10 +668,10 @@ class EdgeHandler implements MouseListenerSet {
    */
   initBend(bend: Shape, dblClick?: (evt: MouseEvent) => void) {
     if (this.preferHtml) {
-      bend.dialect = DIALECT.STRICTHTML;
+      bend.dialect = 'strictHtml';
       bend.init(this.graph.container);
     } else {
-      bend.dialect = this.graph.dialect !== DIALECT.SVG ? DIALECT.MIXEDHTML : DIALECT.SVG;
+      bend.dialect = this.graph.dialect !== 'svg' ? 'mixedHtml' : 'svg';
       bend.init(this.graph.getView().getOverlayPane());
     }