From 3ac022754d7bc8539374443283e69e8758d4b1bb Mon Sep 17 00:00:00 2001 From: Philipp Kuhlmay Date: Fri, 27 Oct 2023 17:27:16 +0200 Subject: [PATCH] bugfixes --- Build/Sources/App.js | 38 ++++++--- .../ReactFlow/ReactFlowComponent.jsx | 81 +++++++------------ .../Sources/components/ReactFlow/Sidebar.jsx | 9 --- .../views/RightContentComponent.jsx | 11 ++- Build/Sources/initialValues/nodeData.js | 26 ++++++ 5 files changed, 87 insertions(+), 78 deletions(-) create mode 100644 Build/Sources/initialValues/nodeData.js 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;