From 23c3730890b0253ff471e86c428e7b4f050561f3 Mon Sep 17 00:00:00 2001
From: Phil Bastian <phil.bastian@particular.net>
Date: Mon, 14 Apr 2025 14:56:52 +0800
Subject: [PATCH] fix startX determination now that endpoints render last

---
 .../messages2/SequenceDiagram/EndpointsComponent.vue        | 2 +-
 .../messages2/SequenceDiagram/HandlersComponent.vue         | 6 +++---
 .../messages2/SequenceDiagram/TimelineComponent.vue         | 2 +-
 src/Frontend/src/stores/SequenceDiagramStore.ts             | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/EndpointsComponent.vue b/src/Frontend/src/components/messages2/SequenceDiagram/EndpointsComponent.vue
index ded1ec7b2..963047c17 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram/EndpointsComponent.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/EndpointsComponent.vue
@@ -67,7 +67,7 @@ const endpointItems = computed(() =>
 );
 
 watch(endpointItems, () => {
-  store.setEndpointCentrePoints(endpointItems.value.map((endpoint) => ({ name: endpoint.name, centre: endpoint.x ?? 0, top: (endpoint.surround?.y ?? 0) + (endpoint.surround?.height ?? 0) + 15 }) as EndpointCentrePoint));
+  store.setEndpointCentrePoints(endpointItems.value.map((endpoint) => ({ name: endpoint.name, centre: endpoint.x, top: (endpoint.surround?.y ?? 0) + (endpoint.surround?.height ?? 0) + 15 }) as EndpointCentrePoint));
   const lastEndpoint = endpointItems.value[endpointItems.value.length - 1];
   store.setMaxWidth((lastEndpoint.x ?? 0) + lastEndpoint.width);
 });
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue b/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue
index 9f3a4d5d6..f5062a401 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue
@@ -52,9 +52,9 @@ const handlerItems = computed(() => {
 
     //determine which side of the handler to render the messageType on. If it's the left side (for a right arrow) then we apply a negative offset
     const messageTypeOffset = handler.direction === Direction.Right ? ((messageTypeElement?.getBBox().width ?? 0) + 24) * -1 : 20;
-    const left = (endpoint?.centre ?? 0) - Handler_Width / 2;
-    const right = (endpoint?.centre ?? 0) + Handler_Width / 2;
-    if (left + messageTypeOffset < 0) {
+    const left = (endpoint?.centre ?? store.startX) - Handler_Width / 2;
+    const right = (endpoint?.centre ?? store.startX) + Handler_Width / 2;
+    if (endpoint?.centre && left + messageTypeOffset < 0) {
       store.setStartX(-1 * (left + messageTypeOffset) + 20);
     }
 
diff --git a/src/Frontend/src/components/messages2/SequenceDiagram/TimelineComponent.vue b/src/Frontend/src/components/messages2/SequenceDiagram/TimelineComponent.vue
index faad6f882..550dc974a 100644
--- a/src/Frontend/src/components/messages2/SequenceDiagram/TimelineComponent.vue
+++ b/src/Frontend/src/components/messages2/SequenceDiagram/TimelineComponent.vue
@@ -8,6 +8,6 @@ const { endpointCentrePoints, maxHeight } = storeToRefs(store);
 
 <template>
   <g v-for="timeline in endpointCentrePoints" :key="timeline.name">
-    <path :d="`M${timeline.centre} ${timeline.top} v0 ${maxHeight - timeline.top}`" stroke="var(--gray90)" stroke-width="2" />
+    <path v-if="timeline.centre" :d="`M${timeline.centre} ${timeline.top} v0 ${maxHeight - timeline.top}`" stroke="var(--gray90)" stroke-width="2" />
   </g>
 </template>
diff --git a/src/Frontend/src/stores/SequenceDiagramStore.ts b/src/Frontend/src/stores/SequenceDiagramStore.ts
index 72e6f2634..259490dcc 100644
--- a/src/Frontend/src/stores/SequenceDiagramStore.ts
+++ b/src/Frontend/src/stores/SequenceDiagramStore.ts
@@ -10,7 +10,7 @@ import routeLinks from "@/router/routeLinks";
 
 export interface EndpointCentrePoint {
   name: string;
-  centre: number;
+  centre?: number;
   top: number;
 }