fix: layout memoizing and fix ladder in straight line graph

src/pages/Questions/BranchingMap/CsComponent.tsx

@@ -242,6 +242,7 @@ export const CsComponent = ({
 
 
   const readyLO = (e) => {
+    e.cy.data('changed', false)
     //удаляем иконки
     e.cy.nodes().forEach((ele: any) => {
       const data = ele.data()
@@ -254,7 +255,11 @@ export const CsComponent = ({
     name: 'preset',
 
     positions: (e) => {
-      console.log('POSITIIIIIIIONS')
+        console.log('BBBBBBBBBBBBBBB',e.cy().data('changed'))
+      if (!e.cy().data('changed')) {
+        console.log(e.cy().data('changed'))
+        return e.data('oldPos')
+      }      console.log('POSITIIIIIIIONS')
       const id = e.id()
       const incomming = e.cy().edges(`[target="${id}"]`)
       const layer = 0
@@ -281,7 +286,7 @@ export const CsComponent = ({
         while (queue.length) {
           const task = queue.pop()
           if (task.children.length === 0) {
-            task.parent.data('subtreeWidth', 0)
+            task.parent.data('subtreeWidth', task.parent.height())
             continue
           }
           const unprocessed = task?.children.filter(e => {
@@ -297,20 +302,27 @@ export const CsComponent = ({
 
           task?.parent.data('subtreeWidth', task.children.reduce((p, n) => p + n.data('subtreeWidth'), 0))
         }
-        return { x: 200 * e.data('layer'), y: 0 }
+        const pos = { x: 200 * e.data('layer'), y: 0 }
+        e.data('oldPos',pos)
+        return pos
       } else {
         const parent = e.cy().edges(`[target="${e.id()}"]`)[0].source()
-        const wing = parent.data('subtreeWidth') / 2
+        const wing = (parent.data('children') === 1)?0:parent.data('subtreeWidth') / 2
         const lastOffset = parent.data('lastChild')
         const step = wing * 2 / (parent.data('children') - 1)
         //e.removeData('subtreeWidth')
+        console.log('AAAAAAAAAAa', e.data(), lastOffset, step, parent.position().y, wing)
         if (lastOffset !== undefined) {
           parent.data('lastChild', lastOffset + step)
-          return { x: 200 * e.data('layer'), y: (lastOffset + step) }
+          const pos = { x: 250 * e.data('layer'), y: (lastOffset + step) }
+          e.data('oldPos',pos)
+          return pos
         } else {
           parent.data('lastChild', parent.position().y - wing)
-          return { x: 200 * e.data('layer'), y: (parent.position().y - wing) }
+          const pos = { x: 250 * e.data('layer'), y: (parent.position().y - wing) }
-        }
+          e.data('oldPos',pos)
+          return pos
+          }
       }
     }, // map of (node id) => (position obj); or function(node){ return somPos; }
     zoom: undefined, // the zoom level to set (prob want fit = false if set)
@@ -329,9 +341,9 @@ export const CsComponent = ({
     document.querySelector("#root")?.addEventListener("mouseup", cleardragQuestionContentId);
     const cy = cyRef.current;
     const eles = cy?.add(storeToNodes(questions))
-    console.log('PETTY', storeToNodes(questions), eles.length)
+    cy.data('changed',true)
     const elecs = eles.layout(lyopts).run()
-
+    cy?.on('add',()=>cy.data('changed',true))
     cy?.fit()
     //cy?.layout().run()
 
@@ -399,7 +411,7 @@ export const CsComponent = ({
     const ext = cy.extent()
     const nodesInView = cy.nodes().filter(n => {
       const bb = n.boundingBox()
-      return bb.x1 > ext.x1 && bb.x2 < ext.x2 && bb.y1 > ext.y1 && bb.y2 < ext.y2
+      return bb.x2 > ext.x1 && bb.x1 < ext.x2 && bb.y2 > ext.y1 && bb.y1 < ext.y2
     })
 
     nodesInView
@@ -500,7 +512,7 @@ export const CsComponent = ({
           },
           content: ([item]) => {
             const itemId = item.id();
-            if (item.data().lastChild === NaN || item.data().lastChild === undefined) {
+            if (item.cy().edges(`[target="${itemId}"]`).sources().length === 0) {
               return;
             }