maxGraph · tbouffard · Apr 28, 2025 · Apr 28, 2025
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -558,10 +558,9 @@ export type CellStateStyle = {
   /**
    * This defines the perimeter around a particular shape.
    *
-   * For {@link PerimeterFunction} types, some possible values are the functions defined in {@link Perimeter}.
+   * For {@link PerimeterFunction} types, some possible values are the builtin functions defined in the `Perimeter` namespace.
    *
-   * Alternatively, use a string or a value from {@link PERIMETER} to access perimeter styles
-   * registered in {@link StyleRegistry}.
+   * Alternatively, use a string or a value from {@link PerimeterValue} to access perimeter styles registered in {@link StyleRegistry}.
    * If {@link GraphView.allowEval} is set to `true`, you can pass the {@link PerimeterFunction} implementation directly as a string.
    * Remember that enabling this switch carries a possible security risk
    *
@@ -1271,7 +1270,13 @@ export type MarkerFactoryFunction = (
   source: boolean,
   sw: number,
   filled: boolean
-) => () => void;
+) => MarkerFunction;
+
+/**
+ * @since 0.19.0
+ * @category Style
+ */
+export type MarkerFunction = () => void;
 
 /**
  * @experimental subject to change or removal. The logging system may be modified in the future without prior notice.

diff --git a/packages/core/src/view/cell/CellRenderer.ts b/packages/core/src/view/cell/CellRenderer.ts
@@ -46,7 +46,7 @@ import Cell from './Cell';
 import CellOverlay from './CellOverlay';
 import { getClientX, getClientY, getSource } from '../../util/EventUtils';
 import { isNode } from '../../util/domUtils';
-import type { CellStateStyle, ShapeConstructor } from '../../types';
+import type { CellStateStyle, ShapeConstructor, StyleShapeValue } from '../../types';
 import type SelectionCellsHandler from '../plugins/SelectionCellsHandler';
 
 const placeholderStyleValues = ['inherit', 'swimlane', 'indicated'];
@@ -156,7 +156,7 @@ class CellRenderer {
    * @param key the shape name.
    * @param shape constructor of the {@link Shape} subclass.
    */
-  static registerShape(key: string, shape: ShapeConstructor): void {
+  static registerShape(key: StyleShapeValue, shape: ShapeConstructor): void {
     CellRenderer.defaultShapes[key] = shape;
   }
 

diff --git a/packages/core/src/view/cell/register-shapes.ts b/packages/core/src/view/cell/register-shapes.ts
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import CellRenderer from './CellRenderer';
-import type { ShapeConstructor } from '../../types';
+import type { ShapeConstructor, ShapeValue } from '../../types';
 import RectangleShape from '../geometry/node/RectangleShape';
 import EllipseShape from '../geometry/node/EllipseShape';
 import RhombusShape from '../geometry/node/RhombusShape';
@@ -45,7 +45,7 @@ let isDefaultElementsRegistered = false;
  */
 export function registerDefaultShapes() {
   if (!isDefaultElementsRegistered) {
-    const shapesToRegister: [string, ShapeConstructor][] = [
+    const shapesToRegister: [ShapeValue, ShapeConstructor][] = [
       [SHAPE.ACTOR, ActorShape],
       [SHAPE.ARROW, ArrowShape],
       [SHAPE.ARROW_CONNECTOR, ArrowConnectorShape],

diff --git a/packages/core/src/view/handler/ElbowEdgeHandler.ts b/packages/core/src/view/handler/ElbowEdgeHandler.ts
@@ -17,7 +17,7 @@ limitations under the License.
 */
 
 import EdgeHandler from './EdgeHandler';
-import { CURSOR, EDGESTYLE, ELBOW } from '../../util/Constants';
+import { CURSOR, ELBOW } from '../../util/Constants';
 import InternalEvent from '../event/InternalEvent';
 import Point from '../geometry/Point';
 import Rectangle from '../geometry/Rectangle';
@@ -111,8 +111,8 @@ class ElbowEdgeHandler extends EdgeHandler {
    * Returns the cursor to be used for the bend.
    */
   getCursorForBend() {
-    return this.state.style.edgeStyle === EDGESTYLE.TOPTOBOTTOM ||
-      (this.state.style.edgeStyle === EDGESTYLE.ELBOW &&
+    return this.state.style.edgeStyle === 'topToBottomEdgeStyle' ||
+      (this.state.style.edgeStyle === 'elbowEdgeStyle' &&
         this.state.style.elbow === ELBOW.VERTICAL)
       ? 'row-resize'
       : 'col-resize';

diff --git a/packages/core/src/view/style/StyleRegistry.ts b/packages/core/src/view/style/StyleRegistry.ts
@@ -16,6 +16,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import type { EdgeStyleValue, PerimeterValue } from '../../types';
+
 /**
  * Singleton class that acts as a global converter from string to object values in a style.
  *
@@ -32,7 +34,7 @@ class StyleRegistry {
   /**
    * Puts the given object into the registry under the given name.
    */
-  static putValue(name: string, obj: any): void {
+  static putValue(name: PerimeterValue | EdgeStyleValue | string, obj: any): void {
     StyleRegistry.values[name] = obj;
   }
 

diff --git a/packages/core/src/view/style/Stylesheet.ts b/packages/core/src/view/style/Stylesheet.ts
@@ -16,7 +16,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { ALIGN, ARROW, NONE, SHAPE } from '../../util/Constants';
+import { ALIGN, NONE, SHAPE } from '../../util/Constants';
 import { clone } from '../../util/cloneUtils';
 import type { CellStateStyle, CellStyle } from '../../types';
 
@@ -82,7 +82,7 @@ export class Stylesheet {
   createDefaultEdgeStyle() {
     const style = {} as CellStateStyle;
     style.shape = SHAPE.CONNECTOR;
-    style.endArrow = ARROW.CLASSIC;
+    style.endArrow = 'classic';
     style.verticalAlign = ALIGN.MIDDLE;
     style.align = ALIGN.CENTER;
     style.strokeColor = '#6482B9';

diff --git a/packages/core/src/view/style/marker/EdgeMarkerRegistry.ts b/packages/core/src/view/style/marker/EdgeMarkerRegistry.ts
@@ -16,7 +16,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import type { MarkerFactoryFunction, StyleArrowValue } from '../../../types';
+import type {
+  MarkerFactoryFunction,
+  MarkerFunction,
+  StyleArrowValue,
+} from '../../../types';
 import type AbstractCanvas2D from '../../canvas/AbstractCanvas2D';
 import type Point from '../../geometry/Point';
 import type Shape from '../../geometry/Shape';
@@ -38,8 +42,8 @@ class MarkerShape {
    * Adds a factory method that updates a given endpoint and returns a
    * function to paint the marker onto the given canvas.
    */
-  static addMarker(type: string, funct: MarkerFactoryFunction) {
-    MarkerShape.markers[type] = funct;
+  static addMarker(type: StyleArrowValue, factory: MarkerFactoryFunction) {
+    MarkerShape.markers[type] = factory;
   }
 
   /**
@@ -56,7 +60,7 @@ class MarkerShape {
     source: boolean,
     sw: number,
     filled: boolean
-  ) {
+  ): MarkerFunction | null {
     const markerFunction = MarkerShape.markers[type];
     return markerFunction
       ? markerFunction(canvas, shape, type, pe, unitX, unitY, size, source, sw, filled)

diff --git a/packages/core/src/view/style/marker/edge-markers.ts b/packages/core/src/view/style/marker/edge-markers.ts
@@ -20,7 +20,11 @@ import type { StyleArrowValue } from '../../../types';
 import type AbstractCanvas2D from '../../canvas/AbstractCanvas2D';
 import type Shape from '../../geometry/Shape';
 import type Point from '../../geometry/Point';
-import { ARROW } from '../../../util/Constants';
+
+const isClassicOrClassicThin = (type: StyleArrowValue): boolean =>
+  type === 'classic' || type === 'classicThin';
+
+const isDiamond = (type: StyleArrowValue): boolean => type === 'diamond';
 
 /**
  * Generally used to create the "classic" and "block" marker factory methods.
@@ -60,7 +64,7 @@ export const createArrow =
     pt.x -= endOffsetX;
     pt.y -= endOffsetY;
 
-    const f = type !== ARROW.CLASSIC && type !== ARROW.CLASSIC_THIN ? 1 : 3 / 4;
+    const f = !isClassicOrClassicThin(type) ? 1 : 3 / 4;
     pe.x += -unitX * f - endOffsetX;
     pe.y += -unitY * f - endOffsetY;
 
@@ -72,7 +76,7 @@ export const createArrow =
         pt.y - unitY + unitX / widthFactor
       );
 
-      if (type === ARROW.CLASSIC || type === ARROW.CLASSIC_THIN) {
+      if (isClassicOrClassicThin(type)) {
         canvas.lineTo(pt.x - (unitX * 3) / 4, pt.y - (unitY * 3) / 4);
       }
 
@@ -204,7 +208,7 @@ export const diamond = (
   // only half the strokewidth is processed ). Or 0.9862 for thin diamond.
   // Note these values and the tk variable below are dependent, update
   // both together (saves trig hard coding it).
-  const swFactor = type === ARROW.DIAMOND ? 0.7071 : 0.9862;
+  const swFactor = isDiamond(type) ? 0.7071 : 0.9862;
   const endOffsetX = unitX * sw * swFactor;
   const endOffsetY = unitY * sw * swFactor;
 
@@ -219,7 +223,7 @@ export const diamond = (
   pe.y += -unitY - endOffsetY;
 
   // thickness factor for diamond
-  const tk = type === ARROW.DIAMOND ? 2 : 3.4;
+  const tk = isDiamond(type) ? 2 : 3.4;
 
   return () => {
     canvas.begin();

diff --git a/packages/core/src/view/style/register.ts b/packages/core/src/view/style/register.ts
@@ -14,16 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { EDGESTYLE, PERIMETER } from '../../util/Constants';
 import { EdgeStyle } from './edge';
-import { Perimeter } from './builtin-style-elements';
+import { EdgeMarker, Perimeter } from './builtin-style-elements';
 import StyleRegistry from './StyleRegistry';
 import MarkerShape from './marker/EdgeMarkerRegistry';
-import { createArrow, createOpenArrow, diamond, oval } from './marker/edge-markers';
 import type {
+  ArrowValue,
   EdgeStyleFunction,
+  EdgeStyleValue,
   MarkerFactoryFunction,
   PerimeterFunction,
+  PerimeterValue,
 } from '../../types';
 
 let isDefaultEdgeStylesRegistered = false;
@@ -37,15 +38,15 @@ let isDefaultEdgeStylesRegistered = false;
  */
 export const registerDefaultEdgeStyles = (): void => {
   if (!isDefaultEdgeStylesRegistered) {
-    const edgeStylesToRegister: [string, EdgeStyleFunction][] = [
-      [EDGESTYLE.ELBOW, EdgeStyle.ElbowConnector],
-      [EDGESTYLE.ENTITY_RELATION, EdgeStyle.EntityRelation],
-      [EDGESTYLE.LOOP, EdgeStyle.Loop],
-      [EDGESTYLE.MANHATTAN, EdgeStyle.ManhattanConnector],
-      [EDGESTYLE.ORTHOGONAL, EdgeStyle.OrthConnector],
-      [EDGESTYLE.SEGMENT, EdgeStyle.SegmentConnector],
-      [EDGESTYLE.SIDETOSIDE, EdgeStyle.SideToSide],
-      [EDGESTYLE.TOPTOBOTTOM, EdgeStyle.TopToBottom],
+    const edgeStylesToRegister: [EdgeStyleValue, EdgeStyleFunction][] = [
+      ['elbowEdgeStyle', EdgeStyle.ElbowConnector],
+      ['entityRelationEdgeStyle', EdgeStyle.EntityRelation],
+      ['loopEdgeStyle', EdgeStyle.Loop],
+      ['manhattanEdgeStyle', EdgeStyle.ManhattanConnector],
+      ['orthogonalEdgeStyle', EdgeStyle.OrthConnector],
+      ['segmentEdgeStyle', EdgeStyle.SegmentConnector],
+      ['sideToSideEdgeStyle', EdgeStyle.SideToSide],
+      ['topToBottomEdgeStyle', EdgeStyle.TopToBottom],
     ];
     for (const [name, edgeStyle] of edgeStylesToRegister) {
       StyleRegistry.putValue(name, edgeStyle);
@@ -66,12 +67,12 @@ let isDefaultPerimetersRegistered = false;
  */
 export const registerDefaultPerimeters = (): void => {
   if (!isDefaultPerimetersRegistered) {
-    const perimetersToRegister: [string, PerimeterFunction][] = [
-      [PERIMETER.ELLIPSE, Perimeter.EllipsePerimeter],
-      [PERIMETER.HEXAGON, Perimeter.HexagonPerimeter],
-      [PERIMETER.RECTANGLE, Perimeter.RectanglePerimeter],
-      [PERIMETER.RHOMBUS, Perimeter.RhombusPerimeter],
-      [PERIMETER.TRIANGLE, Perimeter.TrianglePerimeter],
+    const perimetersToRegister: [PerimeterValue, PerimeterFunction][] = [
+      ['ellipsePerimeter', Perimeter.EllipsePerimeter],
+      ['hexagonPerimeter', Perimeter.HexagonPerimeter],
+      ['rectanglePerimeter', Perimeter.RectanglePerimeter],
+      ['rhombusPerimeter', Perimeter.RhombusPerimeter],
+      ['trianglePerimeter', Perimeter.TrianglePerimeter],
     ];
     for (const [name, perimeter] of perimetersToRegister) {
       StyleRegistry.putValue(name, perimeter);
@@ -108,16 +109,16 @@ let isDefaultMarkersRegistered = false;
  */
 export const registerDefaultEdgeMarkers = (): void => {
   if (!isDefaultMarkersRegistered) {
-    const markersToRegister: [string, MarkerFactoryFunction][] = [
-      ['classic', createArrow(2)],
-      ['classicThin', createArrow(3)],
-      ['block', createArrow(2)],
-      ['blockThin', createArrow(3)],
-      ['open', createOpenArrow(2)],
-      ['openThin', createOpenArrow(3)],
-      ['oval', oval],
-      ['diamond', diamond],
-      ['diamondThin', diamond],
+    const markersToRegister: [ArrowValue, MarkerFactoryFunction][] = [
+      ['classic', EdgeMarker.createArrow(2)],
+      ['classicThin', EdgeMarker.createArrow(3)],
+      ['block', EdgeMarker.createArrow(2)],
+      ['blockThin', EdgeMarker.createArrow(3)],
+      ['open', EdgeMarker.createOpenArrow(2)],
+      ['openThin', EdgeMarker.createOpenArrow(3)],
+      ['oval', EdgeMarker.oval],
+      ['diamond', EdgeMarker.diamond],
+      ['diamondThin', EdgeMarker.diamond],
     ];
     for (const [type, factory] of markersToRegister) {
       MarkerShape.addMarker(type, factory);

diff --git a/packages/js-example-without-defaults/src/index.js b/packages/js-example-without-defaults/src/index.js
@@ -51,7 +51,7 @@ const initializeGraph = (container) => {
       source: vertex01,
       target: vertex02,
       style: {
-        edgeStyle: constants.EDGESTYLE.ORTHOGONAL,
+        edgeStyle: 'orthogonalEdgeStyle',
         rounded: true,
       },
     });

diff --git a/packages/ts-example-without-defaults/src/main.ts b/packages/ts-example-without-defaults/src/main.ts
@@ -51,7 +51,7 @@ const initializeGraph = (container: HTMLElement) => {
       source: vertex01,
       target: vertex02,
       style: {
-        edgeStyle: constants.EDGESTYLE.ORTHOGONAL,
+        edgeStyle: 'orthogonalEdgeStyle',
         rounded: true,
       },
     });

diff --git a/packages/ts-example/src/main.ts b/packages/ts-example/src/main.ts
@@ -78,7 +78,7 @@ const initializeGraph = (container: HTMLElement) => {
     );
     // use the legacy insertEdge method
     graph.insertEdge(parent, null, 'an orthogonal style edge', vertex01, vertex02, {
-      edgeStyle: constants.EDGESTYLE.ORTHOGONAL,
+      edgeStyle: 'orthogonalEdgeStyle',
       rounded: true,
     });