44 lines
1.9 KiB
TypeScript
44 lines
1.9 KiB
TypeScript
import { Box } from "@mui/material";
|
|
import { FirstNodeField } from "./FirstNodeField";
|
|
import { CsComponent } from "./CsComponent";
|
|
import { useQuestionsStore } from "@root/questions/store"
|
|
import { useCurrentQuiz } from "@root/quizes/hooks";
|
|
import { useState } from "react";
|
|
import {BranchingQuestionsModal} from "../BranchingQuestionsModal"
|
|
|
|
|
|
export const BranchingMap = () => {
|
|
const quiz = useCurrentQuiz();
|
|
const { dragQuestionContentId } = useQuestionsStore()
|
|
const [modalQuestionParentContentId, setModalQuestionParentContentId] = useState<string>("")
|
|
const [modalQuestionTargetContentId, setModalQuestionTargetContentId] = useState<string>("")
|
|
const [openedModalQuestions, setOpenedModalQuestions] = useState<boolean>(false)
|
|
|
|
|
|
|
|
return (
|
|
<Box
|
|
id="cytoscape-container"
|
|
sx={{
|
|
overflow: "hidden",
|
|
padding: "20px",
|
|
background: "#FFFFFF",
|
|
borderRadius: "12px",
|
|
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
|
|
marginBottom: "40px",
|
|
height: "521px",
|
|
border: dragQuestionContentId === null ? "none" : "#7e2aea 2px dashed"
|
|
}}
|
|
>
|
|
|
|
{
|
|
quiz?.config.haveRoot ?
|
|
<CsComponent modalQuestionParentContentId={modalQuestionParentContentId} modalQuestionTargetContentId={modalQuestionTargetContentId} setOpenedModalQuestions={setOpenedModalQuestions} setModalQuestionParentContentId={setModalQuestionParentContentId} setModalQuestionTargetContentId={setModalQuestionTargetContentId}/>
|
|
:
|
|
<FirstNodeField setOpenedModalQuestions={setOpenedModalQuestions} modalQuestionTargetContentId={modalQuestionTargetContentId}/>
|
|
}
|
|
<BranchingQuestionsModal openedModalQuestions={openedModalQuestions} setOpenedModalQuestions={setOpenedModalQuestions} setModalQuestionTargetContentId={setModalQuestionTargetContentId} />
|
|
</Box>
|
|
);
|
|
};
|