maxGraph
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,11 @@ _**Note:** Yet to be released breaking changes appear here._
   The former `DOCUMENTTYPE` enum member has been renamed to `DOCUMENT_TYPE`.
 - `constants.DIRECTION_MASK` is now read-only (types only).
 - The `constants.FONT` enum has been removed and replaced by the `constants.FONT_STYLE_FLAG` value object.
+- The `constants.CURSOR` enum has been removed. The values are now configurable and have been moved to:
+  - `ConnectionHandler`
+  - `EdgeHandlerConfig`
+  - `HandleConfig`
+  - `VertexHandlerConfig`
 
 ## 0.19.0
 

diff --git a/packages/core/src/util/Constants.ts b/packages/core/src/util/Constants.ts
@@ -113,23 +113,6 @@ export const HIGHLIGHT_SIZE = 2;
  */
 export const HIGHLIGHT_OPACITY = 100;
 
-export enum CURSOR {
-  /** Defines the cursor for a movable vertex. */
-  MOVABLE_VERTEX = 'move',
-  /** Defines the cursor for a movable edge. */
-  MOVABLE_EDGE = 'move',
-  /** Defines the cursor for a movable label. */
-  LABEL_HANDLE = 'default',
-  /** Defines the cursor for a terminal handle. */
-  TERMINAL_HANDLE = 'pointer',
-  /** Defines the cursor for a movable bend. */
-  BEND_HANDLE = 'crosshair',
-  /** Defines the cursor for a movable bend. */
-  VIRTUAL_BEND_HANDLE = 'crosshair',
-  /** Defines the cursor for a connectable state. */
-  CONNECT = 'pointer',
-}
-
 /**
  * Defines the color to be used for the cell highlighting.
  * Use 'none' for no color. Default is #00FF00.

diff --git a/packages/core/src/view/handler/EdgeHandler.ts b/packages/core/src/view/handler/EdgeHandler.ts
@@ -19,7 +19,6 @@ limitations under the License.
 import CellMarker from '../cell/CellMarker';
 import Point from '../geometry/Point';
 import {
-  CURSOR,
   DEFAULT_HOTSPOT,
   DEFAULT_INVALID_COLOR,
   DEFAULT_VALID_COLOR,
@@ -245,7 +244,7 @@ class EdgeHandler implements MouseListenerSet {
     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);
+    this.shape.setCursor(EdgeHandlerConfig.cursorMovable);
     InternalEvent.redirectMouseEvents(this.shape.node, this.graph, this.state);
 
     // Updates preferHtml
@@ -294,7 +293,7 @@ class EdgeHandler implements MouseListenerSet {
     this.label = new Point(this.state.absoluteOffset.x, this.state.absoluteOffset.y);
     this.labelShape = this.createLabelHandleShape();
     this.initBend(this.labelShape);
-    this.labelShape.setCursor(CURSOR.LABEL_HANDLE);
+    this.labelShape.setCursor(HandleConfig.labelCursor);
 
     this.customHandles = this.createCustomHandles();
 
@@ -538,7 +537,9 @@ class EdgeHandler implements MouseListenerSet {
             });
 
             if (this.isHandleEnabled(i)) {
-              bend.setCursor(terminal ? CURSOR.TERMINAL_HANDLE : CURSOR.BEND_HANDLE);
+              bend.setCursor(
+                terminal ? EdgeHandlerConfig.cursorTerminal : EdgeHandlerConfig.cursorBend
+              );
             }
 
             bends.push(bend);
@@ -568,7 +569,7 @@ class EdgeHandler implements MouseListenerSet {
       for (let i = 1; i < this.abspoints.length; i += 1) {
         ((bend) => {
           this.initBend(bend);
-          bend.setCursor(CURSOR.VIRTUAL_BEND_HANDLE);
+          bend.setCursor(EdgeHandlerConfig.cursorVirtualBend);
           bends.push(bend);
         })(this.createHandleShape());
       }

diff --git a/packages/core/src/view/handler/EdgeSegmentHandler.ts b/packages/core/src/view/handler/EdgeSegmentHandler.ts
@@ -17,7 +17,6 @@ limitations under the License.
 */
 
 import Point from '../geometry/Point';
-import { CURSOR } from '../../util/Constants';
 import Rectangle from '../geometry/Rectangle';
 import { contains } from '../../util/mathUtils';
 import { setOpacity } from '../../util/styleUtils';
@@ -308,7 +307,7 @@ class EdgeSegmentHandler extends ElbowEdgeHandler {
     // Source
     let bend = this.createHandleShape(0);
     this.initBend(bend);
-    bend.setCursor(CURSOR.TERMINAL_HANDLE);
+    bend.setCursor(EdgeHandlerConfig.cursorTerminal);
     bends.push(bend);
 
     const pts = this.getCurrentPoints();
@@ -337,7 +336,7 @@ class EdgeSegmentHandler extends ElbowEdgeHandler {
     // Target
     bend = this.createHandleShape(pts.length);
     this.initBend(bend);
-    bend.setCursor(CURSOR.TERMINAL_HANDLE);
+    bend.setCursor(EdgeHandlerConfig.cursorTerminal);
     bends.push(bend);
 
     return bends;

diff --git a/packages/core/src/view/handler/ElbowEdgeHandler.ts b/packages/core/src/view/handler/ElbowEdgeHandler.ts
@@ -17,14 +17,13 @@ limitations under the License.
 */
 
 import EdgeHandler from './EdgeHandler';
-import { CURSOR } from '../../util/Constants';
 import InternalEvent from '../event/InternalEvent';
 import Point from '../geometry/Point';
 import Rectangle from '../geometry/Rectangle';
 import { intersects } from '../../util/mathUtils';
 import { isConsumed } from '../../util/EventUtils';
 import CellState from '../cell/CellState';
-import { HandleConfig } from './config';
+import { EdgeHandlerConfig, HandleConfig } from './config';
 import { isI18nEnabled, translate } from '../../internal/i18n-utils';
 
 /**
@@ -67,7 +66,7 @@ class ElbowEdgeHandler extends EdgeHandler {
     // Source
     let bend = this.createHandleShape(0);
     this.initBend(bend);
-    bend.setCursor(CURSOR.TERMINAL_HANDLE);
+    bend.setCursor(EdgeHandlerConfig.cursorTerminal);
     bends.push(bend);
 
     // Virtual
@@ -85,7 +84,7 @@ class ElbowEdgeHandler extends EdgeHandler {
     // Target
     bend = this.createHandleShape(2);
     this.initBend(bend);
-    bend.setCursor(CURSOR.TERMINAL_HANDLE);
+    bend.setCursor(EdgeHandlerConfig.cursorTerminal);
     bends.push(bend);
 
     return bends;

diff --git a/packages/core/src/view/handler/VertexHandler.ts b/packages/core/src/view/handler/VertexHandler.ts
@@ -17,7 +17,7 @@ limitations under the License.
 */
 
 import Rectangle from '../geometry/Rectangle';
-import { CURSOR, NONE } from '../../util/Constants';
+import { NONE } from '../../util/Constants';
 import InternalEvent from '../event/InternalEvent';
 import RectangleShape from '../geometry/node/RectangleShape';
 import ImageShape from '../geometry/node/ImageShape';
@@ -232,7 +232,7 @@ class VertexHandler implements MouseListenerSet {
     InternalEvent.redirectMouseEvents(this.selectionBorder.node, this.graph, this.state);
 
     if (this.graph.isCellMovable(this.state.cell)) {
-      this.selectionBorder.setCursor(CURSOR.MOVABLE_VERTEX);
+      this.selectionBorder.setCursor(VertexHandlerConfig.cursorMovable);
     }
 
     const selectionHandler = this.getSelectionHandler();
@@ -277,7 +277,7 @@ class VertexHandler implements MouseListenerSet {
         ) {
           // Marks this as the label handle for getHandleForEvent
           this.labelShape = this.createSizer(
-            CURSOR.LABEL_HANDLE,
+            HandleConfig.labelCursor,
             InternalEvent.LABEL_HANDLE,
             HandleConfig.labelSize,
             HandleConfig.labelFillColor
@@ -291,7 +291,7 @@ class VertexHandler implements MouseListenerSet {
         this.state.height < 2
       ) {
         this.labelShape = this.createSizer(
-          CURSOR.MOVABLE_VERTEX,
+          VertexHandlerConfig.cursorMovable,
           InternalEvent.LABEL_HANDLE,
           undefined,
           HandleConfig.labelFillColor

diff --git a/packages/core/src/view/handler/config.ts b/packages/core/src/view/handler/config.ts
@@ -51,6 +51,30 @@ export type EdgeHandlerConfigType = {
    * @default {@link CONNECT_HANDLE_FILLCOLOR}
    */
   connectFillColor: string;
+  /**
+   * Defines the cursor for a movable bend.
+   * @default 'crosshair'
+   * @since 0.20.0
+   */
+  cursorBend: string;
+  /**
+   * Defines the cursor for a movable edge.
+   * @default 'move'
+   * @since 0.20.0
+   */
+  cursorMovable: string;
+  /**
+   * Defines the cursor for a terminal handle.
+   * @default 'pointer'
+   * @since 0.20.0
+   */
+  cursorTerminal: string;
+  /**
+   * Defines the cursor for a movable virtural bend.
+   * @default 'crosshair'
+   * @since 0.20.0
+   */
+  cursorVirtualBend: string;
   /**
    * Kind of shape to be used for edge handles.
    * @default 'square'
@@ -106,6 +130,14 @@ export const EdgeHandlerConfig: EdgeHandlerConfigType = {
 
   connectFillColor: CONNECT_HANDLE_FILLCOLOR,
 
+  cursorBend: 'crosshair',
+
+  cursorMovable: 'move',
+
+  cursorTerminal: 'pointer',
+
+  cursorVirtualBend: 'crosshair',
+
   handleShape: 'square',
 
   removeBendOnShiftClickEnabled: false,
@@ -147,6 +179,13 @@ export const HandleConfig = {
    */
   fillColor: HANDLE_FILLCOLOR,
 
+  /**
+   * Defines the cursor to be used for the label handle.
+   * @default 'default'
+   * @since 0.20.0
+   */
+  labelCursor: 'default',
+
   /**
    * Defines the color to be used for the label handle fill color. Use `none` for no color.
    * @default {@link LABEL_HANDLE_FILLCOLOR}
@@ -191,6 +230,12 @@ export const resetHandleConfig = (): void => {
  * @category Configuration
  */
 export const VertexHandlerConfig = {
+  /**
+   * Defines the cursor for a movable vertex.
+   * @since 0.20.0
+   */
+  cursorMovable: 'move',
+
   /**
    * Enable rotation handle
    * @default false

diff --git a/packages/core/src/view/plugins/ConnectionHandler.ts b/packages/core/src/view/plugins/ConnectionHandler.ts
@@ -22,7 +22,6 @@ import Point from '../geometry/Point';
 import EventObject from '../event/EventObject';
 import InternalEvent from '../event/InternalEvent';
 import {
-  CURSOR,
   DEFAULT_HOTSPOT,
   DEFAULT_INVALID_COLOR,
   DEFAULT_VALID_COLOR,
@@ -368,9 +367,16 @@ class ConnectionHandler extends EventSource implements GraphPlugin, MouseListene
   livePreview = false;
 
   /**
-   * Specifies the cursor to be used while the handler is active. Default is null.
+   * Specifies the cursor to be used while the handler is active.
+   * @default null
    */
   cursor: string | null = null;
+  /**
+   * Defines the cursor for a connectable state.
+   * @default 'pointer'
+   * @since 0.20.0
+   */
+  cursorConnect: string = 'pointer';
 
   /**
    * Specifies if new edges should be inserted before the source vertex in the
@@ -646,7 +652,7 @@ class ConnectionHandler extends EventSource implements GraphPlugin, MouseListene
         }
       }
 
-      icon.node.style.cursor = CURSOR.CONNECT;
+      icon.node.style.cursor = this.cursorConnect;
 
       // Events transparency
       const getState = () => {
@@ -1232,7 +1238,7 @@ class ConnectionHandler extends EventSource implements GraphPlugin, MouseListene
           this.icons = this.createIcons(this.currentState);
 
           if (this.icons.length === 0) {
-            this.currentState.setCursor(CURSOR.CONNECT);
+            this.currentState.setCursor(this.cursorConnect);
             me.consume();
           }
         }

diff --git a/packages/core/src/view/plugins/SelectionHandler.ts b/packages/core/src/view/plugins/SelectionHandler.ts
@@ -24,7 +24,6 @@ import RectangleShape from '../geometry/node/RectangleShape';
 import Guide from '../other/Guide';
 import Point from '../geometry/Point';
 import {
-  CURSOR,
   DROP_TARGET_COLOR,
   INVALID_CONNECT_TARGET_COLOR,
   NONE,
@@ -49,8 +48,8 @@ import EventSource from '../event/EventSource';
 import CellState from '../cell/CellState';
 import EventObject from '../event/EventObject';
 import type ConnectionHandler from './ConnectionHandler';
+import { EdgeHandlerConfig, VertexHandlerConfig } from '../handler/config';
 import type CellEditorHandler from './CellEditorHandler';
-
 import type { ColorValue, GraphPlugin } from '../../types';
 
 /**
@@ -1029,9 +1028,9 @@ class SelectionHandler implements GraphPlugin {
 
       if (!cursor && cell && graph.isEnabled() && graph.isCellMovable(cell)) {
         if (cell.isEdge()) {
-          cursor = CURSOR.MOVABLE_EDGE;
+          cursor = EdgeHandlerConfig.cursorMovable;
         } else {
-          cursor = CURSOR.MOVABLE_VERTEX;
+          cursor = VertexHandlerConfig.cursorMovable;
         }
       }