fixup! fix: alignment issue #88 #89

mermaid-js · Dec 4, 2023 · b65e035 · b65e035
1 parent 42c3c68
commit b65e035
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 57 deletions.
diff --git a/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/LifeLine.vue b/src/components/DiagramFrame/SeqDiagram/LifeLineLayer/LifeLine.vue
@@ -4,31 +4,31 @@
     class="lifeline absolute flex flex-col mx-2 transform -translate-x-1/2 h-full"
     :style="{ paddingTop: top + 'px', left: left + 'px' }"
   >
-    <div v-show="debug">{{centerOf(entity.name)}}</div>
+    <div v-show="debug">{{ centerOf(entity.name) }}</div>
     <participant v-if="renderParticipants" :entity="entity" :offsetTop="top" />
-    <div v-else class="line w0 mx-auto flex-grow w-px"></div>
+    <div v-else class="line absolute inset-0 w0 mx-auto flex-grow w-px"></div>
   </div>
 </template>
 
 <script>
-import parentLogger from '../../../../logger/logger';
-import EventBus from '../../../../EventBus';
-import { mapGetters, mapState } from 'vuex';
-import Participant from './Participant.vue';
-const logger = parentLogger.child({ name: 'LifeLine' });
+import parentLogger from "../../../../logger/logger";
+import EventBus from "../../../../EventBus";
+import { mapGetters, mapState } from "vuex";
+import Participant from "./Participant.vue";
+const logger = parentLogger.child({ name: "LifeLine" });
 export default {
-  name: 'life-line',
+  name: "life-line",
   components: { Participant },
-  props: ['entity', 'context', 'groupLeft', 'inGroup', 'renderParticipants'],
+  props: ["entity", "context", "groupLeft", "inGroup", "renderParticipants"],
   data: () => {
     return {
       translateX: 0,
       top: 0,
     };
   },
   computed: {
-    ...mapGetters(['centerOf']),
-    ...mapState(['scale']),
+    ...mapGetters(["centerOf"]),
+    ...mapState(["scale"]),
     debug() {
       return !!localStorage.zenumlDebug;
     },
@@ -43,7 +43,10 @@ export default {
       logger.debug(`nextTick after updated for ${this.entity.name}`);
     });
 
-    EventBus.$on('participant_set_top', () => this.$nextTick(() => this.setTop()));
+    EventBus.$on("participant_set_top", () =>
+      // eslint-disable-next-line vue/valid-next-tick
+      this.$nextTick(() => this.setTop()),
+    );
 
     // setTimeout( () => {
     //   this.setTop()
@@ -65,15 +68,23 @@ export default {
   },
   methods: {
     onSelect() {
-      this.$store.commit('onSelect', this.entity.name);
+      this.$store.commit("onSelect", this.entity.name);
     },
     setTop() {
       // escape entity name to avoid 'not a valid selector' error.
-      const escapedName = this.entity.name.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
+      const escapedName = this.entity.name.replace(
+        // eslint-disable-next-line no-useless-escape
+        /([ #;&,.+*~\':"!^$[\]()=>|\/@])/g,
+        "\\$1",
+      );
       const $el = this.$store.getters.diagramElement;
       const firstMessage = $el?.querySelector(`[data-to="${escapedName}"]`);
       const isVisible = firstMessage?.offsetParent != null;
-      if (firstMessage && firstMessage.attributes['data-type'].value === 'creation' && isVisible) {
+      if (
+        firstMessage &&
+        firstMessage.attributes["data-type"].value === "creation" &&
+        isVisible
+      ) {
         logger.debug(`First message to ${this.entity.name} is creation`);
         const rootY = this.$el.getBoundingClientRect().y;
         const messageY = firstMessage.getBoundingClientRect().y;
@@ -89,7 +100,11 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .lifeline .line {
-  background: linear-gradient(to bottom, transparent 50%, var(--color-border-base) 50%);
+  background: linear-gradient(
+    to bottom,
+    transparent 50%,
+    var(--color-border-base) 50%
+  );
   background-size: 1px 10px;
 }
 </style>
diff --git a/...mponents/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.vue b/...mponents/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.vue
@@ -8,6 +8,7 @@
     :class="{
       highlight: isCurrent,
       self: isSelf,
+      'from-no-occurrence': providedFrom && providedFrom !== origin,
       'inited-from-occurrence': inheritFromOccurrence,
       'right-to-left': rightToLeft,
     }"
@@ -164,7 +165,7 @@ export default {
       return this.isSelf ? "SelfInvocation" : "Message";
     },
     isInitedFromOccurrence: function () {
-      return this.message?.isInitedFromOccurrence(this.from);
+      return this.message?.isInitedFromOccurrence(this.context);
     },
   },
   methods: {

diff --git a/...agramFrame/SeqDiagram/MessageLayer/Block/Statement/InteractionAsync/Interaction-async.vue b/...agramFrame/SeqDiagram/MessageLayer/Block/Statement/InteractionAsync/Interaction-async.vue
@@ -4,6 +4,7 @@
     v-on:click.stop="onClick"
     :data-signature="signature"
     :class="{
+      'to-occurrence': isToOccurrence,
       'right-to-left': rightToLeft,
       highlight: isCurrent,
       'self-invocation': isSelf,
@@ -101,11 +102,34 @@ export default {
     messageClassNames() {
       return this.commentObj?.classNames;
     },
+    isToOccurrence() {
+      return this.parentCtxIncludeMessage(this.asyncMessage);
+    },
   },
   methods: {
     onClick() {
       this.onElementClick(CodeRange.from(this.context));
     },
+    parentCtxIncludeMessage(current) {
+      const target = current.Owner();
+
+      if (!target) {
+        return false;
+      }
+
+      current = current?.parentCtx;
+
+      while (current) {
+        if (current.To) {
+          if (current.To() === target) {
+            return true;
+          }
+        }
+        current = current.parentCtx;
+      }
+
+      return false;
+    },
   },
   components: {
     Comment,

diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Message/Message.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Message/Message.vue
@@ -19,17 +19,26 @@
         <div :style="textStyle" :class="classNames">
           {{ content }}
         </div>
-        <div class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500" v-if="numbering">{{ number }}</div>
+        <div
+          class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500"
+          v-if="numbering"
+        >
+          {{ number }}
+        </div>
       </div>
     </div>
-    <point class="flex-shrink-0 transform translate-y-1/2 -my-px" :fill="fill" :rtl="rtl" />
+    <point
+      class="flex-shrink-0 transform translate-y-1/2 -my-px"
+      :fill="fill"
+      :rtl="rtl"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { useStore } from 'vuex';
-import Point from './Point/Point.vue';
-import { computed, toRefs, ref } from 'vue';
+import { useStore } from "vuex";
+import Point from "./Point/Point.vue";
+import { computed, toRefs, ref } from "vue";
 const props = defineProps<{
   context?: any;
   content: string;
@@ -38,35 +47,36 @@ const props = defineProps<{
   textStyle?: Record<string, string | number>;
   classNames?: any;
   number?: string;
-}>()
-const { context, content, rtl, type, textStyle, classNames, number } = toRefs(props)
-const store = useStore()
-const messageRef = ref()
-const numbering = computed(() => store.state.numbering)
-const isAsync = computed(() => type?.value === 'async')
+}>();
+const { context, content, rtl, type, textStyle, classNames, number } =
+  toRefs(props);
+const store = useStore();
+const messageRef = ref();
+const numbering = computed(() => store.state.numbering);
+const isAsync = computed(() => type?.value === "async");
 const borderStyle = computed(() => {
   switch (type?.value) {
-    case 'sync':
-    case 'async':
-      return 'solid'
-    case 'creation':
-    case 'return':
-      return 'dashed'
+    case "sync":
+    case "async":
+      return "solid";
+    case "creation":
+    case "return":
+      return "dashed";
   }
-  return ''
-})
+  return "";
+});
 const fill = computed(() => {
   switch (type?.value) {
-    case 'sync':
-    case 'async':
-      return true
-    case 'creation':
-    case 'return':
-      return false
+    case "sync":
+    case "async":
+      return true;
+    case "creation":
+    case "return":
+      return false;
   }
-  return false
-})
+  return false;
+});
 const onClick = () => {
-  store.getters.onMessageClick(context, messageRef.value)
-}
-</script>
+  store.getters.onMessageClick(context, messageRef.value);
+};
+</script>
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLayer.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLayer.vue
@@ -66,14 +66,6 @@ onUpdated(() => {
     border-right-width: 7px;
   }
 
-  .alt,
-  .fragment {
-    .interaction.sync {
-      border-left-width: 7px;
-      //border-right-width: 0;
-    }
-  }
-
   .occurrence {
     .occurrence {
       .interaction.sync,
@@ -86,17 +78,25 @@ onUpdated(() => {
   .occurrence {
     .interaction.sync,
     .interaction.async {
-      border-left-width: 7px;
+      border-left-width: 8px;
     }
     .interaction.sync.right-to-left {
       border-right-width: 7px;
     }
     .interaction.async.right-to-left {
       border-right-width: 7px;
+      border-left-width: 7px;
+    }
+    .interaction.async.right-to-left {
+      border-left-width: 0;
+    }
+    .interaction.sync.from-no-occurrence {
       border-left-width: 0;
     }
+    .interaction.async.right-to-left.to-occurrence {
+      border-left-width: 7px;
+    }
   }
-
   .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