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

можно удалять корневой узел

Browse Source
This commit is contained in:
Nastya 2023-12-02 16:11:57 +03:00
parent e792c85771
commit a15e697f91
2 changed files with 118 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,7 @@ import Cytoscape from "cytoscape";
import CytoscapeComponent from "react-cytoscapejs";
import popper from "cytoscape-popper";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { updateRootInfo } from "@root/quizes/actions"
import { AnyQuizQuestion } from "@model/questionTypes/shared"
import { useQuestionsStore } from "@root/questions/store";
import { cleardragQuestionContentId, getQuestionById, updateQuestion, updateOpenedModalSettingsId, getQuestionByContentId } from "@root/questions/actions";
@ -96,9 +97,9 @@ Cytoscape.use(popper);
interface Props {
modalQuestionParentContentId: string;
modalQuestionTargetContentId: string;
setOpenedModalQuestions: (open:boolean) => void;
setModalQuestionParentContentId: (id:string) => void;
setModalQuestionTargetContentId: (id:string) => void;
setOpenedModalQuestions: (open: boolean) => void;
setModalQuestionParentContentId: (id: string) => void;
setModalQuestionTargetContentId: (id: string) => void;
}
@ -108,7 +109,7 @@ export const CsComponent = ({
setOpenedModalQuestions,
setModalQuestionParentContentId,
setModalQuestionTargetContentId
}:Props) => {
}: Props) => {
const quiz = useCurrentQuiz();
const { dragQuestionContentId, questions } = useQuestionsStore()
@ -121,12 +122,12 @@ export const CsComponent = ({
const crossesContainer = useRef<HTMLDivElement | null>(null);
const gearsContainer = useRef<HTMLDivElement | null>(null);
useEffect(() =>{
useEffect(() => {
if (modalQuestionTargetContentId.length !== 0 && modalQuestionParentContentId.length !== 0) {
console.log("был выбран вопрос " + modalQuestionTargetContentId)
}
}, [modalQuestionTargetContentId])
}, [modalQuestionTargetContentId])
const addNode = ({ parentNodeContentId }: { parentNodeContentId: string }) => {
console.log("dragQuestionContentId " + dragQuestionContentId)
@ -155,7 +156,7 @@ useEffect(() =>{
}
}
const clearDataAfterAddNode = ({ parentNodeContentId, targetQuestion, parentNodeChildren }: { parentNodeContentId: string, targetQuestion: AnyQuizQuestion, parentNodeChildren:number }) => {
const clearDataAfterAddNode = ({ parentNodeContentId, targetQuestion, parentNodeChildren }: { parentNodeContentId: string, targetQuestion: AnyQuizQuestion, parentNodeChildren: number }) => {
console.log("записываю на бек ид родителя")
console.log({ parentNodeContentId, targetQuestion, parentNodeChildren })
//предупреждаем добавленный вопрос о том, кто его родитель
@ -174,30 +175,53 @@ useEffect(() =>{
}
const removeNode = ({ targetNodeContentId }: { targetNodeContentId: string }) => {
console.log("remove")
const cy = cyRef?.current
//
const parentQuestion = cy?.$('edge[target = "' + targetNodeContentId + '"]').toArray()[0].data()
const targetQuestion = cy?.$('#'+targetNodeContentId)?.data()
const targetQuestionContentId = cy?.$('#' + targetNodeContentId)?.data().id
if (targetQuestion && parentQuestion) {
clearDataAfterRemoveNode({targetQuestionId: targetQuestion.id, parentQuestionId: parentQuestion.source})
const a = getQuestionByContentId(targetNodeContentId)
console.log(a)
console.log(a)
console.log(targetQuestionContentId)
console.log(targetNodeContentId)
cy?.remove(cy?.$('#'+targetNodeContentId)).layout(lyopts).run()
}
}
const clearDataAfterRemoveNode = ({targetQuestionId, parentQuestionId}:{targetQuestionId:string, parentQuestionId:string}) => {
console.log({targetQuestionId, parentQuestionId})
updateQuestion(targetQuestionId, question => {
if (a.content.rule.parentId === "root" && quiz) {
console.log("click ROOT")
updateQuestion(targetQuestionContentId, question => {
question.content.rule.parentId = ""
question.content.rule.main = []
question.content.rule.default = ""
})
updateQuestion(parentQuestionId, question => {
if (question.content.rule.parentId === parentQuestionId) question.content.rule.parentId = ""
updateRootInfo(quiz?.id, false)
} else {
console.log("click not ROOT")
const parentQuestionContentId = cy?.$('edge[target = "' + targetNodeContentId + '"]')?.toArray()?.[0]?.data()?.source
if (targetQuestionContentId && parentQuestionContentId) {
clearDataAfterRemoveNode({ targetQuestionContentId, parentQuestionContentId })
cy?.remove(cy?.$('#' + targetNodeContentId)).layout(lyopts).run()
}
}
}
const clearDataAfterRemoveNode = ({ targetQuestionContentId, parentQuestionContentId }: { targetQuestionContentId: string, parentQuestionContentId: string }) => {
console.log({ targetQuestionContentId, parentQuestionContentId })
updateQuestion(targetQuestionContentId, question => {
question.content.rule.parentId = ""
question.content.rule.main = []
question.content.rule.default = ""
})
updateQuestion(parentQuestionContentId, question => {
if (question.content.rule.parentId === parentQuestionContentId) question.content.rule.parentId = ""
})
}
}
useEffect(() => {
@ -306,7 +330,7 @@ const clearDataAfterRemoveNode = ({targetQuestionId, parentQuestionId}:{targetQu
document.querySelector("#root")?.addEventListener("mouseup", cleardragQuestionContentId);
const cy = cyRef.current;
const eles = cy?.add(storeToNodes(questions))
console.log('PETTY', storeToNodes(questions), eles.length)
console.log('PETTY', storeToNodes(questions), eles.length)
const elecs = eles.layout(lyopts).run()
cy?.fit()
@ -374,12 +398,12 @@ console.log('PETTY', storeToNodes(questions), eles.length)
}
const ext = cy.extent()
const nodesInView = cy.nodes().filter(n => {
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
})
})
nodesInView
nodesInView
.toArray()
?.forEach((item) => {
const node = item as NodeSingularWithPopper;
@ -399,10 +423,10 @@ nodesInView
}
const layoutElement = document.createElement("div");
layoutElement.style.zIndex="0"
layoutElement.style.zIndex = "0"
layoutElement.classList.add("popper-layout");
layoutElement.setAttribute("data-id", item.id());
layoutElement.addEventListener("mouseup", () =>{
layoutElement.addEventListener("mouseup", () => {
alert("layout")
}
// setStartCreate(node.id())
@ -430,7 +454,7 @@ nodesInView
const plusElement = document.createElement("div");
plusElement.classList.add("popper-plus");
plusElement.setAttribute("data-id", item.id());
plusElement.style.zIndex="1"
plusElement.style.zIndex = "1"
plusElement.addEventListener("mouseup", () => {
setStartCreate(node.id());
});
@ -457,9 +481,9 @@ nodesInView
const crossElement = document.createElement("div");
crossElement.classList.add("popper-cross");
crossElement.setAttribute("data-id", item.id());
crossElement.style.zIndex="2"
crossElement.style.zIndex = "2"
crossesContainer.current?.appendChild(crossElement);
crossElement.addEventListener("mouseup", () =>{
crossElement.addEventListener("mouseup", () => {
setStartRemove(node.id())
@ -491,7 +515,7 @@ nodesInView
const gearElement = document.createElement("div");
gearElement.classList.add("popper-gear");
gearElement.setAttribute("data-id", item.id());
gearElement.style.zIndex="1"
gearElement.style.zIndex = "1"
gearsContainer.current?.appendChild(gearElement);
gearElement.addEventListener("mouseup", (e) => {
console.log("шестерня")

12
src/stores/questions/actions.ts
View File

@ -438,10 +438,16 @@ export const getQuestionById = (questionId: string | null) => {
return useQuestionsStore.getState().questions.find(q => q.id === questionId) || null;
};
export const getQuestionByContentId = (questionContentId: string | null) => {
console.log("questionContentId " + questionContentId)
if (questionContentId === null) return null;
return useQuestionsStore.getState().questions.find(q => q.content.id === questionContentId) || null;
return useQuestionsStore.getState().questions.find(q => {
console.log(q.content.id)
console.log(q.content.id === questionContentId)
return ( q.content.id === questionContentId)}) || null;
};
export const updateOpenedModalSettingsId = (id?: string) => useQuestionsStore.setState({openedModalSettingsId: id ? id : null});
export const updateDragQuestionContentId = (contentId?: string) => useQuestionsStore.setState({dragQuestionContentId: contentId ? contentId : null});
export const updateDragQuestionContentId = (contentId?: string) => {
console.log("contentId " + contentId)
useQuestionsStore.setState({dragQuestionContentId: contentId ? contentId : null});
}