improved linker components ordering

__init__.py

@@ -38,7 +38,7 @@
 NODE_DISPLAY_NAME_MAPPINGS: Dict[str, str] = {}
 APP_CONFIGS: List[AppConfig] = []
 APP_NAME: str = "Flow"
-APP_VERSION: str = "0.2.0"
+APP_VERSION: str = "0.2.1"
 PURPLE = "\033[38;5;129m"
 RESET = "\033[0m"
 FLOWMSG = f"{PURPLE}Flow{RESET}"

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "comfyui-disty-flow"
 description = "Flow is a custom node designed to provide a more user-friendly interface for ComfyUI by acting as an alternative user interface for running workflows. It is not a replacement for workflow creation.\nFlow is currently in the early stages of development, so expect bugs and ongoing feature enhancements. With your support and feedback, Flow will settle into a steady stream."
-version = "0.2.0"
+version = "0.2.1"
 license = {file = "LICENSE"}
 
 [project.urls]

web/linker/app.js

@@ -1,12 +1,11 @@
-
 import { initializeSaveOptions, updateWorkflowConfig } from './configHandler.js';
 import { initializeFileHandlers } from './fileHandler.js';
 import { displayNodes, displayNodeInfo } from './nodeHandler.js';
 import { initializeMultiComponentHandler } from './multiComponentHandler.js';
 
 const state = {
     nodeToCustomNodeMap: {},
-    assignedComponents: {},
+    assignedComponents: [],
     multiComponents: [],
     components: [],
     flowId: '',

web/linker/configHandler.js

@@ -1,14 +1,13 @@
 import { componentTypes } from '/core/js/common/scripts/componentTypes.js';
-import { getSortOrderForNodeType } from './componentHandler.js';
-
 function updateWorkflowConfig(state) {
     const workflowConfigElement = document.getElementById('workflowConfig');
     const saveOptionsElement = document.getElementById('saveOptions');
     if (!workflowConfigElement || !saveOptionsElement) return;
 
     const workflowConfig = buildWorkflowConfig(state);
     const isCompactFormat = isCompactFormatSelected();
-    const isLeanFormat = isLeanFormatSelected();     const indentation = isCompactFormat ? 0 : 2;
+    const isLeanFormat = isLeanFormatSelected();
+    const indentation = isCompactFormat ? 0 : 2;
     const fullConfigJSON = JSON.stringify(workflowConfig, null, indentation);
 
     workflowConfigElement.textContent = fullConfigJSON;
@@ -25,45 +24,42 @@ function buildWorkflowConfig(state) {
         url: state.flowUrl || "linker",
         description: flowDescriptionInput.value || "Flow linker"
     };
-        Object.keys(componentTypes).forEach(type => {
+    Object.keys(componentTypes).forEach(type => {
         const pluralType = `${type}s`;
         if (type !== 'multiComponent') {
             workflowConfig[pluralType] = [];
         }
     });
 
-        const sortedNodes = Object.entries(state.assignedComponents || {})
-        .sort((a, b) => {
-            const nodeTypeA = state.nodeToCustomNodeMap[a[0]]?.classType;
-            const nodeTypeB = state.nodeToCustomNodeMap[b[0]]?.classType;
-            return getSortOrderForNodeType(nodeTypeA) - getSortOrderForNodeType(nodeTypeB);
+    const multiComponentIndices = new Set();
+    state.multiComponents.forEach(multiComponent => {
+        multiComponent.components.forEach(({ index }) => {
+            multiComponentIndices.add(index);
         });
+    });
 
-        for (const [nodeId, components] of sortedNodes) {
-        components.forEach(component => {
-            if (component.inMultiComponent) return;
-
-            const { type, params } = component;
-            const fieldName = `${type}s`;
+    state.assignedComponents.forEach(({ nodeId, component }, index) => {
+        if (component.inMultiComponent) return;
 
-            if (!workflowConfig[fieldName]) return;
+        const { type, params } = component;
+        const fieldName = `${type}s`;
 
-            params.id = ensureUniqueComponentId(workflowConfig[fieldName], params.id);
-            const componentData = extractComponentData(component, type);
+        if (!workflowConfig[fieldName]) return;
 
-            if (type === 'dimensionSelector') {
-                componentData.nodePath = `${nodeId}.inputs`;
-            }
-            workflowConfig[fieldName].push(componentData);
+        params.id = ensureUniqueComponentId(workflowConfig[fieldName], params.id);
+        const componentData = extractComponentData(component, type);
 
-        });
-    }
+        if (type === 'dimensionSelector') {
+            componentData.nodePath = `${nodeId}.inputs`;
+        }
+        workflowConfig[fieldName].push(componentData);
+    });
 
-        if (state.multiComponents && state.multiComponents.length > 0) {
+    if (state.multiComponents && state.multiComponents.length > 0) {
         workflowConfig.multiComponents = state.multiComponents.map(multiComponent => {
             const componentGroups = {};
 
-            multiComponent.components.forEach(({ nodeId, component }) => {
+            multiComponent.components.forEach(({ component, index }) => {
                 const { type } = component;
                 const componentData = extractComponentData(component, type);
 
@@ -84,7 +80,8 @@ function buildWorkflowConfig(state) {
         });
     }
 
-        const isLeanFormat = isLeanFormatSelected();     if (isLeanFormat) {
+    const isLeanFormat = isLeanFormatSelected();     
+    if (isLeanFormat) {
         removeEmptyFields(workflowConfig, ['id', 'name', 'url', 'description']);
     }
 
@@ -308,7 +305,6 @@ async function previewFlow(workflowConfigElement, state) {
                 window.parent.postMessage({ type: 'loadFlow', flowUrl: "linker" }, '*');
 
             })            
-
             .catch(() => alert('Failed to save configuration. Please try again.'));
     } catch (error) {
         console.error('Error during preview:', error);