Merge pull request #160 from mermaid-js/debug/central-line-in-occurre…

…nce-bar

Debug/central line in occurrence bar

src/components/DiagramFrame/SeqDiagram/LifeLineLayer/LifeLine.vue

@@ -2,10 +2,10 @@
   <div
     :id="entity.name"
     :entity-type="entity.type?.toLowerCase()"
-    class="lifeline absolute flex flex-col mx-2 transform -translate-x-1/2 h-full"
+    class="lifeline absolute flex flex-col mx-2 h-full"
+    :class="{ 'transform -translate-x-1/2': renderParticipants }"
     :style="{ paddingTop: top + 'px', left: left + 'px' }"
   >
-    <div v-show="debug">{{ centerOf(entity.name) }}</div>
     <participant v-if="renderParticipants" :entity="entity" :offsetTop="top" />
     <div v-if="renderLifeLine" class="line w0 mx-auto flex-grow w-px"></div>
   </div>

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

@@ -7,6 +7,12 @@
     :data-x-offset="center"
     :data-debug-center-of="computedCenter"
   >
+    <div
+      v-if="debug"
+      class="absolute w-full left-0 bg-amber-700 h-3 -top-2 flex justify-center items-center"
+    >
+      <div class="w-px h-full bg-black"></div>
+    </div>
     <collapse-button
       v-if="hasAnyStatementsExceptReturn"
       :collapsed="collapsed"
@@ -39,6 +45,9 @@ export default {
   computed: {
     ...mapGetters(["centerOf", "messageLayerLeft"]),
     ...mapState(["code"]),
+    debug() {
+      return !!localStorage.zenumlDebug;
+    },
     computedCenter: function () {
       try {
         return this.centerOf(this.participant);