From 86de9ec1f561d13d6c4aa4db334a881dca89d10f Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 12 Nov 2024 01:14:20 +0100
Subject: [PATCH] make auto layout a toolbar tool

---
 .../src/components/Workflow/Editor/Index.vue  | 10 +--------
 .../Workflow/Editor/Tools/ToolBar.vue         | 22 ++++++++++++++++---
 .../Workflow/Editor/modules/activities.ts     | 11 ----------
 client/src/composables/workflowStores.ts      |  1 +
 4 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index dac34fd2bf2f..06ca17618f89 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -201,7 +201,7 @@ import { LastQueue } from "@/utils/lastQueue";
 import { errorMessageAsString } from "@/utils/simple-error";
 
 import { Services } from "../services";
-import { AutoLayoutAction, InsertStepAction, useStepActions } from "./Actions/stepActions";
+import { InsertStepAction, useStepActions } from "./Actions/stepActions";
 import { CopyIntoWorkflowAction, SetValueActionHandler } from "./Actions/workflowActions";
 import { defaultPosition } from "./composables/useDefaultStepPosition";
 import { useSpecialWorkflowActivities, workflowEditorActivities } from "./modules/activities";
@@ -743,10 +743,6 @@ export default {
                 this.onUpgrade();
             }
 
-            if (activityId === "workflow-auto-layout") {
-                this.onLayout();
-            }
-
             if (activityId === "workflow-run") {
                 this.onRun();
             }
@@ -755,10 +751,6 @@ export default {
                 await this.saveOrCreate();
             }
         },
-        onLayout() {
-            const action = new AutoLayoutAction(this.id);
-            this.undoRedoStore.applyAction(action);
-        },
         onAnnotation(nodeId, newAnnotation) {
             this.stepActions.setAnnotation(this.steps[nodeId], newAnnotation);
         },
diff --git a/client/src/components/Workflow/Editor/Tools/ToolBar.vue b/client/src/components/Workflow/Editor/Tools/ToolBar.vue
index c902f381bccf..0f2c38d7b086 100644
--- a/client/src/components/Workflow/Editor/Tools/ToolBar.vue
+++ b/client/src/components/Workflow/Editor/Tools/ToolBar.vue
@@ -17,7 +17,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useMagicKeys, whenever } from "@vueuse/core";
 import { BButton, BButtonGroup, BFormInput } from "bootstrap-vue";
 //@ts-ignore deprecated package without types (vue 2, remove this comment on vue 3 migration)
-import { BoxSelect } from "lucide-vue";
+import { BoxSelect, Workflow } from "lucide-vue";
 import { storeToRefs } from "pinia";
 import { computed, toRefs, watch } from "vue";
 
@@ -27,6 +27,7 @@ import { useWorkflowStores } from "@/composables/workflowStores";
 import { type CommentTool } from "@/stores/workflowEditorToolbarStore";
 import { match } from "@/utils/utils";
 
+import { AutoLayoutAction } from "../Actions/stepActions";
 import { useSelectionOperations } from "./useSelectionOperations";
 import { useToolLogic } from "./useToolLogic";
 
@@ -46,7 +47,7 @@ library.add(
     faTrash
 );
 
-const { toolbarStore, undoRedoStore, commentStore } = useWorkflowStores();
+const { toolbarStore, undoRedoStore, commentStore, workflowId } = useWorkflowStores();
 const { snapActive, currentTool } = toRefs(toolbarStore);
 
 const { commentOptions } = toolbarStore;
@@ -128,7 +129,7 @@ function onRemoveAllFreehand() {
 
 useToolLogic();
 
-const { ctrl_1, ctrl_2, ctrl_3, ctrl_4, ctrl_5, ctrl_6, ctrl_7, ctrl_8 } = useMagicKeys();
+const { ctrl_1, ctrl_2, ctrl_3, ctrl_4, ctrl_5, ctrl_6, ctrl_7, ctrl_8, ctrl_9 } = useMagicKeys();
 
 whenever(ctrl_1!, () => (toolbarStore.currentTool = "pointer"));
 whenever(ctrl_2!, () => (toolbarStore.snapActive = !toolbarStore.snapActive));
@@ -138,6 +139,7 @@ whenever(ctrl_5!, () => (toolbarStore.currentTool = "frameComment"));
 whenever(ctrl_6!, () => (toolbarStore.currentTool = "freehandComment"));
 whenever(ctrl_7!, () => (toolbarStore.currentTool = "freehandEraser"));
 whenever(ctrl_8!, () => (toolbarStore.currentTool = "boxSelect"));
+whenever(ctrl_9!, () => autoLayout());
 
 const toggleVisibilityButtonTitle = computed(() => {
     if (toolbarVisible.value) {
@@ -148,6 +150,10 @@ const toggleVisibilityButtonTitle = computed(() => {
 });
 
 const { anySelected, selectedCountText, deleteSelection, deselectAll, duplicateSelection } = useSelectionOperations();
+
+function autoLayout() {
+    undoRedoStore.applyAction(new AutoLayoutAction(workflowId));
+}
 </script>
 
 <template>
@@ -242,6 +248,16 @@ const { anySelected, selectedCountText, deleteSelection, deselectAll, duplicateS
                     @click="onClickBoxSelect">
                     <BoxSelect />
                 </BButton>
+
+                <BButton
+                    v-b-tooltip.hover.noninteractive.right
+                    title="Auto Layout (Ctrl + 9)"
+                    data-tool="auto_layout"
+                    class="button"
+                    variant="outline-primary"
+                    @click="autoLayout">
+                    <Workflow />
+                </BButton>
             </template>
 
             <BButton
diff --git a/client/src/components/Workflow/Editor/modules/activities.ts b/client/src/components/Workflow/Editor/modules/activities.ts
index 10729d6aaa9e..eb5fd4efd804 100644
--- a/client/src/components/Workflow/Editor/modules/activities.ts
+++ b/client/src/components/Workflow/Editor/modules/activities.ts
@@ -1,6 +1,5 @@
 import { faSave as farSave } from "@fortawesome/free-regular-svg-icons";
 import {
-    faAlignLeft,
     faDownload,
     faEdit,
     faHistory,
@@ -96,16 +95,6 @@ export const workflowEditorActivities = [
         click: true,
         optional: true,
     },
-    {
-        title: "Auto Layout",
-        id: "workflow-auto-layout",
-        description: "Automatically align the nodes in this workflow.",
-        tooltip: "Automatically align nodes",
-        icon: faAlignLeft,
-        visible: true,
-        click: true,
-        optional: true,
-    },
     {
         title: "Upgrade",
         id: "workflow-upgrade",
diff --git a/client/src/composables/workflowStores.ts b/client/src/composables/workflowStores.ts
index 79338bacfffb..63704068e3c9 100644
--- a/client/src/composables/workflowStores.ts
+++ b/client/src/composables/workflowStores.ts
@@ -76,6 +76,7 @@ export function useWorkflowStores(workflowId?: Ref<string> | string) {
     const undoRedoStore = useUndoRedoStore(id);
 
     return {
+        workflowId: id,
         connectionStore,
         stateStore,
         stepStore,