Scoped Store Refactor and Store Composition Refactor

client/src/components/Workflow/Editor/Index.vue

@@ -492,7 +492,7 @@ export default {
                 label: null,
                 position: defaultPosition(this.graphOffset, this.transform),
             });
-            this.stateStore.setActiveNode(id);
+            this.stateStore.activeNodeId = id;
         },
         onInsertTool(tool_id, tool_name) {
             this._insertStep(tool_id, tool_name, "tool");
@@ -570,11 +570,11 @@ export default {
         },
         onAttributes() {
             this._ensureParametersSet();
-            this.stateStore.setActiveNode(null);
+            this.stateStore.activeNodeId = null;
             this.showInPanel = "attributes";
         },
         onWorkflowTextEditor() {
-            this.stateStore.setActiveNode(null);
+            this.stateStore.activeNodeId = null;
             this.showInPanel = "attributes";
         },
         onAnnotation(nodeId, newAnnotation) {
@@ -667,7 +667,7 @@ export default {
         },
         onLint() {
             this._ensureParametersSet();
-            this.stateStore.setActiveNode(null);
+            this.stateStore.activeNodeId = null;
             this.showInPanel = "lint";
         },
         onUpgrade() {
@@ -752,7 +752,7 @@ export default {
                         outputs: response.outputs,
                         config_form: response.config_form,
                     });
-                    this.stateStore.setActiveNode(stepData.id);
+                    this.stateStore.activeNodeId = stepData.id;
                 }
             );
         },

client/src/components/Workflow/Editor/WorkflowGraph.vue

@@ -153,7 +153,7 @@ function onZoom(zoomLevel: number, panTo: XYPosition | null = null) {
     if (panTo) {
         panBy({ x: panTo.x - transform.value.x, y: panTo.y - transform.value.y });
     }
-    stateStore.setScale(zoomLevel);
+    stateStore.scale = zoomLevel;
 }
 function onStopDragging() {
     stateStore.draggingPosition = null;
@@ -167,16 +167,16 @@ function onDragConnector(position: TerminalPosition, draggingTerminal: OutputTer
 }
 function onActivate(nodeId: number | null) {
     if (activeNodeId.value !== nodeId) {
-        stateStore.setActiveNode(nodeId);
+        stateStore.activeNodeId = nodeId;
     }
 }
 function onDeactivate() {
-    stateStore.setActiveNode(null);
+    stateStore.activeNodeId = null;
 }
 
 watch(
     () => transform.value.k,
-    () => stateStore.setScale(transform.value.k)
+    () => (stateStore.scale = transform.value.k)
 );
 
 watch(transform, () => emit("transform", transform.value));

client/src/components/Workflow/Published/WorkflowPublished.vue

@@ -89,7 +89,7 @@ const { stateStore } = provideScopedWorkflowStores(props.id);
 
 watch(
     () => props.zoom,
-    () => stateStore.setScale(props.zoom),
+    () => (stateStore.scale = props.zoom),
     { immediate: true }
 );
 

client/src/stores/scopedStore.ts

@@ -0,0 +1,11 @@
+import { defineStore } from "pinia";
+
+import { useScopePointerStore } from "./scopePointerStore";
+
+export function defineScopedStore<ID extends string, S>(id: ID, setup: (scopeId: string) => S) {
+    return (scopeId: string) => {
+        const { scope } = useScopePointerStore();
+
+        return defineStore<`${ID}-${typeof scopeId}`, S>(`${id}-${scope(scopeId)}`, () => setup(scopeId))();
+    };
+}

client/src/stores/workflowConnectionStore.ts

@@ -1,10 +1,9 @@
-import { defineStore } from "pinia";
-import Vue from "vue";
+import { computed, del, ref, set } from "vue";
 
 import { useWorkflowStepStore } from "@/stores/workflowStepStore";
 import { pushOrSet } from "@/utils/pushOrSet";
 
-import { useScopePointerStore } from "./scopePointerStore";
+import { defineScopedStore } from "./scopedStore";
 
 interface InvalidConnections {
     [index: ConnectionId]: string | undefined;
@@ -44,87 +43,6 @@ interface TerminalToOutputTerminals {
     [index: string]: OutputTerminal[];
 }
 
-export const useConnectionStore = (workflowId: string) => {
-    const { scope } = useScopePointerStore();
-
-    return defineStore(`workflowConnectionStore${scope(workflowId)}`, {
-        state: (): State => ({
-            connections: [] as Array<Readonly<Connection>>,
-            invalidConnections: {} as InvalidConnections,
-            inputTerminalToOutputTerminals: {} as TerminalToOutputTerminals,
-            terminalToConnection: {} as { [index: string]: Connection[] },
-            stepToConnections: {} as { [index: number]: Connection[] },
-        }),
-        getters: {
-            getOutputTerminalsForInputTerminal(state: State) {
-                return (terminalId: string): OutputTerminal[] => {
-                    return state.inputTerminalToOutputTerminals[terminalId] || [];
-                };
-            },
-            getConnectionsForTerminal(state: State) {
-                return (terminalId: string): Connection[] => {
-                    return state.terminalToConnection[terminalId] || [];
-                };
-            },
-            getConnectionsForStep(state: State) {
-                return (stepId: number): Connection[] => state.stepToConnections[stepId] || [];
-            },
-        },
-        actions: {
-            addConnection(this, _connection: Connection) {
-                const connection = Object.freeze(_connection);
-                this.connections.push(connection);
-                const stepStore = useWorkflowStepStore(workflowId);
-                stepStore.addConnection(connection);
-                this.terminalToConnection = updateTerminalToConnection(this.connections);
-                this.inputTerminalToOutputTerminals = updateTerminalToTerminal(this.connections);
-                this.stepToConnections = updateStepToConnections(this.connections);
-            },
-            markInvalidConnection(this: State, connectionId: string, reason: string) {
-                Vue.set(this.invalidConnections, connectionId, reason);
-            },
-            dropFromInvalidConnections(this: State, connectionId: string) {
-                Vue.delete(this.invalidConnections, connectionId);
-            },
-            removeConnection(this, terminal: InputTerminal | OutputTerminal | ConnectionId) {
-                const stepStore = useWorkflowStepStore(workflowId);
-                this.connections = this.connections.filter((connection) => {
-                    const id = getConnectionId(connection);
-
-                    if (typeof terminal === "string") {
-                        if (id === terminal) {
-                            stepStore.removeConnection(connection);
-                            Vue.delete(this.invalidConnections, id);
-                            return false;
-                        } else {
-                            return true;
-                        }
-                    } else if (terminal.connectorType === "input") {
-                        if (connection.input.stepId == terminal.stepId && connection.input.name == terminal.name) {
-                            stepStore.removeConnection(connection);
-                            Vue.delete(this.invalidConnections, id);
-                            return false;
-                        } else {
-                            return true;
-                        }
-                    } else {
-                        if (connection.output.stepId == terminal.stepId && connection.output.name == terminal.name) {
-                            stepStore.removeConnection(connection);
-                            Vue.delete(this.invalidConnections, id);
-                            return false;
-                        } else {
-                            return true;
-                        }
-                    }
-                });
-                this.terminalToConnection = updateTerminalToConnection(this.connections);
-                this.inputTerminalToOutputTerminals = updateTerminalToTerminal(this.connections);
-                this.stepToConnections = updateStepToConnections(this.connections);
-            },
-        },
-    })();
-};
-
 function updateTerminalToTerminal(connections: Connection[]) {
     const inputTerminalToOutputTerminals: TerminalToOutputTerminals = {};
     connections.forEach((connection) => {
@@ -170,3 +88,103 @@ export function getTerminals(item: Connection): { input: InputTerminal; output:
 export function getConnectionId(item: Connection): ConnectionId {
     return `${item.input.stepId}-${item.input.name}-${item.output.stepId}-${item.output.name}`;
 }
+
+export const useConnectionStore = defineScopedStore("workflowConnectionStore", (workflowId) => {
+    const connections = ref<Readonly<Connection>[]>([]);
+    const invalidConnections = ref<InvalidConnections>({});
+    const inputTerminalToOutputTerminals = ref<TerminalToOutputTerminals>({});
+    const terminalToConnection = ref<{ [index: string]: Connection[] }>({});
+    const stepToConnections = ref<{ [index: number]: Connection[] }>({});
+
+    function $reset() {
+        connections.value = [];
+        invalidConnections.value = {};
+        inputTerminalToOutputTerminals.value = {};
+        terminalToConnection.value = {};
+        stepToConnections.value = {};
+    }
+
+    const getOutputTerminalsForInputTerminal = computed(
+        () => (terminalId: string) => inputTerminalToOutputTerminals.value[terminalId] || ([] as OutputTerminal[])
+    );
+
+    const getConnectionsForTerminal = computed(
+        () => (terminalId: string) => terminalToConnection.value[terminalId] || ([] as Connection[])
+    );
+
+    const getConnectionsForStep = computed(
+        () => (stepId: number) => stepToConnections.value[stepId] || ([] as Connection[])
+    );
+
+    const stepStore = useWorkflowStepStore(workflowId);
+
+    function addConnection(connection: Connection) {
+        Object.freeze(connection);
+        connections.value.push(connection);
+        stepStore.addConnection(connection);
+
+        terminalToConnection.value = updateTerminalToConnection(connections.value);
+        inputTerminalToOutputTerminals.value = updateTerminalToTerminal(connections.value);
+        stepToConnections.value = updateStepToConnections(connections.value);
+    }
+
+    function removeConnection(terminal: InputTerminal | OutputTerminal | ConnectionId) {
+        connections.value = connections.value.filter((connection) => {
+            const id = getConnectionId(connection);
+
+            if (typeof terminal === "string") {
+                if (id === terminal) {
+                    stepStore.removeConnection(connection);
+                    del(invalidConnections.value, id);
+                    return false;
+                } else {
+                    return true;
+                }
+            } else if (terminal.connectorType === "input") {
+                if (connection.input.stepId == terminal.stepId && connection.input.name == terminal.name) {
+                    stepStore.removeConnection(connection);
+                    del(invalidConnections.value, id);
+                    return false;
+                } else {
+                    return true;
+                }
+            } else {
+                if (connection.output.stepId == terminal.stepId && connection.output.name == terminal.name) {
+                    stepStore.removeConnection(connection);
+                    del(invalidConnections.value, id);
+                    return false;
+                } else {
+                    return true;
+                }
+            }
+        });
+
+        terminalToConnection.value = updateTerminalToConnection(connections.value);
+        inputTerminalToOutputTerminals.value = updateTerminalToTerminal(connections.value);
+        stepToConnections.value = updateStepToConnections(connections.value);
+    }
+
+    function markInvalidConnection(connectionId: string, reason: string) {
+        set(invalidConnections.value, connectionId, reason);
+    }
+
+    function dropFromInvalidConnections(connectionId: string) {
+        del(invalidConnections.value, connectionId);
+    }
+
+    return {
+        connections,
+        invalidConnections,
+        inputTerminalToOutputTerminals,
+        terminalToConnection,
+        stepToConnections,
+        $reset,
+        getOutputTerminalsForInputTerminal,
+        getConnectionsForTerminal,
+        getConnectionsForStep,
+        addConnection,
+        removeConnection,
+        markInvalidConnection,
+        dropFromInvalidConnections,
+    };
+});