Feat/increase vertical gaps

src/components/DiagramFrame/DiagramFrame.vue

@@ -47,7 +47,7 @@
         />
       </div>
       <div
-        class="footer text-skin-control bg-skin-title px-4 py-1 flex justify-between items-center gap-3"
+        class="footer rounded text-skin-control bg-skin-title px-4 py-1 flex justify-between items-center gap-3"
       >
         <template v-if="mode === RenderMode.Dynamic">
           <div class="flex items-center gap-3 color-base">

src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Block.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="block" :data-origin="origin">
     <div
-      class="statement-container mt-1"
+      class="statement-container my-4"
       :data-origin="origin"
       v-for="(stat, index) in statements"
       :key="index"

src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Occurrence/Occurrence.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="occurrence shadow-occurrence border-skin-occurrence bg-skin-occurrence rounded-sm border-2 relative left-full"
+    class="occurrence min-h-6 shadow-occurrence border-skin-occurrence bg-skin-occurrence rounded-sm border-2 relative left-full"
     :class="{ 'right-to-left': rtl }"
     data-el-type="occurrence"
     :data-belongs-to="participant"
@@ -68,8 +68,7 @@ export default {
       let len = stats.length;
       if (len > 1) return true;
       //when the only one statement is not the RetContext
-      if (len == 1 && stats[0]["ret"]() == null) return true;
-      return false;
+      return len === 1 && stats[0]["ret"]() == null;
     },
   },
   // The following code will cause the Block to be created and mounted AFTER the occurrence (and upto DiagramFrame) is updated.
@@ -100,34 +99,15 @@ export default {
 <style scoped>
 .occurrence {
   width: 15px;
+  /* To offset Message's border-bottom width.
+  Use margin-top with relative set to save 2px at the bottom of the Occurrence.
+  If we use `top: -2px`, the 2px will still be occupied. It would have just shift the occurrence up. */
+  margin-top: -2px;
   /* 6 = (OccurrenceWidth(15)+1)/2 - OccurrenceBorderWidth(2)*/
-  padding: 16px 0 16px 6px;
-}
-
-:deep(> .statement-container:last-child > .interaction.return:last-of-type) {
-  margin-bottom: 0;
-  border-bottom: 0;
-  transform: translateY(1px);
-}
-
-:deep(
-    > .statement-container:last-child
-      > .interaction.return:last-of-type
-      > .message
-  ) {
-  bottom: -17px;
-  /* Move the absolutely positioned return message to the bottom. -17 to offset the padding of Occurrence. */
-  /* height: 0; */
+  padding-left: 6px;
 }
 
 .right-to-left.occurrence {
   left: -14px;
 }
 </style>
-
-<style>
-.occurrence {
-  margin-top: -2px;
-  /* To offset Message's border-bottom width */
-}
-</style>

src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/SelfInvocation/SelfInvocation.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- style border-width means not to be overridden. -->
   <div
-    class="self-invocation message self flex items-start flex-col"
+    class="self-invocation message leading-none self flex items-start flex-col"
     style="border-width: 0"
     @click="onClick"
     ref="messageRef"

src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Message/Message.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="message border-skin-message-arrow border-b-2 flex items-end"
+    class="message leading-none border-skin-message-arrow border-b-2 flex items-end"
     :class="{
       'flex-row-reverse': rtl,
       return: type === 'return',
@@ -28,14 +28,14 @@
             {{ content }}
           </template>
         </div>
-        <Numbering :number="number" />
       </div>
     </div>
     <point
       class="flex-shrink-0 transform translate-y-1/2 -my-px"
       :fill="fill"
       :rtl="rtl"
     />
+    <Numbering :number="number" />
   </div>
 </template>
 

src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Return/Return.vue

@@ -115,3 +115,11 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.occurrence > .block > .statement-container:last-child > .interaction.return {
+  /* It pulls up the parent's (.statement-container) bottom margin. */
+  margin-bottom: -16px;
+  bottom: -2px; /* The width of the border of the Occurrence */
+}
+</style>

src/components/DiagramFrame/SeqDiagram/MessageLayer/Numbering.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="numbering"
-    class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500 font-thin leading-6"
+    class="absolute text-xs right-[100%] top-0 pr-1 group-hover:hidden text-gray-500 font-thin"
   >
     {{ number }}
   </div>