diff --git a/src/pages/QuestionsMap/helper.ts b/src/pages/QuestionsMap/helper.ts index 4e19e9e9..7ddc33f8 100644 --- a/src/pages/QuestionsMap/helper.ts +++ b/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 => { const sortedVertices: Record = {}; @@ -15,27 +20,50 @@ const sortElementsByLevel = (vertices: Vertex[]): Record => { 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; }); });