maxGraph · tbouffard · May 6, 2025 · May 5, 2025 · May 5, 2025 · May 5, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -30,6 +30,8 @@ _**Note:** Yet to be released breaking changes appear here._
   - `EdgeHandlerConfig`
   - `HandleConfig`
   - `VertexHandlerConfig`
+- `StyleRegistry` has been removed. Use `EdgeStyleRegistry` and `PerimeterRegistry` instead.
+  The methods of the new registries are also named differently.
 
 ## 0.19.0
 

diff --git a/packages/core/__tests__/internal/BaseRegistry.test.ts b/packages/core/__tests__/internal/BaseRegistry.test.ts
@@ -0,0 +1,72 @@
+/*
+Copyright 2025-present The maxGraph project Contributors
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { describe, expect, test } from '@jest/globals';
+import { BaseRegistry } from '../../src/internal/BaseRegistry';
+
+test('registration', () => {
+  const baseRegistry = new BaseRegistry();
+  const object = { property: 'value' };
+  baseRegistry.add('name', object);
+
+  expect(baseRegistry.get('name')).toBe(object);
+  expect(baseRegistry.get('unknown')).toBeNull();
+  expect(baseRegistry.get(null)).toBeNull();
+  expect(baseRegistry.get(undefined)).toBeNull();
+});
+
+test('registration override', () => {
+  const baseRegistry = new BaseRegistry<Record<string, string>>();
+  const object1 = { property: 'value1' };
+  const object2 = { property: 'value2' };
+
+  baseRegistry.add('name', object1);
+  expect(baseRegistry.get('name')).toBe(object1);
+
+  baseRegistry.add('name', object2);
+  expect(baseRegistry.get('name')).toBe(object2);
+  expect(baseRegistry.get('name')).not.toBe(object1);
+});
+
+test('clear', () => {
+  const baseRegistry = new BaseRegistry();
+  baseRegistry.add('name', { property: 'value' });
+  expect(baseRegistry.get('name')).toBeDefined();
+
+  baseRegistry.clear();
+
+  expect(baseRegistry.get('name')).toBeNull();
+});
+
+describe('getName', () => {
+  test('no element registered', () => {
+    const baseRegistry = new BaseRegistry();
+    expect(baseRegistry.getName({ prop1: 'value1' })).toBeNull();
+    expect(baseRegistry.getName(null)).toBeNull();
+  });
+
+  test('elements registered', () => {
+    const baseRegistry = new BaseRegistry();
+    baseRegistry.add('element1', { prop: 'value1' });
+    baseRegistry.add('element2', { prop: 'value2' });
+    const targetObject = { prop: 'match' };
+    baseRegistry.add('match', targetObject);
+    baseRegistry.add('element3', { prop: 'value3' });
+
+    expect(baseRegistry.getName(targetObject)).toBe('match');
+    expect(baseRegistry.getName(null)).toBeNull();
+  });
+});
diff --git a/packages/core/__tests__/view/Graph.test.ts b/packages/core/__tests__/view/Graph.test.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { describe, expect, test } from '@jest/globals';
+import { afterAll, beforeEach, describe, expect, test } from '@jest/globals';
 import {
   AbstractGraph,
   BaseGraph,
@@ -28,6 +28,8 @@ import {
   Point,
   Rectangle,
   RectangleShape,
+  registerDefaultEdgeStyles,
+  unregisterAllEdgeStyles,
   VertexHandler,
 } from '../../src';
 
@@ -53,80 +55,141 @@ describe('isOrthogonal', () => {
     expect(graph.isOrthogonal(cellState)).toBeFalsy();
   });
 
+  describe('Default builtin styles registered', () => {
+    beforeEach(() => {
+      unregisterAllEdgeStyles();
+      registerDefaultEdgeStyles();
+    });
+    afterAll(() => {
+      unregisterAllEdgeStyles();
+    });
+
+    test.each([
+      ['EntityRelation', EdgeStyle.EntityRelation],
+      ['ElbowConnector', EdgeStyle.ElbowConnector],
+      ['ManhattanConnector', EdgeStyle.ManhattanConnector],
+      ['OrthogonalConnector', EdgeStyle.OrthConnector],
+      ['SegmentConnector', EdgeStyle.SegmentConnector],
+      ['SideToSide', EdgeStyle.SideToSide],
+      ['TopToBottom', EdgeStyle.TopToBottom],
+    ])('Style of the CellState, edgeStyle: %s', (_name, edgeStyle) => {
+      const graph = new BaseGraph();
+      const cellState = new CellState(graph.view, null, { edgeStyle });
+      expect(graph.isOrthogonal(cellState)).toBeTruthy();
+    });
+
+    test.each([
+      ['custom', customEdgeStyle],
+      ['Loop', EdgeStyle.Loop],
+      ['null', null],
+      ['undefined', undefined],
+    ])('Style of the CellState, edgeStyle: %s', (_name, edgeStyle) => {
+      const graph = new BaseGraph();
+      const cellState = new CellState(graph.view, null, { edgeStyle });
+      expect(graph.isOrthogonal(cellState)).toBeFalsy();
+    });
+  });
+
   test.each([
+    ['custom', customEdgeStyle],
     ['EntityRelation', EdgeStyle.EntityRelation],
     ['ElbowConnector', EdgeStyle.ElbowConnector],
+    ['Loop', EdgeStyle.Loop],
     ['ManhattanConnector', EdgeStyle.ManhattanConnector],
     ['OrthogonalConnector', EdgeStyle.OrthConnector],
     ['SegmentConnector', EdgeStyle.SegmentConnector],
     ['SideToSide', EdgeStyle.SideToSide],
     ['TopToBottom', EdgeStyle.TopToBottom],
-  ])('Style of the CellState, edgeStyle: %s', (_name, edgeStyle) => {
-    const graph = new BaseGraph();
-    const cellState = new CellState(graph.view, null, { edgeStyle });
-    expect(graph.isOrthogonal(cellState)).toBeTruthy();
-  });
-
-  test.each([
-    ['custom', customEdgeStyle],
-    ['Loop', EdgeStyle.Loop],
-  ])('Style of the CellState, edgeStyle: %s', (_name, edgeStyle) => {
-    const graph = new BaseGraph();
-    const cellState = new CellState(graph.view, null, {
-      edgeStyle: edgeStyle,
-    });
-    expect(graph.isOrthogonal(cellState)).toBeFalsy();
-  });
+    ['null', null],
+    ['undefined', undefined],
+  ])(
+    'Default builtin styles NOT registered - Style of the CellState, edgeStyle: %s',
+    (_name, edgeStyle) => {
+      const graph = new BaseGraph();
+      const cellState = new CellState(graph.view, null, { edgeStyle });
+      expect(graph.isOrthogonal(cellState)).toBeFalsy();
+    }
+  );
 });
 
-function createCellState(graph: AbstractGraph, isEdge: boolean): CellState {
+const createCellState = (graph: AbstractGraph, isEdge: boolean): CellState => {
   const cell = new Cell();
   cell.setEdge(isEdge);
   cell.setVertex(!isEdge);
   const cellState = new CellState(graph.view, cell, {});
   cellState.absolutePoints = [new Point(0, 0)];
   cellState.shape = new RectangleShape(new Rectangle(), 'green', 'blue');
   return cellState;
-}
+};
+
+const createCellStateOfEdge = (graph: AbstractGraph): CellState =>
+  createCellState(graph, true);
 
 describe('createEdgeHandler', () => {
-  test.each([
-    ['ElbowConnector', EdgeStyle.ElbowConnector],
-    ['Loop', EdgeStyle.Loop],
-    ['SideToSide', EdgeStyle.SideToSide],
-    ['TopToBottom', EdgeStyle.TopToBottom],
-  ])('Expect ElbowEdgeHandler for edgeStyle: %s', (_name, edgeStyle) => {
-    const graph = new BaseGraph();
-    const cellState = createCellState(graph, true);
-    expect(graph.createEdgeHandler(cellState, edgeStyle)).toBeInstanceOf(
-      ElbowEdgeHandler
-    );
-  });
+  describe('Default builtin styles registered', () => {
+    beforeEach(() => {
+      unregisterAllEdgeStyles();
+      registerDefaultEdgeStyles();
+    });
+    afterAll(() => {
+      unregisterAllEdgeStyles();
+    });
 
-  test.each([
-    ['ManhattanConnector', EdgeStyle.ManhattanConnector],
-    ['OrthogonalConnector', EdgeStyle.OrthConnector],
-    ['SegmentConnector', EdgeStyle.SegmentConnector],
-  ])('Expect EdgeSegmentHandler for edgeStyle: %s', (_name, edgeStyle) => {
-    const graph = new BaseGraph();
-    const cellState = createCellState(graph, true);
-    expect(graph.createEdgeHandler(cellState, edgeStyle)).toBeInstanceOf(
-      EdgeSegmentHandler
-    );
+    test.each([
+      ['ElbowConnector', EdgeStyle.ElbowConnector],
+      ['Loop', EdgeStyle.Loop],
+      ['SideToSide', EdgeStyle.SideToSide],
+      ['TopToBottom', EdgeStyle.TopToBottom],
+    ])('Expect ElbowEdgeHandler for edgeStyle: %s', (_name, edgeStyle) => {
+      const graph = new BaseGraph();
+      const cellState = createCellStateOfEdge(graph);
+      expect(graph.createEdgeHandler(cellState, edgeStyle)).toBeInstanceOf(
+        ElbowEdgeHandler
+      );
+    });
+
+    test.each([
+      ['ManhattanConnector', EdgeStyle.ManhattanConnector],
+      ['OrthogonalConnector', EdgeStyle.OrthConnector],
+      ['SegmentConnector', EdgeStyle.SegmentConnector],
+    ])('Expect EdgeSegmentHandler for edgeStyle: %s', (_name, edgeStyle) => {
+      const graph = new BaseGraph();
+      const cellState = createCellStateOfEdge(graph);
+      expect(graph.createEdgeHandler(cellState, edgeStyle)).toBeInstanceOf(
+        EdgeSegmentHandler
+      );
+    });
+
+    test.each([
+      ['custom', customEdgeStyle],
+      ['EntityRelation', EdgeStyle.EntityRelation],
+      ['null', null],
+    ])('Expect EdgeHandler for edgeStyle: %s', (_name, edgeStyle) => {
+      const graph = new BaseGraph();
+      const cellState = createCellStateOfEdge(graph);
+      expectExactInstanceOfEdgeHandler(graph.createEdgeHandler(cellState, edgeStyle));
+    });
   });
 
   test.each([
     ['custom', customEdgeStyle],
     ['EntityRelation', EdgeStyle.EntityRelation],
+    ['ElbowConnector', EdgeStyle.ElbowConnector],
+    ['Loop', EdgeStyle.Loop],
+    ['ManhattanConnector', EdgeStyle.ManhattanConnector],
+    ['OrthogonalConnector', EdgeStyle.OrthConnector],
+    ['SegmentConnector', EdgeStyle.SegmentConnector],
+    ['SideToSide', EdgeStyle.SideToSide],
+    ['TopToBottom', EdgeStyle.TopToBottom],
     ['null', null],
-  ])('Expect EdgeHandler for edgeStyle: %s', (_name, edgeStyle) => {
-    const graph = new BaseGraph();
-    const cellState = createCellState(graph, true);
-    const edgeHandler = graph.createEdgeHandler(cellState, edgeStyle);
-    expect(edgeHandler).toBeInstanceOf(EdgeHandler);
-    expect(edgeHandler).not.toBeInstanceOf(EdgeSegmentHandler);
-    expect(edgeHandler).not.toBeInstanceOf(ElbowEdgeHandler);
-  });
+  ])(
+    'Default builtin styles NOT registered - Expect EdgeHandler for edgeStyle: %s',
+    (_name, edgeStyle) => {
+      const graph = new BaseGraph();
+      const cellState = createCellStateOfEdge(graph);
+      expectExactInstanceOfEdgeHandler(graph.createEdgeHandler(cellState, edgeStyle));
+    }
+  );
 });
 
 describe('createHandler', () => {
@@ -138,7 +201,13 @@ describe('createHandler', () => {
 
   test('Expect EdgeHandler', () => {
     const graph = new BaseGraph();
-    const cellState = createCellState(graph, true);
-    expect(graph.createHandler(cellState)).toBeInstanceOf(EdgeHandler);
+    const cellState = createCellStateOfEdge(graph);
+    expectExactInstanceOfEdgeHandler(<EdgeHandler>graph.createHandler(cellState));
   });
 });
+
+function expectExactInstanceOfEdgeHandler(handler: EdgeHandler): void {
+  expect(handler).toBeInstanceOf(EdgeHandler);
+  expect(handler).not.toBeInstanceOf(EdgeSegmentHandler);
+  expect(handler).not.toBeInstanceOf(ElbowEdgeHandler);
+}
diff --git a/packages/core/__tests__/view/GraphView.test.ts b/packages/core/__tests__/view/GraphView.test.ts
@@ -19,10 +19,12 @@ import {
   BaseGraph,
   CellState,
   EdgeStyle,
+  EdgeStyleRegistry,
   GraphView,
   Perimeter,
-  StyleRegistry,
-  unregisterAllEdgeStylesAndPerimeters,
+  PerimeterRegistry,
+  unregisterAllEdgeStyles,
+  unregisterAllPerimeters,
 } from '../../src';
 
 describe('getEdgeStyle ', () => {
@@ -55,10 +57,10 @@ describe('getEdgeStyle ', () => {
   describe('isLoopStyleEnabled returns false', () => {
     // Prevents side effects between tests
     beforeEach(() => {
-      unregisterAllEdgeStylesAndPerimeters();
+      unregisterAllEdgeStyles();
     });
     afterAll(() => {
-      unregisterAllEdgeStylesAndPerimeters();
+      unregisterAllEdgeStyles();
     });
 
     // use manual double instead of jest mock as this is a very simple use case, and we don't want to do any asserts on the fake method
@@ -85,7 +87,7 @@ describe('getEdgeStyle ', () => {
 
     test('edgeStyle in CellStateStyle is a string, element matching in the registry', () => {
       const connector = EdgeStyle.OrthConnector;
-      StyleRegistry.putValue('customEdgeStyle', connector);
+      EdgeStyleRegistry.add('customEdgeStyle', connector);
 
       const graph = createGraph();
       const cellState = new CellState(graph.view, null, { edgeStyle: 'customEdgeStyle' });
@@ -94,7 +96,7 @@ describe('getEdgeStyle ', () => {
 
     test('edgeStyle in CellStateStyle is a string, element matching in the registry BUT CellStateStyle.noEdgeStyle is true', () => {
       const connector = EdgeStyle.OrthConnector;
-      StyleRegistry.putValue('customEdgeStyle', connector);
+      EdgeStyleRegistry.add('customEdgeStyle', connector);
 
       const graph = createGraph();
       const cellState = new CellState(graph.view, null, {
@@ -117,10 +119,10 @@ describe('getEdgeStyle ', () => {
 describe('getPerimeterFunction', () => {
   // Prevents side effects between tests
   beforeEach(() => {
-    unregisterAllEdgeStylesAndPerimeters();
+    unregisterAllPerimeters();
   });
   afterAll(() => {
-    unregisterAllEdgeStylesAndPerimeters();
+    unregisterAllPerimeters();
   });
 
   test('no perimeter in CellStateStyle, no element matching in the registry', () => {
@@ -137,7 +139,7 @@ describe('getPerimeterFunction', () => {
 
   test('perimeter in CellStateStyle is a string, element matching in the registry', () => {
     const perimeter = Perimeter.HexagonPerimeter;
-    StyleRegistry.putValue('customPerimeter', perimeter);
+    PerimeterRegistry.add('customPerimeter', perimeter);
 
     const graph = new BaseGraph();
     const cellState = new CellState(graph.view, null, { perimeter: 'customPerimeter' });