clean code & fix structure

src/containers/LiveEditor/CustomNode.tsx

@@ -24,6 +24,16 @@ const StyledText = styled.pre<{ width: number; height: number }>`
   color: ${({ theme }) => theme.SILVER};
 `;
 
+const StyledForeignObject = styled.foreignObject<{
+  width: number;
+  height: number;
+}>`
+  position: "relative" !important;
+  pointer-events: "none" !important;
+  width: ${({ width }) => width + "px"};
+  height: ${({ height }) => height + "px"};
+`;
+
 const baseLabelStyle = {
   fill: "transparent",
   stroke: "transparent",
@@ -36,7 +46,7 @@ const basePortStyle = {
 
 const CustomNode = ({ nodeProps }) => {
   const { properties: data } = nodeProps;
-  
+
   return (
     <StyledNode
       label={<Label style={baseLabelStyle} />}
@@ -47,22 +57,13 @@ const CustomNode = ({ nodeProps }) => {
         const { width, height } = nodeProps;
 
         return (
-          <foreignObject
-            width={width}
-            height={height}
-            x={0} // Relative position from the parent Node component (aligned to top)
-            y={0} // Relative position from the parent Node component (aligned to left)
-            style={{
-              position: "relative",
-              pointerEvents: "none",
-            }}
-          >
+          <StyledForeignObject width={width} height={height} x={0} y={0}>
             <StyledTextWrapper>
               <StyledText width={width} height={height}>
                 {data.text}
               </StyledText>
             </StyledTextWrapper>
-          </foreignObject>
+          </StyledForeignObject>
         );
       }}
     </StyledNode>

src/containers/LiveEditor/helpers.ts

@@ -1,39 +1,23 @@
-import { isNode } from "react-flow-renderer";
-import { CanvasDirection } from "reaflow";
+import { CanvasDirection, NodeData, EdgeData } from "reaflow";
 import { parser } from "src/utils/json-editor-parser";
 
 export function getEdgeNodes(graph: any): any {
   graph = JSON.parse(graph);
   const elements = parser(graph);
 
-  let nodes: object[] = [],
-    edges: object[] = [];
+  let nodes: NodeData[] = [],
+    edges: EdgeData[] = [];
 
-  elements.forEach((el) => {
-    const renderText = (value: string | object) => {
-      if (value instanceof Object) {
-        let temp = "";
-        const entries = Object.entries(value);
-
-        if (Object.keys(value).every((val) => !isNaN(+val))) {
-          return Object.values(value).join("");
-        }
-
-        entries.forEach((entry) => {
-          temp += `${entry[0]}: ${entry[1]}\n`;
-        });
-
-        return temp;
-      }
-
-      return value;
-    };
+  for (let i = 0; i < elements.length; i++) {
+    const el = elements[i];
 
     if (isNode(el)) {
-      const text = renderText(el.data.label);
+      const text = renderText(el.text);
       const lines = text.split("\n");
-      const lineLength = lines.map((line) => line.length);
-      const longestLine = lineLength.sort()[lineLength.length - 1];
+      const lineLengths = lines
+        .map((line) => line.length)
+        .sort((a, b) => a - b);
+      const longestLine = lineLengths.reverse()[0];
 
       nodes.push({
         id: el.id,
@@ -43,13 +27,9 @@ export function getEdgeNodes(graph: any): any {
         data: { type: "special" },
       });
     } else {
-      edges.push({
-        id: el.id,
-        from: el.source,
-        to: el.target,
-      });
+      edges.push(el);
     }
-  });
+  }
 
   return {
     nodes,
@@ -72,3 +52,27 @@ export function getNextLayout(layout: CanvasDirection) {
       return "LEFT";
   }
 }
+
+function renderText(value: string | object) {
+  if (value instanceof Object) {
+    let temp = "";
+    const entries = Object.entries(value);
+
+    if (Object.keys(value).every((val) => !isNaN(+val))) {
+      return Object.values(value).join("");
+    }
+
+    entries.forEach((entry) => {
+      temp += `${entry[0]}: ${entry[1]}\n`;
+    });
+
+    return temp;
+  }
+
+  return value;
+}
+
+function isNode(element: NodeData | EdgeData) {
+  if ("text" in element) return true;
+  return false;
+}

src/utils/json-editor-parser.ts

@@ -1,6 +1,4 @@
-import { FlowElement } from "react-flow-renderer";
-
-export const parser = (input: string | string[]): FlowElement[] => {
+export const parser = (input: string | string[]) => {
   try {
     if (typeof input !== "object") input = JSON.parse(input);
     if (!Array.isArray(input)) input = [input];
@@ -16,19 +14,17 @@ export const parser = (input: string | string[]): FlowElement[] => {
 
       return [os].flat().map((o) => ({
         id: nextId(),
-        data: {
-          label: Object.fromEntries(
-            Object.entries(o).filter(
-              ([k, v]) => !Array.isArray(v) && !(v instanceof Object)
-            )
-          ),
-        },
+        text: Object.fromEntries(
+          Object.entries(o).filter(
+            ([k, v]) => !Array.isArray(v) && !(v instanceof Object)
+          )
+        ),
         children: Object.entries(o)
           .filter(([k, v]) => Array.isArray(v) || typeof v === "object")
           .flatMap(([k, v]) => [
             {
               id: nextId(),
-              data: { label: k },
+              text: k,
               children: extract(v, nextId),
             },
           ]),
@@ -36,11 +32,11 @@ export const parser = (input: string | string[]): FlowElement[] => {
     };
 
     const relationships = (xs: { id: string; children: never[] }[]) => {
-      return xs.flatMap(({ id: target, children = [] }) => [
-        ...children.map(({ id: source }) => ({
-          id: `e${source}-${target}`,
-          source,
-          target,
+      return xs.flatMap(({ id: to, children = [] }) => [
+        ...children.map(({ id: from }) => ({
+          id: `e${from}-${to}`,
+          from,
+          to,
         })),
         ...relationships(children),
       ]);