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

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

@ -3,6 +3,7 @@ import Cytoscape from "cytoscape";
import CytoscapeComponent from "react-cytoscapejs"; import CytoscapeComponent from "react-cytoscapejs";
import popper from "cytoscape-popper"; import popper from "cytoscape-popper";
import { useCurrentQuiz } from "@root/quizes/hooks"; import { useCurrentQuiz } from "@root/quizes/hooks";
import { updateRootInfo } from "@root/quizes/actions"
import { AnyQuizQuestion } from "@model/questionTypes/shared" import { AnyQuizQuestion } from "@model/questionTypes/shared"
import { useQuestionsStore } from "@root/questions/store"; import { useQuestionsStore } from "@root/questions/store";
import { cleardragQuestionContentId, getQuestionById, updateQuestion, updateOpenedModalSettingsId, getQuestionByContentId } from "@root/questions/actions"; import { cleardragQuestionContentId, getQuestionById, updateQuestion, updateOpenedModalSettingsId, getQuestionByContentId } from "@root/questions/actions";
@ -96,9 +97,9 @@ Cytoscape.use(popper);
interface Props { interface Props {
modalQuestionParentContentId: string; modalQuestionParentContentId: string;
modalQuestionTargetContentId: string; modalQuestionTargetContentId: string;
setOpenedModalQuestions: (open:boolean) => void; setOpenedModalQuestions: (open: boolean) => void;
setModalQuestionParentContentId: (id:string) => void; setModalQuestionParentContentId: (id: string) => void;
setModalQuestionTargetContentId: (id:string) => void; setModalQuestionTargetContentId: (id: string) => void;
} }
@ -108,7 +109,7 @@ export const CsComponent = ({
setOpenedModalQuestions, setOpenedModalQuestions,
setModalQuestionParentContentId, setModalQuestionParentContentId,
setModalQuestionTargetContentId setModalQuestionTargetContentId
}:Props) => { }: Props) => {
const quiz = useCurrentQuiz(); const quiz = useCurrentQuiz();
const { dragQuestionContentId, questions } = useQuestionsStore() const { dragQuestionContentId, questions } = useQuestionsStore()
@ -121,12 +122,12 @@ export const CsComponent = ({
const crossesContainer = useRef<HTMLDivElement | null>(null); const crossesContainer = useRef<HTMLDivElement | null>(null);
const gearsContainer = useRef<HTMLDivElement | null>(null); const gearsContainer = useRef<HTMLDivElement | null>(null);
useEffect(() =>{ useEffect(() => {
if (modalQuestionTargetContentId.length !== 0 && modalQuestionParentContentId.length !== 0) { if (modalQuestionTargetContentId.length !== 0 && modalQuestionParentContentId.length !== 0) {
console.log("был выбран вопрос " + modalQuestionTargetContentId) console.log("был выбран вопрос " + modalQuestionTargetContentId)
} }
}, [modalQuestionTargetContentId]) }, [modalQuestionTargetContentId])
const addNode = ({ parentNodeContentId }: { parentNodeContentId: string }) => { const addNode = ({ parentNodeContentId }: { parentNodeContentId: string }) => {
console.log("dragQuestionContentId " + dragQuestionContentId) console.log("dragQuestionContentId " + dragQuestionContentId)
@ -151,53 +152,76 @@ useEffect(() =>{
} }
]).layout(lyopts).run() ]).layout(lyopts).run()
} else { } else {
enqueueSnackbar("Добавляемый вопрос не найден") enqueueSnackbar("Добавляемый вопрос не найден")
} }
} }
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("записываю на бек ид родителя")
console.log({ parentNodeContentId, targetQuestion, parentNodeChildren }) console.log({ parentNodeContentId, targetQuestion, parentNodeChildren })
//предупреждаем добавленный вопрос о том, кто его родитель //предупреждаем добавленный вопрос о том, кто его родитель
updateQuestion(targetQuestion.content.id, question => { updateQuestion(targetQuestion.content.id, question => {
question.content.rule.parentId = parentNodeContentId question.content.rule.parentId = parentNodeContentId
question.content.rule.main = [] question.content.rule.main = []
}) })
//Если детей больше 1 - предупреждаем стор вопросов об открытии модалки ветвления //Если детей больше 1 - предупреждаем стор вопросов об открытии модалки ветвления
if (parentNodeChildren > 1) { if (parentNodeChildren > 1) {
updateOpenedModalSettingsId(parentNodeContentId) updateOpenedModalSettingsId(parentNodeContentId)
} else { } else {
//Если ребёнок первый - добавляем его родителю как дефолтный //Если ребёнок первый - добавляем его родителю как дефолтный
updateQuestion(parentNodeContentId, question => question.content.rule.default = targetQuestion.content.id) updateQuestion(parentNodeContentId, question => question.content.rule.default = targetQuestion.content.id)
} }
} }
const removeNode = ({ targetNodeContentId }: { targetNodeContentId: string }) => { const removeNode = ({ targetNodeContentId }: { targetNodeContentId: string }) => {
console.log("remove")
const cy = cyRef?.current 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)
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 = ""
})
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()
}
cy?.remove(cy?.$('#'+targetNodeContentId)).layout(lyopts).run()
} }
} }
const clearDataAfterRemoveNode = ({targetQuestionId, parentQuestionId}:{targetQuestionId:string, parentQuestionId:string}) => { const clearDataAfterRemoveNode = ({ targetQuestionContentId, parentQuestionContentId }: { targetQuestionContentId: string, parentQuestionContentId: string }) => {
console.log({targetQuestionId, parentQuestionId})
updateQuestion(targetQuestionId, 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 = ""
})
}
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(() => { useEffect(() => {
@ -227,7 +251,7 @@ const clearDataAfterRemoveNode = ({targetQuestionId, parentQuestionId}:{targetQu
initialPopperIcons(e) initialPopperIcons(e)
} }
const lyopts = { const lyopts = {
name: 'preset', name: 'preset',
positions: (e) => { positions: (e) => {
@ -306,7 +330,7 @@ const clearDataAfterRemoveNode = ({targetQuestionId, parentQuestionId}:{targetQu
document.querySelector("#root")?.addEventListener("mouseup", cleardragQuestionContentId); document.querySelector("#root")?.addEventListener("mouseup", cleardragQuestionContentId);
const cy = cyRef.current; const cy = cyRef.current;
const eles = cy?.add(storeToNodes(questions)) 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() const elecs = eles.layout(lyopts).run()
cy?.fit() cy?.fit()
@ -374,44 +398,44 @@ console.log('PETTY', storeToNodes(questions), eles.length)
} }
const ext = cy.extent() const ext = cy.extent()
const nodesInView = cy.nodes().filter(n => { const nodesInView = cy.nodes().filter(n => {
const bb = n.boundingBox() const bb = n.boundingBox()
return bb.x1 > ext.x1 && bb.x2 < ext.x2 && bb.y1 > ext.y1 && bb.y2 < ext.y2 return bb.x1 > ext.x1 && bb.x2 < ext.x2 && bb.y1 > ext.y1 && bb.y2 < ext.y2
}) })
nodesInView nodesInView
.toArray() .toArray()
?.forEach((item) => { ?.forEach((item) => {
const node = item as NodeSingularWithPopper; const node = item as NodeSingularWithPopper;
const layoutsPopper = node.popper({ const layoutsPopper = node.popper({
popper: { popper: {
placement: "left", placement: "left",
modifiers: [{ name: "flip", options: { boundary: node } }], modifiers: [{ name: "flip", options: { boundary: node } }],
}, },
content: ([item]) => { content: ([item]) => {
const itemId = item.id(); const itemId = item.id();
const itemElement = layoutsContainer.current?.querySelector( const itemElement = layoutsContainer.current?.querySelector(
`.popper-layout[data-id='${itemId}']` `.popper-layout[data-id='${itemId}']`
); );
if (itemElement) { if (itemElement) {
return itemElement; return itemElement;
} }
const layoutElement = document.createElement("div"); const layoutElement = document.createElement("div");
layoutElement.style.zIndex="0" layoutElement.style.zIndex = "0"
layoutElement.classList.add("popper-layout"); layoutElement.classList.add("popper-layout");
layoutElement.setAttribute("data-id", item.id()); layoutElement.setAttribute("data-id", item.id());
layoutElement.addEventListener("mouseup", () =>{ layoutElement.addEventListener("mouseup", () => {
alert("layout") alert("layout")
} }
// setStartCreate(node.id()) // setStartCreate(node.id())
); );
layoutsContainer.current?.appendChild(layoutElement); layoutsContainer.current?.appendChild(layoutElement);
return layoutElement; return layoutElement;
}, },
}); });
const plusesPopper = node.popper({ const plusesPopper = node.popper({
popper: { popper: {
@ -430,7 +454,7 @@ nodesInView
const plusElement = document.createElement("div"); const plusElement = document.createElement("div");
plusElement.classList.add("popper-plus"); plusElement.classList.add("popper-plus");
plusElement.setAttribute("data-id", item.id()); plusElement.setAttribute("data-id", item.id());
plusElement.style.zIndex="1" plusElement.style.zIndex = "1"
plusElement.addEventListener("mouseup", () => { plusElement.addEventListener("mouseup", () => {
setStartCreate(node.id()); setStartCreate(node.id());
}); });
@ -457,14 +481,14 @@ nodesInView
const crossElement = document.createElement("div"); const crossElement = document.createElement("div");
crossElement.classList.add("popper-cross"); crossElement.classList.add("popper-cross");
crossElement.setAttribute("data-id", item.id()); crossElement.setAttribute("data-id", item.id());
crossElement.style.zIndex="2" crossElement.style.zIndex = "2"
crossesContainer.current?.appendChild(crossElement); crossesContainer.current?.appendChild(crossElement);
crossElement.addEventListener("mouseup", () =>{ crossElement.addEventListener("mouseup", () => {
setStartRemove(node.id()) setStartRemove(node.id())
} }
); );
return crossElement; return crossElement;
}, },
@ -491,14 +515,14 @@ nodesInView
const gearElement = document.createElement("div"); const gearElement = document.createElement("div");
gearElement.classList.add("popper-gear"); gearElement.classList.add("popper-gear");
gearElement.setAttribute("data-id", item.id()); gearElement.setAttribute("data-id", item.id());
gearElement.style.zIndex="1" gearElement.style.zIndex = "1"
gearsContainer.current?.appendChild(gearElement); gearsContainer.current?.appendChild(gearElement);
gearElement.addEventListener("mouseup", (e) => { gearElement.addEventListener("mouseup", (e) => {
console.log("шестерня") console.log("шестерня")
// setOpenedModalSettings( // setOpenedModalSettings(
// findQuestionById(quizId, node.id().split(" ").pop() || "").index // findQuestionById(quizId, node.id().split(" ").pop() || "").index
// ); // );
}); });
return gearElement; return gearElement;
}, },

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; return useQuestionsStore.getState().questions.find(q => q.id === questionId) || null;
}; };
export const getQuestionByContentId = (questionContentId: string | null) => { export const getQuestionByContentId = (questionContentId: string | null) => {
console.log("questionContentId " + questionContentId)
if (questionContentId === null) return null; 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 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});
}