From 3ebe4073f17ea883c67bc01a8021cdf9e05765c3 Mon Sep 17 00:00:00 2001
From: Peng Xiao <eagle.xiao@gmail.com>
Date: Tue, 17 Dec 2024 17:02:01 +1100
Subject: [PATCH] Fixed fragment rendering issue see #232.

---
 .github/workflows/cd.yml                      | 19 ++++++++++---------
 .../Block/Statement/Fragment/FragmentAlt.vue  |  4 ++--
 .../Statement/Fragment/FragmentCritical.vue   |  7 ++++---
 .../Block/Statement/Fragment/FragmentLoop.vue |  7 ++++---
 .../Block/Statement/Fragment/FragmentMixin.js |  4 ++++
 .../Block/Statement/Fragment/FragmentOpt.vue  |  7 ++++---
 .../Block/Statement/Fragment/FragmentPar.vue  |  7 ++++---
 .../Block/Statement/Fragment/FragmentRef.vue  |  4 ++--
 .../Statement/Fragment/FragmentSection.vue    |  4 ++--
 .../Fragment/FragmentTryCatchFinally.vue      | 12 ++++++------
 10 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
index c2504f3a..6dfe9371 100644
--- a/.github/workflows/cd.yml
+++ b/.github/workflows/cd.yml
@@ -22,7 +22,7 @@ permissions:
 jobs:
   # Test
   test:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -42,7 +42,7 @@ jobs:
         run: pnpm test
 
   npm-publish:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     needs: test
     if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/publish'
     steps:
@@ -86,7 +86,7 @@ jobs:
 
   # Build the site for embed view and other demo
   build-site:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     needs: test
     steps:
       - name: Checkout
@@ -104,23 +104,24 @@ jobs:
         run: pnpm install
       - name: Build the site for demo page and embed view
         run: pnpm build:gh-pages
-      - name: Upload artifact for pages # upload zipped artifact named 'gh-pages' for actions/deploy-pages@v1
-        uses: actions/upload-pages-artifact@v1
+      - name: Upload artifact for pages
+        uses: actions/upload-pages-artifact@v3
         with:
           path: ./dist
-      - name: Upload artifact for embed view # upload unzipped artifact named 'zenuml-embed' for cpina/github-action-push-to-another-repository@main
-        uses: actions/upload-artifact@v3
+      - name: Upload artifact for embed view
+        uses: actions/upload-artifact@v4
         with:
           name: zenuml-embed
           path: ./dist
+
   # Single deploy job since we're just deploying
   publish-to-gh-pages:
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     needs: build-site
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v4
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentAlt.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentAlt.vue
index a669b09c..ecc8ee28 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentAlt.vue
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentAlt.vue
@@ -37,9 +37,9 @@
           <ConditionLabel :condition="conditionFromIfElseBlock(ifBlock)" />
         </div>
         <block
-          :origin="origin"
+          :origin="leftParticipant"
           v-if="blockInIfBlock"
-          :style="{ paddingLeft: `${offsetX}px` }"
+          :style="{ paddingLeft: `${paddingLeft}px` }"
           :context="blockInIfBlock"
           :number="`${number}.1`"
           incremental
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentCritical.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentCritical.vue
index 942f94a3..fd6bcccd 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentCritical.vue
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentCritical.vue
@@ -37,11 +37,12 @@
           <!-- Value -->
         </div>
         <block
-          :origin="origin"
+          :origin="leftParticipant"
           v-if="blockInCritical"
-          :style="{ paddingLeft: `${offsetX}px` }"
+          :style="{ paddingLeft: `${paddingLeft}px` }"
           :context="blockInCritical"
-          :number="number"
+          :number="`${number}.1`"
+          incremental
         ></block>
       </div>
     </div>
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentLoop.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentLoop.vue
index 8ae9767a..b34ab979 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentLoop.vue
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentLoop.vue
@@ -32,10 +32,11 @@
           <ConditionLabel :condition="getConditionFromBlock(blockInLoop)" />
         </div>
         <block
-          :origin="origin"
-          :style="{ paddingLeft: `${offsetX}px` }"
+          :origin="leftParticipant"
+          :style="{ paddingLeft: `${paddingLeft}px` }"
           :context="blockInLoop"
-          :number="number"
+          :number="`${number}.1`"
+          incremental
         ></block>
       </div>
     </div>
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentMixin.js b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentMixin.js
index 6cc0b6dd..58fe790f 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentMixin.js
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentMixin.js
@@ -36,6 +36,10 @@ export default {
         halfLeftParticipant
       );
     },
+    paddingLeft: function () {
+      let halfLeftParticipant = this.coordinates.half(this.leftParticipant);
+      return this.border.left + halfLeftParticipant;
+    },
     fragmentStyle: function () {
       return {
         // +1px for the border of the fragment
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentOpt.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentOpt.vue
index 6879169e..a0d99a2e 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentOpt.vue
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentOpt.vue
@@ -27,11 +27,12 @@
       </div>
     </div>
     <block
-      :origin="origin"
+      :origin="leftParticipant"
       :class="{ hidden: collapsed }"
-      :style="{ paddingLeft: `${offsetX}px` }"
+      :style="{ paddingLeft: `${paddingLeft}px` }"
       :context="opt?.braceBlock()?.block()"
-      :number="number"
+      :number="`${number}.1`"
+      incremental
     ></block>
   </div>
 </template>
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentPar.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentPar.vue
index 9fe627ea..5aae54e7 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentPar.vue
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentPar.vue
@@ -28,11 +28,12 @@
     </div>
     <block
       v-if="!!par.braceBlock()"
-      :origin="origin"
+      :origin="leftParticipant"
       :class="{ hidden: collapsed }"
-      :style="{ paddingLeft: `${offsetX}px` }"
+      :style="{ paddingLeft: `${paddingLeft}px` }"
       :context="par.braceBlock().block()"
-      :number="number"
+      :number="`${number}.1`"
+      incremental
     ></block>
   </div>
 </template>
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentRef.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentRef.vue
index a085b36e..300c67f0 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentRef.vue
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentRef.vue
@@ -1,11 +1,11 @@
 <template>
   <div
-    :data-origin="origin"
+    :data-origin="leftParticipant"
     :data-left-participant="leftParticipant"
     :data-frame-padding-left="border.left"
     :data-frame-padding-right="border.right"
     class="fragment bg-skin-frame border-skin-fragment relative rounded min-w-[140px] w-max py-4 px-2 flex justify-center items-center flex-col"
-    :style="fragmentStyle"
+    :style="{ ...fragmentStyle, paddingLeft: `${paddingLeft}px` }"
   >
     <div
       class="header bg-skin-fragment-header text-skin-fragment-header leading-4 rounded-t absolute top-0 left-0"
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentSection.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentSection.vue
index ac00ef9d..e54c4e9a 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentSection.vue
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentSection.vue
@@ -37,9 +37,9 @@
           <!-- Value -->
         </div>
         <block
-          :origin="origin"
+          :origin="leftParticipant"
           v-if="blockInSection"
-          :style="{ paddingLeft: `${offsetX}px` }"
+          :style="{ paddingLeft: `${paddingLeft}px` }"
           :context="blockInSection"
           :number="number"
         ></block>
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentTryCatchFinally.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentTryCatchFinally.vue
index bd70e532..c687bb88 100644
--- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentTryCatchFinally.vue
+++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentTryCatchFinally.vue
@@ -32,9 +32,9 @@
       <div class="segment">
         <!-- fragment-offset set as offsetX - 1 for fragment border     -->
         <block
-          :origin="origin"
+          :origin="leftParticipant"
           v-if="blockInTryBlock"
-          :style="{ paddingLeft: `${offsetX}px` }"
+          :style="{ paddingLeft: `${paddingLeft}px` }"
           :context="blockInTryBlock"
           :number="`${number}.1`"
           incremental
@@ -54,8 +54,8 @@
             ><label class="exception p-1">{{ exception(catchBlock) }}</label>
           </div>
           <block
-            :origin="origin"
-            :style="{ paddingLeft: `${offsetX}px` }"
+            :origin="leftParticipant"
+            :style="{ paddingLeft: `${paddingLeft}px` }"
             :context="blockInCatchBlock(catchBlock)"
             :key="index + 2000"
             :number="`${number}.${blockLengthAcc[index] + 1}`"
@@ -72,8 +72,8 @@
             >
           </div>
           <block
-            :origin="origin"
-            :style="{ paddingLeft: `${offsetX}px` }"
+            :origin="leftParticipant"
+            :style="{ paddingLeft: `${paddingLeft}px` }"
             :context="finallyBlock"
             :number="`${number}.${
               blockLengthAcc[blockLengthAcc.length - 1] + 1