удаление line результа при создании дерева

This commit is contained in:
Nastya 2023-12-12 18:44:18 +03:00
parent 6482598841
commit f86405ff22
6 changed files with 295 additions and 442 deletions

@ -1,13 +1,12 @@
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import Cytoscape from "cytoscape";
import { Button } from "@mui/material";
import CytoscapeComponent from "react-cytoscapejs";
import popper from "cytoscape-popper";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { updateRootContentId } from "@root/quizes/actions"
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared"
import { useQuestionsStore } from "@root/questions/store";
import { deleteQuestion, cleardragQuestionContentId, updateQuestion, updateOpenedModalSettingsId, getQuestionByContentId, clearRuleForAll } from "@root/questions/actions";
import { cleardragQuestionContentId, updateQuestion, updateOpenedModalSettingsId, getQuestionByContentId, clearRuleForAll, deleteQuestion } from "@root/questions/actions";
import { withErrorBoundary } from "react-error-boundary";
import { storeToNodes } from "./helper";
@ -112,6 +111,9 @@ interface Props {
}
let zoomTimeout = null
function CsComponent({
modalQuestionParentContentId,
modalQuestionTargetContentId,
@ -216,6 +218,7 @@ function CsComponent({
}
}
const removeNode = ({ targetNodeContentId }: { targetNodeContentId: string }) => {
const deleteNodes = [] as string[]
const deleteEdges: any = []
@ -331,6 +334,7 @@ function CsComponent({
}
useEffect(() => {
if (startCreate) {
addNode({ parentNodeContentId: startCreate });
@ -348,7 +352,6 @@ function CsComponent({
const readyLO = (e) => {
console.log('REAdy')
if (e.cy.data('firstNode') === 'nonroot') {
e.cy.data('firstNode', 'root')
e.cy.nodes().sort((a, b) => (a.data('root') ? 1 : -1)).layout(lyopts).run()
@ -433,7 +436,6 @@ function CsComponent({
task.task.forEach(n => {
const width = n.data('subtreeWidth')
console.log('ORORORORO', n.data(), yoffset, width, oldPos, task.parent.data('subtreeWidth'))
n.data('oldPos', { x: 250 * n.data('layer'), y: yoffset + width / 2 })
yoffset += width
queue.push({ task: n.cy().edges(`[source="${n.id()}"]`).targets(), parent: n })
@ -462,7 +464,6 @@ function CsComponent({
}
useEffect(() => {
console.log('KEKEKE')
document.querySelector("#root")?.addEventListener("mouseup", cleardragQuestionContentId);
const cy = cyRef.current;
const eles = cy?.add(storeToNodes(questions.filter((question: AnyTypedQuizQuestion) => (question.type !== "result" && question.type !== null))))
@ -510,7 +511,6 @@ function CsComponent({
if (!container) {
return;
}
console.log('POP')
container.style.overflow = "hidden";
@ -540,7 +540,6 @@ function CsComponent({
const bb = n.boundingBox()
return bb.x2 > ext.x1 && bb.x1 < ext.x2 && bb.y2 > ext.y1 && bb.y1 < ext.y2
})
console.log('POPE')
nodesInView
.toArray()
@ -553,7 +552,6 @@ function CsComponent({
modifiers: [{ name: "flip", options: { boundary: node } }],
},
content: ([item]) => {
console.log('POPPER', item.id())
const itemId = item.id();
const itemElement = layoutsContainer.current?.querySelector(
`.popper-layout[data-id='${itemId}']`
@ -583,7 +581,6 @@ function CsComponent({
modifiers: [{ name: "flip", options: { boundary: node } }],
},
content: ([item]) => {
console.log('POPPER+', item.id())
const itemId = item.id();
const itemElement = plusesContainer.current?.querySelector(
`.popper-plus[data-id='${itemId}']`
@ -612,7 +609,6 @@ function CsComponent({
modifiers: [{ name: "flip", options: { boundary: node } }],
},
content: ([item]) => {
console.log('POPPERx', item.id())
const itemId = item.id();
const itemElement = crossesContainer.current?.querySelector(
`.popper-cross[data-id='${itemId}']`
@ -643,7 +639,6 @@ function CsComponent({
modifiers: [{ name: "flip", options: { boundary: node } }],
},
content: ([item]) => {
console.log('POPPERg', item.id())
const itemId = item.id();
if (item.cy().edges(`[target="${itemId}"]`).sources().length === 0) {
return;
@ -670,7 +665,6 @@ function CsComponent({
});
const update = async () => {
console.log('POPPERi=u', item.id())
await plusesPopper.update();
await crossesPopper.update();
await gearsPopper.update();
@ -678,7 +672,11 @@ function CsComponent({
};
const onZoom = (event: AbstractEventObject) => {
console.log('ZOOOOM')
if (zoomTimeout) clearTimeout(zoomTimeout)
zoomTimeout = setTimeout(() => {
update()
}, 300)
const zoom = event.cy.zoom();
//update();
@ -735,13 +733,13 @@ function CsComponent({
};
//node?.on("position", update);
let pressed = false
let pressed = false
let hide = false
cy?.on('mousedown',() => {pressed = true})
cy?.on('mouseup',() => {
cy?.on('mousedown', () => { pressed = true })
cy?.on('mouseup', () => {
pressed = false
hide = false
const gc = gearsContainer.current
if (gc) gc.style.display = 'block'
@ -751,46 +749,29 @@ let pressed = false
if (pc) pc.style.display = 'block'
if (xc) xc.style.display = 'block'
if (lc) lc.style.display = 'block'
update()
update()
})
cy?.on('mousemove',() => {
cy?.on('mousemove', () => {
if (pressed && !hide) {
hide = true
const gc = gearsContainer.current
if (gc) gc.style.display = 'none'
const pc = plusesContainer.current
const xc = crossesContainer.current
const lc = layoutsContainer.current
if (pc) pc.style.display = 'none'
if (xc) xc.style.display = 'none'
if (lc) lc.style.display = 'block'
const pc = plusesContainer.current
const xc = crossesContainer.current
const lc = layoutsContainer.current
if (pc) pc.style.display = 'none'
if (xc) xc.style.display = 'none'
if (lc) lc.style.display = 'block'
}
});
});
cy?.on("zoom render", onZoom);
});
};
return (
<>
<Button
sx={{
mb: "20px",
height: "27px",
color: "#7E2AEA",
textDecoration: "underline",
fontSize: "16px",
}}
variant="text"
onClick={() => {
//код сюда
}}
>
Выровнять
</Button>
<CytoscapeComponent
wheelSensitivity={0.1}
elements={[]}

@ -1,6 +1,6 @@
import { Box } from "@mui/material"
import { useEffect, useRef, useState } from "react";
import { updateDragQuestionContentId, updateQuestion } from "@root/questions/actions"
import { deleteQuestion, updateDragQuestionContentId, updateQuestion } from "@root/questions/actions"
import { updateRootContentId } from "@root/quizes/actions"
import { useCurrentQuiz } from "@root/quizes/hooks"
import { useQuestionsStore } from "@root/questions/store"
@ -11,8 +11,9 @@ interface Props {
modalQuestionTargetContentId: string;
}
export const FirstNodeField = ({ setOpenedModalQuestions, modalQuestionTargetContentId }: Props) => {
const quiz = useCurrentQuiz();
const { dragQuestionContentId } = useQuestionsStore()
const { dragQuestionContentId, questions } = useQuestionsStore()
const Container = useRef<HTMLDivElement | null>(null);
const modalOpen = () => setOpenedModalQuestions(true)
@ -22,6 +23,11 @@ export const FirstNodeField = ({ setOpenedModalQuestions, modalQuestionTargetCon
if (dragQuestionContentId) {
updateRootContentId(quiz?.id, dragQuestionContentId)
updateQuestion(dragQuestionContentId, (question) => question.content.rule.parentId = "root")
//если были результаты - удалить
questions.forEach((q) => {
if (q.type === 'result') deleteQuestion(q.id)
})
}
} else {
enqueueSnackbar("Нет информации о взятом опроснике")
@ -44,6 +50,10 @@ export const FirstNodeField = ({ setOpenedModalQuestions, modalQuestionTargetCon
if (modalQuestionTargetContentId) {
updateRootContentId(quiz?.id, modalQuestionTargetContentId)
updateQuestion(modalQuestionTargetContentId, (question) => question.content.rule.parentId = "root")
//если были результаты - удалить
questions.forEach((q) => {
if (q.type === 'result') deleteQuestion(q.id)
})
}
} else {
enqueueSnackbar("Нет информации о взятом опроснике")

@ -11,7 +11,7 @@ import {
useMediaQuery,
useTheme,
} from "@mui/material";
import { copyQuestion, deleteQuestion, updateOpenBranchingPanel, updateDesireToOpenABranchingModal } from "@root/questions/actions";
import { copyQuestion, deleteQuestion, updateOpenBranchingPanel, updateDesireToOpenABranchingModal, updateOpenedModalSettingsId, clearRuleForAll } from "@root/questions/actions";
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import { CopyIcon } from "../../assets/icons/questionsPage/CopyIcon";
import Branching from "../../assets/icons/questionsPage/branching";
@ -22,7 +22,7 @@ import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { enqueueSnackbar } from "notistack";
import { useQuestionsStore } from "@root/questions/store";
import { updateOpenedModalSettingsId } from "@root/questions/actions";
import { updateRootContentId } from "@root/quizes/actions";
interface Props {
switchState: string;
@ -40,7 +40,7 @@ export default function ButtonsOptions({
const isMobile = useMediaQuery(theme.breakpoints.down(790));
const isWrappMiniButtonSetting = useMediaQuery(theme.breakpoints.down(920));
const quiz = useCurrentQuiz();
const { openBranchingPanel } = useQuestionsStore.getState()
const { questions } = useQuestionsStore.getState()
const openedModal = () => {
updateOpenedModalSettingsId(question.id)

@ -33,7 +33,6 @@ export const ResultSettings = () => {
isReadyToLeave = false;
}
});
console.log(`setting isReadyToLeaveRef to ${isReadyToLeave}`);
isReadyToLeaveRef.current = isReadyToLeave;
}, [results])

@ -46,7 +46,6 @@ export const Number = ({ currentQuestion }: NumberProps) => {
const max = window.Number(currentQuestion.content.range.split("—")[1]);
useEffect(() => {
console.log("ans", currentQuestion.content.start);
if (answer) {
setMinRange(answer.split("—")[0]);
setMaxRange(answer.split("—")[1]);

646
yarn.lock

File diff suppressed because it is too large Load Diff