Fixed fragment rendering issue see #232.

.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

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

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>

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>

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

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>

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>

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"

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>

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