it now starts a server

2024-05-03 11:06:50 +03:00
parent bd8b739022
commit 92eff9ce55
5 changed files with 200 additions and 18 deletions
--- a/winx-serve/src/CustomGraph1.js
+++ b/winx-serve/src/CustomGraph1.js
@@ -0,0 +1,149 @@
+import React, { useEffect } from 'react';
+import ReactFlow, { Controls, Background, useNodesState, useEdgesState } from 'react-flow-renderer';
+import CustomNodeComponent from './CustomNodeComponent';
+import {ReactFlowProvider} from "reactflow";
+import {jsonData} from './Data.js';
+
+const nodeTypes = {
+    customNode: CustomNodeComponent,
+};
+
+function CustomGraph1() {
+    const [nodes, setNodes, onNodesChange] = useNodesState([]);
+    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+
+    useEffect(() => {
+        const loadedNodes = [];
+        const loadedEdges = [];
+        let yOffset = 100;
+
+        jsonData.forEach((pkg, index) => {
+            const pkgId = `pkg-${pkg.name}`;
+            loadedNodes.push({
+                id: pkgId,
+                type: 'customNode',
+                position: { x: 100, y: yOffset * index },
+                data: { label: `Package: ${pkg.name}`, ...pkg }
+            });
+
+            pkg.interfaces.forEach((iface, iIndex) => {
+                const ifaceId = `iface-${iface.name}`;
+                loadedNodes.push({
+                    id: ifaceId,
+                    type: 'customNode',
+                    position: { x: 300, y: yOffset * (index + 1 + iIndex) },
+                    data: { label: `Interface: ${iface.name}`, ...iface }
+                });
+                loadedEdges.push({
+                    id: `e-${pkgId}-${ifaceId}`,
+                    source: pkgId,
+                    target: ifaceId,
+                    type: 'simplebezier',
+                    animated: true,
+                });
+
+                iface.functions.forEach((func, fIndex) => {
+                    const funcId = `func-${iface.name}-${func.name}`;
+                    loadedNodes.push({
+                        id: funcId,
+                        type: 'customNode',
+                        position: { x: 500, y: yOffset * (index + 2 + iIndex + fIndex) },
+                        data: { label: `${func.name}()`, ...func }
+                    });
+                    loadedEdges.push({
+                        id: `e-${ifaceId}-${funcId}`,
+                        source: ifaceId,
+                        target: funcId,
+                        type: 'simplebezier',
+                        animated: true
+                    });
+                });
+            });
+
+            pkg.specifications.forEach((spec, sIndex) => {
+                const specId = `spec-${spec.name}`;
+                loadedNodes.push({
+                    id: specId,
+                    type: 'customNode',
+                    position: { x: 300, y: yOffset * (index + 1 + sIndex) },
+                    data: { label: `Specification: ${spec.name}`, ...spec }
+                });
+
+                if (spec.implemented_interface) {
+                    const interfaceId = `iface-${spec.implemented_interface}`;
+                    loadedEdges.push({
+                        id: `e-${interfaceId}-${specId}`,
+                        source: interfaceId,
+                        target: specId,
+                        type: 'simplebezier',
+                        animated: true
+                    });
+                }
+
+                loadedEdges.push({
+                    id: `e-${pkgId}-${specId}`,
+                    source: pkgId,
+                    target: specId,
+                    type: 'simplebezier',
+                    animated: true,
+                    style: { stroke: '#000', strokeWidth: 4 }
+                });
+
+                spec.functions.forEach((func, fIndex) => {
+                    const funcId = `func-${spec.name}-${func.name}`;
+                    loadedNodes.push({
+                        id: funcId,
+                        type: 'customNode',
+                        position: { x: 500, y: yOffset * (index + 2 + sIndex + fIndex) },
+                        data: { label: `${func.name}()`, ...func },
+                    });
+
+                    if (func.implemented_interface) {
+                        const interfaceId = `iface-${func.implemented_interface}`;
+                        loadedEdges.push({
+                            id: `e-${interfaceId}-${funcId}`,
+                            source: interfaceId,
+                            target: funcId,
+                            type: 'simplebezier',
+                            animated: true
+                        });
+                    }
+
+                    loadedEdges.push({
+                        id: `e-${specId}-${funcId}`,
+                        source: specId,
+                        target: funcId,
+                        type: 'simplebezier',
+                        animated: true,
+                        style: { stroke: '#000', strokeWidth: 4 }
+                    });
+                });
+            });
+        });
+
+        console.log(loadedEdges)
+
+        setNodes(loadedNodes);
+        setEdges(loadedEdges);
+    }, [setNodes, setEdges]);
+
+    return (
+        <div style={{ height: 100+'vh', width: 100 + '%' }}>
+            <ReactFlowProvider>
+                <ReactFlow
+                    nodes={nodes}
+                    edges={edges}
+                    onNodesChange={onNodesChange}
+                    onEdgesChange={onEdgesChange}
+                    nodeTypes={nodeTypes}
+                    fitView>
+
+                    <Controls />
+                    <Background />
+                </ReactFlow>
+            </ReactFlowProvider>
+        </div>
+    );
+}
+
+export default CustomGraph1;