on a repetition of the step clicked, scroll to the step

ahmedhamidawan · Nov 5, 2024 · 7758ae9 · 7758ae9
1 parent 105c633
commit 7758ae9
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/client/src/components/Workflow/Editor/WorkflowGraph.vue b/client/src/components/Workflow/Editor/WorkflowGraph.vue
@@ -92,7 +92,7 @@ import WorkflowEdges from "@/components/Workflow/Editor/WorkflowEdges.vue";
 import WorkflowMinimap from "@/components/Workflow/Editor/WorkflowMinimap.vue";
 import ZoomControl from "@/components/Workflow/Editor/ZoomControl.vue";
 
-const emit = defineEmits(["transform", "graph-offset", "onRemove", "scrollTo"]);
+const emit = defineEmits(["transform", "graph-offset", "onRemove", "scrollTo", "stepClicked"]);
 const props = defineProps({
     steps: { type: Object as PropType<{ [index: string]: Step }>, required: true },
     datatypesMapper: { type: DatatypesMapperModel, required: true },
@@ -176,6 +176,7 @@ function onDragConnector(position: TerminalPosition, draggingTerminal: OutputTer
     isDragging.value = true;
 }
 function onActivate(nodeId: number | null) {
+    emit("stepClicked", nodeId);
     if (activeNodeId.value !== nodeId) {
         stateStore.activeNodeId = nodeId;
     }

diff --git a/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue b/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
@@ -148,6 +148,13 @@ function scrollStepToView() {
     const stepCardHeader = stepCard.value?.querySelector(".card-header");
     stepCardHeader?.scrollIntoView({ behavior: "smooth", block: "start" });
 }
+
+/** On a repetition of the step clicked, scroll to the step */
+function stepClicked(nodeId: number | null) {
+    if (nodeId === activeNodeId.value) {
+        scrollStepToView();
+    }
+}
 </script>
 
 <template>
@@ -174,7 +181,8 @@ function scrollStepToView() {
                             :show-minimap="props.showMinimap"
                             :show-zoom-controls="props.showZoomControls"
                             is-invocation
-                            readonly />
+                            readonly
+                            @stepClicked="stepClicked" />
                     </BCard>
                 </div>
             </div>