удаление вопроса из списка вопросов чистит rule потомков, кнопки с карандашиком, ветвление подсвечивает вопрос и ноду

src/pages/Questions/BranchingMap/CsComponent.tsx

@@ -19,7 +19,7 @@ import type {
   AbstractEventObject,
   ElementDefinition,
 } from "cytoscape";
-import { QuestionsList } from "../BranchingPanel/QuestionsList";
+import { QuestionsList } from "../SwitchBranchingPanel/QuestionsList";
 import { enqueueSnackbar } from "notistack";
 
 type PopperItem = {
@@ -65,6 +65,14 @@ const stylesheet: Stylesheet[] = [
       "text-max-width": "80",
     },
   },
+  {
+    selector: "[?eroticeyeblink]",
+    style: {
+      "border-width": "4px",
+      "border-style": "solid",
+      "border-color": "#7e2aea",
+    },
+  },
   {
     selector: ".multiline-auto",
     style: {
@@ -112,7 +120,7 @@ export const CsComponent = ({
 }: Props) => {
   const quiz = useCurrentQuiz();
 
-  const { dragQuestionContentId, questions } = useQuestionsStore()
+  const { dragQuestionContentId, questions, desireToOpenABranchingModal } = useQuestionsStore()
   const [startCreate, setStartCreate] = useState("");
   const [startRemove, setStartRemove] = useState("");
 
@@ -122,9 +130,19 @@ export const CsComponent = ({
   const crossesContainer = useRef<HTMLDivElement | null>(null);
   const gearsContainer = useRef<HTMLDivElement | null>(null);
 
-   useLayoutEffect(() => {
+  useLayoutEffect(() => {
-     updateOpenedModalSettingsId()
+const cy = cyRef?.current
-   }, [])
+    if (desireToOpenABranchingModal) {
+    setTimeout(() => {
+      cy?.getElementById(desireToOpenABranchingModal)?.data("eroticeyeblink", true)
+    }, 250)
+    } else {
+      cy?.elements().data("eroticeyeblink", false)
+    }
+  }, [desireToOpenABranchingModal])
+  useLayoutEffect(() => {
+    updateOpenedModalSettingsId()
+  }, [])
   useEffect(() => {
     if (modalQuestionTargetContentId.length !== 0 && modalQuestionParentContentId.length !== 0) {
       addNode({ parentNodeContentId: modalQuestionParentContentId, targetNodeContentId: modalQuestionTargetContentId })
@@ -390,6 +408,7 @@ export const CsComponent = ({
     const cy = cyRef.current;
     const eles = cy?.add(storeToNodes(questions))
     cy.data('changed', true)
+    // cy.data('changed', true)
     const elecs = eles.layout(lyopts).run()
     cy?.on('add', () => cy.data('changed', true))
     cy?.fit()
@@ -665,6 +684,7 @@ export const CsComponent = ({
         cy={(cy) => {
           cyRef.current = cy;
         }}
+      // autolock
       />
       {/* <button onClick={() => {
         console.log("NODES____________________________")

src/pages/Questions/BranchingPanel/index.tsx

@@ -83,7 +83,7 @@ export const BranchingPanel = (sx?: SxProps<Theme>) => {
           </Typography>
         </Box>
       </Box>
-      { openBranchingPanel === true && <QuestionsList /> }
+      { openBranchingPanel && <QuestionsList /> }
     </Box>
   );
 };

src/pages/Questions/ButtonsOptions.tsx

@@ -11,7 +11,7 @@ import {
     useMediaQuery,
     useTheme,
 } from "@mui/material";
-import {copyQuestion, deleteQuestion, updateOpenBranchingPanel, updateQuestion} from "@root/questions/actions";
+import { copyQuestion, deleteQuestion, updateOpenBranchingPanel, updateDesireToOpenABranchingModal } from "@root/questions/actions";
 import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
 import { CopyIcon } from "../../assets/icons/questionsPage/CopyIcon";
 import Branching from "../../assets/icons/questionsPage/branching";
@@ -19,10 +19,9 @@ import Clue from "../../assets/icons/questionsPage/clue";
 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 { useCurrentQuiz } from "@root/quizes/hooks";
-import {enqueueSnackbar} from "notistack";
+import { enqueueSnackbar } from "notistack";
-import {useQuestionsStore} from "@root/questions/store";
+import { useQuestionsStore } from "@root/questions/store";
 
 
 interface Props {
@@ -42,24 +41,7 @@ export default function ButtonsOptions({
     const isWrappMiniButtonSetting = useMediaQuery(theme.breakpoints.down(920));
     const quiz = useCurrentQuiz();
 
-const {openBranchingPanel} = useQuestionsStore.getState()
+    const { openBranchingPanel } = useQuestionsStore.getState()
-    const openedModal = () => {
-        updateOpenedModalSettingsId(question.id)
-    };
-
-    const handleClickBranching = (_, value) => {
-        const parentId = question.content.rule.parentId
-        if (parentId.length === 0 ){
-            return enqueueSnackbar("Вопрос не учавствует в ветвлении")
-        }
-        if (parentId ===  "root") {
-            return enqueueSnackbar("У корня нет условий ветвления")
-        }
-        if (parentId.length !== 0) {
-            updateOpenBranchingPanel(value)
-        }
-
-    }
 
     const buttonSetting: {
         icon: JSX.Element;
@@ -97,7 +79,10 @@ const {openBranchingPanel} = useQuestionsStore.getState()
                 ),
                 title: "Ветвление",
                 value: "branching",
-                myFunc: () => handleClickBranching(question.id, openBranchingPanel),
+                myFunc: (question) => {
+                    updateOpenBranchingPanel(true)
+                    updateDesireToOpenABranchingModal(question.content.id)
+                }
             },
         ];
 
@@ -173,7 +158,7 @@ const {openBranchingPanel} = useQuestionsStore.getState()
                                     key={title}
                                     onClick={() => {
                                         SSHC(value);
-                                        myFunc();
+                                        myFunc(question);
                                     }}
                                     sx={{
                                         backgroundColor:

src/pages/Questions/ButtonsOptionsAndPict.tsx

@@ -23,8 +23,8 @@ 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 { updateOpenBranchingPanel, updateDesireToOpenABranchingModal } from "@root/questions/actions";
-import {useQuestionsStore} from "@root/questions/store";
+import { useQuestionsStore } from "@root/questions/store";
 import { enqueueSnackbar } from "notistack";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 
@@ -46,7 +46,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()
+    const { openBranchingPanel } = useQuestionsStore.getState()
     const quiz = useCurrentQuiz();
 
     useEffect(() => {
@@ -55,21 +55,6 @@ export default function ButtonsOptionsAndPict({
         }
     }, [question]);
 
-    const handleClickBranching = (_, value) => {
-        
-        const parentId = question.content.rule.parentId
-        if (parentId.length === 0 ) {
-            return enqueueSnackbar("Вопрос не учавствует в ветвлении")
-        }
-        if (parentId ===  "root") {
-            return enqueueSnackbar("У корня нет условий ветвления")
-        }
-        if (parentId.length !== 0) {
-            updateOpenBranchingPanel(value)
-        }
-
-    }
-
     return (
         <Box
             sx={{
@@ -205,7 +190,8 @@ export default function ButtonsOptionsAndPict({
                             onMouseEnter={() => setButtonHover("branching")}
                             onMouseLeave={() => setButtonHover("")}
                             onClick={() => {
-                                handleClickBranching(question.id, openBranchingPanel)
+                                updateOpenBranchingPanel(true)
+                                updateDesireToOpenABranchingModal(question.content.id)
                             }}
                             sx={{
                                 height: "30px",

src/pages/Questions/DraggableList/DraggableListItem.tsx

@@ -1,8 +1,10 @@
 import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "@model/questionTypes/shared";
 import { Box, ListItem, Typography, useTheme } from "@mui/material";
-import { memo } from "react";
+import { memo, useEffect } from "react";
 import { Draggable } from "react-beautiful-dnd";
 import QuestionsPageCard from "./QuestionPageCard";
+import { updateEditSomeQuestion } from "@root/questions/actions"
+import { useQuestionsStore } from "@root/questions/store"
 
 
 type Props = {
@@ -13,6 +15,23 @@ type Props = {
 
 function DraggableListItem({ question, isDragging, index }: Props) {
     const theme = useTheme();
+    const { editSomeQuestion } = useQuestionsStore()
+
+    useEffect(() => {
+        if (editSomeQuestion !== null) {
+            const setI = setInterval(() => {
+                let comp = document.getElementById(editSomeQuestion)
+                console.log(comp)
+                    if(comp !== null) {    
+                        clearInterval(setI)
+                        comp.scrollIntoView({behavior: 'instant'})
+                        updateEditSomeQuestion()
+                    }
+            }, 200)
+
+        }
+        console.log(editSomeQuestion)
+    }, [editSomeQuestion])
 
     return (
         <Draggable draggableId={question.id.toString()} index={index}>

src/pages/Questions/DraggableList/QuestionPageCard.tsx

@@ -68,6 +68,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
     return (
         <>
             <Paper
+            id={question.content.id}
                 data-cy="quiz-question-card"
                 sx={{
                     maxWidth: "796px",

src/pages/Questions/QuestionSwitchWindowTool.tsx

@@ -3,21 +3,20 @@ import {
     Box,
   } from "@mui/material";
 import { DraggableList } from "./DraggableList";
-import { BranchingPanel } from "./BranchingPanel";
+import { SwitchBranchingPanel } from "./SwitchBranchingPanel";
 import { BranchingMap } from "./BranchingMap";
-import { updateOpenBranchingPanel } from "@root/questions/actions";
 import {useQuestionsStore} from "@root/questions/store";
 
 
-
 export const QuestionSwitchWindowTool = () => {
     const {openBranchingPanel} = useQuestionsStore.getState()
+console.log(openBranchingPanel)
     return (
                 <Box sx={{ display: "flex", gap: "20px", flexWrap: "wrap" }}>
                 <Box sx={{ flexBasis: "796px" }}>
                     {openBranchingPanel? <BranchingMap /> : <DraggableList />}
                 </Box>
-                <BranchingPanel
+                <SwitchBranchingPanel
                 />
             </Box>
     )

src/pages/Questions/QuestionsPage.tsx

@@ -17,7 +17,7 @@ import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
 import BranchingQuestions from "./BranchingModal/BranchingQuestionsModal"
 import { QuestionSwitchWindowTool } from "./QuestionSwitchWindowTool";
 import { useQuestionsStore } from "@root/questions/store";
-import { updateOpenBranchingPanel } from "@root/questions/actions";
+import { updateOpenBranchingPanel, updateEditSomeQuestion } from "@root/questions/actions";
 
 
 export default function QuestionsPage() {
@@ -27,7 +27,8 @@ export default function QuestionsPage() {
     const quiz = useCurrentQuiz();
     const {openBranchingPanel} = useQuestionsStore.getState()
     useLayoutEffect(() => {
-        updateOpenBranchingPanel(true)
+        updateOpenBranchingPanel(false)
+        updateEditSomeQuestion()
     },[])
 
     const ref = useRef()
@@ -38,6 +39,7 @@ export default function QuestionsPage() {
         <>
             <Box
                 ref={ref}
+                id="QuestionsPage"
                 sx={{
                     maxWidth: "796px",
                     width: "100%",
@@ -84,21 +86,7 @@ export default function QuestionsPage() {
                     <AddPlus />
                 </IconButton>
 
-                <Button
+                
-                    onClick={() => {
-                        ref.current?.scrollIntoView({
-                            behavior: 'smooth'
-                           }
-                        )}}
-                    sx={{
-                        display: isMobile ? "none" : "block",
-                        position: "fixed",
-                        right: isMobile ? "60px" : "400px",
-                        bottom: "75px",
-                    }}
-                >
-                    вверх
-                </Button>
                 <Box sx={{ display: "flex", gap: "8px", marginLeft: "auto" }}>
                     <Button
                         variant="outlined"

src/pages/Questions/SwitchBranchingPanel/QuestionsList.tsx

@@ -1,13 +1,15 @@
 import { useParams } from "react-router-dom";
-import { Box, Button, Typography } from "@mui/material";
+import { Box, Button, IconButton, Typography } from "@mui/material";
 import { ReactComponent as CheckedIcon } from "@icons/checked.svg";
 import { useQuestionsStore } from "@root/questions/store";
 import { updateDragQuestionContentId } from "@root/questions/actions";
 import { useEffect } from "react";
 import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "@model/questionTypes/shared";
+import { Pencil } from "../../startPage/Sidebar/icons/Pencil";
+import {updateOpenBranchingPanel, updateEditSomeQuestion} from "@root/questions/actions"
 
 
-const getItemStyle = (isDragging:any, draggableStyle:any) => ({
+const getItemStyle = (isDragging: any, draggableStyle: any) => ({
   // some basic styles to make the items look a bit nicer
   userSelect: "none",
   padding: 5 * 2,
@@ -22,7 +24,7 @@ const getItemStyle = (isDragging:any, draggableStyle:any) => ({
 type AnyQuestion = UntypedQuizQuestion | AnyTypedQuizQuestion
 
 export const QuestionsList = () => {
-  const { questions } = useQuestionsStore()
+  const { questions, desireToOpenABranchingModal } = useQuestionsStore()
 
   return (
     <Box sx={{ padding: "15px" }}>
@@ -51,11 +53,11 @@ export const QuestionsList = () => {
         }}
       >
         {/* тут нужно будет фильтровать с проверкой, что вопрос имеет тип*/}
-        {questions.filter((q:AnyQuestion) => q.type).map(({ title, id, content }, index) => (
+        {questions.filter((q: AnyQuestion) => q.type).map(({ title, content }, index) => (
-              <Button
+          <Button
-              onMouseDown={() => {//Разрешаем добавить этот вопрос если у него нет родителя (не добавляли ещё в дерево)
+            onMouseDown={() => {//Разрешаем добавить этот вопрос если у него нет родителя (не добавляли ещё в дерево)
-                if (!content.rule.parentId) updateDragQuestionContentId(content.id)
+              if (!content.rule.parentId) updateDragQuestionContentId(content.id)
-              }}
+            }}
             key={index}
             sx={{
               width: "100%",
@@ -66,6 +68,7 @@ export const QuestionsList = () => {
               padding: "12px",
               background: "#FFFFFF",
               borderRadius: "8px",
+              border: desireToOpenABranchingModal === content.id ? "4px solid #7e2aea" : "none",
               marginBottom: "20px",
               boxShadow: "0px 10px 30px #e7e7e7",
               backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='rgb(154, 154, 175)' stroke-width='2' stroke-dasharray='8 8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
@@ -73,13 +76,21 @@ export const QuestionsList = () => {
               "&:last-child": { marginBottom: 0 },
             }}
           >
-            <Typography sx={{  width: "100%", color: content.rule.parentId ? "#9A9AAF" : "#000" }}>
+            <Typography sx={{ width: "100%", color: content.rule.parentId ? "#9A9AAF" : "#000" }}>
               {title || "нет заголовка"}
             </Typography>
+            <IconButton
+              onClick={() => {
+                updateOpenBranchingPanel(false)
+                updateEditSomeQuestion(content.id)
+              }}
+            >
+              <Pencil />
+            </IconButton>
             {content.rule.parentId && <CheckedIcon />}
           </Button>
-              
+
-          
+
         ))}
       </Box>
     </Box>

src/pages/Questions/SwitchBranchingPanel/index.tsx

@@ -0,0 +1,91 @@
+import {Box, Typography, Switch, useTheme, Button, useMediaQuery} from "@mui/material";
+
+import { QuestionsList } from "./QuestionsList";
+import { updateOpenBranchingPanel } from "@root/questions/actions";
+import {useQuestionsStore} from "@root/questions/store";
+import {useRef} from "react";
+
+
+export const SwitchBranchingPanel = () => {
+  const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down(660));
+    const {openBranchingPanel} = useQuestionsStore.getState()
+    console.log(openBranchingPanel)
+  const ref = useRef()
+  return (
+    <Box sx={{ userSelect: "none", maxWidth: "350px", width: "100%" }}>
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          gap: "15px",
+          padding: "18px",
+          background: "#fff",
+          borderRadius: "12px",
+          boxShadow: "0px 10px 30px #e7e7e7",
+        }}
+      >
+        <Switch
+          value={openBranchingPanel}
+          onChange={(_, value) => {
+            console.log("меняю на " + value)
+              updateOpenBranchingPanel(value)
+          }}
+          sx={{
+            width: 50,
+            height: 30,
+            padding: 0,
+            "& .MuiSwitch-switchBase": {
+              padding: 0,
+              margin: "2px",
+              transitionDuration: "300ms",
+              "&.Mui-checked": {
+                transform: "translateX(20px)",
+                color: theme.palette.brightPurple.main,
+                "& + .MuiSwitch-track": {
+                  backgroundColor: "#E8DCF9",
+                  opacity: 1,
+                  border: 0,
+                },
+                "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 },
+              },
+              "&.Mui-disabled .MuiSwitch-thumb": {
+                color:
+                  theme.palette.mode === "light"
+                    ? theme.palette.grey[100]
+                    : theme.palette.grey[600],
+              },
+              "&.Mui-disabled + .MuiSwitch-track": {
+                opacity: theme.palette.mode === "light" ? 0.7 : 0.3,
+              },
+            },
+            "& .MuiSwitch-thumb": {
+              boxSizing: "border-box",
+              width: 25,
+              height: 25,
+            },
+            "& .MuiSwitch-track": {
+              borderRadius: 13,
+              backgroundColor:
+                theme.palette.mode === "light" ? "#E9E9EA" : "#39393D",
+              opacity: 1,
+              transition: theme.transitions.create(["background-color"], {
+                duration: 500,
+              }),
+            },
+          }}
+        />
+        <Box>
+          <Typography ref={ref} sx={{ fontWeight: "bold", color: "#4D4D4D" }}>
+            Логика ветвления
+          </Typography>
+          <Typography sx={{ color: "#4D4D4D", fontSize: "12px" }}>
+            Настройте связи между вопросами
+          </Typography>
+        </Box>
+        
+      </Box>
+      { openBranchingPanel && <QuestionsList /> }
+    </Box>
+  );
+};

src/stores/questions/actions.ts

@@ -308,8 +308,8 @@ export const createTypedQuestion = async (
 });
 
 export const deleteQuestion = async (questionId: string, quizId: string) => requestQueue.enqueue(async () => {
-
+    const { questions } = useQuestionsStore.getState()
-    const question = useQuestionsStore.getState().questions.find(q => q.id === questionId);
+    const question = questions.find(q => q.id === questionId);
     if (!question) return;
 
     if (question.type === null) {
@@ -322,6 +322,27 @@ export const deleteQuestion = async (questionId: string, quizId: string) => requ
         if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам
             updateRootContentId(quizId, "")
             clearRoleForAll()
+        } else if (question.content.rule.parentId.length > 0) { //удалить из стора вопрос из дерева и очищаем его потомков
+            const clearQuestions = [] as string[]
+
+            const getChildren = (parentQuestion: AnyTypedQuizQuestion) => {
+                questions.forEach((targetQuestion) => {
+                    if (targetQuestion.content.rule.parentId === parentQuestion.content.id) {//если у вопроса совпал родитель с родителем => он потомок, в кучу его
+                        if (!clearQuestions.includes(targetQuestion.content.id)) clearQuestions.push(targetQuestion.content.id)
+                        getChildren(targetQuestion) //и ищем его потомков
+                    }
+                })
+            }
+            getChildren(question)
+            //чистим потомков от инфы ветвления
+            clearQuestions.forEach((id) => {
+                updateQuestion(id, question => {
+                    question.content.rule.parentId = ""
+                    question.content.rule.main = []
+                    question.content.rule.default = ""
+                })
+            })
+
         }
 
         removeQuestion(questionId);
@@ -394,7 +415,7 @@ export const getQuestionByContentId = (questionContentId: string | null) => {
     if (questionContentId === null) return null;
     return useQuestionsStore.getState().questions.find(q => {
         if (q.type === null) return false;
-        
+
         return (q.content.id === questionContentId);
     }) || null;
 };
@@ -417,4 +438,20 @@ export const clearRoleForAll = () => {
     });
 }
 
-export const updateOpenBranchingPanel = (value: boolean) => useQuestionsStore.setState({openBranchingPanel: !value});
+export const updateOpenBranchingPanel = (value: boolean) => useQuestionsStore.setState({ openBranchingPanel: value });
+
+
+let UDTOABM: ReturnType<typeof setTimeout>;
+export const updateDesireToOpenABranchingModal = (contentId: string) => {
+    useQuestionsStore.setState({ desireToOpenABranchingModal: contentId })
+    clearTimeout(UDTOABM)
+    UDTOABM = setTimeout(() => {
+        useQuestionsStore.setState({ desireToOpenABranchingModal: null })
+    }, 7000)
+}
+export const clearDesireToOpenABranchingModal = () => {
+    useQuestionsStore.setState({ desireToOpenABranchingModal: null })
+}
+export const updateEditSomeQuestion = (contentId?: string) => {
+    useQuestionsStore.setState({ editSomeQuestion: contentId === undefined ? null : contentId })
+}

src/stores/questions/store.ts

@@ -8,6 +8,8 @@ export type QuestionsStore = {
     openedModalSettingsId: string | null;
     dragQuestionContentId: string | null;
     openBranchingPanel: boolean;
+    desireToOpenABranchingModal: string | null;
+    editSomeQuestion: string | null;
 };
 
 const initialState: QuestionsStore = {
@@ -15,6 +17,9 @@ const initialState: QuestionsStore = {
     openedModalSettingsId: null as null,
     dragQuestionContentId: null,
     openBranchingPanel: false,
+    desireToOpenABranchingModal: null as null,
+    editSomeQuestion: null as null,
+
 };
 
 export const useQuestionsStore = create<QuestionsStore>()(