feat: getEmptyVertexIndents

src/pages/QuestionsMap/helper.ts

@@ -1,6 +1,11 @@
 import type { ElementDefinition } from "cytoscape";
 import type { Vertex } from "./elements";
 
+type VertexIndent = {
+  id: string;
+  indent: number;
+};
+
 const sortElementsByLevel = (vertices: Vertex[]): Record<number, Vertex[]> => {
   const sortedVertices: Record<number, Vertex[]> = {};
 
@@ -15,27 +20,50 @@ const sortElementsByLevel = (vertices: Vertex[]): Record<number, Vertex[]> => {
   return sortedVertices;
 };
 
-const getEmptyVerticesAboveAmount = (
+const getEmptyVertexIndents = (
   elements: ElementDefinition[],
   vertices: Vertex[],
+  id: string,
   indent: number,
   currentIndent: number,
   level: number
-): number => {
+): VertexIndent[] => {
   let topIndent = indent + currentIndent;
+  const indents: VertexIndent[] = [];
 
-  return elements.filter(({ data, position }) => {
+  elements.forEach(({ data, position }) => {
     const isEmptyVertex =
       position?.y === topIndent &&
       position?.x === level * 250 - 250 &&
       vertices.find((item) => item.id === data.id && !item.edges?.length);
 
-    if (isEmptyVertex) {
-      topIndent += 200;
+    if (!isEmptyVertex) {
+      return;
     }
 
-    return isEmptyVertex;
-  }).length;
+    const parentVertex = vertices.find(({ edges }) => edges?.includes(id));
+    const parentElement = elements.find(
+      ({ data }) => parentVertex?.id === data.id
+    );
+
+    if (parentElement?.position?.y && parentVertex?.edges?.length) {
+      const minTopIndent =
+        parentElement.position.y - (parentVertex.edges.length || 0) * 100;
+
+      topIndent += 200;
+
+      if (indent < minTopIndent) {
+        indent = minTopIndent;
+        indents.push({ id, indent: minTopIndent });
+
+        return;
+      }
+
+      indents.push({ id, indent: topIndent });
+    }
+  });
+
+  return indents;
 };
 
 export const createGraphElements = (
@@ -50,15 +78,22 @@ export const createGraphElements = (
 
     vertexItems.forEach(({ id, label, level, edges }) => {
       const currentIndent = edges?.length ? edges?.length * 100 : 100;
-      const emptyVertexAboveAmount = getEmptyVerticesAboveAmount(
+      const emptyVertexIndents = getEmptyVertexIndents(
         elements,
         vertices,
+        id,
         indent,
         currentIndent,
         level
       );
 
-      indent += emptyVertexAboveAmount * 200;
+      if (emptyVertexIndents.length) {
+        const emptyVertexIndent = emptyVertexIndents.find(
+          (item) => item.id === id
+        );
+
+        indent = emptyVertexIndent?.indent || indent;
+      }
 
       elements.push({
         data: { id, label },
@@ -68,13 +103,13 @@ export const createGraphElements = (
         },
       });
 
-      indent += currentIndent * 2;
-
       edges?.forEach((edge) => {
         bridges.push({
           data: { source: id, target: edge },
         });
       });
+
+      indent += currentIndent * 2;
     });
   });