refactor: move overlay management out of BpmnElementsRegistry

src/component/mxgraph/GraphCellUpdater.ts

@@ -20,19 +20,17 @@ import { StyleManager } from './style/StyleManager';
 import type { BpmnGraph } from './BpmnGraph';
 import { mxConstants } from './initializer';
 import { BpmnStyleIdentifier } from './style';
-import type { Overlay, StyleUpdate } from '../registry';
+import type { StyleUpdate } from '../registry';
 import type { CssRegistry } from '../registry/css-registry';
-import { MxGraphCustomOverlay } from './overlay/custom-overlay';
 import { ensureIsArray } from '../helpers/array-utils';
-import { OverlayConverter } from './overlay/OverlayConverter';
 import { messageFlowIconId } from './BpmnRenderer';
 import { ensureOpacityValue } from '../helpers/validators';
 
 /**
  * @internal
  */
 export function newGraphCellUpdater(graph: BpmnGraph, cssRegistry: CssRegistry): GraphCellUpdater {
-  return new GraphCellUpdater(graph, new OverlayConverter(), new StyleManager(cssRegistry, graph.getModel()));
+  return new GraphCellUpdater(graph, new StyleManager(cssRegistry, graph.getModel()));
 }
 
 /**
@@ -41,7 +39,6 @@ export function newGraphCellUpdater(graph: BpmnGraph, cssRegistry: CssRegistry):
 export default class GraphCellUpdater {
   constructor(
     readonly graph: BpmnGraph,
-    readonly overlayConverter: OverlayConverter,
     private readonly styleManager: StyleManager,
   ) {}
 
@@ -69,25 +66,6 @@ export default class GraphCellUpdater {
     model.setStyle(cell, cellStyle);
   }
 
-  addOverlays(bpmnElementId: string, overlays: Overlay | Overlay[]): void {
-    const cell = this.graph.getModel().getCell(bpmnElementId);
-    if (!cell) {
-      return;
-    }
-    ensureIsArray(overlays).forEach(overlay => {
-      const bpmnOverlay = new MxGraphCustomOverlay(overlay.label, this.overlayConverter.convert(overlay));
-      this.graph.addCellOverlay(cell, bpmnOverlay);
-    });
-  }
-
-  removeAllOverlays(bpmnElementId: string): void {
-    const cell = this.graph.getModel().getCell(bpmnElementId);
-    if (!cell) {
-      return;
-    }
-    this.graph.removeCellOverlays(cell);
-  }
-
   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.

src/component/mxgraph/overlay/updater.ts

@@ -0,0 +1,51 @@
+/*
+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 type { BpmnGraph } from '../BpmnGraph';
+import { OverlayConverter } from './converter';
+import type { Overlay } from '../../registry';
+import { ensureIsArray } from '../../helpers/array-utils';
+import { MxGraphCustomOverlay } from './custom-overlay';
+
+export function createNewOverlaysUpdater(graph: BpmnGraph): OverlaysUpdater {
+  return new OverlaysUpdater(graph, new OverlayConverter());
+}
+
+export class OverlaysUpdater {
+  constructor(
+    readonly graph: BpmnGraph,
+    readonly overlayConverter: OverlayConverter,
+  ) {}
+
+  addOverlays(bpmnElementId: string, overlays: Overlay | Overlay[]): void {
+    const cell = this.graph.getModel().getCell(bpmnElementId);
+    if (!cell) {
+      return;
+    }
+    ensureIsArray(overlays).forEach(overlay => {
+      const bpmnOverlay = new MxGraphCustomOverlay(overlay.label, this.overlayConverter.convert(overlay));
+      this.graph.addCellOverlay(cell, bpmnOverlay);
+    });
+  }
+
+  removeAllOverlays(bpmnElementId: string): void {
+    const cell = this.graph.getModel().getCell(bpmnElementId);
+    if (!cell) {
+      return;
+    }
+    this.graph.removeCellOverlays(cell);
+  }
+}

src/component/registry/bpmn-elements-registry.ts

@@ -22,6 +22,8 @@ import type GraphCellUpdater from '../mxgraph/GraphCellUpdater';
 import { newGraphCellUpdater } from '../mxgraph/GraphCellUpdater';
 import { BpmnQuerySelectors } from './query-selectors';
 import type { BpmnElement, Overlay, StyleUpdate } from './types';
+import { createNewOverlaysRegistry } from './overlays-registry';
+import type { OverlaysRegistry } from './overlays-registry';
 import type { BpmnModelRegistry } from './bpmn-model-registry';
 import type { BpmnElementKind } from '../../model/bpmn/internal';
 
@@ -30,7 +32,13 @@ import type { BpmnElementKind } from '../../model/bpmn/internal';
  */
 export function newBpmnElementsRegistry(bpmnModelRegistry: BpmnModelRegistry, graph: BpmnGraph): BpmnElementsRegistry {
   const cssRegistry = new CssRegistry();
-  return new BpmnElementsRegistry(bpmnModelRegistry, new HtmlElementRegistry(graph.container, new BpmnQuerySelectors()), cssRegistry, newGraphCellUpdater(graph, cssRegistry));
+  return new BpmnElementsRegistry(
+    bpmnModelRegistry,
+    new HtmlElementRegistry(graph.container, new BpmnQuerySelectors()),
+    cssRegistry,
+    newGraphCellUpdater(graph, cssRegistry),
+    createNewOverlaysRegistry(graph),
+  );
 }
 
 /**
@@ -61,6 +69,7 @@ export class BpmnElementsRegistry {
     private htmlElementRegistry: HtmlElementRegistry,
     private cssRegistry: CssRegistry,
     private graphCellUpdater: GraphCellUpdater,
+    private overlaysRegistry: OverlaysRegistry,
   ) {
     this.bpmnModelRegistry.registerOnLoadCallback(() => {
       this.cssRegistry.clear();
@@ -297,7 +306,7 @@ export class BpmnElementsRegistry {
    * @param overlays The overlays to add to the BPMN element
    */
   addOverlays(bpmnElementId: string, overlays: Overlay | Overlay[]): void {
-    this.graphCellUpdater.addOverlays(bpmnElementId, overlays);
+    this.overlaysRegistry.addOverlays(bpmnElementId, overlays);
   }
 
   /**
@@ -316,7 +325,7 @@ export class BpmnElementsRegistry {
    * @param bpmnElementId The BPMN id of the element where to remove the overlays
    */
   removeAllOverlays(bpmnElementId: string): void {
-    this.graphCellUpdater.removeAllOverlays(bpmnElementId);
+    this.overlaysRegistry.removeAllOverlays(bpmnElementId);
   }
 
   /**

src/component/registry/overlays-registry.ts

@@ -0,0 +1,36 @@
+/*
+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 type { Overlay } from './types';
+import type { OverlaysUpdater } from '../mxgraph/overlay/updater';
+import { createNewOverlaysUpdater } from '../mxgraph/overlay/updater';
+import type { BpmnGraph } from '../mxgraph/BpmnGraph';
+
+export function createNewOverlaysRegistry(graph: BpmnGraph): OverlaysRegistry {
+  return new OverlaysRegistry(createNewOverlaysUpdater(graph));
+}
+
+export class OverlaysRegistry {
+  constructor(private overlaysUpdater: OverlaysUpdater) {}
+
+  addOverlays(bpmnElementId: string, overlays: Overlay | Overlay[]): void {
+    this.overlaysUpdater.addOverlays(bpmnElementId, overlays);
+  }
+
+  removeAllOverlays(bpmnElementId: string): void {
+    this.overlaysUpdater.removeAllOverlays(bpmnElementId);
+  }
+}

test/unit/component/mxgraph/overlay/OverlayConverter.test.ts → test/unit/component/mxgraph/overlay/converter.test.ts

@@ -17,7 +17,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { OverlayConverter } from '@lib/component/mxgraph/overlay/OverlayConverter';
+import { OverlayConverter } from '@lib/component/mxgraph/overlay/converter';
 import type { MxGraphCustomOverlayPosition } from '@lib/component/mxgraph/overlay/custom-overlay';
 import { StyleDefault } from '@lib/component/mxgraph/style';
 import type { Overlay, OverlayPosition } from '@lib/component/registry/types';