рекурсивное удаление элементов холста после удаляемой ноды

src/pages/Questions/BranchingMap/CsComponent.tsx

@@ -175,17 +175,32 @@ export const CsComponent = ({
   }
 
   const removeNode = ({ targetNodeContentId }: { targetNodeContentId: string }) => {
+      const deleteNodes = [] as string[]
+      const deleteEdges:any = []
     console.log("remove")
     const cy = cyRef?.current
 
-    const a = getQuestionByContentId(targetNodeContentId)
+    const findChildrenToDelete = (node) => {
-    console.log(a)
-    console.log(a.content)
-    console.log(a.content.rule.parentId)
-    console.log(a.content.rule.parentId === "root")
-    console.log(targetNodeContentId)
 
-    if (a.content.rule.parentId === "root" && quiz) {
+      //Узнаём грани, идущие от этой ноды
+      cy?.$('edge[source = "' + node.id() + '"]')?.toArray().forEach((edge) => {
+        const edgeData = edge.data()
+
+        //записываем id грани для дальнейшего удаления
+        deleteEdges.push(edge)
+        //ищем ноду на конце грани, записываем её ID для дальнейшего удаления
+        const targetNode = cy?.$("#" + edgeData.target)
+        deleteNodes.push(targetNode.data().id)
+        //вызываем функцию для анализа потомков уже у этой ноды
+        findChildrenToDelete(targetNode)
+      })
+
+    }
+    findChildrenToDelete(cy?.getElementById(targetNodeContentId))
+
+    const targetQuestion = getQuestionByContentId(targetNodeContentId)
+
+    if (targetQuestion.content.rule.parentId === "root" && quiz) {
       console.log("click ROOT")
       updateQuestion(targetNodeContentId, question => {
         question.content.rule.parentId = ""
@@ -198,10 +213,27 @@ export const CsComponent = ({
       const parentQuestionContentId = cy?.$('edge[target = "' + targetNodeContentId + '"]')?.toArray()?.[0]?.data()?.source
       if (targetNodeContentId && parentQuestionContentId) {
 
-        clearDataAfterRemoveNode({ targetQuestionContentId: targetNodeContentId, parentQuestionContentId })
+         clearDataAfterRemoveNode({ targetQuestionContentId: targetNodeContentId, parentQuestionContentId })
-        cy?.remove(cy?.$('#' + targetNodeContentId)).layout(lyopts).run()
+         cy?.remove(cy?.$('#' + targetNodeContentId)).layout(lyopts).run()
       }
 
+      console.log(deleteNodes, deleteEdges)
+      //После всех манипуляций удаляем грани из CS и ноды из бекенда
+
+      deleteNodes.forEach((nodeId) => {//Ноды
+        cy?.remove(cy?.$("#" + nodeId))
+        updateQuestion(nodeId, question => {
+          question.content.rule.parentId = ""
+          question.content.rule.main = []
+          question.content.rule.default = ""
+        })
+      })
+
+       deleteEdges.forEach((edge:any) => {//Грани
+         cy?.remove(edge)
+       })
+
+       cy?.layout(lyopts).run()
 
     }
   }
@@ -217,7 +249,10 @@ export const CsComponent = ({
       question.content.rule.default = ""
     })
     updateQuestion(parentQuestionContentId, question => {
-      if (question.content.rule.parentId === parentQuestionContentId) question.content.rule.parentId = ""
+      console.log("parent default " + question.content.rule.default)
+      console.log("target ID " + targetQuestionContentId)
+      console.log(question.content.rule.default === targetQuestionContentId)
+      if (question.content.rule.default === targetQuestionContentId) question.content.rule.default = ""
     })
 
   }
@@ -255,11 +290,11 @@ export const CsComponent = ({
     name: 'preset',
 
     positions: (e) => {
-        console.log('BBBBBBBBBBBBBBB',e.cy().data('changed'))
+      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')
+      } console.log('POSITIIIIIIIONS')
       const id = e.id()
       const incomming = e.cy().edges(`[target="${id}"]`)
       const layer = 0
@@ -303,11 +338,11 @@ export const CsComponent = ({
           task?.parent.data('subtreeWidth', task.children.reduce((p, n) => p + n.data('subtreeWidth'), 0))
         }
         const pos = { x: 200 * e.data('layer'), y: 0 }
-        e.data('oldPos',pos)
+        e.data('oldPos', pos)
         return pos
       } else {
         const parent = e.cy().edges(`[target="${e.id()}"]`)[0].source()
-        const wing = (parent.data('children') === 1)?0: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')
@@ -315,14 +350,14 @@ export const CsComponent = ({
         if (lastOffset !== undefined) {
           parent.data('lastChild', lastOffset + step)
           const pos = { x: 250 * e.data('layer'), y: (lastOffset + step) }
-          e.data('oldPos',pos)
+          e.data('oldPos', pos)
           return pos
         } else {
           parent.data('lastChild', parent.position().y - wing)
           const pos = { x: 250 * e.data('layer'), y: (parent.position().y - wing) }
-          e.data('oldPos',pos)
+          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)
@@ -341,9 +376,9 @@ export const CsComponent = ({
     document.querySelector("#root")?.addEventListener("mouseup", cleardragQuestionContentId);
     const cy = cyRef.current;
     const eles = cy?.add(storeToNodes(questions))
-    cy.data('changed',true)
+    cy.data('changed', true)
     const elecs = eles.layout(lyopts).run()
-    cy?.on('add',()=>cy.data('changed',true))
+    cy?.on('add', () => cy.data('changed', true))
     cy?.fit()
     //cy?.layout().run()
 
@@ -608,6 +643,7 @@ export const CsComponent = ({
   };
 
   return (
+    <>
     <CytoscapeComponent
       wheelSensitivity={0.1}
       elements={[]}
@@ -619,5 +655,12 @@ export const CsComponent = ({
         cyRef.current = cy;
       }}
     />
+    <button onClick={() => {
+      console.log("ELEMENTS____________________________")
+      cyRef.current?.elements().forEach((ele:any) => {
+        console.log(ele.data())
+      })
+    }}>elements</button>
+    </>
   );
 };