@cwygoda/service-catalog-ui 1.5.1 → 1.6.0

package/dist/components/BpmnDiagram.svelte

@@ -54,18 +54,29 @@
   // Fullscreen state
   let isFullscreen = $state(false);
 
+  function setBodyOverflow(hidden: boolean) {
+    if (!browser) return;
+    document.body.style.overflow = hidden ? 'hidden' : '';
+  }
+
+  function handleEscapeKey(e: KeyboardEvent) {
+    if (e.key === 'Escape' && isFullscreen) {
+      toggleFullscreen();
+    }
+  }
+
   function toggleFullscreen() {
     if (!browser) return;
-    if (!document.fullscreenElement) {
-      void wrapper.requestFullscreen();
+    isFullscreen = !isFullscreen;
+    setBodyOverflow(isFullscreen);
+
+    if (isFullscreen) {
+      document.addEventListener('keydown', handleEscapeKey);
     } else {
-      void document.exitFullscreen();
+      document.removeEventListener('keydown', handleEscapeKey);
     }
-  }
 
-  function handleFullscreenChange() {
-    isFullscreen = !!document.fullscreenElement;
-    // Re-fit diagram when entering/exiting fullscreen
+    // Re-fit diagram after layout settles
     if (ready) {
       setTimeout(fitWithPadding, FULLSCREEN_TRANSITION_MS);
     }
@@ -129,11 +140,53 @@
     fitWithPadding();
   }
 
+  /**
+   * Re-center inline message-flow labels rendered by bpmn-js.
+   * bpmn-js positions these labels using getBBox() which can return
+   * incorrect widths before fonts are loaded, causing left-aligned labels.
+   */
+  function fixMessageFlowLabels() {
+    if (!viewer) return;
+
+    const elementRegistry = viewer.get('elementRegistry') as {
+      forEach: (cb: (el: { id: string; type: string }) => void) => void;
+      getGraphics: (el: { id: string }) => SVGElement | null;
+    };
+
+    elementRegistry.forEach((el) => {
+      if (el.type !== 'bpmn:MessageFlow') return;
+
+      const gfx = elementRegistry.getGraphics(el);
+      if (!gfx) return;
+
+      const visual = gfx.querySelector('.djs-visual');
+      if (!visual) return;
+
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion -- needed for svelte-check
+      const label = visual.querySelector('text.djs-label') as SVGTextElement | null;
+      if (!label) return;
+
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion -- needed for svelte-check
+      const pathEl = visual.querySelector('path') as SVGPathElement | null;
+      if (!pathEl?.getTotalLength) return;
+
+      const midPoint = pathEl.getPointAtLength(pathEl.getTotalLength() / 2);
+      const bbox = label.getBBox();
+      if (bbox.width <= 0) return;
+
+      // Preserve current Y from the existing translate transform
+      const { baseVal } = label.transform;
+      if (baseVal.numberOfItems < 1) return;
+
+      const t = baseVal.getItem(0);
+      const newTx = midPoint.x - bbox.width / 2;
+      t.setTranslate(newTx, t.matrix.f);
+    });
+  }
+
   onMount(async () => {
     if (!browser || !xml) return;
 
-    document.addEventListener('fullscreenchange', handleFullscreenChange);
-
     try {
       // Dynamic import to avoid SSR issues
       const { default: BpmnViewer } = await import('bpmn-js/lib/NavigatedViewer');
@@ -144,6 +197,7 @@
       }) as BpmnViewer;
 
       await viewer.importXML(xml);
+      fixMessageFlowLabels();
 
       // Register click handler for doc links
       if (onElementClick) {
@@ -192,7 +246,8 @@
 
   onDestroy(() => {
     if (browser) {
-      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+      document.removeEventListener('keydown', handleEscapeKey);
+      setBodyOverflow(false);
     }
     resizeObserver?.disconnect();
     if (viewer?.destroy) {
@@ -206,6 +261,7 @@
       viewer
         .importXML(xml)
         .then(() => {
+          fixMessageFlowLabels();
           fitWithPadding();
         })
         .catch((e: unknown) => {
@@ -225,13 +281,15 @@
 {:else}
   <div
     bind:this={wrapper}
-    class="bpmn-wrapper relative {isFullscreen ? 'bg-white dark:bg-gray-900' : ''}"
+    class="bpmn-wrapper relative {isFullscreen
+      ? 'fixed inset-0 z-50 bg-white dark:bg-gray-900'
+      : ''}"
   >
     <div
       bind:this={container}
-      class="bpmn-container w-full rounded-lg border border-gray-200 bg-white {isFullscreen
-        ? 'h-screen'
-        : 'h-64 sm:h-80 md:h-96'} dark:border-gray-700 dark:bg-gray-800"
+      class="bpmn-container w-full {isFullscreen
+        ? 'h-full bg-white dark:bg-gray-900'
+        : 'h-64 rounded-lg border border-gray-200 bg-white sm:h-80 md:h-96 dark:border-gray-700 dark:bg-gray-800'}"
       class:cursor-grab={interactive}
       role="img"
       aria-label="BPMN process diagram"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cwygoda/service-catalog-ui",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "type": "module",
   "svelte": "./dist/index.js",
   "exports": {
@@ -25,7 +25,7 @@
   ],
   "dependencies": {
     "@sinclair/typebox": "^0.34.0",
-    "@cwygoda/service-catalog-core": "1.5.1"
+    "@cwygoda/service-catalog-core": "1.6.0"
   },
   "peerDependencies": {
     "@sveltejs/kit": "^2.0.0",