Fix/return message width (#205)

* Fixed the gaps for return messages. * Fixed a lint warning. * Updated cy test for 'return'.
mermaid-js · Nov 1, 2024 · 1e88255 · 1e88255
1 parent 5746486
commit 1e88255
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 32 deletions.
diff --git a/cy/smoke-return.html → cy/return.html b/cy/smoke-return.html → cy/return.html
@@ -14,21 +14,21 @@
   <body>
     <div id="diagram" class="diagram">
       <pre class="zenuml" style="margin: 0">
-  Browser->BookController.onPost() {
-  BookLibService.Borrow(id) {
-      receipt = process(id1)
-      if (receipt != null) {
-        return receipt
-        @return BookController->Browser: receipt
-      } else {
-        return null
-        @return BookController->Browser: 404
-      }
-      self() {
-        return a_long_value_from_self_call
-      }
+A B C D
+
+A->B.method() {
+  ret0_assign_rtl =C.method_long_to_give_space {
+    @return C->D: ret1_annotation_ltr
+    ret5_assign_ltr = B.method
+    B.method2 {
+      return ret2_return_ltr
+    }
   }
+
+  return ret2_return_rtl
+  @return B->A: ret4_annotation_rtl
 }
+
 </pre
       >
     </div>

diff --git a/cypress/e2e/__image_snapshots__/Return functionality return #0.png b/cypress/e2e/__image_snapshots__/Return functionality return #0.png
diff --git a/cypress/e2e/__image_snapshots__/Smoke test return #0.png b/cypress/e2e/__image_snapshots__/Smoke test return #0.png
diff --git a/cypress/e2e/return.spec.js b/cypress/e2e/return.spec.js
@@ -1,8 +1,8 @@
 /* eslint-disable no-undef */
 import "cypress-plugin-snapshots/commands";
-describe("Smoke test", function () {
+describe("Return functionality", function () {
   it("return", function () {
-    cy.visit("http://127.0.0.1:8080/cy/smoke-return.html");
+    cy.visit("http://127.0.0.1:8080/cy/return.html");
     // This line is to make sure the privacy icon is loaded
     cy.get(".privacy>span>svg", { timeout: 5000 }).should("be.visible");
     cy.document().toMatchImageSnapshot({

diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Return/Return.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Return/Return.vue
@@ -6,8 +6,9 @@
     :data-signature="signature"
     :class="{
       'right-to-left': rightToLeft,
+      'bare-source': bareSource,
+      'bare-target': bareTarget,
       highlight: isCurrent,
-      'return-to-start': isReturnToStart,
     }"
     :style="{ width: width + 'px', left: left + 'px' }"
   >
@@ -44,9 +45,9 @@
 import Comment from "../Comment/Comment.vue";
 import Message from "../Message/Message.vue";
 import { mapGetters } from "vuex";
-import { CodeRange } from "../../../../../../../parser/CodeRange";
+import { CodeRange } from "@/parser/CodeRange";
 import WidthProviderOnBrowser from "../../../../../../../positioning/WidthProviderFunc";
-import { TextType } from "../../../../../../../positioning/Coordinate";
+import { TextType } from "@/positioning/Coordinate";
 
 export default {
   name: "return",
@@ -66,8 +67,8 @@ export default {
     },
     left: function () {
       return this.rightToLeft
-        ? this.distance(this.target, this.from) + 2
-        : this.distance(this.source, this.from) + 2;
+        ? this.distance(this.target, this.from)
+        : this.distance(this.source, this.from);
     },
     rightToLeft: function () {
       return this.distance(this.target, this.source) < 0;
@@ -87,15 +88,46 @@ export default {
         this.context?.ret()?.ReturnTo()
       );
     },
+    bareSource: function () {
+      let localCtx = this.context;
+      while (
+        localCtx.parentCtx &&
+        (!localCtx?.Owner ||
+          (localCtx?.Owner && localCtx.Owner() !== this.source))
+      ) {
+        localCtx = localCtx.parentCtx;
+      }
+      console.log(
+        "bareSource",
+        localCtx.constructor.name,
+        this.source,
+        this.signature,
+      );
+      return localCtx.constructor.name !== "MessageContext";
+    },
+    bareTarget: function () {
+      let localCtx = this.context;
+      while (
+        localCtx.parentCtx &&
+        (!localCtx?.Owner ||
+          (localCtx?.Owner && localCtx.Owner() !== this.target))
+      ) {
+        localCtx = localCtx.parentCtx;
+      }
+      console.log(
+        "bareTarget",
+        localCtx.constructor.name,
+        this.target,
+        this.signature,
+      );
+      return localCtx.constructor.name !== "MessageContext";
+    },
     isCurrent: function () {
       return false;
     },
     isSelf: function () {
       return this.source === this.target;
     },
-    isReturnToStart() {
-      return this.target === this.participants.Starter().name;
-    },
     messageTextStyle() {
       return this.commentObj?.messageStyle;
     },
@@ -117,3 +149,22 @@ export default {
   },
 };
 </script>
+<style scoped>
+.bare-source.return.right-to-left {
+  border-right-width: 0;
+}
+.bare-target.return.right-to-left {
+  border-left-width: 0;
+}
+.bare-source.return:not(.right-to-left) {
+  border-left-width: 0;
+}
+.bare-target.return:not(.right-to-left) {
+  border-right-width: 0;
+}
+
+.interaction.return {
+  border-left-width: 7px;
+  border-right-width: 7px;
+}
+</style>
diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLayer.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLayer.vue
@@ -111,15 +111,6 @@ onUpdated(() => {
     border-left-width: 7px;
   }
 
-  .interaction.return {
-    border-left-width: 7px;
-    border-right-width: 7px;
-  }
-
-  .interaction.return-to-start {
-    border-left-width: 0;
-  }
-
   .interaction:hover {
     cursor: pointer;
   }