From cece3a7388ce7cb03cba7a66a18642d826249158 Mon Sep 17 00:00:00 2001
From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com>
Date: Wed, 27 Aug 2025 14:41:25 +0200
Subject: [PATCH 1/3] refactor(vue): use new bpmn-visualization-addons methods
 for simplication

Bump bpmn-visualization-addons from 0.8.0 to 0.9.0
---
 projects/typescript-vue/package.json |  2 +-
 projects/typescript-vue/src/app.vue  | 27 +++++++++++++++++++--------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/projects/typescript-vue/package.json b/projects/typescript-vue/package.json
index 80e0137e..0e8f3fc5 100644
--- a/projects/typescript-vue/package.json
+++ b/projects/typescript-vue/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@process-analytics/bpmn-visualization-addons": "0.8.0",
+    "@process-analytics/bpmn-visualization-addons": "0.9.0",
     "bpmn-visualization": "0.47.0",
     "spectre.css": "~0.5.9",
     "vue": "~3.5.20"
diff --git a/projects/typescript-vue/src/app.vue b/projects/typescript-vue/src/app.vue
index 160913b2..c325a2a7 100644
--- a/projects/typescript-vue/src/app.vue
+++ b/projects/typescript-vue/src/app.vue
@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import { BpmnElement, BpmnElementsRegistry, BpmnVisualization, FitType, OverlayPosition } from 'bpmn-visualization';
+import {
+  BpmnElement,
+  BpmnElementsRegistry,
+  BpmnVisualization, FitOptions,
+  FitType,
+  OverlayPosition,
+  ShapeBpmnElementKind,
+} from 'bpmn-visualization';
 import { ShapeUtil } from '@process-analytics/bpmn-visualization-addons';
 import pizzaDiagram from "./pizza-collaboration.bpmn?raw"
 
@@ -17,6 +24,8 @@ const nodeDropdown = ref<string>();
 const overlayText = ref<string>('');
 const overlayPosition = ref<OverlayPosition>('top-left');
 
+const fitOptions: FitOptions = { type: FitType.Center, margin: 30 };
+
 onMounted(async () => {
     vis = new BpmnVisualization({
         container: "bpmn-container",
@@ -29,7 +38,7 @@ onMounted(async () => {
     });
     // load the BPMN diagram defined above
     vis.load(pizzaDiagram, {
-        fit: { type: FitType.Center, margin: 30 },
+        fit: fitOptions,
     });
     registry = vis.bpmnElementsRegistry;
     allFlowNodes.value = getAllFlowNodes();
@@ -38,22 +47,24 @@ onMounted(async () => {
 })
 
 function getAllFlowNodes(): BpmnElement[] {
-    return registry.getElementsByKinds(ShapeUtil.flowNodeKinds().filter(kind => !ShapeUtil.isBpmnArtifact(kind)));
+  // cannot use the bpmn-visualization ShapeUtil.flowNodeKinds() for now, as it includes artifacts
+    return registry.getElementsByKinds(Object.values(ShapeBpmnElementKind).filter(kind => ShapeUtil.isFlowNode(kind)));
 }
 
 function setupEventHandlers() {
     allFlowNodes.value.forEach(item => {
         const currentId = item.bpmnSemantic.id;
-        item.htmlElement.onclick = () => {
+      const htmlElement = item.htmlElement;
+      htmlElement.onclick = () => {
             setSelectedElement(currentId);
         };
-        item.htmlElement.onmouseenter = (ev) => {
+        htmlElement.onmouseenter = (ev) => {
             if (ev.buttons == 1) {
                 return;
             }
             registry.addCssClasses(currentId, 'highlightNode');
         };
-        item.htmlElement.onmouseleave = () => {
+        htmlElement.onmouseleave = () => {
             registry.removeCssClasses(currentId, 'highlightNode');
         };
     });
@@ -95,7 +106,7 @@ function changeDiagram(event: Event): void {
     reader.onload = () => {
         try {
             vis.load(reader.result?.toString() ?? '', {
-                fit: { type: FitType.Center, margin: 30 }
+                fit: fitOptions
             });
             allFlowNodes.value = getAllFlowNodes()
             setupEventHandlers();
@@ -188,7 +199,7 @@ function changeDiagram(event: Event): void {
                     d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z" />
             </svg>
         </button>
-        <button class="mainButton" @click="vis.navigation.fit({ type: FitType.Center, margin: 30 })">
+        <button class="mainButton" @click="vis.navigation.fit(fitOptions)">
             <span class="fit">Fit</span>
         </button>
         <button class="sideButton" style="border-radius: 0 20px 20px 0; float: right" @click="vis.graph.zoomIn()">

From c052be7777d75dceab2578986162e23768921ae4 Mon Sep 17 00:00:00 2001
From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com>
Date: Wed, 27 Aug 2025 14:52:57 +0200
Subject: [PATCH 2/3] lint [skip ci]

---
 projects/typescript-vue/src/app.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/projects/typescript-vue/src/app.vue b/projects/typescript-vue/src/app.vue
index c325a2a7..4b049eb1 100644
--- a/projects/typescript-vue/src/app.vue
+++ b/projects/typescript-vue/src/app.vue
@@ -47,15 +47,15 @@ onMounted(async () => {
 })
 
 function getAllFlowNodes(): BpmnElement[] {
-  // cannot use the bpmn-visualization ShapeUtil.flowNodeKinds() for now, as it includes artifacts
+    // cannot use the bpmn-visualization ShapeUtil.flowNodeKinds() for now, as it includes artifacts
     return registry.getElementsByKinds(Object.values(ShapeBpmnElementKind).filter(kind => ShapeUtil.isFlowNode(kind)));
 }
 
 function setupEventHandlers() {
     allFlowNodes.value.forEach(item => {
         const currentId = item.bpmnSemantic.id;
-      const htmlElement = item.htmlElement;
-      htmlElement.onclick = () => {
+        const htmlElement = item.htmlElement;
+        htmlElement.onclick = () => {
             setSelectedElement(currentId);
         };
         htmlElement.onmouseenter = (ev) => {

From 842073f9a8b3daee47923fb1db9648a0fa94d377 Mon Sep 17 00:00:00 2001
From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com>
Date: Thu, 25 Sep 2025 15:17:55 +0200
Subject: [PATCH 3/3] lint

---
 projects/typescript-vue/src/app.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/typescript-vue/src/app.vue b/projects/typescript-vue/src/app.vue
index 4b049eb1..912676dc 100644
--- a/projects/typescript-vue/src/app.vue
+++ b/projects/typescript-vue/src/app.vue
@@ -3,7 +3,8 @@ import { onMounted, ref } from 'vue';
 import {
   BpmnElement,
   BpmnElementsRegistry,
-  BpmnVisualization, FitOptions,
+  BpmnVisualization,
+  FitOptions,
   FitType,
   OverlayPosition,
   ShapeBpmnElementKind,
@@ -11,7 +12,6 @@ import {
 import { ShapeUtil } from '@process-analytics/bpmn-visualization-addons';
 import pizzaDiagram from "./pizza-collaboration.bpmn?raw"
 
-
 let vis: BpmnVisualization;
 let registry: BpmnElementsRegistry;
 const allFlowNodes = ref<BpmnElement[]>([]);