Add App I/O selection system (#8965)

Adds a system for selecting the inputs and outputs which should be
displayed when inside linear mode. Functions only in litegraph
currently. Vue support will require a separate, larger PR.
Inputs and outputs can be re-ordered by dragging and dropping on the
side panel.

![builder_00001](https://github.com/user-attachments/assets/6345adbd-519e-455d-b71e-0020aa03c6b7)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8965-Add-App-I-O-selection-system-30b6d73d365081569b36c1682a1fdbc5)
by [Unito](https://www.unito.io)

src/stores/appModeStore.ts

@@ -1,13 +1,26 @@
 import { defineStore } from 'pinia'
-import { readonly, computed, ref } from 'vue'
+import { whenever } from '@vueuse/core'
+import { reactive, readonly, computed, ref, watch } from 'vue'
+
+import { t } from '@/i18n'
+import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useDialogService } from '@/services/dialogService'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { app } from '@/scripts/app'
 
 export type AppMode = 'graph' | 'app' | 'builder:select' | 'builder:arrange'
 
 export const useAppModeStore = defineStore('appMode', () => {
+  const { getCanvas } = useCanvasStore()
+  const workflowStore = useWorkflowStore()
+
+  const selectedInputs = reactive<[NodeId, string][]>([])
+  const selectedOutputs = reactive<NodeId[]>([])
   const mode = ref<AppMode>('graph')
   const builderSaving = ref(false)
-  const hasOutputs = ref(true)
-  const enableAppBuilder = ref(false)
+  const hasOutputs = computed(() => !!selectedOutputs.length)
+  const enableAppBuilder = ref(true)
 
   const isBuilderMode = computed(
     () => mode.value === 'builder:select' || mode.value === 'builder:arrange'
@@ -22,14 +35,64 @@ export const useAppModeStore = defineStore('appMode', () => {
     () => builderSaving.value && isBuilderMode.value
   )
 
+  function resetSelectedToWorkflow() {
+    const { activeWorkflow } = workflowStore
+    if (!activeWorkflow) return
+
+    const { activeState } = activeWorkflow.changeTracker
+    selectedInputs.splice(
+      0,
+      selectedInputs.length,
+      ...(activeState.extra?.linearData?.inputs ?? [])
+    )
+    selectedOutputs.splice(
+      0,
+      selectedOutputs.length,
+      ...(activeState.extra?.linearData?.outputs ?? [])
+    )
+  }
+  function saveSelectedToWorkflow() {
+    app.rootGraph.extra ??= {}
+    app.rootGraph.extra.linearData = {
+      inputs: [...selectedInputs],
+      outputs: [...selectedOutputs]
+    }
+  }
+  whenever(() => workflowStore.activeWorkflow, resetSelectedToWorkflow, {
+    immediate: true
+  })
+
+  watch(
+    () => mode.value === 'builder:select',
+    (inSelect) => (getCanvas().read_only = inSelect)
+  )
+
+  async function exitBuilder() {
+    if (
+      !(await useDialogService().confirm({
+        title: t('linearMode.builder.exitConfirmTitle'),
+        message: t('linearMode.builder.exitConfirmMessage')
+      }))
+    )
+      return
+
+    resetSelectedToWorkflow()
+    mode.value = 'graph'
+  }
+
   return {
     mode: readonly(mode),
     enableAppBuilder: readonly(enableAppBuilder),
+    exitBuilder,
     isBuilderMode,
     isAppMode,
     isGraphMode,
     isBuilderSaving,
     hasOutputs,
+    resetSelectedToWorkflow,
+    saveSelectedToWorkflow,
+    selectedInputs,
+    selectedOutputs,
     setBuilderSaving: (newBuilderSaving: boolean) => {
       if (!isBuilderMode.value) return
       builderSaving.value = newBuilderSaving