Skip to content

Commit bfc53d5

Browse files
PhilBastianPhilBastian
committed
selection of messages and navigation to selection
1 parent 0905e39 commit bfc53d5

File tree

3 files changed

+93
-14
lines changed

3 files changed

+93
-14
lines changed

‎src/Frontend/src/components/messages2/SequenceDiagram/HandlersComponent.vue‎

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const Handler_Gap = 20;
1010
const Handler_Width = 14;
1111
1212
const store = useSequenceDiagramStore();
13-
const { handlers, endpointCentrePoints, highlightId } = storeToRefs(store);
13+
const { handlers, endpointCentrePoints, highlightId, selectedId } = storeToRefs(store);
1414
1515
const messageTypeRefs = ref<SVGTextElement[]>([]);
1616
@@ -27,6 +27,7 @@ const handlerItems = computed(() => {
2727
const fill = (() => {
2828
if (handler.id === "First") return "black";
2929
if (handler.state === HandlerState.Fail) return "var(--error)";
30+
if (handler.route?.name === selectedId.value) return "var(--highlight)";
3031
if (handler.route?.name === highlightId.value) return "var(--highlight-background)";
3132
return "var(--gray60)";
3233
})();
@@ -51,6 +52,8 @@ const handlerItems = computed(() => {
5152
5253
return {
5354
id: handler.id,
55+
messageId: { id: handler.selectedMessage?.message_id, uniqueId: handler.selectedMessage?.id },
56+
isError: handler.state === HandlerState.Fail,
5457
endpointName: handler.endpoint.name,
5558
incomingId: handler.route?.name,
5659
left,
@@ -63,6 +66,7 @@ const handlerItems = computed(() => {
6366
messageType: handler.name,
6467
messageTypeOffset,
6568
messageTypeHighlight: handler.route?.name === highlightId.value,
69+
messageTypeSelected: handler.route?.name === selectedId.value,
6670
setUIRef: (el: SVGElement) => (handler.uiRef = el),
6771
};
6872
});
@@ -81,18 +85,32 @@ function setMessageTypeRef(el: SVGTextElement, index: number) {
8185
<template>
8286
<g v-for="(handler, i) in handlerItems" :key="`${handler.id}###${handler.endpointName}`" :transform="`translate(${handler.left}, ${handler.y})`">
8387
<!--Handler Activation Box-->
84-
<g :ref="(el) => handler.setUIRef(el as SVGElement)">
85-
<rect :width="Handler_Width" :height="handler.height" :class="handler.incomingId && 'clickable'" :fill="handler.fill" @mouseover="() => store.setHighlightId(handler.incomingId)" @mouseleave="() => store.setHighlightId()" />
88+
<g :ref="(el) => handler.setUIRef(el as SVGElement)" class="activation-box">
89+
<rect
90+
:width="Handler_Width"
91+
:height="handler.height"
92+
:class="{
93+
clickable: handler.incomingId && !handler.messageTypeSelected,
94+
}"
95+
:fill="handler.fill"
96+
@mouseover="() => store.setHighlightId(handler.incomingId)"
97+
@mouseleave="() => store.setHighlightId()"
98+
@click="handler.incomingId && !handler.messageTypeSelected && store.navigateTo(handler.messageId.uniqueId, handler.messageId.id, handler.isError)"
99+
/>
86100
<path v-if="handler.icon" :d="handler.icon" fill="white" :transform="`translate(${Handler_Width / 2 - handler.iconSize / 2}, ${handler.height / 2 - handler.iconSize / 2})`" />
87101
</g>
88102
<!--Message Type and Icon-->
89103
<g
90104
v-if="handler.messageType"
91105
:transform="`translate(${handler.messageTypeOffset}, 4)`"
92-
class="clickable"
93-
:fill="handler.messageTypeHighlight ? 'var(--highlight)' : 'var(--gray40)'"
106+
:class="{
107+
clickable: !handler.messageTypeSelected,
108+
'message-type': true,
109+
highlight: handler.messageTypeHighlight || handler.messageTypeSelected,
110+
}"
94111
@mouseover="() => store.setHighlightId(handler.incomingId)"
95112
@mouseleave="() => store.setHighlightId()"
113+
@click="handler.incomingId && !handler.messageTypeSelected && store.navigateTo(handler.messageId.uniqueId, handler.messageId.id, handler.isError)"
96114
>
97115
<path d="M9,3L9,3 9,0 0,0 0,3 4,3 4,6 0,6 0,9 4,9 4,12 0,12 0,15 9,15 9,12 5,12 5,9 9,9 9,6 5,6 5,3z" />
98116
<text x="14" y="10" alignment-baseline="middle" :ref="(el) => setMessageTypeRef(el as SVGTextElement, i)">{{ handler.messageType }}</text>
@@ -104,4 +122,16 @@ function setMessageTypeRef(el: SVGTextElement, index: number) {
104122
.clickable {
105123
cursor: pointer;
106124
}
125+
126+
.activation-box:focus {
127+
outline: none;
128+
}
129+
130+
.message-type {
131+
fill: var(--gray40);
132+
}
133+
134+
.message-type.highlight {
135+
fill: var(--highlight);
136+
}
107137
</style>

‎src/Frontend/src/components/messages2/SequenceDiagram/RoutesComponent.vue‎

Lines changed: 40 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,13 @@ import { Direction, RoutedMessageType } from "@/resources/SequenceDiagram/Routed
33
import { computed, ref } from "vue";
44
import { useSequenceDiagramStore } from "@/stores/SequenceDiagramStore";
55
import { storeToRefs } from "pinia";
6+
import { HandlerState } from "@/resources/SequenceDiagram/Handler";
67
78
const Arrow_Head_Width = 10;
89
const Message_Type_Margin = 4;
910
1011
const store = useSequenceDiagramStore();
11-
const { routes, handlerLocations, highlightId } = storeToRefs(store);
12+
const { selectedId, routes, handlerLocations, highlightId } = storeToRefs(store);
1213
1314
const messageTypeRefs = ref<SVGTextElement[]>([]);
1415
@@ -41,6 +42,9 @@ const arrows = computed(() =>
4142
4243
return {
4344
id: route.name,
45+
selected: route.name === selectedId.value,
46+
messageId: { uniqueId: route.fromRoutedMessage.selectedMessage.id, id: route.fromRoutedMessage.selectedMessage.message_id },
47+
isHandlerError: route.processingHandler?.state === HandlerState.Fail,
4448
fromX,
4549
y,
4650
direction,
@@ -73,25 +77,30 @@ function setMessageTypeRef(el: SVGTextElement, index: number) {
7377
<path v-if="arrow.direction === Direction.Left" :d="`M${arrow.toHandlerCentre + 1} ${arrow.y} l10,-7.5 0,15z`" fill="black" />
7478
</g>
7579
<!--Highlight Arrow-->
76-
<g v-if="arrow.highlight" :transform="`translate(${arrow.toHandlerCentre},${arrow.y})`" stroke="var(--highlight)" fill="var(--highlight)">
80+
<g v-if="arrow.highlight || arrow.selected" :transform="`translate(${arrow.toHandlerCentre},${arrow.y})`" stroke="var(--highlight)" fill="var(--highlight)">
7781
<path :d="`M0 0 v${arrow.height - 6}`" stroke-width="2" />
7882
<path :d="`M0 ${arrow.height} l-3,-6 6,0z`" />
7983
</g>
8084
<!--Message Type and Icon-->
8185
<g
82-
class="clickable message-type"
86+
:class="{
87+
clickable: !arrow.selected,
88+
'message-type': true,
89+
highlight: arrow.highlight,
90+
selected: arrow.selected,
91+
}"
8392
:transform="`translate(${arrow.messageTypeOffset}, ${arrow.y - 7.5 - Message_Type_Margin})`"
84-
:fill="arrow.highlight ? 'var(--highlight)' : 'black'"
8593
@mouseover="() => store.setHighlightId(arrow.id)"
8694
@mouseleave="() => store.setHighlightId()"
95+
@click="!arrow.selected && store.navigateTo(arrow.messageId.uniqueId, arrow.messageId.id, arrow.isHandlerError)"
8796
:ref="(el) => arrow.setUIRef(el as SVGElement)"
8897
>
8998
<!--19 is width of MessageType icon, plus a gap-->
9099
<rect
91-
v-if="arrow.highlight && arrow.messageTypeOffset"
100+
v-if="(arrow.highlight || arrow.selected) && arrow.messageTypeOffset"
92101
:width="arrow.highlightTextWidth + 19 + Message_Type_Margin + Message_Type_Margin"
93102
:height="arrow.highlightTextHeight + Message_Type_Margin + Message_Type_Margin"
94-
fill="var(--highlight-background)"
103+
class="border"
95104
/>
96105
<svg :x="Message_Type_Margin" :y="Message_Type_Margin" width="15" height="15" viewBox="0 0 32 32">
97106
<path
@@ -116,7 +125,32 @@ function setMessageTypeRef(el: SVGTextElement, index: number) {
116125
cursor: pointer;
117126
}
118127
128+
.message-type {
129+
fill: black;
130+
outline: none;
131+
}
132+
133+
.message-type.selected {
134+
fill: white;
135+
}
136+
137+
.message-type .border {
138+
fill: var(--highlight-background);
139+
}
140+
141+
.message-type.selected .border {
142+
fill: var(--highlight);
143+
}
144+
145+
.message-type:not(.selected).highlight {
146+
fill: var(--highlight);
147+
}
148+
119149
.message-type text::selection {
120150
fill: white;
121151
}
152+
153+
.message-type.selected text::selection {
154+
background-color: black;
155+
}
122156
</style>

‎src/Frontend/src/stores/SequenceDiagramStore.ts‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import { acceptHMRUpdate, defineStore } from "pinia";
2-
import { ref, watch } from "vue";
3-
import { ModelCreator } from "@/resources/SequenceDiagram/SequenceModel";
1+
import { acceptHMRUpdate, defineStore, storeToRefs } from "pinia";
2+
import { computed, ref, watch } from "vue";
3+
import { friendlyTypeName, ModelCreator } from "@/resources/SequenceDiagram/SequenceModel";
44
import { Endpoint } from "@/resources/SequenceDiagram/Endpoint";
55
import { Handler } from "@/resources/SequenceDiagram/Handler";
66
import { MessageProcessingRoute } from "@/resources/SequenceDiagram/RoutedMessage";
77
import { useMessageStore } from "./MessageStore";
8+
import { useRouter } from "vue-router";
9+
import routeLinks from "@/router/routeLinks";
810

911
export interface EndpointCentrePoint {
1012
name: string;
@@ -25,6 +27,8 @@ export const Endpoint_Width = 260;
2527

2628
export const useSequenceDiagramStore = defineStore("SequenceDiagramStore", () => {
2729
const messageStore = useMessageStore();
30+
const { state } = storeToRefs(messageStore);
31+
const router = useRouter();
2832

2933
const startX = ref(Endpoint_Width / 2);
3034
const endpoints = ref<Endpoint[]>([]);
@@ -36,6 +40,8 @@ export const useSequenceDiagramStore = defineStore("SequenceDiagramStore", () =>
3640
const handlerLocations = ref<HandlerLocation[]>([]);
3741
const highlightId = ref<string>();
3842

43+
const selectedId = computed(() => `${friendlyTypeName(state.value.data.message_type ?? "")}(${state.value.data.id})`);
44+
3945
watch(
4046
() => messageStore.conversationData.data,
4147
(conversationData) => {
@@ -80,6 +86,13 @@ export const useSequenceDiagramStore = defineStore("SequenceDiagramStore", () =>
8086
if (messageStore.state.data.conversation_id) messageStore.loadConversation(messageStore.state.data.conversation_id);
8187
}
8288

89+
function navigateTo(messageUniqueId: string | undefined, messageId: string | undefined, isError: boolean) {
90+
if (messageUniqueId == null) return;
91+
if (!isError && messageId == null) return;
92+
93+
router.push({ path: isError ? routeLinks.messages.failedMessage.link(messageUniqueId) : routeLinks.messages.successMessage.link(messageId!, messageUniqueId) });
94+
}
95+
8396
return {
8497
startX,
8598
endpoints,
@@ -90,13 +103,15 @@ export const useSequenceDiagramStore = defineStore("SequenceDiagramStore", () =>
90103
maxHeight,
91104
handlerLocations,
92105
highlightId,
106+
selectedId,
93107
setStartX,
94108
setMaxWidth,
95109
setMaxHeight,
96110
setEndpointCentrePoints,
97111
setHandlerLocations,
98112
setHighlightId,
99113
refreshConversation,
114+
navigateTo,
100115
};
101116
});
102117

0 commit comments

Comments
 (0)