feat:expand and collapse for messages

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

@@ -1,7 +1,7 @@
 <template>
   <div class="block">
     <div class="statement-container mt-1" v-for="(stat, index) in statements" :key="index">
-      <Statement :context="stat" :selfCallIndent="selfCallIndent" :number="getNumber(index)" />
+      <Statement :context="stat" :collapsed="collapsed" :selfCallIndent="selfCallIndent" :number="getNumber(index)" />
     </div>
   </div>
 </template>
@@ -16,6 +16,7 @@ const props = defineProps<{
   selfCallIndent?: number;
   number?: string;
   incremental?: boolean;
+  collapsed?:boolean;
 }>()
 const statements = computed(() => props.context?.stat() || [])
 const getNumber = (index: number) => {

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

@@ -0,0 +1,40 @@
+<template>
+  <div class="collapsible-header">
+    <svg width="20px" height="20px" 
+    :class="{hidden:collapsed,expanded:!collapsed}" 
+    @click="$emit('click',$event)" 
+    class="collapse-button cursor-pointer" 
+    viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg" fill=none stroke="#000000" stroke-width=1 stroke-linecap=round stroke-linejoin=miter ><g id=SVGRepo_bgCarrier stroke-width=0></g><g id=SVGRepo_tracerCarrier stroke-linecap=round stroke-linejoin=round></g><g id=SVGRepo_iconCarrier>
+    <line x1=13 y1=2 x2=13 y2=10></line>
+    <polyline points="9 7 13 11 17 7"></polyline>
+    <line x1=13 y1=23 x2=13 y2=15></line>
+    <polyline points="9 19 13 15 17 19"></polyline>
+  </g></svg>    
+  <svg width="20px" height="20px" :class="{hidden:!collapsed}" @click="$emit('click',$event)" class="cursor-pointer" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg" fill=none stroke="#000000" stroke-width=1 stroke-linecap=round stroke-linejoin=miter ><g id=SVGRepo_bgCarrier stroke-width=0></g><g id=SVGRepo_tracerCarrier stroke-linecap=round stroke-linejoin=round></g><g id=SVGRepo_iconCarrier>
+    <line x1=13 y1=1 x2=13 y2=9></line>
+    <polyline points="9 5 13 1 17 5"></polyline>
+    <line x1=13 y1=13 x2=13 y2=13></line>
+    <line x1=13 y1=24 x2=13 y2=17></line>
+    <polyline points="9 20 13 24 17 20"></polyline>
+  </g></svg>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['collapsed'],
+  emits: ['click'],
+};
+</script>
+<style scoped>
+.collapsible-header {
+   position:absolute; top:1px;left:-5px; 
+}
+.collapse-button {
+  display: none;
+}
+.occurrence:hover .collapsible-header .collapse-button.expanded {
+  display: inline-block !important;
+}
+
+</style>

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

@@ -7,24 +7,28 @@
     :data-x-offset="center"
     :data-debug-center-of="computedCenter"
   >
+    <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"
     ></block>
   </div>
 </template>
 
 <script type="text/babel">
 import { mapState, mapGetters } from 'vuex';
-
+import CollapseButton from './CollapseButton.vue';
+import EventBus from '../../../../../../../../EventBus';
 export default {
   name: 'occurrence',
   props: ['context', 'selfCallIndent', 'participant', 'rtl', 'number'],
   data: function () {
     return {
       center: 0,
+      collapsed: false,
     };
   },
   computed: {
@@ -38,12 +42,39 @@ export default {
         return 0;
       }
     },
+    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;
+      //when the only one statement is not the RetContext
+      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) {
+      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');
+    }
+  },
+  components: { CollapseButton },
+  watch: {
+    context(v) {
+      if(this.collapsed) {
+        this.collapsed = false;
+      }
+    }
+  },
 };
 </script>
 

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

@@ -3,6 +3,7 @@
        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}"
     v-bind:is="subStatement"
     :context="context"
     :comment="comment"
@@ -27,7 +28,7 @@ import Comment from '../../../../../Comment/Comment';
 
 export default {
   name: 'statement',
-  props: ['context', 'selfCallIndent', 'number'],
+  props: ['context', 'selfCallIndent', 'number','collapsed'],
   computed: {
     comment: function () {
       return this.context.getComment() ? this.context.getComment() : '';
@@ -52,6 +53,9 @@ export default {
       let key = Object.keys(dict).find((x) => that.context[x]() !== null);
       return dict[key];
     },
+    collapsedCheck:function(){
+       return this.collapsed && this.subStatement!='Return';
+    },
   },
   components: {
     Creation,