From 2640f4c1c72226f4d0d72753e3e28afc59b0862a Mon Sep 17 00:00:00 2001
From: Kai Rohwer <rohwer.kai@icloud.com>
Date: Sun, 7 Jan 2024 23:07:29 +0100
Subject: [PATCH] Fix props

---
 src/management-system-v2/components/bpmn-viewer.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/management-system-v2/components/bpmn-viewer.tsx b/src/management-system-v2/components/bpmn-viewer.tsx
index 83e965c93..bbfda2606 100644
--- a/src/management-system-v2/components/bpmn-viewer.tsx
+++ b/src/management-system-v2/components/bpmn-viewer.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import cn from 'classnames';
-import BPMNCanvas from './bpmn-canvas';
+import BPMNCanvas, { BPMNCanvasRef } from './bpmn-canvas';
 import { getProcessBPMN } from '@/lib/data/processes';
 import { useSuspenseQuery } from '@tanstack/react-query';
 
@@ -13,7 +13,7 @@ type BPMNViewerProps = {
 };
 
 const BPMNViewer = ({ definitionId, reduceLogo, fitOnResize }: BPMNViewerProps) => {
-  const viewer = useRef();
+  const viewer = useRef<BPMNCanvasRef | null>(null);
 
   const { data } = useSuspenseQuery({
     queryKey: ['process', definitionId, 'bpmn'],
@@ -32,6 +32,9 @@ const BPMNViewer = ({ definitionId, reduceLogo, fitOnResize }: BPMNViewerProps)
     },
   });
 
+  // Allows for rerendering when the process changes but not the BPMN.
+  const bpmn = useMemo(() => ({ bpmn: data }), [data]);
+
   useEffect(() => {
     console.log('viewer', viewer.current);
     //viewer.current!.fitViewport();
@@ -40,7 +43,7 @@ const BPMNViewer = ({ definitionId, reduceLogo, fitOnResize }: BPMNViewerProps)
   return (
     <BPMNCanvas
       ref={viewer}
-      bpmn={data}
+      bpmn={bpmn}
       type="viewer"
       className={cn({ reduceLogo: reduceLogo })}
       resizeWithContainer={fitOnResize}