minor changes

src/pages/Questions/BranchingMap/CsComponent.tsx

@@ -1,24 +1,22 @@
 import { devlog } from "@frontend/kitui";
 import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
 import { Box, Button } from "@mui/material";
-import {
-    clearRuleForAll
-} from "@root/questions/actions";
+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 { cleardragQuestionContentId, setModalQuestionParentContentId, setModalQuestionTargetContentId, updateModalInfoWhyCantCreate, updateOpenedModalSettingsId } from "@root/uiTools/actions";
 import { useUiTools } from "@root/uiTools/store";
 import { ProblemIcon } from "@ui_kit/ProblemIcon";
-import type { Core, PresetLayoutOptions, SingularData } from "cytoscape";
+import type { Core } from "cytoscape";
 import Cytoscape from "cytoscape";
-import popper, { getPopperInstance } from "cytoscape-popper";
+import popper from "cytoscape-popper";
 import { enqueueSnackbar } from "notistack";
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import CytoscapeComponent from "react-cytoscapejs";
 import { withErrorBoundary } from "react-error-boundary";
 import { DeleteNodeModal } from "../DeleteNodeModal";
-import { addNode, calcNodePosition, storeToNodes } from "./helper";
+import { addNode, layoutOptions, storeToNodes } from "./helper";
 import { usePopper } from "./hooks/usePopper";
 import { useRemoveNode } from "./hooks/useRemoveNode";
 import "./style/styles.css";
@@ -34,22 +32,16 @@ function CsComponent() {
     const modalQuestionTargetContentId = useUiTools(state => state.modalQuestionTargetContentId);
     const trashQuestions = useQuestionsStore(state => state.questions);
     const cyRef = useRef<Core | null>(null);
-
-    const questions = useMemo(() => trashQuestions.filter(
-        (question) => question.type !== "result" && question.type !== null
-    ), [trashQuestions]);
+    const { recreatePoppers, removeAllPoppers } = usePopper({ cyRef });
+    const { removeNode } = useRemoveNode({ cyRef });
 
     const cyElements = useMemo(() => {
-        const q = questions.filter(
+        const questions = trashQuestions.filter(
             (question): question is AnyTypedQuizQuestion => question.type !== null && question.type !== "result"
         );
 
-        return storeToNodes(q);
-    }, [questions]);
-
-    const { recreatePoppers, removeAllPoppers } = usePopper({ cyRef });
-
-    const { removeNode } = useRemoveNode({ cyRef });
+        return storeToNodes(questions);
+    }, [trashQuestions]);
 
     useLayoutEffect(() => {
         const cy = cyRef?.current;
@@ -77,10 +69,10 @@ function CsComponent() {
 
     useEffect(function onMount() {
         updateOpenedModalSettingsId();
-        document.querySelector("#root")?.addEventListener("mouseup", cleardragQuestionContentId);
+        document.addEventListener("pointerup", cleardragQuestionContentId);
 
         return () => {
-            document.querySelector("#root")?.removeEventListener("mouseup", cleardragQuestionContentId);
+            document.removeEventListener("pointerup", cleardragQuestionContentId);
             removeAllPoppers();
         };
     }, []);
@@ -179,25 +171,3 @@ export default withErrorBoundary(CsComponent, {
         devlog(error);
     },
 });
-
-const layoutOptions: PresetLayoutOptions = {
-    name: "preset",
-    positions: calcNodePosition,
-    zoom: undefined,
-    pan: 1,
-    fit: false,
-    padding: 30,
-    animate: false,
-    animationDuration: 500,
-    animationEasing: undefined,
-    animateFilter: () => false,
-    ready: event => {
-        if (event.cy.data("firstNode") === "nonroot") {
-            event.cy.data("firstNode", "root");
-            event.cy.nodes().sort((a, b) => (a.data("root") ? 1 : -1));
-        } else {
-            event.cy.removeData("firstNode");
-        }
-    },
-    transform: (_, p) => p,
-};

src/pages/Questions/BranchingMap/helper.ts

@@ -1,14 +1,13 @@
-import { devlog } from "@frontend/kitui";
 import { QuizQuestionResult } from "@model/questionTypes/result";
 import { AnyTypedQuizQuestion, QuestionBranchingRule, QuestionBranchingRuleMain, UntypedQuizQuestion } from "@model/questionTypes/shared";
-import { Quiz } from "@model/quiz/quiz";
 import { createResult, getQuestionByContentId, updateQuestion } from "@root/questions/actions";
 import { useQuestionsStore } from "@root/questions/store";
 import { updateOpenedModalSettingsId } from "@root/uiTools/actions";
 import { useUiTools } from "@root/uiTools/store";
-import { Core } from "cytoscape";
+import { PresetLayoutOptions } from "cytoscape";
 import { enqueueSnackbar } from "notistack";
 
+
 interface Nodes {
     data: {
         id: string;
@@ -16,6 +15,7 @@ interface Nodes {
         parent?: string;
     };
 }
+
 interface Edges {
     data: {
         source: string;
@@ -52,6 +52,28 @@ export const storeToNodes = (questions: AnyTypedQuizQuestion[]) => {
     return [...nodes, ...edges];
 };
 
+export const layoutOptions: PresetLayoutOptions = {
+    name: "preset",
+    positions: calcNodePosition,
+    zoom: undefined,
+    pan: 1,
+    fit: false,
+    padding: 30,
+    animate: false,
+    animationDuration: 500,
+    animationEasing: undefined,
+    animateFilter: () => false,
+    ready: event => {
+        if (event.cy.data("firstNode") === "nonroot") {
+            event.cy.data("firstNode", "root");
+            event.cy.nodes().sort((a, b) => (a.data("root") ? 1 : -1));
+        } else {
+            event.cy.removeData("firstNode");
+        }
+    },
+    transform: (_, p) => p,
+};
+
 export function clearDataAfterAddNode({
     parentNodeContentId,
     targetQuestion,