modularization of editor

src/Components/CustomCard/CustomCard.jsx → src/Components/customCard/customCard.component.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import "./CustomCard.css";
+import "./customCard.component.css";
 
 export default function CustomCard(props) {
   return (

src/Components/CustomNavbar/CustomNavbar.jsx → src/Components/customNavbar/customNavbar.component.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import "./CustomNavbar.css";
+import "./customNavbar.component.css";
 
 const NavbarItem = (props) => {
   return (

src/Components/customNode/customNode.component.jsx

@@ -0,0 +1,81 @@
+import React, { memo } from "react";
+import { Handle, useReactFlow, useStoreApi, Position } from "reactflow";
+
+const options = [
+  {
+    value: "smoothstep",
+    label: "Smoothstep",
+  },
+  {
+    value: "step",
+    label: "Step",
+  },
+  {
+    value: "default",
+    label: "Bezier (default)",
+  },
+  {
+    value: "straight",
+    label: "Straight",
+  },
+];
+
+function Select({ value, handleId, nodeId }) {
+  const { setNodes } = useReactFlow();
+  const store = useStoreApi();
+
+  const onChange = (evt) => {
+    const { nodeInternals } = store.getState();
+    setNodes(
+      Array.from(nodeInternals.values()).map((node) => {
+        if (node.id === nodeId) {
+          node.data = {
+            ...node.data,
+            selects: {
+              ...node.data.selects,
+              [handleId]: evt.target.value,
+            },
+          };
+        }
+
+        return node;
+      })
+    );
+  };
+
+  return (
+    <div className="custom-node__select">
+      <div>Edge Type</div>
+      <select className="nodrag" onChange={onChange} value={value}>
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      <Handle type="source" position={Position.Right} id={handleId} />
+    </div>
+  );
+}
+
+function CustomNode({ id, data }) {
+  return (
+    <>
+      <div className="custom-node__header">
+        This is a <strong>custom node</strong>
+      </div>
+      <div className="custom-node__body">
+        {Object.keys(data.selects).map((handleId) => (
+          <Select
+            key={handleId}
+            nodeId={id}
+            value={data.selects[handleId]}
+            handleId={handleId}
+          />
+        ))}
+      </div>
+    </>
+  );
+}
+
+export default memo(CustomNode);

src/Components/index.js

@@ -0,0 +1,5 @@
+export { default as CustomCard } from "./customCard/customCard.component";
+export { default as CustomLink } from "./customLink/customLink.component";
+export { default as CustomFooter } from "./customFooter/customFooter.component";
+export { default as CustomNavbar } from "./customNavbar/customNavbar.component";
+export { default as CustomNode } from "./customNode/customNode.component";

src/index.js

@@ -1,31 +1,24 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
 
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
-import MainPage from './pages/main/MainPage';
-import EditorPage from './pages/editor/EditorPage';
-import HomePage from './pages/home/home.page';
-import "./index.css"
-const root = ReactDOM.createRoot(document.getElementById('root'));
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { HomePage, EditorPage } from "./pages/";
+import "./index.css";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <HomePage />
+    element: <HomePage />,
   },
   {
     path: "/editor",
-    element: <EditorPage />
+    element: <EditorPage />,
   },
-])
+]);
 
 root.render(
   <React.StrictMode>
     <RouterProvider router={router} />
   </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/pages/editor/editor.page.jsx

@@ -0,0 +1,8 @@
+import GraphSection from "./graphSection/graph.section";
+export default function EditorPage() {
+  return (
+    <div className="w-full h-screen">
+      <GraphSection />
+    </div>
+  );
+}

src/pages/editor/graphSection/CustomNode.jsx

@@ -0,0 +1,76 @@
+import React, { memo } from 'react';
+import { Handle, useReactFlow, useStoreApi, Position } from 'reactflow';
+
+const options = [
+  {
+    value: 'smoothstep',
+    label: 'Smoothstep',
+  },
+  {
+    value: 'step',
+    label: 'Step',
+  },
+  {
+    value: 'default',
+    label: 'Bezier (default)',
+  },
+  {
+    value: 'straight',
+    label: 'Straight',
+  },
+];
+
+function Select({ value, handleId, nodeId }) {
+  const { setNodes } = useReactFlow();
+  const store = useStoreApi();
+
+  const onChange = (evt) => {
+    const { nodeInternals } = store.getState();
+    setNodes(
+      Array.from(nodeInternals.values()).map((node) => {
+        if (node.id === nodeId) {
+          node.data = {
+            ...node.data,
+            selects: {
+              ...node.data.selects,
+              [handleId]: evt.target.value,
+            },
+          };
+        }
+
+        return node;
+      })
+    );
+  };
+
+  return (
+    <div className="custom-node__select">
+      <div>Edge Type</div>
+      <select className="nodrag" onChange={onChange} value={value}>
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      <Handle type="source" position={Position.Right} id={handleId} />
+    </div>
+  );
+}
+
+function CustomNode({ id, data }) {
+  return (
+    <>
+      <div className="custom-node__header">
+        This is a <strong>custom node</strong>
+      </div>
+      <div className="custom-node__body">
+        {Object.keys(data.selects).map((handleId) => (
+          <Select key={handleId} nodeId={id} value={data.selects[handleId]} handleId={handleId} />
+        ))}
+      </div>
+    </>
+  );
+}
+
+export default memo(CustomNode);

src/pages/editor/graphSection/Sidebar.js

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+const SideBar = (props) => {
+  const { t } = useTranslation();
+  const onDragStart = (event, nodeType) => {
+    event.dataTransfer.setData("application/reactflow", nodeType);
+    event.dataTransfer.effectAllowed = "move";
+  };
+
+  const [source, setSource] = useState("");
+  const [target, setTarget] = useState("");
+
+  return (
+    <div className="control-container">
+      <span className="title">COMPONENTS</span>
+
+      <div className="container">
+        <div
+          className="dndnode"
+          onDragStart={(event) => onDragStart(event, "default")}
+          draggable
+        >
+          +
+        </div>
+        <div>
+          <input
+            maxLength={1}
+            onChange={(e) => {
+              const val = e.target.value.toUpperCase();
+              setSource(val);
+            }}
+          ></input>
+        </div>
+        <input
+          maxLength={1}
+          onChange={(e) => {
+            const val = e.target.value.toUpperCase();
+            setTarget(val);
+          }}
+        ></input>
+        <button
+          type="button"
+          onClick={() => {
+            props.FindPathHandler(source, target);
+          }}
+        >Search</button>
+      </div>
+    </div>
+  );
+};
+
+export default SideBar;