Improved self message sync/async.

A->A: async

A.method {
  self {
    B.method
    self {
      C.method
    }
  }
  A->A:method
  B->B:method
  B.method {
    B->B:self async
    C->B:async
    C->A:async
    A->C:async1
  }
}

A->A: async
A->B: async
A->C: async
B->B: async
B->C: async
B->A: async
C->C: async
C->B: async
C->A: async
A.method {
  A->A: async
  A->B: async
  A->C: async
  B->B: async
  B->C: async
  B->A: async
  C->C: async
  C->B: async
  C->A: async
  B.method {
    A->A: async
    A->B: async
    A->C: async
    B->B: async
    B->C: async
    B->A: async
    C->C: async
    C->B: async
    C->A: async
  }
}

C.method {
  A->C: async
  C->A: async
  C->B: async
  B->C: async
  B.method {
    A->A: async
    A->B: async
    A->C: async
    B->B: async
    B->C: async
    B->A: async
    C->C: async
    C->B: async
    C->A: async
  }
}

Author: MrCoder

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

@@ -70,7 +70,7 @@ import { mapGetters, mapState } from "vuex";
 import Comment from "../Comment/Comment.vue";
 import Message from "../Message/Message.vue";
 import Occurrence from "../Interaction/Occurrence/Occurrence.vue";
-import { CodeRange } from "../../../../../../../parser/CodeRange";
+import { CodeRange } from "@/parser/CodeRange";
 import Participant from "../../../../../../../components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue";
 
 const logger = parentLogger.child({ name: "Creation" });
@@ -79,7 +79,7 @@ export default {
   name: "creation",
   props: ["context", "comment", "commentObj", "selfCallIndent", "number"],
   computed: {
-    ...mapGetters(["cursor", "onElementClick", "distance"]),
+    ...mapGetters(["cursor", "onElementClick", "distance2"]),
     ...mapState(["numbering"]),
     from() {
       return this.context.Origin();
@@ -88,12 +88,15 @@ export default {
       return this.context.creation();
     },
     interactionWidth() {
-      let distance = Math.abs(this.distance(this.to, this.from));
+      if (this.context && this.isSelf) {
+        return 0;
+      }
+
       let safeOffset = this.selfCallIndent || 0;
-      return distance + (this.rightToLeft ? safeOffset : -safeOffset);
+      return Math.abs(this.distance2(this.from, this.to) - safeOffset) - 1;
     },
     rightToLeft() {
-      return this.distance(this.to, this.from) < 0;
+      return this.distance2(this.from, this.to) < 0;
     },
     signature() {
       return this.creation.SignatureText();

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

@@ -148,7 +148,7 @@ export default {
       // increases by 6px (half of the width of an execution bar). However, we set the selfCallIndent back to 0 when
       // it enters a non-self sync interaction.
       return this.isSelf && !this.isRootBlock
-        ? (this.selfCallIndent || 0) + 6
+        ? (this.selfCallIndent || 0) + 7
         : 0;
     },
     interactionWidth: function () {
@@ -157,7 +157,7 @@ export default {
       }
 
       let safeOffset = this.outOfBand ? 0 : this.selfCallIndent || 0;
-      return Math.abs(this.distance2(this.from, this.to) - safeOffset);
+      return Math.abs(this.distance2(this.from, this.to) - safeOffset) - 1;
     },
     to: function () {
       return this.context?.message()?.Owner();

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

@@ -9,7 +9,13 @@
   >
     <div
       v-if="debug"
-      class="absolute w-full left-0 bg-amber-700 h-3 -top-2 flex justify-center items-center"
+      class="absolute w-full left-0 bg-amber-700 h-3 -top-1 flex justify-center items-center"
+    >
+      <div class="w-px h-full bg-black"></div>
+    </div>
+    <div
+      v-if="debug"
+      class="absolute w-full left-0 bg-amber-700 h-3 -bottom-1 flex justify-center items-center"
     >
       <div class="w-px h-full bg-black"></div>
     </div>
@@ -95,8 +101,8 @@ export default {
 <style scoped>
 .occurrence {
   width: 15px;
-  /* 5 = (OccurrenceWidth(15)-1)/2 - OccurrenceBorderWidth(2)*/
-  padding: 16px 0 16px 5px;
+  /* 6 = (OccurrenceWidth(15)+1)/2 - OccurrenceBorderWidth(2)*/
+  padding: 16px 0 16px 6px;
 }
 
 :deep(> .statement-container:last-child > .interaction.return:last-of-type) {

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

@@ -15,30 +15,15 @@ const StylePanel = defineAsyncComponent(() => import("./StylePanel.vue"));
 
 const logger = parentLogger.child({ name: "MessageLayer" });
 
-const props = defineProps<{
-  context: any;
-}>();
 const store = useStore();
 
 const participants = computed(() => store.getters.participants);
 const centerOf = computed(() => store.getters.centerOf);
-const isSelfSyncMessage = computed(() => {
-  const syncMessage = props.context?.stat()[0].message();
-  if (!syncMessage) {
-    return false;
-  }
-  const to = syncMessage?.Owner();
-  const providedFrom = syncMessage?.ProvidedFrom();
-  const origin = props.context?.Origin();
-  const from = providedFrom || origin;
-  return !to || to === from;
-});
 
 const paddingLeft = computed(() => {
   if (participants.value.Array().length >= 1) {
     const first = participants.value.Array().slice(0)[0].name;
-    // push the message layer to the right by 1px only for self message at root level.
-    return centerOf.value(first) + (isSelfSyncMessage.value ? 1 : 0);
+    return centerOf.value(first) + 1;
   }
   return 0;
 });
@@ -80,7 +65,7 @@ onUpdated(() => {
 
   .occurrence {
     .interaction.sync {
-      border-left-width: 8px;
+      border-left-width: 7px;
     }
     .interaction.sync.right-to-left {
       border-right-width: 7px;
@@ -146,7 +131,7 @@ onUpdated(() => {
 
   .interaction.right-to-left > .occurrence {
     /* InteractionBorderWidth + (OccurrenceWidth-1)/2 */
-    left: -14px;
+    left: -15px;
     /* overlay occurrence bar on the existing bar. */
   }