refactor: remove reference to "mx" in classes, types and JSDoc

There is no need to prefix our own elements by "mx" when we extend the mxGraph code.
This makes the code easier to read, and eventually, prepare the switch to maxGraph.

These changes only apply to bpmn-visualization internals, there is no impact for end users.

Author: tbouffard

src/component/mxgraph/BpmnCellRenderer.ts

@@ -18,7 +18,7 @@ import type { IconPainter } from './shape/render';
 import type { mxCellState, mxImageShape, mxShape } from 'mxgraph';
 
 import { mxgraph, mxRectangle } from './initializer';
-import { MxGraphCustomOverlay } from './overlay/custom-overlay';
+import { CustomCellOverlay } from './overlay/custom-overlay';
 import { OverlayBadgeShape } from './overlay/shapes';
 import { overrideCreateSvgCanvas } from './shape/utils';
 
@@ -45,7 +45,7 @@ export class BpmnCellRenderer extends mxgraph.mxCellRenderer {
         let overlayShape: mxShape;
 
         // START bpmn-visualization CUSTOMIZATION
-        if (currentOverlay instanceof MxGraphCustomOverlay) {
+        if (currentOverlay instanceof CustomCellOverlay) {
           overlayShape = new OverlayBadgeShape(currentOverlay.label, new mxRectangle(0, 0, 0, 0), currentOverlay.style);
         } else {
           overlayShape = new mxgraph.mxImageShape(new mxRectangle(0, 0, 0, 0), currentOverlay.image.src);

src/component/mxgraph/BpmnGraph.ts

@@ -51,7 +51,7 @@ export class BpmnGraph extends mxgraph.mxGraph {
    *
    * @param callbackFunction the update to be made in the transaction.
    *
-   * @experimental subject to change, may move to a subclass of `mxGraphModel`
+   * @experimental subject to change, may move to a subclass of {@link mxGraphModel}
    * @alpha
    */
   batchUpdate(callbackFunction: () => void): void {

src/component/mxgraph/GraphConfigurator.ts

@@ -19,7 +19,7 @@ import { registerEdgeMarkers, registerShapes } from './config/register-style-def
 import { StyleConfigurator } from './config/StyleConfigurator';
 
 /**
- * Configure the BpmnMxGraph graph that can be used by the lib
+ * Configure the {@link BpmnGraph} graph that can be used by the lib
  * <ul>
  *     <li>styles
  *     <li>shapes
@@ -52,8 +52,8 @@ export default class GraphConfigurator {
     this.graph.setConstrainChildren(false);
     this.graph.setExtendParents(false);
 
-    // Disable folding for container mxCell (pool, lane, sub process, call activity) because we don't need it.
-    // This also prevents requesting unavailable images (see #185) as we don't override BpmnMxGraph folding default images.
+    // Disable folding for container cells (pool, lane, sub process, call activity) because we don't need it.
+    // This also prevents requesting unavailable images (see #185) as we don't override BpmnGraph folding default images.
     this.graph.foldingEnabled = false;
   }
 }

src/component/mxgraph/overlay/converter.ts

@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import type { MxGraphCustomOverlayOptions, MxGraphCustomOverlayPosition, MxGraphCustomOverlayStyle } from './custom-overlay';
+import type { CustomCellOverlayOptions, CustomCellOverlayPosition, CustomCellOverlayStyle } from './custom-overlay';
 import type { Overlay, OverlayFont, OverlayPosition, OverlayFill, OverlayStroke } from '../../registry';
 
 import { StyleDefault } from '../style';
 
-const overlayPositions = new Map<OverlayPosition, MxGraphCustomOverlayPosition>([
+const overlayPositions = new Map<OverlayPosition, CustomCellOverlayPosition>([
   // Edge
   ['start', { horizontalAlign: 'left', verticalAlign: 'top' }],
   ['middle', { horizontalAlign: 'center', verticalAlign: 'top' }],
@@ -35,30 +35,30 @@ const overlayPositions = new Map<OverlayPosition, MxGraphCustomOverlayPosition>(
   ['middle-right', { horizontalAlign: 'right', verticalAlign: 'middle' }],
 ]);
 
-const convertPosition = (overlay: Overlay): MxGraphCustomOverlayPosition => overlayPositions.get(overlay.position);
+const convertPosition = (overlay: Overlay): CustomCellOverlayPosition => overlayPositions.get(overlay.position);
 
-const convertFill = (convertedStyle: MxGraphCustomOverlayStyle, apiFill: OverlayFill): void => {
+const convertFill = (convertedStyle: CustomCellOverlayStyle, apiFill: OverlayFill): void => {
   if (apiFill) {
     convertedStyle.fill.color = apiFill.color ?? convertedStyle.fill.color;
     convertedStyle.fill.opacity = apiFill.opacity ?? convertedStyle.fill.opacity;
   }
 };
 
-const convertStroke = (convertedStyle: MxGraphCustomOverlayStyle, apiStroke: OverlayStroke): void => {
+const convertStroke = (convertedStyle: CustomCellOverlayStyle, apiStroke: OverlayStroke): void => {
   if (apiStroke) {
     convertedStyle.stroke.color = apiStroke.color ?? convertedStyle.stroke.color;
     convertedStyle.stroke.width = apiStroke.width ?? convertedStyle.stroke.width;
   }
 };
 
-const convertFont = (convertedStyle: MxGraphCustomOverlayStyle, apiFont: OverlayFont): void => {
+const convertFont = (convertedStyle: CustomCellOverlayStyle, apiFont: OverlayFont): void => {
   if (apiFont) {
     convertedStyle.font.color = apiFont.color ?? convertedStyle.font.color;
     convertedStyle.font.size = apiFont.size ?? convertedStyle.font.size;
   }
 };
 
-const convertStyle = (overlay: Overlay): MxGraphCustomOverlayStyle => {
+const convertStyle = (overlay: Overlay): CustomCellOverlayStyle => {
   // recompute the style at each call to ensure we consider default changes that could occur after lib initialization
   const defaultStyle = {
     fill: { color: StyleDefault.DEFAULT_OVERLAY_FILL_COLOR.valueOf(), opacity: StyleDefault.DEFAULT_OVERLAY_FILL_OPACITY.valueOf() },
@@ -67,7 +67,7 @@ const convertStyle = (overlay: Overlay): MxGraphCustomOverlayStyle => {
   };
 
   const style = overlay.style;
-  const convertedStyle = { ...defaultStyle } as MxGraphCustomOverlayStyle;
+  const convertedStyle = { ...defaultStyle } as CustomCellOverlayStyle;
   if (!style) {
     return convertedStyle;
   }
@@ -80,7 +80,7 @@ const convertStyle = (overlay: Overlay): MxGraphCustomOverlayStyle => {
 };
 
 export class OverlayConverter {
-  convert(overlay: Overlay): MxGraphCustomOverlayOptions {
+  convert(overlay: Overlay): CustomCellOverlayOptions {
     const position = convertPosition(overlay);
     const style = convertStyle(overlay);
     return { position, style };

src/component/mxgraph/overlay/custom-overlay.ts

@@ -22,24 +22,24 @@ import { mxgraph, mxConstants, mxPoint, mxRectangle } from '../initializer';
 export type VerticalAlignType = 'bottom' | 'middle' | 'top';
 export type HorizontalAlignType = 'left' | 'center' | 'right';
 
-export interface MxGraphCustomOverlayOptions {
-  position: MxGraphCustomOverlayPosition;
-  style: MxGraphCustomOverlayStyle;
+export interface CustomCellOverlayOptions {
+  position: CustomCellOverlayPosition;
+  style: CustomCellOverlayStyle;
 }
 
-export interface MxGraphCustomOverlayPosition {
+export interface CustomCellOverlayPosition {
   horizontalAlign?: HorizontalAlignType;
   verticalAlign?: VerticalAlignType;
 }
 
-export type MxGraphCustomOverlayStyle = Required<OverlayStyle>;
+export type CustomCellOverlayStyle = Required<OverlayStyle>;
 
-export class MxGraphCustomOverlay extends mxgraph.mxCellOverlay {
-  readonly style: MxGraphCustomOverlayStyle;
+export class CustomCellOverlay extends mxgraph.mxCellOverlay {
+  readonly style: CustomCellOverlayStyle;
 
   constructor(
     public label: string,
-    options: MxGraphCustomOverlayOptions,
+    options: CustomCellOverlayOptions,
   ) {
     super(null, '', options.position.horizontalAlign, options.position.verticalAlign, null, 'default');
     this.style = options.style;

src/component/mxgraph/overlay/shapes.ts

@@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import type { MxGraphCustomOverlayStyle } from './custom-overlay';
+import type { CustomCellOverlayStyle } from './custom-overlay';
 import type { mxRectangle } from 'mxgraph';
 
 import { mxgraph } from '../initializer';
 
 export class OverlayBadgeShape extends mxgraph.mxText {
-  constructor(value: string, bounds: mxRectangle, style: MxGraphCustomOverlayStyle) {
+  constructor(value: string, bounds: mxRectangle, style: CustomCellOverlayStyle) {
     super(
       value,
       bounds,

src/component/mxgraph/overlay/updater.ts

@@ -20,7 +20,7 @@ import type { BpmnGraph } from '../BpmnGraph';
 import { ensureIsArray } from '../../helpers/array-utils';
 
 import { OverlayConverter } from './converter';
-import { MxGraphCustomOverlay } from './custom-overlay';
+import { CustomCellOverlay } from './custom-overlay';
 
 export function createNewOverlaysUpdater(graph: BpmnGraph): OverlaysUpdater {
   return new OverlaysUpdater(graph, new OverlayConverter());
@@ -38,7 +38,7 @@ export class OverlaysUpdater {
       return;
     }
     for (const overlay of ensureIsArray(overlays)) {
-      const bpmnOverlay = new MxGraphCustomOverlay(overlay.label, this.overlayConverter.convert(overlay));
+      const bpmnOverlay = new CustomCellOverlay(overlay.label, this.overlayConverter.convert(overlay));
       this.graph.addCellOverlay(cell, bpmnOverlay);
     }
   }

src/component/mxgraph/renderer/CoordinatesTranslator.ts

@@ -37,8 +37,8 @@ export default class CoordinatesTranslator {
     return new mxPoint(relativeX, relativeY);
   }
 
-  // Returns the translation to be applied to a cell whose mxGeometry x and y values are expressed with absolute coordinates
-  // (i.e related to the graph default parent) you want to assign as parent to the cell passed as argument of this function.
+  // Returns the translation to be applied to a cell whose Geometry x and y values are expressed with absolute coordinates
+  // (i.e. related to the graph default parent) you want to assign as parent to the cell passed as argument of this function.
   // That way, you will be able to express the cell coordinates as relative to its parent cell.
   //
   // This implementation is taken from the example described in the documentation of mxgraph#getTranslateForRoot (4.1.1)
@@ -60,10 +60,10 @@ export default class CoordinatesTranslator {
   }
 
   /**
-   * Compute the center of the provided `mxCell` for absolute geometry: this is the center point of a segment whose edges
-   * are the terminal points of the mxCell geometry points. Returns `undefined` if the 2 terminal points are not available.
+   * Compute the center of the provided `Cell` for absolute geometry: this is the center point of a segment whose edges
+   * are the terminal points of the Cell geometry points. Returns `undefined` if the 2 terminal points are not available.
    *
-   * The center coordinates are given in the same referential as the `mxCell`, so relative to its parent.
+   * The center coordinates are given in the same referential as the `Cell`, so relative to its parent.
    */
   computeEdgeCenter(edge: mxCell): mxPointType {
     const points: mxPointType[] = edge.geometry.points;

src/component/mxgraph/renderer/style-utils.ts

@@ -23,7 +23,7 @@ import { BpmnStyleIdentifier } from '../style/identifiers';
 /**
  * Compute the all class names associated to a cell in a hyphen case form.
  *
- * @param cell the `mxCell` related to the BPMN element.
+ * @param cell the `Cell` related to the BPMN element.
  * @param isLabel the boolean that indicates if class must be computed for label.
  * @internal
  */
@@ -34,7 +34,7 @@ export function computeAllBpmnClassNamesOfCell(cell: mxCell, isLabel: boolean):
 /**
  * Compute the all class names associated to a given bpmn element in a hyphen case form.
  *
- * @param style the part of the mxCell style related to a {@link BpmnElementKind}. Message flow icon is a special case, as it is not related to `BpmnElementKind`.
+ * @param style the part of the Cell style related to a {@link BpmnElementKind}. Message flow icon is a special case, as it is not related to `BpmnElementKind`.
  * @param isLabel the boolean that indicates if class must be computed for label.
  * @internal exported for testing purpose
  */

src/component/mxgraph/shape/utils.ts

@@ -31,7 +31,7 @@ export const overrideCreateSvgCanvas = function (shape: mxShape): void {
       const originalPointerEvents = this.pointerEvents;
       // Fix for issue https://github.com/process-analytics/bpmn-visualization-js/issues/920
       // This sets the "pointer-events" style property to "none" to avoid capturing the click.
-      // This cannot be generalized for all mxgraph use cases. For instance, in an editor mode, we should be able to edit the text by clicking on it.
+      // This cannot be generalized for all mxGraph use cases. For instance, in an editor mode, we should be able to edit the text by clicking on it.
       this.pointerEvents = false;
 
       const textCss = originalCanvasGetTextCss.bind(this)();