change endpoint name to html element so that long names can wrap (#2376)

* change endpoint name to html element so that long names can wrap

* change to use background-image since safari doesn't seem to support correct positioning of mask-image

* removing filter since it also doesn't work in safari in the foreignObject

* add occusion on top of endpoint names

* fix start height if start element isn't tallest

* fix height issue introduced by toolbar change on master

Author: PhilBastian

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

@@ -56,7 +56,7 @@ onMounted(() => store.refreshConversation());
 }
 .outer {
   max-width: 100%;
-  max-height: calc(100vh - 27em);
+  max-height: calc(100vh - 30em);
   overflow: auto;
 }
 

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

@@ -7,19 +7,8 @@ import { computed, ref, watch } from "vue";
 interface EndpointWithLocation extends Endpoint {
   width: number;
   textWidth: number;
-  x?: number;
-  surround?: EndpointSurround;
-}
-
-interface EndpointSurround {
   x: number;
-  y: number;
-  width: number;
   height: number;
-  fill: string;
-  rx: string;
-  strokeWidth: string;
-  stroke: string;
 }
 
 const Endpoint_Gap = 30;
@@ -32,80 +21,77 @@ defineProps<{
 const store = useSequenceDiagramStore();
 const { startX, endpoints } = storeToRefs(store);
 
-const epTextRefs = ref<SVGTextElement[]>([]);
+const epTextRefs = ref<Element[]>([]);
 const endpointItems = computed(() =>
   endpoints.value.map((x, index) => {
     const endpoint = x as EndpointWithLocation;
     const el = epTextRefs.value[index];
     if (el) {
-      const bounds = el.getBBox();
+      const bounds = el.getBoundingClientRect();
       const previousEndpoint = index > 0 ? endpointItems.value[index - 1] : undefined;
       endpoint.width = Math.max(Endpoint_Width, bounds.width);
       endpoint.textWidth = bounds.width;
       endpoint.x = (previousEndpoint?.x ?? startX.value) + (previousEndpoint?.width ?? 0) + Endpoint_Gap;
-
-      if (!endpoint.surround && el.isConnected) {
-        const style = getComputedStyle(el);
-        const padding_top = parseInt(style.getPropertyValue("padding-top"));
-        const padding_left = parseInt(style.getPropertyValue("padding-left"));
-        const padding_right = parseInt(style.getPropertyValue("padding-right"));
-        const padding_bottom = parseInt(style.getPropertyValue("padding-bottom"));
-        endpoint.surround = {
-          x: endpoint.x - endpoint.width / 2 - padding_left,
-          y: bounds.y - padding_top,
-          width: endpoint.width + padding_left + padding_right,
-          height: bounds.height + padding_top + padding_bottom,
-          fill: style.getPropertyValue("background-color"),
-          rx: style.getPropertyValue("border-radius"),
-          strokeWidth: style.getPropertyValue("border-top-width"),
-          stroke: style.getPropertyValue("border-top-color"),
-        };
-      }
+      endpoint.height = bounds.height;
+      endpoint.uiRef = el;
     }
     return endpoint;
   })
 );
 
 watch(endpointItems, () => {
-  store.setEndpointCentrePoints(endpointItems.value.map((endpoint) => ({ name: endpoint.name, centre: endpoint.x, top: (endpoint.surround?.y ?? 0) + (endpoint.surround?.height ?? 0) + 15 }) as EndpointCentrePoint));
+  store.setEndpointCentrePoints(endpointItems.value.map((endpoint) => ({ name: endpoint.name, centre: endpoint.x ?? 0, top: (endpoint.height ?? 0) + 15 }) as EndpointCentrePoint));
   const lastEndpoint = endpointItems.value[endpointItems.value.length - 1];
   store.setMaxWidth((lastEndpoint.x ?? 0) + lastEndpoint.width);
 });
 
 watch(startX, () => {
   epTextRefs.value = [];
-  endpoints.value.forEach((endpoint) => ((endpoint as EndpointWithLocation).surround = undefined));
 });
 
-function setEndpointTextRef(el: SVGTextElement, index: number) {
+function setEndpointTextRef(el: Element, index: number) {
   if (el) epTextRefs.value[index] = el;
 }
 </script>
 
 <template>
-  <g v-for="(endpoint, i) in endpointItems" :key="endpoint.name" :transform="`translate(0,${yOffset + 15})`" :ref="(el) => (endpoint.uiRef = el as SVGElement)">
-    <rect
-      v-if="endpoint.surround"
-      :x="endpoint.surround.x"
-      :y="endpoint.surround.y"
-      :width="endpoint.surround.width"
-      :height="endpoint.surround.height"
-      :fill="endpoint.surround.fill"
-      :rx="endpoint.surround.rx"
-      :stroke-width="endpoint.surround.strokeWidth"
-      :stroke="endpoint.surround.stroke"
-    ></rect>
+  <!-- occlusion for top of diagram so that elements don't show above the endpoint names when scrolling -->
+  <rect width="100%" height="15" :transform="`translate(0,${yOffset})`" fill="white" />
+  <g v-for="(endpoint, i) in endpointItems" :key="endpoint.name" :transform="`translate(0,${yOffset + 5})`" style="outline: none">
     <g :transform="`translate(${(endpoint.x ?? Endpoint_Width / 2) - ((endpoint.textWidth ?? 0) + Endpoint_Image_Width) / 2}, 0)`">
-      <path fill="var(--gray40)" d="M 0,0 M 18,18 M 0,2 v 14 h 14 v -4 h -6 v -6 h 6 v -4 h -14 M 9,7 v 4 h 9 v -4"></path>
-      <text :x="Endpoint_Image_Width" y="10" alignment-baseline="middle" text-anchor="start" :ref="(el) => setEndpointTextRef(el as SVGTextElement, i)">{{ endpoint.name }}</text>
+      <foreignObject :x="Endpoint_Image_Width" y="10" :width="Endpoint_Width" height="100%" style="pointer-events: none">
+        <div class="endpoint-surround" :ref="(el) => setEndpointTextRef(el as Element, i)">
+          <i class="endpoint-icon" />
+          <div class="endpoint-name">{{ endpoint.name }}</div>
+        </div>
+      </foreignObject>
     </g>
   </g>
 </template>
 
 <style scoped>
-text {
+.endpoint-surround {
+  width: 100%;
+  display: flex;
   background: var(--gray90);
   border-radius: 5px;
   padding: 0.5em;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5em;
+  pointer-events: all;
+}
+
+.endpoint-icon {
+  flex-shrink: 0;
+  background-image: url("@/assets/endpoint.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 18px;
+  width: 18px;
+}
+
+.endpoint-name {
+  overflow-wrap: anywhere;
 }
 </style>

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

@@ -29,7 +29,7 @@ const handlerItems = computed(() => {
     const messageTypeElement = messageTypeRefs.value[index];
     const count = handler.outMessages.length;
     const height = (count === 0 ? 1 : count) * Height_Per_Out;
-    if (nextY === 0) nextY += Handler_Gap + (endpoint?.top ?? 0);
+    if (nextY === 0) nextY += Handler_Gap + (Math.max(...endpointCentrePoints.value.map((cp) => cp.top)) ?? 0);
     const y = nextY;
     nextY += height + Handler_Gap;
     const fill = (() => {

src/Frontend/src/resources/SequenceDiagram/Endpoint.ts

@@ -9,7 +9,7 @@ export interface Endpoint {
   readonly handlers: Handler[];
   readonly host: string;
   readonly version: string;
-  uiRef?: SVGElement;
+  uiRef?: Element;
   addHandler(handler: Handler): void;
 }