Remove initializer.ts and use direct maxGraph imports everywhere

Co-authored-by: tbouffard <27200110+tbouffard@users.noreply.github.com>

Author: Copilot

package-lock.json

@@ -104,7 +104,7 @@
     "utils:test:model": "node ./scripts/utils/dist/utils.mjs test/fixtures/bpmn/simple-start-task-end.bpmn --output model"
   },
   "dependencies": {
-    "@maxgraph/core": "0.20.0",
+    "@maxgraph/core": "^0.20.0",
     "es-toolkit": "~1.39.10",
     "fast-xml-parser": "5.2.5"
   },

package.json

@@ -14,12 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// Use maxGraph types
-// The `preserve="true"` directive is required to retain types in the output starting from TypeScript 5.5.
-// See https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#preservetrue for details.
-// It is sufficient to add the `preserve` attribute once across all triple-slash directives, as the API Extractor will merge them when generating the final single definition file.
-/// <reference types="@maxgraph/core" preserve="true"/>
-
 // Public API
 export * from './component/options';
 export { BpmnVisualization } from './component/BpmnVisualization';
@@ -33,5 +27,37 @@ export { StyleConfigurator } from './component/mxgraph/config/StyleConfigurator'
 export * from './component/mxgraph/style';
 export * from './component/mxgraph/shape/render';
 
-// the mxGraph context
-export { mxgraph } from './component/mxgraph/initializer';
+// the mxGraph context - for backward compatibility
+// @deprecated Use direct imports from '@maxgraph/core' instead
+import {
+  CellRenderer,
+  Client,
+  constants,
+  Dictionary,
+  EdgeStyle,
+  ImageShape,
+  InternalEvent,
+  Perimeter,
+  Point,
+  Rectangle,
+  RectangleShape,
+  SvgCanvas2D,
+  styleUtils,
+} from '@maxgraph/core';
+
+export const mxgraph = {
+  CellRenderer: CellRenderer,
+  mxCellRenderer: CellRenderer,
+  mxClient: Client,
+  mxConstants: constants,
+  mxDictionary: Dictionary,
+  mxEvent: InternalEvent,
+  mxPerimeter: Perimeter,
+  mxPoint: Point,
+  mxRectangle: Rectangle,
+  mxRectangleShape: RectangleShape,
+  mxSvgCanvas2D: SvgCanvas2D,
+  mxUtils: styleUtils,
+  ImageShape,
+  EdgeStyle,
+};

src/bpmn-visualization.ts

@@ -17,12 +17,12 @@ limitations under the License.
 import type { IconPainter } from './shape/render';
 import type { CellState, ImageShape, Shape } from '@maxgraph/core';
 
-import { mxgraph, Rectangle } from './initializer';
+import { CellRenderer, Dictionary, Rectangle } from '@maxgraph/core';
 import { CustomCellOverlay } from './overlay/custom-overlay';
 import { OverlayBadgeShape } from './overlay/shapes';
 import { overrideCreateSvgCanvas } from './shape/utils';
 
-export class BpmnCellRenderer extends mxgraph.CellRenderer {
+export class BpmnCellRenderer extends CellRenderer {
   constructor(private readonly iconPainter: IconPainter) {
     super();
   }
@@ -33,7 +33,7 @@ export class BpmnCellRenderer extends mxgraph.CellRenderer {
     let dict = null;
 
     if (overlays != null) {
-      dict = new mxgraph.mxDictionary<Shape>();
+      dict = new Dictionary<Shape>();
 
       for (const currentOverlay of overlays) {
         const shape = state.overlays == null ? null : state.overlays.remove(currentOverlay);
@@ -48,7 +48,7 @@ export class BpmnCellRenderer extends mxgraph.CellRenderer {
         if (currentOverlay instanceof CustomCellOverlay) {
           overlayShape = new OverlayBadgeShape(currentOverlay.label, new Rectangle(0, 0, 0, 0), currentOverlay.style);
         } else {
-          overlayShape = new mxgraph.ImageShape(new Rectangle(0, 0, 0, 0), currentOverlay.image.src);
+          overlayShape = new ImageShape(new Rectangle(0, 0, 0, 0), currentOverlay.image.src);
           (overlayShape as ImageShape).preserveImageAspect = false;
         }
         // END bpmn-visualization CUSTOMIZATION

src/component/mxgraph/BpmnCellRenderer.ts

@@ -26,7 +26,7 @@ import type { Cell } from '@maxgraph/core';
 import { MessageVisibleKind, ShapeUtil } from '../../model/bpmn/internal';
 import { MessageFlow } from '../../model/bpmn/internal/edge/flows';
 
-import { Point } from './initializer';
+import { Point } from '@maxgraph/core';
 import CoordinatesTranslator from './renderer/CoordinatesTranslator';
 import StyleComputer from './renderer/StyleComputer';
 

src/component/mxgraph/BpmnRenderer.ts

@@ -18,7 +18,7 @@ import type { BpmnGraph } from '../BpmnGraph';
 import type { Stylesheet, CellStateStyle } from '@maxgraph/core';
 
 import { AssociationDirectionKind, FlowKind, SequenceFlowKind, ShapeBpmnElementKind, ShapeUtil } from '../../../model/bpmn/internal';
-import { mxConstants, mxPerimeter } from '../initializer';
+import { constants, Perimeter } from '@maxgraph/core';
 import { BpmnStyleIdentifier, MarkerIdentifier, StyleDefault } from '../style';
 
 const arrowDefaultSize = 12;
@@ -171,7 +171,7 @@ export class StyleConfigurator {
     // label style
     style.verticalAlign = 'middle';
     style.align = 'center';
-    style[mxConstants.STYLE_SWIMLANE_LINE] = 0; // hide the line between the title region and the content area
+    style[constants.STYLE_SWIMLANE_LINE] = 0; // hide the line between the title region and the content area
     style.startSize = StyleDefault.LANE_LABEL_SIZE;
     style.fillColor = StyleDefault.LANE_LABEL_FILL_COLOR;
 
@@ -182,9 +182,9 @@ export class StyleConfigurator {
     for (const kind of ShapeUtil.eventKinds()) {
       const style: CellStateStyle = {};
       style.shape = kind;
-      style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
-      style[mxConstants.STYLE_STROKEWIDTH] = kind == ShapeBpmnElementKind.EVENT_END ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN;
-      style[mxConstants.STYLE_VERTICAL_LABEL_POSITION] = mxConstants.ALIGN_BOTTOM;
+      style[constants.STYLE_PERIMETER] = Perimeter.EllipsePerimeter;
+      style[constants.STYLE_STROKEWIDTH] = kind == ShapeBpmnElementKind.EVENT_END ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN;
+      style[constants.STYLE_VERTICAL_LABEL_POSITION] = constants.ALIGN_BOTTOM;
       this.putCellStyle(kind, style);
     }
   }
@@ -193,23 +193,23 @@ export class StyleConfigurator {
     const style: CellStateStyle = {};
     style.shape = ShapeBpmnElementKind.TEXT_ANNOTATION;
     style.verticalAlign = 'middle';
-    style.align = mxConstants.ALIGN_LEFT;
-    style[mxConstants.STYLE_SPACING_LEFT] = 5;
+    style.align = constants.ALIGN_LEFT;
+    style[constants.STYLE_SPACING_LEFT] = 5;
     style.fillColor = StyleDefault.TEXT_ANNOTATION_FILL_COLOR;
-    style[mxConstants.STYLE_STROKEWIDTH] = StyleDefault.STROKE_WIDTH_THIN;
+    style[constants.STYLE_STROKEWIDTH] = StyleDefault.STROKE_WIDTH_THIN;
     this.putCellStyle(ShapeBpmnElementKind.TEXT_ANNOTATION, style);
   }
 
   private configureGroupStyle(): void {
     const style: CellStateStyle = {};
-    style[mxConstants.STYLE_ROUNDED] = true;
+    style[constants.STYLE_ROUNDED] = true;
     style.dashed = true;
     style.dashPattern = '7 4 1 4';
-    style[mxConstants.STYLE_STROKEWIDTH] = StyleDefault.STROKE_WIDTH_THIN;
+    style[constants.STYLE_STROKEWIDTH] = StyleDefault.STROKE_WIDTH_THIN;
     style.fillColor = StyleDefault.GROUP_FILL_COLOR;
     // Default label positioning
     style.align = 'center';
-    style.verticalAlign = mxConstants.ALIGN_TOP;
+    style.verticalAlign = constants.ALIGN_TOP;
 
     this.putCellStyle(ShapeBpmnElementKind.GROUP, style);
   }
@@ -218,9 +218,9 @@ export class StyleConfigurator {
     for (const kind of ShapeUtil.activityKinds()) {
       const style: CellStateStyle = {};
       style.shape = kind;
-      style[mxConstants.STYLE_ROUNDED] = true; // required by the BPMN specification
+      style[constants.STYLE_ROUNDED] = true; // required by the BPMN specification
       style.verticalAlign = 'middle';
-      style[mxConstants.STYLE_STROKEWIDTH] = kind == ShapeBpmnElementKind.CALL_ACTIVITY ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN;
+      style[constants.STYLE_STROKEWIDTH] = kind == ShapeBpmnElementKind.CALL_ACTIVITY ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN;
       this.putCellStyle(kind, style);
     }
   }
@@ -229,13 +229,13 @@ export class StyleConfigurator {
     for (const kind of ShapeUtil.gatewayKinds()) {
       const style: CellStateStyle = {};
       style.shape = kind;
-      style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RhombusPerimeter;
-      style[mxConstants.STYLE_STROKEWIDTH] = StyleDefault.STROKE_WIDTH_THIN;
-      style.verticalAlign = mxConstants.ALIGN_TOP;
+      style[constants.STYLE_PERIMETER] = Perimeter.RhombusPerimeter;
+      style[constants.STYLE_STROKEWIDTH] = StyleDefault.STROKE_WIDTH_THIN;
+      style.verticalAlign = constants.ALIGN_TOP;
 
       // Default label positioning
-      style[mxConstants.STYLE_LABEL_POSITION] = mxConstants.ALIGN_LEFT;
-      style[mxConstants.STYLE_VERTICAL_LABEL_POSITION] = mxConstants.ALIGN_TOP;
+      style[constants.STYLE_LABEL_POSITION] = constants.ALIGN_LEFT;
+      style[constants.STYLE_VERTICAL_LABEL_POSITION] = constants.ALIGN_TOP;
 
       this.putCellStyle(kind, style);
     }
@@ -247,10 +247,10 @@ export class StyleConfigurator {
 
     style.shape = BpmnStyleIdentifier.EDGE;
     style.endSize = arrowDefaultSize;
-    style[mxConstants.STYLE_STROKEWIDTH] = 1.5;
-    style[mxConstants.STYLE_ROUNDED] = true;
+    style[constants.STYLE_STROKEWIDTH] = 1.5;
+    style[constants.STYLE_ROUNDED] = true;
     style.arcSize = 5;
-    style.verticalAlign = mxConstants.ALIGN_BOTTOM;
+    style.verticalAlign = constants.ALIGN_BOTTOM;
 
     // The end arrow must be redefined in specific style
     delete style.endArrow;
@@ -272,13 +272,13 @@ export class StyleConfigurator {
 }
 
 function configureCommonDefaultStyle(style: CellStateStyle): void {
-  style[mxConstants.STYLE_FONTFAMILY] = StyleDefault.DEFAULT_FONT_FAMILY;
-  style[mxConstants.STYLE_FONTSIZE] = StyleDefault.DEFAULT_FONT_SIZE;
-  style[mxConstants.STYLE_FONTCOLOR] = StyleDefault.DEFAULT_FONT_COLOR;
+  style[constants.STYLE_FONTFAMILY] = StyleDefault.DEFAULT_FONT_FAMILY;
+  style[constants.STYLE_FONTSIZE] = StyleDefault.DEFAULT_FONT_SIZE;
+  style[constants.STYLE_FONTCOLOR] = StyleDefault.DEFAULT_FONT_COLOR;
   style.fillColor = StyleDefault.DEFAULT_FILL_COLOR;
-  style[mxConstants.STYLE_STROKECOLOR] = StyleDefault.DEFAULT_STROKE_COLOR;
-  style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = mxConstants.NONE;
+  style[constants.STYLE_STROKECOLOR] = StyleDefault.DEFAULT_STROKE_COLOR;
+  style[constants.STYLE_LABEL_BACKGROUNDCOLOR] = constants.NONE;
 
   // only works with html labels (enabled by GraphConfigurator)
-  style[mxConstants.STYLE_WHITE_SPACE] = 'wrap';
+  style[constants.STYLE_WHITE_SPACE] = 'wrap';
 }

src/component/mxgraph/config/StyleConfigurator.ts

@@ -17,7 +17,7 @@ limitations under the License.
 import type { AbstractCanvas2D, Cell, Point, Shape } from '@maxgraph/core';
 
 import { ShapeBpmnElementKind } from '../../../model/bpmn/internal';
-import { CellRenderer, mxgraph } from '../initializer';
+import { CellRenderer, MarkerShape } from '@maxgraph/core';
 import {
   BusinessRuleTaskShape,
   CallActivityShape,
@@ -102,5 +102,5 @@ const dashMarkerFactory = (
 };
 
 export const registerEdgeMarkers = (): void => {
-  mxgraph.mxMarker.addMarker(MarkerIdentifier.ARROW_DASH, dashMarkerFactory);
+  MarkerShape.addMarker(MarkerIdentifier.ARROW_DASH, dashMarkerFactory);
 };