можно удалять корневой узел
This commit is contained in:
parent
e792c85771
commit
a15e697f91
@ -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(() =>{
|
||||
if (modalQuestionTargetContentId.length !== 0 && modalQuestionParentContentId.length !== 0) {
|
||||
console.log("был выбран вопрос " + modalQuestionTargetContentId)
|
||||
}
|
||||
useEffect(() => {
|
||||
if (modalQuestionTargetContentId.length !== 0 && modalQuestionParentContentId.length !== 0) {
|
||||
console.log("был выбран вопрос " + modalQuestionTargetContentId)
|
||||
}
|
||||
|
||||
}, [modalQuestionTargetContentId])
|
||||
}, [modalQuestionTargetContentId])
|
||||
|
||||
const addNode = ({ parentNodeContentId }: { parentNodeContentId: string }) => {
|
||||
console.log("dragQuestionContentId " + dragQuestionContentId)
|
||||
@ -151,53 +152,76 @@ useEffect(() =>{
|
||||
}
|
||||
]).layout(lyopts).run()
|
||||
} else {
|
||||
enqueueSnackbar("Добавляемый вопрос не найден")
|
||||
}
|
||||
enqueueSnackbar("Добавляемый вопрос не найден")
|
||||
}
|
||||
}
|
||||
|
||||
const clearDataAfterAddNode = ({ parentNodeContentId, targetQuestion, parentNodeChildren }: { parentNodeContentId: string, targetQuestion: AnyQuizQuestion, parentNodeChildren:number }) => {
|
||||
console.log("записываю на бек ид родителя")
|
||||
console.log({ parentNodeContentId, targetQuestion, parentNodeChildren })
|
||||
const clearDataAfterAddNode = ({ parentNodeContentId, targetQuestion, parentNodeChildren }: { parentNodeContentId: string, targetQuestion: AnyQuizQuestion, parentNodeChildren: number }) => {
|
||||
console.log("записываю на бек ид родителя")
|
||||
console.log({ parentNodeContentId, targetQuestion, parentNodeChildren })
|
||||
//предупреждаем добавленный вопрос о том, кто его родитель
|
||||
updateQuestion(targetQuestion.content.id, question => {
|
||||
question.content.rule.parentId = parentNodeContentId
|
||||
question.content.rule.main = []
|
||||
})
|
||||
updateQuestion(targetQuestion.content.id, question => {
|
||||
question.content.rule.parentId = parentNodeContentId
|
||||
question.content.rule.main = []
|
||||
})
|
||||
|
||||
//Если детей больше 1 - предупреждаем стор вопросов об открытии модалки ветвления
|
||||
if (parentNodeChildren > 1) {
|
||||
updateOpenedModalSettingsId(parentNodeContentId)
|
||||
} else {
|
||||
//Если ребёнок первый - добавляем его родителю как дефолтный
|
||||
updateQuestion(parentNodeContentId, question => question.content.rule.default = targetQuestion.content.id)
|
||||
}
|
||||
//Если детей больше 1 - предупреждаем стор вопросов об открытии модалки ветвления
|
||||
if (parentNodeChildren > 1) {
|
||||
updateOpenedModalSettingsId(parentNodeContentId)
|
||||
} else {
|
||||
//Если ребёнок первый - добавляем его родителю как дефолтный
|
||||
updateQuestion(parentNodeContentId, question => question.content.rule.default = targetQuestion.content.id)
|
||||
}
|
||||
}
|
||||
|
||||
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()
|
||||
|
||||
|
||||
if (targetQuestion && parentQuestion) {
|
||||
clearDataAfterRemoveNode({targetQuestionId: targetQuestion.id, parentQuestionId: parentQuestion.source})
|
||||
const targetQuestionContentId = cy?.$('#' + targetNodeContentId)?.data().id
|
||||
|
||||
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}) => {
|
||||
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 = ""
|
||||
})
|
||||
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(() => {
|
||||
@ -227,7 +251,7 @@ const clearDataAfterRemoveNode = ({targetQuestionId, parentQuestionId}:{targetQu
|
||||
initialPopperIcons(e)
|
||||
}
|
||||
|
||||
const lyopts = {
|
||||
const lyopts = {
|
||||
name: 'preset',
|
||||
|
||||
positions: (e) => {
|
||||
@ -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,44 +398,44 @@ console.log('PETTY', storeToNodes(questions), eles.length)
|
||||
}
|
||||
|
||||
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
|
||||
})
|
||||
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;
|
||||
|
||||
const layoutsPopper = node.popper({
|
||||
popper: {
|
||||
placement: "left",
|
||||
modifiers: [{ name: "flip", options: { boundary: node } }],
|
||||
},
|
||||
content: ([item]) => {
|
||||
const itemId = item.id();
|
||||
const itemElement = layoutsContainer.current?.querySelector(
|
||||
`.popper-layout[data-id='${itemId}']`
|
||||
);
|
||||
if (itemElement) {
|
||||
return itemElement;
|
||||
}
|
||||
const layoutsPopper = node.popper({
|
||||
popper: {
|
||||
placement: "left",
|
||||
modifiers: [{ name: "flip", options: { boundary: node } }],
|
||||
},
|
||||
content: ([item]) => {
|
||||
const itemId = item.id();
|
||||
const itemElement = layoutsContainer.current?.querySelector(
|
||||
`.popper-layout[data-id='${itemId}']`
|
||||
);
|
||||
if (itemElement) {
|
||||
return itemElement;
|
||||
}
|
||||
|
||||
const layoutElement = document.createElement("div");
|
||||
layoutElement.style.zIndex="0"
|
||||
layoutElement.classList.add("popper-layout");
|
||||
layoutElement.setAttribute("data-id", item.id());
|
||||
layoutElement.addEventListener("mouseup", () =>{
|
||||
alert("layout")
|
||||
}
|
||||
// setStartCreate(node.id())
|
||||
);
|
||||
layoutsContainer.current?.appendChild(layoutElement);
|
||||
const layoutElement = document.createElement("div");
|
||||
layoutElement.style.zIndex = "0"
|
||||
layoutElement.classList.add("popper-layout");
|
||||
layoutElement.setAttribute("data-id", item.id());
|
||||
layoutElement.addEventListener("mouseup", () => {
|
||||
alert("layout")
|
||||
}
|
||||
// setStartCreate(node.id())
|
||||
);
|
||||
layoutsContainer.current?.appendChild(layoutElement);
|
||||
|
||||
return layoutElement;
|
||||
},
|
||||
});
|
||||
return layoutElement;
|
||||
},
|
||||
});
|
||||
|
||||
const plusesPopper = node.popper({
|
||||
popper: {
|
||||
@ -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,14 +481,14 @@ 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", () =>{
|
||||
setStartRemove(node.id())
|
||||
crossElement.addEventListener("mouseup", () => {
|
||||
setStartRemove(node.id())
|
||||
|
||||
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
return crossElement;
|
||||
},
|
||||
@ -491,14 +515,14 @@ 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) => {
|
||||
gearElement.addEventListener("mouseup", (e) => {
|
||||
console.log("шестерня")
|
||||
// setOpenedModalSettings(
|
||||
// findQuestionById(quizId, node.id().split(" ").pop() || "").index
|
||||
// );
|
||||
});
|
||||
});
|
||||
|
||||
return gearElement;
|
||||
},
|
||||
|
||||
@ -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});
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user