refactor: directly use mxGraph value objects

dev/ts/component/SvgExporter.ts

@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { mxgraph } from '../../../src/component/mxgraph/initializer';
-import type { mxGraph, mxSvgCanvas2D } from 'mxgraph';
+import { mxgraph, mxClient, mxConstants, mxSvgCanvas2D, mxUtils } from '../../../src/component/mxgraph/initializer';
+import type { mxGraph, mxSvgCanvas2D as mxSvgCanvas2DType } from 'mxgraph';
 
 interface SvgExportOptions {
   scale: number;
@@ -40,13 +40,13 @@ export class SvgExporter {
     // chrome and webkit: tainted canvas when svg contains foreignObject
     // also on brave --> probably fail on chromium based browsers
     // so disable foreign objects for such browsers
-    const isFirefox = mxgraph.mxClient.IS_FF;
+    const isFirefox = mxClient.IS_FF;
     return this.doSvgExport(isFirefox);
   }
 
   private doSvgExport(enableForeignObjectForLabel: boolean): string {
     const svgDocument = this.computeSvg({ scale: 1, border: 25, enableForeignObjectForLabel: enableForeignObjectForLabel });
-    const svgAsString = mxgraph.mxUtils.getXml(svgDocument);
+    const svgAsString = mxUtils.getXml(svgDocument);
     return `<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 ${svgAsString}
@@ -63,8 +63,8 @@ ${svgAsString}
     const viewScale = this.graph.view.scale;
 
     // Prepares SVG document that holds the output
-    const svgDoc = mxgraph.mxUtils.createXmlDocument();
-    const root = svgDoc.createElementNS(mxgraph.mxConstants.NS_SVG, 'svg');
+    const svgDoc = mxUtils.createXmlDocument();
+    const root = svgDoc.createElementNS(mxConstants.NS_SVG, 'svg');
 
     const s = scale / viewScale;
     const w = Math.max(1, Math.ceil(bounds.width * s) + 2 * border);
@@ -76,7 +76,7 @@ ${svgAsString}
     root.setAttribute('viewBox', (crisp ? '-0.5 -0.5' : '0 0') + ' ' + w + ' ' + h);
     svgDoc.appendChild(root);
 
-    const group = svgDoc.createElementNS(mxgraph.mxConstants.NS_SVG, 'g');
+    const group = svgDoc.createElementNS(mxConstants.NS_SVG, 'g');
     root.appendChild(group);
 
     const svgCanvas = this.createSvgCanvas(group);
@@ -100,15 +100,15 @@ ${svgAsString}
     return svgDoc;
   }
 
-  createSvgCanvas(node: Element): mxSvgCanvas2D {
+  createSvgCanvas(node: Element): mxSvgCanvas2DType {
     const canvas = new CanvasForExport(node);
     // from the draw.io code, may not be needed here
     canvas.pointerEvents = true;
     return canvas;
   }
 }
 
-class CanvasForExport extends mxgraph.mxSvgCanvas2D {
+class CanvasForExport extends mxSvgCanvas2D {
   // Convert HTML entities
   private htmlConverter = document.createElement('div');
 
@@ -167,7 +167,7 @@ class CanvasForExport extends mxgraph.mxSvgCanvas2D {
 
     try {
       this.htmlConverter.innerHTML = str;
-      str = mxgraph.mxUtils.extractTextWithWhitespace(this.htmlConverter.childNodes);
+      str = mxUtils.extractTextWithWhitespace(this.htmlConverter.childNodes);
 
       // Workaround for substring breaking double byte UTF
       const exp = Math.ceil((2 * w) / this.state.fontSize);
@@ -192,7 +192,7 @@ class CanvasForExport extends mxgraph.mxSvgCanvas2D {
 
       // Uses result and adds ellipsis if more than 1 char remains
       if (result.length < str.length && str.length - result.length > 1) {
-        str = mxgraph.mxUtils.trim(result.join('')) + '...';
+        str = mxUtils.trim(result.join('')) + '...';
       }
     } catch (e) {
       console.warn('Error while computing txt label', e);

dev/ts/component/ThemedBpmnVisualization.ts

@@ -16,7 +16,7 @@ limitations under the License.
 
 import { BpmnVisualization, FlowKind, ShapeBpmnElementKind, ShapeUtil, StyleConfigurator, StyleDefault } from '../../../src/bpmn-visualization';
 import { logStartup } from '../utils/internal-helpers';
-import { mxgraph } from '../../../src/component/mxgraph/initializer';
+import { mxConstants } from '../../../src/component/mxgraph/initializer';
 
 interface Theme {
   defaultFillColor: string;
@@ -189,8 +189,8 @@ export class ThemedBpmnVisualization extends BpmnVisualization {
 
     // directly access the 'styles' map to update values. Using stylesheet.getCellStyle returns a copy of the style
     const seqFlowStyle = stylesheet.styles[FlowKind.SEQUENCE_FLOW];
-    seqFlowStyle[mxgraph.mxConstants.STYLE_STROKECOLOR] = color;
-    seqFlowStyle[mxgraph.mxConstants.STYLE_FILLCOLOR] = color;
+    seqFlowStyle[mxConstants.STYLE_STROKECOLOR] = color;
+    seqFlowStyle[mxConstants.STYLE_FILLCOLOR] = color;
 
     logStartup('Sequence flows style updated');
   }

src/component/mxgraph/BpmnGraph.ts

@@ -18,7 +18,7 @@ import type { FitOptions, ZoomConfiguration } from '../options';
 import { FitType } from '../options';
 import { ensurePositiveValue, ensureValidZoomConfiguration } from '../helpers/validators';
 import { debounce, throttle } from 'lodash-es';
-import { mxgraph } from './initializer';
+import { mxgraph, mxEvent } from './initializer';
 import type { mxCellState, mxGraphView, mxPoint } from 'mxgraph';
 
 const zoomFactorIn = 1.25;
@@ -158,8 +158,8 @@ export class BpmnGraph extends mxgraph.mxGraph {
    */
   registerMouseWheelZoomListeners(config: ZoomConfiguration): void {
     config = ensureValidZoomConfiguration(config);
-    mxgraph.mxEvent.addMouseWheelListener(debounce(this.createMouseWheelZoomListener(true), config.debounceDelay), this.container);
-    mxgraph.mxEvent.addMouseWheelListener(throttle(this.createMouseWheelZoomListener(false), config.throttleDelay), this.container);
+    mxEvent.addMouseWheelListener(debounce(this.createMouseWheelZoomListener(true), config.debounceDelay), this.container);
+    mxEvent.addMouseWheelListener(throttle(this.createMouseWheelZoomListener(false), config.throttleDelay), this.container);
   }
 
   // Update the currentZoomLevel when performScaling is false, use the currentZoomLevel to set the scale otherwise
@@ -171,13 +171,13 @@ export class BpmnGraph extends mxgraph.mxGraph {
       const [offsetX, offsetY] = this.getEventRelativeCoordinates(evt);
       const [newScale, dx, dy] = this.getScaleAndTranslationDeltas(offsetX, offsetY);
       this.view.scaleAndTranslate(newScale, this.view.translate.x + dx, this.view.translate.y + dy);
-      mxgraph.mxEvent.consume(evt);
+      mxEvent.consume(evt);
     }
   }
 
   private createMouseWheelZoomListener(performScaling: boolean) {
     return (event: Event, up: boolean) => {
-      if (mxgraph.mxEvent.isConsumed(event)) {
+      if (mxEvent.isConsumed(event)) {
         return;
       }
       const evt = event as MouseEvent;

src/component/mxgraph/BpmnRenderer.ts

@@ -25,7 +25,7 @@ import StyleComputer from './renderer/StyleComputer';
 import type { BpmnGraph } from './BpmnGraph';
 import type { FitOptions, RendererOptions } from '../options';
 import type { RenderedModel } from '../registry/bpmn-model-registry';
-import { mxgraph } from './initializer';
+import { mxPoint } from './initializer';
 import type { mxCell } from 'mxgraph';
 
 /**
@@ -93,10 +93,10 @@ export class BpmnRenderer {
         if (edgeCenterCoordinate) {
           mxEdge.geometry.relative = false;
 
-          const labelBoundsRelativeCoordinateFromParent = this.coordinatesTranslator.computeRelativeCoordinates(mxEdge.parent, new mxgraph.mxPoint(labelBounds.x, labelBounds.y));
+          const labelBoundsRelativeCoordinateFromParent = this.coordinatesTranslator.computeRelativeCoordinates(mxEdge.parent, new mxPoint(labelBounds.x, labelBounds.y));
           const relativeLabelX = labelBoundsRelativeCoordinateFromParent.x + labelBounds.width / 2 - edgeCenterCoordinate.x;
           const relativeLabelY = labelBoundsRelativeCoordinateFromParent.y - edgeCenterCoordinate.y;
-          mxEdge.geometry.offset = new mxgraph.mxPoint(relativeLabelX, relativeLabelY);
+          mxEdge.geometry.offset = new mxPoint(relativeLabelX, relativeLabelY);
         }
       }
 
@@ -108,13 +108,13 @@ export class BpmnRenderer {
     if (edge.bpmnElement instanceof MessageFlow && edge.messageVisibleKind !== MessageVisibleKind.NONE) {
       const cell = this.graph.insertVertex(mxEdge, messageFowIconId(mxEdge.id), undefined, 0, 0, 20, 14, this.styleComputer.computeMessageFlowIconStyle(edge));
       cell.geometry.relative = true;
-      cell.geometry.offset = new mxgraph.mxPoint(-10, -7);
+      cell.geometry.offset = new mxPoint(-10, -7);
     }
   }
 
   private insertWaypoints(waypoints: Waypoint[], mxEdge: mxCell): void {
     if (waypoints) {
-      mxEdge.geometry.points = waypoints.map(waypoint => this.coordinatesTranslator.computeRelativeCoordinates(mxEdge.parent, new mxgraph.mxPoint(waypoint.x, waypoint.y)));
+      mxEdge.geometry.points = waypoints.map(waypoint => this.coordinatesTranslator.computeRelativeCoordinates(mxEdge.parent, new mxPoint(waypoint.x, waypoint.y)));
     }
   }
 
@@ -123,14 +123,14 @@ export class BpmnRenderer {
   }
 
   private insertVertex(parent: mxCell, id: string | null, value: string, bounds: Bounds, labelBounds: Bounds, style?: string): mxCell {
-    const vertexCoordinates = this.coordinatesTranslator.computeRelativeCoordinates(parent, new mxgraph.mxPoint(bounds.x, bounds.y));
+    const vertexCoordinates = this.coordinatesTranslator.computeRelativeCoordinates(parent, new mxPoint(bounds.x, bounds.y));
     const cell = this.graph.insertVertex(parent, id, value, vertexCoordinates.x, vertexCoordinates.y, bounds.width, bounds.height, style);
 
     if (labelBounds) {
       // label coordinates are relative in the cell referential coordinates
       const relativeLabelX = labelBounds.x - bounds.x;
       const relativeLabelY = labelBounds.y - bounds.y;
-      cell.geometry.offset = new mxgraph.mxPoint(relativeLabelX, relativeLabelY);
+      cell.geometry.offset = new mxPoint(relativeLabelX, relativeLabelY);
     }
     return cell;
   }

src/component/mxgraph/GraphCellUpdater.ts

@@ -18,7 +18,7 @@ import { isShapeStyleUpdate, setStyle, updateFill, updateFont, updateStroke } fr
 import { StyleManager } from './style/StyleManager';
 
 import type { BpmnGraph } from './BpmnGraph';
-import { mxgraph } from './initializer';
+import { mxConstants } from './initializer';
 import { BpmnStyleIdentifier } from './style';
 import type { Overlay, StyleUpdate } from '../registry';
 import type { CssRegistry } from '../registry/css-registry';
@@ -105,7 +105,7 @@ export default class GraphCellUpdater {
         this.styleManager.ensureStyleIsStored(cell);
 
         let cellStyle = cell.getStyle();
-        cellStyle = setStyle(cellStyle, mxgraph.mxConstants.STYLE_OPACITY, styleUpdate.opacity, ensureOpacityValue);
+        cellStyle = setStyle(cellStyle, mxConstants.STYLE_OPACITY, styleUpdate.opacity, ensureOpacityValue);
         cellStyle = updateStroke(cellStyle, styleUpdate.stroke);
         cellStyle = updateFont(cellStyle, styleUpdate.font);
 

src/component/mxgraph/GraphConfigurator.ts

@@ -19,7 +19,7 @@ import ShapeConfigurator from './config/ShapeConfigurator';
 import MarkerConfigurator from './config/MarkerConfigurator';
 import type { GlobalOptions } from '../options';
 import { BpmnGraph } from './BpmnGraph';
-import { mxgraph } from './initializer';
+import { mxEvent } from './initializer';
 import type { mxMouseEvent } from 'mxgraph';
 
 /**
@@ -66,13 +66,13 @@ export default class GraphConfigurator {
     const panningHandler = this.graph.panningHandler;
     if (options?.navigation?.enabled) {
       // Pan configuration
-      panningHandler.addListener(mxgraph.mxEvent.PAN_START, this.getPanningHandler('grab'));
-      panningHandler.addListener(mxgraph.mxEvent.PAN_END, this.getPanningHandler('default'));
+      panningHandler.addListener(mxEvent.PAN_START, this.getPanningHandler('grab'));
+      panningHandler.addListener(mxEvent.PAN_END, this.getPanningHandler('default'));
 
       panningHandler.usePopupTrigger = false; // only use the left button to trigger panning
       // Reimplement the function as we also want to trigger 'panning on cells' (ignoreCell to true) and only on left-click
       // The mxGraph standard implementation doesn't ignore right click in this case, so do it by ourselves
-      panningHandler.isForcePanningEvent = (me): boolean => mxgraph.mxEvent.isLeftMouseButton(me.getEvent()) || mxgraph.mxEvent.isMultiTouchEvent(me.getEvent());
+      panningHandler.isForcePanningEvent = (me): boolean => mxEvent.isLeftMouseButton(me.getEvent()) || mxEvent.isMultiTouchEvent(me.getEvent());
       this.graph.setPanning(true);
 
       // Zoom configuration