diff --git a/src/assets/icons/questionsPage/EditIcon.tsx b/src/assets/icons/questionsPage/EditIcon.tsx
new file mode 100644
index 00000000..61e7090e
--- /dev/null
+++ b/src/assets/icons/questionsPage/EditIcon.tsx
@@ -0,0 +1,35 @@
+import { FC } from "react";
+import { Box } from "@mui/material";
+
+export const EditIcon: FC = () => (
+
+
+
+);
diff --git a/src/pages/Questions/BranchingMap/CsComponent.tsx b/src/pages/Questions/BranchingMap/CsComponent.tsx
index 2aba1a35..c1dfccc8 100644
--- a/src/pages/Questions/BranchingMap/CsComponent.tsx
+++ b/src/pages/Questions/BranchingMap/CsComponent.tsx
@@ -4,8 +4,6 @@ import { clearRuleForAll } from "@root/questions/actions";
import { useQuestionsStore } from "@root/questions/store";
import { updateRootContentId } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
-import AddIcon from "@mui/icons-material/Add";
-import RemoveIcon from "@mui/icons-material/Remove";
import {
cleardragQuestionContentId,
setModalQuestionParentContentId,
@@ -15,7 +13,7 @@ import {
import { useUiTools } from "@root/uiTools/store";
import type { Core } from "cytoscape";
import { enqueueSnackbar } from "notistack";
-import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
import CytoscapeComponent from "react-cytoscapejs";
import { withErrorBoundary } from "react-error-boundary";
import { DeleteNodeModal } from "../DeleteNodeModal";
@@ -24,13 +22,15 @@ import { addNode, layoutOptions, storeToNodes } from "./helper";
import { useRemoveNode } from "./hooks/useRemoveNode";
import "./style/styles.css";
import { stylesheet } from "./style/stylesheet";
-import { Box, Button, useMediaQuery, useTheme } from "@mui/material";
-import { AlignIcon } from "@icons/questionsPage/AlignIcon";
-import { ExpandIcon } from "@icons/questionsPage/ExpandIcon";
+import { Box, useMediaQuery, useTheme } from "@mui/material";
+import { InfoBanner } from "./InfoBanner/InfoBanner";
+import { PositionControl } from "./PositionControl/PositionControl";
+import { ZoomControl } from "./ZoomControl/ZoomControl";
function CsComponent() {
const theme = useTheme();
- const isMobile = useMediaQuery(theme.breakpoints.down(660));
+ const isMobile = useMediaQuery(theme.breakpoints.down(650));
+ const [isBannerVisible, setBannerVisible] = useState(true);
const desireToOpenABranchingModal = useUiTools(
(state) => state.desireToOpenABranchingModal,
);
@@ -107,108 +107,9 @@ function CsComponent() {
>
-
-
-
-
-
-
-
-
+ {isBannerVisible && }
+
+
>;
+};
+
+export const InfoBanner: FC = ({ setBannerVisible }) => {
+ const theme = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down(650));
+ return (
+
+
+
+ Добавьте больше вопросов кнопкой
+
+
+
+
+
+
+ Настраивайте условия их отображения в квизе с помощью
+
+
+
+
+ setBannerVisible(false)}
+ >
+
+
+
+ );
+};
diff --git a/src/pages/Questions/BranchingMap/PositionControl/PositionControl.tsx b/src/pages/Questions/BranchingMap/PositionControl/PositionControl.tsx
new file mode 100644
index 00000000..c49d1f09
--- /dev/null
+++ b/src/pages/Questions/BranchingMap/PositionControl/PositionControl.tsx
@@ -0,0 +1,64 @@
+import { Box, Button, useMediaQuery, useTheme } from "@mui/material";
+import { ExpandIcon } from "@icons/questionsPage/ExpandIcon";
+import { AlignIcon } from "@icons/questionsPage/AlignIcon";
+import { FC, MutableRefObject } from "react";
+import { Core } from "cytoscape";
+
+type PositionControlProps = {
+ cyRef: MutableRefObject;
+};
+
+export const PositionControl: FC = ({ cyRef }) => {
+ const theme = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down(650));
+
+ return (
+
+
+
+
+ );
+};
diff --git a/src/pages/Questions/BranchingMap/ZoomControl/ZoomControl.tsx b/src/pages/Questions/BranchingMap/ZoomControl/ZoomControl.tsx
new file mode 100644
index 00000000..0450d483
--- /dev/null
+++ b/src/pages/Questions/BranchingMap/ZoomControl/ZoomControl.tsx
@@ -0,0 +1,72 @@
+import { Box, Button, useMediaQuery, useTheme } from "@mui/material";
+import { FC, MutableRefObject } from "react";
+import AddIcon from "@mui/icons-material/Add";
+import RemoveIcon from "@mui/icons-material/Remove";
+import { Core } from "cytoscape";
+
+type PositionControlProps = {
+ cyRef: MutableRefObject;
+};
+
+export const ZoomControl: FC = ({ cyRef }) => {
+ const theme = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down(650));
+
+ return (
+
+
+
+
+ );
+};