Merge branch 'main' into fix/alignment-issues-#88-#89

mermaid-js · Dec 4, 2023 · faf585e · faf585e
2 parents 744169f + de2bad7
commit faf585e
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 110 deletions.
diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
@@ -104,25 +104,3 @@ jobs:
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v1
-
-  push-to-zenuml-embed:
-    environment:
-      name: github-pages # use the same environment as publish-to-gh-pages on purpose
-      url: https://github.com/ZenUml/zenuml-embed
-    runs-on: ubuntu-latest
-    needs: build-site
-    steps:
-      - uses: actions/download-artifact@v3
-        with:
-          name: zenuml-embed
-          path: ./dist
-      - name: Pushes to another repository
-        uses: cpina/github-action-push-to-another-repository@main
-        env:
-          SSH_DEPLOY_KEY: ${{ secrets.SSH_DEPLOY_KEY }}
-        with:
-          source-directory: "./dist"
-          destination-github-username: "zenuml"
-          destination-repository-name: "zenuml-embed"
-          user-email: github.bot@zenuml.com
-          target-branch: main
diff --git a/...components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentMixin.js b/...components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/FragmentMixin.js
@@ -1,55 +1,64 @@
-import { Participants } from '@/parser';
-import { mapGetters } from 'vuex';
+import { Participants } from "@/parser";
+import { mapGetters } from "vuex";
 import FrameBuilder from "@/parser/FrameBuilder";
 import FrameBorder from "@/positioning/FrameBorder";
-import {Coordinates} from "@/positioning/Coordinates";
-import WidthProviderOnBrowser from "@/positioning/WidthProviderFunc";
-import {TotalWidth} from "@/components/DiagramFrame/SeqDiagram/WidthOfContext";
-import CollapseButton from './CollapseButton.vue';
-import EventBus from '../../../../../../../EventBus';
+import { TotalWidth } from "@/components/DiagramFrame/SeqDiagram/WidthOfContext";
+import CollapseButton from "./CollapseButton.vue";
+import EventBus from "../../../../../../../EventBus";
 
 export default {
   computed: {
-    ...mapGetters(['coordinates']),
+    ...mapGetters(["coordinates"]),
     offsetX: function () {
       const allParticipants = this.coordinates.orderedParticipantNames();
       let frameBuilder = new FrameBuilder(allParticipants);
       const frame = frameBuilder.getFrame(this.context);
       const border = FrameBorder(frame);
-      const localParticipants = [this.context.Origin(), ...Participants(this.context).Names()]
-      const leftParticipant = allParticipants.find((p) => localParticipants.includes(p));
+      const localParticipants = [
+        this.context.Origin(),
+        ...Participants(this.context).Names(),
+      ];
+      const leftParticipant = allParticipants.find((p) =>
+        localParticipants.includes(p),
+      );
       // TODO: consider using this.getParticipantGap(this.participantModels[0])
-      let halfLeftParticipant = Coordinates.half(WidthProviderOnBrowser, leftParticipant);
-      console.debug(`left participant: ${leftParticipant} ${halfLeftParticipant}`);
-      return this.coordinates.distance(leftParticipant, this.from) + border.left + halfLeftParticipant;
+      let halfLeftParticipant = this.coordinates.half(leftParticipant);
+      console.debug(
+        `left participant: ${leftParticipant} ${halfLeftParticipant}`,
+      );
+      return (
+        this.coordinates.distance(leftParticipant, this.from) +
+        border.left +
+        halfLeftParticipant
+      );
     },
     fragmentStyle: function () {
       return {
         // +1px for the border of the fragment
-        transform: 'translateX(' + (this.offsetX + 1) * -1 + 'px)',
-        width: TotalWidth(this.context, this.coordinates) + 'px',
+        transform: "translateX(" + (this.offsetX + 1) * -1 + "px)",
+        width: TotalWidth(this.context, this.coordinates) + "px",
       };
     },
   },
-  data: function() {
-    return {collapsed: false};
+  data: function () {
+    return { collapsed: false };
   },
   methods: {
-    toggle($event) {
+    toggle() {
       this.collapsed = !this.collapsed;
 
       //update participant top in two cases: 1) has child creation statement 2) has sibling creation statement
-      //e.g. 1): if(a) { new B } 
+      //e.g. 1): if(a) { new B }
       //     2): if(a) { while(b) { A.foo }; new B }
-      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;
       }
-    }
+    },
   },
 };
diff --git a/src/components/DiagramFrame/SeqDiagram/WidthOfContext.ts b/src/components/DiagramFrame/SeqDiagram/WidthOfContext.ts
@@ -1,36 +1,55 @@
-import {AllMessages} from "@/positioning/MessageContextListener";
+import { AllMessages } from "@/positioning/MessageContextListener";
 import WidthProviderOnBrowser from "../../../positioning/WidthProviderFunc";
-import {TextType} from "@/positioning/Coordinate";
-import {Participants} from "@/parser";
+import { TextType } from "@/positioning/Coordinate";
+import { Participants } from "@/parser";
 import FrameBuilder from "@/parser/FrameBuilder";
-import FrameBorder, {Frame} from "@/positioning/FrameBorder";
-import {Coordinates} from "@/positioning/Coordinates";
+import FrameBorder, { Frame } from "@/positioning/FrameBorder";
+import { Coordinates } from "@/positioning/Coordinates";
 
 export function TotalWidth(ctx: any, coordinates: Coordinates) {
   const allParticipants = coordinates.orderedParticipantNames();
-  const localParticipants = [ctx.Origin(),...Participants(ctx).Names()]
-  const leftParticipant = allParticipants.find((p) => localParticipants.includes(p)) || '';
-  const rightParticipant = allParticipants.slice().reverse().find((p) => localParticipants.includes(p)) || '';
-  // console.debug(`allParticipants: ${JSON.stringify(allParticipants)}, localParticipants: ${JSON.stringify(localParticipants)}, leftParticipant: ${leftParticipant}, rightParticipant: ${rightParticipant}`);
-  let frameBuilder = new FrameBuilder(allParticipants as string[]);
+  const localParticipants = [ctx.Origin(), ...Participants(ctx).Names()];
+  const leftParticipant =
+    allParticipants.find((p) => localParticipants.includes(p)) || "";
+  const rightParticipant =
+    allParticipants
+      .slice()
+      .reverse()
+      .find((p) => localParticipants.includes(p)) || "";
+  const frameBuilder = new FrameBuilder(allParticipants as string[]);
   const frame = frameBuilder.getFrame(ctx);
   const border = FrameBorder(frame as Frame);
-  const extraWidth = extraWidthDueToSelfMessage(ctx, rightParticipant, coordinates);
-  console.debug(`frame: ${JSON.stringify(frame)} extraWidth: ${extraWidth}, leftParticipant: ${leftParticipant}, rightParticipant: ${rightParticipant}, border: ${JSON.stringify(border)}`);
-  return coordinates.distance(leftParticipant, rightParticipant) +
+  const extraWidth = extraWidthDueToSelfMessage(
+    ctx,
+    rightParticipant,
+    coordinates,
+  );
+
+  return (
+    coordinates.distance(leftParticipant, rightParticipant) +
     border.left +
     border.right +
-    Coordinates.half(WidthProviderOnBrowser, leftParticipant) +
-    Coordinates.half(WidthProviderOnBrowser, rightParticipant) +
-    extraWidth;
+    coordinates.half(leftParticipant) +
+    coordinates.half(rightParticipant) +
+    extraWidth
+  );
 }
 
-function extraWidthDueToSelfMessage(ctx: any, rightParticipant: string, coordinates: Coordinates) {
+function extraWidthDueToSelfMessage(
+  ctx: any,
+  rightParticipant: string,
+  coordinates: Coordinates,
+) {
   const allMessages = AllMessages(ctx);
   const widths = allMessages
     .filter((m) => m.from === m.to)
     // 37 is arrow width (30) + half occurrence width(7)
-    .map((s) => WidthProviderOnBrowser(s.signature, TextType.MessageContent) + 37
-      - coordinates.distance(s.from, rightParticipant) - Coordinates.half(WidthProviderOnBrowser, rightParticipant))
+    .map(
+      (s) =>
+        WidthProviderOnBrowser(s.signature, TextType.MessageContent) +
+        37 -
+        coordinates.distance(s.from, rightParticipant) -
+        coordinates.half(rightParticipant),
+    );
   return Math.max.apply(null, [0, ...widths]);
 }
diff --git a/src/positioning/Coordinates.ts b/src/positioning/Coordinates.ts
@@ -32,17 +32,17 @@ export class Coordinates {
   }
 
   getPosition(participantName: string | undefined): number {
-    const cacheKey = `getPosition_${participantName}`;
-    const cachedPosition = getCache(cacheKey);
-    if (cachedPosition != null) {
-      return cachedPosition;
-    }
     const pIndex = this.participantModels.findIndex(
       (p) => p.name === participantName,
     );
     if (pIndex === -1) {
       throw Error(`Participant ${participantName} not found`);
     }
+    const cacheKey = `getPosition_${participantName}`;
+    const cachedPosition = getCache(cacheKey);
+    if (cachedPosition != null) {
+      return cachedPosition;
+    }
     const leftGap = this.getParticipantGap(this.participantModels[0]);
     const position = leftGap + find_optimal(this.m)[pIndex];
     setCache(cacheKey, position);
@@ -55,6 +55,28 @@ export class Coordinates {
     this.withMessageGaps(this.ownableMessages, this.participantModels);
   }
 
+  half(participantName: string) {
+    if (participantName === "_STARTER_") {
+      return MARGIN / 2;
+    }
+    const halfLeftParticipantWidth = this.halfWithMargin(
+      this.labelOrName(participantName),
+    );
+    return Math.max(halfLeftParticipantWidth, MINI_GAP / 2);
+  }
+
+  getWidth() {
+    const lastParticipant =
+      this.participantModels[this.participantModels.length - 1].name;
+    const calculatedWidth =
+      this.getPosition(lastParticipant) + this.half(lastParticipant);
+    return Math.max(calculatedWidth, 200);
+  }
+
+  distance(left: string, right: string) {
+    return this.getPosition(right) - this.getPosition(left);
+  }
+
   private withMessageGaps(
     ownableMessages: OwnableMessage[],
     participantModels: IParticipantModel[],
@@ -85,7 +107,7 @@ export class Coordinates {
   }
 
   private getMessageWidth(message: OwnableMessage) {
-    const halfSelf = Coordinates.half(this.widthProvider, message.to);
+    const halfSelf = this.half(message.to);
     let messageWidth = this.widthProvider(
       message.signature,
       TextType.MessageContent,
@@ -105,9 +127,8 @@ export class Coordinates {
   }
 
   private getParticipantGap(p: IParticipantModel) {
-    const leftNameOrLabel = this.labelOrName(p.left);
-    const halfLeft = Coordinates.half(this.widthProvider, leftNameOrLabel);
-    const halfSelf = Coordinates.half(this.widthProvider, p.label || p.name);
+    const halfLeft = this.half(p.left);
+    const halfSelf = this.half(p.name);
     // TODO: convert name to enum type
     const leftIsVisible = p.left && p.left !== "_STARTER_";
     const selfIsVisible = p.name && p.name !== "_STARTER_";
@@ -125,46 +146,14 @@ export class Coordinates {
     );
   }
 
-  static half(widthProvider: WidthFunc, participantName: string | undefined) {
-    if (participantName === "_STARTER_") {
-      return MARGIN / 2;
-    }
-    const halfLeftParticipantWidth = this.halfWithMargin(
-      widthProvider,
-      participantName,
-    );
-    return Math.max(halfLeftParticipantWidth, MINI_GAP / 2);
-  }
-
-  private static halfWithMargin(
-    widthProvider: WidthFunc,
-    participant: string | undefined,
-  ) {
-    return (
-      this._getParticipantWidth(widthProvider, participant) / 2 + MARGIN / 2
-    );
+  private halfWithMargin(participant: string | undefined) {
+    return this._getParticipantWidth(participant) / 2 + MARGIN / 2;
   }
 
-  private static _getParticipantWidth(
-    widthProvider: WidthFunc,
-    participant: string | undefined,
-  ) {
+  private _getParticipantWidth(participant: string | undefined) {
     return Math.max(
-      widthProvider(participant || "", TextType.ParticipantName),
+      this.widthProvider(participant || "", TextType.ParticipantName),
       MIN_PARTICIPANT_WIDTH,
     );
   }
-
-  getWidth() {
-    const lastParticipant =
-      this.participantModels[this.participantModels.length - 1].name;
-    const calculatedWidth =
-      this.getPosition(lastParticipant) +
-      Coordinates.half(this.widthProvider, lastParticipant);
-    return Math.max(calculatedWidth, 200);
-  }
-
-  distance(left: string, right: string) {
-    return this.getPosition(right) - this.getPosition(left);
-  }
 }