функция переключения на графы по нажатию на кнопку ветвление

src/pages/Questions/AnswerDraggableList/AnswerItem.tsx

@@ -1,7 +1,7 @@
 import { MessageIcon } from "@icons/messagIcon";
 import { PointsIcon } from "@icons/questionsPage/PointsIcon";
 import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
-import { TextareaAutosize }   from "@mui/base/TextareaAutosize";
+import TextareaAutosize   from "@mui/base/TextareaAutosize";
 import {
     Box,
     FormControl,

src/pages/Questions/BranchingPanel/index.tsx

@@ -1,15 +1,13 @@
 import { Box, Typography, Switch, useTheme } from "@mui/material";
 
 import { QuestionsList } from "./QuestionsList";
+import { updateOpenBranchingPanel } from "@root/questions/actions";
+import {useQuestionsStore} from "@root/questions/store";
 
-type BranchingPanelProps = {
-  active: boolean;
-  setActive: (active: boolean) => void;
-};
 
-export const BranchingPanel = ({ active, setActive }: BranchingPanelProps) => {
+export const BranchingPanel = () => {
   const theme = useTheme();
-
+    const {openBranchingPanel} = useQuestionsStore.getState()
   return (
     <Box sx={{ userSelect: "none", maxWidth: "350px", width: "100%" }}>
       <Box
@@ -24,8 +22,11 @@ export const BranchingPanel = ({ active, setActive }: BranchingPanelProps) => {
         }}
       >
         <Switch
-          value={active}
+          value={openBranchingPanel}
-          onChange={(_, value) => setTimeout(() => setActive(value), 10)}
+          onChange={(_, value) => {
+              setTimeout(() => updateOpenBranchingPanel(!value), 10)
+          console.log(openBranchingPanel)
+          }}
           sx={{
             width: 50,
             height: 30,
@@ -79,7 +80,7 @@ export const BranchingPanel = ({ active, setActive }: BranchingPanelProps) => {
           </Typography>
         </Box>
       </Box>
-      { active && <QuestionsList /> }
+      { openBranchingPanel === true && <QuestionsList /> }
     </Box>
   );
 };

src/pages/Questions/ButtonsOptions.tsx

@@ -11,7 +11,7 @@ import {
     useMediaQuery,
     useTheme,
 } from "@mui/material";
-import { copyQuestion, deleteQuestion, updateQuestion } from "@root/questions/actions";
+import {copyQuestion, deleteQuestion, updateOpenBranchingPanel, updateQuestion} from "@root/questions/actions";
 import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
 import { CopyIcon } from "../../assets/icons/questionsPage/CopyIcon";
 import Branching from "../../assets/icons/questionsPage/branching";
@@ -20,6 +20,7 @@ import { HideIcon } from "../../assets/icons/questionsPage/hideIcon";
 import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
 import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
 import { updateOpenedModalSettingsId } from "@root/questions/actions";
+import {enqueueSnackbar} from "notistack";
 
 
 interface Props {
@@ -42,6 +43,19 @@ export default function ButtonsOptions({
         updateOpenedModalSettingsId(question.id)
     };
 
+    const handleClickBranching = (_, value) => {
+        const parentId = question.content.rule.parentId
+        console.log(parentId)
+        if (parentId.length !== 0) {
+            setTimeout(() => updateOpenBranchingPanel(!value), 10)
+        } else {
+            return enqueueSnackbar("Вопрос не учавствует в ветвлении")
+        }
+
+        if (parentId ===  "root")
+            return enqueueSnackbar("У корня нет условий ветвления")
+    }
+
     const buttonSetting: {
         icon: JSX.Element;
         title: string;
@@ -78,7 +92,7 @@ export default function ButtonsOptions({
                 ),
                 title: "Ветвление",
                 value: "branching",
-                myFunc: openedModal,
+                myFunc: openedModal, handleClickBranching
             },
         ];
 

src/pages/Questions/ButtonsOptionsAndPict.tsx

@@ -23,6 +23,9 @@ import ImgIcon from "../../assets/icons/questionsPage/imgIcon";
 import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
 import { QuizQuestionVariant } from "@model/questionTypes/variant";
 import { updateOpenedModalSettingsId } from "@root/questions/actions";
+import { updateOpenBranchingPanel } from "@root/questions/actions";
+import {useQuestionsStore} from "@root/questions/store";
+import { enqueueSnackbar } from "notistack";
 
 
 interface Props {
@@ -42,6 +45,7 @@ export default function ButtonsOptionsAndPict({
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down(790));
     const isIconMobile = useMediaQuery(theme.breakpoints.down(1050));
+    const {openBranchingPanel} = useQuestionsStore.getState()
 
     useEffect(() => {
         if (question.deleteTimeoutId) {
@@ -49,6 +53,19 @@ export default function ButtonsOptionsAndPict({
         }
     }, [question]);
 
+    const handleClickBranching = (_, value) => {
+        const parentId = question.content.rule.parentId
+        console.log(parentId)
+        if (parentId.length !== 0) {
+            setTimeout(() => updateOpenBranchingPanel(!value), 10)
+        } else {
+            return enqueueSnackbar("Вопрос не учавствует в ветвлении")
+        }
+
+        if (parentId ===  "root")
+            return enqueueSnackbar("У корня нет условий ветвления")
+    }
+
     return (
         <Box
             sx={{
@@ -185,6 +202,7 @@ export default function ButtonsOptionsAndPict({
                             onMouseLeave={() => setButtonHover("")}
                             onClick={() => {
                                 updateOpenedModalSettingsId(question.id)
+                                handleClickBranching(question.id, openBranchingPanel)
                             }}
                             sx={{
                                 height: "30px",

src/pages/Questions/QuestionSwitchWindowTool.tsx

@@ -5,22 +5,19 @@ import {
 import { DraggableList } from "./DraggableList";
 import { BranchingPanel } from "./BranchingPanel";
 import { BranchingMap } from "./BranchingMap";
+import { updateOpenBranchingPanel } from "@root/questions/actions";
+import {useQuestionsStore} from "@root/questions/store";
 
-interface Props {
-    settingBranching: boolean;
-    setSettingBranching: (active: boolean) => void
-}
 
-export const QuestionSwitchWindowTool = ({settingBranching, setSettingBranching}:Props) => {
 
+export const QuestionSwitchWindowTool = () => {
+    const {openBranchingPanel} = useQuestionsStore.getState()
     return (
                 <Box sx={{ display: "flex", gap: "20px", flexWrap: "wrap" }}>
                 <Box sx={{ flexBasis: "796px" }}>
-                {settingBranching ? <BranchingMap /> : <DraggableList />}
+                    {openBranchingPanel? <BranchingMap /> : <DraggableList />}
                 </Box>
                 <BranchingPanel
-                active={settingBranching}
-                setActive={setSettingBranching}
                 />
             </Box>
     )

src/pages/Questions/QuestionsPage.tsx

@@ -24,8 +24,7 @@ export default function QuestionsPage() {
     const { openedModalSettingsId } = useQuestionsStore();
     const isMobile = useMediaQuery(theme.breakpoints.down(660));
     const quiz = useCurrentQuiz();
-
+    const openBranchingPanel = useQuestionsStore.getState()
-    const [settingBranching, setSettingBranching] = useState<boolean>(false);
     if (!quiz) return null;
 
     return (
@@ -42,7 +41,7 @@ export default function QuestionsPage() {
                 <Typography variant={"h5"}>Заголовок квиза</Typography>
                 <Button
                     sx={{
-                        display: settingBranching ? "none" : "flex",
+                        display: openBranchingPanel ? "none" : "flex",
                         fontSize: "16px",
                         lineHeight: "19px",
                         padding: 0,
@@ -55,7 +54,7 @@ export default function QuestionsPage() {
                     Свернуть всё
                 </Button>
             </Box>
-            <QuestionSwitchWindowTool settingBranching={settingBranching} setSettingBranching={setSettingBranching} />
+            <QuestionSwitchWindowTool/>
             <Box
                 sx={{
                     display: "flex",

src/stores/questions/actions.ts

@@ -389,4 +389,5 @@ export const updateOpenedModalSettingsId = (id?: string) => useQuestionsStore.se
 export const updateDragQuestionContentId = (contentId?: string) => {
     console.log("contentId " + contentId)
     useQuestionsStore.setState({dragQuestionContentId: contentId ? contentId : null});
-}
+};
+export const updateOpenBranchingPanel = (value: boolean) => useQuestionsStore.setState({openBranchingPanel: !value});

src/stores/questions/store.ts

@@ -7,12 +7,14 @@ export type QuestionsStore = {
     questions: (AnyTypedQuizQuestion | UntypedQuizQuestion);
     openedModalSettingsId: string | null;
     dragQuestionContentId: string | null;
+    openBranchingPanel: boolean;
 };
 
 const initialState: QuestionsStore = {
     questions: [],
     openedModalSettingsId: null as null,
     dragQuestionContentId: null,
+    openBranchingPanel: false,
 };
 
 export const useQuestionsStore = create<QuestionsStore>()(