maxGraph · tbouffard · Apr 25, 2025 · Apr 24, 2025 · Apr 24, 2025
diff --git a/packages/core/__tests__/util/styleUtils.test.ts b/packages/core/__tests__/util/styleUtils.test.ts
@@ -22,7 +22,7 @@ import {
   setCellStyles,
 } from '../../src/util/styleUtils';
 import { FONT } from '../../src/util/Constants';
-import { type CellStyle } from '../../src/types';
+import { type CellStyle, BaseGraph } from '../../src';
 import { createGraphWithoutPlugins } from '../utils';
 
 describe('parseCssNumber', () => {
@@ -122,10 +122,11 @@ describe('setStyleFlag', () => {
   });
 });
 
-test('setCellStyleFlags on vertex', () => {
-  // Need a graph to have a view and ensure that the cell state is updated
-  const graph = createGraphWithoutPlugins();
-
+// In this test, we need a graph to have a view and ensure that the cell state is updated
+test.each([
+  ['BaseGraph', new BaseGraph()],
+  ['Graph', createGraphWithoutPlugins()],
+])('setCellStyleFlags on vertex using %s', (_name, graph) => {
   const style: CellStyle = { fontStyle: 4, spacing: 8 };
   const cell = graph.insertVertex({
     value: 'a value',
@@ -141,10 +142,11 @@ test('setCellStyleFlags on vertex', () => {
   expect(graph.getView().getState(cell)?.style?.fontStyle).toBe(5);
 });
 
-test('setCellStyles on vertex', () => {
-  // Need a graph to have a view and ensure that the cell state is updated
-  const graph = createGraphWithoutPlugins();
-
+// In this test, we need a graph to have a view and ensure that the cell state is updated
+test.each([
+  ['BaseGraph', new BaseGraph()],
+  ['Graph', createGraphWithoutPlugins()],
+])('setCellStyles on vertex using %s', (_name, graph) => {
   const style: CellStyle = { strokeColor: 'yellow', labelWidth: 100 };
   const cell = graph.insertVertex({
     value: 'a value',

diff --git a/packages/core/__tests__/utils.ts b/packages/core/__tests__/utils.ts
@@ -17,9 +17,16 @@ limitations under the License.
 import { Cell, type CellStateStyle, Graph } from '../src';
 import { jest } from '@jest/globals';
 
-// no need for a container, we don't check the view here
+/**
+ * Creates a new {@link Graph} without `container` (use the default value of the parameters).
+ *
+ * This is useful when tests don't check the view.
+ */
 export const createGraphWithoutContainer = (): Graph => new Graph();
 
+/**
+ * Creates a new {@link Graph} without any plugins (pass an empty array of plugins).
+ */
 export const createGraphWithoutPlugins = (): Graph => new Graph(undefined, undefined, []);
 
 export const createCellWithStyle = (style: CellStateStyle): Cell => {

diff --git a/packages/core/__tests__/view/Graph.test.ts b/packages/core/__tests__/view/Graph.test.ts
@@ -16,17 +16,19 @@ limitations under the License.
 
 import { describe, expect, test } from '@jest/globals';
 import {
+  AbstractGraph,
   Cell,
   CellState,
+  EdgeHandler,
   EdgeSegmentHandler,
   EdgeStyle,
   ElbowEdgeHandler,
   Point,
   Rectangle,
   RectangleShape,
+  VertexHandler,
 } from '../../src';
 import { createGraphWithoutPlugins } from '../utils';
-import EdgeHandler from '../../src/view/handler/EdgeHandler';
 
 describe('isOrthogonal', () => {
   test('Style of the CellState, orthogonal: true', () => {
@@ -66,6 +68,16 @@ describe('isOrthogonal', () => {
   });
 });
 
+function 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;
+}
+
 describe('createEdgeHandler', () => {
   test.each([
     ['ElbowConnector', EdgeStyle.ElbowConnector],
@@ -74,8 +86,7 @@ describe('createEdgeHandler', () => {
     ['TopToBottom', EdgeStyle.TopToBottom],
   ])('Expect ElbowEdgeHandler for edgeStyle: %s', (_name, edgeStyle) => {
     const graph = createGraphWithoutPlugins();
-    const cellState = new CellState(graph.view, new Cell(), {});
-    cellState.shape = new RectangleShape(new Rectangle(), 'green', 'blue');
+    const cellState = createCellState(graph, true);
     expect(graph.createEdgeHandler(cellState, edgeStyle)).toBeInstanceOf(
       ElbowEdgeHandler
     );
@@ -87,9 +98,7 @@ describe('createEdgeHandler', () => {
     ['SegmentConnector', EdgeStyle.SegmentConnector],
   ])('Expect EdgeSegmentHandler for edgeStyle: %s', (_name, edgeStyle) => {
     const graph = createGraphWithoutPlugins();
-    const cellState = new CellState(graph.view, new Cell(), {});
-    cellState.absolutePoints = [new Point(0, 0)];
-    cellState.shape = new RectangleShape(new Rectangle(), 'green', 'blue');
+    const cellState = createCellState(graph, true);
     expect(graph.createEdgeHandler(cellState, edgeStyle)).toBeInstanceOf(
       EdgeSegmentHandler
     );
@@ -100,8 +109,21 @@ describe('createEdgeHandler', () => {
     ['null', null],
   ])('Expect EdgeHandler for edgeStyle: %s', (_name, edgeStyle) => {
     const graph = createGraphWithoutPlugins();
-    const cellState = new CellState(graph.view, new Cell(), {});
-    cellState.shape = new RectangleShape(new Rectangle(), 'green', 'blue');
+    const cellState = createCellState(graph, true);
     expect(graph.createEdgeHandler(cellState, edgeStyle)).toBeInstanceOf(EdgeHandler);
   });
 });
+
+describe('createHandler', () => {
+  test('Expect VertexHandler', () => {
+    const graph = createGraphWithoutPlugins();
+    const cellState = createCellState(graph, false);
+    expect(graph.createHandler(cellState)).toBeInstanceOf(VertexHandler);
+  });
+
+  test('Expect EdgeHandler', () => {
+    const graph = createGraphWithoutPlugins();
+    const cellState = createCellState(graph, true);
+    expect(graph.createHandler(cellState)).toBeInstanceOf(EdgeHandler);
+  });
+});
diff --git a/packages/core/src/editor/Editor.ts b/packages/core/src/editor/Editor.ts
@@ -34,6 +34,7 @@ import Outline from '../view/other/Outline';
 import Cell from '../view/cell/Cell';
 import Geometry from '../view/geometry/Geometry';
 import { ALIGN, FONT } from '../util/Constants';
+import type { AbstractGraph } from '../view/AbstractGraph';
 import { Graph } from '../view/Graph';
 import SwimlaneManager from '../view/layout/SwimlaneManager';
 import LayoutManager from '../view/layout/LayoutManager';
@@ -505,15 +506,13 @@ export class Editor extends EventSource {
   outline: any = null;
 
   /**
-   * Holds a {@link graph} for displaying the diagram. The graph
-   * is created in {@link setGraphContainer}.
+   * Holds a {@link AbstractGraph} for displaying the diagram. The graph is created in {@link setGraphContainer}.
    */
   // @ts-ignore
-  graph: Graph;
+  graph: AbstractGraph;
 
   /**
-   * Holds the render hint used for creating the
-   * graph in {@link setGraphContainer}. See {@link graph}. Default is null.
+   * Holds the render hint used for creating the {@link graph} in {@link setGraphContainer}.
    * @default null
    */
   graphRenderHint: any = null;
@@ -640,7 +639,7 @@ export class Editor extends EventSource {
   defaultGroup: any = null;
 
   /**
-   * Default size for the border of new groups. If `null`, then {@link Graph.gridSize} is used.
+   * Default size for the border of new groups. If `null`, then {@link AbstractGraph.gridSize} is used.
    * @default null
    */
   groupBorderSize: number | null = null;
@@ -843,7 +842,7 @@ export class Editor extends EventSource {
   movePropertiesDialog = false;
 
   /**
-   * Specifies if {@link Graph.validateGraph} should automatically be invoked after
+   * Specifies if {@link AbstractGraph.validateGraph} should automatically be invoked after
    * each change. Default is false.
    * @default false
    */
@@ -1387,12 +1386,13 @@ export class Editor extends EventSource {
   }
 
   /**
-   * Creates the {@link graph} for the editor.
+   * Creates the {@link AbstractGraph} for the editor.
    *
-   * The graph is created with no container and is initialized from {@link setGraphContainer}.
-   * @returns graph instance
+   * The AbstractGraph is created with no container and is initialized from {@link setGraphContainer}.
+   *
+   * @returns the AbstractGraph instance used by the Editor
    */
-  createGraph(): Graph {
+  createGraph(): AbstractGraph {
     const graph = new Graph();
 
     // Enables rubberband, tooltips, panning
@@ -1445,11 +1445,11 @@ export class Editor extends EventSource {
   }
 
   /**
-   * Sets the graph's container using [@link mxGraph.init}.
+   * Sets the graph's container using {@link AbstractGraph.init}.
    * @param graph
    * @returns SwimlaneManager instance
    */
-  createSwimlaneManager(graph: Graph): SwimlaneManager {
+  createSwimlaneManager(graph: AbstractGraph): SwimlaneManager {
     const swimlaneMgr = new SwimlaneManager(graph, false);
 
     swimlaneMgr.isHorizontal = () => {
@@ -1465,11 +1465,11 @@ export class Editor extends EventSource {
 
   /**
    * Creates a layout manager for the swimlane and diagram layouts, that
-   * is, the locally defined inter and intraswimlane layouts.
+   * is, the locally defined inter and intra swimlane layouts.
    * @param graph
    * @returns LayoutManager instance
    */
-  createLayoutManager(graph: Graph): LayoutManager {
+  createLayoutManager(graph: AbstractGraph): LayoutManager {
     const layoutMgr = new LayoutManager(graph);
 
     layoutMgr.getLayout = (cell: Cell) => {
@@ -1510,13 +1510,13 @@ export class Editor extends EventSource {
   }
 
   /**
-   * Sets the graph's container using {@link graph.init}.
+   * Sets the graph's container using {@link AbstractGraph.init}.
    * @param container
    */
   setGraphContainer(container?: HTMLElement | null): void {
     if (!this.graph.container && container) {
       // Creates the graph instance inside the given container and render hint
-      // this.graph = new mxGraph(container, null, this.graphRenderHint);
+      // this.graph = new Graph(container, null, this.graphRenderHint);
 
       // @ts-ignore  TODO: FIXME!! ==============================================================================================
       this.graph.init(container);
@@ -1533,11 +1533,11 @@ export class Editor extends EventSource {
   }
 
   /**
-   * Overrides {@link graph.dblClick} to invoke {@link dblClickAction}
+   * Overrides {@link AbstractGraph.dblClick} to invoke {@link dblClickAction}
    * on a cell and reset the selection tool in the toolbar.
    * @param graph
    */
-  installDblClickHandler(graph: Graph): void {
+  installDblClickHandler(graph: AbstractGraph): void {
     // Installs a listener for double click events
     graph.addListener(InternalEvent.DOUBLE_CLICK, (sender: any, evt: EventObject) => {
       const cell = evt.getProperty('cell');
@@ -1553,7 +1553,7 @@ export class Editor extends EventSource {
    * Adds the {@link undoManager} to the graph model and the view.
    * @param graph
    */
-  installUndoHandler(graph: Graph): void {
+  installUndoHandler(graph: AbstractGraph): void {
     const listener = (sender: any, evt: EventObject) => {
       const edit = evt.getProperty('edit');
       (<UndoManager>this.undoManager).undoableEditHappened(edit);
@@ -1576,7 +1576,7 @@ export class Editor extends EventSource {
    * Installs listeners for dispatching the {@link root} event.
    * @param graph
    */
-  installDrillHandler(graph: Graph): void {
+  installDrillHandler(graph: AbstractGraph): void {
     const listener = (sender: any) => {
       this.fireEvent(new EventObject(InternalEvent.ROOT));
     };
@@ -1591,7 +1591,7 @@ export class Editor extends EventSource {
    * fires a {@link root} event.
    * @param graph
    */
-  installChangeHandler(graph: Graph): void {
+  installChangeHandler(graph: AbstractGraph): void {
     const listener = (sender: any, evt: EventObject) => {
       // Updates the modified state
       this.setModified(true);
@@ -1624,7 +1624,7 @@ export class Editor extends EventSource {
    * Installs the handler for invoking {@link insertFunction} if one is defined.
    * @param graph
    */
-  installInsertHandler(graph: Graph): void {
+  installInsertHandler(graph: AbstractGraph): void {
     const insertHandler: MouseListenerSet = {
       mouseDown: (_sender: EventSource, me: InternalMouseEvent) => {
         if (
@@ -1791,7 +1791,7 @@ export class Editor extends EventSource {
   }
 
   /**
-   * Returns the string value of the root cell in {@link graph.model}.
+   * Returns the string value of the root cell in {@link AbstractGraph.model}.
    */
   getRootTitle(): string {
     const root = this.graph.getDataModel().getRoot()!;
@@ -1814,7 +1814,7 @@ export class Editor extends EventSource {
 
   /**
    * Invokes {@link createGroup} to create a new group cell and the invokes
-   * {@link graph.groupCells}, using the grid size of the graph as the spacing
+   * {@link AbstractGraph.groupCells}, using the grid size of the graph as the spacing
    * in the group's content area.
    */
   groupCells(): any {

diff --git a/packages/core/src/editor/EditorToolbar.ts b/packages/core/src/editor/EditorToolbar.ts
@@ -25,7 +25,7 @@ import { getClientX, getClientY } from '../util/EventUtils';
 import { makeDraggable } from '../util/gestureUtils';
 import Editor from './Editor';
 import type Cell from '../view/cell/Cell';
-import type { Graph } from '../view/Graph';
+import type { AbstractGraph } from '../view/AbstractGraph';
 import EventObject from '../view/event/EventObject';
 import type { DropHandler } from '../view/other/DragSource';
 
@@ -300,10 +300,9 @@ export class EditorToolbar {
       toggle
     );
 
-    // Creates a wrapper function that calls the click handler without
-    // the graph argument
+    // Creates a wrapper function that calls the click handler without the graph argument
     const dropHandler: DropHandler = (
-      graph: Graph,
+      _graph: AbstractGraph,
       evt: MouseEvent,
       cell: Cell | null
     ) => {

diff --git a/packages/core/src/i18n/Translations.ts b/packages/core/src/i18n/Translations.ts
@@ -73,7 +73,7 @@ import { I18nProvider } from '../types';
  *
  * ## Loading default resources
  *
- * Call {@link loadResources} to load the default resources file for both {@link Graph} and {@link Editor}.
+ * Call {@link loadResources} to load the default resources file for both {@link AbstractGraph} and {@link Editor}.
  *
  * @category I18n
  */

diff --git a/packages/core/src/i18n/config.ts b/packages/core/src/i18n/config.ts
@@ -88,9 +88,9 @@ export const TranslationsConfig = {
    * - {@link Editor.propertiesResource}
    * - {@link Editor.tasksResource}
    * - {@link ElbowEdgeHandler.doubleClickOrientationResource}
-   * - {@link Graph.alreadyConnectedResource}.
-   * - {@link Graph.collapseExpandResource}
-   * - {@link Graph.containsValidationErrorsResource} and
+   * - {@link AbstractGraph.alreadyConnectedResource}.
+   * - {@link AbstractGraph.collapseExpandResource}
+   * - {@link AbstractGraph.containsValidationErrorsResource} and
    * - {@link GraphSelectionModel.doneResource}
    * - {@link GraphSelectionModel.updatingSelectionResource}
    * - {@link GraphView.doneResource}

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -17,6 +17,8 @@ limitations under the License.
 // Contribution of Mixins to the Graph type (no side effects, types only)
 import './view/mixins/_graph-mixins-types';
 
+export { AbstractGraph } from './view/AbstractGraph';
+export { BaseGraph } from './view/BaseGraph';
 export { Graph } from './view/Graph';
 export * from './view/plugins';
 

diff --git a/packages/core/src/serialization/codecs/GraphViewCodec.ts b/packages/core/src/serialization/codecs/GraphViewCodec.ts
@@ -51,7 +51,7 @@ export class GraphViewCodec extends ObjectCodec {
    * If {@link Cell.isEdge} returns `true` for the cell, then edge is used for the node name, else if {@link Cell.isVertex} returns `true` for the cell,
    * then vertex is used for the node name.
    *
-   * {@link Graph.getLabel} is used to create the label attribute for the cell.
+   * {@link AbstractGraph.getLabel} is used to create the label attribute for the cell.
    * For graph nodes and vertices the bounds are encoded into x, y, width and height.
    * For edges the points are encoded into a points attribute as a space-separated list of comma-separated coordinate pairs (e.g. x0,y0 x1,y1 ... xn,yn).
    * All values from the cell style are added as attribute values to the node.

diff --git a/packages/core/src/serialization/codecs/editor/EditorToolbarCodec.ts b/packages/core/src/serialization/codecs/editor/EditorToolbarCodec.ts
@@ -89,7 +89,7 @@ export class EditorToolbarCodec extends ObjectCodec {
    * ```
    *
    * In the above function, editor is the enclosing {@link Editor} instance, cell is the clone of the template, evt is the mouse event that represents the
-   * drop and targetCell is the cell under the mouse pointer where the drop occurred. The targetCell is retrieved using {@link Graph#getCellAt}.
+   * drop and targetCell is the cell under the mouse pointer where the drop occurred. The targetCell is retrieved using {@link AbstractGraph.getCellAt}.
    *
    * Furthermore, nodes with the mode attribute may define a function to be executed upon selection of the respective toolbar icon. In the
    * example below, the default edge style is set when this specific