bugfixes

Build/Sources/App.js

@@ -1,4 +1,5 @@
 import './App.scss';
+import {useNodesState, useEdgesState} from 'reactflow';
 import {useEffect, useState} from "react";
 import {LeftContentComponent} from "./components/views/LeftContentComponent";
 import {RightContentComponent} from "./components/views/RightContentComponent";
@@ -10,8 +11,8 @@ import defaultPlugin from "./initialValues/plugin";
 
 function App() {
     // Nodes for ReactFlow
-    const [nodes, setNodes] = useState([]);
-    const [edges, setEdges] = useState([]);
+    const [nodes, setNodes, onNodesChange] = useNodesState([]);
+    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
     const [properties, setProperties] = useState(initialProperties);
     const [authors, setAuthors] = useState([]);
@@ -21,12 +22,23 @@ function App() {
     // Zustand für das Ein- und Ausklappen der linken Spalte
     const [isLeftColumnVisible, setLeftColumnVisible] = useState(true);
 
-    const onNodesChanged = (nodes) => {
-        // Dont use prev
-        console.log("onNodesChanged");
-        console.log(nodes);
-        setNodes(nodes);
-    }
+    const handleNodesChanged = (newNodes) => {
+        setNodes(newNodes);
+    };
+
+    const handleEdgesChanged = (newEdges) => {
+        setEdges(newEdges);
+    };
+
+    useEffect(() => {
+        // Hier könntest du zum Beispiel einen API-Aufruf machen, um den initialen Zustand zu setzen
+        setNodes([
+            // Deine initialen Nodes
+        ]);
+        setEdges([
+            // Deine initialen Edges
+        ]);
+    }, []);
 
     useEffect(() => {
         console.log("useEffect nodes");
@@ -40,9 +52,9 @@ function App() {
         }
     }, [isLeftColumnVisible]);
 
-    const onEdgesChanged = (edges) => {
+    const onEdgesChanged = (newEdges) => {
         // Dont use prev
-        setEdges(edges);
+        setEdges(newEdges);
     }
 
 
@@ -231,10 +243,12 @@ function App() {
                <div style={{left: isLeftColumnVisible ? '400px' : '0', width: isLeftColumnVisible ? 'calc(100vw - 400px)' : '100vw'}} id="right-column" className="no-padding full-height">
                     <div >
                         <RightContentComponent
-                            onNodesChanged={onNodesChanged}
-                            onEdgesChanged={onEdgesChanged}
                             nodes={nodes}
                             edges={edges}
+                            setNodes={setNodes}
+                            setEdges={setEdges}
+                            onNodesChange={onNodesChange}
+                            onEdgesChange={onEdgesChange}
                         />
                     </div>
                 </div>

Build/Sources/components/ReactFlow/ReactFlowComponent.jsx

@@ -1,62 +1,51 @@
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import ReactFlow, {
     MiniMap,
     ReactFlowProvider,
     Background,
     addEdge,
     Controls,
-    SelectionMode, applyNodeChanges, applyEdgeChanges
+    SelectionMode,
 } from 'reactflow';
 import 'reactflow/dist/style.css';
-import {CustomModelNode} from "./CustomModelNode";
-import Sidebar from "./Sidebar";
-import StrongConnectionLineComponent from "./Connections/StrongConnectionLineComponent";
+import { CustomModelNode } from './CustomModelNode';
+import Sidebar from './Sidebar';
+import StrongConnectionLineComponent from './Connections/StrongConnectionLineComponent';
+import nodeData from '../../initialValues/nodeData';
 
 let id = 0;
 const getId = () => `dndnode_${id++}`;
 
-export const ReactFlowComponent = (props) => {
-    const initialNodes = [];
-    const initialEdges = [];
 
+export const ReactFlowComponent = (props) => {
     const reactFlowWrapper = useRef(null);
     const nodeTypes = useMemo(() => ({ customModel: CustomModelNode }), []);
     const [reactFlowInstance, setReactFlowInstance] = useState(null);
 
-    const [nodes, setNodes] = useState(props.nodes);
-    const [edges, setEdges] = useState(props.edges);
 
-    const onNodesChange = useCallback(
-        (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
-        [setNodes]
-    );
 
-    const onEdgesChange = useCallback(
-        (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
-        [setEdges]
-    );
+    useEffect(() => {
+        setId(props.nodesIdCounter);
+    }, [props.nodesIdCounter]);
 
     const onConnect = useCallback(
-        (connection) => setEdges((eds) => addEdge(connection, eds)),
-        [setEdges]
+        (connection) => props.setEdges((eds) => addEdge(connection, eds)),
+        [props.setEdges]
     );
 
     useEffect(() => {
-        props.onNodesChanged(nodes);
-    }, [nodes]);
-
-    useEffect(() => {
-        props.onEdgesChanged(edges);
-    }, [edges]);
+        setReactFlowInstance(props.reactFlowInstance);
+    }, [props.reactFlowInstance]);
 
     useEffect(() => {
-        setNodes(props.nodes);
+        console.log("props.nodes hat sich geändert:", props.nodes);
     }, [props.nodes]);
 
     useEffect(() => {
-        // setEdges(props.edges);
+        console.log("props.edges hat sich geändert:", props.edges);
     }, [props.edges]);
 
+
     const onDragOver = useCallback((event) => {
         event.preventDefault();
         event.dataTransfer.dropEffect = 'move';
@@ -76,21 +65,16 @@ export const ReactFlowComponent = (props) => {
     const onDrop = useCallback(
         (event) => {
             event.preventDefault();
-
             const reactFlowBounds = reactFlowWrapper.current.getBoundingClientRect();
             const type = event.dataTransfer.getData('application/reactflow');
-
-            // check if the dropped element is valid
             if (typeof type === 'undefined' || !type) {
-                console.log("type undefined");
+                console.log('type undefined');
                 return;
             }
-
             const position = reactFlowInstance.project({
                 x: event.clientX - reactFlowBounds.left,
                 y: event.clientY - reactFlowBounds.top,
             });
-
             const data = {
                 label: "",
                 objectType: "",
@@ -124,21 +108,20 @@ export const ReactFlowComponent = (props) => {
                 dragHandle: '.drag-handle',
                 draggable: true,
             };
-
-            setNodes((nds) => nds.concat(newNode));
+            props.setNodes((nds) => nds.concat(newNode));
         },
-        [reactFlowInstance]
+        [reactFlowInstance, props.setNodes]
     );
 
     return (
         <div style={{ width: '100%', height: '93vh' }} className="dndflow">
             <ReactFlowProvider>
                 <div className="reactflow-wrapper" ref={reactFlowWrapper}>
                     <ReactFlow
-                        nodes={nodes}
-                        edges={edges}
-                        onNodesChange={onNodesChange}
-                        onEdgesChange={onEdgesChange}
+                        nodes={props.nodes}
+                        edges={props.edges}
+                        onNodesChange={props.onNodesChange}
+                        onEdgesChange={props.onEdgesChange}
                         onConnect={onConnect}
                         nodeTypes={nodeTypes}
                         selectionMode={SelectionMode.Partial}
@@ -147,20 +130,16 @@ export const ReactFlowComponent = (props) => {
                         onDragOver={onDragOver}
                         connectionLineComponent={StrongConnectionLineComponent}
                     >
-                        <MiniMap
-                            nodeColor={nodeColor}
-                            nodeStrokeWidth={3}
-                            zoomable
-                            pannable
-                        />
+                        <MiniMap nodeColor={nodeColor} nodeStrokeWidth={3} zoomable pannable />
                         <Controls showInteractive={false} />
                         <Background variant="cross" />
                     </ReactFlow>
                 </div>
-                <Sidebar
-                    nodes={nodes}
-                />
+                <pre>
+                    {JSON.stringify(id, null, 2)}
+                </pre>
+                <Sidebar nodes={props.nodes} />
             </ReactFlowProvider>
         </div>
-    )
+    );
 }

Build/Sources/components/ReactFlow/Sidebar.jsx

@@ -12,15 +12,6 @@ export default (props) => {
             <div className="dndnode custom-model-node" onDragStart={(event) => onDragStart(event, 'customModel')} draggable>
                 New Model Object
             </div>
-            <div className="debug-output">
-                <h5>Debug output</h5>
-                <pre>
-                    {JSON.stringify(props.nodes, null, 2)}
-                </pre>
-                <pre>
-                    {JSON.stringify(props.edges, null, 2)}
-                </pre>
-            </div>
 
             {/*<div className="dndnode" onDragStart={(event) => onDragStart(event, 'default')} draggable>
                 Default Node

Build/Sources/components/views/RightContentComponent.jsx

@@ -1,9 +1,8 @@
-import {ReactFlowComponent} from "../ReactFlow/ReactFlowComponent";
+import React from 'react';
+import { ReactFlowComponent } from '../ReactFlow/ReactFlowComponent';
 
 export const RightContentComponent = (props) => {
     return (
-        <ReactFlowComponent
-            {...props}
-       />
-    )
-}
+        <ReactFlowComponent {...props} />
+    );
+};

Build/Sources/initialValues/nodeData.js

@@ -0,0 +1,26 @@
+const nodeData = {
+    label: "",
+    objectType: "",
+    isAggregateRoot: false,
+    enableSorting: false,
+    addDeletedField: true,
+    addHiddenField: true,
+    addStarttimeEndtimeFields: true,
+    enableCategorization: false,
+    description: "",
+    mapToExistingTable: "",
+    extendExistingModelClass: "",
+    actions: {
+        actionIndex: false,
+        actionList: false,
+        actionShow: false,
+        actionNewCreate: false,
+        actionEditUpdate: false,
+        actionDelete: false,
+    },
+    customActions: [],
+    properties: [],
+    relations: [],
+}
+
+export default nodeData;