Merge pull request #121 from mermaid-js/fix/format-code

Fix/format-code

.eslintrc.js

@@ -3,6 +3,7 @@ module.exports = {
     browser: true,
     es2021: true,
     node: true,
+    jest: true,
   },
   extends: [
     "eslint:recommended",

.git-blame-ignore-revs

@@ -0,0 +1,6 @@
+# This file is used to configure to ignore the given commit sha in git blame
+# To apply this file, run the following command:
+# git config blame.ignorerevsfile .git-blame-ignore-revs
+
+# This commit formatted the entire codebase
+80987154e7740ddae2c7c0a04607bc25da51586e

package.json

@@ -23,6 +23,8 @@
     "antlr:clear": "rm -rf src/generated-parser/*",
     "antlr:lexer": "java -Duser.dir=$(pwd)/src/g4 -cp $(pwd)/antlr/antlr-4.11.1-complete.jar org.antlr.v4.Tool -o ./src/generated-parser -Dlanguage=JavaScript sequenceLexer.g4",
     "antlr:parser": "java -Duser.dir=$(pwd)/src/g4 -cp $(pwd)/antlr/antlr-4.11.1-complete.jar org.antlr.v4.Tool -o ./src/generated-parser -Dlanguage=JavaScript sequenceParser.g4",
+    "eslint": "eslint --fix --ext .js,.ts,.vue src",
+    "prettier": "prettier --write --ignore-unknown \"src/**/*.{js,ts,vue,json,htm,html}\"",
     "git:branch:clean:gone": "git fetch -p && git branch -vv | awk '/: gone]/{print $1}' | xargs git branch -d",
     "git:branch:clean:merged": "git branch --merged|egrep -v \"(\\*|master|main|dev|skip_branch_name)\" | xargs git branch -d",
     "git:branch:safe-delete": "echo '> git log --graph --left-right --cherry --oneline another-branch...main'",

src/EventBus.ts

@@ -1,2 +1,2 @@
-import Vue from 'vue';
+import Vue from "vue";
 export default new Vue();

src/components/DiagramFrame/Debug/Debug.vue

@@ -14,11 +14,11 @@
 <script>
 import Icon from "@/components/Icon/Icon.vue";
 
-const commitHash = 'process.env.VUE_APP_GIT_HASH';
-const gitBranch = 'process.env.VUE_APP_GIT_BRANCH';
+const commitHash = "process.env.VUE_APP_GIT_HASH";
+const gitBranch = "process.env.VUE_APP_GIT_BRANCH";
 export default {
-  name: 'Debug',
-  components: {Icon},
+  name: "Debug",
+  components: { Icon },
   data() {
     return {
       commitHash,

src/components/DiagramFrame/DiagramTitle/DiagramTitle.vue

@@ -4,8 +4,8 @@
 
 <script>
 export default {
-  name: 'DiagramTitle',
-  props: ['context'],
+  name: "DiagramTitle",
+  props: ["context"],
   computed: {
     title: function () {
       return this.context?.content();

src/components/DiagramFrame/Privacy/Privacy.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
-    <div class="privacy tooltip bottom whitespace-normal flex items-center"
-      data-tooltip="We (the vendor) do not have access to your data. The diagram is generated in this browser.">
+    <div
+      class="privacy tooltip bottom whitespace-normal flex items-center"
+      data-tooltip="We (the vendor) do not have access to your data. The diagram is generated in this browser."
+    >
       <Icon name="privacy" icon-class="fill-current h-6 w-6 m-auto" />
     </div>
   </div>
@@ -11,8 +13,8 @@
 import Icon from "@/components/Icon/Icon.vue";
 
 export default {
-  name: 'Privacy',
-  components: {Icon},
+  name: "Privacy",
+  components: { Icon },
 };
 </script>
 
@@ -47,7 +49,9 @@ export default {
 
 .tooltip.bottom:after {
   top: 80%;
-  transition: opacity 0.3s ease 0.3s, top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
+  transition:
+    opacity 0.3s ease 0.3s,
+    top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
 }
 .tooltip.bottom:hover:after {
   display: block;

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

@@ -5,7 +5,13 @@
     v-if="entities.length > 0"
     :style="{ left: `${left}px`, width: `${right - left}px` }"
   >
-    <div class="flex flex-col  flex-grow" :class="{ shadow: !renderParticipants, 'shadow-slate-500/50': !renderParticipants }">
+    <div
+      class="flex flex-col flex-grow"
+      :class="{
+        shadow: !renderParticipants,
+        'shadow-slate-500/50': !renderParticipants,
+      }"
+    >
       <!-- TODO: add group name back later.  -->
       <!--      <div class="h-14 absolute" :class="{'-mt-12': !!name}">-->
       <!--        <label class="block text-center font-semibold">{{name}}</label>-->
@@ -26,17 +32,17 @@
 </template>
 
 <script>
-import { Participants } from '@/parser';
-import LifeLine from './LifeLine.vue';
-import { mapGetters } from 'vuex';
-import WidthProviderOnBrowser from '../../../../positioning/WidthProviderFunc';
-import { TextType } from '@/positioning/Coordinate';
+import { Participants } from "@/parser";
+import LifeLine from "./LifeLine.vue";
+import { mapGetters } from "vuex";
+import WidthProviderOnBrowser from "../../../../positioning/WidthProviderFunc";
+import { TextType } from "@/positioning/Coordinate";
 
 export default {
-  name: 'lifeline-group',
-  props: ['context', 'renderParticipants'],
+  name: "lifeline-group",
+  props: ["context", "renderParticipants"],
   computed: {
-    ...mapGetters(['centerOf']),
+    ...mapGetters(["centerOf"]),
     name() {
       return this.context?.name()?.getFormattedText();
     },
@@ -45,13 +51,19 @@ export default {
     },
     left() {
       const first = this.entities[0].name;
-      const width = Math.max(WidthProviderOnBrowser(first, TextType.ParticipantName), '100');
+      const width = Math.max(
+        WidthProviderOnBrowser(first, TextType.ParticipantName),
+        "100",
+      );
       return this.centerOf(first) - width / 2 - 8;
     },
     right() {
       const width = Math.max(
-        WidthProviderOnBrowser(this.entities.slice(-1).name, TextType.ParticipantName),
-        '100'
+        WidthProviderOnBrowser(
+          this.entities.slice(-1).name,
+          TextType.ParticipantName,
+        ),
+        "100",
       );
       const last = this.entities.slice(0).pop().name;
       return this.centerOf(last) + width / 2 + 20;

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

@@ -1,21 +1,32 @@
 <template>
-  <div class="divider" :style="{ width: width + 'px', transform: 'translateX(' + (-1 * centerOfFrom + 10) + 'px)' }">
+  <div
+    class="divider"
+    :style="{
+      width: width + 'px',
+      transform: 'translateX(' + (-1 * centerOfFrom + 10) + 'px)',
+    }"
+  >
     <div class="left bg-skin-divider"></div>
-    <div class="name" :style="messageStyle.style.textStyle" :class="messageStyle.style.classNames">{{ messageStyle.note }}
+    <div
+      class="name"
+      :style="messageStyle.style.textStyle"
+      :class="messageStyle.style.classNames"
+    >
+      {{ messageStyle.note }}
     </div>
     <div class="right bg-skin-divider"></div>
   </div>
 </template>
 
 <script>
-import { getStyle } from '@/utils/messageStyling';
-import { mapGetters } from 'vuex';
+import { getStyle } from "@/utils/messageStyling";
+import { mapGetters } from "vuex";
 
 export default {
-  name: 'divider',
-  props: ['context'],
+  name: "divider",
+  props: ["context"],
   computed: {
-    ...mapGetters(['participants', 'centerOf']),
+    ...mapGetters(["participants", "centerOf"]),
     /* Dividers have the same width as the lifeline layer */
     width() {
       // TODO: with should be the width of the whole diagram
@@ -33,14 +44,20 @@ export default {
       return this.context.divider().Note();
     },
     messageStyle() {
-      if (this.note.trim().indexOf('[') === 0 && this.note.indexOf(']') !== -1) {
-        const startIndex = this.note.indexOf('[')
-        const endIndex = this.note.indexOf(']')
-        const [style, note] = [this.note.slice(startIndex + 1, endIndex), this.note.slice(endIndex + 1)]
-        return { style: getStyle(style.split(",").map((s) => s.trim())), note }
+      if (
+        this.note.trim().indexOf("[") === 0 &&
+        this.note.indexOf("]") !== -1
+      ) {
+        const startIndex = this.note.indexOf("[");
+        const endIndex = this.note.indexOf("]");
+        const [style, note] = [
+          this.note.slice(startIndex + 1, endIndex),
+          this.note.slice(endIndex + 1),
+        ];
+        return { style: getStyle(style.split(",").map((s) => s.trim())), note };
       }
-      return { style: getStyle([]), note: this.note }
-    }
+      return { style: getStyle([]), note: this.note };
+    },
   },
 };
 </script>

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

@@ -1,15 +1,27 @@
 <template>
   <div class="fragment opt border-skin-fragment rounded" :style="fragmentStyle">
     <comment v-if="comment" :comment="comment" :commentObj="commentObj" />
-    <div class="header bg-skin-fragment-header text-skin-fragment-header text-base leading-4 relative">
-      <div v-if="numbering" class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500 text-sm font-thin leading-6">
+    <div
+      class="header bg-skin-fragment-header text-skin-fragment-header text-base leading-4 relative"
+    >
+      <div
+        v-if="numbering"
+        class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500 text-sm font-thin leading-6"
+      >
         {{ number }}
       </div>
       <div class="name font-semibold p-1 border-b">
-        <collapse-button label="Opt" :collapsed="collapsed" @click="this.toggle" :style="commentObj.textStyle" :class="commentObj.classNames"/>
+        <collapse-button
+          label="Opt"
+          :collapsed="collapsed"
+          @click="this.toggle"
+          :style="commentObj.textStyle"
+          :class="commentObj.classNames"
+        />
       </div>
     </div>
-    <block :class="{hidden: collapsed}"
+    <block
+      :class="{ hidden: collapsed }"
       :style="{ paddingLeft: `${offsetX}px` }"
       :context="opt.braceBlock().block()"
       :selfCallIndent="selfCallIndent"
@@ -19,15 +31,15 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
-import fragment from './FragmentMixin';
+import { mapState } from "vuex";
+import fragment from "./FragmentMixin";
 
 export default {
-  name: 'fragment-opt',
-  props: ['context', 'comment', 'commentObj', 'selfCallIndent', 'number'],
+  name: "fragment-opt",
+  props: ["context", "comment", "commentObj", "selfCallIndent", "number"],
   mixins: [fragment],
   computed: {
-    ...mapState(['numbering']),
+    ...mapState(["numbering"]),
     from: function () {
       return this.context.Origin();
     },

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

@@ -5,15 +5,22 @@
       <div
         class="header bg-skin-fragment-header text-skin-fragment-header text-base leading-4 rounded-t relative"
       >
-        <div v-if="numbering" class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500 text-sm font-thin leading-6">
+        <div
+          v-if="numbering"
+          class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500 text-sm font-thin leading-6"
+        >
           {{ number }}
         </div>
         <div class="name font-semibold p-1 border-b text-sm">
-          <collapse-button label="Try" :collapsed="collapsed" @click="this.toggle"/>
+          <collapse-button
+            label="Try"
+            :collapsed="collapsed"
+            @click="this.toggle"
+          />
         </div>
       </div>
     </div>
-    <div :class="{hidden: collapsed}">
+    <div :class="{ hidden: collapsed }">
       <div class="segment">
         <!-- fragment-offset set as offsetX - 1 for fragment border     -->
         <block
@@ -26,7 +33,10 @@
         >
         </block>
       </div>
-      <template v-for="(catchBlock, index) in tcf.catchBlock()" :key="index + 500">
+      <template
+        v-for="(catchBlock, index) in tcf.catchBlock()"
+        :key="index + 500"
+      >
         <div class="segment text-sm mt-2 border-t border-solid">
           <div class="header inline-block" :key="index + 1000">
             <label class="keyword catch p-1">catch</label
@@ -45,7 +55,9 @@
       <template v-if="finallyBlock">
         <div class="segment mt-2 border-t border-solid">
           <div class="header flex text-skin-fragment finally">
-            <label class="keyword finally px-1 inline-block text-sm">finally</label>
+            <label class="keyword finally px-1 inline-block text-sm"
+              >finally</label
+            >
           </div>
           <block
             :style="{ paddingLeft: `${offsetX}px` }"
@@ -61,16 +73,16 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
-import fragment from './FragmentMixin';
-import { blockLength } from '@/utils/Numbering';
+import { mapState } from "vuex";
+import fragment from "./FragmentMixin";
+import { blockLength } from "@/utils/Numbering";
 
 export default {
-  name: 'fragment-tcf',
-  props: ['context', 'comment', 'commentObj', 'selfCallIndent', 'number'],
+  name: "fragment-tcf",
+  props: ["context", "comment", "commentObj", "selfCallIndent", "number"],
   mixins: [fragment],
   computed: {
-    ...mapState(['numbering']),
+    ...mapState(["numbering"]),
     from: function () {
       return this.context.Origin();
     },
@@ -84,14 +96,16 @@ export default {
       return this.tcf?.finallyBlock()?.braceBlock()?.block();
     },
     blockLengthAcc() {
-      const acc = [blockLength(this.blockInTryBlock)]
+      const acc = [blockLength(this.blockInTryBlock)];
       if (this.tcf?.catchBlock()) {
-        this.tcf.catchBlock().forEach(block => {
-          acc.push(acc[acc.length - 1] + blockLength(this.blockInCatchBlock(block)))
-        })
+        this.tcf.catchBlock().forEach((block) => {
+          acc.push(
+            acc[acc.length - 1] + blockLength(this.blockInCatchBlock(block)),
+          );
+        });
       }
-      return acc
-    }
+      return acc;
+    },
   },
   methods: {
     exception(ctx) {