fix: alignment issue #88 #89

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

@@ -1,28 +1,41 @@
 <template>
   <div class="block">
-    <div class="statement-container mt-1" v-for="(stat, index) in statements" :key="index">
-      <Statement :context="stat" :collapsed="collapsed" :selfCallIndent="selfCallIndent" :number="getNumber(index)" />
+    <div
+      class="statement-container mt-1"
+      v-for="(stat, index) in statements"
+      :key="index"
+    >
+      <Statement
+        :inheritFromOccurrence="inheritFromOccurrence"
+        :context="stat"
+        :collapsed="collapsed"
+        :selfCallIndent="selfCallIndent"
+        :number="getNumber(index)"
+      />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import Statement from './Statement/Statement.vue';
-import { increaseNumber } from '@/utils/Numbering';
+import { computed } from "vue";
+import Statement from "./Statement/Statement.vue";
+import { increaseNumber } from "@/utils/Numbering";
 
 const props = defineProps<{
   context?: any;
   selfCallIndent?: number;
   number?: string;
   incremental?: boolean;
-  collapsed?:boolean;
-}>()
-const statements = computed(() => props.context?.stat() || [])
+  collapsed?: boolean;
+  inheritFromOccurrence?: boolean;
+}>();
+const statements = computed(() => props.context?.stat() || []);
 const getNumber = (index: number) => {
   if (props.number) {
-    return props.incremental ? increaseNumber(props.number, index) : `${props.number}.${index + 1}`
+    return props.incremental
+      ? increaseNumber(props.number, index)
+      : `${props.number}.${index + 1}`;
   }
-  return String(index + 1)
-}
+  return String(index + 1);
+};
 </script>

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

@@ -8,7 +8,7 @@
     :class="{
       highlight: isCurrent,
       self: isSelf,
-      'inited-from-occurrence': isInitedFromOccurrence,
+      'inited-from-occurrence': inheritFromOccurrence,
       'right-to-left': rightToLeft,
     }"
     :style="{
@@ -64,12 +64,18 @@ import Occurrence from "./Occurrence/Occurrence.vue";
 import Message from "../Message/Message.vue";
 import { mapGetters } from "vuex";
 import SelfInvocation from "./SelfInvocation/SelfInvocation.vue";
-import { CodeRange } from "../../../../../../../parser/CodeRange";
-import { ProgContext } from "../../../../../../../parser";
+import { CodeRange } from "@/parser/CodeRange";
+import { ProgContext } from "@/parser";
 
 export default {
   name: "interaction",
-  props: ["context", "selfCallIndent", "commentObj", "number"],
+  props: [
+    "context",
+    "selfCallIndent",
+    "commentObj",
+    "number",
+    "inheritFromOccurrence",
+  ],
   computed: {
     // add tracker to the mapGetters
     ...mapGetters(["participants", "distance2", "cursor", "onElementClick"]),

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

@@ -7,33 +7,38 @@
     :data-x-offset="center"
     :data-debug-center-of="computedCenter"
   >
-    <collapse-button v-if="hasAnyStatementsExceptReturn"  :collapsed="collapsed" @click="this.toggle"/>
+    <collapse-button
+      v-if="hasAnyStatementsExceptReturn"
+      :collapsed="collapsed"
+      @click="this.toggle"
+    />
     <block
       v-if="this.context.braceBlock()"
       :context="context.braceBlock().block()"
       :selfCallIndent="selfCallIndent"
       :number="number"
       :collapsed="collapsed"
+      :inheritFromOccurrence="true"
     ></block>
   </div>
 </template>
 
 <script type="text/babel">
-import { mapState, mapGetters } from 'vuex';
-import CollapseButton from './CollapseButton.vue';
-import EventBus from '../../../../../../../../EventBus';
+import { mapState, mapGetters } from "vuex";
+import CollapseButton from "./CollapseButton.vue";
+import EventBus from "../../../../../../../../EventBus";
 export default {
-  name: 'occurrence',
-  props: ['context', 'selfCallIndent', 'participant', 'rtl', 'number'],
+  name: "occurrence",
+  props: ["context", "selfCallIndent", "participant", "rtl", "number"],
   data: function () {
     return {
       center: 0,
       collapsed: false,
     };
   },
   computed: {
-    ...mapGetters(['centerOf', 'messageLayerLeft']),
-    ...mapState(['code']),
+    ...mapGetters(["centerOf", "messageLayerLeft"]),
+    ...mapState(["code"]),
     computedCenter: function () {
       try {
         return this.centerOf(this.participant);
@@ -43,37 +48,37 @@ export default {
       }
     },
     hasAnyStatementsExceptReturn: function () {
-      let braceBlock=this.context.braceBlock();
-      if(!braceBlock)return false;
-      let stats=(braceBlock.block()?.stat() || []);
-      let len=stats.length;
-      if(len>1)return true;
+      let braceBlock = this.context.braceBlock();
+      if (!braceBlock) return false;
+      let stats = braceBlock.block()?.stat() || [];
+      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;
+      if (len == 1 && stats[0]["ret"]() == null) return true;
       return false;
-    }
+    },
   },
   // The following code will cause the Block to be created and mounted AFTER the occurrence (and upto DiagramFrame) is updated.
   // Block must be defined globally to ensure that it is rendered in the same time cycle as the whole diagram.
   // components: {
   //   Block: () => import('../../../Block.vue')
   // },
   methods: {
-    toggle($event) {
+    toggle() {
       this.collapsed = !this.collapsed;
 
       //update participant top in this cases: has child and sibling creation statement
       //e.g. : a.call() { b = new B(); b.call() { c = new C() c.call(){return}}}
-      EventBus.$emit('participant_set_top');
-    }
+      EventBus.$emit("participant_set_top");
+    },
   },
   components: { CollapseButton },
   watch: {
-    context(v) {
-      if(this.collapsed) {
+    context() {
+      if (this.collapsed) {
         this.collapsed = false;
       }
-    }
+    },
   },
 };
 </script>
@@ -91,7 +96,11 @@ export default {
   transform: translateY(1px);
 }
 
-:deep(> .statement-container:last-child > .interaction.return:last-of-type > .message) {
+: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;
 }

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

@@ -3,58 +3,66 @@
        Set text color to text-skin-base for all messages and allow fragments to override it. -->
   <component
     class="text-left text-sm text-skin-message"
-    :class="{ 'hidden': collapsedCheck}"
+    :class="{ hidden: collapsedCheck }"
     v-bind:is="subStatement"
     :context="context"
     :comment="comment"
     :commentObj="commentObj"
     :selfCallIndent="selfCallIndent"
     :number="number"
+    :inheritFromOccurrence="inheritFromOccurrence"
   ></component>
 </template>
 
 <script>
-import Creation from './Creation/Creation.vue';
-import Interaction from './Interaction/Interaction.vue';
-import InteractionAsync from './InteractionAsync/Interaction-async.vue';
-import FragmentAlt from './Fragment/FragmentAlt.vue';
-import FragmentPar from './Fragment/FragmentPar.vue';
-import FragmentLoop from './Fragment/FragmentLoop.vue';
-import FragmentOpt from './Fragment/FragmentOpt.vue';
-import FragmentTryCatchFinally from './Fragment/FragmentTryCatchFinally.vue';
-import Return from './Return/Return.vue';
-import Divider from './Divider/Divider.vue';
-import Comment from '../../../../../Comment/Comment';
+import Creation from "./Creation/Creation.vue";
+import Interaction from "./Interaction/Interaction.vue";
+import InteractionAsync from "./InteractionAsync/Interaction-async.vue";
+import FragmentAlt from "./Fragment/FragmentAlt.vue";
+import FragmentPar from "./Fragment/FragmentPar.vue";
+import FragmentLoop from "./Fragment/FragmentLoop.vue";
+import FragmentOpt from "./Fragment/FragmentOpt.vue";
+import FragmentTryCatchFinally from "./Fragment/FragmentTryCatchFinally.vue";
+import Return from "./Return/Return.vue";
+import Divider from "./Divider/Divider.vue";
+import Comment from "../../../../../Comment/Comment";
 
 export default {
-  name: 'statement',
-  props: ['context', 'selfCallIndent', 'number','collapsed'],
+  name: "statement",
+  props: [
+    "context",
+    "selfCallIndent",
+    "number",
+    "collapsed",
+    "inheritFromOccurrence",
+  ],
   computed: {
     comment: function () {
-      return this.context.getComment() ? this.context.getComment() : '';
+      return this.context.getComment() ? this.context.getComment() : "";
     },
     commentObj: function () {
       return new Comment(this.comment);
     },
     subStatement: function () {
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
       let that = this;
       let dict = {
-        loop: 'FragmentLoop',
-        alt: 'FragmentAlt',
-        par: 'FragmentPar',
-        opt: 'FragmentOpt',
-        tcf: 'FragmentTryCatchFinally',
-        creation: 'Creation',
-        message: 'Interaction',
-        asyncMessage: 'InteractionAsync',
-        divider: 'Divider',
-        ret: 'Return',
+        loop: "FragmentLoop",
+        alt: "FragmentAlt",
+        par: "FragmentPar",
+        opt: "FragmentOpt",
+        tcf: "FragmentTryCatchFinally",
+        creation: "Creation",
+        message: "Interaction",
+        asyncMessage: "InteractionAsync",
+        divider: "Divider",
+        ret: "Return",
       };
       let key = Object.keys(dict).find((x) => that.context[x]() !== null);
       return dict[key];
     },
-    collapsedCheck:function(){
-       return this.collapsed && this.subStatement!='Return';
+    collapsedCheck: function () {
+      return this.collapsed && this.subStatement != "Return";
     },
   },
   components: {

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

@@ -56,6 +56,37 @@ onUpdated(() => {
     border-right-width: 7px;
   }
 
+  .alt,
+  .fragment {
+    .interaction.sync {
+      border-left-width: 7px;
+      //border-right-width: 0;
+    }
+  }
+
+  .occurrence {
+    .occurrence {
+      .interaction.sync,
+      .interaction.async {
+        border-right-width: 7px;
+      }
+    }
+  }
+
+  .occurrence {
+    .interaction.sync,
+    .interaction.async {
+      border-left-width: 7px;
+    }
+    .interaction.sync.right-to-left {
+      border-right-width: 7px;
+    }
+    .interaction.async.right-to-left {
+      border-right-width: 7px;
+      border-left-width: 0;
+    }
+  }
+
   .interaction.sync.right-to-left {
     /* This border width configuration make sure the content width is
        the same as from the source occurrence's right border to target

src/parser/IsInitedFromOccurrence.js

@@ -1,4 +1,4 @@
-import { default as sequenceParser } from '../generated-parser/sequenceParser';
+import { default as sequenceParser } from "../generated-parser/sequenceParser";
 const seqParser = sequenceParser;
 
 const CreationContext = seqParser.CreationContext;
@@ -18,6 +18,7 @@ MessageContext.prototype.isInitedFromOccurrence = function (from) {
  * say that the message is inited from an occurrence
  **/
 function isInitedFromOccurrence(from) {
+  // eslint-disable-next-line @typescript-eslint/no-this-alias
   let current = this;
   while (current != null) {
     if (current instanceof seqParser.StatContext) {
@@ -37,4 +38,3 @@ function isInitedFromOccurrence(from) {
   }
   return false;
 }
-