fix startX determination now that endpoints render last

Author: PhilBastian

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);
 });

src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue

@@ -52,8 +52,8 @@ 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;
+    const left = (endpoint?.centre ?? store.startX) - Handler_Width / 2;
+    const right = (endpoint?.centre ?? store.startX) + Handler_Width / 2;
     if (left + messageTypeOffset < 0) {
       store.setStartX(-1 * (left + messageTypeOffset) + 20);
     }

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>

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;
 }