expand SVG to fit larger diagrams

Author: PhilBastian

src/Frontend/src/components/messages/SequenceDiagram.vue

@@ -15,6 +15,7 @@ const endpoints = ref<Endpoint[]>([]);
 const handlers = ref<Handler[]>([]);
 const routes = ref<MessageProcessingRoute[]>([]);
 const endpointCentrePoints = ref<EndpointCentrePoint[]>([]);
+const maxWidth = ref(150);
 const maxHeight = ref(150);
 const handlerLocations = ref<HandlerLocation[]>([]);
 
@@ -35,6 +36,9 @@ fetchConversation();
 function setTimelines(centrePoints: EndpointCentrePoint[]) {
   endpointCentrePoints.value = centrePoints;
 }
+function setMaxWidth(width: number) {
+  maxWidth.value = width;
+}
 function setMaxHeight(height: number) {
   maxHeight.value = height;
 }
@@ -44,15 +48,23 @@ function setHandlerLocations(locations: HandlerLocation[]) {
 </script>
 
 <template>
-  <svg class="sequence-diagram" width="100%" :height="maxHeight + 20">
-    <Endpoints :endpoints="endpoints" @centre-points="setTimelines" />
-    <Timeline :centre-points="endpointCentrePoints" :height="maxHeight" />
-    <Handlers :handlers="handlers" :endpoint-centre-points="endpointCentrePoints" @max-height="setMaxHeight" @handlerLocations="setHandlerLocations" />
-    <Routes :routes="routes" :handler-locations="handlerLocations" />
-  </svg>
+  <div class="outer">
+    <svg class="sequence-diagram" :width="`max(100%, ${isNaN(maxWidth) ? 0 : maxWidth}px)`" :height="maxHeight + 20">
+      <Endpoints :endpoints="endpoints" @centre-points="setTimelines" @max-width="setMaxWidth" />
+      <Timeline :centre-points="endpointCentrePoints" :height="maxHeight" />
+      <Handlers :handlers="handlers" :endpoint-centre-points="endpointCentrePoints" @max-height="setMaxHeight" @handler-locations="setHandlerLocations" />
+      <Routes :routes="routes" :handler-locations="handlerLocations" />
+    </svg>
+  </div>
 </template>
 
 <style scoped>
+.outer {
+  max-width: 100%;
+  max-height: calc(100vh - 27em);
+  overflow: auto;
+}
+
 .sequence-diagram {
   --error: red;
   --gray20: #333333;

src/Frontend/src/components/messages/SequenceDiagram/EndpointsComponent.vue

@@ -36,6 +36,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   centrePoints: [EndpointCentrePoint[]];
+  maxWidth: [width: number];
 }>();
 
 const epRefs = ref<SVGTextElement[]>([]);
@@ -72,12 +73,14 @@ const endpoints = computed(() =>
   })
 );
 
-watch(endpoints, () =>
+watch(endpoints, () => {
   emit(
     "centrePoints",
     endpoints.value.map((endpoint) => ({ name: endpoint.name, centre: endpoint.x ?? 0, top: (endpoint.surround?.y ?? 0) + (endpoint.surround?.height ?? 0) + 15 }) as EndpointCentrePoint)
-  )
-);
+  );
+  const lastEndpoint = endpoints.value[endpoints.value.length - 1];
+  emit("maxWidth", (lastEndpoint.x ?? 0) + lastEndpoint.width);
+});
 
 function setEndpointRef(el: SVGTextElement, index: number) {
   if (el) epRefs.value[index] = el;