Skip to content

Commit

Permalink
Use Anchor in Creation.vue
Browse files Browse the repository at this point in the history
  • Loading branch information
@MrCoder
MrCoder committed Nov 21, 2024
1 parent d608053 commit 27ab9e7
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 91 deletions.
86 changes: 85 additions & 1 deletion src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/ArrowMixin.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { defineComponent } from "vue";
import sequenceParser from "@/generated-parser/sequenceParser";
import { _STARTER_ } from "@/parser/OrderedParticipants";

import { LIFELINE_WIDTH } from "@/positioning/Constants";
import Anchor from "@/positioning/Anchor";
// Define interfaces for your properties
interface BorderWidthStyle {
borderLeftWidth: string;
Expand Down Expand Up @@ -44,6 +45,89 @@ export default defineComponent({
},

computed: {
anchorOrigin: function (): Anchor {
return new Anchor(this.centerOf(this.origin), this.originOffset);
},
anchorSource: function (): Anchor {
return new Anchor(this.centerOf(this.source), this.sourceOffset);
},
anchorTarget: function (): Anchor {
return new Anchor(this.centerOf(this.target), this.targetOffset);
},

interactionWidth: function (): number {
return (
Math.abs(this.anchorSource.calculateEdgeOffset(this.anchorTarget)) -
LIFELINE_WIDTH
);
},
/**
* The offset is to make sure the sub-occurrence bar is not fully layered
* on top of the main occurrence bar. To achieve this, whenever a participant
* is re-entered, the offset increases by 7px.
*
* There are two ways to re-enter a participant:
*
* 1. A.m { s }
* 2. B A A.m { B->A.m }
*
* #1 is the most common case.
*
* If each Interaction keeps a stack of participants, we would be able to know
* the depth of the stack on one given participant. This would allow us to
* calculate the offset.
* For example,
*
* stack offset S offset A offset B
* A.m [A] 0 0 NA
* A->B.m [B] NA NA 7
* A.m { s } [A A] 0 7 NA
* A.m { s { s } } [A A A] 0 14 NA
* A.m { s { B.m } } [A A B] 0 14 7
* A.m { B->A.m } [A A] 0 14 NA
* A.m { B.m { A.m } } [A B A] 0 14 7
* B A A.m { B->A.m } [A A] 0 14 NA
*
* If offset is NA, it is effectively 0.
*
* There are two ways to implement this:
* 1. Keep a stack of participants in the Interaction component.
* 2. Calculate the stack depth from the context.
*
* The latter is more testable.
*
* The API should be like this:
* const n: number = this.context?.stackDepth(this.source);
*/
originOffset: function (): any {
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 (): any {
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 (): any {
const length = this.context.getAncestors((ctx) => {
if (this.isSync(ctx)) {
return ctx.Owner() === this.target;
}
return false;
}).length;
return length * 7;
},
borderWidth(this: ComponentProps): BorderWidthStyle {
const border: BorderWidthStyle = {
borderLeftWidth: "7px",
Expand Down
14 changes: 1 addition & 13 deletions src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Creation/Creation.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ export default {
props: ["context", "comment", "commentObj", "number"],
mixins: [ArrowMixin, DirectionMixin],
computed: {
...mapGetters(["cursor", "onElementClick", "distance2"]),
...mapGetters(["cursor", "onElementClick", "distance2", "centerOf"]),
...mapState(["numbering"]),
source() {
return this.origin;
Expand Down Expand Up @@ -118,18 +118,6 @@ export default {
return length * 7;
},
interactionWidth() {
// Explanation of the formula:
// px: 0 1 2 3 4 5 6 7 8
// L a b
// gap between a and b is [(b - a) - 1]
return (
Math.abs(this.distance2(this.origin, this.target)) -
this.sourceOffset -
this.targetOffset -
LIFELINE_WIDTH
);
},
signature() {
return this.creation.SignatureText(false);
},
Expand Down
78 changes: 1 addition & 77 deletions ...mponents/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/Interaction.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,6 @@ import ArrowMixin from "@/components/DiagramFrame/SeqDiagram/MessageLayer/Block/
import { _STARTER_ } from "@/parser/OrderedParticipants";
import { DirectionMixin } from "@/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/DirectionMixin";
import Anchor from "@/positioning/Anchor";
import { LIFELINE_WIDTH } from "@/positioning/Constants";
export default {
Expand Down Expand Up @@ -107,15 +106,6 @@ export default {
signature: function () {
return this.message?.SignatureText();
},
anchorOrigin: function () {
return new Anchor(this.centerOf(this.origin), this.originOffset);
},
anchorSource: function () {
return new Anchor(this.centerOf(this.source), this.sourceOffset);
},
anchorTarget: function () {
return new Anchor(this.centerOf(this.target), this.targetOffset);
},
translateX: function () {
const destination = !this.rightToLeft
? this.anchorSource
Expand All @@ -125,73 +115,7 @@ export default {
isCurrent: function () {
return this.message?.isCurrent(this.cursor);
},
/**
* The offset is to make sure the sub-occurrence bar is not fully layered
* on top of the main occurrence bar. To achieve this, whenever a participant
* is re-entered, the offset increases by 7px.
*
* There are two ways to re-enter a participant:
*
* 1. A.m { s }
* 2. B A A.m { B->A.m }
*
* #1 is the most common case.
*
* If each Interaction keeps a stack of participants, we would be able to know
* the depth of the stack on one given participant. This would allow us to
* calculate the offset.
* For example,
*
* stack offset S offset A offset B
* A.m [A] 0 0 NA
* A->B.m [B] NA NA 7
* A.m { s } [A A] 0 7 NA
* A.m { s { s } } [A A A] 0 14 NA
* A.m { s { B.m } } [A A B] 0 14 7
* A.m { B->A.m } [A A] 0 14 NA
* A.m { B.m { A.m } } [A B A] 0 14 7
* B A A.m { B->A.m } [A A] 0 14 NA
*
* If offset is NA, it is effectively 0.
*
* There are two ways to implement this:
* 1. Keep a stack of participants in the Interaction component.
* 2. Calculate the stack depth from the context.
*
* The latter is more testable.
*
* The API should be like this:
* const n: number = this.context?.stackDepth(this.source);
*/
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;
return length * 7;
},
interactionWidth: function () {
return (
Math.abs(this.anchorSource.calculateEdgeOffset(this.anchorTarget)) -
Expand Down

0 comments on commit 27ab9e7

Please sign in to comment.