diff --git a/src/renderer/core/canvas/canvasStore.ts b/src/renderer/core/canvas/canvasStore.ts index bfc54c1db..edc27ffac 100644 --- a/src/renderer/core/canvas/canvasStore.ts +++ b/src/renderer/core/canvas/canvasStore.ts @@ -3,6 +3,8 @@ import { defineStore } from 'pinia' import { computed, markRaw, ref, shallowRef } from 'vue' import type { Raw } from 'vue' +import { useAppModeStore } from '@/stores/appModeStore' + import type { Point, Positionable } from '@/lib/litegraph/src/interfaces' import type { LGraph, @@ -40,7 +42,12 @@ export const useCanvasStore = defineStore('canvas', () => { // Reactive scale percentage that syncs with app.canvas.ds.scale const appScalePercentage = ref(100) - const linearMode = ref(false) + const linearMode = computed({ + get: () => useAppModeStore().isAppMode, + set: (val: boolean) => { + useAppModeStore().setMode(val ? 'app' : 'graph') + } + }) // Set up scale synchronization when canvas is available let originalOnChanged: ((scale: number, offset: Point) => void) | undefined = diff --git a/src/stores/appModeStore.ts b/src/stores/appModeStore.ts new file mode 100644 index 000000000..364c9eae0 --- /dev/null +++ b/src/stores/appModeStore.ts @@ -0,0 +1,40 @@ +import { defineStore } from 'pinia' +import { readonly, computed, ref } from 'vue' + +type AppMode = 'graph' | 'app' | 'builder:select' | 'builder:arrange' + +export const useAppModeStore = defineStore('appMode', () => { + const mode = ref('graph') + const builderSaving = ref(false) + const hasOutputs = ref(true) + + const isBuilderMode = computed( + () => mode.value === 'builder:select' || mode.value === 'builder:arrange' + ) + const isAppMode = computed( + () => mode.value === 'app' || mode.value === 'builder:arrange' + ) + const isGraphMode = computed( + () => mode.value === 'graph' || mode.value === 'builder:select' + ) + const isBuilderSaving = computed( + () => builderSaving.value && isBuilderMode.value + ) + + return { + mode: readonly(mode), + isBuilderMode, + isAppMode, + isGraphMode, + isBuilderSaving, + hasOutputs, + setBuilderSaving: (newBuilderSaving: boolean) => { + if (!isBuilderMode.value) return + builderSaving.value = newBuilderSaving + }, + setMode: (newMode: AppMode) => { + if (newMode === mode.value) return + mode.value = newMode + } + } +})