diff --git a/src/component/mxgraph/GraphCellUpdater.ts b/src/component/mxgraph/GraphCellUpdater.ts index 37cbbdb12c..5291d15694 100644 --- a/src/component/mxgraph/GraphCellUpdater.ts +++ b/src/component/mxgraph/GraphCellUpdater.ts @@ -39,7 +39,11 @@ export function newGraphCellUpdater(graph: BpmnGraph, cssRegistry: CssRegistry): * @internal */ export default class GraphCellUpdater { - constructor(readonly graph: BpmnGraph, readonly overlayConverter: OverlayConverter, readonly styleManager: StyleManager) {} + constructor(readonly graph: BpmnGraph, readonly overlayConverter: OverlayConverter, private readonly styleManager: StyleManager) {} + + clear(): void { + this.styleManager.clear(); + } updateAndRefreshCssClassesOfCell(bpmnElementId: string, cssClasses: string[]): void { this.updateAndRefreshCssClassesOfElement(bpmnElementId, cssClasses); @@ -54,9 +58,9 @@ export default class GraphCellUpdater { return; } - let cellStyle = cell.getStyle(); - this.styleManager.storeStyleIfIsNotStored(cell, cellStyle); + this.styleManager.ensureStyleIsStored(cell); + let cellStyle = cell.getStyle(); cellStyle = setStyle(cellStyle, BpmnStyleIdentifier.EXTRA_CSS_CLASSES, cssClasses.join(',')); model.setStyle(cell, cellStyle); } @@ -98,9 +102,9 @@ export default class GraphCellUpdater { this.graph.batchUpdate(() => { for (const cell of cells) { - let cellStyle = cell.getStyle(); - this.styleManager.storeStyleIfIsNotStored(cell, cellStyle); + this.styleManager.ensureStyleIsStored(cell); + let cellStyle = cell.getStyle(); cellStyle = setStyle(cellStyle, mxgraph.mxConstants.STYLE_OPACITY, styleUpdate.opacity, ensureOpacityValue); cellStyle = updateStroke(cellStyle, styleUpdate.stroke); cellStyle = updateFont(cellStyle, styleUpdate.font); @@ -115,12 +119,13 @@ export default class GraphCellUpdater { } resetStyle(bpmnElementIds: string[]): void { - const model = this.graph.getModel(); - this.graph.batchUpdate(() => { - const cells = bpmnElementIds.length == 0 ? model.getDescendants(this.graph.getDefaultParent()) : bpmnElementIds.map(id => model.getCell(id)); - for (const cell of cells) { - this.styleManager.resetStyle(cell); + if (bpmnElementIds.length == 0) { + this.styleManager.resetAllStyles(); + } else { + for (const id of bpmnElementIds) { + this.styleManager.resetStyleIfIsStored(id); + } } }); } diff --git a/src/component/mxgraph/style/StyleManager.ts b/src/component/mxgraph/style/StyleManager.ts index beb7e5fb32..42d342d6e5 100644 --- a/src/component/mxgraph/style/StyleManager.ts +++ b/src/component/mxgraph/style/StyleManager.ts @@ -19,51 +19,47 @@ import { setStyle } from './utils'; import type { CssRegistry } from '../../registry/css-registry'; export class StyleManager { - /** - * Contains the style of each cell. - */ - private stylesByCell: Map = new Map(); + private stylesCache: Map = new Map(); - /** - * Creates a new instance of the StyleManager. - * - * @param cssRegistry The CSS registry to get class names from. - * @param model The mxGraphModel instance. - */ constructor(readonly cssRegistry: CssRegistry, readonly model: mxGraphModel) {} - /** - * Deletes all saved styles. - */ clear(): void { - this.stylesByCell.clear(); + this.stylesCache.clear(); + } + + resetAllStyles(): void { + for (const cellId of this.stylesCache.keys()) { + const style = this.stylesCache.get(cellId); + this.resetStyle(cellId, style); + } } /** - * Resets the style of a cell and applies the CSS classes. + * Resets the style of a cell and applies its CSS classes. * - * @param cell The mxCell whose style is to be reset. + * @param cellId The ID of the mxCell whose style is to be reset. */ - resetStyle(cell: mxCell): void { - if (this.stylesByCell.get(cell)) { - const cssClasses = this.cssRegistry.getClassNames(cell.getId()); + resetStyleIfIsStored(cellId: string): void { + const style = this.stylesCache.get(cellId); + if (style) { + this.resetStyle(cellId, style); + } + } - const style = setStyle(this.stylesByCell.get(cell), BpmnStyleIdentifier.EXTRA_CSS_CLASSES, cssClasses.join(',')); - this.model.setStyle(cell, style); + private resetStyle(cellId: string, style: string): void { + const cell = this.model.getCell(cellId); + const cssClasses = this.cssRegistry.getClassNames(cellId); - this.stylesByCell.delete(cell); - } + const styleWithCssClasses = setStyle(style, BpmnStyleIdentifier.EXTRA_CSS_CLASSES, cssClasses.join(',')); + this.model.setStyle(cell, styleWithCssClasses); + + this.stylesCache.delete(cellId); } - /** - * Stores the style for a cell if it is not already stored. - * - * @param cell The mxCell for which the style is to be stored. - * @param style The style to store. - */ - storeStyleIfIsNotStored(cell: mxCell, style: string): void { - if (!this.stylesByCell.get(cell)) { - this.stylesByCell.set(cell, style); + ensureStyleIsStored(cell: mxCell): void { + const cellId = cell.getId(); + if (!this.stylesCache.get(cellId)) { + this.stylesCache.set(cellId, cell.getStyle()); } } } diff --git a/src/component/registry/bpmn-elements-registry.ts b/src/component/registry/bpmn-elements-registry.ts index e955ff2fe9..943b40b7fa 100644 --- a/src/component/registry/bpmn-elements-registry.ts +++ b/src/component/registry/bpmn-elements-registry.ts @@ -64,7 +64,7 @@ export class BpmnElementsRegistry { ) { this.bpmnModelRegistry.registerOnLoadCallback(() => { this.cssRegistry.clear(); - this.graphCellUpdater.styleManager.clear(); + this.graphCellUpdater.clear(); }); }