feat: getEmptyVerticesAboveAmount (WIP)

src/pages/QuestionsMap/elements.ts

@@ -99,7 +99,16 @@ export const VERTICES: Vertex[] = [
   { id: "point_34", label: "Вопрос 34", level: 3 },
   { id: "point_35", label: "Вопрос 35", level: 3 },
   { id: "point_36", label: "Вопрос 36", level: 3 },
-  { id: "point_37", label: "Вопрос 37", level: 3 },
+  {
+    id: "point_37",
+    label: "Вопрос 37",
+    level: 3,
+    edges: ["point_38", "point_39", "point_40", "point_41"],
+  },
+  { id: "point_38", label: "Вопрос 38", level: 4 },
+  { id: "point_39", label: "Вопрос 39", level: 4 },
+  { id: "point_40", label: "Вопрос 40", level: 4 },
+  { id: "point_41", label: "Вопрос 41", level: 4 },
   // { id: "point_", label: "Вопрос " },
 ];
 

src/pages/QuestionsMap/helper.ts

@@ -15,6 +15,29 @@ const sortElementsByLevel = (vertices: Vertex[]): Record<number, Vertex[]> => {
   return sortedVertices;
 };
 
+const getEmptyVerticesAboveAmount = (
+  elements: ElementDefinition[],
+  vertices: Vertex[],
+  indent: number,
+  currentIndent: number,
+  level: number
+): number => {
+  let leftIndent = indent + currentIndent;
+
+  return elements.filter(({ data, position }) => {
+    const isEmptyVertex =
+      position?.x === leftIndent &&
+      position?.y === level * 250 - 250 &&
+      vertices.find((item) => item.id === data.id && !item.edges?.length);
+
+    if (isEmptyVertex) {
+      leftIndent += 200;
+    }
+
+    return isEmptyVertex;
+  }).length;
+};
+
 export const createGraphElements = (
   vertices: Vertex[]
 ): ElementDefinition[] => {
@@ -25,9 +48,17 @@ export const createGraphElements = (
   Object.values(sortedVertices).forEach((vertexItems) => {
     let indent = 0;
 
-    vertexItems.forEach(({ id, label, level, edges }, index) => {
+    vertexItems.forEach(({ id, label, level, edges }) => {
-      const currentIndent =
+      const currentIndent = edges?.length ? edges?.length * 100 : 100;
-        (edges?.length || 0) * 100 + (edges?.length || 0 % 2 || 100);
+      const emptyVertexAboveAmount = getEmptyVerticesAboveAmount(
+        elements,
+        vertices,
+        indent,
+        currentIndent,
+        level
+      );
+
+      indent += emptyVertexAboveAmount * 200;
 
       elements.push({
         data: { id, label },
@@ -37,7 +68,6 @@ export const createGraphElements = (
         },
       });
 
-      console.log(label, indent, currentIndent);
       indent += currentIndent * 2;
 
       edges?.forEach((edge) => {