Refactored targetOffset calculation to interactions and returns.

src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/ArrowMixin.spec.ts

@@ -3,6 +3,10 @@ import { createStore } from "vuex";
 import { VueSequence } from "@/index";
 // @ts-ignore
 import Interaction from "./Interaction/Interaction.vue";
+// @ts-ignore
+import Return from "./Return/Return.vue";
+// @ts-ignore
+import InteractionAsync from "./InteractionAsync/Interaction-async.vue";
 import { Fixture } from "../../../../../../../test/unit/parser/fixture/Fixture";
 import { configureCompat } from "vue";
 import { _STARTER_ } from "@/parser/OrderedParticipants";
@@ -27,12 +31,111 @@ function mountInteractionWithCode(
 
   return shallowMount(Interaction, { global: { plugins: [store] }, props });
 }
+
+function mountInteractionAsyncWithCode(
+  code: string,
+  contextLocator: (code: string) => any,
+  origin = "",
+) {
+  const storeConfig = VueSequence.Store();
+  // @ts-ignore
+  storeConfig.state.code = code;
+  const store = createStore(storeConfig);
+
+  const context = contextLocator(code);
+  const props = {
+    context,
+    origin,
+    fragmentOffset: 100,
+  };
+
+  return shallowMount(InteractionAsync, {
+    global: { plugins: [store] },
+    props,
+  });
+}
+
+function mountReturnWithCode(
+  code: string,
+  contextLocator: (code: string) => any,
+  origin = "",
+) {
+  const storeConfig = VueSequence.Store();
+  // @ts-ignore
+  storeConfig.state.code = code;
+  const store = createStore(storeConfig);
+
+  const context = contextLocator(code);
+  const props = {
+    context,
+    origin,
+    fragmentOffset: 100,
+  };
+
+  return shallowMount(Return, { global: { plugins: [store] }, props });
+}
+
 beforeEach(() => {
   configureCompat({
     RENDER_FUNCTION: false,
   });
 });
 describe("ArrowMixin", () => {
+  describe("targetOffset", () => {
+    it("sync message", async () => {
+      const creationWrapper = mountInteractionWithCode(
+        "A.method() { B.method() }",
+        Fixture.firstChild,
+        "A",
+      );
+
+      const vm = creationWrapper.vm as any;
+      expect(vm.findContextForReceiver("A").getFormattedText()).toBe(
+        "A.method() { B.method() }",
+      );
+      expect(vm.target).toBe("B");
+      expect(vm.originOffset).toBe(0);
+      expect(vm.sourceOffset).toBe(0);
+      expect(vm.targetOffset).toBe(0);
+    });
+
+    it("async message", async () => {
+      const creationWrapper = mountInteractionAsyncWithCode(
+        "A.method() { B.method() { B->A: async } }",
+        Fixture.firstGrandChild,
+        "A",
+      );
+
+      const vm = creationWrapper.vm as any;
+      expect(vm.target).toBe("A");
+      expect(vm.findContextForReceiver("A").getFormattedText()).toBe(
+        "A.method() { B.method() { B->A: async } }",
+      );
+      expect(vm.originOffset).toBe(0);
+      expect(vm.sourceOffset).toBe(0);
+      expect(vm.targetOffset).toBe(0);
+    });
+
+    it("return message", async () => {
+      const creationWrapper = mountReturnWithCode(
+        "A.method() { B.method() { return r } }",
+        Fixture.firstGrandChild,
+        "B",
+      );
+
+      const vm = creationWrapper.vm as any;
+      expect(vm.context.getFormattedText()).toBe("return r");
+      expect(vm.context.ret().ReturnTo()).toBe("A");
+      expect(vm.target).toBe("A");
+      expect(vm.findContextForReceiver("A").getFormattedText()).toBe(
+        "A.method() { B.method() { return r } }",
+      );
+      expect(vm.originOffset).toBe(0);
+      expect(vm.sourceOffset).toBe(0);
+      expect(vm.targetOffset).toBe(0);
+    });
+  });
+
   it("findContextForReceiver", async () => {
     const creationWrapper = mountInteractionWithCode(
       "A.method() { B.method() }",

src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/ArrowMixin.ts

@@ -128,7 +128,8 @@ export default defineComponent({
         }
         return false;
       }).length;
-      return length * 7;
+      if (length === 0) return 0;
+      return (length - 1) * 7;
     },
     borderWidth(this: ComponentProps): BorderWidthStyle {
       const border: BorderWidthStyle = {

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

@@ -97,6 +97,16 @@ export default {
     target: function () {
       return this.context?.message()?.Owner() || _STARTER_;
     },
+    targetOffset: function () {
+      const length = this.context.getAncestors((ctx) => {
+        if (this.isSync(ctx)) {
+          return ctx.Owner() === this.target;
+        }
+        return false;
+      }).length;
+      if (length === 0) return 0;
+      return length * 7;
+    },
     assignee: function () {
       let assignment = this.message?.Assignment();
       if (!assignment) return "";

src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/InteractionAsync/Interaction-async.vue

@@ -5,6 +5,12 @@
 <template>
   <div
     :data-origin="origin"
+    :data-to="target"
+    :data-source="source"
+    :data-target="target"
+    :data-origin-offset="originOffset"
+    :data-source-offset="sourceOffset"
+    :data-target-offset="targetOffset"
     :data-out-of-band="outOfBand"
     class="interaction async"
     v-on:click.stop="onClick"
@@ -140,38 +146,6 @@ export default {
     anchorTarget: function () {
       return new Anchor(this.centerOf(this.target), this.targetOffset);
     },
-
-    originOffset: function () {
-      const length = this.context.getAncestors((ctx) => {
-        if (this.isSync(ctx)) {
-          return ctx.Owner() === this.origin;
-        }
-        return false;
-      }).length;
-      if (length === 0) return 0;
-      return (length - 1) * 7;
-    },
-    sourceOffset: function () {
-      const length = this.context.getAncestors((ctx) => {
-        if (this.isSync(ctx)) {
-          return ctx.Owner() === this.source;
-        }
-        return false;
-      }).length;
-      if (length === 0) return 0;
-      return (length - 1) * 7;
-    },
-    targetOffset: function () {
-      const length = this.context.getAncestors((ctx) => {
-        if (this.isSync(ctx)) {
-          return ctx.Owner() === this.target;
-        }
-        return false;
-      }).length;
-      if (length === 0) return 0;
-
-      return (length - 1) * 7;
-    },
     // Both 'left' and 'translateX' can be used to move the element horizontally.
     // Change it to use translate according to https://stackoverflow.com/a/53892597/529187.
     translateX: function () {

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

@@ -5,9 +5,13 @@
     v-on:click.stop="onClick"
     data-type="return"
     :data-signature="signature"
+    :data-origin="origin"
     :data-to="target"
     :data-source="source"
     :data-target="target"
+    :data-origin-offset="originOffset"
+    :data-source-offset="sourceOffset"
+    :data-target-offset="targetOffset"
     :class="{
       'right-to-left': rightToLeft,
       'bare-source': bareSource,
@@ -17,7 +21,7 @@
     :style="{
       ...borderWidth,
       width: interactionWidth + 'px',
-      left: left + 'px',
+      transform: 'translateX(' + translateX + 'px)',
     }"
   >
     <comment v-if="comment" :commentObj="commentObj" />
@@ -76,6 +80,12 @@ export default {
     asyncMessage: function () {
       return this.ret?.asyncMessage();
     },
+    translateX: function () {
+      const destination = !this.rightToLeft
+        ? this.anchorSource
+        : this.anchorTarget;
+      return this.anchorOrigin.calculateEdgeOffset(destination);
+    },
     left: function () {
       return this.rightToLeft
         ? this.distance(this.target, this.origin)