SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Nastya 2023-12-02 23:47:28 +03:00
parent fb3c98f6bc
commit 89f2140715
1 changed files with 62 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/pages/Questions/BranchingMap/CsComponent.tsx
View File

@ -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)
console.log(a)
console.log(a.content)
console.log(a.content.rule.parentId)
console.log(a.content.rule.parentId === "root")
console.log(targetNodeContentId)
const findChildrenToDelete = (node) => {
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 })
cy?.remove(cy?.$('#' + targetNodeContentId)).layout(lyopts).run()
clearDataAfterRemoveNode({ targetQuestionContentId: targetNodeContentId, parentQuestionContentId })
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>
</>
);
};