diff --git a/Build/Sources/App.js b/Build/Sources/App.js
index 0d73fdb4e..3d91da148 100644
--- a/Build/Sources/App.js
+++ b/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() {
diff --git a/Build/Sources/components/ReactFlow/ReactFlowComponent.jsx b/Build/Sources/components/ReactFlow/ReactFlowComponent.jsx
index 5f9752318..4eddcb8f3 100644
--- a/Build/Sources/components/ReactFlow/ReactFlowComponent.jsx
+++ b/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,10 +108,9 @@ 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 (
@@ -135,10 +118,10 @@ export const ReactFlowComponent = (props) => {
{
onDragOver={onDragOver}
connectionLineComponent={StrongConnectionLineComponent}
>
-
+
-
+
+ {JSON.stringify(id, null, 2)}
+
+
- )
+ );
}
diff --git a/Build/Sources/components/ReactFlow/Sidebar.jsx b/Build/Sources/components/ReactFlow/Sidebar.jsx
index 9ac510456..40d718896 100644
--- a/Build/Sources/components/ReactFlow/Sidebar.jsx
+++ b/Build/Sources/components/ReactFlow/Sidebar.jsx
@@ -12,15 +12,6 @@ export default (props) => {
onDragStart(event, 'customModel')} draggable>
New Model Object
-
-
Debug output
-
- {JSON.stringify(props.nodes, null, 2)}
-
-
- {JSON.stringify(props.edges, null, 2)}
-
-
{/* onDragStart(event, 'default')} draggable>
Default Node
diff --git a/Build/Sources/components/views/RightContentComponent.jsx b/Build/Sources/components/views/RightContentComponent.jsx
index 01b09dd38..64c652e84 100644
--- a/Build/Sources/components/views/RightContentComponent.jsx
+++ b/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 (
-
- )
-}
+
+ );
+};
diff --git a/Build/Sources/initialValues/nodeData.js b/Build/Sources/initialValues/nodeData.js
new file mode 100644
index 000000000..61e1472a4
--- /dev/null
+++ b/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;