fix loading of relations

FriendsOfTYPO3 · Jul 2, 2024 · d867823 · d867823
1 parent df6d6ac
commit d867823
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 238 deletions.
diff --git a/Build/Sources/App.js b/Build/Sources/App.js
@@ -239,8 +239,7 @@ function App() {
         // Instead the modules could be handed into the nodes but needs to be converted to the correct format. This could be a lot of work.
         const working = JSON.parse(extension.working);
 
-        console.log("working inside handleOpenExtension:");
-        console.log(working);
+        console.log("working inside handleOpenExtension: ", working);
 
         // Sets properties.
         setProperties(prev => ({...prev, ...working.properties}));
@@ -260,16 +259,17 @@ function App() {
         // let modules = convertModuleToNode(working.modules);
         let modules = convertModulesToNodes(working.modules);
         // Check if nodes or edges are available, and update them.
-        let edges = convertRelationsToReactFlowRelations(working.wires);
+        let edges = convertRelationsToReactFlowRelations(working.wires, modules);
 
-        console.log("41:" + JSON.stringify(working.modules, null, 2));
+        // console.log("41:" + JSON.stringify(working.modules, null, 2));
         console.log("42:" + JSON.stringify(working.edges, null, 2));
 
         setNodes(modules ? modules: []);
-        setEdges(working.edges ? working.edges : []);
+        setEdges(edges ? edges : []);
 
         console.log("modulesLength: " + (modules ? modules.length : 0))
-        console.log("edgesLength: " + (working.edges ? working.edges.length : 0))
+        console.log("working edgesLength: " + (working.edges ? working.edges.length : 0))
+        console.log("edgesLength: " + (edges ? edges.length : 0))
         // Set the custom model node index depending on the amount of nodes.
         setCustomModelNodeIndex(modules ? modules.length : 0);
     }

diff --git a/Build/Sources/components/ActionButtonsComponent.jsx b/Build/Sources/components/ActionButtonsComponent.jsx
@@ -298,8 +298,8 @@ export const ActionButtonsComponent = (props) => {
         // error = null, if no error occurs
         // success = true, when the request was successful
         // result with the array of extensions
-        console.log("available extensions");
-        console.log(extensions);
+        // console.log("available extensions");
+        // console.log(extensions);
 
         if(extensions.error !== null && extensions.success === false) {
             console.log("fetching failed");

diff --git a/Build/Sources/components/ReactFlow/CustomModelNode.jsx b/Build/Sources/components/ReactFlow/CustomModelNode.jsx
@@ -778,7 +778,7 @@ export const CustomModelNode = (props) => {
                     props.data.relations.map((relation, index) => {
                         return (
                             <div className="relation" key={relation.uid}>
-{/*                                <pre>
+                                {/*                                <pre>
                                     {JSON.stringify(index, null, 2)}
                                 </pre>
                                 <h4>relation</h4>

diff --git a/Build/Sources/components/jsonstring-11.json b/Build/Sources/components/jsonstring-11.json
diff --git a/Build/Sources/components/jsonstring-112.json b/Build/Sources/components/jsonstring-112.json
diff --git a/Build/Sources/components/jsonstring-v12.json b/Build/Sources/components/jsonstring-v12.json
diff --git a/Build/Sources/components/jsonstring-v122.json b/Build/Sources/components/jsonstring-v122.json
diff --git a/Build/Sources/components/listWirings.json b/Build/Sources/components/listWirings.json
diff --git a/Build/Sources/helper/converter/convertRelationsToReactFlowRelations.js b/Build/Sources/helper/converter/convertRelationsToReactFlowRelations.js
@@ -1,31 +1,30 @@
-    // from
-    // "wires": [
-    //     {
-    //         "src": {
-    //             "moduleId": 0, ➡️ array Index von Modul innerhalb von modules
-    //             "terminal": "relationWire_0", ➡️ irrelevant
-    //             "uid": "reactflow__edge-dndnode_0rel-dndnode_0-364bc27b-ad04-42e3-a548-792a8e54efcf-dndnode_1cmn-dndnode_1"
-    //         },
-    //         "tgt": {
-    //             "moduleId": 1, ➡️ array Index von Modul innerhalb von modules
-    //             "terminal": "SOURCES", ➡️ irrelevant
-    //             "uid": "dndnode_0"
-    //         }
-    //     }
-    // ]
+// from
+// "wires": [
+//     {
+//         "src": {
+//             "moduleId": 0, ➡️ array Index von Modul innerhalb von modules
+//             "terminal": "relationWire_0", ➡️ irrelevant
+//             "uid": "reactflow__edge-dndnode_0rel-dndnode_0-364bc27b-ad04-42e3-a548-792a8e54efcf-dndnode_1cmn-dndnode_1" => edges.id
+//         },
+//         "tgt": {
+//             "moduleId": 1, ➡️ array Index von Modul innerhalb von modules
+//             "terminal": "SOURCES", ➡️ irrelevant
+//             "uid": "dndnode_0"
+//         }
+//     }
+// ]
 
-    // to
-    // "edges": [
-    // {
-    //     "source": "dndnode_0",
-    //     "sourceHandle": "rel-dndnode_0-364bc27b-ad04-42e3-a548-792a8e54efcf",
-    //     "target": "dndnode_1",
-    //     "targetHandle": "cmn-dndnode_1",
-    //     "id": "reactflow__edge-dndnode_0rel-dndnode_0-364bc27b-ad04-42e3-a548-792a8e54efcf-dndnode_1cmn-dndnode_1"
-    // }
-function convertRelationsToReactFlowRelations(wires) {
-
-    console.log("relations", wires);
+// to
+// "edges": [
+// {
+//     "source": "dndnode_0",
+//     "sourceHandle": "rel-dndnode_0-364bc27b-ad04-42e3-a548-792a8e54efcf",
+//     "target": "dndnode_1",
+//     "targetHandle": "cmn-dndnode_1",
+//     "id": "reactflow__edge-dndnode_0rel-dndnode_0-364bc27b-ad04-42e3-a548-792a8e54efcf-dndnode_1cmn-dndnode_1"
+// }
+function convertRelationsToReactFlowRelations(wires, modules) {
+    console.log("relations wires: ", wires);
 
     const edges = wires.map(wire => {
         console.log("wire", wire);
@@ -35,15 +34,22 @@ function convertRelationsToReactFlowRelations(wires) {
             return null;
         }
 
-        // Extraktion der Source-Informationen
+        // Finden der entsprechenden Module anhand der moduleId
+        const sourceModule = modules[wire.src.moduleId];
+        const targetModule = modules[wire.tgt.moduleId];
+
+        if (!sourceModule || !targetModule) {
+            console.error('Fehler: Modul nicht gefunden für moduleId', wire.src.moduleId, wire.tgt.moduleId);
+            return null;
+        }
+
+        // Generierung der Source und Target IDs
+        const source = `dndnode_${wire.src.moduleId}`;
+        const target = `dndnode_${wire.tgt.moduleId}`;
+
+        // Extraktion der Handle-Informationen
         const srcUidParts = wire.src.uid?.split("-");
-        const sourceMatch = srcUidParts[0].match(/dndnode_\d+/);
-        const source = sourceMatch ? sourceMatch[0] : null;
         const sourceHandle = srcUidParts.slice(1, 3).join('-');
-
-        // Extraktion der Target-Informationen
-        const targetMatch = wire.tgt.uid?.match(/dndnode_\d+/);
-        const target = targetMatch ? targetMatch[0] : null;
         const targetHandle = wire.tgt.terminal?.toLowerCase();
 
         // Generierung der Edge-Id aus der Quell-UID
@@ -65,7 +71,7 @@ function convertRelationsToReactFlowRelations(wires) {
         };
     });
 
-    console.log("edges from method", edges);
+    console.log("edges from method: ", edges);
     return edges.filter(edge => edge !== null);
 }
 

diff --git a/Resources/Public/JavaScript/main.js b/Resources/Public/JavaScript/main.js