From d31791995c846b7a27a0d096fac98a336847ff7f Mon Sep 17 00:00:00 2001 From: Tomas Date: Tue, 21 Jan 2025 08:46:49 +0100 Subject: [PATCH 1/2] refactor: Remove useBpmnModeler --- .../process-editor/src/hooks/useBpmnEditor.ts | 7 ++--- .../src/hooks/useBpmnModeler/index.ts | 1 - .../useBpmnModeler/useBpmnModeler.test.ts | 29 ------------------- .../hooks/useBpmnModeler/useBpmnModeler.ts | 22 -------------- 4 files changed, 3 insertions(+), 56 deletions(-) delete mode 100644 frontend/packages/process-editor/src/hooks/useBpmnModeler/index.ts delete mode 100644 frontend/packages/process-editor/src/hooks/useBpmnModeler/useBpmnModeler.test.ts delete mode 100644 frontend/packages/process-editor/src/hooks/useBpmnModeler/useBpmnModeler.ts diff --git a/frontend/packages/process-editor/src/hooks/useBpmnEditor.ts b/frontend/packages/process-editor/src/hooks/useBpmnEditor.ts index 810c2155b7b..abb1f4b8a0c 100644 --- a/frontend/packages/process-editor/src/hooks/useBpmnEditor.ts +++ b/frontend/packages/process-editor/src/hooks/useBpmnEditor.ts @@ -1,6 +1,6 @@ import { useEffect, useCallback } from 'react'; import { useBpmnContext } from '../contexts/BpmnContext'; -import { useBpmnModeler } from './useBpmnModeler'; +import { BpmnModelerInstance } from '../utils/bpmnModeler/BpmnModelerInstance'; import { useBpmnConfigPanelFormContext } from '../contexts/BpmnConfigPanelContext'; import { useBpmnApiContext } from '../contexts/BpmnApiContext'; import type { TaskEvent } from '../types/TaskEvent'; @@ -15,7 +15,6 @@ export type UseBpmnEditorResult = (div: HTMLDivElement) => void; export const useBpmnEditor = (): UseBpmnEditorResult => { const { getUpdatedXml, bpmnXml, modelerRef, setBpmnDetails } = useBpmnContext(); const { metadataFormRef, resetForm } = useBpmnConfigPanelFormContext(); - const { getModeler, destroyModeler } = useBpmnModeler(); const { addAction } = useStudioRecommendedNextActionContext(); const { saveBpmn, onProcessTaskAdd, onProcessTaskRemove } = useBpmnApiContext(); @@ -99,7 +98,7 @@ export const useBpmnEditor = (): UseBpmnEditorResult => { // GetModeler can only be fetched from this hook once since the modeler creates a // new instance and will attach the same canvasRef container to all instances it fetches. // Set modelerRef.current to the Context so that it can be used in other components - modelerRef.current = getModeler(div); + modelerRef.current = BpmnModelerInstance.getInstance(div); initializeEditor().then(() => { // Wait for the initializeEditor to be initialized before attaching event listeners, to avoid trigger add.shape events on first draw @@ -112,7 +111,7 @@ export const useBpmnEditor = (): UseBpmnEditorResult => { useEffect(() => { // Destroy the modeler instance when the component is unmounted return () => { - destroyModeler(); + BpmnModelerInstance.destroyInstance(); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); diff --git a/frontend/packages/process-editor/src/hooks/useBpmnModeler/index.ts b/frontend/packages/process-editor/src/hooks/useBpmnModeler/index.ts deleted file mode 100644 index b1d93287fcf..00000000000 --- a/frontend/packages/process-editor/src/hooks/useBpmnModeler/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { useBpmnModeler } from './useBpmnModeler'; diff --git a/frontend/packages/process-editor/src/hooks/useBpmnModeler/useBpmnModeler.test.ts b/frontend/packages/process-editor/src/hooks/useBpmnModeler/useBpmnModeler.test.ts deleted file mode 100644 index fac817172ca..00000000000 --- a/frontend/packages/process-editor/src/hooks/useBpmnModeler/useBpmnModeler.test.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { renderHook } from '@testing-library/react'; -import { useBpmnModeler } from './useBpmnModeler'; -import type Modeler from 'bpmn-js/lib/Modeler'; - -type ModelerMock = Modeler & { container: { container: HTMLDivElement } }; - -jest.mock( - 'bpmn-js/lib/Modeler', - () => - class BpmnModelerMockImpl { - public container: HTMLDivElement; - - constructor(_container: HTMLDivElement) { - this.container = _container; - } - }, -); - -const mockedCanvasHTMLDivElement = `
MockedHtml
` as unknown as HTMLDivElement; - -describe('useBpmnModeler', () => { - it('should create instance of the BpmnModeler when calling getModeler', () => { - const { result } = renderHook(() => useBpmnModeler()); - const { getModeler } = result.current; - - const modelerInstance = getModeler(mockedCanvasHTMLDivElement) as ModelerMock; - expect(modelerInstance.container.container).toBe(mockedCanvasHTMLDivElement); - }); -}); diff --git a/frontend/packages/process-editor/src/hooks/useBpmnModeler/useBpmnModeler.ts b/frontend/packages/process-editor/src/hooks/useBpmnModeler/useBpmnModeler.ts deleted file mode 100644 index 3a0887f14d9..00000000000 --- a/frontend/packages/process-editor/src/hooks/useBpmnModeler/useBpmnModeler.ts +++ /dev/null @@ -1,22 +0,0 @@ -import type Modeler from 'bpmn-js/lib/Modeler'; -import { BpmnModelerInstance } from '../../utils/bpmnModeler/BpmnModelerInstance'; - -type UseBpmnModelerResult = { - getModeler: (canvasContainer: HTMLDivElement) => Modeler; - destroyModeler: () => void; -}; - -export const useBpmnModeler = (): UseBpmnModelerResult => { - const getModeler = (canvasContainer: HTMLDivElement): Modeler => { - return BpmnModelerInstance.getInstance(canvasContainer); - }; - - const destroyModeler = (): void => { - BpmnModelerInstance.destroyInstance(); - }; - - return { - destroyModeler, - getModeler, - }; -}; From a305b037d9d835e3d946af82f25b332ceda36629 Mon Sep 17 00:00:00 2001 From: Tomas Date: Tue, 21 Jan 2025 09:57:59 +0100 Subject: [PATCH 2/2] Remove outdated comment --- frontend/packages/process-editor/src/hooks/useBpmnEditor.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/frontend/packages/process-editor/src/hooks/useBpmnEditor.ts b/frontend/packages/process-editor/src/hooks/useBpmnEditor.ts index abb1f4b8a0c..e994a617839 100644 --- a/frontend/packages/process-editor/src/hooks/useBpmnEditor.ts +++ b/frontend/packages/process-editor/src/hooks/useBpmnEditor.ts @@ -95,9 +95,6 @@ export const useBpmnEditor = (): UseBpmnEditorResult => { const canvasRef = useCallback((div: HTMLDivElement) => { if (modelerRef.current) return; - // GetModeler can only be fetched from this hook once since the modeler creates a - // new instance and will attach the same canvasRef container to all instances it fetches. - // Set modelerRef.current to the Context so that it can be used in other components modelerRef.current = BpmnModelerInstance.getInstance(div); initializeEditor().then(() => {