refactor: split internal registries

src/component/BpmnVisualization.ts

@@ -20,7 +20,7 @@ import { newBpmnParser } from './parser/BpmnParser';
 import type { BpmnGraph } from './mxgraph/BpmnGraph';
 import type { GlobalOptions, LoadOptions, ParserOptions, RendererOptions } from './options';
 import type { BpmnElementsRegistry } from './registry';
-import { newBpmnElementsRegistry } from './registry/bpmn-elements-registry';
+import { createNewBpmnElementsRegistry } from './registry/bpmn-elements-registry';
 import { BpmnModelRegistry } from './registry/bpmn-model-registry';
 import { htmlElement } from './helpers/dom-utils';
 import { Navigation } from './navigation';
@@ -79,7 +79,7 @@ export class BpmnVisualization {
     // other configurations
     this.navigation = new Navigation(this.graph);
     this.bpmnModelRegistry = new BpmnModelRegistry();
-    this.bpmnElementsRegistry = newBpmnElementsRegistry(this.bpmnModelRegistry, this.graph);
+    this.bpmnElementsRegistry = createNewBpmnElementsRegistry(this.bpmnModelRegistry, this.graph);
     this.parserOptions = options?.parser;
   }
 

src/component/mxgraph/overlay/updater.ts

@@ -26,8 +26,8 @@ export function createNewOverlaysUpdater(graph: BpmnGraph): OverlaysUpdater {
 
 export class OverlaysUpdater {
   constructor(
-    readonly graph: BpmnGraph,
-    readonly overlayConverter: OverlayConverter,
+    private readonly graph: BpmnGraph,
+    private readonly overlayConverter: OverlayConverter,
   ) {}
 
   addOverlays(bpmnElementId: string, overlays: Overlay | Overlay[]): void {

src/component/mxgraph/style/css-classes-updater.ts

@@ -0,0 +1,52 @@
+/*
+Copyright 2023 Bonitasoft S.A.
+
+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 { BpmnStyleIdentifier } from './index';
+import { setStyle } from './utils';
+import type { BpmnGraph } from '../BpmnGraph';
+import { messageFlowIconId } from '../BpmnRenderer';
+
+/**
+ * @internal
+ */
+export function createNewCssClassesUpdater(graph: BpmnGraph): CssClassesUpdater {
+  return new CssClassesUpdater(graph);
+}
+
+/**
+ * @internal
+ */
+export class CssClassesUpdater {
+  constructor(private readonly graph: BpmnGraph) {}
+
+  updateAndRefreshCssClassesOfCell(bpmnElementId: string, cssClasses: string[]): void {
+    this.updateAndRefreshCssClassesOfElement(bpmnElementId, cssClasses);
+    // special case: message flow icon is stored in a dedicated Cell, so it must be kept in sync
+    this.updateAndRefreshCssClassesOfElement(messageFlowIconId(bpmnElementId), cssClasses);
+  }
+
+  private updateAndRefreshCssClassesOfElement(elementId: string, cssClasses: string[]): void {
+    const model = this.graph.getModel();
+    const cell = model.getCell(elementId);
+    if (!cell) {
+      return;
+    }
+
+    let cellStyle = cell.getStyle();
+    cellStyle = setStyle(cellStyle, BpmnStyleIdentifier.EXTRA_CSS_CLASSES, cssClasses.join(','));
+    model.setStyle(cell, cellStyle);
+  }
+}

src/component/mxgraph/GraphCellUpdater.ts → src/component/mxgraph/style/style-updater.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 Bonitasoft S.A.
+Copyright 2023 Bonitasoft S.A.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,56 +14,36 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { isShapeStyleUpdate, setStyle, updateFill, updateFont, updateStroke } from './style/utils';
-import { StyleManager } from './style/StyleManager';
-
-import type { BpmnGraph } from './BpmnGraph';
-import { mxConstants } from './initializer';
-import { BpmnStyleIdentifier } from './style';
-import type { StyleUpdate } from '../registry';
-import type { CssRegistry } from '../registry/css-registry';
-import { ensureIsArray } from '../helpers/array-utils';
-import { messageFlowIconId } from './BpmnRenderer';
-import { ensureOpacityValue } from '../helpers/validators';
-
-/**
- * @internal
- */
-export function newGraphCellUpdater(graph: BpmnGraph, cssRegistry: CssRegistry): GraphCellUpdater {
-  return new GraphCellUpdater(graph, new StyleManager(cssRegistry, graph.getModel()));
+import type { mxCell, mxGraphModel } from 'mxgraph';
+import { BpmnStyleIdentifier } from '.';
+import { getStyleValue, isShapeStyleUpdate, setStyle, updateFill, updateFont, updateStroke } from './utils';
+import { mxConstants } from '../initializer';
+import type { BpmnGraph } from '../BpmnGraph';
+import { messageFlowIconId } from '../BpmnRenderer';
+import { ensureIsArray } from '../../helpers/array-utils';
+import { ensureOpacityValue } from '../../helpers/validators';
+import type { StyleUpdate } from '../../registry';
+
+export function createNewStyleUpdater(graph: BpmnGraph): StyleUpdater {
+  return new StyleUpdater(graph, new StyleManager(graph.getModel()));
 }
 
-/**
- * @internal
- */
-export default class GraphCellUpdater {
+// The message flow icon is stored in a dedicated Cell, so it must be kept in sync
+const withCellIdsOfMessageFlowIcons = (bpmnElementIds: string | string[]): string[] => {
+  const cellIds = ensureIsArray<string>(bpmnElementIds);
+  return cellIds.concat(cellIds.map(id => messageFlowIconId(id)));
+};
+
+export class StyleUpdater {
   constructor(
-    readonly graph: BpmnGraph,
+    private readonly graph: BpmnGraph,
     private readonly styleManager: StyleManager,
   ) {}
 
   clear(): void {
     this.styleManager.clear();
   }
 
-  updateAndRefreshCssClassesOfCell(bpmnElementId: string, cssClasses: string[]): void {
-    this.updateAndRefreshCssClassesOfElement(bpmnElementId, cssClasses);
-    // special case: message flow icon is stored in a dedicated Cell, so it must be kept in sync
-    this.updateAndRefreshCssClassesOfElement(messageFlowIconId(bpmnElementId), cssClasses);
-  }
-
-  private updateAndRefreshCssClassesOfElement(elementId: string, cssClasses: string[]): void {
-    const model = this.graph.getModel();
-    const cell = model.getCell(elementId);
-    if (!cell) {
-      return;
-    }
-
-    let cellStyle = cell.getStyle();
-    cellStyle = setStyle(cellStyle, BpmnStyleIdentifier.EXTRA_CSS_CLASSES, cssClasses.join(','));
-    model.setStyle(cell, cellStyle);
-  }
-
   updateStyle(bpmnElementIds: string | string[], styleUpdate: StyleUpdate): void {
     if (!styleUpdate) {
       // We don't want to create an empty transaction and verify if there are cells with id include in bpmnElementIds.
@@ -93,7 +73,7 @@ export default class GraphCellUpdater {
           cellStyle = updateFill(cellStyle, styleUpdate.fill);
         }
 
-        this.graph.model.setStyle(cell, cellStyle);
+        model.setStyle(cell, cellStyle);
       }
     });
   }
@@ -111,8 +91,47 @@ export default class GraphCellUpdater {
   }
 }
 
-// The message flow icon is stored in a dedicated Cell, so it must be kept in sync
-function withCellIdsOfMessageFlowIcons(bpmnElementIds: string | string[]): string[] {
-  const cellIds = ensureIsArray<string>(bpmnElementIds);
-  return cellIds.concat(cellIds.map(id => messageFlowIconId(id)));
+const cssClassesStyleIdentifier = BpmnStyleIdentifier.EXTRA_CSS_CLASSES;
+class StyleManager {
+  private stylesCache: Map<string, string> = new Map();
+
+  constructor(private readonly model: mxGraphModel) {}
+
+  clear(): void {
+    this.stylesCache.clear();
+  }
+
+  resetAllStyles(): void {
+    for (const cellId of this.stylesCache.keys()) {
+      this.resetStyle(cellId, this.stylesCache.get(cellId));
+    }
+  }
+
+  /**
+   * Resets the style of a cell and applies its CSS classes.
+   *
+   * @param cellId The ID of the mxCell whose style is to be reset.
+   */
+  resetStyleIfIsStored(cellId: string): void {
+    const style = this.stylesCache.get(cellId);
+    if (style) {
+      this.resetStyle(cellId, style);
+    }
+  }
+
+  private resetStyle(cellId: string, initialStyle: string): void {
+    const cell = this.model.getCell(cellId);
+    const cssClasses = getStyleValue(cell.getStyle(), cssClassesStyleIdentifier, '');
+    const styleWithCssClasses = setStyle(initialStyle, cssClassesStyleIdentifier, cssClasses);
+    this.model.setStyle(cell, styleWithCssClasses);
+
+    this.stylesCache.delete(cellId);
+  }
+
+  ensureStyleIsStored(cell: mxCell): void {
+    const cellId = cell.getId();
+    if (!this.stylesCache.has(cellId)) {
+      this.stylesCache.set(cellId, cell.getStyle());
+    }
+  }
 }

src/component/mxgraph/style/utils.ts

@@ -110,6 +110,13 @@ export const updateFont = (cellStyle: string, font: Font): string => {
   return cellStyle;
 };
 
+export const getStyleValue = (cellStyle: string, key: string, defaultValue: string): string =>
+  cellStyle
+    ?.split(';')
+    .map(entry => entry.split('='))
+    .filter(([k]) => k === key)
+    .map(([, v]) => v)[0] ?? defaultValue;
+
 const convertDirection = (direction: GradientDirection): string => {
   switch (direction) {
     case 'right-to-left':